npm - handoff-app - Versions diffs - 1.0.3 → 1.0.4 - Mend

handoff-app 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/Changelog.md +10 -5
package/dist/cli.js +0 -0
package/dist/index.js +4 -1
package/dist/transformers/plugins/ssr-render.js +4 -3
package/dist/transformers/preview/component/api.js +3 -2
package/dist/transformers/preview/component/builder.js +2 -1
package/dist/transformers/utils/handlebars.js +3 -2
package/package.json +1 -1
package/src/app/components/Component/Preview.tsx +121 -121
package/src/app/components/ComponentSearch.tsx +1 -1
package/src/app/components/util/index.ts +17 -9
package/src/app/pages/system/component/[component]/index.tsx +1 -1
package/src/app/pages/system/index.tsx +2 -2
package/src/app/pages/system/tokens/index.tsx +10 -10
package/src/index.ts +3 -0
package/src/transformers/plugins/ssr-render.ts +3 -3
package/src/transformers/preview/component/api.ts +1 -1
package/src/transformers/preview/component/builder.ts +1 -1
package/src/transformers/utils/handlebars.ts +2 -2
package/dist/commands/platform/init.d.ts +0 -6
package/dist/commands/platform/init.js +0 -231
package/dist/commands/platform/login.d.ts +0 -6
package/dist/commands/platform/login.js +0 -108
package/dist/commands/platform/logout.d.ts +0 -6
package/dist/commands/platform/logout.js +0 -88
package/dist/commands/platform/pull.d.ts +0 -8
package/dist/commands/platform/pull.js +0 -112
package/dist/commands/platform/push.d.ts +0 -8
package/dist/commands/platform/push.js +0 -428
package/dist/platform/client.d.ts +0 -122
package/dist/platform/client.js +0 -228
package/dist/platform/credentials.d.ts +0 -40
package/dist/platform/credentials.js +0 -91
package/dist/platform/sync.d.ts +0 -68
package/dist/platform/sync.js +0 -349

package/Changelog.md CHANGED Viewed

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-## \[1.0.3] - 2026-02-17
+## \[1.0.4] - 2026-02-19
 Bugfixes, UX improvements to the component page, improvements to react docgen,
 a new quickstart command, and security fixes.
@@ -31,6 +31,11 @@ a new quickstart command, and security fixes.
 * The API preview would through a 500 error under some conditions
 * Using TSX components would cause an error in the code preview if the tsx component
   used some kinds of valid react formatting.
+* If you create pages without a declared weight, handoff would throw an error
+* There was an old structure in the way we used handlebars that surfaces a warning
+  on build.  We've updated that method.
+* We removed an old page template that was no longer needed.
+* The API calls to the component url were not working well in subpaths.
 ## Type Gen
@@ -57,6 +62,10 @@ a new quickstart command, and security fixes.
 * Fixes a bug in webpack that made the include path lookups fail.  @handoff and @/util now
   works properly.
+## \[1.0.3]
+This this version was skipped.
 ## \[1.0.2] - 2026-01-12
 Bugfixes focused on developer quality of life.
@@ -67,10 +76,6 @@ Bugfixes focused on developer quality of life.
   resulting in a 404 error. This patch resolves a race condition in the HMR, by
   preventing double write of the next config.
 * Patch an issue where the example component doesn't load in a clean project
-* If you create pages without a declared weight, handoff would throw an error
-* There was an old structure in the way we used handlebars that surfaces a warning
-  on build.  We've updated that method.
-* We removed an old page template that was no longer needed.
 ## \[1.0.1] - 2025-12-28

package/dist/cli.js CHANGED Viewed

File without changes

package/dist/index.js CHANGED Viewed

