@fragments-sdk/cli 0.8.1 → 0.9.1

package/src/viewer/components/ResizablePanel.tsx

@@ -1,38 +1,39 @@
 /**
- * ResizablePanel - A panel that can be resized by dragging and docked to bottom or right
+ * ResizablePanel - A bottom-docked panel that can be resized by dragging
  *
  * Features:
- * - Drag-to-resize from the edge
- * - Dock to bottom or right side
- * - Collapsible
- * - Persists size and dock position to localStorage
+ * - Drag-to-resize from the top edge
+ * - Collapsible via chevron toggle
+ * - Persists size and open state to localStorage
  */
 
-import { useState, useEffect, useCallback, useRef, type ReactNode, type CSSProperties } from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  type ReactNode,
+  type CSSProperties,
+} from "react";
 import { BRAND } from "../../core/index.js";
 import { ChevronDownIcon } from "./Icons.js";
+import { Box, Stack, Button } from "@fragments-sdk/ui";
 
 // Storage key for persisting panel state
 const STORAGE_KEY = `${BRAND.storagePrefix}panel-state`;
 
 interface PanelState {
   height: number;
-  width: number;
-  dock: "bottom" | "right";
   isOpen: boolean;
 }
 
 const DEFAULT_STATE: PanelState = {
-  height: 180, // Reduced from 256 to give preview area more space
-  width: 400,
-  dock: "bottom",
+  height: 180,
   isOpen: true,
 };
 
 const MIN_HEIGHT = 120;
 const MAX_HEIGHT = 600;
