ineffably · ineffably · Dec 12, 2025 · Dec 10, 2025 · Dec 10, 2025 · Dec 11, 2025
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -35,6 +35,9 @@ jobs:
       - name: Build pikcell app for Pages
         run: npm run build:app --workspace=@moxijs/pikcell
 
+      - name: Build tilemap-matic app for Pages
+        run: npm run build:app --workspace=@moxijs/tilemap-matic
+
       - name: Generate documentation
         run: npm run typedoc
 
@@ -54,6 +57,13 @@ jobs:
           cp packages/pikcell/dist/bundle.js _site/pikcell/
           cp -r packages/pikcell/assets _site/pikcell/assets
 
+          # TileMapMatic at /tilemap-matic/
+          mkdir -p _site/tilemap-matic
+          cp packages/tilemap-matic/index.html _site/tilemap-matic/
+          cp packages/tilemap-matic/index.css _site/tilemap-matic/
+          cp packages/tilemap-matic/dist/bundle.js _site/tilemap-matic/
+          cp -r packages/tilemap-matic/assets _site/tilemap-matic/assets
+
           # Package builds at /packages/*/lib/
           mkdir -p _site/packages/core/lib
           mkdir -p _site/packages/ui/lib

diff --git a/LLMS.txt b/LLMS.txt
@@ -1,5 +1,19 @@
 # MoxiJS
 
+<!-- TOC:START -->
+## API Quick Reference
+<!-- Auto-generated. Run: node scripts/generate-llm-toc.js -->
+
+### @moxijs/core
+**Classes:** ActionManager(add, getCount, hasAction, remove, removeAll) | AssetLoader(off, on) | ClientEvents(isKeyDown, isKeyUp) | CollisionManager(offCollision, onCollision) | CollisionRegistry(bitsToTags, getBit, getTag, register, tagsToBits) | Engine(addPhysicsWorld, loadStage, start, stop) | LoadingScene(destroy, hide, init, show) | ParallaxBackgroundLogic(update) | PhysicsWorld(createBody, destroy, destroyBody, disableDebugRenderer, enableDebugRenderer...) | PixelGrid(px, units) | RenderManager(render) | StateLogic(entity, init, onEnter, onExit, update) | StateMachine(addState, currentState, setState, update) | TextureFrameSequences(addSequence, getFrame, getFrameFromSequence, getFrameSequence, getSequence) | TilingParallaxLayer(resize, updateParallax)
+**Interfaces:** AsTextureFramesOptions, AssetLoaderEvents, BitmapTextOptions, BorderConfig, CellPosition, ClientEventsArgs, CollisionEvent, FallingSquaresOptions, GraphicsDrawOptions, GridOptions, LoadingAnimation, LoadingAnimationContext, LoadingSceneOptions, MSDFTextOptions, MoxiEntityClass, OnAction, OnEvent, ParallaxBackgroundOptions, ParallaxLayerOptions, ParsedShape, PhysicsBodyOptions, PhysicsDebugOptions, PhysicsShapeMetadata, PhysicsWorldOptions, PixelGridConfig, PixelPerfectOptions, PixiProps, PixiPropsWithEntity, ResizeHandlerOptions, SVGToTextureOptions, SequenceInfo, SetupMoxiArgs, SetupMoxiResult, ShapeConfig, SpriteOptions, TextDPROptions, TextOptions, TilingParallaxLayerOptions
+
+### @moxijs/ui
+**Classes:** CardPanel(destroy, getBodyContainer, getBodySize, getFooterContainer, getTitleBarContainer...) | EdgeInsets(clone, equals, horizontal, isZero, toString...) | FlatCardStyle(drawBackground, drawDragStrip, drawFooter, drawTitleBar, getBorderInsets...) | FlexContainer(addChild, layout, measure, removeAllChildren, removeChild) | FlexContainerPanel(addChild, destroy, getContentContainer, layout, measure...) | FlexLayoutEngine(compute) | LayoutDebugOverlay(dispose, hide, setOptions, show, toggle...) | LayoutEngine(layout, measure, position) | LayoutTree(addChild, computeNow, createNode, dispose, find...) | ThemeApplier(applyBackground, applyBorderColor, applyCheckmarkColor, applyPlaceholderColor, applyTextColor...) | ThemeResolver(getCheckmarkColor, getColor, getControlColor, getControlProperty, getPlaceholderColor...) | UIButton(destroy, getState, layout, measure, setEnabled...) | UICheckbox(destroy, getChecked, layout, measure, setChecked...) | UICheckboxWithLabel(destroy, getCheckbox, getChecked, getLabel, layout...) | UIFocusManager(blur, clear, destroy, focus, focusFirst...) | UILabel(getFontType, getText, isBitmapText, layout, measure...) | UIPanel(layout, measure, setBackgroundColor, setBorder, setTexture) | UIRadioButton(destroy, getSelected, layout, measure, setDisabled...) | UIRadioGroup(destroy, getValue, layout, measure, setDisabled...) | UIScrollContainer(addChild, destroy, getMaxScrollY, getScrollPaddingBottom, getScrollY...) | UISelect(destroy, getValue, layout, measure, setOptions...) | UITabs(destroy, getActiveKey, layout, measure, render...) | UITextArea(destroy, getHeight, getValue, getWidth, layout...) | UITextInput(destroy, getHeight, getValue, getWidth, layout...)
+**Interfaces:** BaseTheme, BoxModel, ButtonBackgroundStrategy, CardPanelFooter, CardPanelProps, CardPanelTitle, CardSectionDimensions, CardStyle, CardThemeColors, ComponentState, ComputedLayout, ComputedLayout, DefaultUITheme, DirtyInfo, FlatCardStyleConfig, FlexContainerPanelProps, FlexContainerProps, FlexItem, FlexLine, FlexProps, Focusable, FontProps, FormStateConfig, IFlexLayoutParticipant, IconConfig, LayoutDebugOverlayOptions, LayoutNode, LayoutStyle, LayoutTreeOptions, LayoutWrapperOptions, LayoutWrapperStyle, MeasuredLayout, MeasuredSize, NineSliceConfig, ParsedSize, RadioOption, ResolvedStyle, SelectOption, SizeConstraints, SpriteBackgroundConfig, TabItem, ThemeInfo, UIButtonProps, UICheckboxProps, UICheckboxWithLabelProps, UIFontConfig, UILabelProps, UILayerOptions, UILayoutConfig, UIPanelProps, UIRadioButtonProps, UIRadioGroupProps, UIScrollContainerProps, UISelectProps, UITabsProps, UITextAreaProps, UITextInputProps
+
+<!-- TOC:END -->
+
 > A game framework built on PIXI.js with Entity-Component-System architecture, physics integration, and UI components.
 
 ## Package: @moxijs/core

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,10 +8,12 @@
     "packages/ui",
     "packages/mini-gui",
     "packages/moxijs-examples",
