@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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
+};

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

@@ -0,0 +1,264 @@
+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 CanvasShellContent({
+  content,
+  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: content })
+    }
+  );
+}
+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,oklch(var(--background)/0.94),oklch(var(--muted)/0.6))]",
+        className
+      ),
+      ref,
+      style: mergedStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[linear-gradient(180deg,oklch(var(--background)/0.94),oklch(var(--background)/0.8))]" }),
+        /* @__PURE__ */ jsx(
+          CanvasShellChromeBefore,
+          {
+            inset,
+            leftBar: hasLeftBar ? resolvedLeftBar : void 0,
+            topBar: hasTopBar ? topBar : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(CanvasShellContent, { content: 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
+};