handoff-app 1.2.1 → 1.2.2-1

package/Changelog.md

@@ -6,6 +6,33 @@ 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.2.2] - 2026-04-09
+
+This patch release clears ESLint failures in the Next.js app pages and aligns
+several code paths with the compiler target so production builds succeed without
+enabling `--downlevelIteration`.
+
+### Lint and code quality
+
+* Resolved `no-else-return`, `no-unused-vars`, `camelcase`, `prefer-const`,
+  `eqeqeq`, `no-nested-ternary`, `no-lonely-if`, and `no-use-before-define`
+  across static pages (catch-all docs, assets, foundations, home, system, and
+  design-token foundation pages).
+* Removed or refactored unused `getStaticProps` context parameters, props, and
+  locals; normalized naming (e.g. font machine keys); simplified icon detail
+  routing query handling.
+* Reordered helper components (token color/effect/typography tables, component
+  token previews) ahead of page components where required for declaration order.
+* Converted `getComponentPreviews` to a hoisted `function` declaration and
+  refactored the component token table for clearer control flow.
+
+### Build / TypeScript compatibility
+
+* Avoid iterating `Map` / `Set` / `Iterable` / `matchAll` results directly in
+  `for...of` where the compile target requires it: use `Array.from(...)` or
+  equivalent helpers in the config-diff registry, snapshot diff, CSF import
+  parsing, and component artifact sync.
+
 ## \[1.2.1] - 2026-04-08
 
 This is a minor release that fixes a bug in the new config diff calculator.

package/dist/cli.js