-    "packages/pikcell"
+    "packages/pikcell",
+    "packages/tilemap-matic"
   ],
   "scripts": {
     "build": "npm run build --workspaces --if-present",
+    "build:moxijs": "npm run build --workspace=@moxijs/core && npm run build --workspace=@moxijs/ui && npm run build --workspace=moxijs-examples",
     "build:clean": "npm run build:clean --workspaces --if-present",
     "clean": "npm run clean --workspaces --if-present",
     "build:dev": "npm run build:dev --workspaces --if-present",
@@ -22,6 +24,7 @@
     "test:watch": "npm run test:watch --workspace=@moxijs/core",
     "test:ci": "npm run test:ci --workspace=@moxijs/core && npm run test:ci --workspace=@moxijs/ui",
     "pikcell": "npm run dev --workspace=@moxijs/pikcell",
+    "tilemap-matic": "npm run dev --workspace=@moxijs/tilemap-matic",
     "publish:dry-run": "npx ts-node scripts/dry-run-publish.ts",
     "typedoc": "npm run typedoc --workspaces --if-present"
   },

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.5] - 2025-12-11
+
+### LLM Documentation Enhancement
+
+### Added
+
+#### Documentation (`llms.txt`)
+- **API Quick Reference TOC**: Auto-generated table of contents at top of llms.txt
+  - Lists all exported classes with their key methods
+  - Lists all exported interfaces
+  - Generated via `node scripts/generate-llm-toc.js`
+  - Wrapped in `<!-- TOC:START -->` / `<!-- TOC:END -->` markers for easy regeneration
+
 ## [0.3.4] - 2025-12-09
 
 ### MSDF Font System Improvements