@@ -71,12 +71,15 @@ class Handoff {
         global.handoff = this;
     }
     init(configOverride) {
-        var _a, _b;
+        var _a, _b, _c;
         const config = initConfig(configOverride !== null && configOverride !== void 0 ? configOverride : {});
         this.config = config;
         this.exportsDirectory = (_a = config.exportsOutputDirectory) !== null && _a !== void 0 ? _a : this.exportsDirectory;
         this.sitesDirectory = (_b = config.sitesOutputDirectory) !== null && _b !== void 0 ? _b : this.exportsDirectory;
         [this.runtimeConfig, this._configFilePaths] = (0, exports.initRuntimeConfig)(this);
+        if (this.config.app.base_path && !process.env.HANDOFF_APP_BASE_PATH) {
+            process.env.HANDOFF_APP_BASE_PATH = (_c = this.config.app.base_path) !== null && _c !== void 0 ? _c : '';
+        }
         return this;
     }
     reload() {

package/dist/transformers/plugins/ssr-render.js CHANGED Viewed

@@ -111,13 +111,14 @@ function generateClientHydrationSource(componentPath) {
  * @returns Complete HTML document
  */
 function generateHtmlDocument(componentId, previewTitle, renderedHtml, clientJs, props) {
+    var _a, _b, _c;
     return `<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="/api/component/main.css" />
-    <link rel="stylesheet" href="/api/component/${componentId}.css" />
-    <link rel="stylesheet" href="/assets/css/preview.css" />
+    <link rel="stylesheet" href="${(_a = process.env.HANDOFF_APP_BASE_PATH) !== null && _a !== void 0 ? _a : ''}/api/component/main.css" />
+    <link rel="stylesheet" href="${(_b = process.env.HANDOFF_APP_BASE_PATH) !== null && _b !== void 0 ? _b : ''}/api/component/${componentId}.css" />
+    <link rel="stylesheet" href="${(_c = process.env.HANDOFF_APP_BASE_PATH) !== null && _c !== void 0 ? _c : ''}/assets/css/preview.css" />
     <script id="${PLUGIN_CONSTANTS.PROPS_SCRIPT_ID}" type="application/json">${JSON.stringify(props)}</script>
     <script type="module">
       ${clientJs}

package/dist/transformers/preview/component/api.js CHANGED Viewed

@@ -95,20 +95,21 @@ exports.writeComponentApi = writeComponentApi;
  * @param componentData
  */
 const updateComponentSummaryApi = (handoff_1, componentData_1, ...args_1) => __awaiter(void 0, [handoff_1, componentData_1, ...args_1], void 0, function* (handoff, componentData, isFullRebuild = false) {
+    var _a;
     if (isFullRebuild) {
         // Full rebuild: replace the entire file
         yield writeComponentSummaryAPI(handoff, componentData);
         return;
     }
     // Partial update: merge with existing data
-    const apiPath = path_1.default.resolve(handoff.workingPath, 'public/api/components.json');
+    const apiPath = path_1.default.resolve(handoff.workingPath, `${(_a = process.env.HANDOFF_APP_BASE_PATH) !== null && _a !== void 0 ? _a : ''}/api/components.json`);
     let existingData = [];
     if (fs_extra_1.default.existsSync(apiPath)) {
         try {
             const existing = yield fs_extra_1.default.readFile(apiPath, 'utf8');
             existingData = JSON.parse(existing);
         }
-        catch (_a) {
+        catch (_b) {
             // Corrupt or missing JSON — treat as empty
             existingData = [];
         }

package/dist/transformers/preview/component/builder.js CHANGED Viewed

@@ -313,6 +313,7 @@ function processComponents(handoff, id, segmentToProcess, options) {
  * @returns
  */
 const buildComponentSummary = (id, data) => {
+    var _a;
     return {
         id,
         title: data.title,
@@ -325,7 +326,7 @@ const buildComponentSummary = (id, data) => {
         tags: data.tags ? data.tags : [],
         properties: data.properties,
         previews: data.previews,
-        path: `/api/component/${id}.json`,
+        path: `${(_a = process.env.HANDOFF_APP_BASE_PATH) !== null && _a !== void 0 ? _a : ''}/api/component/${id}.json`,
     };
 };
 exports.default = processComponents;

package/dist/transformers/utils/handlebars.js CHANGED Viewed

@@ -52,9 +52,10 @@ exports.registerHandlebarsHelpers = registerHandlebarsHelpers;
  * @returns Handlebars context object
  */
 const createHandlebarsContext = (data, previewData) => {
+    var _a, _b, _c, _d, _e;
     return {
-        style: `<link rel="stylesheet" href="/api/component/shared.css"><link rel="stylesheet" href="/api/component/${data.id}.css">\n<link rel="stylesheet" href="/assets/css/preview.css">`,
-        script: `<script src="/api/component/${data.id}.js"></script>\n<script src="/assets/js/preview.js"></script><script>var fields = ${JSON.stringify(data.properties)};</script>`,
+        style: `<link rel="stylesheet" href="${(_a = process.env.HANDOFF_APP_BASE_PATH) !== null && _a !== void 0 ? _a : ''}/api/component/shared.css"><link rel="stylesheet" href="${(_b = process.env.HANDOFF_APP_BASE_PATH) !== null && _b !== void 0 ? _b : ''}/api/component/${data.id}.css">\n<link rel="stylesheet" href="${(_c = process.env.HANDOFF_APP_BASE_PATH) !== null && _c !== void 0 ? _c : ''}/assets/css/preview.css">`,
+        script: `<script src="${(_d = process.env.HANDOFF_APP_BASE_PATH) !== null && _d !== void 0 ? _d : ''}/api/component/${data.id}.js"></script>\n<script src="${(_e = process.env.HANDOFF_APP_BASE_PATH) !== null && _e !== void 0 ? _e : ''}/assets/js/preview.js"></script><script>var fields = ${JSON.stringify(data.properties)};</script>`,
         properties: previewData.values || {},
         fields: data.properties,
         title: data.title,

package/package.json CHANGED Viewed

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

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

@@ -303,7 +303,7 @@ export const ComponentDisplay: React.FC<{
                         className="h-7 px-3 hover:bg-gray-300 [&_svg]:size-3"
                         onClick={() => {
                           // open in new tab
-                          window.open('/api/component/' + previewUrl, '_blank');
+                          window.open(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${previewUrl}`, '_blank');
                         }}
                         variant="ghost"
                       >
