handoff-app 2.0.0-0 → 2.0.0-10

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

@@ -1,3 +1,4 @@
+import { PreviewWidth } from '@handoff/transformers/preview/types';
 import { PreviewObject } from '@handoff/types/preview';
 import { Filter, evaluateFilter } from '@handoff/utils/filter';
 import React from 'react';
@@ -13,6 +14,7 @@ export interface ComponentDisplaySliceProps {
   showPreview?: boolean;
   showCodeHighlight?: boolean;
   defaultHeight?: string;
+  defaultWidth?: PreviewWidth;
   filterBy?: Filter;
   codeHighlight?: boolean;
 }
@@ -38,6 +40,7 @@ const ComponentDisplaySlice: React.FC<ComponentDisplaySliceProps> = ({
   showPreview = true,
   showCodeHighlight,
   defaultHeight,
+  defaultWidth,
   filterBy,
   codeHighlight = true,
 }) => {
@@ -68,6 +71,7 @@ const ComponentDisplaySlice: React.FC<ComponentDisplaySliceProps> = ({
           title={title}
           component={filteredPreview}
           defaultHeight={finalDefaultHeight}
+          defaultWidth={defaultWidth}
           onPreviewChange={onPreviewChange}
         />
       )}

package/src/app/components/CopyToClipboard.tsx

@@ -7,11 +7,14 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/t
 
 type CopyToClipboardProps = {
   value: string;
+  /** Accessible name for the control, and the hover tooltip unless `showTooltip` is off. */
   tooltip: string;
+  /** Hide the tooltip where the surrounding UI already says what the button copies. */
+  showTooltip?: boolean;
   className?: string;
 };
 
-export const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ value, tooltip, className }) => {
+export const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ value, tooltip, showTooltip = true, className }) => {
   const [copied, setCopied] = React.useState<boolean>(false);
 
   const handleCopy = async () => {
@@ -24,33 +27,32 @@ export const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ value, tooltip
     }
   };
 