diff --git a/packages/core/llms.txt b/packages/core/llms.txt
@@ -1,5 +1,12 @@
 # @moxijs/core
 
+<!-- TOC:START -->
+## API Quick Reference
+<!-- Auto-generated -->
+**Classes:** ActionManager(add, getCount, hasAction, remove, removeAll) | AssetLoader(off, on) | ClientEvents(isKeyDown, isKeyUp) | CollisionManager(offCollision, onCollision) | CollisionRegistry(bitsToTags, getBit, getTag, register, tagsToBits) | Engine(addPhysicsWorld, loadStage, start, stop) | LoadingScene(destroy, hide, init, show) | ParallaxBackgroundLogic(update) | PhysicsWorld(createBody, destroy, destroyBody, disableDebugRenderer, enableDebugRenderer...) | PixelGrid(px, units) | RenderManager(render) | StateLogic(entity, init, onEnter, onExit, update) | StateMachine(addState, currentState, setState, update) | TextureFrameSequences(addSequence, getFrame, getFrameFromSequence, getFrameSequence, getSequence) | TilingParallaxLayer(resize, updateParallax)
+**Interfaces:** AsTextureFramesOptions, AssetLoaderEvents, BitmapTextOptions, BorderConfig, CellPosition, ClientEventsArgs, CollisionEvent, FallingSquaresOptions, GraphicsDrawOptions, GridOptions, LoadingAnimation, LoadingAnimationContext, LoadingSceneOptions, MSDFTextOptions, MoxiEntityClass, OnAction, OnEvent, ParallaxBackgroundOptions, ParallaxLayerOptions, ParsedShape, PhysicsBodyOptions, PhysicsDebugOptions, PhysicsShapeMetadata, PhysicsWorldOptions, PixelGridConfig, PixelPerfectOptions, PixiProps, PixiPropsWithEntity, ResizeHandlerOptions, SVGToTextureOptions, SequenceInfo, SetupMoxiArgs, SetupMoxiResult, ShapeConfig, SpriteOptions, TextDPROptions, TextOptions, TilingParallaxLayerOptions
+<!-- TOC:END -->
+
 > Game framework on PIXI.js with ECS architecture and physics.
 
 ## Install

diff --git a/packages/moxijs-examples/index.html b/packages/moxijs-examples/index.html
@@ -65,6 +65,38 @@
       </div>
     </div>
   </div>
-  <script src="dist/bundle.js"></script>
+
+  <!-- 
+    Smart Bundle Loading Strategy:
+    - In development: HtmlWebpackPlugin injects the bundle automatically
+    - In production (GitHub Pages): Fallback script below loads dist/bundle.js manually
+    - The bundle sets window._bundleLoaded = true when it executes
+    - This allows the same index.html to work in both dev and production environments
+  -->
+  <script>
+    window.addEventListener('load', function() {
+      // Wait a tick to see if HtmlWebpackPlugin injected bundle already loaded
+      setTimeout(function() {
+        if (!window._bundleLoaded) {
+          console.log('Bundle not injected, loading manually for production/GitHub Pages');
+          var script = document.createElement('script');
+          script.src = 'dist/bundle.js';
+          script.async = false;
+          script.onload = function() {
+            console.log('✅ Bundle loaded successfully from dist/bundle.js');
+            console.log('window._bundleLoaded =', window._bundleLoaded);
+          };
+          script.onerror = function(e) {
+            console.error('❌ Failed to load bundle from dist/bundle.js', e);
+          };
+          console.log('📦 Appending script tag for dist/bundle.js...');
+          document.body.appendChild(script);
+          console.log('📦 Script tag appended to body');
+        } else {
+          console.log('✅ Bundle already loaded by HtmlWebpackPlugin');
+        }
+      }, 0);
+    });
+  </script>
 </body>
 </html>
diff --git a/packages/moxijs-examples/package.json b/packages/moxijs-examples/package.json
@@ -54,6 +54,7 @@
     "@moxijs/ui": "file:../ui",
     "codemirror": "^6.0.2",
     "pikcell": "file:../pikcell",
+    "@moxijs/tilemap-matic": "file:../tilemap-matic",
     "pixi.js": "^8.14.0"
   }
 }
