@vllnt/ui 0.2.1-canary.8b618ce → 0.2.1-canary.9e6a7be

package/README.md

@@ -218,7 +218,7 @@ import {
 | `Alert` | `{ Alert, AlertTitle, AlertDescription, alertVariants }` | Static alert banner |
 | `Badge` | `{ Badge, badgeVariants }` | Inline status label. Variants: default, secondary, destructive, outline |
 | `Skeleton` | `{ Skeleton }` | Loading placeholder |
-| `Spinner` | `{ Spinner }` | Loading spinner |
+| `Spinner` | `{ Spinner, UnicodeSpinner }` | Styled spinner + ASCII-art `UnicodeSpinner` for terminals / code blocks |
 
 ### Navigation
 
@@ -242,7 +242,7 @@ import {
 | `BarChart` | `{ BarChart }` | Chart component |
 | `LineChart` | `{ LineChart }` | Chart component |
 | `CodeBlock` | `{ CodeBlock }` | Syntax-highlighted code via `react-syntax-highlighter` |
-| `FlowDiagram` | `{ FlowDiagram }` | Flow diagram via `@xyflow/react` |
+| `FlowDiagram` | `{ FlowDiagram, FlowControls, FlowFullscreen, FlowErrorBoundary, useFlowDiagram }` | Flow diagram via `@xyflow/react`. Extras: custom controls, fullscreen wrapper, error boundary, and the `useFlowDiagram` hook for imperative access. |
 | `TableOfContents` | `{ TableOfContents }` | Page table of contents |
 
 ### App Components
@@ -276,7 +276,10 @@ import {
 | `Flashcard` | `{ Flashcard }` | Flip-card for spaced repetition |
 | `Stepper` | `{ Stepper }` | Linear progress stepper |
 | `Tour` | `{ Tour }` | Guided product tour |
-| `Annotation` | `{ Annotation }` | Inline annotation / highlight |
+| `Annotation` | `{ Annotation, Highlight }` | Inline annotation block + inline `Highlight` span for in-prose emphasis |
+| `LearningObjectives` | `{ LearningObjectives, Prerequisites, Summary }` | Objectives list plus companion `Prerequisites` and `Summary` blocks |
+| `KeyConcept` | `{ KeyConcept, Glossary }` | Concept callout + `Glossary` term list |
+| `Comparison` | `{ Comparison, BeforeAfter }` | Side-by-side compare block + `BeforeAfter` slider |
 | `CompletionDialog` | `{ CompletionDialog }` | End-of-flow celebration dialog |
 | `TruncatedText` | `{ TruncatedText }` | Expand-on-overflow text block |
 | `TableOfContentsPanel` | `{ TableOfContentsPanel }` | Sidebar TOC panel |
@@ -334,7 +337,7 @@ import {
 | `BorderBeam` | `{ BorderBeam }` | Animated gradient border |
 | `Marquee` | `{ Marquee }` | Infinite scroll marquee |
 | `NumberTicker` | `{ NumberTicker }` | Animated number counter |
-| `Spinner` | `{ Spinner }` | Rich loading-spinner library |
+| `Spinner` | `{ Spinner, UnicodeSpinner }` | Styled spinner + ASCII-art `UnicodeSpinner` for terminals / code blocks |
 
 ### Form Additions
 
@@ -386,10 +389,22 @@ import { cn } from "@vllnt/ui";
 <div className={cn("p-4 bg-primary", isActive && "bg-accent", className)} />
 ```
 
+### Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useDebounce(value, delayMs)` | Returns the value after `delayMs` of idle — ideal for search inputs. |
+| `useHorizontalScroll(ref)` | Drives the behavior used by `HorizontalScrollRow` — wheel → horizontal scroll, scroll-snap helpers. |
+| `useMobile(breakpoint?)` | Boolean for "viewport is below breakpoint" (default `768`). SSR-safe. |
+| `useSidebar()` | Reads `SidebarProvider` state — `{ open, setOpen, toggle }`. Throws outside a provider. |
+| `useFlowDiagram(options)` | Imperative controller for `FlowDiagram` — fit view, zoom, export to PNG. |
+| `useSocialFab()` | Drives the open/close state of `SocialFab`. |
+
 ```tsx
-import { useDebounce } from "@vllnt/ui";
+import { useDebounce, useMobile } from "@vllnt/ui";
 
-const debouncedValue = useDebounce(searchTerm, 300);
+const query = useDebounce(input, 300);
+const isMobile = useMobile();
 ```
 
 ## Types

package/dist/components/activity-log/activity-log.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState } from "react";
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";

package/dist/components/anchor-port/anchor-port.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const toneClasses = {
+  bidirectional: "border-violet-500/40 bg-violet-500/15 text-violet-700 dark:text-violet-300",
+  input: "border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300",
+  output: "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+};
+const stateClasses = {
+  active: "scale-100 opacity-100",
+  blocked: "opacity-60 saturate-50",
+  idle: "opacity-80"
+};
+const sideClasses = {
+  bottom: "self-end",
+  left: "self-start",
+  right: "self-end",
+  top: "self-start"
+};
+const AnchorPort = forwardRef(
+  ({
+    className,
+    side = "right",
+    state = "idle",
+    tone = "bidirectional",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": props["aria-label"] ?? `${tone} ${side} port ${state}`,
+      className: cn(
+        "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
+        toneClasses[tone],
+        stateClasses[state],
+        sideClasses[side],
+        className
+      ),
+      "data-side": side,
+      "data-state": state,
+      "data-tone": tone,
+      ref,
+      role: "img",
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-current" })
+    }
+  )
+);
+AnchorPort.displayName = "AnchorPort";
+export {
+  AnchorPort
+};

package/dist/components/anchor-port/index.js

@@ -0,0 +1,4 @@
+import { AnchorPort } from "./anchor-port";
+export {
+  AnchorPort
+};

package/dist/components/animated-text/animated-text.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";

package/dist/components/bottom-bar/bottom-bar.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const BottomBar = forwardRef(
+  ({ center, className, leading, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: leading }),
+        center ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center gap-2", children: center }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+      ]
+    }
+  )
+);
+BottomBar.displayName = "BottomBar";
+export {
+  BottomBar
+};

package/dist/components/bottom-bar/index.js

@@ -0,0 +1,4 @@
+import { BottomBar } from "./bottom-bar";
+export {
+  BottomBar
+};

package/dist/components/canvas-shell/canvas-foundation-demo.js

@@ -0,0 +1,183 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Activity, Bot, Compass, Layers3, Sparkles } from "lucide-react";
+import { BottomBar } from "../bottom-bar";
+import { Button } from "../button";
+import { CanvasView } from "../canvas-view";
+import { ChatDockSection } from "../chat-dock-section";
+import { GlassPanel } from "../glass-panel";
+import { LeftRail } from "../left-rail";
+import { RightDock } from "../right-dock";
+import { TopBar } from "../top-bar";
+import { WorkspaceSwitcher } from "../workspace-switcher";
+import { CanvasShell } from "./canvas-shell";
+function DemoLeftBar() {
+  return /* @__PURE__ */ jsx(GlassPanel, { className: "overflow-hidden", children: /* @__PURE__ */ jsxs(
+    LeftRail,
+    {
+      className: "w-[5rem] border-0 bg-transparent px-3 py-4",
+      footer: /* @__PURE__ */ jsx(Button, { "aria-label": "Runs", size: "icon", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx(Activity, { className: "size-4" }) }),
+      title: "Mode",
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Overview",
+            size: "icon",
+            type: "button",
+            variant: "secondary",
+            children: /* @__PURE__ */ jsx(Compass, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { "aria-label": "Objects", size: "icon", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx(Layers3, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx(Button, { "aria-label": "Agents", size: "icon", type: "button", variant: "ghost", children: /* @__PURE__ */ jsx(Bot, { className: "size-4" }) })
+      ]
+    }
+  ) });
+}
+function DemoTopBar() {
+  return /* @__PURE__ */ jsx(GlassPanel, { children: /* @__PURE__ */ jsx(
+    TopBar,
+    {
+      className: "border-0 bg-transparent px-5 font-sans",
+      leading: /* @__PURE__ */ jsx("div", { className: "flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }) }),
+      subtitle: "Calm operating surface",
+      title: "Operator workspace",
+      trailing: /* @__PURE__ */ jsx(Button, { size: "sm", type: "button", variant: "outline", children: "Open command" }),
+      children: /* @__PURE__ */ jsx(
+        WorkspaceSwitcher,
+        {
+          className: "bg-background/60",
+          defaultValue: "orchestrate",
+          workspaces: [
+            { id: "orchestrate", label: "Orchestrate" },
+            { id: "objects", label: "Objects" },
+            { id: "signals", label: "Signals" }
+          ]
+        }
+      )
+    }
+  ) });
+}
+function DemoRightBar() {
+  return /* @__PURE__ */ jsx(GlassPanel, { className: "h-full overflow-hidden", children: /* @__PURE__ */ jsx(
+    RightDock,
+    {
+      className: "h-full min-w-[22rem] max-w-[22rem] border-0 bg-transparent",
+      footer: /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Chat stays contextual and secondary to the center workspace." }),
+      header: /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Context shifts by route while the shell stays stable." }),
+      title: "Context",
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(
+          ChatDockSection,
+          {
+            contextLabel: "Today \xB7 overview",
+            messages: [
+              {
+                body: "Three failed runs came in overnight. Start with the invoice retry and the security digest.",
+                id: "assistant",
+                speaker: "Assistant"
+              },
+              {
+                body: "Queue the approvals first, then review the stale automations after lunch.",
+                id: "operator",
+                speaker: "Operator"
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_hsl(var(--foreground)/0.06)] backdrop-blur-xl", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: "Selected context" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm font-medium text-foreground", children: "Inbox triage" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-6 text-muted-foreground", children: "Landing route keeps the assistant close to the operational queue instead of taking over the center canvas." })
+        ] })
+      ] })
+    }
+  ) });
+}
+function DemoBottomBar() {
+  return /* @__PURE__ */ jsx(GlassPanel, { children: /* @__PURE__ */ jsx(
+    BottomBar,
+    {
+      center: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground", children: "3 errors" }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground", children: "7 awaiting action" })
+      ] }),
+      leading: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Activity, { className: "size-4" }),
+        "System healthy enough to proceed"
+      ] }),
+      trailing: /* @__PURE__ */ jsx(Button, { size: "sm", type: "button", variant: "ghost", children: "Open inbox" })
+    }
+  ) });
+}
+function DemoCanvasObjects() {
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-[1200px] w-[1600px] overflow-hidden rounded-[28px] border border-border/12 bg-[radial-gradient(circle_at_top,hsl(var(--primary)/0.07),transparent_38%),linear-gradient(180deg,hsl(var(--background)/0.18),hsl(var(--background)/0.04))]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute left-[14%] top-[22%] w-72 rounded-[2rem] border border-border/18 bg-background/18 p-5 shadow-[0_22px_80px_hsl(var(--foreground)/0.05)] backdrop-blur-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-11 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Layers3, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary/50" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-5 space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded-full bg-foreground/10" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-20 rounded-[1.5rem] border border-border/18 bg-background/35" }),
+          /* @__PURE__ */ jsx("div", { className: "h-20 rounded-[1.5rem] border border-border/18 bg-background/28" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 rounded-[1.25rem] border border-border/18 bg-background/30" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute right-[15%] top-[18%] w-56 rounded-[1.75rem] border border-border/18 bg-background/14 p-4 shadow-[0_18px_60px_hsl(var(--foreground)/0.04)] backdrop-blur-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-2xl bg-background/60 text-foreground/70", children: /* @__PURE__ */ jsx(Activity, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-foreground/10" }),
+          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-foreground/10" }),
+          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary/45" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-20 rounded-full bg-foreground/10" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-11 rounded-[1rem] border border-border/18 bg-background/32" }),
+          /* @__PURE__ */ jsx("div", { className: "h-11 rounded-[1rem] border border-border/18 bg-background/24" }),
+          /* @__PURE__ */ jsx("div", { className: "h-11 rounded-[1rem] border border-border/18 bg-background/18" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[18%] left-[22%] w-64 rounded-[1.75rem] border border-border/18 bg-background/12 p-4 shadow-[0_18px_60px_hsl(var(--foreground)/0.04)] backdrop-blur-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-2xl bg-background/55 text-foreground/70", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-7 w-16 rounded-full border border-border/18 bg-background/38" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-3 gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-16 rounded-[1rem] border border-border/18 bg-background/26" }),
+        /* @__PURE__ */ jsx("div", { className: "h-16 rounded-[1rem] border border-border/18 bg-background/20" }),
+        /* @__PURE__ */ jsx("div", { className: "h-16 rounded-[1rem] border border-border/18 bg-background/14" })
+      ] })
+    ] })
+  ] });
+}
+function CanvasFoundationDemo() {
+  return /* @__PURE__ */ jsx(
+    CanvasShell,
+    {
+      bottomBar: /* @__PURE__ */ jsx(DemoBottomBar, {}),
+      className: "h-[100dvh] min-h-[720px]",
+      contentPadding: { bottom: 120, left: 112, right: 392, top: 112 },
+      leftBar: /* @__PURE__ */ jsx(DemoLeftBar, {}),
+      rightBar: /* @__PURE__ */ jsx(DemoRightBar, {}),
+      topBar: /* @__PURE__ */ jsx(DemoTopBar, {}),
+      children: /* @__PURE__ */ jsx(
+        CanvasView,
+        {
+          className: "h-full rounded-none border-0 bg-background/25",
+          defaultViewport: { x: 0, y: 0, zoom: 1 },
+          children: /* @__PURE__ */ jsx(DemoCanvasObjects, {})
+        }
+      )
+    }
+  );
+}
+export {
+  CanvasFoundationDemo
+};