-const MIN_WIDTH = 280;
-const MAX_WIDTH = 800;
 
 function loadPanelState(): PanelState {
   try {
@@ -55,7 +56,7 @@ function savePanelState(state: PanelState): void {
   }
 }
 
-interface ResizablePanelProps {
+interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Panel header content (tabs, title, etc.) */
   header: ReactNode;
   /** Panel body content */
@@ -71,12 +72,13 @@ export function ResizablePanel({
   children,
   visible = true,
   className,
+  ...props
 }: ResizablePanelProps) {
   const [state, setState] = useState<PanelState>(loadPanelState);
   const [isResizing, setIsResizing] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
-  const startPosRef = useRef({ x: 0, y: 0 });
-  const startSizeRef = useRef({ width: 0, height: 0 });
+  const startYRef = useRef(0);
+  const startHeightRef = useRef(0);
 
   // Save state changes to localStorage
   useEffect(() => {
@@ -87,35 +89,21 @@ export function ResizablePanel({
     (e: React.MouseEvent) => {
       e.preventDefault();
       setIsResizing(true);
-      startPosRef.current = { x: e.clientX, y: e.clientY };
-      startSizeRef.current = { width: state.width, height: state.height };
+      startYRef.current = e.clientY;
+      startHeightRef.current = state.height;
     },
-    [state.width, state.height]
+    [state.height]
   );
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
       if (!isResizing) return;
 
-      if (state.dock === "bottom") {
-        // Resize height (drag up = increase, drag down = decrease)
-        const deltaY = startPosRef.current.y - e.clientY;
-        const newHeight = Math.max(
-          MIN_HEIGHT,
-          Math.min(MAX_HEIGHT, startSizeRef.current.height + deltaY)
-        );
-        setState((s) => ({ ...s, height: newHeight }));
-      } else {
-        // Resize width (drag left = increase, drag right = decrease)
-        const deltaX = startPosRef.current.x - e.clientX;
-        const newWidth = Math.max(
-          MIN_WIDTH,
-          Math.min(MAX_WIDTH, startSizeRef.current.width + deltaX)
-        );
-        setState((s) => ({ ...s, width: newWidth }));
-      }
+      const deltaY = startYRef.current - e.clientY;
+      const newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, startHeightRef.current + deltaY));
+      setState((s) => ({ ...s, height: newHeight }));
     },
-    [isResizing, state.dock]
+    [isResizing]
   );
 
   const handleMouseUp = useCallback(() => {
@@ -127,7 +115,7 @@ export function ResizablePanel({
     if (isResizing) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = state.dock === "bottom" ? "ns-resize" : "ew-resize";
+      document.body.style.cursor = "ns-resize";
       document.body.style.userSelect = "none";
 
       return () => {
@@ -137,295 +125,147 @@ export function ResizablePanel({
         document.body.style.userSelect = "";
       };
     }
-  }, [isResizing, handleMouseMove, handleMouseUp, state.dock]);
+  }, [isResizing, handleMouseMove, handleMouseUp]);
 
   const toggleOpen = useCallback(() => {
     setState((s) => ({ ...s, isOpen: !s.isOpen }));
   }, []);
 
-  const toggleDock = useCallback(() => {
-    setState((s) => ({
-      ...s,
-      dock: s.dock === "bottom" ? "right" : "bottom",
-    }));
-  }, []);
-
   if (!visible) return null;
 
-  const isBottom = state.dock === "bottom";
   const isOpen = state.isOpen;
 
-  // Header height for collapsed state
+  // Heights for layout calculation
   const headerHeight = 40; // h-10 = 2.5rem = 40px
+  const grabHandleHeight = 12; // 6px top padding + 4px pill + 2px bottom padding
 
-  // Compute container styles
+  // Compute container styles — drawer appearance
   const containerStyle: CSSProperties = {
     flexShrink: 0,
-    backgroundColor: 'var(--bg-secondary)',
-    position: 'relative',
-    ...(isBottom
-      ? { borderTop: '1px solid var(--border)' }
-      : { borderLeft: '1px solid var(--border)' }),
+    backgroundColor: "var(--bg-secondary)",
     // Only transition when NOT resizing (for smooth open/close animations)
-    // Disable during drag to prevent sluggish feel
-    transition: isResizing ? 'none' : 'height 150ms ease, width 150ms ease',
-    ...(isBottom
-      ? { height: isOpen ? state.height : headerHeight }
-      : { width: isOpen ? state.width : headerHeight }),
+    transition: isResizing ? "none" : "height 300ms ease",
+    height: isOpen ? state.height : headerHeight,
     // Prevent content from being selected during resize
     ...(isResizing && { pointerEvents: "none" as const }),
+    position: "sticky",
+    bottom: 0,
+    // Drawer visual treatment
+    borderTopLeftRadius: "12px",
+    borderTopRightRadius: "12px",
+    boxShadow: "0 -4px 16px rgba(0, 0, 0, 0.08), 0 -1px 4px rgba(0, 0, 0, 0.04)",
+    borderTop: "1px solid var(--border)",
   };
 
-  // Resize handle styles
-  const resizeHandleStyle: CSSProperties = isBottom
-    ? {
-        position: 'absolute',
-        zIndex: 20,
-        top: '-8px',
-        left: 0,
-        right: 0,
-        height: '16px',
-        cursor: 'ns-resize',
-        ...(isResizing && { backgroundColor: 'rgba(var(--color-accent-rgb, 59, 130, 246), 0.2)' }),
-      }
-    : {
-        position: 'absolute',
-        zIndex: 20,
-        top: 0,
-        left: '-8px',
-        bottom: 0,
-        width: '16px',
-        cursor: 'ew-resize',
-        ...(isResizing && { backgroundColor: 'rgba(var(--color-accent-rgb, 59, 130, 246), 0.2)' }),
-      };
+  // Resize handle styles — extends above panel for easier grabbing
+  const resizeHandleStyle: CSSProperties = {
+    position: "absolute",
+    zIndex: 20,
+    top: "-8px",
+    left: 0,
+    right: 0,
+    height: "16px",
+    cursor: "ns-resize",
+    ...(isResizing && { backgroundColor: "rgba(var(--color-accent-rgb, 59, 130, 246), 0.2)" }),
+  };
 
-  // Visual indicator styles
-  const indicatorStyle: CSSProperties = isBottom
-    ? {
-        position: 'absolute',
-        backgroundColor: 'var(--color-accent)',
-        opacity: 0,
-        left: '50%',
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '48px',
-        height: '4px',
-        borderRadius: '9999px',
-        transition: 'opacity 150ms ease',
-      }
-    : {
-        position: 'absolute',
-        backgroundColor: 'var(--color-accent)',
-        opacity: 0,
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '4px',
-        height: '48px',
-        borderRadius: '9999px',
-        transition: 'opacity 150ms ease',
-      };
+  // Grab handle pill — always visible in drawer style
+  const grabHandleStyle: CSSProperties = {
+    width: "100%",
+    display: "flex",
+    justifyContent: "center",
+    padding: "6px 0 2px",
+    cursor: "ns-resize",
+  };
+
+  const grabPillStyle: CSSProperties = {
+    width: "36px",
+    height: "4px",
+    borderRadius: "9999px",
+    backgroundColor: "var(--text-muted)",
+    opacity: isResizing ? 0.8 : 0.3,
+    transition: "opacity 150ms ease",
+  };
 
   // Chevron icon rotation
   const chevronStyle: CSSProperties = {
-    width: '16px',
-    height: '16px',
-    transition: 'transform 150ms ease',
-    ...(!isOpen && isBottom && { transform: 'rotate(180deg)' }),
-    ...(!isOpen && !isBottom && { transform: 'rotate(-90deg)' }),
-    ...(isOpen && !isBottom && { transform: 'rotate(90deg)' }),
+    width: "16px",
+    height: "16px",
+    transition: "transform 150ms ease",
+    ...(!isOpen && { transform: "rotate(180deg)" }),
   };
 
   return (
-    <div
-      ref={panelRef}
-      className={className}
-      style={containerStyle}
-    >
+    <div ref={panelRef} className={className} style={containerStyle} {...props}>
       {/* Full-viewport overlay during resize - prevents iframes from capturing events */}
       {isResizing && (
         <div
           style={{
-            position: 'fixed',
+            position: "fixed",
             inset: 0,
             zIndex: 50,
-            cursor: isBottom ? "ns-resize" : "ew-resize",
+            cursor: "ns-resize",
             // Must explicitly enable pointer events since parent has pointerEvents: none
             pointerEvents: "auto",
           }}
         />
       )}
 
-      {/* Resize Handle - extends above/left of panel for easier grabbing */}
+      {/* Resize Handle - extends above panel for easier grabbing */}
       {isOpen && (
         <div
           style={resizeHandleStyle}
           onMouseDown={handleMouseDown}
+        />
+      )}
+
+      {/* Grab handle pill — always visible drawer indicator */}
+      {isOpen && (
+        <div
+          style={grabHandleStyle}
+          onMouseDown={handleMouseDown}
           onMouseEnter={(e) => {
-            const indicator = e.currentTarget.querySelector('[data-resize-indicator]') as HTMLElement;
-            if (indicator) indicator.style.opacity = '0.5';
+            const pill = e.currentTarget.querySelector("[data-grab-pill]") as HTMLElement;
+            if (pill) pill.style.opacity = "0.6";
           }}
           onMouseLeave={(e) => {
-            const indicator = e.currentTarget.querySelector('[data-resize-indicator]') as HTMLElement;
-            if (indicator) indicator.style.opacity = '0';
+            const pill = e.currentTarget.querySelector("[data-grab-pill]") as HTMLElement;
+            if (pill) pill.style.opacity = isResizing ? "0.8" : "0.3";
           }}
         >
-          {/* Visual indicator - shows on hover */}
-          <div data-resize-indicator style={indicatorStyle} />
+          <div data-grab-pill style={grabPillStyle} />
         </div>
       )}
 
       {/* Panel Header */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '0 16px',
-          height: '40px',
-          borderBottom: '1px solid var(--border-subtle)',
-        }}
-      >
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px',
-          flex: 1,
-          overflow: 'hidden',
-        }}>
+      <Stack direction="row" align="center" justify="between" style={{ padding: '0 16px', height: '40px', borderBottom: '1px solid var(--border-subtle)' }}>
+        <Stack direction="row" align="center" gap="xs" style={{ flex: 1, overflow: 'hidden' }}>
           {header}
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-          {/* Dock toggle button */}
-          <button
-            onClick={toggleDock}
-            style={{
-              padding: '4px',
-              color: 'var(--text-tertiary)',
-              backgroundColor: 'transparent',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              display: 'inline-flex',
-              transition: 'color 150ms ease, background-color 150ms ease',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.color = 'var(--text-primary)';
-              e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = 'var(--text-tertiary)';
-              e.currentTarget.style.backgroundColor = 'transparent';
-            }}
-            title={isBottom ? "Dock to right" : "Dock to bottom"}
-          >
-            <span style={{ display: 'inline-flex', width: '16px', height: '16px' }}>
-              <DockIcon dock={state.dock} />
-            </span>
-          </button>
+        </Stack>
+        <Stack direction="row" align="center" gap="xs">
           {/* Collapse toggle button */}
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
+            icon
             onClick={toggleOpen}
-            style={{
-              padding: '4px',
-              color: 'var(--text-tertiary)',
-              backgroundColor: 'transparent',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              display: 'inline-flex',
-              transition: 'color 150ms ease, background-color 150ms ease',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.color = 'var(--text-primary)';
-              e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = 'var(--text-tertiary)';
-              e.currentTarget.style.backgroundColor = 'transparent';
-            }}
-            title={isOpen ? "Collapse panel" : "Expand panel"}
+            aria-label={isOpen ? "Collapse panel" : "Expand panel"}
           >
             <span style={chevronStyle}>
               <ChevronDownIcon />
             </span>
-          </button>
-        </div>
-      </div>
+          </Button>
+        </Stack>
+      </Stack>
 
       {/* Panel Content */}
       {isOpen && (
-        <div
-          style={{
-            overflow: 'auto',
-            height: isBottom ? `calc(100% - ${headerHeight}px)` : "100%",
-            width: isBottom ? "100%" : `calc(100% - ${headerHeight}px)`,
-          }}
-        >
+        <Box overflow="auto" style={{ height: `calc(100% - ${headerHeight}px)`, width: '100%' }}>
           {children}
-        </div>
+        </Box>
       )}
     </div>
   );
 }
 