diff --git a/packages/moxijs-examples/src/examples/05-tools/tilemap-matic.ts b/packages/moxijs-examples/src/examples/05-tools/tilemap-matic.ts
@@ -0,0 +1,29 @@
+/**
+ * TileMapMatic Example Stub
+ * The full implementation is in the @moxijs/tilemap-matic package.
+ * This stub provides integration with the moxijs-examples gallery.
+ */
+import { initTileMapMatic } from '@moxijs/tilemap-matic';
+
+type CleanupFunction = () => void;
+
+/**
+ * Initialize TileMapMatic in the examples context
+ */
+export async function initTileMapMaticExample(): Promise<CleanupFunction> {
+  const root = document.getElementById('canvas-container');
+  if (!root) throw new Error('Canvas container not found');
+
+  // Initialize using the package
+  const cleanup = await initTileMapMatic({
+    hostElement: root,
+    width: 1280,
+    height: 720,
+    backgroundColor: 0x1a1a2e
+  });
+
+  return cleanup;
+}
+
+// Re-export the init function with the expected name pattern
+export { initTileMapMaticExample as initTileMapMatic };
diff --git a/packages/moxijs-examples/src/index.ts b/packages/moxijs-examples/src/index.ts
@@ -35,6 +35,7 @@ import { initNewtonsCradle } from './examples/06-physics/newtons-cradle';
 import { initSpriteLibrary } from './examples/05-tools/sprite-library';
 import { initSpriteEditor } from './examples/05-tools/sprite-editor';
 import { initParticleEmitterSandbox } from './examples/05-tools/particle-sandbox';
+import { initTileMapMatic } from './examples/05-tools/tilemap-matic';
 
 // CodeMirror imports
 import { EditorView, basicSetup } from 'codemirror';
@@ -74,6 +75,7 @@ import newtonsCradleSource from './examples/06-physics/newtons-cradle.ts?raw';
 import spriteLibrarySource from './examples/05-tools/sprite-library.ts?raw';
 import spriteEditorSource from './examples/05-tools/sprite-editor.ts?raw';
 import particleSandboxSource from './examples/05-tools/particle-sandbox.ts?raw';
+import tileMapMaticSource from './examples/05-tools/tilemap-matic.ts?raw';
 
 // Cleanup function type - examples can return this to clean up resources
 type CleanupFunction = () => void;
@@ -247,6 +249,12 @@ const categories: Record<string, Category> = {
         init: initSpriteEditor,
         source: spriteEditorSource
       },
+      'tilemap-matic': {
+        name: 'TileMapMatic',
+        description: 'Multi-sheet editor with project persistence and export',
+        init: initTileMapMatic,
+        source: tileMapMaticSource
+      },
       'particle-sandbox': {
         name: 'Particle Sandbox',
         description: 'Particle system editor with presets',

diff --git a/packages/moxijs-examples/tsconfig.json b/packages/moxijs-examples/tsconfig.json
@@ -15,6 +15,7 @@
     "baseUrl": ".",
     "paths": {
       "pikcell": ["../pikcell/src/index.ts"],
+      "@moxijs/tilemap-matic": ["../tilemap-matic/src/index.ts"],
       "@moxijs/mini-gui": ["../mini-gui/src/index.ts"]
     }
   },

diff --git a/packages/moxijs-examples/webpack.config.js b/packages/moxijs-examples/webpack.config.js
@@ -15,8 +15,12 @@ module.exports = (env, argv) => ({
       // Use local moxi source for development so webpack can properly handle externals
       'moxi': path.resolve(__dirname, '../core/src/index.ts'),
       '@moxijs/core': path.resolve(__dirname, '../core/src/index.ts'),
+      '@moxijs/ui': path.resolve(__dirname, '../ui/src/index.ts'),
       // Use local pikcell source for development
       'pikcell': path.resolve(__dirname, '../pikcell/src/index.ts'),
+      // Use local tilemap-matic source for development
+      'tilemap-matic': path.resolve(__dirname, '../tilemap-matic/src/index.ts'),
+      '@moxijs/tilemap-matic': path.resolve(__dirname, '../tilemap-matic/src/index.ts'),
       // Use local mini-gui for development
       '@moxijs/mini-gui': path.resolve(__dirname, '../mini-gui/src/index.ts')
     }