@fragments-sdk/cli 0.7.9 → 0.7.10

package/src/core/index.ts

@@ -1,6 +1,6 @@
 /**
- * Browser-safe exports for @fragments/core
- * For Node.js-only APIs (config, discovery, loader), use '@fragments/core/node'
+ * Browser-safe exports for @fragments-sdk/cli/core
+ * For Node.js-only APIs (config, discovery, loader), import from '@fragments-sdk/cli' directly.
  */
 
 // Brand and default constants

package/src/core/loader.ts

@@ -27,8 +27,8 @@ function createFragmentsCoreShimPlugin(): Plugin {
   return {
     name: BRAND.vitePluginNamespace,
     setup(build) {
-      // Intercept @fragments/core imports
-      build.onResolve({ filter: /^@fragments\/core$/ }, (args) => {
+      // Intercept @fragments-sdk/cli/core imports
+      build.onResolve({ filter: /^@fragments-sdk\/cli\/core$/ }, (args) => {
         return {
           path: args.path,
           namespace: BRAND.vitePluginNamespace,
@@ -71,7 +71,7 @@ export async function loadFragmentFile(
 
   try {
     // Use esbuild to bundle the fragment file
-    // We inject a shim for @fragments/core so it doesn't need to be installed
+    // We inject a shim for @fragments-sdk/cli/core so it doesn't need to be installed
     // Using CommonJS format to avoid ESM/CJS interop issues with node_modules
     await build({
       entryPoints: [absolutePath],

package/src/core/schema.ts

@@ -149,7 +149,7 @@ export const fragmentGeneratedSchema = z.object({
  * Schema for AI-specific metadata for playground context generation
  */
 export const aiMetadataSchema = z.object({
-  compositionPattern: z.enum(['compound', 'simple', 'controlled']).optional(),
+  compositionPattern: z.enum(['compound', 'simple', 'controlled', 'wrapper']).optional(),
   subComponents: z.array(z.string()).optional(),
   requiredChildren: z.array(z.string()).optional(),
   commonPatterns: z.array(z.string()).optional(),

package/src/index.ts

@@ -43,6 +43,12 @@ export type { AnalyzeOptions, AnalyzeResult } from "./analyze.js";
 // Static Viewer
 export { generateStaticViewer, generateViewerFromJson } from "./static-viewer.js";
 
+// Config type (used by generated fragments.config.ts)
+export type { FragmentsConfig } from "./core/types.js";
+
+// Fragment definition API (used by generated .fragment.tsx files)
+export { defineFragment, defineBlock } from "./core/defineFragment.js";
+
 // CLI Command metadata (for docs)
 export { CLI_COMMANDS, CLI_COMMAND_CATEGORIES } from "./cli-commands.js";
 export type { CliCommandDef, CliOptionDef, CliCommandCategory, CliCategoryInfo } from "./cli-commands.js";

package/src/migrate/converter.ts

@@ -550,7 +550,7 @@ ${generated.skippedVariants.map(sv => `      { name: "${escapeString(sv.name)}",
   }
 
   // Import the actual component - this makes the fragment immediately usable
-  return `import { defineFragment } from "@fragments/core";
+  return `import { defineFragment } from "@fragments-sdk/cli/core";
 import { ${componentName} } from "${componentImport}";
 
 export default defineFragment({

package/src/service/snippet-validation.test.ts

@@ -45,7 +45,7 @@ describe('validateSnippetPolicy', () => {
       projectDir,
       'Button',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Button } from '.';
 
 export default defineFragment({
@@ -86,7 +86,7 @@ export default defineFragment({
       projectDir,
       'Icon',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Icon } from '.';
 
 export default defineFragment({
@@ -124,7 +124,7 @@ import { House } from '@phosphor-icons/react';
       projectDir,
       'Header',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Header } from '.';
 
 export default defineFragment({
@@ -166,7 +166,7 @@ export default defineFragment({
       projectDir,
       'Alpha',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Alpha } from '.';
 
 export default defineFragment({
@@ -183,7 +183,7 @@ export default defineFragment({
       projectDir,
       'Beta',
       `import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Beta } from '.';
 
 export default defineFragment({

package/src/service/snippet-validation.ts

@@ -118,7 +118,6 @@ function normalizePolicy(
 function isFragmentsModule(modulePath: string): boolean {
   return (
     modulePath === '@fragments-sdk/ui'
-    || modulePath === '@fragments/ui'
     || modulePath === '.'
     || modulePath === '..'
     || modulePath.startsWith('@/components/')

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

@@ -12,7 +12,7 @@ import { discoverInstalledFragments } from "../../core/discovery.js";
  * After packages were merged into @fragments-sdk/cli, the viewer's
  * path resolution changed. These tests verify that:
  * - Viewer assets (HTML, TSX entry points) are found at the correct paths
- * - The @fragments/core alias resolves to the consolidated core source
+ * - The @fragments-sdk/cli/core alias resolves to the consolidated core source
  * - The virtual module generates valid import statements
  * - The Vite config references correct file system locations
  */
@@ -61,9 +61,9 @@ describe("viewer path resolution", () => {
   });
 });
 
-describe("@fragments/core alias resolution", () => {
+describe("@fragments-sdk/cli/core alias resolution", () => {
   it("core/index.ts exists at the expected path", () => {
-    // server.ts: "@fragments/core": resolve(cliPackageRoot, "src/core/index.ts")
+    // server.ts: "@fragments-sdk/cli/core": resolve(cliPackageRoot, "src/core/index.ts")
     const corePath = resolve(cliPackageRoot, "src/core/index.ts");
     expect(existsSync(corePath)).toBe(true);
   });
@@ -82,32 +82,25 @@ describe("@fragments/core alias resolution", () => {
   });
 });
 
-describe("virtual module @fragments/core import", () => {
-  it("vite-plugin generates import from @fragments/core (resolved via alias)", async () => {
-    // The virtual module template in vite-plugin.ts must import from @fragments/core
+describe("virtual module @fragments-sdk/cli/core import", () => {
+  it("vite-plugin generates import from @fragments-sdk/cli/core (resolved via alias)", async () => {
+    // The virtual module template in vite-plugin.ts must import from @fragments-sdk/cli/core
     // which is resolved by the Vite alias to the consolidated core source
     const pluginPath = resolve(viewerDir, "vite-plugin.ts");
     const content = await readFile(pluginPath, "utf-8");
 
-    // The generated virtual module string should reference @fragments/core
+    // The generated virtual module string should reference @fragments-sdk/cli/core
     expect(content).toContain(
-      'import { storyModuleToFragment, setPreviewConfig } from "@fragments/core"'
+      'import { storyModuleToFragment, setPreviewConfig } from "@fragments-sdk/cli/core"'
     );
   });
 
-  it("server.ts sets up @fragments/core alias to src/core/index.ts", async () => {
+  it("server.ts sets up @fragments-sdk/cli/core alias to src/core/index.ts", async () => {
     const serverPath = resolve(viewerDir, "server.ts");
     const content = await readFile(serverPath, "utf-8");
 
-    // The alias must resolve @fragments/core to the consolidated core
-    expect(content).toContain('"@fragments/core": resolve(cliPackageRoot, "src/core/index.ts")');
-  });
-
-  it("server.ts sets up @fragments/viewer alias", async () => {
-    const serverPath = resolve(viewerDir, "server.ts");
-    const content = await readFile(serverPath, "utf-8");
-
-    expect(content).toContain('"@fragments/viewer": viewerRoot');
+    // The alias must resolve @fragments-sdk/cli/core to the CLI's core source
+    expect(content).toContain('"@fragments-sdk/cli/core": resolve(cliPackageRoot, "src/core/index.ts")');
   });
 
   it("vite-plugin merges authored variant code from metadata fragments", async () => {
@@ -228,20 +221,20 @@ describe("no stale @fragments/* package references", () => {
     const serverPath = resolve(viewerDir, "server.ts");
     const content = await readFile(serverPath, "utf-8");
 
-    // Should NOT try to resolve @fragments/core from node_modules
+    // Should NOT try to resolve @fragments-sdk/cli/core from node_modules
     expect(content).not.toContain('resolveFragmentsPackage("core"');
   });
 
-  it("no source files import from @fragments/core as a runtime dependency", async () => {
+  it("no source files import from @fragments-sdk/cli/core as a runtime dependency", async () => {
     // All source-level imports should use relative paths (../core/).
-    // Only the generated virtual module string uses @fragments/core (resolved via alias).
+    // Only the generated virtual module string uses @fragments-sdk/cli/core (resolved via alias).
     const serverPath = resolve(viewerDir, "server.ts");
     const content = await readFile(serverPath, "utf-8");
 
-    // server.ts should import from relative paths, not @fragments/core
+    // server.ts should import from relative paths, not @fragments-sdk/cli/core
     const lines = content.split("\n");
     const importLines = lines.filter(
-      (l) => l.startsWith("import") && l.includes("@fragments/core")
+      (l) => l.startsWith("import") && l.includes("@fragments-sdk/cli/core")
     );
     expect(importLines).toHaveLength(0);
   });

package/src/viewer/components/AccessibilityPanel.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import type { Result, NodeResult, ImpactValue, RunOptions } from "axe-core";
-import { Badge, Tabs, Dialog, Card, Alert, Text, Stack, Box, Button, Chip, EmptyState } from "@fragments/ui";
+import { Badge, Tabs, Dialog, Card, Alert, Text, Stack, Box, Button, Chip, EmptyState } from "@fragments-sdk/ui";
 import { BRAND } from "../../core/index.js";
 import {
   updateComponentA11yResult,

package/src/viewer/components/ActionsPanel.tsx

@@ -8,7 +8,7 @@
 import { useState, useMemo } from "react";
 import type { ActionLog } from "../hooks/useActions.js";
 import { formatActionArg } from "../hooks/useActions.js";
-import { Button, Stack, Text, Badge, Input, Menu, Separator } from "@fragments/ui";
+import { Button, Stack, Text, Badge, Input, Menu, Separator } from "@fragments-sdk/ui";
 import {
   TrashIcon,
   ChevronDownIcon,

package/src/viewer/components/App.tsx

@@ -15,8 +15,8 @@ import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp.js";
 import { useToast } from "./Toast.js";
 
 // Toolbar
-import { PreviewToolbar, getBackgroundStyle } from "./PreviewToolbar.js";
-import { ViewportSelector } from "./ViewportSelector.js";
+import { PreviewMenu } from "./PreviewMenu.js";
+import { getBackgroundStyle } from "../constants/ui.js";
 
 // Preview & Rendering
 import { PreviewArea } from "./PreviewArea.js";
@@ -28,10 +28,10 @@ import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
 // Fragments UI
-import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input, ThemeToggle } from "@fragments/ui";
+import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input, ThemeToggle } from "@fragments-sdk/ui";
 
 // Icons
-import { EmptyIcon, ExternalLinkIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.js";
+import { EmptyIcon, FigmaIcon, CompareIcon } from "./Icons.js";
 
 // Logo
 import { fragmentsLogo } from "../assets/fragments-logo.js";
@@ -54,9 +54,6 @@ import { useUrlState, findFragmentByName, findVariantIndex } from "../hooks/useU
 import { usePanelDock } from "./ResizablePanel.js";
 import { useTheme } from "./ThemeProvider.js";
 
-// Utilities
-import { ScreenshotButton } from "./ScreenshotButton.js";
-
 interface AppProps {
   fragments: Array<{ path: string; fragment: FragmentDefinition }>;
 }
@@ -237,6 +234,8 @@ export function App({ fragments }: AppProps) {
       goToVariant: (index) => index < variantCount && handleSelectVariant(index),
       toggleTheme: viewSettings.toggleTheme,
       togglePanel: uiActions.togglePanel,
+      toggleMatrix: () => uiActions.setMatrixView(!uiState.showMatrixView),
+      toggleResponsive: () => uiActions.setMultiViewport(!uiState.showMultiViewport),
       copyLink: handleCopyLink,
       showHelp: uiActions.toggleShortcutsHelp,
       openSearch: focusSearchInput,
@@ -307,11 +306,19 @@ export function App({ fragments }: AppProps) {
               uiState={uiState}
               uiActions={uiActions}
               figmaUrl={figmaUrl}
-              linkCopied={uiState.linkCopied}
-              onCopyLink={handleCopyLink}
               searchQuery={searchQuery}
               onSearchChange={setSearchQuery}
               searchInputRef={searchInputRef}
+              onPrevComponent={() => {
+                const prevIndex = currentFragmentIndex > 0 ? currentFragmentIndex - 1 : sortedFragmentPaths.length - 1;
+                handleSelectFragment(sortedFragmentPaths[prevIndex]);
+              }}
+              onNextComponent={() => {
+                const nextIndex = currentFragmentIndex < sortedFragmentPaths.length - 1 ? currentFragmentIndex + 1 : 0;
+                handleSelectFragment(sortedFragmentPaths[nextIndex]);
+              }}
+              onPrevVariant={() => handleSelectVariant(activeVariantIndex > 0 ? activeVariantIndex - 1 : variantCount - 1)}
+              onNextVariant={() => handleSelectVariant(activeVariantIndex < variantCount - 1 ? activeVariantIndex + 1 : 0)}
             />
           ) : (
             <ViewerHeader
@@ -362,9 +369,6 @@ export function App({ fragments }: AppProps) {
                   activeIndex={activeVariantIndex}
                   onSelect={handleSelectVariant}
                   showMatrixView={uiState.showMatrixView}
-                  showMultiViewport={uiState.showMultiViewport}
-                  onToggleMatrix={() => uiActions.setMatrixView(!uiState.showMatrixView)}
-                  onToggleMultiViewport={() => uiActions.setMultiViewport(!uiState.showMultiViewport)}
                 />
               )}
 
@@ -455,11 +459,13 @@ interface TopToolbarProps {
   uiState: ReturnType<typeof useAppState>['state'];
   uiActions: ReturnType<typeof useAppState>['actions'];
   figmaUrl?: string;
-  linkCopied: boolean;
-  onCopyLink: () => void;
   searchQuery: string;
   onSearchChange: (value: string) => void;
   searchInputRef: RefObject<HTMLInputElement>;
+  onPrevComponent: () => void;
+  onNextComponent: () => void;
+  onPrevVariant: () => void;
+  onNextVariant: () => void;
 }
 
 interface ViewerHeaderProps {
@@ -543,16 +549,36 @@ function TopToolbar({
   uiState,
   uiActions,
   figmaUrl,
-  linkCopied,
-  onCopyLink,
   searchQuery,
   onSearchChange,
   searchInputRef,
+  onPrevComponent,
+  onNextComponent,
+  onPrevVariant,
+  onNextVariant,
 }: TopToolbarProps) {
   const { setTheme, resolvedTheme } = useTheme();
   return (
     <Header aria-label="Component preview toolbar">
       <Header.Trigger />
+      <PreviewMenu
+        zoom={viewSettings.zoom}
+        background={viewSettings.background}
+        viewport={viewSettings.viewport}
+        showMatrixView={uiState.showMatrixView}
+        showMultiViewport={uiState.showMultiViewport}
+        panelOpen={uiState.panelOpen}
+        onZoomChange={viewSettings.setZoom}
+        onBackgroundChange={viewSettings.setBackground}
+        onViewportChange={viewSettings.setViewport}
+        onToggleMatrix={() => uiActions.setMatrixView(!uiState.showMatrixView)}
+        onToggleMultiViewport={() => uiActions.setMultiViewport(!uiState.showMultiViewport)}
+        onTogglePanel={uiActions.togglePanel}
+        onPrevComponent={onPrevComponent}
+        onNextComponent={onNextComponent}
+        onPrevVariant={onPrevVariant}
+        onNextVariant={onNextVariant}
+      />
       <Header.Brand>
         <Stack direction="row" align="center" gap="sm">
           <img src={fragmentsLogo} alt="" width={20} height={20} style={{ display: 'block' }} />
@@ -563,21 +589,6 @@ function TopToolbar({
       <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
       <Header.Spacer />
       <Header.Actions>
-        <PreviewToolbar
-          zoom={viewSettings.zoom}
-          background={viewSettings.background}
-          onZoomChange={viewSettings.setZoom}
-          onBackgroundChange={viewSettings.setBackground}
-        />
-        <Separator orientation="vertical" style={{ height: '16px' }} />
-        <ViewportSelector
-          viewport={viewSettings.viewport}
-          customSize={viewSettings.customSize}
-          onViewportChange={viewSettings.setViewport}
-          onCustomSizeChange={viewSettings.setCustomSize}
-        />
-        <Separator orientation="vertical" style={{ height: '16px' }} />
-
         {figmaUrl && (
           <>
             <Tooltip content={uiState.showComparison ? "Hide Figma comparison" : "Compare with Figma design"}>
@@ -602,41 +613,6 @@ function TopToolbar({
             <Separator orientation="vertical" style={{ height: '16px' }} />
           </>
         )}
-
-        {variant && (
-          <>
-            <Tooltip content="Open in new window">
-              <Button
-                onClick={() => {
-                  const url = new URL(window.location.href);
-                  url.hash = '';
-                  url.searchParams.set('isolated', 'true');
-                  url.searchParams.set('component', fragment.fragment.meta.name);
-                  url.searchParams.set('variant', variant.name);
-                  if (viewSettings.zoom !== 100) url.searchParams.set('zoom', String(viewSettings.zoom));
-                  if (viewSettings.background !== 'transparent') url.searchParams.set('bg', viewSettings.background);
-                  window.open(url.toString(), '_blank', 'noopener,noreferrer');
-                }}
-                variant="ghost"
-                size="sm"
-              >
-                <ExternalLinkIcon style={{ width: '16px', height: '16px' }} />
-              </Button>
-            </Tooltip>
-            <ScreenshotButton componentName={fragment.fragment.meta.name} variantName={variant.name} />
-            <Tooltip content="Copy link to share">
-              <Button
-                onClick={onCopyLink}
-                variant="ghost"
-                size="sm"
-                style={linkCopied ? { color: '#16a34a', backgroundColor: 'rgba(22, 163, 74, 0.1)' } : {}}
-              >
-                {linkCopied ? <CheckIcon style={{ width: '16px', height: '16px' }} /> : <LinkIcon style={{ width: '16px', height: '16px' }} />}
-              </Button>
-            </Tooltip>
-          </>
-        )}
-        <Separator orientation="vertical" style={{ height: '16px' }} />
         <ThemeToggle
           size="sm"
           value={resolvedTheme}
@@ -672,14 +648,11 @@ interface VariantTabsBarProps {
   activeIndex: number;
   onSelect: (index: number) => void;
   showMatrixView: boolean;
-  showMultiViewport: boolean;
-  onToggleMatrix: () => void;
-  onToggleMultiViewport: () => void;
 }
 
-function VariantTabsBar({ variants, activeIndex, onSelect, showMatrixView, showMultiViewport, onToggleMatrix, onToggleMultiViewport }: VariantTabsBarProps) {
+function VariantTabsBar({ variants, activeIndex, onSelect, showMatrixView }: VariantTabsBarProps) {
   return (
-    <Stack direction="row" align="center" justify="between" style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', backgroundColor: 'var(--bg-primary)', flexShrink: 0 }}>
+    <div style={{ padding: '8px 16px', borderBottom: '1px solid var(--border)', backgroundColor: 'var(--bg-primary)', flexShrink: 0 }}>
       {!showMatrixView ? (
         <ScrollArea orientation="horizontal" showFades style={{ flex: 1, minWidth: 0 }}>
           <VariantTabs variants={variants} activeIndex={activeIndex} onSelect={onSelect} />
@@ -687,31 +660,7 @@ function VariantTabsBar({ variants, activeIndex, onSelect, showMatrixView, showM
       ) : (
         <Text size="sm" color="secondary">Showing all {variants.length} variants</Text>
       )}
-      <Stack direction="row" align="center" gap="sm" style={{ marginLeft: '16px', flexShrink: 0 }}>
-        {variants.length > 1 && (
-          <Button
-            onClick={onToggleMatrix}
-            variant="ghost"
-            size="sm"
-            title={showMatrixView ? "Show single variant" : "Show all variants in grid"}
-            style={showMatrixView ? { backgroundColor: 'rgba(59, 130, 246, 0.1)', color: 'var(--color-accent)' } : {}}
-          >
-            <GridIcon style={{ width: '16px', height: '16px' }} />
-            {showMatrixView ? "Exit Matrix" : "Matrix"}
-          </Button>
-        )}
-        <Button
-          onClick={onToggleMultiViewport}
-          variant="ghost"
-          size="sm"
-          title={showMultiViewport ? "Exit multi-viewport" : "Show at multiple screen sizes"}
-          style={showMultiViewport ? { backgroundColor: 'rgba(34, 197, 94, 0.1)', color: '#16a34a' } : {}}
-        >
-          <DevicesIcon style={{ width: '16px', height: '16px' }} />
-          {showMultiViewport ? "Exit Responsive" : "Responsive"}
-        </Button>
-      </Stack>
-    </Stack>
+    </div>
   );
 }
 
@@ -721,6 +670,12 @@ interface NoVariantsMessageProps {
 }
 
 function NoVariantsMessage({ fragment }: NoVariantsMessageProps) {
+  // Check for load error (missing dependencies, schema errors, etc.)
+  const loadError = (fragment as any)?._loadError;
+  if (loadError) {
+    return <LoadErrorMessage error={loadError} componentName={fragment?.meta?.name} />;
+  }
+
   const skippedVariants = (fragment?._generated as any)?.skippedVariants;
 
   if (!skippedVariants || skippedVariants.length === 0) {
@@ -761,6 +716,92 @@ function NoVariantsMessage({ fragment }: NoVariantsMessageProps) {
   );
 }
 
+// Load error message — shown when a fragment failed to import (missing deps, schema errors, etc.)
+function LoadErrorMessage({ error, componentName }: { error: { message: string; dependencies: string[] }; componentName?: string }) {
+  const deps = error.dependencies || [];
+  const errorMessage = error.message || 'Unknown error';
+
+  // Determine if the error is a missing module/dependency issue
+  const isModuleError = /Failed to resolve import|Cannot find module|Module not found|does not provide an export/.test(errorMessage);
+
+  // Only suggest packages if the error is actually about missing modules
+  let suggestedPackages: string[] = [];
+  if (isModuleError) {
+    if (deps.length > 0) {
+      suggestedPackages = [...deps];
+    } else {
+      const match = errorMessage.match(/Failed to resolve import ["']([^"']+)["']/);
+      if (match) {
+        suggestedPackages = [match[1]];
+      }
+    }
+  }
+
+  const hasMissingDeps = suggestedPackages.length > 0;
+  const installCmd = `pnpm add ${suggestedPackages.join(' ')}`;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px' }}>
+      <Alert variant="warning">
+        <Alert.Body>
+          <Alert.Title>
+            {hasMissingDeps ? 'Missing Dependencies' : 'Failed to Load'}
+          </Alert.Title>
+          <Alert.Content>
+            <Stack direction="column" gap="sm">
+              {hasMissingDeps ? (
+                <>
+                  <Text size="xs" color="secondary">
+                    {componentName ? `${componentName} requires` : 'This component requires'} packages that are not installed in your project.
+                  </Text>
+                  <Text size="xs" weight="semibold" color="secondary">Install with:</Text>
+                  <code style={{
+                    display: 'block',
+                    padding: '8px 12px',
+                    borderRadius: '6px',
+                    backgroundColor: 'var(--bg-tertiary, #f3f4f6)',
+                    fontFamily: 'monospace',
+                    fontSize: '12px',
+                    color: 'var(--text-primary, #111827)',
+                    userSelect: 'all',
+                  }}>
+                    {installCmd}
+                  </code>
+                  <Text size="xs" color="tertiary">
+                    After installing, restart the dev server.
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <Text size="xs" color="secondary">
+                    {componentName ? `${componentName} couldn't` : 'This component couldn\'t'} be loaded. This may be due to a schema validation error or missing imports.
+                  </Text>
+                  <Text size="xs" weight="semibold" color="secondary">Error:</Text>
+                  <pre style={{
+                    padding: '8px 12px',
+                    borderRadius: '6px',
+                    backgroundColor: 'var(--bg-tertiary, #f3f4f6)',
+                    fontFamily: 'monospace',
+                    fontSize: '11px',
+                    color: 'var(--text-secondary, #374151)',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    margin: 0,
+                    maxHeight: '200px',
+                    overflow: 'auto',
+                  }}>
+                    {errorMessage}
+                  </pre>
+                </>
+              )}
+            </Stack>
+          </Alert.Content>
+        </Alert.Body>
+      </Alert>
+    </div>
+  );
+}
+
 // Empty variant message
 interface EmptyVariantMessageProps {
   reason: string;

package/src/viewer/components/BottomPanel.tsx

@@ -5,7 +5,7 @@
 
 import { memo, useCallback } from 'react';
 import type { FragmentDefinition, FragmentVariant } from '../../core/index.js';
-import { Tabs, Badge } from '@fragments/ui';
+import { Tabs, Badge } from '@fragments-sdk/ui';
 import { ResizablePanel } from './ResizablePanel.js';
 import { CodePanel } from './CodePanel.js';
 import { TokenStylePanel } from './TokenStylePanel.js';

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

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import type { FragmentVariant } from '../../core/index.js';
 
-vi.mock('@fragments/ui', () => ({
+vi.mock('@fragments-sdk/ui', () => ({
   CodeBlock: () => null,
 }));
 

package/src/viewer/components/CodePanel.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { CodeBlock } from '@fragments/ui';
+import { CodeBlock } from '@fragments-sdk/ui';
 import type { FragmentVariant, PropDefinition } from '../../core/index.js';
 
 interface CodePanelProps {

package/src/viewer/components/CommandPalette.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
-import { Dialog, Stack, Text, Badge, Separator, Input } from '@fragments/ui';
+import { Dialog, Stack, Text, Badge, Separator, Input } from '@fragments-sdk/ui';
 import type { FragmentDefinition } from "../../core/index.js";
 import { SearchIcon, ChevronRightIcon } from "./Icons.js";
 

package/src/viewer/components/ComponentGraph.tsx

@@ -12,7 +12,7 @@ import { useMemo, useState } from "react";
 import type { FragmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
 import { ChevronRightIcon, EmptyIcon, WandIcon } from "./Icons.js";
 import { detectAllRelationships, mergeRelationships } from "../utils/detectRelationships.js";
-import { Stack, Text, Badge, Button, EmptyState, CodeBlock, Grid, Separator } from "@fragments/ui";
+import { Stack, Text, Badge, Button, EmptyState, CodeBlock, Grid, Separator } from "@fragments-sdk/ui";
 
 interface ComponentGraphProps {
   /** Current fragment definition */

package/src/viewer/components/ComponentHeader.tsx

@@ -1,5 +1,5 @@
 import type { FragmentMeta } from '../../core/index.js';
-import { Badge, Alert, Text, Stack, Separator } from '@fragments/ui';
+import { Badge, Alert, Text, Stack, Separator } from '@fragments-sdk/ui';
 import { WarningIcon, BeakerIcon } from './Icons.js';
 
 interface ComponentHeaderProps {

package/src/viewer/components/ContractPanel.tsx

@@ -5,7 +5,7 @@
 
 import { memo } from 'react';
 import type { FragmentContract } from '../../core/index.js';
-import { Stack, Text, Card, Chip, Alert, EmptyState, CodeBlock, Badge } from '@fragments/ui';
+import { Stack, Text, Card, Chip, Alert, EmptyState, CodeBlock, Badge } from '@fragments-sdk/ui';
 
 interface ContractPanelProps {
   contract?: FragmentContract;

package/src/viewer/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import { Component, type ReactNode, type ErrorInfo } from 'react';
-import { Button, Alert, CodeBlock, Collapsible, Stack, Text } from '@fragments/ui';
+import { Button, Alert, CodeBlock, Collapsible, Stack, Text } from '@fragments-sdk/ui';
 import { ErrorIcon, RefreshIcon } from './Icons.js';
 
 interface ErrorBoundaryProps {