handoff-app 1.1.3-0 → 1.1.3-1

package/Changelog.md

@@ -41,6 +41,41 @@ block styling, and GitHub Flavored Markdown table support.
   autolinks, and task lists now render correctly. Tables are styled via Tailwind
   Typography's `.prose table` defaults.
 
+### Bug Fixes
+
+- **New components not detected in dev mode** — `npm run start` now watches
+  the parent component directories (from `config.entries.components`) for
+  newly created components. Previously, only components known at startup had
+  their files watched; adding a new component directory required restarting
+  the dev server. A new `watchComponentDirectories` watcher detects when a
+  config file (`.json` / `.js` / `.cjs`) appears in a new subdirectory,
+  reloads the runtime config, restarts the component and configuration
+  watchers, and processes the new component automatically.
+
+- **Heading anchor IDs truncated** — The markdown heading anchor generator
+  was only reading the first child node (`children[0]`) instead of the full
+  heading text, producing single-character or partial IDs (e.g. `id="u"`
+  instead of `id="using-icons-in-templates"`). A new `extractText` helper
+  recursively walks all children to build the complete anchor slug.
+
+- **Fenced code blocks without a language unstyled** — Bare ```` ``` ````
+  blocks (no language identifier) now receive the same styled treatment as
+  language-tagged blocks: toolbar, copy button, and themed background.
+  Inline code is unaffected.
+
+- **Code blocks pushing page width** — Added `min-w-0` and `max-w-full` on
+  the code block wrapper and the grid content column to prevent wide code
+  from stretching the layout and pushing the TOC off-screen.
+
+- **Frontmatter menu duplicated by auto-scan** — When a markdown page
+  defines its sidebar menu via frontmatter `menu`, the automatic directory
+  scanner no longer appends duplicate entries. Auto-scanning now only runs
+  as a fallback when no frontmatter menu is present.
+
+- **`.prose` max-width too narrow** — Overrode Tailwind Typography's default
+  `max-width: 65ch` on `.prose` to `100%` so markdown content fills the
+  available container width.
+
 ### Changed
 
 - Deleted `src/app/pages/[level1]/index.tsx` and
@@ -49,6 +84,8 @@ block styling, and GitHub Flavored Markdown table support.
   interface from `src/app/components/util/index.ts`.
 - `ComponentGuidelines` now uses `MarkdownComponents` and the remark plugins
   for consistent rendering.
+- Added `system/tokens/**` paths to `knownPaths` to prevent catch-all route
+  conflicts with dedicated token pages.
 
 ## \[1.1.2] - 2026-03-26
 

package/dist/app-builder/build.js

@@ -175,10 +175,12 @@ const watchApp = (handoff) => __awaiter(void 0, void 0, void 0, function* () {
         debounce: false,
         runtimeComponentsWatcher: null,
         runtimeConfigurationWatcher: null,
+        componentDirectoriesWatcher: null,
     };
     (0, watchers_1.watchPublicDirectory)(handoff, wss, state, chokidarConfig);
     (0, watchers_1.watchRuntimeComponents)(handoff, state, (0, watchers_1.getRuntimeComponentsPathsToWatch)(handoff));
     (0, watchers_1.watchRuntimeConfiguration)(handoff, state);
+    (0, watchers_1.watchComponentDirectories)(handoff, state, chokidarConfig);
     (0, watchers_1.watchGlobalEntries)(handoff, state, chokidarConfig);
     (0, watchers_1.watchPages)(handoff, chokidarConfig);
 });

package/dist/app-builder/watchers.d.ts

@@ -6,6 +6,7 @@ export interface WatcherState {
     debounce: boolean;
     runtimeComponentsWatcher: chokidar.FSWatcher | null;
     runtimeConfigurationWatcher: chokidar.FSWatcher | null;
+    componentDirectoriesWatcher: chokidar.FSWatcher | null;
 }
 /**
  * Watches the working public directory for changes and updates the app.
@@ -34,7 +35,7 @@ export declare const mapEntryTypeToSegment: (type: keyof ComponentListObject["en
  *
  * @returns A Map of paths to watch and their entry types
  */