@@ -333,7 +333,7 @@ export const ComponentDisplay: React.FC<{
                       display: 'block',
                       margin: '0 auto',
                     }}
-                    src={`/api/component/` + previewUrl}
+                    src={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${previewUrl}`}
                   />
                 </div>
               ) : (
@@ -539,9 +539,9 @@ const hasNestedProperties = (row: SlotMetadata): boolean => {
   );
 };
-const TableRows: React.FC<{
-  rows: SlotMetadata[];
-  openSheet: (field: SlotMetadata) => void;
+const TableRows: React.FC<{
+  rows: SlotMetadata[];
+  openSheet: (field: SlotMetadata) => void;
   depth?: number;
   parentPath?: string;
 }> = ({
@@ -550,24 +550,24 @@ const TableRows: React.FC<{
   depth = 0,
   parentPath = '',
 }) => {
-  return (
-    <>
-      {rows.map((row, i) => {
-        if (!row) return null;
-        const currentPath = parentPath ? `${parentPath}.${row.key || row.name}` : (row.key || row.name);
-        return (
-          <ExpandableTableRow
-            key={`row-${currentPath}-${i}`}
-            row={row}
-            openSheet={openSheet}
-            depth={depth}
-            path={currentPath}
-          />
-        );
-      })}
-    </>
-  );
-};
+    return (
+      <>
+        {rows.map((row, i) => {
+          if (!row) return null;
+          const currentPath = parentPath ? `${parentPath}.${row.key || row.name}` : (row.key || row.name);
+          return (
+            <ExpandableTableRow
+              key={`row-${currentPath}-${i}`}
+              row={row}
+              openSheet={openSheet}
+              depth={depth}
+              path={currentPath}
+            />
+          );
+        })}
+      </>
+    );
+  };
 const humanReadableSizeRule = (rule: string, value: any) => {
   switch (rule) {
@@ -597,9 +597,9 @@ const humanReadableSizeRule = (rule: string, value: any) => {
  * An expandable table row that can show nested properties
  * Supports deep nesting with visual indentation and expand/collapse
  */
-const ExpandableTableRow: React.FC<{
-  row: SlotMetadata;
-  openSheet: (field: SlotMetadata) => void;
+const ExpandableTableRow: React.FC<{
+  row: SlotMetadata;
+  openSheet: (field: SlotMetadata) => void;
   depth: number;
   path: string;
 }> = ({
@@ -608,104 +608,104 @@ const ExpandableTableRow: React.FC<{
   depth,
   path,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const nested = getNestedProperties(row);
-  const canExpand = hasNestedProperties(row);
-  const getSizeDisplay = (row: SlotMetadata) => {
-    if (!row.rules) return '-';
-    // Find the first applicable size rule
-    const sizeRules = ['dimensions', 'content', 'maxSize'];
-    const rule = Object.keys(row.rules).find((r) => sizeRules.includes(r));
-    return rule ? humanReadableSizeRule(rule, row.rules[rule]) : '-';
-  };
+    const [isExpanded, setIsExpanded] = useState(false);
+    const nested = getNestedProperties(row);
+    const canExpand = hasNestedProperties(row);
-  // Calculate indent based on depth (each level adds 20px)
-  const indentPx = depth * 20;
-  // Get background color based on depth for visual hierarchy
-  const getDepthBgClass = (depth: number) => {
-    if (depth === 0) return '';
-    if (depth === 1) return 'bg-gray-50/50 dark:bg-gray-800/30';
-    if (depth === 2) return 'bg-gray-100/50 dark:bg-gray-800/50';
-    return 'bg-gray-100/70 dark:bg-gray-800/70';
-  };
+    const getSizeDisplay = (row: SlotMetadata) => {
+      if (!row.rules) return '-';
-  const handleRowClick = (e: React.MouseEvent) => {
-    // If clicking on the expand button area, don't open the sheet
-    if ((e.target as HTMLElement).closest('.expand-toggle')) {
-      return;
-    }
-    openSheet(row);
-  };
+      // Find the first applicable size rule
+      const sizeRules = ['dimensions', 'content', 'maxSize'];
+      const rule = Object.keys(row.rules).find((r) => sizeRules.includes(r));
-  const handleExpandToggle = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsExpanded(!isExpanded);
-  };
+      return rule ? humanReadableSizeRule(rule, row.rules[rule]) : '-';
+    };
-  return (
-    <>
-      <TableRow
-        className={`h-10 cursor-pointer border-b-[0.5px] ${getDepthBgClass(depth)}`}
-        onClick={handleRowClick}
-      >
-        <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1">
-          <div className="flex items-center" style={{ paddingLeft: `${indentPx}px` }}>
-            {canExpand ? (
-              <button
-                className="expand-toggle mr-2 flex h-5 w-5 items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-700"
-                onClick={handleExpandToggle}
-                aria-label={isExpanded ? 'Collapse' : 'Expand'}
-              >
-                {isExpanded ? (
-                  <ChevronDown className="h-4 w-4 text-gray-500" />
-                ) : (
-                  <ChevronRight className="h-4 w-4 text-gray-500" />
-                )}
-              </button>
-            ) : (
-              <span className="mr-2 w-5" />
-            )}
-            <span className={depth > 0 ? 'text-gray-700 dark:text-gray-300' : ''}>
-              {startCase(row.name)}
-            </span>
-            {canExpand && (
-              <span className="ml-2 text-xs text-gray-400">
-                ({Object.keys(nested || {}).length} {row.type === 'array' ? 'item fields' : 'fields'})
+    // Calculate indent based on depth (each level adds 20px)
+    const indentPx = depth * 20;
+    // Get background color based on depth for visual hierarchy
+    const getDepthBgClass = (depth: number) => {
+      if (depth === 0) return '';
+      if (depth === 1) return 'bg-gray-50/50 dark:bg-gray-800/30';
+      if (depth === 2) return 'bg-gray-100/50 dark:bg-gray-800/50';
+      return 'bg-gray-100/70 dark:bg-gray-800/70';
+    };
+    const handleRowClick = (e: React.MouseEvent) => {
+      // If clicking on the expand button area, don't open the sheet
+      if ((e.target as HTMLElement).closest('.expand-toggle')) {
+        return;
+      }
+      openSheet(row);
+    };
+    const handleExpandToggle = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsExpanded(!isExpanded);
+    };
+    return (
+      <>
+        <TableRow
+          className={`h-10 cursor-pointer border-b-[0.5px] ${getDepthBgClass(depth)}`}
+          onClick={handleRowClick}
+        >
+          <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1">
+            <div className="flex items-center" style={{ paddingLeft: `${indentPx}px` }}>
+              {canExpand ? (
+                <button
+                  className="expand-toggle mr-2 flex h-5 w-5 items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+                  onClick={handleExpandToggle}
+                  aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                  )}
+                </button>
+              ) : (
+                <span className="mr-2 w-5" />
+              )}
+              <span className={depth > 0 ? 'text-gray-700 dark:text-gray-300' : ''}>
+                {startCase(row.name)}
               </span>
-            )}
-          </div>
-        </TableCell>
-        <TableCell className="border-r-[0.5px] px-3.5 py-1">
-          <Badge variant={getVariantForType(row.type)} className="rounded-xl px-2.5">
-            {row.type}
-          </Badge>
-          {row.type === 'array' && row.items?.type && (
-            <Badge variant="outline" className="ml-1 rounded-xl px-2 text-[10px]">
-              {row.items.type}[]
+              {canExpand && (
+                <span className="ml-2 text-xs text-gray-400">
+                  ({Object.keys(nested || {}).length} {row.type === 'array' ? 'item fields' : 'fields'})
+                </span>
+              )}
+            </div>
+          </TableCell>
+          <TableCell className="border-r-[0.5px] px-3.5 py-1">
+            <Badge variant={getVariantForType(row.type)} className="rounded-xl px-2.5">
+              {row.type}
             </Badge>
-          )}
-        </TableCell>
-        <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
-          {getSizeDisplay(row)}
-        </TableCell>
-        <TableCell className="border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
-          <span className="slot-description line-clamp-1">{row.description || row.generic || '-'}</span>
-        </TableCell>
-      </TableRow>
-      {/* Render nested properties when expanded */}
-      {isExpanded && nested && nested.length > 0 && (
-        <TableRows
-          rows={nested}
-          openSheet={openSheet}
-          depth={depth + 1}
-          parentPath={path}
-        />
-      )}
-    </>
-  );
-};
+            {row.type === 'array' && row.items?.type && (
+              <Badge variant="outline" className="ml-1 rounded-xl px-2 text-[10px]">
+                {row.items.type}[]
+              </Badge>
+            )}
+          </TableCell>
+          <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
+            {getSizeDisplay(row)}
+          </TableCell>
+          <TableCell className="border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
+            <span className="slot-description line-clamp-1">{row.description || row.generic || '-'}</span>
+          </TableCell>
+        </TableRow>
+        {/* Render nested properties when expanded */}
+        {isExpanded && nested && nested.length > 0 && (
+          <TableRows
+            rows={nested}
+            openSheet={openSheet}
+            depth={depth + 1}
+            parentPath={path}
+          />
+        )}
+      </>
+    );
+  };

package/src/app/components/ComponentSearch.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import React from 'react';
  */
 export const getComponentList = async (): Promise<ComponentListObject[]> => {
   // Try to load the component from the public json
-  let data = await fetch(`/api/components.json`).then((res) => res.json());
+  let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
   return data as ComponentListObject[];
 };

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

@@ -206,6 +206,9 @@ export const staticBuildMenu = () => {
   // // Contents of docs
   const docRoot = path.join(process.env.HANDOFF_MODULE_PATH ?? '', 'config/docs');
   // Get the file list
+  if(!fs.existsSync(docRoot)) {
+    return [];
+  }
   const files = fs.readdirSync(docRoot);
   let list = files;
   const workingPages = path.resolve(process.env.HANDOFF_WORKING_PATH ?? '', 'pages');
@@ -277,7 +280,7 @@ export const staticBuildMenu = () => {
           title: metadata.menuTitle ?? metadata.title,
           external,
           weight: metadata.weight ?? 0,
-          path: filepath,
+          path: `${filepath}`,
           subSections,
         };
       }
@@ -287,6 +290,7 @@ export const staticBuildMenu = () => {
 };
 const staticBuildComponentMenu = (type?: boolean | string) => {
+  const basePath = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\//, '');
   let menu = [];
   let components = fetchComponents({ includeTokens: false });
   if (typeof type === 'string' && type !== '') {
@@ -305,7 +309,7 @@ const staticBuildComponentMenu = (type?: boolean | string) => {
       if (component.name) {
         title = component.name;
       }
-      menuGroup.menu.push({ path: `system/component/${component.id}`, title });
+      menuGroup.menu.push({ path: `${basePath}/system/component/${component.id}`, title });
     });
     // sort the menu group by name alphabetical
     menuGroup.menu = menuGroup.menu.sort((a, b) => a.title.localeCompare(b.title));
@@ -317,22 +321,24 @@ const staticBuildComponentMenu = (type?: boolean | string) => {
 };
 const staticBuildTokensMenu = () => {
+  const basePath = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\//, '');
   const menu = [
     {
       title: `Foundations`,
-      path: `system/tokens/foundations`,
+      path: `${basePath}/system/tokens/foundations`,
       menu: [
         {
           title: `Colors`,
-          path: `system/tokens/foundations/colors`,
+          path: `${basePath}/system/tokens/foundations/colors`,
         },
         {
           title: `Effects`,
-          path: `system/tokens/foundations/effects`,
+          path: `${basePath}/system/tokens/foundations/effects`,
         },
         {
           title: `Typography`,
-          path: `system/tokens/foundations/typography`,
+          path: `${basePath}/system/tokens/foundations/typography`,
         },
       ],
     },
@@ -352,14 +358,14 @@ const staticBuildTokensMenu = () => {
       if (component.name) {
         title = component.name;
       }
-      componentMenuItems.push({ path: `system/tokens/components/${component.id}`, title });
+      componentMenuItems.push({ path: `${basePath}/system/tokens/components/${component.id}`, title });
     });
   });
   if (componentMenuItems.length > 0) {
     menu.push({
       title: `Components`,
-      path: `system/tokens/components`,
+      path: `${basePath}/system/tokens/components`,
       menu: componentMenuItems,
     });
   }
@@ -368,9 +374,11 @@ const staticBuildTokensMenu = () => {
 };
 const staticBuildTokenMenu = () => {
+  const basePath = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\//, '');
   let subSections = {
     title: 'Tokens',
-    path: 'system/tokens',
+    path: `${basePath}/system/tokens`,
     menu: [],
   };
   const tokens = getTokens();

package/src/app/pages/system/component/[component]/index.tsx CHANGED Viewed

@@ -110,7 +110,7 @@ const GenericComponentPage = ({ menu, metadata, current, id, config, componentHo
   const [componentPreviews, setComponentPreviews] = useState<PreviewObject | [string, PreviewObject][]>();
   const fetchComponents = async () => {
-    let data = await fetch(`/api/component/${id}.json`).then((res) => res.json());
+    let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${id}.json`).then((res) => res.json());
     setComponent(data as PreviewObject);
   };

