@fragments-sdk/cli 0.7.8 → 0.7.10

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 {

package/src/viewer/components/HealthDashboard.tsx

@@ -7,7 +7,7 @@
 import { useMemo, useState, useCallback, useEffect } from 'react';
 import type { FragmentDefinition } from '../../core/index.js';
 import type { ImpactValue } from 'axe-core';
-import { Badge, Progress, Stack, Text, Card, EmptyState, Table } from '@fragments/ui';
+import { Badge, Progress, Stack, Text, Card, EmptyState, Table } from '@fragments-sdk/ui';
 import {
   getAllA11yData,
   getA11ySummary,

package/src/viewer/components/HmrStatusIndicator.tsx

@@ -1,4 +1,4 @@
-import { Badge, Stack, Text } from '@fragments/ui';
+import { Badge, Stack, Text } from '@fragments-sdk/ui';
 import { HMR_STATUS } from '../constants/ui.js';
 import { useHmrStatus } from '../hooks/useHmrStatus.js';
 import { WifiIcon, WifiOffIcon } from './Icons.js';

package/src/viewer/components/InteractionsPanel.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useState, useCallback, useRef, useEffect } from "react";
-import { Button, Stack, Text, Badge, EmptyState, CodeBlock, Alert } from "@fragments/ui";
+import { Button, Stack, Text, Badge, EmptyState, CodeBlock, Alert } from "@fragments-sdk/ui";
 import type { PlayFunction, PlayFunctionContext, FragmentVariant } from "../../core/index.js";
 import {
   PlayIcon,

package/src/viewer/components/IsolatedRender.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useEffect, useState } from "react";
 import type { FragmentDefinition } from "../../core/index.js";
 import { VariantRenderer } from "./VariantRenderer.js";
-import { getBackgroundStyle, type BackgroundOption, type ZoomLevel } from "./PreviewToolbar.js";
+import { getBackgroundStyle, type BackgroundOption, type ZoomLevel } from "../constants/ui.js";
 
 interface IsolatedRenderProps {
   fragments: Array<{ path: string; fragment: FragmentDefinition }>;

package/src/viewer/components/KeyboardShortcutsHelp.tsx

@@ -5,7 +5,7 @@
  * Uses Fragments UI Dialog compound component.
  */
 
-import { Dialog, Stack, Text, Badge } from '@fragments/ui';
+import { Dialog, Stack, Text, Badge } from '@fragments-sdk/ui';
 import { SHORTCUTS } from "../hooks/useKeyboardShortcuts.js";
 
 interface KeyboardShortcutsHelpProps {

package/src/viewer/components/LandingPage.tsx

@@ -3,7 +3,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useState, useRef, useEffect } from 'react';
 import { HexColorPicker } from 'react-colorful';
-import { Button, Input, Toggle, Stack, Text, Card, Field, Separator, Select } from '@fragments/ui';
+import { Button, Input, Toggle, Stack, Text, Card, Field, Separator, Select } from '@fragments-sdk/ui';
 import { generateColorScheme, type ColorSchemeType } from '../utils/colorSchemes.js';
 import { ChevronDownIcon } from './Icons.js';
 

package/src/viewer/components/Layout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { AppShell } from '@fragments/ui';
+import { AppShell } from '@fragments-sdk/ui';
 
 interface LayoutProps {
   leftSidebar: ReactNode;

package/src/viewer/components/LeftSidebar.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import type { FragmentDefinition } from '../../core/index.js';
-import { Sidebar, useSidebar, Text } from '@fragments/ui';
+import { Sidebar, useSidebar, Text, Menu } from '@fragments-sdk/ui';
 
 // Fuzzy matching utility
 interface FuzzyMatch {
@@ -125,11 +125,40 @@ interface LeftSidebarProps {
   onHealthClick?: () => void;
 }
 
+const FilterIcon = ({ active }: { active?: boolean }) => (
+  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2 3h12l-4.5 5.5V13l-3-1.5V8.5L2 3z"
+      stroke={active ? 'var(--color-brand, #3b82f6)' : 'currentColor'}
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+      fill={active ? 'var(--color-brand, #3b82f6)' : 'none'}
+      fillOpacity={active ? 0.15 : 0}
+    />
+  </svg>
+);
+
+const isInstalled = (path: string) => path.startsWith('@');
+
 export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
   const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [showCustom, setShowCustom] = useState(true);
+  const [showLibrary, setShowLibrary] = useState(true);
   const { isMobile, setOpen } = useSidebar();
   const navRef = useRef<HTMLDivElement>(null);
 
+  // Determine if both sources exist (only show filter when useful)
+  const hasBothSources = useMemo(() => {
+    let hasCustom = false;
+    let hasLibrary = false;
+    for (const item of fragments) {
+      if (isInstalled(item.path)) hasLibrary = true;
+      else hasCustom = true;
+      if (hasCustom && hasLibrary) return true;
+    }
+    return false;
+  }, [fragments]);
+
   const debouncedSearch = useDebounce(searchQuery, 150);
 
   const searchResults = useMemo(() => {
@@ -155,19 +184,30 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
     return map;
   }, [searchResults]);
 
+  const isFilterActive = showCustom !== showLibrary;
+
+  // Apply source filter
+  const sourceFiltered = useMemo(() => {
+    if (!isFilterActive) return fragments;
+    return fragments.filter(item =>
+      showLibrary ? isInstalled(item.path) : !isInstalled(item.path)
+    );
+  }, [fragments, isFilterActive, showLibrary]);
+
   // Flat alphabetical list (search results sorted by relevance, otherwise alphabetical)
   const flatItems = useMemo(() => {
     if (searchResults) {
       return searchResults
         .map(r => r.item)
-        .filter(item => item.fragment?.meta?.name);
+        .filter(item => item.fragment?.meta?.name)
+        .filter(item => !isFilterActive || (showLibrary ? isInstalled(item.path) : !isInstalled(item.path)));
     }
-    return [...fragments]
+    return [...sourceFiltered]
       .filter(item => item.fragment?.meta?.name)
       .sort((a, b) =>
         a.fragment.meta.name.toLowerCase().localeCompare(b.fragment.meta.name.toLowerCase())
       );
-  }, [fragments, searchResults]);
+  }, [sourceFiltered, searchResults, isFilterActive, showLibrary]);
 
   const keyboardItems = useMemo(() => {
     const componentItems = flatItems.map((item) => ({ type: 'component' as const, path: item.path }));
@@ -252,19 +292,64 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
             </Sidebar.Section>
           )}
 
-          <Sidebar.Section label="Components">
-            {flatItems.map((item) => (
-              <Sidebar.Item
-                key={item.path}
-                active={activeFragment === item.path}
-                onClick={() => handleSelect(item.path)}
-              >
-                <HighlightedText
-                  text={item.fragment.meta.name}
-                  indices={highlightMap.get(item.path) || []}
-                />
-              </Sidebar.Item>
-            ))}
+          <Sidebar.Section
+            label="Components"
+            action={hasBothSources ? (
+              <Menu modal={false}>
+                <Menu.Trigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Filter components by source"
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      cursor: 'pointer',
+                      padding: '2px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      color: 'var(--text-tertiary)',
+                      borderRadius: '4px',
+                    }}
+                  >
+                    <FilterIcon active={isFilterActive} />
+                  </button>
+                </Menu.Trigger>
+                <Menu.Content>
+                  <Menu.CheckboxItem checked={showCustom} onCheckedChange={setShowCustom}>
+                    Custom
+                  </Menu.CheckboxItem>
+                  <Menu.CheckboxItem checked={showLibrary} onCheckedChange={setShowLibrary}>
+                    Fragments UI
+                  </Menu.CheckboxItem>
+                </Menu.Content>
+              </Menu>
+            ) : undefined}
+          >
+            {flatItems.map((item) => {
+              const hasError = !!(item.fragment as any)?._loadError;
+              return (
+                <Sidebar.Item
+                  key={item.path}
+                  active={activeFragment === item.path}
+                  onClick={() => handleSelect(item.path)}
+                >
+                  <span style={{ display: 'flex', alignItems: 'center', gap: '6px', width: '100%' }}>
+                    <HighlightedText
+                      text={item.fragment.meta.name}
+                      indices={highlightMap.get(item.path) || []}
+                    />
+                    {hasError && (
+                      <span
+                        title="Missing dependencies"
+                        style={{ color: 'var(--color-warning, #f59e0b)', fontSize: '14px', lineHeight: 1, flexShrink: 0 }}
+                      >
+                        &#9888;
+                      </span>
+                    )}
+                  </span>
+                </Sidebar.Item>
+              );
+            })}
           </Sidebar.Section>
 
           {flatItems.length === 0 && (
@@ -278,7 +363,9 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
       {/* Footer */}
       <Sidebar.Footer>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
-          <Text size="xs" color="tertiary">{fragments.length} components</Text>
+          <Text size="xs" color="tertiary">
+            {isFilterActive ? `${flatItems.length} / ${fragments.length}` : fragments.length} components
+          </Text>
           <Sidebar.CollapseToggle />
         </div>
       </Sidebar.Footer>

package/src/viewer/components/MultiViewportPreview.tsx

@@ -10,7 +10,7 @@ import { useState, type ReactNode } from "react";
 import { ErrorBoundary } from "./ErrorBoundary.js";
 import { IsolatedPreviewFrame } from "./IsolatedPreviewFrame.js";
 import { ChevronDownIcon } from "./Icons.js";
-import { getBackgroundStyle, type BackgroundOption } from "./PreviewToolbar.js";
+import { getBackgroundStyle, type BackgroundOption } from "../constants/ui.js";
 
 interface ViewportConfig {
   name: string;

package/src/viewer/components/PreviewArea.tsx

@@ -13,9 +13,8 @@ import { FigmaEmbed } from './FigmaEmbed.js';
 import { VariantMatrix } from './VariantMatrix.js';
 import { MultiViewportPreview } from './MultiViewportPreview.js';
 import { IsolatedPreviewFrame } from './IsolatedPreviewFrame.js';
-import { getBackgroundStyle, type ZoomLevel, type BackgroundOption } from './PreviewToolbar.js';
+import { getBackgroundStyle, getViewportWidth, type ZoomLevel, type BackgroundOption, type ViewportPreset, type ViewportSize } from '../constants/ui.js';
 import type { PreviewTheme } from '../hooks/useViewSettings.js';
-import { getViewportWidth, type ViewportPreset, type ViewportSize } from './ViewportSelector.js';
 
 interface PreviewAreaProps {
   // Component data

package/src/viewer/components/PreviewFrameHost.tsx

@@ -89,10 +89,6 @@ function resolvePreviewMode(fragment: FragmentDefinition): PreviewMode {
   const name = fragment.meta.name.toLowerCase();
   const category = (fragment.meta.category || '').toLowerCase();
 
-  if (category === 'layout' || category === 'navigation') {
-    return 'full-bleed';
-  }
-
   if (name.includes('appshell') || name.includes('sidebar') || name.includes('header') || name.includes('layout')) {
     return 'full-bleed';
   }

package/src/viewer/components/PreviewMenu.tsx

@@ -0,0 +1,247 @@
+/**
+ * PreviewMenu — Storybook-style hamburger menu for the viewer.
+ * Provides navigation, view mode toggles, panel controls, and settings submenus.
+ * Placed left of the header beside the logo.
+ */
+
+import { useEffect, useCallback } from 'react';
+import { Button, Menu, Text, Stack } from '@fragments-sdk/ui';
+import { List, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, GridFour, DeviceMobile, Rows, Eye } from '@phosphor-icons/react';
+import {
+  ZOOM_LEVELS,
+  VIEWPORT_PRESETS,
+  type ZoomLevel,
+  type BackgroundOption,
+  type ViewportPreset,
+} from '../constants/ui.js';
+
+// Background options with display labels
+const BACKGROUND_OPTIONS_UI: { value: BackgroundOption; label: string }[] = [
+  { value: 'checkerboard', label: 'Checkerboard' },
+  { value: 'black', label: 'Dark' },
+  { value: 'white', label: 'Light' },
+  { value: 'transparent', label: 'Transparent' },
+];
+
+// Viewport presets for submenu display
+const VIEWPORT_OPTIONS = Object.entries(VIEWPORT_PRESETS).map(([value, config]) => ({
+  value: value as Exclude<ViewportPreset, 'custom'>,
+  label: config.label,
+}));
+
+/** Shortcut label helper — renders a right-aligned keyboard hint */
+function Shortcut({ keys }: { keys: string }) {
+  return (
+    <Text as="span" size="2xs" color="tertiary" style={{ marginLeft: 'auto', paddingLeft: '16px', fontFamily: 'inherit' }}>
+      {keys}
+    </Text>
+  );
+}
+
+interface PreviewMenuProps {
+  zoom: ZoomLevel;
+  background: BackgroundOption;
+  viewport: ViewportPreset;
+  showMatrixView: boolean;
+  showMultiViewport: boolean;
+  panelOpen: boolean;
+  onZoomChange: (zoom: ZoomLevel) => void;
+  onBackgroundChange: (bg: BackgroundOption) => void;
+  onViewportChange: (viewport: ViewportPreset) => void;
+  onToggleMatrix: () => void;
+  onToggleMultiViewport: () => void;
+  onTogglePanel: () => void;
+  onPrevComponent: () => void;
+  onNextComponent: () => void;
+  onPrevVariant: () => void;
+  onNextVariant: () => void;
+}
+
+export function PreviewMenu({
+  zoom,
+  background,
+  viewport,
+  showMatrixView,
+  showMultiViewport,
+  panelOpen,
+  onZoomChange,
+  onBackgroundChange,
+  onViewportChange,
+  onToggleMatrix,
+  onToggleMultiViewport,
+  onTogglePanel,
+  onPrevComponent,
+  onNextComponent,
+  onPrevVariant,
+  onNextVariant,
+}: PreviewMenuProps) {
+  // Keyboard shortcuts for zoom
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return;
+    }
+
+    if (e.key === '=' || e.key === '+') {
+      e.preventDefault();
+      const currentIndex = ZOOM_LEVELS.indexOf(zoom);
+      if (currentIndex < ZOOM_LEVELS.length - 1) {
+        onZoomChange(ZOOM_LEVELS[currentIndex + 1]);
+      }
+    } else if (e.key === '-') {
+      e.preventDefault();
+      const currentIndex = ZOOM_LEVELS.indexOf(zoom);
+      if (currentIndex > 0) {
+        onZoomChange(ZOOM_LEVELS[currentIndex - 1]);
+      }
+    } else if (e.key === '0') {
+      e.preventDefault();
+      onZoomChange(100);
+    }
+  }, [zoom, onZoomChange]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  const iconSize = 16;
+  const iconWeight = 'regular' as const;
+
+  return (
+    <Menu modal={false}>
+      <Menu.Trigger asChild>
+        <Button variant="ghost" size="sm" aria-label="Options menu">
+          <Stack direction="row" gap="xs" align="center">
+            <List size={18} weight="bold" />
+            <Text size="sm" weight="medium">Options</Text>
+          </Stack>
+        </Button>
+      </Menu.Trigger>
+      <Menu.Content side="bottom" align="start" style={{ minWidth: '14rem' }}>
+        {/* View modes */}
+        <Menu.Item
+          checked={showMatrixView}
+          icon={<GridFour size={iconSize} weight={iconWeight} />}
+          onSelect={onToggleMatrix}
+        >
+          <Stack direction="row" align="center" style={{ flex: 1 }}>
+            Matrix view
+            <Shortcut keys="M" />
+          </Stack>
+        </Menu.Item>
+        <Menu.Item
+          checked={showMultiViewport}
+          icon={<DeviceMobile size={iconSize} weight={iconWeight} />}
+          onSelect={onToggleMultiViewport}
+        >
+          <Stack direction="row" align="center" style={{ flex: 1 }}>
+            Responsive view
+            <Shortcut keys="V" />
+          </Stack>
+        </Menu.Item>
+        <Menu.Item
+          checked={panelOpen}
+          icon={<Rows size={iconSize} weight={iconWeight} />}
+          onSelect={onTogglePanel}
+        >
+          <Stack direction="row" align="center" style={{ flex: 1 }}>
+            Show addons
+            <Shortcut keys="P" />
+          </Stack>
+        </Menu.Item>
+
+        <Menu.Separator />
+
+        {/* Navigation */}
+        <Menu.Group>
+          <Menu.GroupLabel>Navigate</Menu.GroupLabel>
+          <Menu.Item
+            icon={<ArrowUp size={iconSize} weight={iconWeight} />}
+            onSelect={onPrevComponent}
+          >
+            <Stack direction="row" align="center" style={{ flex: 1 }}>
+              Previous component
+              <Shortcut keys="⌘↑" />
+            </Stack>
+          </Menu.Item>
+          <Menu.Item
+            icon={<ArrowDown size={iconSize} weight={iconWeight} />}
+            onSelect={onNextComponent}
+          >
+            <Stack direction="row" align="center" style={{ flex: 1 }}>
+              Next component
+              <Shortcut keys="⌘↓" />
+            </Stack>
+          </Menu.Item>
+          <Menu.Item
+            icon={<ArrowLeft size={iconSize} weight={iconWeight} />}
+            onSelect={onPrevVariant}
+          >
+            <Stack direction="row" align="center" style={{ flex: 1 }}>
+              Previous variant
+              <Shortcut keys="⌘←" />
+            </Stack>
+          </Menu.Item>
+          <Menu.Item
+            icon={<ArrowRight size={iconSize} weight={iconWeight} />}
+            onSelect={onNextVariant}
+          >
+            <Stack direction="row" align="center" style={{ flex: 1 }}>
+              Next variant
+              <Shortcut keys="⌘→" />
+            </Stack>
+          </Menu.Item>
+        </Menu.Group>
+
+        <Menu.Separator />
+
+        {/* Settings submenus */}
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger icon={<Eye size={iconSize} weight={iconWeight} />}>Viewport</Menu.SubmenuTrigger>
+          <Menu.Content side="right" align="start">
+            {VIEWPORT_OPTIONS.map((option) => (
+              <Menu.Item
+                key={option.value}
+                checked={viewport === option.value}
+                onSelect={() => onViewportChange(option.value)}
+              >
+                {option.label}
+              </Menu.Item>
+            ))}
+          </Menu.Content>
+        </Menu.Submenu>
+
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger>Background</Menu.SubmenuTrigger>
+          <Menu.Content side="right" align="start">
+            {BACKGROUND_OPTIONS_UI.map((option) => (
+              <Menu.Item
+                key={option.value}
+                checked={background === option.value}
+                onSelect={() => onBackgroundChange(option.value)}
+              >
+                {option.label}
+              </Menu.Item>
+            ))}
+          </Menu.Content>
+        </Menu.Submenu>
+
+        <Menu.Submenu>
+          <Menu.SubmenuTrigger>Zoom ({zoom}%)</Menu.SubmenuTrigger>
+          <Menu.Content side="right" align="start">
+            {ZOOM_LEVELS.map((level) => (
+              <Menu.Item
+                key={level}
+                checked={zoom === level}
+                onSelect={() => onZoomChange(level)}
+              >
+                {level}%
+              </Menu.Item>
+            ))}
+          </Menu.Content>
+        </Menu.Submenu>
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/viewer/components/PreviewToolbar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useCallback } from 'react';
-import { Button, Menu, Stack, Separator } from '@fragments/ui';
+import { Button, Menu, Stack, Separator } from '@fragments-sdk/ui';
 import {
   ZOOM_LEVELS,
   type ZoomLevel,

package/src/viewer/components/PropsEditor.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { PropDefinition } from "../../core/index.js";
-import { Input, Select, Toggle } from "@fragments/ui";
+import { Input, Select, Toggle } from "@fragments-sdk/ui";
 import { ControlsIcon, ChevronDownIcon, RefreshIcon } from "./Icons.js";
 
 interface PropsEditorProps {

package/src/viewer/components/PropsTable.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { PropDefinition } from '../../core/index.js';
-import { Table, createColumns, Badge, Text, Stack } from '@fragments/ui';
+import { Table, createColumns, Badge, Text, Stack } from '@fragments-sdk/ui';
 import { WarningIcon } from './Icons.js';
 
 interface PropsTableProps {

package/src/viewer/components/RightSidebar.tsx

@@ -1,6 +1,6 @@
 import type { FragmentDefinition } from '../../core/index.js';
 import { useScrollSpy } from '../hooks/useScrollSpy.js';
-import { Sidebar } from '@fragments/ui';
+import { Sidebar } from '@fragments-sdk/ui';
 
 interface RightSidebarProps {
   fragment: FragmentDefinition;

package/src/viewer/components/ScreenshotButton.tsx

@@ -5,7 +5,7 @@
 
 import { useState, memo } from 'react';
 import html2canvas from 'html2canvas';
-import { Button, Tooltip } from '@fragments/ui';
+import { Button, Tooltip } from '@fragments-sdk/ui';
 import { CameraIcon } from './Icons.js';
 
 interface ScreenshotButtonProps {

package/src/viewer/components/SkeletonLoader.tsx

@@ -4,7 +4,7 @@
  * Shows animated placeholders while the app is loading.
  */
 
-import { Skeleton, Loading } from '@fragments/ui';
+import { Skeleton, Loading } from '@fragments-sdk/ui';
 
 /**
  * Full app skeleton shown during initial load

package/src/viewer/components/Toast.tsx

@@ -1,3 +1,3 @@
 // Re-export Fragments UI Toast for use in the viewer
-export { ToastProvider, useToast } from '@fragments/ui';
-export type { ToastData as ToastMessage } from '@fragments/ui';
+export { ToastProvider, useToast } from '@fragments-sdk/ui';
+export type { ToastData as ToastMessage } from '@fragments-sdk/ui';

package/src/viewer/components/TokenStylePanel.tsx

@@ -9,7 +9,7 @@
  */
 
 import { useState, useEffect, useCallback } from "react";
-import { Badge } from "@fragments/ui";
+import { Badge } from "@fragments-sdk/ui";
 import type { DesignToken, EnhancedStyleDiffItem, TokenUsageSummary } from "../../core/index.js";
 import { CheckIcon, XIcon, LoadingIcon, FigmaIcon, WandIcon } from "./Icons.js";
 

package/src/viewer/components/VariantMatrix.tsx

@@ -17,7 +17,7 @@ import { ErrorBoundary } from "./ErrorBoundary.js";
 import { StoryRenderer, LoaderIndicator } from "./StoryRenderer.js";
 import { IsolatedPreviewFrame } from "./IsolatedPreviewFrame.js";
 import { ChevronDownIcon } from "./Icons.js";
-import { getBackgroundStyle, type BackgroundOption } from "./PreviewToolbar.js";
+import { getBackgroundStyle, type BackgroundOption } from "../constants/ui.js";
 
 interface VariantMatrixProps {
   /** All variants to display */

package/src/viewer/components/VariantTabs.tsx

@@ -1,4 +1,4 @@
-import { Tabs } from '@fragments/ui';
+import { Tabs } from '@fragments-sdk/ui';
 import type { FragmentVariant } from '../../core/index.js';
 import { PlayIcon } from './Icons.js';
 

package/src/viewer/components/ViewportSelector.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, Stack, Input, Text, Box } from '@fragments/ui';
+import { Button, Menu, Stack, Input, Text, Box } from '@fragments-sdk/ui';
 import { VIEWPORT_PRESETS, type ViewportPreset } from '../constants/ui.js';
 import {
   ViewportIcon,