-export declare const getRuntimeComponentsPathsToWatch: (handoff: Handoff) => Map<string, "template" | "js" | "scss">;
+export declare const getRuntimeComponentsPathsToWatch: (handoff: Handoff) => Map<string, "js" | "scss" | "template">;
 /**
  * Watches runtime components for changes.
  */
@@ -43,3 +44,10 @@ export declare const watchRuntimeComponents: (handoff: Handoff, state: WatcherSt
  * Watches the runtime configuration for changes.
  */
 export declare const watchRuntimeConfiguration: (handoff: Handoff, state: WatcherState) => void;
+/**
+ * Watches the parent component directories from config.entries.components
+ * for new components being added. When a new config file (e.g. button.json)
+ * appears in a new subdirectory, reloads the runtime config and restarts
+ * the component/configuration watchers so the new component is picked up.
+ */
+export declare const watchComponentDirectories: (handoff: Handoff, state: WatcherState, chokidarConfig: chokidar.WatchOptions) => void;

package/dist/app-builder/watchers.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.watchRuntimeConfiguration = exports.watchRuntimeComponents = exports.getRuntimeComponentsPathsToWatch = exports.mapEntryTypeToSegment = exports.watchGlobalEntries = exports.watchPages = exports.watchAppSource = exports.watchPublicDirectory = void 0;
+exports.watchComponentDirectories = exports.watchRuntimeConfiguration = exports.watchRuntimeComponents = exports.getRuntimeComponentsPathsToWatch = exports.mapEntryTypeToSegment = exports.watchGlobalEntries = exports.watchPages = exports.watchAppSource = exports.watchPublicDirectory = void 0;
 const chokidar_1 = __importDefault(require("chokidar"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
@@ -277,13 +277,9 @@ const watchRuntimeConfiguration = (handoff, state) => {
                         state.debounce = true;
                         try {
                             file = path_1.default.dirname(file);
-                            // Reload the Handoff instance to pick up configuration changes
                             handoff.reload();
-                            // After reloading, persist the updated client configuration
                             yield (0, client_config_1.persistClientConfig)(handoff);
-                            // Restart the runtime components watcher to track potentially updated/added/removed components
                             (0, exports.watchRuntimeComponents)(handoff, state, (0, exports.getRuntimeComponentsPathsToWatch)(handoff));
-                            // Process components based on the updated configuration and file path
                             yield (0, builder_1.default)(handoff, path_1.default.basename(file));
                         }
                         catch (e) {
@@ -299,3 +295,61 @@ const watchRuntimeConfiguration = (handoff, state) => {
     }
 };
 exports.watchRuntimeConfiguration = watchRuntimeConfiguration;
+/**
+ * Watches the parent component directories from config.entries.components
+ * for new components being added. When a new config file (e.g. button.json)
+ * appears in a new subdirectory, reloads the runtime config and restarts
+ * the component/configuration watchers so the new component is picked up.
+ */
+const watchComponentDirectories = (handoff, state, chokidarConfig) => {
+    var _a, _b, _c, _d, _e;
+    if (state.componentDirectoriesWatcher) {
+        state.componentDirectoriesWatcher.close();
+    }
+    const componentPaths = (_b = (_a = handoff.config.entries) === null || _a === void 0 ? void 0 : _a.components) !== null && _b !== void 0 ? _b : [];
+    if (componentPaths.length === 0)
+        return;
+    const dirsToWatch = [];
+    for (const componentPath of componentPaths) {
+        const resolved = path_1.default.resolve(handoff.workingPath, componentPath);
+        if (fs_extra_1.default.existsSync(resolved) && fs_extra_1.default.statSync(resolved).isDirectory()) {
+            dirsToWatch.push(resolved);
+        }
+    }
+    if (dirsToWatch.length === 0)
+        return;
+    const knownComponents = new Set(Object.keys((_e = (_d = (_c = handoff.runtimeConfig) === null || _c === void 0 ? void 0 : _c.entries) === null || _d === void 0 ? void 0 : _d.components) !== null && _e !== void 0 ? _e : {}));
+    state.componentDirectoriesWatcher = chokidar_1.default.watch(dirsToWatch, Object.assign(Object.assign({}, chokidarConfig), { depth: 1 }));
+    state.componentDirectoriesWatcher.on('add', (file) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const basename = path_1.default.basename(file);
+        const dirName = path_1.default.basename(path_1.default.dirname(file));
+        const isConfigFile = basename.endsWith('.json') || basename.endsWith('.js') || basename.endsWith('.cjs');
+        const isNewComponent = isConfigFile && basename.startsWith(dirName) && !knownComponents.has(dirName);
+        if (!isNewComponent)
+            return;
+        if (!state.debounce) {
+            state.debounce = true;
+            try {
+                logger_1.Logger.warn(`New component detected: ${dirName}. Reloading configuration...`);
+                handoff.reload();
+                knownComponents.add(dirName);
+                // Update known set with all current components
+                for (const id of Object.keys((_c = (_b = (_a = handoff.runtimeConfig) === null || _a === void 0 ? void 0 : _a.entries) === null || _b === void 0 ? void 0 : _b.components) !== null && _c !== void 0 ? _c : {})) {
+                    knownComponents.add(id);
+                }
+                yield (0, client_config_1.persistClientConfig)(handoff);
+                (0, exports.watchRuntimeComponents)(handoff, state, (0, exports.getRuntimeComponentsPathsToWatch)(handoff));
+                (0, exports.watchRuntimeConfiguration)(handoff, state);
+                yield (0, builder_1.default)(handoff, dirName);
+            }
+            catch (e) {
+                logger_1.Logger.error('Error processing new component:', e);
+            }
+            finally {
+                state.debounce = false;
+            }
+        }
+    }));
+};
+exports.watchComponentDirectories = watchComponentDirectories;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "1.1.3-0",
+  "version": "1.1.3-1",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",

package/src/app/components/util/index.ts

@@ -92,6 +92,12 @@ export const knownPaths = [
   'foundations/typography',
   'system',
   'system/component',
+  'system/tokens',
+  'system/tokens/foundations',
+  'system/tokens/foundations/colors',
+  'system/tokens/foundations/effects',
+  'system/tokens/foundations/typography',
+  'system/tokens/components',
 ];
 
 /**

package/src/app-builder/build.ts

@@ -9,7 +9,7 @@ import processComponents from '../transformers/preview/component/builder';
 import { Logger } from '../utils/logger';
 import { generateTokensApi, persistClientConfig } from './client-config';
 import { getAppPath, syncPublicFiles } from './paths';
-import { WatcherState, getRuntimeComponentsPathsToWatch, watchAppSource, watchGlobalEntries, watchPages, watchPublicDirectory, watchRuntimeComponents, watchRuntimeConfiguration } from './watchers';
+import { WatcherState, getRuntimeComponentsPathsToWatch, watchAppSource, watchComponentDirectories, watchGlobalEntries, watchPages, watchPublicDirectory, watchRuntimeComponents, watchRuntimeConfiguration } from './watchers';
 import { createWebSocketServer } from './websocket';
 
 const escapeForSingleQuotedJsString = (value: string): string => value.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
@@ -193,11 +193,13 @@ export const watchApp = async (handoff: Handoff): Promise<void> => {
     debounce: false,
     runtimeComponentsWatcher: null,
     runtimeConfigurationWatcher: null,
+    componentDirectoriesWatcher: null,
   };
 
   watchPublicDirectory(handoff, wss, state, chokidarConfig);
   watchRuntimeComponents(handoff, state, getRuntimeComponentsPathsToWatch(handoff));
   watchRuntimeConfiguration(handoff, state);
+  watchComponentDirectories(handoff, state, chokidarConfig);
   watchGlobalEntries(handoff, state, chokidarConfig);
   watchPages(handoff, chokidarConfig);
 };

package/src/app-builder/watchers.ts

@@ -15,6 +15,7 @@ export interface WatcherState {
   debounce: boolean;
   runtimeComponentsWatcher: chokidar.FSWatcher | null;
   runtimeConfigurationWatcher: chokidar.FSWatcher | null;
+  componentDirectoriesWatcher: chokidar.FSWatcher | null;
 }
 
 /**
@@ -258,13 +259,9 @@ export const watchRuntimeConfiguration = (handoff: Handoff, state: WatcherState)
             state.debounce = true;
             try {
               file = path.dirname(file);
-              // Reload the Handoff instance to pick up configuration changes
               handoff.reload();
-              // After reloading, persist the updated client configuration
               await persistClientConfig(handoff);
-              // Restart the runtime components watcher to track potentially updated/added/removed components
               watchRuntimeComponents(handoff, state, getRuntimeComponentsPathsToWatch(handoff));
-              // Process components based on the updated configuration and file path
               await processComponents(handoff, path.basename(file));
             } catch (e) {
               Logger.error('Error reloading runtime configuration:', e);
@@ -277,3 +274,68 @@ export const watchRuntimeConfiguration = (handoff: Handoff, state: WatcherState)
     });
   }
 };
+
+/**
+ * Watches the parent component directories from config.entries.components
+ * for new components being added. When a new config file (e.g. button.json)
+ * appears in a new subdirectory, reloads the runtime config and restarts
+ * the component/configuration watchers so the new component is picked up.
+ */
+export const watchComponentDirectories = (handoff: Handoff, state: WatcherState, chokidarConfig: chokidar.WatchOptions) => {
+  if (state.componentDirectoriesWatcher) {
+    state.componentDirectoriesWatcher.close();
+  }
+
+  const componentPaths = handoff.config.entries?.components ?? [];
+  if (componentPaths.length === 0) return;
+
+  const dirsToWatch: string[] = [];
+  for (const componentPath of componentPaths) {
+    const resolved = path.resolve(handoff.workingPath, componentPath);
+    if (fs.existsSync(resolved) && fs.statSync(resolved).isDirectory()) {
+      dirsToWatch.push(resolved);
+    }
+  }
+
+  if (dirsToWatch.length === 0) return;
+
+  const knownComponents = new Set(Object.keys(handoff.runtimeConfig?.entries?.components ?? {}));
+
+  state.componentDirectoriesWatcher = chokidar.watch(dirsToWatch, {
+    ...chokidarConfig,
+    depth: 1,
+  });
+
+  state.componentDirectoriesWatcher.on('add', async (file) => {
+    const basename = path.basename(file);
+    const dirName = path.basename(path.dirname(file));
+
+    const isConfigFile = basename.endsWith('.json') || basename.endsWith('.js') || basename.endsWith('.cjs');
+    const isNewComponent = isConfigFile && basename.startsWith(dirName) && !knownComponents.has(dirName);
+
+    if (!isNewComponent) return;
+
+    if (!state.debounce) {
+      state.debounce = true;
+      try {
+        Logger.warn(`New component detected: ${dirName}. Reloading configuration...`);
+        handoff.reload();
+        knownComponents.add(dirName);
+
+        // Update known set with all current components
+        for (const id of Object.keys(handoff.runtimeConfig?.entries?.components ?? {})) {
+          knownComponents.add(id);
+        }
+
+        await persistClientConfig(handoff);
+        watchRuntimeComponents(handoff, state, getRuntimeComponentsPathsToWatch(handoff));
+        watchRuntimeConfiguration(handoff, state);
+        await processComponents(handoff, dirName);
+      } catch (e) {
+        Logger.error('Error processing new component:', e);
+      } finally {
+        state.debounce = false;
+      }
+    }
+  });
+};