@@ -19,7 +19,7 @@ class HandoffCliError extends Error {
  * Show the help message
  */
 const showVersion = () => {
-    return 'Handoff App - 1.2.1';
+    return 'Handoff App - 1.2.2';
 };
 /**
  * Define a CLI error

package/package.json

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

package/src/app/pages/[...slug]/index.tsx

@@ -41,26 +41,7 @@ export const getStaticProps: GetStaticProps = (context) => {
 export default function DocCatchAllPage({ content, menu, metadata, current, config }: DocumentationProps) {
   const bodyRef = useRef<HTMLDivElement>(null);
 
-  if (content) {
-    return (
-      <Layout config={config} menu={menu} current={current} metadata={metadata}>
-        <div className="flex flex-col gap-2 pb-7">
-          <HeadersType.H1>{metadata.title}</HeadersType.H1>
-          <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
-        </div>
-        <div className="lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
-          <div className="min-w-0">
-            <div className="prose mb-10" ref={bodyRef}>
-              <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
-                {content}
-              </ReactMarkdown>
-            </div>
-          </div>
-          <PageTOC body={bodyRef} title="On This Page" />
-        </div>
-      </Layout>
-    );
-  } else {
+  if (!content) {
     return (
       <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
         <Head>
@@ -85,4 +66,23 @@ export default function DocCatchAllPage({ content, menu, metadata, current, conf
       </div>
     );
   }
+
+  return (
+    <Layout config={config} menu={menu} current={current} metadata={metadata}>
+      <div className="flex flex-col gap-2 pb-7">
+        <HeadersType.H1>{metadata.title}</HeadersType.H1>
+        <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
+      </div>
+      <div className="lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
+        <div className="min-w-0">
+          <div className="prose mb-10" ref={bodyRef}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
+              {content}
+            </ReactMarkdown>
+          </div>
+        </div>
+        <PageTOC body={bodyRef} title="On This Page" />
+      </div>
+    </Layout>
+  );
 }

package/src/app/pages/assets/fonts.tsx

@@ -21,7 +21,7 @@ import { fetchDocPageMarkdown, FontDocumentationProps, getClientRuntimeConfig, g
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   const fonts = fs.readdirSync(
     path.resolve(process.env.HANDOFF_MODULE_PATH ?? '', '.handoff', `${process.env.HANDOFF_PROJECT_ID}`, 'public', 'fonts')
   );
@@ -45,16 +45,15 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 };
 
-const FontsPage = ({ content, menu, metadata, current, customFonts, design, config }: FontDocumentationProps) => {
+const FontsPage = ({ content, menu, metadata, customFonts, design, config }: FontDocumentationProps) => {
   const fontFamilies: string[] = uniq(design.typography.map((type) => type.values.fontFamily));
   const fontLinks: string[] = fontFamilies.map((fontFamily) => {
-    const machine_name = fontFamily.replace(/\s/g, '');
-    const custom = customFonts.find((font) => font === machine_name);
+    const machineName = fontFamily.replace(/\s/g, '');
+    const custom = customFonts.find((font) => font === machineName);
     if (custom) {
-      return `/fonts/${machine_name}.zip`;
-    } else {
-      return `https://fonts.google.com/specimen/${fontFamily}`;
+      return `/fonts/${machineName}.zip`;
     }
+    return `https://fonts.google.com/specimen/${fontFamily}`;
   });
   return (
     <div className="c-page">

package/src/app/pages/assets/index.tsx

@@ -18,7 +18,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/', 'assets', `/assets`).props,
@@ -27,7 +27,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 };
 
-const AssetsPage = ({ content, menu, metadata, current, config }: DocumentationProps) => {
+const AssetsPage = ({ content, menu, metadata, config }: DocumentationProps) => {
   return (
     <div className="c-page">
       <Head>

package/src/app/pages/assets/logos.tsx

@@ -17,7 +17,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`).props,
@@ -26,7 +26,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 };
 
-const AssetsLogosPage = ({ content, menu, metadata, current, config }: DocumentationProps) => {
+const AssetsLogosPage = ({ content, menu, metadata, config }: DocumentationProps) => {
   return (
     <div className="c-page">
       <Head>

package/src/app/pages/foundations/colors.tsx

@@ -22,7 +22,7 @@ import { getTokens } from '../../components/util';
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...util.fetchFoundationDocPageMarkdown('docs/foundations/', 'colors', `/foundations`).props,

package/src/app/pages/foundations/icons/[name]/index.tsx

@@ -58,7 +58,7 @@ export async function getStaticPaths() {
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = (context) => {
+export const getStaticProps: GetStaticProps = () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/foundations/', 'icons', `/foundations`).props,
@@ -68,10 +68,13 @@ export const getStaticProps: GetStaticProps = (context) => {
   };
 };
 
-export default function SingleIcon({ content, menu, metadata, current, config, assets }: AssetDocumentationProps) {
+export default function SingleIcon({ menu, metadata, current, config, assets }: AssetDocumentationProps) {
   const router = useRouter();
-  let { name } = router.query;
-  const icon = assets?.icons.find((icon) => icon.icon === name);
+  const nameParam = router.query.name;
+  let name = undefined;
+  if (typeof nameParam === 'string') { name = nameParam } else if (Array.isArray(nameParam)) { name = nameParam[0] } else { name = undefined }
+  const icon = assets?.icons.find((i) => i.icon === name);
+
   const copySvg = React.useCallback<React.MouseEventHandler>(
     (event) => {
       event.preventDefault();

package/src/app/pages/foundations/icons/index.tsx

@@ -52,7 +52,7 @@ export const DisplayIcon: React.FC<{ icon: CoreTypes.IAssetObject }> = ({ icon }
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/foundations/', 'icons', `/foundations`).props,

package/src/app/pages/foundations/index.tsx

@@ -17,7 +17,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/', 'foundations', `/foundations`).props,

package/src/app/pages/foundations/logo.tsx

@@ -36,7 +36,7 @@ import { buttonVariants } from '../../components/ui/button';
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/foundations/', 'logo', `/foundations`).props,

package/src/app/pages/foundations/typography.tsx

@@ -62,16 +62,6 @@ const Typography = ({
     };
   }, {} as FontFamily);
 
-  const type_copy = config?.app?.type_copy ?? 'Almost before we knew it, we had left the ground.';
-
-  const typographyCategories = typography.reduce((acc, type) => {
-    if (type.name.includes('/')) {
-      const category = type.name.split('/')[0].trim();
-      acc.add(category);
-    }
-    return acc;
-  }, new Set<string>());
-
   return (
     <Layout config={config} menu={menu} metadata={metadata} current={current}>
       <div className="flex flex-col gap-2 pb-7">

package/src/app/pages/index.tsx

@@ -2,7 +2,6 @@ import { ArrowRight, Component, Hexagon, Layers, Shapes } from 'lucide-react';
 import { GetStaticProps } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
@@ -21,7 +20,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/', 'index', `/`).props,
@@ -31,8 +30,6 @@ export const getStaticProps: GetStaticProps = async (context) => {
 };
 
 const Home = ({ content, menu, metadata, config, current }: DocumentationProps) => {
-  const router = useRouter();
-
   return (
     <Layout config={config} menu={menu} current={current} metadata={metadata} fullWidthHero={true}>
       <div className="w-full bg-linear-to-r py-12 dark:from-gray-900 dark:to-gray-800 sm:py-20">

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

@@ -110,7 +110,7 @@ export const getStaticProps = async (context) => {
 };
 
 function filterPreviews(previews: Record<string, OptionalPreviewRender>, filter: Filter): Record<string, OptionalPreviewRender> {
-  return Object.fromEntries(Object.entries(previews).filter(([_, preview]) => evaluateFilter(preview.values, filter)));
+  return Object.fromEntries(Object.entries(previews).filter(([, preview]) => evaluateFilter(preview.values, filter)));
 }
 
 const GenericComponentPage = ({ menu, metadata, current, id, config, componentHotReloadIsAvailable, previousComponent, nextComponent }) => {
@@ -123,7 +123,7 @@ const GenericComponentPage = ({ menu, metadata, current, id, config, componentHo
   const componentRoute = (componentId: string) => `${normalizedBasePath}/system/component/${componentId}`;
 
   const fetchComponents = async () => {
-    let data = await fetch(`${normalizedBasePath}/api/component/${id}.json`).then((res) => res.json());
+    const data = await fetch(`${normalizedBasePath}/api/component/${id}.json`).then((res) => res.json());
     setComponent(data as PreviewObject);
   };
 

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

@@ -30,7 +30,7 @@ type ComponentPageDocumentationProps = DocumentationProps;
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   // Read current slug
   const config = getClientRuntimeConfig();
   return {
@@ -49,7 +49,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(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
+    const data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
     setComponents(data as PreviewObject[]);
   };
   useEffect(() => {

package/src/app/pages/system/tokens/components/[component]/index.tsx

@@ -67,7 +67,6 @@ const GenericComponentPage = ({
   menu,
   metadata,
   current,
-  id,
   config,
   component,
   options,
@@ -101,11 +100,11 @@ const GenericComponentPage = ({
   );
 };
 
-export const getComponentPreviews = (
+export function getComponentPreviews(
   tab: 'overview' | 'tokens',
   component: CoreTypes.IFileComponentObject,
   options: ComponentDocumentationOptions
-) => {
+): ComponentPreview[] {
   const instances = component.instances;
   const view = (options?.views ?? {})[tab] ?? {};
   const viewFilters = view.condition ?? {};
@@ -147,13 +146,10 @@ export const getComponentPreviews = (
               // Filter value object keys do not contain the value of the respective component property
               // Since component should not be displayed we return null value
               return null;
-            } else {
-              // Filter value object keys do contain the value of the respective component property
-              // We will store the property value of the filter value object for later use
-              overrides = filterValue[variantProps.get(filterProp)];
-              // Use as a default possibly distinctive name
-              name ??= variantProps.get(filterProp);
             }
+            // Filter value object keys do contain the value of the respective component property
+            overrides = filterValue[variantProps.get(filterProp)];
+            name ??= variantProps.get(filterProp);
           }
         } else if (typeof filterValue === 'string' && variantProps.get(filterProp) !== filterValue) {
           return null;
@@ -175,7 +171,7 @@ export const getComponentPreviews = (
   }
 
   return tabComponents;
-};
+}
 
 function multiPropSort(properties: string[], array: ComponentPreview[]) {
   return array.sort((l, r) => {
@@ -199,14 +195,10 @@ function multiPropSort(properties: string[], array: ComponentPreview[]) {
   });
 }
 
-const IsColorValue = (value: string) => {
-  return value.match(/^#[0-9A-F]{6}$/i) || value.match(/linear-gradient\(.*?\)|rgba\(.*?\)/);
-};
-
 const NormalizeValue = (value: string): string => {
   if (!Number.isNaN(Number(value))) {
     const numericValue = Number(value);
-    if (numericValue % 1 != 0) {
+    if (numericValue % 1 !== 0) {
       return round(numericValue, 2).toFixed(2);
     }
   }
@@ -220,7 +212,6 @@ export interface ComponentDesignTokensProps {
   previewObjectOptions?: CoreTypes.IHandoffConfigurationComponentOptions;
   componentInstances: CoreTypes.IComponentInstance[];
   overrides?: { [variantProp: string]: string[] };
-  children?: React.ReactNode;
   renderPreviews: boolean;
   useReferences: boolean;
 }
@@ -228,23 +219,19 @@ export interface ComponentDesignTokensProps {
 interface DataTableRow extends Map<string, [string, string, CoreTypes.IToken | undefined][]> { }
 interface DataTable extends Map<string, DataTableRow> { }
 
-export const ComponentDesignTokens: React.FC<ComponentDesignTokensProps> = ({
+export function ComponentDesignTokens({
   title,
   componentInstances,
   previewObject,
   previewObjectOptions,
   overrides,
-  children,
-  renderPreviews,
   useReferences,
-}) => {
+}: ComponentDesignTokensProps) {
   const previewObjectVariantPropsMap = new Map(previewObject.variantProperties);
-  const [showReference, setShowReference] = React.useState(useReferences);
+  const [showReference] = React.useState(useReferences);
   const headings: Set<string> = new Set<string>();
   const dataTable = new Map() as DataTable;
 
-  let numberOfColumns = 0;
-
   if (overrides) {
     const overrideVariantProps = Object.keys(overrides) ?? [];
     const masterOverride = overrideVariantProps[0];
@@ -278,9 +265,6 @@ export const ComponentDesignTokens: React.FC<ComponentDesignTokensProps> = ({
           .push([token.name, token.value, token ?? undefined]);
       });
 
-      // Increase columns count
-      numberOfColumns++;
-
       // Append heading to the list of headings
       headings.add(componentVariantPropsMap.get(masterOverride));
     });
@@ -299,9 +283,6 @@ export const ComponentDesignTokens: React.FC<ComponentDesignTokensProps> = ({
         .push([token.name, token.value, token ?? undefined]);
     });
 
-    // Increase columns count
-    numberOfColumns++;
-
     // Append heading to the list of headings
     headings.add('Value');
   }
@@ -310,8 +291,6 @@ export const ComponentDesignTokens: React.FC<ComponentDesignTokensProps> = ({
     return <></>;
   }
 
-  const layoutLeftColWidth = renderPreviews ? (numberOfColumns >= 7 ? 11 : 4 + numberOfColumns) : 12;
-  const layoutRightColWidth = 12 - layoutLeftColWidth;
   const headingsTotal = Array.from(headings).length + 1;
 
   return (
@@ -341,26 +320,19 @@ export const ComponentDesignTokens: React.FC<ComponentDesignTokensProps> = ({
 
               {Array.from(propertiesMap)
                 .sort(([lProp], [rProp]) => lProp.localeCompare(rProp))
-                .map(([prop, cells], i) => (
+                .map(([, cells], i) => (
                   <TableRow key={`${previewObject.id}_table_tokens_row_${rowIdx}_${i}`} className="h-12">
                     <TableCell>
-                      {/* <p>{prop}</p> */}
                       {cells[0][0]}
                     </TableCell>
 
