@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

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

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

package/dist/components/breadcrumb/breadcrumb.js

@@ -20,39 +20,46 @@ function Breadcrumb({
     {
       "aria-label": "Breadcrumb",
       className: cn("flex items-center space-x-1 text-sm", className),
-      children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
-        item.href ? /* @__PURE__ */ jsxs(
-          Link,
-          {
-            className: "flex items-center gap-1 hover:text-foreground transition-colors",
-            href: item.href,
-            children: [
+      children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center",
+          children: [
+            index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
+            item.href ? /* @__PURE__ */ jsxs(
+              Link,
+              {
+                className: "flex items-center gap-1 hover:text-foreground transition-colors",
+                href: item.href,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        // Truncate plain string labels; custom React elements handle their own overflow
+                        typeof item.label === "string" && "truncate",
+                        variant === "minimal" ? "text-muted-foreground" : "text-foreground"
+                      ),
+                      children: item.label
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
               item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: cn(
-                    // Truncate plain string labels; custom React elements handle their own overflow
-                    typeof item.label === "string" && "truncate",
-                    variant === "minimal" ? "text-muted-foreground" : "text-foreground"
-                  ),
+                  className: cn(typeof item.label === "string" && "truncate"),
                   children: item.label
                 }
               )
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-          item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(typeof item.label === "string" && "truncate"),
-              children: item.label
-            }
-          )
-        ] })
-      ] }, index))
+            ] })
+          ]
+        },
+        typeof item.label === "string" ? item.label : `breadcrumb-${index}`
+      ))
     }
   );
 }

package/dist/components/button/button.js

@@ -13,7 +13,7 @@ const buttonVariants = cva(
     variants: {
       size: {
         default: "h-10 px-4 py-2",
-        icon: "h-10 w-10",
+        icon: "size-10",
         lg: "h-11 rounded-md px-8",
         sm: "h-9 rounded-md px-3"
       },

package/dist/components/calendar/calendar.js

@@ -5,10 +5,10 @@ import { DayPicker } from "react-day-picker";
 import { cn } from "../../lib/utils";
 import { buttonVariants } from "../button/button";
 function IconLeft() {
-  return /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" });
 }
 function IconRight() {
-  return /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" });
 }
 function ChevronComponent({
   orientation = "right"
@@ -28,17 +28,17 @@ function Calendar({
       classNames: {
         button_next: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
         ),
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
         ),
         caption_label: "text-sm font-medium",
-        day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: "size-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "size-9 p-0 font-normal aria-selected:opacity-100"
         ),
         disabled: "text-muted-foreground opacity-50",
         hidden: "invisible",

package/dist/components/callout/callout.js

@@ -45,7 +45,7 @@ function Callout({
       ),
       role: "alert",
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 flex-shrink-0 mt-0.5", children: icon }) : null,
+        icon ? /* @__PURE__ */ jsx("span", { className: "size-5 flex-shrink-0 mt-0.5", children: icon }) : null,
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           displayTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", children: displayTitle }) : null,
           /* @__PURE__ */ jsx("div", { className: "text-sm [&>p]:mb-0 [&>p:last-child]:mb-0", children })

package/dist/components/candlestick-chart/candlestick-chart.js

@@ -149,7 +149,7 @@ function SessionPill({ sessionChange }) {
         isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
       ),
       children: [
-        /* @__PURE__ */ jsx(TrendIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(TrendIcon, { className: "size-4" }),
         sessionChange >= 0 ? "+" : "",
         formatValue(sessionChange)
       ]

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: "size-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: "size-2 rounded-full bg-foreground/10" }),
+          /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-foreground/10" }),
+          /* @__PURE__ */ jsx("div", { className: "size-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
+};