package/src/app/pages/system/index.tsx CHANGED Viewed

@@ -67,7 +67,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentP
   // Fetch components from api
   const [components, setComponents] = useState<PreviewObject[]>(undefined);
   const fetchComponents = async () => {
-    let data = await fetch(`/api/components.json`).then((res) => res.json());
+    let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
     setComponents(data as PreviewObject[]);
   };
   useEffect(() => {
@@ -108,7 +108,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentP
     );
   }
-  const apiUrl = (window.location.origin && window.location.origin) + `/api/components.json`;
+  const apiUrl = (window.location.origin && window.location.origin) + `${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`;
   return (
     <Layout config={config} menu={menu} current={current} metadata={metadata}>
       <div className="flex flex-col gap-2 pb-7">

package/src/app/pages/system/tokens/index.tsx CHANGED Viewed

@@ -39,14 +39,14 @@ export const getStaticProps: GetStaticProps = async (context) => {
         ...fetchDocPageMarkdown('docs/', 'system', `/system`).props,
         components: components
           ? components.reduce(
-              (acc, component) => ({
-                ...acc,
-                ...{
-                  [component]: fetchDocPageMetadataAndContent('docs/components/', component).metadata,
-                },
-              }),
-              {}
-            )
+            (acc, component) => ({
+              ...acc,
+              ...{
+                [component]: fetchDocPageMetadataAndContent('docs/components/', component).metadata,
+              },
+            }),
+            {}
+          )
           : null,
       } as ComponentPageDocumentationProps,
     },
