@fragments-sdk/cli 0.6.0 → 0.7.1

package/src/viewer/components/CommandPalette.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { Dialog, Stack, Text, Badge, Separator, Input } from '@fragments/ui';
-import type { SegmentDefinition } from "../../core/index.js";
+import type { FragmentDefinition } from "../../core/index.js";
 import { SearchIcon, ChevronRightIcon } from "./Icons.js";
 
 interface CommandPaletteProps {
@@ -19,8 +19,8 @@ interface CommandPaletteProps {
   isOpen: boolean;
   /** Callback to close the palette */
   onClose: () => void;
-  /** All available segments */
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  /** All available fragments */
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
   /** Callback when a component is selected */
   onSelectComponent: (path: string) => void;
   /** Callback when a variant is selected */
@@ -40,7 +40,7 @@ interface SearchResult {
 export function CommandPalette({
   isOpen,
   onClose,
-  segments,
+  fragments,
   onSelectComponent,
   onSelectVariant,
 }: CommandPaletteProps) {
@@ -53,9 +53,9 @@ export function CommandPalette({
   const results = useMemo(() => {
     const allResults: SearchResult[] = [];
 
-    for (const { path, segment } of segments) {
-      const componentName = segment.meta.name;
-      const category = segment.meta.category;
+    for (const { path, fragment } of fragments) {
+      const componentName = fragment.meta.name;
+      const category = fragment.meta.category;
 
       // Add component result
       allResults.push({
@@ -67,9 +67,9 @@ export function CommandPalette({
       });
 
       // Add variant results
-      if (segment.variants) {
-        for (let i = 0; i < segment.variants.length; i++) {
-          const variant = segment.variants[i];
+      if (fragment.variants) {
+        for (let i = 0; i < fragment.variants.length; i++) {
+          const variant = fragment.variants[i];
           allResults.push({
             type: "variant",
             path,
@@ -106,7 +106,7 @@ export function CommandPalette({
       .slice(0, 20);
 
     return scored;
-  }, [segments, query]);
+  }, [fragments, query]);
 
   // Reset selection when results change
   useEffect(() => {

package/src/viewer/components/ComponentGraph.tsx

@@ -9,16 +9,16 @@
  */
 
 import { useMemo, useState } from "react";
-import type { SegmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
+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";
 
 interface ComponentGraphProps {
-  /** Current segment definition */
-  segment: SegmentDefinition | null;
-  /** All available segments for navigation */
-  allSegments: Array<{ path: string; segment: SegmentDefinition }>;
+  /** Current fragment definition */
+  fragment: FragmentDefinition | null;
+  /** All available fragments for navigation */
+  allFragments: Array<{ path: string; fragment: FragmentDefinition }>;
   /** Callback when a component is clicked */
   onNavigate?: (componentName: string) => void;
 }
@@ -68,24 +68,24 @@ const RELATIONSHIP_CONFIG: Record<RelationshipType, { label: string; color: stri
   },
 };
 
-export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGraphProps) {
+export function ComponentGraph({ fragment, allFragments, onNavigate }: ComponentGraphProps) {
   const [showAutoDetected, setShowAutoDetected] = useState(true);
 
   // Auto-detect relationships
   const detectedRelationships = useMemo(() => {
-    if (!segment) return [];
+    if (!fragment) return [];
     try {
-      return detectAllRelationships(segment, allSegments);
+      return detectAllRelationships(fragment, allFragments);
     } catch {
       return [];
     }
-  }, [segment, allSegments]);
+  }, [fragment, allFragments]);
 
   // Merge manual and detected relationships
   const allRelationships = useMemo(() => {
-    if (!segment) return [];
-    return mergeRelationships(segment.relations, showAutoDetected ? detectedRelationships : []);
-  }, [segment, detectedRelationships, showAutoDetected]);
+    if (!fragment) return [];
+    return mergeRelationships(fragment.relations, showAutoDetected ? detectedRelationships : []);
+  }, [fragment, detectedRelationships, showAutoDetected]);
 
   // Group relations by type
   const groupedRelations = useMemo(() => {
@@ -110,22 +110,22 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
 
   // Find reverse relations (components that reference this one)
   const reverseRelations = useMemo(() => {
-    if (!segment) return [];
+    if (!fragment) return [];
 
-    const componentName = segment.meta.name;
-    const reverse: Array<{ segment: SegmentDefinition; relation: ComponentRelation }> = [];
+    const componentName = fragment.meta.name;
+    const reverse: Array<{ fragment: FragmentDefinition; relation: ComponentRelation }> = [];
 
-    for (const { segment: otherSegment } of allSegments) {
-      if (otherSegment.meta.name === componentName) continue;
-      if (!otherSegment.relations) continue;
+    for (const { fragment: otherFragment } of allFragments) {
+      if (otherFragment.meta.name === componentName) continue;
+      if (!otherFragment.relations) continue;
 
-      for (const relation of otherSegment.relations) {
+      for (const relation of otherFragment.relations) {
         if (relation.component === componentName) {
           reverse.push({
-            segment: otherSegment,
+            fragment: otherFragment,
             relation: {
               ...relation,
-              component: otherSegment.meta.name,
+              component: otherFragment.meta.name,
               // Flip the relationship direction for display
               relationship: flipRelationship(relation.relationship),
             },
@@ -135,11 +135,11 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
     }
 
     return reverse;
-  }, [segment, allSegments]);
+  }, [fragment, allFragments]);
 
-  // Check if a component exists in our segments
+  // Check if a component exists in our fragments
   const componentExists = (name: string) => {
-    return allSegments.some(s => s.segment.meta.name === name);
+    return allFragments.some(s => s.fragment.meta.name === name);
   };
 
   const handleNavigate = (componentName: string) => {
@@ -148,8 +148,8 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
     }
   };
 
-  // No segment selected
-  if (!segment) {
+  // No fragment selected
+  if (!fragment) {
     return (
       <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
@@ -184,7 +184,7 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
             </EmptyState.Icon>
             <EmptyState.Title>No relationships defined</EmptyState.Title>
             <EmptyState.Description>
-              This component doesn't have any defined relationships. Add a <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>relations</code> array to your segment definition to visualize component connections.
+              This component doesn't have any defined relationships. Add a <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>relations</code> array to your fragment definition to visualize component connections.
             </EmptyState.Description>
             <div style={{ marginTop: '16px', width: '100%' }}>
               <CodeBlock language="typescript">{`relations: [
@@ -220,7 +220,7 @@ export function ComponentGraph({ segment, allSegments, onNavigate }: ComponentGr
           )}
         </Stack>
         <Text size="xs" color="secondary" style={{ marginTop: '4px' }}>
-          Relationships for <Text as="span" weight="medium" size="xs">{segment.meta.name}</Text>
+          Relationships for <Text as="span" weight="medium" size="xs">{fragment.meta.name}</Text>
           {showAutoDetected && detectedCount > 0 && (
             <span style={{ marginLeft: '4px' }}>
               ({detectedCount} from variants)

package/src/viewer/components/ComponentHeader.tsx

@@ -1,9 +1,9 @@
-import type { SegmentMeta } from '../../core/index.js';
+import type { FragmentMeta } from '../../core/index.js';
 import { Badge, Alert, Text, Stack, Separator } from '@fragments/ui';
 import { WarningIcon, BeakerIcon } from './Icons.js';
 
 interface ComponentHeaderProps {
-  meta: SegmentMeta;
+  meta: FragmentMeta;
 }
 
 // Map status to Badge variant

package/src/viewer/components/ContractPanel.tsx

@@ -1,14 +1,14 @@
 /**
- * ContractPanel component - displays SegmentContract metadata for AI agents.
+ * ContractPanel component - displays FragmentContract metadata for AI agents.
  * Shows propsSummary, scenarioTags, bans, and a11yRules.
  */
 
 import { memo } from 'react';
-import type { SegmentContract } from '../../core/index.js';
+import type { FragmentContract } from '../../core/index.js';
 import { Stack, Text, Card, Chip, Alert, EmptyState, CodeBlock, Badge } from '@fragments/ui';
 
 interface ContractPanelProps {
-  contract?: SegmentContract;
+  contract?: FragmentContract;
   componentName: string;
 }
 
@@ -37,7 +37,7 @@ export const ContractPanel = memo(function ContractPanel({
         </EmptyState.Icon>
         <EmptyState.Title>No contract metadata</EmptyState.Title>
         <EmptyState.Description>
-          Add a <code style={{ background: 'var(--bg-hover)', padding: '2px 4px', borderRadius: '4px' }}>contract</code> field to the segment definition to enable AI agent features.
+          Add a <code style={{ background: 'var(--bg-hover)', padding: '2px 4px', borderRadius: '4px' }}>contract</code> field to the fragment definition to enable AI agent features.
         </EmptyState.Description>
         <EmptyState.Actions>
           <CodeBlock
@@ -186,7 +186,7 @@ function Section({ title, subtitle, children }: SectionProps) {
 }
 
 // Check if contract is empty or has no meaningful content
-function isContractEmpty(contract: SegmentContract): boolean {
+function isContractEmpty(contract: FragmentContract): boolean {
   return (
     (!contract.propsSummary || contract.propsSummary.length === 0) &&
     (!contract.scenarioTags || contract.scenarioTags.length === 0) &&
@@ -196,7 +196,7 @@ function isContractEmpty(contract: SegmentContract): boolean {
 }
 
 // Check if contract has some but not all fields
-function isPartialContract(contract: SegmentContract): boolean {
+function isPartialContract(contract: FragmentContract): boolean {
   const fieldCount = [
     contract.propsSummary?.length ?? 0,
     contract.scenarioTags?.length ?? 0,

package/src/viewer/components/FigmaEmbed.tsx

@@ -40,7 +40,7 @@ function parseFigmaUrl(figmaUrl: string): ParsedFigmaUrl | null {
  * Build a Figma embed URL.
  */
 function buildEmbedUrl(fileKey: string, nodeId?: string): string {
-  let embedUrl = `https://embed.figma.com/design/${fileKey}?embed-host=segments`;
+  let embedUrl = `https://embed.figma.com/design/${fileKey}?embed-host=fragments`;
 
   if (nodeId) {
     const embedNodeId = nodeId.replace(/:/g, "-");
@@ -205,25 +205,25 @@ export function FigmaEmbed({ figmaUrl, allFigmaUrls, zoom = 100, className, styl
 }
 
 /**
- * Hook to collect all Figma URLs from a segment's variants.
+ * Hook to collect all Figma URLs from a fragment's variants.
  * This enables the FigmaEmbed to preload all variant iframes.
  */
 export function useAllFigmaUrls(
-  segment: { meta: { figma?: string }; variants?: Array<{ figma?: string }> } | undefined
+  fragment: { meta: { figma?: string }; variants?: Array<{ figma?: string }> } | undefined
 ): string[] {
   return useMemo(() => {
-    if (!segment) return [];
+    if (!fragment) return [];
 
     const urls: string[] = [];
 
     // Add meta-level Figma URL
-    if (segment.meta.figma) {
-      urls.push(segment.meta.figma);
+    if (fragment.meta.figma) {
+      urls.push(fragment.meta.figma);
     }
 
     // Add variant-level Figma URLs
-    if (segment.variants) {
-      for (const variant of segment.variants) {
+    if (fragment.variants) {
+      for (const variant of fragment.variants) {
         if (variant.figma) {
           urls.push(variant.figma);
         }
@@ -232,5 +232,5 @@ export function useAllFigmaUrls(
 
     // Deduplicate
     return [...new Set(urls)];
-  }, [segment]);
+  }, [fragment]);
 }

package/src/viewer/components/HealthDashboard.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useMemo, useState, useCallback, useEffect } from 'react';
-import type { SegmentDefinition } from '../../core/index.js';
+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 {
@@ -17,7 +17,7 @@ import {
 import type { A11ySummary, CachedA11yResult } from '../types/a11y.js';
 
 interface HealthDashboardProps {
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
   onNavigate?: (componentName: string) => void;
 }
 
@@ -50,9 +50,9 @@ interface ComponentRow {
 }
 
 function calculateCoverage(
-  segments: Array<{ path: string; segment: SegmentDefinition }>
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): { metrics: CoverageMetric[]; components: ComponentRow[]; categoryCount: number } {
-  const total = segments.length;
+  const total = fragments.length;
 
   if (total === 0) {
     return { metrics: [], components: [], categoryCount: 0 };
@@ -66,32 +66,32 @@ function calculateCoverage(
   let withUsage = 0;
   let figmaLinked = 0;
 
-  for (const { segment } of segments) {
-    const cat = segment.meta.category || 'uncategorized';
+  for (const { fragment } of fragments) {
+    const cat = fragment.meta.category || 'uncategorized';
     categories.add(cat);
 
-    if (segment.meta.description && segment.meta.description.trim().length > 10) {
+    if (fragment.meta.description && fragment.meta.description.trim().length > 10) {
       documented++;
     }
 
-    const variantCount = segment.variants?.length || 0;
+    const variantCount = fragment.variants?.length || 0;
     if (variantCount > 0) {
       withVariants++;
     }
 
-    if (segment.usage && (segment.usage.when.length > 0 || segment.usage.whenNot.length > 0)) {
+    if (fragment.usage && (fragment.usage.when.length > 0 || fragment.usage.whenNot.length > 0)) {
       withUsage++;
     }
 
-    if (segment.meta.figma || segment.variants?.some((v) => v.figma)) {
+    if (fragment.meta.figma || fragment.variants?.some((v) => v.figma)) {
       figmaLinked++;
     }
 
     components.push({
-      name: segment.meta.name,
+      name: fragment.meta.name,
       category: cat,
       variantCount,
-      status: segment.meta.status || 'stable',
+      status: fragment.meta.status || 'stable',
     });
   }
 
@@ -120,10 +120,10 @@ function impactToBadgeVariant(impact: ImpactValue | undefined): 'error' | 'warni
   }
 }
 
-export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps) {
+export function HealthDashboard({ fragments, onNavigate }: HealthDashboardProps) {
   const { metrics, components, categoryCount } = useMemo(
-    () => calculateCoverage(segments),
-    [segments]
+    () => calculateCoverage(fragments),
+    [fragments]
   );
 
   const [componentA11y, setComponentA11y] = useState<Record<string, ComponentA11yResult>>({});
@@ -212,7 +212,7 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
     };
   }, [componentA11y, a11ySummary]);
 
-  if (segments.length === 0) {
+  if (fragments.length === 0) {
     return (
       <EmptyState>
         <EmptyState.Description>No components loaded</EmptyState.Description>
@@ -234,7 +234,7 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
       <div>
         <Text as="h1" size="lg" weight="semibold">Fragments</Text>
         <Text size="sm" color="tertiary" style={{ marginTop: '2px' }}>
-          {segments.length} component{segments.length !== 1 ? 's' : ''} · {categoryCount} categor{categoryCount !== 1 ? 'ies' : 'y'}
+          {fragments.length} component{fragments.length !== 1 ? 's' : ''} · {categoryCount} categor{categoryCount !== 1 ? 'ies' : 'y'}
         </Text>
       </div>
 

package/src/viewer/components/Icons.tsx

@@ -199,6 +199,49 @@ export function ViewportIcon({ className, style }: IconProps) {
   );
 }
 
+export function ResponsiveIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} style={style} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.7}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M7 12h10m0 0l-2.5-2.5M17 12l-2.5 2.5M7 12l2.5-2.5M7 12l2.5 2.5" />
+    </svg>
+  );
+}
+
+export function DesktopIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} style={style} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 5.25A2.25 2.25 0 016 3h12a2.25 2.25 0 012.25 2.25v8.25A2.25 2.25 0 0118 15.75H6a2.25 2.25 0 01-2.25-2.25V5.25zM9.75 20.25h4.5M12 15.75v4.5" />
+    </svg>
+  );
+}
+
+export function TabletIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} style={style} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <rect x="6.75" y="3" width="10.5" height="18" rx="2.25" />
+      <circle cx="12" cy="17.25" r="0.85" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+export function MobileIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} style={style} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <rect x="8.25" y="2.25" width="7.5" height="19.5" rx="2.25" />
+      <circle cx="12" cy="18.75" r="0.8" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+export function SettingsIcon({ className, style }: IconProps) {
+  return (
+    <svg className={className} style={style} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.094c.55 0 1.02.398 1.11.94l.18 1.09c.06.36.29.668.62.84l.94.5c.318.168.7.18 1.028.03l.998-.455c.5-.23 1.09-.048 1.38.42l.546.882c.29.468.19 1.074-.24 1.424l-.858.698a1.26 1.26 0 00-.456.985v1.046c0 .38.17.738.456.984l.858.699c.43.35.53.956.24 1.424l-.545.882a1.1 1.1 0 01-1.381.42l-.998-.455a1.26 1.26 0 00-1.028.03l-.94.5a1.26 1.26 0 00-.62.84l-.18 1.09a1.125 1.125 0 01-1.11.94h-1.094a1.124 1.124 0 01-1.11-.94l-.18-1.09a1.26 1.26 0 00-.62-.84l-.94-.5a1.26 1.26 0 00-1.028-.03l-.998.455a1.1 1.1 0 01-1.381-.42l-.545-.882a1.125 1.125 0 01.24-1.424l.858-.699a1.26 1.26 0 00.456-.984V9.878c0-.38-.17-.738-.456-.985l-.858-.698a1.125 1.125 0 01-.24-1.424l.545-.882c.29-.468.88-.65 1.381-.42l.998.455c.33.15.71.138 1.028-.03l.94-.5c.33-.172.56-.48.62-.84l.18-1.09z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
 // Misc
 export function ControlsIcon({ className, style }: IconProps) {
   return (
@@ -235,7 +278,16 @@ export function HeartPulseIcon({ className, style }: IconProps) {
 
 export function DashboardIcon({ className, style }: IconProps) {
   return (
-    <svg className={className} style={style} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <svg
+      className={className}
+      style={style}
+      width="20"
+      height="20"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
       <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
     </svg>
   );

package/src/viewer/components/InteractionsPanel.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import { Button, Stack, Text, Badge, EmptyState, CodeBlock, Alert } from "@fragments/ui";
-import type { PlayFunction, PlayFunctionContext, SegmentVariant } from "../../core/index.js";
+import type { PlayFunction, PlayFunctionContext, FragmentVariant } from "../../core/index.js";
 import {
   PlayIcon,
   CheckIcon,
@@ -54,7 +54,7 @@ interface DebugState {
 
 interface InteractionsPanelProps {
   /** The current variant being displayed */
-  variant: SegmentVariant | null;
+  variant: FragmentVariant | null;
   /** Selector for the preview container element */
   previewSelector?: string;
   /** Key that changes when the preview updates */

package/src/viewer/components/IsolatedPreviewFrame.tsx

@@ -15,8 +15,8 @@ import { usePreviewBridge, type ParentMessage } from '../hooks/usePreviewBridge.
 const MAX_RETRIES = 3;
 
 export interface IsolatedPreviewFrameProps {
-  /** Segment path (file path) to render */
-  segmentPath: string;
+  /** Fragment path (file path) to render */
+  fragmentPath: string;
   /** Variant name to render */
   variantName: string;
   /** Props to pass to the variant render function */
@@ -50,7 +50,7 @@ export interface IsolatedPreviewFrameProps {
  * for complete CSS isolation from the viewer shell.
  */
 export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
-  segmentPath,
+  fragmentPath,
   variantName,
   props,
   theme,
@@ -109,12 +109,12 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
     if (!isReady) return;
 
     // Create a render key to detect changes
-    const renderKey = `${segmentPath}:${variantName}:${JSON.stringify(props)}:${previewKey || ''}`;
+    const renderKey = `${fragmentPath}:${variantName}:${JSON.stringify(props)}:${previewKey || ''}`;
     if (renderKey === lastRenderRef.current) return;
     lastRenderRef.current = renderKey;
 
-    render(segmentPath, variantName, props);
-  }, [isReady, segmentPath, variantName, props, previewKey, render]);
+    render(fragmentPath, variantName, props);
+  }, [isReady, fragmentPath, variantName, props, previewKey, render]);
 
   // Sync theme when it changes
   useEffect(() => {

package/src/viewer/components/IsolatedRender.tsx

@@ -1,10 +1,10 @@
 import { useMemo, useEffect, useState } from "react";
-import type { SegmentDefinition } from "../../core/index.js";
+import type { FragmentDefinition } from "../../core/index.js";
 import { VariantRenderer } from "./VariantRenderer.js";
 import { getBackgroundStyle, type BackgroundOption, type ZoomLevel } from "./PreviewToolbar.js";
 
 interface IsolatedRenderProps {
-  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  fragments: Array<{ path: string; fragment: FragmentDefinition }>;
 }
 
 /**
@@ -12,7 +12,7 @@ interface IsolatedRenderProps {
  * Renders a single variant with minimal UI for visual testing.
  * URL params: ?isolated=true&component=Name&variant=VariantName&zoom=100&bg=white&theme=light
  */
-export function IsolatedRender({ segments }: IsolatedRenderProps) {
+export function IsolatedRender({ fragments }: IsolatedRenderProps) {
   const [ready, setReady] = useState(false);
 
   // Parse query parameters
@@ -31,21 +31,21 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
     };
   }, []);
 
-  // Find the matching segment and variant
+  // Find the matching fragment and variant
   const match = useMemo(() => {
     if (!params.component || !params.variant) {
       return null;
     }
 
-    const segment = segments.find(
-      (s) => s.segment.meta.name === params.component
+    const fragment = fragments.find(
+      (s) => s.fragment.meta.name === params.component
     );
 
-    if (!segment) {
+    if (!fragment) {
       return null;
     }
 
-    const variant = segment.segment.variants.find(
+    const variant = fragment.fragment.variants.find(
       (v) => v.name === params.variant
     );
 
@@ -53,8 +53,8 @@ export function IsolatedRender({ segments }: IsolatedRenderProps) {
       return null;
     }
 
-    return { segment: segment.segment, variant };
-  }, [segments, params]);
+    return { fragment: fragment.fragment, variant };
+  }, [fragments, params]);
 
   // Apply theme
   useEffect(() => {

package/src/viewer/components/Layout.tsx

@@ -3,13 +3,17 @@ import { AppShell } from '@fragments/ui';
 
 interface LayoutProps {
   leftSidebar: ReactNode;
+  header: ReactNode;
   children: ReactNode;
 }
 
-export function Layout({ leftSidebar, children }: LayoutProps) {
+export function Layout({ leftSidebar, header, children }: LayoutProps) {
   return (
-    <AppShell layout="sidebar-inset">
-      <AppShell.Sidebar width="256px">
+    <AppShell layout="inset">
+      <AppShell.Header>
+        {header}
+      </AppShell.Header>
+      <AppShell.Sidebar width="256px" collapsible="icon">
         {leftSidebar}
       </AppShell.Sidebar>
       <AppShell.Main padding="none">