package/dist/components/canvas-shell/canvas-shell.js

@@ -0,0 +1,261 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+function toInsetValue(value) {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+const FLOATING_BOTTOM_BAR_FOOTPRINT = "3.5rem";
+const FLOATING_LEFT_BAR_FOOTPRINT = "4.5rem";
+const FLOATING_RIGHT_BAR_FOOTPRINT = "18rem";
+const FLOATING_TOP_BAR_FOOTPRINT = "3.5rem";
+function getReservedInset(inset, footprint, override) {
+  return toInsetValue(override) ?? `calc(${inset} + ${footprint})`;
+}
+function getSafeAreaInsets({
+  chromeInset,
+  contentPadding,
+  hasBottomBar,
+  hasLeftBar,
+  hasRightBar,
+  hasTopBar
+}) {
+  const inset = toInsetValue(chromeInset) ?? "16px";
+  return {
+    bottom: hasBottomBar ? getReservedInset(
+      inset,
+      FLOATING_BOTTOM_BAR_FOOTPRINT,
+      contentPadding?.bottom
+    ) : toInsetValue(contentPadding?.bottom) ?? inset,
+    left: hasLeftBar ? getReservedInset(
+      inset,
+      FLOATING_LEFT_BAR_FOOTPRINT,
+      contentPadding?.left
+    ) : toInsetValue(contentPadding?.left) ?? inset,
+    right: hasRightBar ? getReservedInset(
+      inset,
+      FLOATING_RIGHT_BAR_FOOTPRINT,
+      contentPadding?.right
+    ) : toInsetValue(contentPadding?.right) ?? inset,
+    top: hasTopBar ? getReservedInset(inset, FLOATING_TOP_BAR_FOOTPRINT, contentPadding?.top) : toInsetValue(contentPadding?.top) ?? inset
+  };
+}
+function getSafeAreaStyle(insets) {
+  return {
+    "--canvas-shell-safe-bottom": insets.bottom,
+    "--canvas-shell-safe-left": insets.left,
+    "--canvas-shell-safe-right": insets.right,
+    "--canvas-shell-safe-top": insets.top
+  };
+}
+const hasChromeContent = Boolean;
+function CanvasShellChromeBefore({
+  inset,
+  leftBar,
+  topBar
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasChromeContent(topBar) ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 z-30",
+        style: { top: inset },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto mx-auto w-full max-w-[960px]",
+            style: { paddingLeft: inset, paddingRight: inset },
+            children: topBar
+          }
+        )
+      }
+    ) : null,
+    hasChromeContent(leftBar) ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute left-0 z-30 flex",
+        style: {
+          bottom: "var(--canvas-shell-safe-bottom)",
+          left: inset,
+          top: "var(--canvas-shell-safe-top)"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto flex", children: leftBar })
+      }
+    ) : null
+  ] });
+}
+function CanvasShellChromeAfter({
+  bottomBar,
+  inset,
+  rightBar
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasChromeContent(rightBar) ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute right-0 z-30 flex",
+        style: {
+          bottom: "var(--canvas-shell-safe-bottom)",
+          right: inset,
+          top: "var(--canvas-shell-safe-top)"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto flex", children: rightBar })
+      }
+    ) : null,
+    hasChromeContent(bottomBar) ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 z-30",
+        style: { bottom: inset },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto mx-auto w-full max-w-[960px]",
+            style: { paddingLeft: inset, paddingRight: inset },
+            children: bottomBar
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function renderLegacyCanvasShell({
+  bottomBar: _bottomBar,
+  bottomSlot,
+  children,
+  chromeInset: _chromeInset = 16,
+  className,
+  contentPadding: _contentPadding,
+  leftBar: _leftBar,
+  leftRail,
+  rightBar: _rightBar,
+  rightDock,
+  style,
+  topBar,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex min-h-[720px] w-full flex-col overflow-hidden rounded-md border border-border bg-background",
+        className
+      ),
+      ref,
+      style,
+      ...props,
+      children: [
+        topBar,
+        /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[auto_minmax(0,1fr)_auto] overflow-hidden bg-background", children: [
+          leftRail ?? /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx("div", { className: "relative min-h-0 min-w-0 overflow-hidden", children }),
+          rightDock ?? /* @__PURE__ */ jsx("div", {})
+        ] }),
+        bottomSlot ? /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-background px-4 py-2", children: bottomSlot }) : null
+      ]
+    }
+  );
+}
+function renderFloatingContent(children, contentStyle) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative z-0 h-full w-full min-h-0 min-w-0",
+      "data-slot": "canvas-shell-content",
+      style: contentStyle,
+      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-0 min-w-0 overflow-hidden", children })
+    }
+  );
+}
+function renderFloatingCanvasShell({
+  bottomBar,
+  bottomSlot,
+  children,
+  chromeInset = 16,
+  className,
+  contentPadding,
+  leftBar,
+  leftRail,
+  rightBar,
+  rightDock,
+  style,
+  topBar,
+  ...props
+}, ref) {
+  const inset = toInsetValue(chromeInset) ?? "16px";
+  const resolvedBottomBar = bottomBar ?? bottomSlot;
+  const resolvedLeftBar = leftBar ?? leftRail;
+  const resolvedRightBar = rightBar ?? rightDock;
+  const hasTopBar = hasChromeContent(topBar);
+  const hasLeftBar = hasChromeContent(resolvedLeftBar);
+  const hasRightBar = hasChromeContent(resolvedRightBar);
+  const hasBottomBar = hasChromeContent(resolvedBottomBar);
+  const safeAreaInsets = getSafeAreaInsets({
+    chromeInset,
+    contentPadding,
+    hasBottomBar,
+    hasLeftBar,
+    hasRightBar,
+    hasTopBar
+  });
+  const mergedStyle = {
+    ...getSafeAreaStyle(safeAreaInsets),
+    ...style
+  };
+  const contentStyle = {
+    paddingBottom: "var(--canvas-shell-safe-bottom)",
+    paddingLeft: "var(--canvas-shell-safe-left)",
+    paddingRight: "var(--canvas-shell-safe-right)",
+    paddingTop: "var(--canvas-shell-safe-top)"
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "relative isolate flex min-h-[720px] w-full overflow-hidden bg-[radial-gradient(circle_at_top,hsl(var(--background)/0.94),hsl(var(--muted)/0.6))]",
+        className
+      ),
+      ref,
+      style: mergedStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[linear-gradient(180deg,hsl(var(--background)/0.94),hsl(var(--background)/0.8))]" }),
+        /* @__PURE__ */ jsx(
+          CanvasShellChromeBefore,
+          {
+            inset,
+            leftBar: hasLeftBar ? resolvedLeftBar : void 0,
+            topBar: hasTopBar ? topBar : void 0
+          }
+        ),
+        renderFloatingContent(children, contentStyle),
+        /* @__PURE__ */ jsx(
+          CanvasShellChromeAfter,
+          {
+            bottomBar: hasBottomBar ? resolvedBottomBar : void 0,
+            inset,
+            rightBar: hasRightBar ? resolvedRightBar : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+const CanvasShell = forwardRef((props, ref) => {
+  const { bottomBar, chromeInset, contentPadding, leftBar, rightBar } = props;
+  const hasExplicitChromeInset = Object.prototype.hasOwnProperty.call(
+    props,
+    "chromeInset"
+  );
+  const usesFloatingChrome = hasChromeContent(bottomBar) || hasChromeContent(leftBar) || hasChromeContent(rightBar) || contentPadding !== void 0 || hasExplicitChromeInset && chromeInset !== void 0;
+  if (!usesFloatingChrome) {
+    return renderLegacyCanvasShell(props, ref);
+  }
+  return renderFloatingCanvasShell(props, ref);
+});
+CanvasShell.displayName = "CanvasShell";
+export {
+  CanvasShell
+};

package/dist/components/canvas-shell/index.js

@@ -0,0 +1,4 @@
+import { CanvasShell } from "./canvas-shell";
+export {
+  CanvasShell
+};