+  const button = (
+    <Button
+      variant="outline"
+      size="icon"
+      className={cn('disabled:opacity-100', className)}
+      onClick={handleCopy}
+      aria-label={copied ? 'Copied' : tooltip}
+      disabled={copied}
+    >
+      <div className={cn('transition-all', copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0')}>
+        <CheckIcon className="stroke-gray-600" size={16} aria-hidden="true" />
+      </div>
+      <div className={cn('absolute transition-all', copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100')}>
+        <CopyIcon aria-hidden="true" />
+      </div>
+    </Button>
+  );
+
+  if (!showTooltip) {
+    return button;
+  }
+
   return (
     <TooltipProvider delayDuration={0}>
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="icon"
-            className={cn('disabled:opacity-100', className)}
-            onClick={handleCopy}
-            aria-label={copied ? 'Copied' : 'Copy to clipboard'}
-            disabled={copied}
-          >
-            <div
-              className={cn('transition-all', copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0')}
-            >
-              <CheckIcon className="stroke-gray-600" size={16} aria-hidden="true" />
-            </div>
-            <div
-              className={cn(
-                'absolute transition-all',
-                copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
-              )}
-            >
-              <CopyIcon aria-hidden="true" />
-            </div>
-          </Button>
-        </TooltipTrigger>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
         <TooltipContent className="px-2 py-1 text-xs">{tooltip}</TooltipContent>
       </Tooltip>
     </TooltipProvider>
@@ -58,4 +60,3 @@ export const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ value, tooltip
 };
 
 export default CopyToClipboard;
-

package/src/app/components/Foundations/DisplayLogo.tsx

@@ -2,11 +2,17 @@ import React from 'react';
 import type { DisplayableAsset } from '../util/useCollectionAssets';
 
 export const DisplayLogo: React.FC<{ logo: DisplayableAsset; content?: string; correct?: boolean }> = ({ logo, content }) => {
-  // Registry serves the individual asset content URL; workspace/static serves the mirrored file.
+  // Workspace/static ships the SVG body inline in tokens.json (`data`), so render it directly and
+  // avoid depending on the fetch-only `/api/assets/logos/*` files that a static host won't have.
+  // Registry has no inline body, so it falls back to the individual asset content URL (`src`).
   const src = logo.src ?? `${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/assets/logos/${logo.path}`;
   return (
     <div className="flex flex-col gap-5">
-      <img src={src} alt="Usage Cards" className="rounded-3xl" />
+      {logo.data ? (
+        <div className="rounded-3xl" dangerouslySetInnerHTML={{ __html: logo.data }} />
+      ) : (
+        <img src={src} alt={logo.name} className="rounded-3xl" />
+      )}
       <div className="flex flex-row gap-4">
         <img src={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/assets/images/check-circle.svg`} alt="Do" className="h-6 w-6" />
         <p className="leading-normal text-gray-500">

package/src/app/components/Layout/Header.tsx

@@ -1,22 +1,19 @@
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import { AiAssistantTrigger } from '../../components/AiAssistant/AiAssistantProvider';
+import { McpConfigDialog } from '../../components/McpIntegration/McpConfigDialog';
 import { ModeToggle } from '../../components/ModeSwitcher';
 import { MainNav } from '../../components/Navigation/MainNav';
 import { MobileNav } from '../../components/Navigation/MobileNav';
 import { cn } from '../../lib/utils';
-import { Badge } from '../ui/badge';
 import { useConfigContext } from '../context/ConfigContext';
-
-const RUNTIME_MODE_LABEL: Record<'workspace' | 'registry', string> = {
-  workspace: 'Workspace',
-  registry: 'Registry',
-};
+import { AuthControls } from '../Auth/AuthControls';
+import { RuntimeModeBadge } from './RuntimeModeBadge';
 
 export function Header() {
   const context = useConfigContext();
   const [isScrolled, setIsScrolled] = useState(false);
   const runtimeMode = context.config?.runtime?.mode ?? 'workspace';
-  const runtimeModeLabel = RUNTIME_MODE_LABEL[runtimeMode];
   // The static export is a self-contained snapshot of the workspace, not a live runtime, so the
   // runtime-mode badge carries no meaning there and is omitted.
   const isStaticSnapshot = process.env.HANDOFF_BUILD_TARGET === 'static';
@@ -33,8 +30,8 @@ export function Header() {
   return (
     <div
       className={cn(
-        'sticky top-0 z-50 py-4 shadow-[0_0_3px_0_rgba(0,0,0,0.15)] backdrop-blur-sm transition-all duration-300',
-        isScrolled && 'bg-background/70 py-3 shadow-[0_0_4px_0_rgba(0,0,0,0.15)]'
+        'ai-dock-bleed h-17 sticky top-0 z-50 py-4 shadow-[0_0_3px_0_rgba(0,0,0,0.15)] backdrop-blur-sm transition-all duration-300',
+        isScrolled && 'bg-background/70 shadow-[0_0_4px_0_rgba(0,0,0,0.15)]'
       )}
     >
       <header className="border-grid container mx-auto w-full max-w-[1500px] bg-transparent px-8">
@@ -43,14 +40,13 @@ export function Header() {
             <Link href="/">
               <img className="max-h-5" src={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/logo.svg`} alt={context.config?.app?.title} />
             </Link>
-            {!isStaticSnapshot && (
-              <Badge variant={runtimeMode === 'registry' ? 'info' : 'default'} aria-label={`Runtime mode: ${runtimeModeLabel}`}>
-                {runtimeModeLabel}
-              </Badge>
-            )}
+            {!isStaticSnapshot && <RuntimeModeBadge mode={runtimeMode} />}
           </div>
           <div className="hidden items-center gap-4 @2xl:flex">
             <MainNav />
+            <AiAssistantTrigger />
+            <McpConfigDialog />
+            {runtimeMode === 'registry' ? <AuthControls /> : null}
             <ModeToggle />
           </div>
           <div className="flex items-center gap-4 @2xl:hidden">

package/src/app/components/Layout/RuntimeModeBadge.tsx

@@ -0,0 +1,18 @@
+import type { RuntimeMode } from '@handoff/types/config';
+import { Badge } from '../ui/badge';
+
+const LABEL: Record<RuntimeMode, string> = {
+  workspace: 'Workspace',
+  registry: 'Registry',
+};
+
+/**
+ * The Workspace/Registry marker, shared by the header and the MCP connect dialog. `mode` is a prop
+ * because the header reads the projected client config while the dialog reads the mode baked into
+ * the bundle.
+ */
+export const RuntimeModeBadge: React.FC<{ mode: RuntimeMode; className?: string }> = ({ mode, className }) => (
+  <Badge variant={mode === 'registry' ? 'info' : 'default'} className={className} aria-label={`Runtime mode: ${LABEL[mode]}`}>
+    {LABEL[mode]}
+  </Badge>
+);

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

@@ -1,3 +1,4 @@
+import type { RendererKind } from '@handoff/catalog/renderers';
 import { PreviewObject } from '@handoff/types/preview';
 // @ts-ignore
 import { CollapsibleTrigger } from '@radix-ui/react-collapsible';
@@ -34,6 +35,60 @@ SyntaxHighlighter.registerLanguage('html', html);
 SyntaxHighlighter.registerLanguage('xml', html);
 SyntaxHighlighter.registerLanguage('handlebars', handlebars);
 SyntaxHighlighter.registerLanguage('hbs', handlebars);
+
+type CodeFormat = { label: string; language: string };
+
+/**
+ * How each renderer's implementation code is shown. Exhaustive over `RendererKind`, so a new
+ * renderer fails to compile until its label and highlighting are declared. `RENDERER_PLUGINS`
+ * puts the same guard on preview support.
+ */
+const CODE_FORMATS: Record<RendererKind, CodeFormat> = {
+  react: { label: 'React (TSX)', language: 'tsx' },
+  handlebars: { label: 'Handlebars', language: 'handlebars' },
+};
+
+/**
+ * Formats that are not a renderer name: the synthetic `html` that the string and empty-data
+ * branches set, and the language names that older artifacts carry in `format`.
+ */
+const FORMAT_ALIASES: Record<string, CodeFormat> = {
+  html: { label: 'HTML', language: 'html' },
+  tsx: CODE_FORMATS.react,
+  jsx: { label: 'React (JSX)', language: 'jsx' },
+  ts: { label: 'TypeScript', language: 'typescript' },
+  typescript: { label: 'TypeScript', language: 'typescript' },
+  js: { label: 'JavaScript', language: 'javascript' },
+  javascript: { label: 'JavaScript', language: 'javascript' },
+};
+
+const formatFor = (format?: string): CodeFormat => {
+  const key = format?.toLowerCase() ?? '';
+  // Legacy default: an unrecognized format reads as plain code and highlights as Handlebars.
+  return CODE_FORMATS[key as RendererKind] ?? FORMAT_ALIASES[key] ?? { label: 'Code', language: 'handlebars' };
+};
+
+type CodeView = { label?: string; language?: string };
+
+/**
+ * The code views, in the order they are offered. An allowlist rather than a denylist of metadata:
+ * a field added to the record later cannot become a view by default. An absent `label` or
+ * `language` is computed: from the item's format for `code`, from the `type` prop for `html`, and
+ * by JSX detection for `js`.
+ */
+const CODE_VIEWS: Record<string, CodeView> = {
+  usage: { label: 'Usage', language: 'tsx' },
+  code: {},
+  html: { label: 'HTML' },
+  css: { label: 'CSS', language: 'css' },
+  js: { label: 'JavaScript' },
+  sass: { label: 'SASS', language: 'scss' },
+  sharedStyles: { label: 'Shared CSS', language: 'css' },
+};
+
+/** `usage` is derived from the previews, not read off the record, so it is offered separately. */
+const RECORD_VIEWS = Object.keys(CODE_VIEWS).filter((key) => key !== 'usage');
+
 /**
  * Highlight code for preview elements
  * @param param0
@@ -88,14 +143,7 @@ export const CodeHighlight: React.FC<{
   }
   if (!type) type = 'html';
 
-  const metadataKeys = [
-    'id', 'preview', 'image', 'categories', 'title', 'format',
-    'description', 'type', 'group', 'tags', 'previews', 'properties',
-    'should_do', 'should_not_do', 'figma', 'usage',
-  ];
-
-  const states = Object.keys(data)
-    .filter((key) => !metadataKeys.includes(key) && !!(data as Record<string, any>)[key]);
+  const states = RECORD_VIEWS.filter((key) => !!(data as Record<string, any>)[key]);
   const hasPerPreviewUsage =
     typeof data === 'object' &&
     !!data.previews &&
@@ -116,35 +164,11 @@ export const CodeHighlight: React.FC<{
   theme['pre[class*="language-"]'].maxHeight = height ?? '450px';
   theme['pre[class*="language-"]'].margin = '0';
 
-  const labels: Record<string, string> = {
-    code: 'Code',
-    handlebars: 'Handlebars',
-    hbs: 'Handlebars',
-    html: 'HTML',
-    css: 'CSS',
-    js: 'JavaScript',
-    javascript: 'JavaScript',
-    jsx: 'JSX',
-    tsx: 'TSX',
-    typescript: 'TypeScript',
-    ts: 'TypeScript',
-    sass: 'SASS',
-    scss: 'SCSS',
-    sharedStyles: 'Shared CSS',
-    usage: 'Usage',
-    json: 'JSON',
-    markdown: 'Markdown',
-  };
-
   const getLabel = (state: string): string => {
     if (state === 'code' && typeof data === 'object') {
-      const format = data.format?.toLowerCase();
-      if (format === 'react' || format === 'tsx') return 'React (TSX)';
-      if (format === 'jsx') return 'React (JSX)';
-      if (format === 'typescript' || format === 'ts') return 'TypeScript';
-      if (format === 'javascript' || format === 'js') return 'JavaScript';
+      return formatFor(data.format).label;
     }
-    return labels[state] || state.charAt(0).toUpperCase() + state.slice(1);
+    return CODE_VIEWS[state]?.label ?? state.charAt(0).toUpperCase() + state.slice(1);
   };
 
   /**
@@ -155,39 +179,22 @@ export const CodeHighlight: React.FC<{
       return activeState === 'html' ? type : activeState;
     }
 
-    // Handle React/JSX/TSX code format
-    if ('code' in data && !!data.code && activeState === 'code') {
-      const format = data.format?.toLowerCase();
-      if (format === 'react' || format === 'tsx') return 'tsx';
-      if (format === 'jsx') return 'jsx';
-      if (format === 'typescript' || format === 'ts') return 'typescript';
-      if (format === 'javascript' || format === 'js') return 'javascript';
-      return 'handlebars';
+    if (activeState === 'code') {
+      return formatFor(data.format).language;
+    }
+
+    // The `type` prop names the markup language of the rendered preview.
+    if (activeState === 'html') {
+      return type || 'html';
     }
 
-    // Handle JavaScript state
+    // A component's compiled JS can be plain JavaScript or still hold JSX.
     if (activeState === 'js') {
-      // Check if the JS code contains JSX syntax (common patterns)
       const jsCode = 'js' in data ? data.js : '';
-      if (typeof jsCode === 'string' && hasJsxSyntax(jsCode)) {
-        return 'jsx';
-      }
-      return 'javascript';
+      return typeof jsCode === 'string' && hasJsxSyntax(jsCode) ? 'jsx' : 'javascript';
     }
 
-    // Map common state names to language identifiers
-    const languageMap: Record<string, string> = {
-      html: type || 'html',
-      css: 'css',
-      sass: 'scss',
-      sharedStyles: 'css',
-      usage: 'tsx',
-      json: 'json',
-      handlebars: 'handlebars',
-      hbs: 'handlebars',
-    };
-
-    return languageMap[activeState] || activeState;
+    return CODE_VIEWS[activeState]?.language ?? activeState;
   };
 
   /**
@@ -285,15 +292,11 @@ export const CodeHighlight: React.FC<{
                 <SelectValue placeholder="Code View" />
               </SelectTrigger>
               <SelectContent>
-                {selectableStates
-                  .filter((value) => ['usage', 'code', 'html', 'css', 'js', 'sass', 'sharedStyles'].includes(value))
-                  .map((state) => {
-                    return (
-                      <SelectItem key={state} value={state}>
-                        {getLabel(state)}
-                      </SelectItem>
-                    );
-                  })}
+                {selectableStates.map((state) => (
+                  <SelectItem key={state} value={state}>
+                    {getLabel(state)}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           )}

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

@@ -70,38 +70,36 @@ function extractText(node: any): string {
 
 const Headings = (element: any) => {
   const { children, node } = element;
-  if (children[0]) {
-    const type = node.tagName || 'h6';
-
-    let anchor = extractText(children).toLowerCase();
-    anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, '');
-    anchor = anchor.replace(/ /g, '-');
-
-    const container = (children: React.ReactNode): React.ReactNode => (
-      <>
-        {children}
-        <a id={anchor} href={`#${anchor}`} className="doc-link"></a>
-      </>
-    );
-
-    switch (type) {
-      case 'h1':
-        return <h1 className="text-2xl font-bold">{container(children)}</h1>;
-      case 'h2':
-        return <h2 className="text-xl font-bold">{container(children)}</h2>;
-      case 'h3':
-        return <h3 className="text-lg font-bold">{container(children)}</h3>;
-      case 'h4':
-        return <h4 className="text-base font-bold">{container(children)}</h4>;
-      case 'h5':
-        return <h5 className="text-sm font-bold">{container(children)}</h5>;
-      case 'h6':
-        return <h6 className="text-xs font-bold">{container(children)}</h6>;
-      default:
-        return <h6 className="text-xs font-bold">{container(children)}</h6>;
-    }
-  } else {
-    return <h1>children</h1>;
+  if (React.Children.count(children) === 0) return <></>;
+
+  const type = node.tagName || 'h6';
+
+  let anchor = extractText(children).toLowerCase();
+  anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, '');
+  anchor = anchor.replace(/ /g, '-');
+
+  const container = (children: React.ReactNode): React.ReactNode => (
+    <>
+      {children}
+      <a id={anchor} href={`#${anchor}`} className="doc-link"></a>
+    </>
+  );
+
+  switch (type) {
+    case 'h1':
+      return <h1 className="text-2xl font-bold">{container(children)}</h1>;
+    case 'h2':
+      return <h2 className="text-xl font-bold">{container(children)}</h2>;
+    case 'h3':
+      return <h3 className="text-lg font-bold">{container(children)}</h3>;
+    case 'h4':
+      return <h4 className="text-base font-bold">{container(children)}</h4>;
+    case 'h5':
+      return <h5 className="text-sm font-bold">{container(children)}</h5>;
+    case 'h6':
+      return <h6 className="text-xs font-bold">{container(children)}</h6>;
+    default:
+      return <h6 className="text-xs font-bold">{container(children)}</h6>;
   }
 };