@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

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