@@ -61,14 +61,14 @@ const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentP
   // Fetch components from api
   const [components, setComponents] = useState<PreviewObject[]>(undefined);
   const fetchComponents = async () => {
-    let data = await fetch(`/api/components.json`).then((res) => res.json());
+    let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
     setComponents(data as PreviewObject[]);
   };
   useEffect(() => {
     fetchComponents();
   }, []);
   if (!components) return <p>Loading...</p>;
-  const apiUrl = (window.location.origin && window.location.origin) + `/api/components.json`;
+  const apiUrl = (window.location.origin && window.location.origin) + `${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`;
   return (
     <Layout config={config} menu={menu} current={current} metadata={metadata}>
       <div className="flex flex-col gap-2 pb-7">

package/src/index.ts CHANGED Viewed

@@ -55,6 +55,9 @@ class Handoff {
     this.exportsDirectory = config.exportsOutputDirectory ?? this.exportsDirectory;
     this.sitesDirectory = config.sitesOutputDirectory ?? this.exportsDirectory;
     [this.runtimeConfig, this._configFilePaths] = initRuntimeConfig(this);
+    if(this.config.app.base_path && !process.env.HANDOFF_APP_BASE_PATH) {
+      process.env.HANDOFF_APP_BASE_PATH = this.config.app.base_path ?? '';
+    }
     return this;
   }

package/src/transformers/plugins/ssr-render.ts CHANGED Viewed

@@ -118,9 +118,9 @@ function generateHtmlDocument(componentId: string, previewTitle: string, rendere
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="/api/component/main.css" />
-    <link rel="stylesheet" href="/api/component/${componentId}.css" />
-    <link rel="stylesheet" href="/assets/css/preview.css" />
+    <link rel="stylesheet" href="${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/main.css" />
+    <link rel="stylesheet" href="${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${componentId}.css" />
+    <link rel="stylesheet" href="${process.env.HANDOFF_APP_BASE_PATH ?? ''}/assets/css/preview.css" />
     <script id="${PLUGIN_CONSTANTS.PROPS_SCRIPT_ID}" type="application/json">${JSON.stringify(props)}</script>
     <script type="module">
       ${clientJs}

package/src/transformers/preview/component/api.ts CHANGED Viewed

@@ -107,7 +107,7 @@ export const updateComponentSummaryApi = async (handoff: Handoff, componentData:
   }
   // Partial update: merge with existing data
-  const apiPath = path.resolve(handoff.workingPath, 'public/api/components.json');
+  const apiPath = path.resolve(handoff.workingPath, `${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`);
   let existingData: ComponentListObject[] = [];
   if (fs.existsSync(apiPath)) {