@fragments-sdk/cli 0.7.9 → 0.7.11

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,
 }));
 
@@ -43,7 +43,6 @@ describe('CodePanel authored code pipeline', () => {
     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>");
   });
 

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 {
@@ -76,7 +76,6 @@ function buildFallbackSnippet(componentName: string, variant: FragmentVariant):
 
   return `import { ${componentName} } from '@/components/${componentName}';
 
-// TODO: Add explicit \`code\` for variant "${variant.name}" in this fragment file.
 ${usage}`;
 }
 

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 {

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,24 +1,27 @@
 import type { ReactNode } from 'react';
-import { AppShell } from '@fragments/ui';
+import { DocsPageShell } from '@fragments-sdk/shared';
 
 interface LayoutProps {
   leftSidebar: ReactNode;
   header: ReactNode;
   children: ReactNode;
+  aside?: ReactNode;
 }
 
-export function Layout({ leftSidebar, header, children }: LayoutProps) {
+export function Layout({ leftSidebar, header, children, aside }: LayoutProps) {
   return (
-    <AppShell>
-      <AppShell.Header>
-        {header}
-      </AppShell.Header>
-      <AppShell.Sidebar width="260px" collapsible="icon">
-        {leftSidebar}
-      </AppShell.Sidebar>
-      <AppShell.Main padding="none">
-        {children}
-      </AppShell.Main>
-    </AppShell>
+    <DocsPageShell
+      header={header}
+      sidebar={leftSidebar}
+      sidebarWidth="260px"
+      sidebarCollapsible="icon"
+      sidebarAriaLabel="Preview sidebar"
+      mainAriaLabel="Preview content"
+      mainPadding="none"
+      aside={aside}
+      asideWidth="240px"
+    >
+      {children}
+    </DocsPageShell>
   );
 }

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
@@ -398,11 +397,12 @@ export function PreviewArea({
   if (useIframeIsolation && variant) {
     // When no specific viewport width, fill the container
     const isFullWidth = !viewportWidth;
+    const scaleFactor = zoom / 100;
 
     return (
       <div style={isFullWidth
-        ? { height: '100%', display: 'flex', flexDirection: 'column' }
-        : { minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }
+        ? { height: '100%', display: 'flex', flexDirection: 'column', overflow: 'auto' }
+        : { minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', overflow: 'auto' }
       }>
         <div
           style={{
@@ -419,15 +419,24 @@ export function PreviewArea({
             }),
           }}
         >
-          <IsolatedPreviewFrame
-            fragmentPath={fragmentPath}
-            variantName={variant.name}
-            theme={previewTheme}
-            width="100%"
-            height="100%"
-            minHeight={viewportHeight || 200}
-            previewKey={previewKey}
-          />
+          <div
+            style={{
+              transform: `scale(${scaleFactor})`,
+              transformOrigin: 'top left',
+              width: zoom !== 100 ? `${100 / scaleFactor}%` : '100%',
+              height: zoom !== 100 ? `${100 / scaleFactor}%` : '100%',
+            }}
+          >
+            <IsolatedPreviewFrame
+              fragmentPath={fragmentPath}
+              variantName={variant.name}
+              theme={previewTheme}
+              width="100%"
+              height="100%"
+              minHeight={viewportHeight || 200}
+              previewKey={previewKey}
+            />
+          </div>
         </div>
       </div>
     );

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/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,

package/src/viewer/constants/ui.ts

@@ -126,6 +126,20 @@ export const VIEWPORT_PRESETS = {
 
 export type ViewportPreset = keyof typeof VIEWPORT_PRESETS | 'custom';
 
+export interface ViewportSize {
+  width: number | null;
+  height: number | null;
+}
+
+/**
+ * Get viewport width from preset.
+ */
+export function getViewportWidth(viewport: ViewportPreset, customSize: ViewportSize): number | null {
+  if (viewport === 'custom') return customSize.width;
+  if (viewport === 'responsive') return null;
+  return VIEWPORT_PRESETS[viewport]?.width ?? null;
+}
+
 /**
  * Get CSS background style for preview pane.
  */

package/src/viewer/entry.tsx

@@ -4,11 +4,10 @@ import { App } from "./components/App.js";
 import { ThemeProvider } from "./components/ThemeProvider.js";
 import { ToastProvider } from "./components/Toast.js";
 import { AppSkeleton } from "./components/SkeletonLoader.js";
-// Viewer shell styles - independent from UI library
-// UI library styles are only loaded in the isolated preview area
+// Fragments UI globals - base resets (box-sizing, body, scrollbars) + --fui-* CSS variables
+import "@fragments-sdk/ui";
+// Viewer-specific token aliases and utility classes
 import "./styles/globals.css";
-// Fragments UI globals - adds --fui-* CSS variables for dogfooding UI components
-import "@fragments/ui";
 
 // App-level error boundary that catches any unhandled errors
 class AppErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error: Error | null; errorInfo: ErrorInfo | null }> {