@fragments-sdk/cli 0.7.3 → 0.7.5

package/src/viewer/components/CodePanel.tsx

@@ -1,6 +1,6 @@
-import { useMemo, isValidElement, type ReactNode } from 'react';
-import type { FragmentVariant, PropDefinition } from '../../core/index.js';
+import { useMemo } from 'react';
 import { CodeBlock } from '@fragments/ui';
+import type { FragmentVariant, PropDefinition } from '../../core/index.js';
 
 interface CodePanelProps {
   variant: FragmentVariant;
@@ -9,238 +9,107 @@ interface CodePanelProps {
   propDefs?: Record<string, PropDefinition>;
 }
 
-// Extract props from rendered element by calling render() and introspecting
-function extractPropsFromRender(variant: FragmentVariant, componentName: string): Record<string, unknown> | null {
-  try {
-    const rendered = variant.render();
-    if (!isValidElement(rendered)) return null;
-
-    // Check if this is the expected component (by displayName or name)
-    const elementType = rendered.type;
-    const typeName = typeof elementType === 'function'
-      ? (elementType as { displayName?: string; name?: string }).displayName || (elementType as { name?: string }).name
-      : typeof elementType === 'string' ? elementType : null;
-
-    // Only extract if it's a single element of the expected component type
-    if (typeName && typeName.toLowerCase() === componentName.toLowerCase()) {
-      return rendered.props as Record<string, unknown>;
-    }
-
-    // If it's a wrapper element, try to find the component in children
-    const props = rendered.props as { children?: ReactNode };
-    if (props.children && isValidElement(props.children)) {
-      const childType = props.children.type;
-      const childTypeName = typeof childType === 'function'
-        ? (childType as { displayName?: string; name?: string }).displayName || (childType as { name?: string }).name
-        : null;
-      if (childTypeName && childTypeName.toLowerCase() === componentName.toLowerCase()) {
-        return props.children.props as Record<string, unknown>;
-      }
-    }
-
-    return null;
-  } catch {
-    return null;
-  }
+function quoteString(value: string): string {
+  return `'${value
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/\n/g, '\\n')
+  }'`;
 }
 
-// Check if the component likely needs state management
-function needsStatefulExample(componentName: string, propDefs?: Record<string, PropDefinition>): boolean {
-  const statefulComponents = ['toggle', 'checkbox', 'input', 'select', 'switch', 'radio'];
-  const lowerName = componentName.toLowerCase();
+function serializeValue(value: unknown): string | null {
+  if (value === null) return '{null}';
+  if (value === undefined) return null;
 
-  if (statefulComponents.some(c => lowerName.includes(c))) {
-    return true;
+  if (typeof value === 'string') {
+    return quoteString(value);
   }
 
-  // Check if component has onChange/onChecked props
-  if (propDefs) {
-    const hasChangeHandler = Object.keys(propDefs).some(
-      key => key === 'onChange' || key === 'onChecked' || key === 'onValueChange'
-    );
-    const hasValueProp = Object.keys(propDefs).some(
-      key => key === 'value' || key === 'checked'
-    );
-    return hasChangeHandler && hasValueProp;
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return `{${String(value)}}`;
   }
 
-  return false;
-}
+  if (Array.isArray(value)) {
+    const items = value
+      .map((item) => serializeValue(item))
+      .filter((item): item is string => item !== null)
+      .map((item) => (item.startsWith('{') && item.endsWith('}') ? item.slice(1, -1) : item));
 
-/**
- * Convert compiled jsxDEV/jsx calls back to clean JSX syntax.
- * Handles: jsxDEV(Component, { props, children }, ...) -> <Component props>children</Component>
- */
-function decompileJsxDev(code: string, indent = 0): string {
-  const indentStr = '  '.repeat(indent);
-
-  // Match jsxDEV or jsx call: jsxDEV(Component, {props}, ...)
-  // Also handle _jsxDEV, /* @__PURE__ */ prefix
-  const jsxMatch = code.match(/(?:\/\*\s*@__PURE__\s*\*\/\s*)?_?jsxs?(?:DEV)?\s*\(\s*([^,]+)\s*,\s*(\{[\s\S]*\})\s*(?:,[\s\S]*)?\)$/);
-
-  if (!jsxMatch) {
-    // Not a jsxDEV call - might be a plain string or primitive
-    const trimmed = code.trim();
-    // If it's a quoted string, return the content
-    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) ||
-        (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
-      return trimmed.slice(1, -1);
-    }
-    return trimmed;
+    if (items.length === 0) return '{[]}';
+    return `{[${items.join(', ')}]}`;
   }
 
-  let componentName = jsxMatch[1].trim();
-  const propsStr = jsxMatch[2];
-
-  // Clean up component name (remove quotes for HTML elements)
-  if (componentName.startsWith('"') || componentName.startsWith("'")) {
-    componentName = componentName.slice(1, -1);
+  if (typeof value === 'object') {
+    return '{/* complex value */}';
   }
 
-  // Parse props object - extract key-value pairs
-  const props: Record<string, string> = {};
-  let children: string | null = null;
-
-  // Debug props that should be excluded (added by jsxDEV in development)
-  const debugProps = new Set(['fileName', 'lineNumber', 'columnNumber', '__source', '__self']);
-
-  // Simple prop extraction (handles most common cases)
-  // Match: key: value, key: "string", key: number, key: boolean
-  const propMatches = propsStr.matchAll(/(\w+)\s*:\s*("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|[\w.]+|\{[^}]*\}|(?:\/\*[\s\S]*?\*\/\s*)?_?jsxs?(?:DEV)?\s*\([^)]*(?:\([^)]*\)[^)]*)*\))/g);
-
-  for (const match of propMatches) {
-    const key = match[1];
-    const value = match[2];
+  return null;
+}
 
-    // Skip debug props
-    if (debugProps.has(key)) continue;
+function toSingleLine(code: string): string {
+  return code
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+}
 
-    if (key === 'children') {
-      // Handle children specially
-      if (value.includes('jsxDEV') || value.includes('jsx(') || value.includes('_jsx')) {
-        // Nested JSX - recursively decompile
-        children = decompileJsxDev(value, indent + 1);
-      } else if (value.startsWith('"') || value.startsWith("'")) {
-        // String children
-        children = value.slice(1, -1);
-      } else {
-        children = `{${value}}`;
-      }
-    } else {
-      // Regular props
-      if (value.startsWith('"') || value.startsWith("'")) {
-        props[key] = value; // Keep as quoted string
-      } else if (value === 'true' || value === 'false') {
-        props[key] = value === 'true' ? `{true}` : `{false}`;
-      } else if (!isNaN(Number(value))) {
-        props[key] = `{${value}}`;
-      } else {
-        props[key] = `{${value}}`;
-      }
-    }
-  }
+function buildFallbackSnippet(componentName: string, variant: FragmentVariant): string {
+  const args = variant.args ?? {};
+  const propEntries = Object.entries(args)
+    .filter(([name, value]) => name !== 'children' && typeof value !== 'function')
+    .map(([name, value]) => {
+      const serialized = serializeValue(value);
+      return serialized ? `${name}=${serialized}` : null;
+    })
+    .filter((entry): entry is string => entry !== null);
+
+  const children = typeof args.children === 'string' ? args.children : null;
+  const openTag = propEntries.length > 0
+    ? `<${componentName} ${propEntries.join(' ')}>`
+    : `<${componentName}>`;
+
+  const usage = children
+    ? `${openTag}${children}</${componentName}>`
+    : toSingleLine(`${openTag}</${componentName}>`);
+
+  return `import { ${componentName} } from '@/components/${componentName}';
+
+// TODO: Add explicit \`code\` for variant "${variant.name}" in this fragment file.
+${usage}`;
+}
 
-  // Build JSX string
-  const propParts = Object.entries(props)
-    .filter(([k]) => k !== 'children')
-    .map(([k, v]) => {
-      // Convert camelCase event handlers back
-      if (v.startsWith('"') || v.startsWith("'")) {
-        return `${k}=${v}`;
-      }
-      return `${k}=${v}`;
-    });
+function normalizeAuthoredSnippet(code: string): string {
+  const normalized = code.replace(/\r\n/g, '\n').trim();
+  return normalized.length > 0 ? normalized : '';
+}
 
-  const propsJsx = propParts.length > 0 ? ' ' + propParts.join(' ') : '';
+export function __buildFallbackSnippetForTest(componentName: string, variant: FragmentVariant): string {
+  return buildFallbackSnippet(componentName, variant);
+}
 
-  if (children) {
-    if (children.includes('\n')) {
-      return `${indentStr}<${componentName}${propsJsx}>\n${children}\n${indentStr}</${componentName}>`;
+function resolveDisplayedCode(componentName: string, variant: FragmentVariant): string {
+  if (typeof variant.code === 'string') {
+    const normalized = normalizeAuthoredSnippet(variant.code);
+    if (normalized.length > 0) {
+      return normalized;
     }
-    return `${indentStr}<${componentName}${propsJsx}>${children}</${componentName}>`;
   }
 
-  return `${indentStr}<${componentName}${propsJsx} />`;
+  return buildFallbackSnippet(componentName, variant);
 }
 
-/**
- * Extract the JSX body from a render function's source code.
- * Works with arrow functions like: () => <Component /> or () => (<div>...</div>)
- * Also handles compiled jsxDEV calls and converts them back to JSX.
- */
-function extractRenderBody(renderFn: () => ReactNode): string | null {
-  try {
-    const source = renderFn.toString();
-
-    // Match arrow function body: () => <...> or () => (...)
-    // Handle both: () => <X /> and () => (\n  <X />\n)
-    const arrowMatch = source.match(/^\s*\(\s*\)\s*=>\s*(.+)$/s);
-    if (arrowMatch) {
-      let body = arrowMatch[1].trim();
-
-      // Remove outer parentheses if present
-      if (body.startsWith('(') && body.endsWith(')')) {
-        body = body.slice(1, -1).trim();
-      }
-
-      // Check if this is compiled JSX (jsxDEV calls)
-      if (body.includes('jsxDEV') || body.includes('jsx(') || body.includes('_jsx')) {
-        return decompileJsxDev(body);
-      }
-
-      return body;
-    }
-
-    // Match function body with return statement
-    const returnMatch = source.match(/return\s*\(\s*([\s\S]*?)\s*\)\s*;?\s*\}?\s*$/);
-    if (returnMatch) {
-      const body = returnMatch[1].trim();
-
-      // Check if this is compiled JSX
-      if (body.includes('jsxDEV') || body.includes('jsx(') || body.includes('_jsx')) {
-        return decompileJsxDev(body);
-      }
-
-      return body;
-    }
-
-    return null;
-  } catch {
-    return null;
-  }
+export function __resolveDisplayedCodeForTest(componentName: string, variant: FragmentVariant): string {
+  return resolveDisplayedCode(componentName, variant);
 }
 
-export function CodePanel({ variant, componentName, compact = false, propDefs }: CodePanelProps) {
-  // Generate code - extract from render function source for accuracy
-  const generatedCode = useMemo(() => {
-    // Priority 1: Use variant.code if available (from compiled JSON/AST)
-    if (variant.code) {
-      return generateFullExample(componentName, variant.code);
-    }
-
-    // Priority 2: Extract source from render function (runtime)
-    if (variant.render) {
-      const renderBody = extractRenderBody(variant.render);
-      if (renderBody) {
-        return generateFullExample(componentName, renderBody);
-      }
-    }
-
-    // Priority 3: Generate from args (fallback for edge cases)
-    const needsState = needsStatefulExample(componentName, propDefs);
-    let effectiveArgs = variant.args;
-
-    // If no args on variant, try to extract from rendered element
-    if (!effectiveArgs || Object.keys(effectiveArgs).length === 0) {
-      effectiveArgs = extractPropsFromRender(variant, componentName) ?? undefined;
-    }
-
-    return generateCombinedCode(componentName, propDefs, effectiveArgs, needsState);
-  }, [componentName, variant, propDefs]);
+export function CodePanel({ variant, componentName, compact = false }: CodePanelProps) {
+  const code = useMemo(() => resolveDisplayedCode(componentName, variant), [componentName, variant]);
 
   return (
     <CodeBlock
-      code={generatedCode}
+      code={code}
       language="tsx"
       showCopy
       maxHeight={400}
@@ -248,264 +117,3 @@ export function CodePanel({ variant, componentName, compact = false, propDefs }:
     />
   );
 }
-
-/**
- * Normalize indentation by removing common leading whitespace from all lines.
- * Handles JSX where first line may be at column 0 but inner content is indented.
- */
-function normalizeIndentation(code: string): string {
-  const lines = code.split('\n');
-  if (lines.length <= 1) return code;
-
-  // Find minimum indentation (ignoring empty lines and first line)
-  // First line often has 0 indent, but inner content is over-indented
-  let minIndent = Infinity;
-  const firstLineIndent = lines[0].match(/^(\s*)/)?.[1].length ?? 0;
-
-  for (let i = 1; i < lines.length; i++) {
-    const line = lines[i];
-    if (line.trim().length === 0) continue;
-    const indent = line.match(/^(\s*)/)?.[1].length ?? 0;
-    minIndent = Math.min(minIndent, indent);
-  }
-
-  // If first line has indent, include it in calculation
-  if (firstLineIndent > 0) {
-    minIndent = Math.min(minIndent, firstLineIndent);
-  }
-
-  if (minIndent === Infinity || minIndent === 0) return code;
-
-  // Remove the common indentation from all lines
-  return lines
-    .map(line => line.slice(Math.min(minIndent, line.match(/^(\s*)/)?.[1].length ?? 0)))
-    .join('\n');
-}
-
-// Generate a full example from the variant's code string
-// Shows the ACTUAL code from the fragment file - no transformations
-function generateFullExample(
-  componentName: string,
-  variantCode: string
-): string {
-  // Normalize indentation first
-  const normalizedCode = normalizeIndentation(variantCode);
-
-  // Add component import
-  const imports = [`import { ${componentName} } from '@/components/${componentName}';`];
-
-  // Check if the code uses StatefulXxx wrapper - if so, include that helper
-  const statefulPattern = new RegExp(`<Stateful${componentName}`, 'i');
-  const usesStatefulWrapper = statefulPattern.test(normalizedCode);
-
-  if (usesStatefulWrapper) {
-    imports.unshift(`import { useState } from 'react';`);
-
-    // Determine the state type based on component
-    const lowerName = componentName.toLowerCase();
-    const isToggleLike = lowerName.includes('toggle') || lowerName.includes('checkbox') || lowerName.includes('switch');
-
-    const stateType = isToggleLike ? 'boolean' : 'string';
-    const defaultValue = isToggleLike ? 'false' : "''";
-    const stateName = isToggleLike ? 'checked' : 'value';
-    const setterName = isToggleLike ? 'setChecked' : 'setValue';
-    const valueProp = isToggleLike ? 'checked' : 'value';
-    const handlerProp = 'onChange';
-
-    // Generate the stateful wrapper helper that the code uses
-    const helperCode = `
-// Stateful wrapper for interactive demos
-function Stateful${componentName}(props: React.ComponentProps<typeof ${componentName}>) {
-  const [${stateName}, ${setterName}] = useState(props.${valueProp} ?? ${defaultValue});
-  return <${componentName} {...props} ${valueProp}={${stateName}} ${handlerProp}={${setterName}} />;
-}`;
-
-    return `${imports.join('\n')}
-${helperCode}
-
-// Example usage:
-${normalizedCode}`;
-  }
-
-  // For non-stateful code, just show the raw code with import
-  return `${imports.join('\n')}
-
-${normalizedCode}`;
-}
-
-// Generate combined import statement + JSX usage
-function generateCombinedCode(
-  componentName: string,
-  propDefs?: Record<string, PropDefinition>,
-  variantArgs?: Record<string, unknown>,
-  needsState?: boolean
-): string {
-  const imports: string[] = [];
-  const hooks: string[] = [];
-
-  if (needsState) {
-    imports.push(`import { useState } from 'react';`);
-  }
-  imports.push(`import { ${componentName} } from '@/components/${componentName}';`);
-
-  // Determine state props that will be managed by hooks (to avoid duplicates)
-  const lowerName = componentName.toLowerCase();
-  const isToggleLike = lowerName.includes('toggle') || lowerName.includes('checkbox') || lowerName.includes('switch');
-  const statePropsToSkip = needsState
-    ? isToggleLike
-      ? ['checked', 'onChange', 'onCheckedChange']
-      : ['value', 'onChange', 'onValueChange']
-    : [];
-
-  // Build props string - prefer actual variant args over prop definitions
-  const propsEntries: string[] = [];
-  let childrenValue: unknown = undefined;
-
-  if (variantArgs && Object.keys(variantArgs).length > 0) {
-    // Use actual variant args for accurate code generation
-    for (const [name, value] of Object.entries(variantArgs)) {
-      if (value === undefined) continue;
-
-      // Handle children specially - will be rendered as element content
-      if (name === 'children') {
-        childrenValue = value;
-        continue;
-      }
-
-      // Skip function props (callbacks) - they're runtime handlers
-      if (typeof value === 'function') continue;
-
-      // Skip props that will be managed by state hooks
-      if (statePropsToSkip.includes(name)) continue;
-
-      const propType = propDefs?.[name]?.type || typeof value;
-      const formattedValue = formatPropValue(value, propType);
-      propsEntries.push(`${name}=${formattedValue}`);
-    }
-  } else if (propDefs) {
-    // Fallback to prop definitions if no variant args
-    for (const [name, def] of Object.entries(propDefs)) {
-      if (name === 'children') {
-        if (def.default !== undefined) {
-          childrenValue = def.default;
-        }
-        continue;
-      }
-
-      // Skip props that will be managed by state hooks
-      if (statePropsToSkip.includes(name)) continue;
-
-      if (def.required && def.default !== undefined) {
-        const value = formatPropValue(def.default, def.type);
-        propsEntries.push(`${name}=${value}`);
-      } else if (def.required) {
-        const placeholder = getTypePlaceholder(name, def);
-        propsEntries.push(`${name}=${placeholder}`);
-      }
-    }
-  }
-
-  // Build JSX code
-  const hasChildren = childrenValue !== undefined && childrenValue !== null;
-  const childrenStr = hasChildren ? formatChildrenValue(childrenValue) : null;
-
-  // For stateful components, wrap in a function component
-  if (needsState) {
-    let stateName = 'value';
-    let setterName = 'setValue';
-    let handlerProp = 'onChange';
-    let valueProp = 'value';
-    let defaultValue = "''";
-    let stateType = 'string';
-
-    if (isToggleLike) {
-      stateType = 'boolean';
-      defaultValue = 'false';
-      stateName = 'checked';
-      setterName = 'setChecked';
-      handlerProp = propDefs?.['onCheckedChange'] ? 'onCheckedChange' : 'onChange';
-      valueProp = 'checked';
-    }
-
-    hooks.push(`const [${stateName}, ${setterName}] = useState<${stateType}>(${defaultValue});`);
-
-    // Add state props
-    propsEntries.push(`${valueProp}={${stateName}}`);
-    propsEntries.push(`${handlerProp}={${setterName}}`);
-
-    const propsStr = propsEntries.length > 0
-      ? `\n      ${propsEntries.join('\n      ')}\n    `
-      : ' ';
-
-    const jsxCode = hasChildren
-      ? `<${componentName}${propsStr}>${childrenStr}</${componentName}>`
-      : `<${componentName}${propsStr}/>`;
-
-    return `${imports.join('\n')}
-
-function Example() {
-  ${hooks.join('\n  ')}
-
-  return (
-    ${jsxCode}
-  );
-}`;
-  }
-
-  // Simple non-stateful code
-  let jsxCode: string;
-
-  if (propsEntries.length === 0 && !hasChildren) {
-    jsxCode = `<${componentName} />`;
-  } else if (propsEntries.length === 0 && hasChildren) {
-    jsxCode = `<${componentName}>${childrenStr}</${componentName}>`;
-  } else if (propsEntries.length === 1 && !hasChildren) {
-    jsxCode = `<${componentName} ${propsEntries[0]} />`;
-  } else if (propsEntries.length === 1 && hasChildren) {
-    jsxCode = `<${componentName} ${propsEntries[0]}>\n  ${childrenStr}\n</${componentName}>`;
-  } else if (!hasChildren) {
-    jsxCode = `<${componentName}\n  ${propsEntries.join('\n  ')}\n/>`;
-  } else {
-    jsxCode = `<${componentName}\n  ${propsEntries.join('\n  ')}\n>\n  ${childrenStr}\n</${componentName}>`;
-  }
-
-  return `${imports.join('\n')}
-
-${jsxCode}`;
-}
-
-function formatChildrenValue(value: unknown): string {
-  if (typeof value === 'string') {
-    return value;
-  }
-  if (typeof value === 'number' || typeof value === 'boolean') {
-    return `{${value}}`;
-  }
-  return '{/* children */}';
-}
-
-function formatPropValue(value: unknown, type: string): string {
-  if (type === 'string' || typeof value === 'string') {
-    return `"${value}"`;
-  }
-  if (type === 'boolean' || typeof value === 'boolean') {
-    return `{${value}}`;
-  }
-  if (type === 'number' || typeof value === 'number') {
-    return `{${value}}`;
-  }
-  return `{${JSON.stringify(value)}}`;
-}
-
-function getTypePlaceholder(name: string, def: PropDefinition): string {
-  if (def.values && def.values.length > 0) {
-    return `"${def.values[0]}"`;
-  }
-  switch (def.type) {
-    case 'string': return `"${name}"`;
-    case 'boolean': return '{true}';
-    case 'number': return '{0}';
-    case 'function': return '{() => {}}';
-    default: return '{undefined}';
-  }
-}

package/src/viewer/components/Layout.tsx

@@ -9,11 +9,11 @@ interface LayoutProps {
 
 export function Layout({ leftSidebar, header, children }: LayoutProps) {
   return (
-    <AppShell layout="inset">
+    <AppShell>
       <AppShell.Header>
         {header}
       </AppShell.Header>
-      <AppShell.Sidebar width="256px" collapsible="icon">
+      <AppShell.Sidebar width="260px" collapsible="icon">
         {leftSidebar}
       </AppShell.Sidebar>
       <AppShell.Main padding="none">