@fragments-sdk/cli 0.7.3 → 0.7.5

package/src/viewer/__tests__/viewer-integration.test.ts

@@ -109,6 +109,14 @@ describe("virtual module @fragments/core import", () => {
 
     expect(content).toContain('"@fragments/viewer": viewerRoot');
   });
+
+  it("vite-plugin merges authored variant code from metadata fragments", async () => {
+    const pluginPath = resolve(viewerDir, "vite-plugin.ts");
+    const content = await readFile(pluginPath, "utf-8");
+
+    expect(content).toContain("if (metaVariant.code && !fragmentVariant.code)");
+    expect(content).toContain("fragmentVariant.code = metaVariant.code;");
+  });
 });
 
 describe("viewer HTML templates", () => {

package/src/viewer/components/App.tsx

@@ -28,11 +28,19 @@ import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
 // Fragments UI
-import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input } from "@fragments/ui";
+import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input, ThemeToggle } from "@fragments/ui";
 
 // Icons
 import { EmptyIcon, ExternalLinkIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.js";
 
+function GitHubIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+    </svg>
+  );
+}
+
 // Hooks
 import { useAppState } from "../hooks/useAppState.js";
 import { useViewSettings } from "../hooks/useViewSettings.js";
@@ -475,13 +483,14 @@ function HeaderSearch({ value, onChange, inputRef }: HeaderSearchProps) {
         aria-label="Search components"
         size="sm"
         shortcut="⌘K"
-        style={{ width: '220px' }}
+        style={{ width: '240px' }}
       />
     </Header.Search>
   );
 }
 
 function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef }: ViewerHeaderProps) {
+  const { setTheme, resolvedTheme } = useTheme();
   return (
     <Header aria-label="Fragments viewer header">
       <Header.Trigger />
@@ -493,6 +502,32 @@ function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef
       </Header.Brand>
       <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
       <Header.Spacer />
+      <Header.Actions>
+        <ThemeToggle
+          size="sm"
+          value={resolvedTheme}
+          onValueChange={(value) => setTheme(value)}
+          aria-label={`Theme: ${resolvedTheme}`}
+        />
+        <a
+          href="https://github.com/ConanMcN/fragments"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '32px',
+            height: '32px',
+            borderRadius: 'var(--radius-md, 6px)',
+            color: 'var(--text-secondary)',
+            transition: 'background-color 150ms ease, color 150ms ease',
+          }}
+          aria-label="View on GitHub"
+        >
+          <GitHubIcon />
+        </a>
+      </Header.Actions>
     </Header>
   );
 }
@@ -510,6 +545,7 @@ function TopToolbar({
   onSearchChange,
   searchInputRef,
 }: TopToolbarProps) {
+  const { setTheme, resolvedTheme } = useTheme();
   return (
     <Header aria-label="Component preview toolbar">
       <Header.Trigger />
@@ -595,6 +631,31 @@ function TopToolbar({
             </Tooltip>
           </>
         )}
+        <Separator orientation="vertical" style={{ height: '16px' }} />
+        <ThemeToggle
+          size="sm"
+          value={resolvedTheme}
+          onValueChange={(value) => setTheme(value)}
+          aria-label={`Theme: ${resolvedTheme}`}
+        />
+        <a
+          href="https://github.com/ConanMcN/fragments"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '32px',
+            height: '32px',
+            borderRadius: 'var(--radius-md, 6px)',
+            color: 'var(--text-secondary)',
+            transition: 'background-color 150ms ease, color 150ms ease',
+          }}
+          aria-label="View on GitHub"
+        >
+          <GitHubIcon />
+        </a>
       </Header.Actions>
     </Header>
   );

package/src/viewer/components/CodePanel.naming.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { FragmentVariant } from '../../core/index.js';
+
+vi.mock('@fragments/ui', () => ({
+  CodeBlock: () => null,
+}));
+
+const {
+  __buildFallbackSnippetForTest,
+  __resolveDisplayedCodeForTest,
+} = await import('./CodePanel.js');
+
+function makeVariant(partial: Partial<FragmentVariant>): FragmentVariant {
+  return {
+    name: 'Default',
+    description: 'Default variant',
+    render: () => null,
+    ...partial,
+  };
+}
+
+describe('CodePanel authored code pipeline', () => {
+  it('prefers authored variant.code as-is', () => {
+    const variant = makeVariant({
+      code: `import { Button } from '@fragments-sdk/ui';\n\n<Button>Save</Button>`,
+    });
+
+    const resolved = __resolveDisplayedCodeForTest('Button', variant);
+
+    expect(resolved).toBe(`import { Button } from '@fragments-sdk/ui';\n\n<Button>Save</Button>`);
+  });
+
+  it('falls back to generated placeholder when variant.code is missing', () => {
+    const variant = makeVariant({
+      name: 'Primary',
+      args: {
+        variant: 'primary',
+        disabled: false,
+        children: 'Save Changes',
+      },
+    });
+
+    const code = __buildFallbackSnippetForTest('Button', variant);
+
+    expect(code).toContain("import { Button } from '@/components/Button';");
+    expect(code).toContain('TODO: Add explicit `code` for variant "Primary"');
+    expect(code).toContain("<Button variant='primary' disabled={false}>Save Changes</Button>");
+  });
+
+  it('does not synthesize runtime JSX output', () => {
+    const variant = makeVariant({
+      code: '<Button icon={/* @__PURE__ */ jsxDEV(GearIcon, {}, void 0)} />',
+    });
+
+    const resolved = __resolveDisplayedCodeForTest('Button', variant);
+
+    // CodePanel now treats authored code as source-of-truth only.
+    expect(resolved).toContain('jsxDEV');
+  });
+});