-/**
- * Hook to get panel dock position for layout purposes
- */
-export function usePanelDock(): "bottom" | "right" {
-  const [dock, setDock] = useState<"bottom" | "right">(() => {
-    const state = loadPanelState();
-    return state.dock;
-  });
-
-  useEffect(() => {
-    const handleStorage = () => {
-      const state = loadPanelState();
-      setDock(state.dock);
-    };
-
-    // Listen for storage changes (from other tabs)
-    window.addEventListener("storage", handleStorage);
-
-    // Also poll for changes since localStorage events don't fire in same tab
-    const interval = setInterval(handleStorage, 500);
-
-    return () => {
-      window.removeEventListener("storage", handleStorage);
-      clearInterval(interval);
-    };
-  }, []);
-
-  return dock;
-}
-
-// Icon for dock position toggle
-function DockIcon({ dock }: { dock: "bottom" | "right" }) {
-  const svgStyle: CSSProperties = { width: '100%', height: '100%' };
-
-  if (dock === "bottom") {
-    // Show icon indicating "dock to right" action
-    return (
-      <svg style={svgStyle} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
-        {/* Outer frame */}
-        <rect x="1" y="2" width="14" height="12" rx="1" />
-        {/* Right panel indicator */}
-        <line x1="10" y1="2" x2="10" y2="14" />
-        <line x1="10" y1="8" x2="15" y2="8" strokeDasharray="2 1" />
-      </svg>
-    );
-  }
-
-  // Show icon indicating "dock to bottom" action
-  return (
-    <svg style={svgStyle} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
-      {/* Outer frame */}
-      <rect x="1" y="2" width="14" height="12" rx="1" />
-      {/* Bottom panel indicator */}
-      <line x1="1" y1="10" x2="15" y2="10" />
-      <line x1="8" y1="10" x2="8" y2="14" strokeDasharray="2 1" />
-    </svg>
-  );
-}
-
 export default ResizablePanel;

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-sdk/ui';
+import { Sidebar, Text } from '@fragments-sdk/ui';
 
 interface RightSidebarProps {
   fragment: FragmentDefinition;
@@ -60,15 +60,9 @@ export function RightSidebar({ fragment }: RightSidebarProps) {
   return (
     <Sidebar position="right" collapsible="none" style={{ padding: '8px 0' }}>
       <Sidebar.Header>
-        <span style={{
-          fontSize: '11px',
-          fontWeight: 500,
-          color: 'var(--text-tertiary)',
-          textTransform: 'uppercase',
-          letterSpacing: '0.05em',
-        }}>
+        <Text size="2xs" weight="medium" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
           On this page
-        </span>
+        </Text>
       </Sidebar.Header>
       <Sidebar.Nav aria-label="On this page">
         {tocItems.map((item) => {

package/src/viewer/components/SkeletonLoader.tsx

@@ -4,7 +4,7 @@
  * Shows animated placeholders while the app is loading.
  */
 
-import { Skeleton, Loading } from '@fragments-sdk/ui';
+import { Skeleton, Loading, Stack, Box } from '@fragments-sdk/ui';
 
 /**
  * Full app skeleton shown during initial load
@@ -34,18 +34,18 @@ export function AppSkeleton() {
           backgroundColor: 'var(--bg-primary)',
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <Stack direction="row" align="center" gap="sm">
           <Skeleton.Circle size={20} />
           <Skeleton variant="text" width={96} />
           <Skeleton variant="text" width={64} />
-        </div>
+        </Stack>
         <Skeleton variant="rect" width={240} height={32} radius="md" />
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <Stack direction="row" align="center" gap="sm">
           <Skeleton variant="rect" width={64} height={28} radius="md" />
           <Skeleton.Circle size={20} />
           <Skeleton.Circle size={20} />
           <Skeleton.Circle size={20} />
-        </div>
+        </Stack>
       </div>
 
       <aside
@@ -58,10 +58,10 @@ export function AppSkeleton() {
           minHeight: 0,
         }}
       >
-        <div style={{ padding: '12px 16px' }}>
+        <Box paddingX="md" paddingY="sm">
           <Skeleton variant="rect" height={32} radius="md" />
-        </div>
-        <div style={{ padding: '0 12px', display: 'flex', flexDirection: 'column', gap: '12px', overflow: 'hidden' }}>
+        </Box>
+        <Stack gap="sm" style={{ padding: '0 12px', overflow: 'hidden' }}>
           <Skeleton variant="text" width={68} />
           <Skeleton variant="rect" height={30} radius="md" />
           <Skeleton variant="rect" height={30} radius="md" />
@@ -70,7 +70,7 @@ export function AppSkeleton() {
           <Skeleton variant="rect" height={30} radius="md" />
           <Skeleton variant="rect" height={30} radius="md" />
           <Skeleton variant="rect" width="78%" height={30} radius="md" />
-        </div>
+        </Stack>
         <div style={{ marginTop: 'auto', padding: '12px 16px', borderTop: '1px solid var(--border-subtle)' }}>
           <Skeleton variant="text" width={92} />
         </div>
@@ -131,7 +131,7 @@ export function AppSkeleton() {
           padding: '16px 14px',
         }}
       >
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <Stack gap="sm">
           <Skeleton variant="text" width={92} />
           <Skeleton variant="text" width={64} />
           <Skeleton variant="text" width={48} />
@@ -141,7 +141,7 @@ export function AppSkeleton() {
           <Skeleton variant="rect" width="100%" height={26} radius="md" />
           <Skeleton variant="rect" width="84%" height={26} radius="md" />
           <Skeleton variant="rect" width="70%" height={26} radius="md" />
-        </div>
+        </Stack>
       </aside>
     </div>
   );
@@ -152,9 +152,9 @@ export function AppSkeleton() {
  */
 export function PreviewSkeleton() {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
+    <Stack direction="row" align="center" justify="center" style={{ padding: '32px' }}>
       <Loading size="md" />
-    </div>
+    </Stack>
   );
 }