handoff-app 1.1.3 → 1.2.0-1

package/dist/utils/logger.js

@@ -4,43 +4,163 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Logger = void 0;
+const readline_1 = __importDefault(require("readline"));
 const chalk_1 = __importDefault(require("chalk"));
+/**
+ * Env (e.g. project `.env` via `dotenv/config`):
+ * - `HANDOFF_LOG_LEVEL` — `debug` | `info` | `warn` | `error` | `silent` (default: `info`).
+ *   Controls minimum severity: at `warn`, info/success/debug lines are hidden; at `error`, only errors.
+ * - `HANDOFF_LOG_SCOPES` — comma-separated allowlist: `handoff`, `vite`, `next`. Defaults to all three if unset or empty.
+ *
+ * Programmatic `Logger.init({ debug: true })` (Handoff `debug` flag) forces debug-level verbosity unless overridden.
+ */
 class Logger {
     static init(options) {
+        this.applyEnvConfig();
         if ((options === null || options === void 0 ? void 0 : options.debug) !== undefined) {
             this.debugMode = options.debug;
         }
+        if ((options === null || options === void 0 ? void 0 : options.debug) === true) {
+            this.severityThreshold = 0;
+        }
+    }
+    /** Re-read `process.env` (useful if env is loaded after first `init`). */
+    static applyEnvConfig() {
+        var _a, _b;
+        this.severityThreshold = 1;
+        const allScopes = ['handoff', 'vite', 'next'];
+        this.scopesFilter = new Set(allScopes);
+        const levelRaw = (_a = process.env.HANDOFF_LOG_LEVEL) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
+        const levelMap = {
+            debug: 0,
+            info: 1,
+            warn: 2,
+            error: 3,
+            silent: 99,
+        };
+        if (levelRaw && levelRaw in levelMap) {
+            this.severityThreshold = levelMap[levelRaw];
+        }
+        const scopesRaw = (_b = process.env.HANDOFF_LOG_SCOPES) === null || _b === void 0 ? void 0 : _b.trim();
+        if (scopesRaw) {
+            const set = new Set();
+            for (const part of scopesRaw.split(',')) {
+                const s = part.trim().toLowerCase();
+                if (s === 'handoff' || s === 'vite' || s === 'next') {
+                    set.add(s);
+                }
+            }
+            if (set.size > 0) {
+                this.scopesFilter = set;
+            }
+        }
+    }
+    static scopeEnabled(scope) {
+        return this.scopesFilter.has(scope);
+    }
+    /** Message severities: debug=0, info-tier=1, warn=2, error=3 */
+    static shouldEmit(severity) {
+        return severity >= this.severityThreshold;
     }
     static getTimestamp() {
         const now = new Date();
         return chalk_1.default.gray(`[${now.toISOString()}]`);
     }
-    static log(message) {
-        console.log(`${this.getTimestamp()} ${message}`);
+    /** Short label shown after the timestamp so you can scan for handoff vs vite vs next. */
+    static scopeTag(scope) {
+        const tags = {
+            handoff: chalk_1.default.blue.bold('[handoff]'),
+            vite: chalk_1.default.magenta.bold('[vite]'),
+            next: chalk_1.default.green.bold('[next]'),
+        };
+        return tags[scope];
     }
-    static info(message) {
-        console.log(`${this.getTimestamp()} ${chalk_1.default.cyan(message)}`);
+    static basePrefix(scope) {
+        return `${this.getTimestamp()} ${this.scopeTag(scope)}`;
     }
-    static success(message) {
-        console.log(`${this.getTimestamp()} ${chalk_1.default.green(message)}`);
+    static log(message, scope = 'handoff') {
+        if (!this.scopeEnabled(scope) || !this.shouldEmit(1))
+            return;
+        console.log(`${this.basePrefix(scope)} ${message}`);
     }
-    static warn(message) {
-        console.warn(`${this.getTimestamp()} ${chalk_1.default.yellow(message)}`);
+    /**
+     * Vite often passes strings that already contain ANSI; avoid wrapping those in chalk.cyan so colors stay correct.
+     */
+    static info(message, scope = 'handoff') {
+        if (!this.scopeEnabled(scope) || !this.shouldEmit(1))
+            return;
+        const body = scope === 'vite' ? message : chalk_1.default.cyan(message);
+        console.log(`${this.basePrefix(scope)} ${body}`);
     }
-    static error(message, error) {
-        console.error(`${this.getTimestamp()} ${chalk_1.default.red(message)}`);
+    static success(message, scope = 'handoff') {
+        if (!this.scopeEnabled(scope) || !this.shouldEmit(1))
+            return;
+        console.log(`${this.basePrefix(scope)} ${chalk_1.default.green(message)}`);
+    }
+    static warn(message, scope = 'handoff') {
+        if (!this.scopeEnabled(scope) || !this.shouldEmit(2))
+            return;
+        const body = scope === 'vite' ? message : chalk_1.default.yellow(message);
+        console.warn(`${this.basePrefix(scope)} ${body}`);
+    }
+    static error(message, error, scope = 'handoff') {
+        if (!this.scopeEnabled(scope) || !this.shouldEmit(3))
+            return;
+        const body = scope === 'vite' ? message : chalk_1.default.red(message);
+        console.error(`${this.basePrefix(scope)} ${body}`);
         if (error) {
             console.error(error);
         }
     }
     static debug(message, data) {
-        if (this.debugMode) {
-            console.log(`${this.getTimestamp()} ${chalk_1.default.gray(`[DEBUG] ${message}`)}`);
-            if (data) {
-                console.log(data);
-            }
+        if (this.severityThreshold >= 99)
+            return;
+        if (!this.scopeEnabled('handoff'))
+            return;
+        const allowDebug = this.debugMode || this.severityThreshold === 0;
+        if (!allowDebug)
+            return;
+        console.log(`${this.basePrefix('handoff')} ${chalk_1.default.gray(`[DEBUG] ${message}`)}`);
+        if (data) {
+            console.log(data);
+        }
+    }
+    /**
+     * Log one line from a child process with timestamp + scope tag. Child ANSI is preserved (no extra chalk on the line).
+     */
+    static childProcessLine(line, scope = 'next') {
+        if (!this.scopeEnabled(scope) || !this.shouldEmit(1))
+            return;
+        console.log(`${this.basePrefix(scope)} ${line}`);
+    }
+    /**
+     * Pipe stdout/stderr from a spawned child through {@link childProcessLine}. Use with
+     * `stdio: ['inherit' | 'ignore', 'pipe', 'pipe']`.
+     */
+    static pipeChildStreams(stdout, stderr, scope = 'next') {
+        for (const stream of [stdout, stderr]) {
+            if (!stream)
+                continue;
+            const rl = readline_1.default.createInterface({ input: stream, crlfDelay: Infinity });
+            rl.on('line', (line) => {
+                this.childProcessLine(line, scope);
+            });
+        }
+    }
+    /** Forward a completed child-process buffer (e.g. from `spawn.sync` with stdio pipe) line-by-line. */
+    static childProcessBuffer(buffer, scope = 'next') {
+        if (!(buffer === null || buffer === void 0 ? void 0 : buffer.length))
+            return;
+        const text = buffer.toString('utf8');
+        for (const line of text.split(/\r?\n/)) {
+            this.childProcessLine(line, scope);
         }
     }
 }
 exports.Logger = Logger;
+/** From Handoff constructor; enables debug lines together with env. */
 Logger.debugMode = false;
+/** Minimum message severity to print: 0=debug, 1=info, 2=warn, 3=error. `silent` uses 99. */
+Logger.severityThreshold = 1;
+/** Enabled scopes; defaults to all of `handoff`, `vite`, `next`. */
+Logger.scopesFilter = new Set(['handoff', 'vite', 'next']);

package/docs/cli.md

@@ -14,9 +14,9 @@ The CLI will allow you to build the various kinds of configurations that you
 will need for interacting with Figma. Handoff has sane configuration defaults
 but the various kinds of configurations can be tailored or extended.
 
-Handoff has 4 configuration files - 
+Handoff has 4 configuration areas - 
 
-`handoff.config.json` - Defines the general handoff configuration.
+`handoff.config.*` - Defines the general handoff configuration. Supported files are `handoff.config.ts`, `handoff.config.js`, `handoff.config.cjs`, and `handoff.config.json` (resolved in that precedence order).
 `pages` - Markdown files that will create or customize pages in the documentation
 app
 `exportables` - JSON schemas for each component in your figma file that you
@@ -28,7 +28,7 @@ The CLI exposes two ways to manage the config - `make` and `eject`.
 
 __Eject__ commands will take the default configuration and eject them into
 the current working directory. If you customize these configurations, then run 
-handoff commands in that directory, these configs will be executed.
+handoff commands in that directory, these configs will be executed. `eject:config` now prompts for TypeScript or JavaScript config format.
 __Make__ commands will generate a boilerplate configuration in the current
 working directory. This is useful for extending handoff for different components
 or integrations.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "1.1.3",
+  "version": "1.2.0-1",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",
@@ -105,6 +105,8 @@
     "prettier": "^3.4.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-element-to-jsx-string": "^17.0.1",
+    "react-is": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-scroll": "^1.8.9",
     "react-syntax-highlighter": "^16.1.0",

package/src/app/components/Component/PageSliceResolver.tsx

@@ -8,8 +8,8 @@ export interface PageSliceResolverProps {
   preview: PreviewObject;
   title: string;
   height?: string;
-  currentValues?: Record<string, string>;
-  onValuesChange?: (values: Record<string, string>) => void;
+  currentPreviewUrl?: string;
+  onPreviewChange?: (previewUrl: string) => void;
   bestPracticesCard?: boolean;
   codeHighlight?: boolean;
   properties?: boolean;
@@ -21,8 +21,8 @@ export const PageSliceResolver: React.FC<PageSliceResolverProps> = ({
   preview,
   title,
   height,
-  currentValues,
-  onValuesChange,
+  currentPreviewUrl,
+  onPreviewChange,
   bestPracticesCard = true,
   codeHighlight = true,
   properties = true,
@@ -39,8 +39,8 @@ export const PageSliceResolver: React.FC<PageSliceResolverProps> = ({
           preview={preview}
           title={title}
           height={height}
-          currentValues={currentValues}
-          onValuesChange={onValuesChange}
+          currentPreviewUrl={currentPreviewUrl}
+          onPreviewChange={onPreviewChange}
           showPreview={slice.showPreview}
           showCodeHighlight={slice.showCodeHighlight}
           defaultHeight={slice.defaultHeight}

package/src/app/components/Component/Preview.tsx

@@ -55,8 +55,8 @@ export const ComponentDisplay: React.FC<{
   component: PreviewObject | undefined;
   defaultHeight?: string | undefined;
   title?: string;
-  onValuesChange?: (values: Record<string, string>) => void;
-}> = ({ component, defaultHeight, title, onValuesChange }) => {
+  onPreviewChange?: (previewUrl: string) => void;
+}> = ({ component, defaultHeight, title, onPreviewChange }) => {
   const context = usePreviewContext();
   const ref = React.useRef<HTMLIFrameElement>(null);
   const [height, setHeight] = React.useState('100px');
@@ -131,11 +131,10 @@ export const ComponentDisplay: React.FC<{
       if (keys.length === 0) {
         return;
       }
-      // check the environment
-      setPreviewUrl(component.previews[keys[0]].url);
-      !!onValuesChange && onValuesChange(component.previews[keys[0]].values);
+      const firstPreview = component.previews[keys[0]];
+      setPreviewUrl(firstPreview.url);
     }
-  }, [component, onValuesChange]);
+  }, [component]);
 
   React.useEffect(() => {
     if (!component) return;
@@ -147,11 +146,17 @@ export const ComponentDisplay: React.FC<{
 
     if (!!previewFilterResult && previewFilterResult.length > 0) {
       setPreviewUrl(previewFilterResult[0].url);
-      !!onValuesChange && onValuesChange(previewFilterResult[0].values);
     } else {
       setPreviewUrl(null);
     }
-  }, [context.variantFilter, component, onValuesChange]);
+  }, [context.variantFilter, component]);
+
+  React.useEffect(() => {
+    if (!component?.previews || !previewUrl) return;
+    const selectedPreview = Object.values(component.previews).find((preview) => preview.url === previewUrl);
+    if (!selectedPreview) return;
+    !!onPreviewChange && onPreviewChange(selectedPreview.url);
+  }, [component?.previews, onPreviewChange, previewUrl]);
 
   const { reloadCounter } = useContext(HotReloadContext);
 
@@ -376,7 +381,7 @@ export const ComponentPreview: React.FC<{
     const context = usePreviewContext();
     const [loaded, setLoaded] = React.useState(false);
     const [preview, setPreview] = React.useState<PreviewObject | undefined>(defaultPreview);
-    const [currentValues, setCurrentValues] = React.useState<Record<string, string> | undefined>();
+    const [currentPreviewUrl, setCurrentPreviewUrl] = React.useState<string | undefined>();
     React.useEffect(() => {
       if (context.preview) {
         setPreview(context.preview);
@@ -409,9 +414,9 @@ export const ComponentPreview: React.FC<{
             preview={preview}
             title={title}
             height={height}
-            currentValues={currentValues}
-            onValuesChange={(vals) => {
-              setCurrentValues(vals);
+            currentPreviewUrl={currentPreviewUrl}
+            onPreviewChange={(previewUrl) => {
+              setCurrentPreviewUrl(previewUrl);
             }}
             bestPracticesCard={bestPracticesCard}
             codeHighlight={codeHighlight}

package/src/app/components/Component/slices/ComponentDisplaySlice.tsx

@@ -8,8 +8,8 @@ export interface ComponentDisplaySliceProps {
   preview: PreviewObject;
   title: string;
   height?: string;
-  currentValues?: Record<string, string>;
-  onValuesChange?: (values: Record<string, string>) => void;
+  currentPreviewUrl?: string;
+  onPreviewChange?: (previewUrl: string) => void;
   showPreview?: boolean;
   showCodeHighlight?: boolean;
   defaultHeight?: string;
@@ -33,8 +33,8 @@ const ComponentDisplaySlice: React.FC<ComponentDisplaySliceProps> = ({
   preview,
   title,
   height,
-  currentValues,
-  onValuesChange,
+  currentPreviewUrl,
+  onPreviewChange,
   showPreview = true,
   showCodeHighlight,
   defaultHeight,
@@ -64,12 +64,22 @@ const ComponentDisplaySlice: React.FC<ComponentDisplaySliceProps> = ({
   return (
     <div id={filteredPreview.id}>
       {showPreview && (
-        <ComponentDisplay title={title} component={filteredPreview} defaultHeight={finalDefaultHeight} onValuesChange={onValuesChange} />
+        <ComponentDisplay
+          title={title}
+          component={filteredPreview}
+          defaultHeight={finalDefaultHeight}
+          onPreviewChange={onPreviewChange}
+        />
       )}
       {finalShowCodeHighlight && (
         <>
           <a id="code-highlight" />
-          <CodeHighlight title={title} data={filteredPreview} collapsible={true} currentValues={currentValues} />
+          <CodeHighlight
+            title={title}
+            data={filteredPreview}
+            collapsible={true}
+            currentPreviewUrl={currentPreviewUrl}
+          />
         </>
       )}
     </div>

package/src/app/components/Markdown/CodeHighlight.tsx

@@ -2,7 +2,7 @@ import { PreviewObject } from '@handoff/types/preview';
 // @ts-ignore
 import { CollapsibleTrigger } from '@radix-ui/react-collapsible';
 import { Select } from '@radix-ui/react-select';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars';
 import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
 import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
@@ -47,8 +47,8 @@ export const CodeHighlight: React.FC<{
   title?: string;
   language?: string;
   height?: string;
-  currentValues?: Record<string, string>;
-}> = ({ data, collapsible, type, title, dark, height, currentValues }) => {
+  currentPreviewUrl?: string;
+}> = ({ data, collapsible, type, title, dark, height, currentPreviewUrl }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
 
   if (!data) {
@@ -69,7 +69,7 @@ export const CodeHighlight: React.FC<{
       format: 'html',
     };
   } else if (typeof data === 'string') {
-    data = data = {
+    data = {
       id: '',
       title: '',
       categories: [],
@@ -91,13 +91,26 @@ export const CodeHighlight: React.FC<{
   const metadataKeys = [
     'id', 'preview', 'image', 'categories', 'title', 'format',
     'description', 'type', 'group', 'tags', 'previews', 'properties',
-    'should_do', 'should_not_do', 'figma',
+    'should_do', 'should_not_do', 'figma', 'usage',
   ];
 
   const states = Object.keys(data)
     .filter((key) => !metadataKeys.includes(key) && !!(data as Record<string, any>)[key]);
-  const [activeState, setActiveState] = useState<string>(states[0]);
+  const hasPerPreviewUsage =
+    typeof data === 'object' &&
+    !!data.previews &&
+    Object.values(data.previews).some((preview) => !!preview?.usage);
+  const hasUsageState = (typeof data === 'object' && !!data.usage) || hasPerPreviewUsage;
+  const selectableStates = hasUsageState && !states.includes('usage') ? ['usage', ...states] : states;
+  const preferredState = selectableStates.includes('usage') ? 'usage' : selectableStates[0];
+  const [activeState, setActiveState] = useState<string>(preferredState);
   const [code, setCode] = useState<string>(data.html);
+  const stateResetKey = useMemo(() => {
+    if (typeof data === 'string') {
+      return `string:${type || 'html'}`;
+    }
+    return `${data.id || ''}|${data.title || ''}|${data.format || ''}|${Object.keys(data.previews || {}).join('|')}`;
+  }, [data, type]);
   const theme = dark ? oneDark : oneLight;
   theme['pre[class*="language-"]'].overflow = 'auto';
   theme['pre[class*="language-"]'].maxHeight = height ?? '450px';
@@ -118,6 +131,7 @@ export const CodeHighlight: React.FC<{
     sass: 'SASS',
     scss: 'SCSS',
     sharedStyles: 'Shared CSS',
+    usage: 'Usage',
     json: 'JSON',
     markdown: 'Markdown',
   };
@@ -167,6 +181,7 @@ export const CodeHighlight: React.FC<{
       css: 'css',
       sass: 'scss',
       sharedStyles: 'css',
+      usage: 'tsx',
       json: 'json',
       handlebars: 'handlebars',
       hbs: 'handlebars',
@@ -195,12 +210,43 @@ export const CodeHighlight: React.FC<{
     return jsxPatterns.some(pattern => pattern.test(code));
   };
 
+  const resolveUsageCode = (): string => {
+    if (typeof data !== 'object') {
+      return '';
+    }
+
+    if (currentPreviewUrl && data.previews) {
+      const activePreview = Object.values(data.previews).find((preview) => preview.url === currentPreviewUrl);
+      if (activePreview?.usage) {
+        return activePreview.usage;
+      }
+    }
+
+    const firstPreviewWithUsage = data.previews ? Object.values(data.previews).find((preview) => !!preview.usage) : undefined;
+    if (firstPreviewWithUsage?.usage) {
+      return firstPreviewWithUsage.usage;
+    }
+
+    return data.usage || '';
+  };
+
+  // Always default to usage for newly viewed component/code payloads.
+  // Users can still manually switch tabs after this initial selection.
+  useEffect(() => {
+    setActiveState(preferredState);
+  }, [preferredState, stateResetKey]);
+
   useEffect(() => {
     if (typeof data === 'string') {
       setCode(data);
       return;
     }
 
+    if (activeState === 'usage') {
+      setCode(resolveUsageCode());
+      return;
+    }
+
     if (activeState === 'code' && 'code' in data && !!data.code) {
       setCode(data.code);
       return;
@@ -209,7 +255,7 @@ export const CodeHighlight: React.FC<{
     if (activeState in data && !!(data as Record<string, any>)[activeState]) {
       setCode((data as Record<string, any>)[activeState]);
     }
-  }, [activeState, currentValues, data]);
+  }, [activeState, currentPreviewUrl, data]);
 
   return (
     <Collapsible id="code-samples" className="mt-4 space-y-2" style={{ maxWidth: '71vw' }} open={isOpen} onOpenChange={setIsOpen}>
@@ -219,14 +265,17 @@ export const CodeHighlight: React.FC<{
       >
         {title && <div>{title}</div>}
         <div className="flex items-center gap-2">
-          {states.length > 2 && (
+          {selectableStates.length > 1 && (
             <Select
-              defaultValue={activeState}
+              value={activeState}
               onValueChange={(key) => {
                 setActiveState(key);
                 if (typeof data === 'string') {
                   setCode(data);
                   return;
+                } else if (key === 'usage') {
+                  setCode(resolveUsageCode());
+                  return;
                 } else {
                   setCode(data[key]);
                 }
@@ -236,8 +285,8 @@ export const CodeHighlight: React.FC<{
                 <SelectValue placeholder="Code View" />
               </SelectTrigger>
               <SelectContent>
-                {states
-                  .filter((value) => ['code', 'html', 'css', 'js', 'sass', 'sharedStyles'].includes(value))
+                {selectableStates
+                  .filter((value) => ['usage', 'code', 'html', 'css', 'js', 'sass', 'sharedStyles'].includes(value))
                   .map((state) => {
                     return (
                       <SelectItem key={state} value={state}>

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

@@ -1,4 +1,4 @@
-import { ComponentListObject, ComponentType } from '@handoff/transformers/preview/types';
+import { ComponentListObject, ComponentType, PatternListObject } from '@handoff/transformers/preview/types';
 import { ClientConfig, RuntimeConfig } from '@handoff/types/config';
 import { ComponentDocumentationOptions, PreviewObject } from '@handoff/types/preview';
 import * as fs from 'fs-extra';
@@ -85,7 +85,7 @@ export const knownPaths = [
   'assets/logos',
   'foundations',
   'foundations/colors',
-  'foundations/icons',
+  'foundations/icons',  
   'foundations/effects',
   'foundations/logos',
   'foundations/logo',
@@ -98,6 +98,7 @@ export const knownPaths = [
   'system/tokens/foundations/effects',
   'system/tokens/foundations/typography',
   'system/tokens/components',
+  'system/pattern',
 ];
 
 /**
@@ -266,6 +267,16 @@ export const staticBuildMenu = () => {
                   menu: staticBuildTokensMenu(),
                 };
               }
+              if (sub.patterns) {
+                const patternMenu = staticBuildPatternMenu();
+                if (patternMenu.length > 0) {
+                  return {
+                    title: sub.title || 'Patterns',
+                    menu: patternMenu,
+                  };
+                }
+                return undefined;
+              }
               if (sub.enabled !== false) {
                 return sub;
               }
@@ -413,6 +424,64 @@ const staticBuildTokenMenu = () => {
   return subSections;
 };
 
+/**
+ * Fetch patterns from the patterns.json API file
+ */
+export const fetchPatterns = (): { id: string; title: string; description: string; group: string }[] => {
+  const patternsFilePath = path.resolve(
+    process.env.HANDOFF_MODULE_PATH ?? '',
+    '.handoff',
+    `${process.env.HANDOFF_PROJECT_ID}`,
+    'public',
+    'api',
+    'patterns.json'
+  );
+
+  if (!fs.existsSync(patternsFilePath)) {
+    return [];
+  }
+
+  try {
+    const patternList = JSON.parse(
+      fs.readFileSync(patternsFilePath, 'utf-8')
+    ) as PatternListObject[];
+
+    return patternList.map((p) => ({
+      id: p.id,
+      title: p.title || '',
+      description: p.description || '',
+      group: p.group || '',
+    }));
+  } catch {
+    return [];
+  }
+};
+
+const staticBuildPatternMenu = () => {
+  const basePath = buildBasePath();
+  const patterns = fetchPatterns();
+
+  if (patterns.length === 0) return [];
+
+  const grouped = groupBy(patterns, (p) => p.group ?? '');
+  let menu: { title: string; menu: { path: string; title: string }[] }[] = [];
+
+  Object.keys(grouped).forEach((group) => {
+    const menuGroup = { title: group || 'Uncategorized', menu: [] as { path: string; title: string }[] };
+    grouped[group].forEach((pattern) => {
+      menuGroup.menu.push({
+        path: `${basePath}system/pattern/${pattern.id}`,
+        title: pattern.title || startCase(pattern.id),
+      });
+    });
+    menuGroup.menu.sort((a, b) => a.title.localeCompare(b.title));
+    menu.push(menuGroup);
+  });
+
+  menu.sort((a, b) => a.title.localeCompare(b.title));
+  return menu;
+};
+
 /**
  * Filter the menus by the current path
  * @param menu