-                    {cells.map(([_, tokenValue, tokenReference], i) => (
-                      <TableCell key={`${previewObject.id}_table_tokens_row_${rowIdx}_${i}_cell_${i}`}>
-                        {/* {IsColorValue(tokenValue) && (
-                          <div className="group relative inline-block h-7 w-7 rounded-lg" style={{ background: tokenValue }}></div>
-                        )} */}
-                        {/* <PropertyIcon name={property} /> */}
-                        {!showReference ? (
-                          NormalizeValue(tokenValue)
-                        ) : tokenReference ? (
-                          <>{tokenReferenceFormat(tokenReference, 'css')} </>
-                        ) : (
-                          NormalizeValue(tokenValue)
-                        )}
+                    {cells.map(([, tokenValue, tokenReference], cellIdx) => (
+                      <TableCell key={`${previewObject.id}_table_tokens_row_${rowIdx}_${i}_cell_${cellIdx}`}>
+                        {(() => {
+                          if (!showReference) return NormalizeValue(tokenValue);
+                          if (tokenReference) return <>{tokenReferenceFormat(tokenReference, 'css')} </>;
+                          return NormalizeValue(tokenValue);
+                        })()}
                       </TableCell>
                     ))}
                   </TableRow>
@@ -371,6 +343,6 @@ export const ComponentDesignTokens: React.FC<ComponentDesignTokensProps> = ({
       </Table>
     </>
   );
-};
+}
 
 export default GenericComponentPage;

package/src/app/pages/system/tokens/foundations/colors.tsx

@@ -19,8 +19,7 @@ import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeCon
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
+export const getStaticProps: GetStaticProps = async () => {
   const config = getClientRuntimeConfig();
   return {
     ...{
@@ -32,6 +31,36 @@ export const getStaticProps: GetStaticProps = async (context) => {
     },
   };
 };
+
+const ColorGroupTable = ({ colors }: { group: string; colors: CoreTypes.IColorObject[] }) => {
+  return (
+    <Table className="border-b-[0.5px] border-l-[0.5px] border-r-[0.5px]">
+      <TableHeader className="border-b-0 border-l-[0.5px] border-r-[0.5px] border-t-[0.5px] bg-gray-50/80 dark:bg-gray-800/80 ">
+        <TableRow className="border-b-[0.5px]!">
+          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Name</TableHead>
+          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Value</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {colors.map((color) => (
+          <TableRow key={color.id} className="h-10 border-b-[0.5px]">
+            <TableCell className="border-r-[0.5px] px-3.5 py-1">{color.reference}</TableCell>
+            <TableCell className="border-r-[0.5px] px-3.5 py-1">
+              <div className="flex items-center gap-2">
+                <span
+                  className="group relative block h-4 w-4 rounded-full"
+                  style={{ background: color.value ?? '', backgroundBlendMode: color.blend ?? '' }}
+                ></span>
+                <code className="text-xs">{color.value}</code>
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
 /**
  * Define the components page
  * @param param0
@@ -94,33 +123,4 @@ const ComponentsPage = ({ content, menu, metadata, current, config, design }: Fo
   );
 };
 
-const ColorGroupTable = ({ group, colors }: { group: string; colors: CoreTypes.IColorObject[] }) => {
-  return (
-    <Table className="border-b-[0.5px] border-l-[0.5px] border-r-[0.5px]">
-      <TableHeader className="border-b-0 border-l-[0.5px] border-r-[0.5px] border-t-[0.5px] bg-gray-50/80 dark:bg-gray-800/80 ">
-        <TableRow className="border-b-[0.5px]!">
-          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Name</TableHead>
-          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Value</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {colors.map((color) => (
-          <TableRow key={color.id} className="h-10 border-b-[0.5px]">
-            <TableCell className="border-r-[0.5px] px-3.5 py-1">{color.reference}</TableCell>
-            <TableCell className="border-r-[0.5px] px-3.5 py-1">
-              <div className="flex items-center gap-2">
-                <span
-                  className="group relative block h-4 w-4 rounded-full"
-                  style={{ background: color.value ?? '', backgroundBlendMode: color.blend ?? '' }}
-                ></span>
-                <code className="text-xs">{color.value}</code>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
 export default ComponentsPage;

package/src/app/pages/system/tokens/foundations/effects.tsx

@@ -19,8 +19,7 @@ import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeCon
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
+export const getStaticProps: GetStaticProps = async () => {
   const config = getClientRuntimeConfig();
   return {
     ...{
@@ -32,6 +31,30 @@ export const getStaticProps: GetStaticProps = async (context) => {
     },
   };
 };
+
+const EffectsTable = ({ effects }: { group: string; effects: CoreTypes.IEffectObject[] }) => {
+  return (
+    <Table className="border-b-[0.5px] border-l-[0.5px] border-r-[0.5px]">
+      <TableHeader className="border-b-0 border-l-[0.5px] border-r-[0.5px] border-t-[0.5px] bg-gray-50/80 dark:bg-gray-800/80 ">
+        <TableRow className="border-b-[0.5px]!">
+          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Reference</TableHead>
+          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Effects</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {effects.map((effect) => (
+          <TableRow key={effect.id} className="h-10 border-b-[0.5px]">
+            <TableCell className="border-r-[0.5px] px-3.5 py-1">{effect.reference.replace(/-+/g, '-')}</TableCell>
+            <TableCell className="border-r-[0.5px] px-3.5 py-1">
+              {effect.effects.map((effect) => effect.value).join(', ') || 'none'}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
 /**
  * Define the components page
  * @param param0
@@ -87,27 +110,4 @@ const ComponentsPage = ({ content, menu, metadata, current, config, design }: Fo
   );
 };
 
-const EffectsTable = ({ group, effects }: { group: string; effects: CoreTypes.IEffectObject[] }) => {
-  return (
-    <Table className="border-b-[0.5px] border-l-[0.5px] border-r-[0.5px]">
-      <TableHeader className="border-b-0 border-l-[0.5px] border-r-[0.5px] border-t-[0.5px] bg-gray-50/80 dark:bg-gray-800/80 ">
-        <TableRow className="border-b-[0.5px]!">
-          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Reference</TableHead>
-          <TableHead className="border-r-[0.5px] px-4 text-xs font-light text-gray-900 dark:text-gray-100">Effects</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {effects.map((effect) => (
-          <TableRow key={effect.id} className="h-10 border-b-[0.5px]">
-            <TableCell className="border-r-[0.5px] px-3.5 py-1">{effect.reference.replace(/-+/g, '-')}</TableCell>
-            <TableCell className="border-r-[0.5px] px-3.5 py-1">
-              {effect.effects.map((effect) => effect.value).join(', ') || 'none'}
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
 export default ComponentsPage;

package/src/app/pages/system/tokens/foundations/typography.tsx

@@ -20,8 +20,7 @@ import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeCon
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
+export const getStaticProps: GetStaticProps = async () => {
   const config = getClientRuntimeConfig();
   return {
     ...{
@@ -33,40 +32,6 @@ export const getStaticProps: GetStaticProps = async (context) => {
     },
   };
 };
-/**
- * Define the components page
- * @param param0
- * @returns
- */
-const ComponentsPage = ({ content, menu, metadata, current, config, design }: FoundationDocumentationProps) => {
-  const typography = design.typography.slice().sort((a, b) => {
-    const l = (config?.app?.type_sort ?? []).indexOf(a.name) >>> 0;
-    const r = (config?.app?.type_sort ?? []).indexOf(b.name) >>> 0;
-    return l !== r ? l - r : a.name.localeCompare(b.name);
-  });
-
-  return (
-    <Layout config={config} menu={menu} current={current} metadata={metadata}>
-      <div className="flex flex-col gap-2 pb-7">
-        <HeadersType.H1>{metadata.title}</HeadersType.H1>
-        <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
-      </div>
-      <div className="mt-10 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
-        <div>
-          <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-          <FontsTable types={typography} />
-        </div>
-        <AnchorNav
-          groups={[Object.assign({}, ...[...typography.map((type) => ({ [`${type.name}-typography`]: `${upperFirst(type.name)}` }))])]}
-        />
-      </div>
-    </Layout>
-  );
-};
 
 const FontsTable = ({ types }: { types: CoreTypes.ITypographyObject[] }) => {
   return (
@@ -114,6 +79,41 @@ const FontsTable = ({ types }: { types: CoreTypes.ITypographyObject[] }) => {
   );
 };
 
+/**
+ * Define the components page
+ * @param param0
+ * @returns
+ */
+const ComponentsPage = ({ content, menu, metadata, current, config, design }: FoundationDocumentationProps) => {
+  const typography = design.typography.slice().sort((a, b) => {
+    const l = (config?.app?.type_sort ?? []).indexOf(a.name) >>> 0;
+    const r = (config?.app?.type_sort ?? []).indexOf(b.name) >>> 0;
+    return l !== r ? l - r : a.name.localeCompare(b.name);
+  });
+
+  return (
+    <Layout config={config} menu={menu} current={current} metadata={metadata}>
+      <div className="flex flex-col gap-2 pb-7">
+        <HeadersType.H1>{metadata.title}</HeadersType.H1>
+        <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
+      </div>
+      <div className="mt-10 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
+        <div>
+          <div className="prose">
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
+              {content}
+            </ReactMarkdown>
+          </div>
+          <FontsTable types={typography} />
+        </div>
+        <AnchorNav
+          groups={[Object.assign({}, ...[...typography.map((type) => ({ [`${type.name}-typography`]: `${upperFirst(type.name)}` }))])]}
+        />
+      </div>
+    </Layout>
+  );
+};
+
 export const pluckStyle = (type: CoreTypes.ITypographyObject) => {
   return {
     fontFamily: type.values.fontFamily,

package/src/cli.ts

@@ -19,7 +19,7 @@ class HandoffCliError extends Error {
  * Show the help message
  */
 const showVersion = () => {
-  return 'Handoff App - 1.2.1';
+  return 'Handoff App - 1.2.2';
 };
 
 /**