@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/bottom-activity-strip/bottom-activity-strip.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  empty: "No recent activity",
+  region: "Recent activity"
+};
+const ChipBody = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("size-1.5 rounded-full", TONE_DOT[tone])
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", "data-strip-event-ts": true, children: event.ts })
+  ] });
+};
+const Chip = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  if (event.onActivate) {
+    const handleActivateEvent = () => {
+      event.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-strip-event": event.id,
+        "data-strip-event-tone": tone,
+        onClick: handleActivateEvent,
+        type: "button",
+        children: /* @__PURE__ */ jsx(ChipBody, { event })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px]",
+      "data-strip-event": event.id,
+      "data-strip-event-tone": tone,
+      children: /* @__PURE__ */ jsx(ChipBody, { event })
+    }
+  );
+};
+const BottomActivityStrip = forwardRef((props, ref) => {
+  const { className, events, labels, maxEvents, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = maxEvents === void 0 || maxEvents >= events.length ? events : events.slice(0, maxEvents);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full items-center gap-2 overflow-x-auto rounded-md border border-border bg-background/90 px-2 py-1 text-foreground",
+        className
+      ),
+      "data-bottom-activity-strip": true,
+      ref,
+      ...rest,
+      children: visible.length === 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "px-2 text-[11px] text-muted-foreground",
+          "data-strip-state": "empty",
+          children: resolvedLabels.empty
+        }
+      ) : visible.map((event) => /* @__PURE__ */ jsx(Chip, { event }, event.id))
+    }
+  );
+});
+BottomActivityStrip.displayName = "BottomActivityStrip";
+export {
+  BottomActivityStrip
+};

package/dist/components/bottom-activity-strip/index.js

@@ -0,0 +1,6 @@
+import {
+  BottomActivityStrip
+} from "./bottom-activity-strip";
+export {
+  BottomActivityStrip
+};

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

@@ -59,7 +59,7 @@ function PriceGrid({
     /* @__PURE__ */ jsx(
       "line",
       {
-        stroke: "hsl(var(--border))",
+        stroke: "oklch(var(--border))",
         strokeDasharray: "4 6",
         strokeOpacity: "0.8",
         x1: "0",
@@ -71,7 +71,7 @@ function PriceGrid({
     /* @__PURE__ */ jsx(
       "text",
       {
-        fill: "hsl(var(--muted-foreground))",
+        fill: "oklch(var(--muted-foreground))",
         fontSize: "11",
         textAnchor: "end",
         x: width - 6,
@@ -79,7 +79,7 @@ function PriceGrid({
         children: formatValue(tick.value)
       }
     )
-  ] }, tick.value));
+  ] }, tick.y));
 }
 function CandleMarks({
   data,
@@ -95,12 +95,12 @@ function CandleMarks({
     const bodyY = Math.min(openY, closeY);
     const bodyHeight = Math.max(Math.abs(openY - closeY), 3);
     const isBullish = candle.close >= candle.open;
-    const fill = isBullish ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
-    return /* @__PURE__ */ jsxs("g", { children: [
+    const colorClass = isBullish ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400";
+    return /* @__PURE__ */ jsxs("g", { className: colorClass, children: [
       /* @__PURE__ */ jsx(
         "line",
         {
-          stroke: fill,
+          stroke: "currentColor",
           strokeLinecap: "round",
           strokeWidth: 2,
           x1: centerX,
@@ -112,11 +112,11 @@ function CandleMarks({
       /* @__PURE__ */ jsx(
         "rect",
         {
-          fill,
+          fill: "currentColor",
           fillOpacity: isBullish ? 0.25 : 0.18,
           height: bodyHeight,
           rx: 4,
-          stroke: fill,
+          stroke: "currentColor",
           strokeWidth: 1.5,
           width: metrics.bodyWidth,
           x: centerX - metrics.bodyWidth / 2,
@@ -127,7 +127,7 @@ function CandleMarks({
       /* @__PURE__ */ jsx(
         "text",
         {
-          fill: "hsl(var(--muted-foreground))",
+          fill: "oklch(var(--muted-foreground))",
           fontSize: "11",
           textAnchor: "middle",
           x: centerX,
@@ -135,7 +135,7 @@ function CandleMarks({
           children: candle.label
         }
       )
-    ] }, candle.label);
+    ] }, `${candle.label}-${index.toString()}`);
   });
 }
 function SessionPill({ sessionChange }) {
@@ -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)
       ]
@@ -158,6 +158,7 @@ function SessionPill({ sessionChange }) {
 }
 const CandlestickChart = React.forwardRef(
   ({
+    as: Heading = "h3",
     className,
     data,
     height = DEFAULT_HEIGHT,
@@ -185,7 +186,7 @@ const CandlestickChart = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start justify-between gap-3", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: "OHLC session" }),
-              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
+              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
             ] }),
             /* @__PURE__ */ jsx(SessionPill, { 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/bottom-bar";
+import { Button } from "../button/button";
+import { CanvasView } from "../canvas-view/canvas-view";
+import { ChatDockSection } from "../chat-dock-section/chat-dock-section";
+import { GlassPanel } from "../glass-panel/glass-panel";
+import { LeftRail } from "../left-rail/left-rail";
+import { RightDock } from "../right-dock/right-dock";
+import { TopBar } from "../top-bar/top-bar";
+import { WorkspaceSwitcher } from "../workspace-switcher/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_oklch(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,oklch(var(--primary)/0.07),transparent_38%),linear-gradient(180deg,oklch(var(--background)/0.18),oklch(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_oklch(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_oklch(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_oklch(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
+};