@undevy-org/tablewright 0.1.0

package/dist/es/components/data-table/cells/AmountCell.js

@@ -0,0 +1,127 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { AlertTriangle } from "lucide-react";
+import { CopyableText } from "../CopyableText.js";
+const fmtIn = (v) => v.toLocaleString("en-US");
+const fmtOut = (v) => v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+function AmountCell({
+  inAmount,
+  inCurrency,
+  outAmount,
+  outCurrency,
+  inAmountConfirmed,
+  outAmountConfirmed,
+  mutedCurrency
+}) {
+  const inMismatch = inAmountConfirmed !== void 0 && inAmountConfirmed > 0 && inAmountConfirmed !== inAmount;
+  const outMismatch = outAmountConfirmed !== void 0 && outAmountConfirmed > 0 && outAmountConfirmed !== outAmount;
+  const inCurrencyEl = mutedCurrency ? /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)] font-normal", children: inCurrency }) : inCurrency;
+  const outCurrencyEl = mutedCurrency ? /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)] font-normal", children: outCurrency }) : outCurrency;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    inMismatch && inAmountConfirmed !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        CopyableText,
+        {
+          value: String(inAmountConfirmed),
+          title: "Copy in amount confirmed",
+          className: "w-full",
+          textClassName: "text-[13px] font-semibold text-[var(--text-primary)]",
+          children: [
+            /* @__PURE__ */ jsx(
+              AlertTriangle,
+              {
+                className: "inline h-3 w-3 mr-0.5 text-[var(--tag-orange-text)]",
+                "aria-hidden": true
+              }
+            ),
+            fmtIn(inAmountConfirmed),
+            " ",
+            inCurrencyEl
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        CopyableText,
+        {
+          value: String(inAmount),
+          title: "Copy in amount",
+          className: "w-full",
+          textClassName: "text-[12px] font-mono text-[var(--text-secondary)] line-through",
+          children: [
+            fmtIn(inAmount),
+            " ",
+            inCurrencyEl
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(
+      CopyableText,
+      {
+        value: String(inAmount),
+        title: "Copy in amount",
+        className: "w-full",
+        textClassName: "text-[13px] font-semibold text-[var(--text-primary)]",
+        children: [
+          fmtIn(inAmount),
+          " ",
+          inCurrencyEl
+        ]
+      }
+    ),
+    outMismatch && outAmountConfirmed !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        CopyableText,
+        {
+          value: String(outAmountConfirmed),
+          title: "Copy out amount confirmed",
+          className: "w-full",
+          textClassName: "text-[12px] font-mono text-[var(--text-primary)]",
+          children: [
+            /* @__PURE__ */ jsx(
+              AlertTriangle,
+              {
+                className: "inline h-3 w-3 mr-0.5 text-[var(--tag-orange-text)]",
+                "aria-hidden": true
+              }
+            ),
+            "→ ",
+            fmtOut(outAmountConfirmed),
+            " ",
+            outCurrencyEl
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        CopyableText,
+        {
+          value: String(outAmount),
+          title: "Copy out amount",
+          className: "w-full",
+          textClassName: "text-[12px] font-mono text-[var(--text-secondary)] line-through",
+          children: [
+            "→ ",
+            fmtOut(outAmount),
+            " ",
+            outCurrencyEl
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(
+      CopyableText,
+      {
+        value: String(outAmount),
+        title: "Copy out amount",
+        className: "w-full",
+        textClassName: "text-[12px] font-mono text-[var(--text-secondary)]",
+        children: [
+          "→ ",
+          fmtOut(outAmount),
+          " ",
+          outCurrencyEl
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AmountCell
+};

package/dist/es/components/data-table/cells/ConfirmedAmountCell.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CircleDashed, Check, AlertTriangle } from "lucide-react";
+import { CopyableText } from "../CopyableText.js";
+const fmt = (v) => v.toLocaleString("en-US");
+function ConfirmedAmountCell({
+  value,
+  currency,
+  confirmedValue,
+  copyTitle = "Copy",
+  confirmedCopyTitle = "Copy confirmed",
+  mutedCurrency
+}) {
+  const primaryCurrency = mutedCurrency ? /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)] font-normal", children: currency }) : currency;
+  const secondaryCurrency = mutedCurrency ? /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)] font-normal", children: currency }) : currency;
+  if (confirmedValue === void 0 || confirmedValue === null) {
+    return /* @__PURE__ */ jsxs(
+      CopyableText,
+      {
+        value: String(value),
+        title: copyTitle,
+        className: "w-full",
+        textClassName: "text-[13px] font-semibold text-[var(--text-primary)]",
+        children: [
+          fmt(value),
+          " ",
+          primaryCurrency
+        ]
+      }
+    );
+  }
+  if (confirmedValue === 0 && value > 0) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        CopyableText,
+        {
+          value: String(value),
+          title: copyTitle,
+          className: "w-full",
+          textClassName: "text-[13px] font-semibold text-[var(--text-primary)]",
+          children: [
+            fmt(value),
+            " ",
+            primaryCurrency
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-[11px] text-[var(--text-secondary)]",
+          title: "Not confirmed",
+          "aria-label": "Not confirmed",
+          children: /* @__PURE__ */ jsx(CircleDashed, { className: "inline h-3 w-3", "aria-hidden": true })
+        }
+      )
+    ] });
+  }
+  if (confirmedValue === value) {
+    return /* @__PURE__ */ jsxs(
+      CopyableText,
+      {
+        value: String(value),
+        title: copyTitle,
+        className: "w-full",
+        textClassName: "text-[13px] font-semibold text-[var(--text-primary)]",
+        children: [
+          /* @__PURE__ */ jsx(Check, { className: "inline h-3 w-3 mr-0.5 text-[var(--text-tertiary)]", "aria-hidden": true }),
+          fmt(value),
+          " ",
+          primaryCurrency
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      CopyableText,
+      {
+        value: String(confirmedValue),
+        title: confirmedCopyTitle,
+        className: "w-full",
+        textClassName: "text-[13px] font-semibold text-[var(--text-primary)]",
+        children: [
+          /* @__PURE__ */ jsx(
+            AlertTriangle,
+            {
+              className: "inline h-3 w-3 mr-0.5 text-[var(--tag-orange-text)]",
+              "aria-hidden": true
+            }
+          ),
+          fmt(confirmedValue),
+          " ",
+          primaryCurrency
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      CopyableText,
+      {
+        value: String(value),
+        title: copyTitle,
+        className: "w-full",
+        textClassName: "text-[12px] font-mono text-[var(--text-secondary)] line-through",
+        children: [
+          fmt(value),
+          " ",
+          secondaryCurrency
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ConfirmedAmountCell
+};

package/dist/es/components/data-table/cells/CurrencyAmountCell.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CopyableText } from "../CopyableText.js";
+function CurrencyAmountCell({
+  value,
+  currency,
+  copyTitle = "Copy",
+  mutedCurrency
+}) {
+  return /* @__PURE__ */ jsxs(
+    CopyableText,
+    {
+      value: String(value),
+      title: copyTitle,
+      className: "w-full",
+      textClassName: "text-[13px] font-semibold text-[var(--text-primary)]",
+      children: [
+        value.toLocaleString("en-US"),
+        " ",
+        mutedCurrency ? /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)] font-normal", children: currency }) : currency
+      ]
+    }
+  );
+}
+export {
+  CurrencyAmountCell
+};

package/dist/es/components/data-table/cells/DualLineCell.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { CopyableText } from "../CopyableText.js";
+import { truncateMiddle } from "./MonoIdCell.js";
+function applyMiddleTruncate(value, config) {
+  if (!config) return value;
+  const head = typeof config === "object" ? config.head ?? 6 : 6;
+  const tail = typeof config === "object" ? config.tail ?? 6 : 6;
+  return truncateMiddle(value, head, tail, head + tail + 2);
+}
+function DualLineCell({
+  primary,
+  secondary,
+  primaryCopyTitle = "Copy",
+  secondaryCopyTitle = "Copy",
+  primaryVariant = "default",
+  primaryLabel,
+  secondaryLabel,
+  equalWeight = false,
+  primaryTruncateMiddle,
+  secondaryTruncateMiddle
+}) {
+  const primaryTextClass = primaryVariant === "mono" ? "font-mono text-[11px]" : "font-semibold text-[var(--text-primary)]";
+  const secondaryColour = equalWeight ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]";
+  const primaryDisplay = primaryVariant === "mono" ? applyMiddleTruncate(primary, primaryTruncateMiddle) : primary;
+  const secondaryDisplay = applyMiddleTruncate(secondary, secondaryTruncateMiddle);
+  const primaryContent = primaryLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "mr-1 text-[10px] text-[var(--text-secondary)]", children: primaryLabel }),
+    /* @__PURE__ */ jsx("span", { title: primary, children: primaryDisplay })
+  ] }) : /* @__PURE__ */ jsx("span", { title: primary, children: primaryDisplay });
+  const secondaryContent = secondaryLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "mr-1 text-[10px] text-[var(--text-secondary)]", children: secondaryLabel }),
+    /* @__PURE__ */ jsx("span", { title: secondary, children: secondaryDisplay })
+  ] }) : /* @__PURE__ */ jsx("span", { title: secondary, children: secondaryDisplay });
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+    /* @__PURE__ */ jsx(
+      CopyableText,
+      {
+        value: primary,
+        title: primaryCopyTitle,
+        className: "w-full",
+        textClassName: primaryTextClass,
+        children: primaryContent
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CopyableText,
+      {
+        value: secondary,
+        title: secondaryCopyTitle,
+        className: "w-full",
+        textClassName: `font-mono text-[11px] ${secondaryColour}`,
+        children: secondaryContent
+      }
+    )
+  ] });
+}
+export {
+  DualLineCell
+};

package/dist/es/components/data-table/cells/EnumBadgeCell.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Badge } from "../../ui/badge.js";
+import { formatEnumLabel } from "../../../lib/format-enum.js";
+function EnumBadgeCell({ value, variantMap, label, className }) {
+  return /* @__PURE__ */ jsx(Badge, { variant: variantMap[value], className, children: label ?? formatEnumLabel(value) });
+}
+export {
+  EnumBadgeCell
+};

package/dist/es/components/data-table/cells/MonoIdCell.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { CopyableText } from "../CopyableText.js";
+function truncateMiddle(value, head, tail, threshold) {
+  if (value.length < threshold) return value;
+  return `${value.slice(0, head)}…${value.slice(-tail)}`;
+}
+function MonoIdCell({
+  value,
+  copyTitle = "Copy",
+  truncate = true,
+  truncateHead = 6,
+  truncateTail = 6,
+  truncateThreshold
+}) {
+  const threshold = truncateThreshold ?? truncateHead + truncateTail + 2;
+  const display = truncate ? truncateMiddle(value, truncateHead, truncateTail, threshold) : value;
+  return /* @__PURE__ */ jsx(
+    CopyableText,
+    {
+      value,
+      title: copyTitle,
+      className: "w-full",
+      textClassName: "font-mono text-[11px]",
+      children: /* @__PURE__ */ jsx("span", { title: value, children: display })
+    }
+  );
+}
+export {
+  MonoIdCell,
+  truncateMiddle
+};

package/dist/es/components/data-table/hooks/use-column-resize.js

@@ -0,0 +1,39 @@
+import { useState, useRef, useCallback, useMemo } from "react";
+function useColumnResize(defaults, initialWidths) {
+  const [widths, setWidths] = useState(() => {
+    const w = {};
+    for (const [id, m] of Object.entries(defaults)) w[id] = m.minW;
+    return initialWidths ? { ...w, ...initialWidths } : w;
+  });
+  const resizing = useRef(null);
+  const onPointerDown = useCallback(
+    (colId, e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      resizing.current = { colId, startX: e.clientX, startW: widths[colId] ?? defaults[colId]?.minW ?? 100 };
+      const onMove = (ev) => {
+        if (!resizing.current) return;
+        const { colId: resizingColId, startX, startW } = resizing.current;
+        const diff = ev.clientX - startX;
+        const newW = Math.max(36, startW + diff);
+        setWidths((prev) => ({ ...prev, [resizingColId]: newW }));
+      };
+      const onUp = () => {
+        resizing.current = null;
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    [widths, defaults]
+  );
+  const totalWidth = useMemo(
+    () => Object.values(widths).reduce((s, w) => s + w, 0),
+    [widths]
+  );
+  return { widths, totalWidth, onPointerDown, setWidths };
+}
+export {
+  useColumnResize
+};

package/dist/es/components/data-table/hooks/use-row-drag.js

@@ -0,0 +1,40 @@
+import { useState } from "react";
+function useRowDrag(source, onReorder) {
+  const [dragRowIdx, setDragRowIdx] = useState(null);
+  const [dropTargetIdx, setDropTargetIdx] = useState(null);
+  function getDragProps(rowIndex) {
+    return {
+      draggable: true,
+      onDragStart: (e) => {
+        setDragRowIdx(rowIndex);
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", "");
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setDropTargetIdx(rowIndex);
+      },
+      onDragLeave: () => setDropTargetIdx(null),
+      onDrop: (e) => {
+        e.preventDefault();
+        if (dragRowIdx !== null && dragRowIdx !== rowIndex) {
+          const items = [...source];
+          const [moved] = items.splice(dragRowIdx, 1);
+          items.splice(rowIndex, 0, moved);
+          onReorder(items);
+        }
+        setDragRowIdx(null);
+        setDropTargetIdx(null);
+      },
+      onDragEnd: () => {
+        setDragRowIdx(null);
+        setDropTargetIdx(null);
+      }
+    };
+  }
+  return { dragRowIdx, dropTargetIdx, getDragProps };
+}
+export {
+  useRowDrag
+};

package/dist/es/components/data-table/hooks/use-table-pagination.js

@@ -0,0 +1,14 @@
+import "react";
+function getVisiblePageNumbers(currentPage, totalPages, maxVisible = 5) {
+  const pages = [];
+  let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+  const end = Math.min(totalPages, start + maxVisible - 1);
+  start = Math.max(1, end - maxVisible + 1);
+  for (let i = start; i <= end; i += 1) {
+    pages.push(i);
+  }
+  return pages;
+}
+export {
+  getVisiblePageNumbers
+};

package/dist/es/components/data-table/hooks/use-table-sort.js

@@ -0,0 +1,35 @@
+import { useState, useCallback } from "react";
+function useTableSort(onSortChange) {
+  const [sortState, setSortState] = useState({});
+  const toggleSort = useCallback((columnId) => {
+    setSortState((prev) => {
+      const current = prev[columnId] ?? false;
+      const next = current === false ? "asc" : current === "asc" ? "desc" : false;
+      const reset = {};
+      for (const k of Object.keys(prev)) reset[k] = false;
+      reset[columnId] = next;
+      return reset;
+    });
+    onSortChange?.();
+  }, [onSortChange]);
+  const applySorting = useCallback(
+    (items, getSortValue) => {
+      const activeSortCol = Object.entries(sortState).find(([, dir2]) => dir2 !== false);
+      if (!activeSortCol) return items;
+      const [col, dir] = activeSortCol;
+      const sorted = [...items];
+      sorted.sort((a, b) => {
+        const va = getSortValue(a, col);
+        const vb = getSortValue(b, col);
+        const cmp = va < vb ? -1 : va > vb ? 1 : 0;
+        return dir === "asc" ? cmp : -cmp;
+      });
+      return sorted;
+    },
+    [sortState]
+  );
+  return { sortState, toggleSort, applySorting };
+}
+export {
+  useTableSort
+};

package/dist/es/components/data-table/managed-filters.js

@@ -0,0 +1,34 @@
+function applyManagedChanges(orch, changes) {
+  const activeIds = new Set(orch.columnFilters.map((f) => f.columnId));
+  for (const change of changes) {
+    if (change.action === "remove") {
+      if (activeIds.has(change.columnId)) orch.handleRemoveColumnFilter(change.columnId);
+      continue;
+    }
+    orch.handleSetColumnFilter(change.columnId, change.value);
+  }
+}
+function clearManagedFilters(orch, managedColumnIds) {
+  const activeIds = new Set(orch.columnFilters.map((f) => f.columnId));
+  for (const id of managedColumnIds) {
+    if (activeIds.has(id)) orch.handleRemoveColumnFilter(id);
+  }
+}
+function isFilterValueEmpty(v) {
+  if (v === void 0) return true;
+  if (Array.isArray(v)) return v.length === 0 || v.every((x) => x === "" || x == null);
+  if (typeof v === "string") return v.length === 0;
+  if (typeof v === "object" && v !== null) {
+    return Object.values(v).every((x) => isFilterValueEmpty(x));
+  }
+  return false;
+}
+function hasActiveManagedFilters(filters, managedFieldIds) {
+  const managed = new Set(managedFieldIds);
+  return filters.some((f) => managed.has(f.columnId) && !isFilterValueEmpty(f.value));
+}
+export {
+  applyManagedChanges,
+  clearManagedFilters,
+  hasActiveManagedFilters
+};

package/dist/es/components/data-table/sticky-utils.js

@@ -0,0 +1,25 @@
+function stickyStyle(meta, isHeader) {
+  if (isHeader) {
+    return {
+      position: "sticky",
+      top: 0,
+      zIndex: meta?.sticky ? 30 : 10,
+      ...meta?.sticky ? { [meta.sticky]: meta.stickyOffset ?? 0 } : {}
+    };
+  }
+  if (!meta?.sticky) return void 0;
+  return {
+    position: "sticky",
+    [meta.sticky]: meta.stickyOffset ?? 0,
+    zIndex: 20
+  };
+}
+function stickyBorderClass(meta) {
+  const edge = meta?.borderEdge !== void 0 ? meta.borderEdge : meta?.sticky === "left" ? "right" : meta?.sticky === "right" ? "left" : null;
+  if (!edge) return "";
+  return edge === "right" ? "[box-shadow:1px_0_0_0_var(--border-subtle)]" : "[box-shadow:-1px_0_0_0_var(--border-subtle)]";
+}
+export {
+  stickyBorderClass,
+  stickyStyle
+};

package/dist/es/components/layout/AppShell.js

@@ -0,0 +1,113 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { AppShellContext } from "./app-shell-context.js";
+import { Sidebar } from "./Sidebar.js";
+import { TopBar } from "./TopBar.js";
+const HOVER_DELAY = 200;
+function AppShellRoot({
+  collapsed: controlledCollapsed,
+  defaultCollapsed = false,
+  onCollapsedChange: onCollapsedChangeProp,
+  children,
+  className
+}) {
+  const isControlled = controlledCollapsed !== void 0;
+  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+  const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+  const [hovering, setHovering] = React.useState(false);
+  const hoverTimerRef = React.useRef(
+    null
+  );
+  const onCollapsedChange = React.useCallback(
+    (next) => {
+      if (!isControlled) setInternalCollapsed(next);
+      onCollapsedChangeProp?.(next);
+    },
+    [isControlled, onCollapsedChangeProp]
+  );
+  React.useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "b" && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
+        const tag = e.target?.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (e.target?.isContentEditable) return;
+        e.preventDefault();
+        onCollapsedChange(!collapsed);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [collapsed, onCollapsedChange]);
+  const handleMouseEnter = React.useCallback(() => {
+    if (!collapsed) return;
+    hoverTimerRef.current = setTimeout(() => setHovering(true), HOVER_DELAY);
+  }, [collapsed]);
+  const handleMouseLeave = React.useCallback(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    setHovering(false);
+  }, []);
+  React.useEffect(() => {
+    if (!collapsed) setHovering(false);
+  }, [collapsed]);
+  const ctx = React.useMemo(
+    () => ({
+      collapsed,
+      hovering,
+      effectiveCollapsed: collapsed && !hovering,
+      onCollapsedChange
+    }),
+    [collapsed, hovering, onCollapsedChange]
+  );
+  return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex h-full overflow-hidden bg-[var(--bg-body)]", className),
+      onMouseLeave: handleMouseLeave,
+      children: React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child;
+        if (child.type === AppShellSidebar) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave,
+              className: "relative shrink-0",
+              style: {
+                width: collapsed ? "var(--size-sidebar-collapsed)" : "var(--size-sidebar-expanded)",
+                transitionProperty: "width",
+                transitionDuration: "var(--duration-sidebar)",
+                transitionTimingFunction: "ease-in-out"
+              },
+              children: child
+            }
+          );
+        }
+        return child;
+      })
+    }
+  ) });
+}
+function AppShellSidebar(props) {
+  return /* @__PURE__ */ jsx(Sidebar, { ...props });
+}
+function AppShellHeader(props) {
+  return /* @__PURE__ */ jsx(TopBar, { ...props });
+}
+function AppShellContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-hidden", className), children });
+}
+const AppShell = Object.assign(AppShellRoot, {
+  Sidebar: AppShellSidebar,
+  Header: AppShellHeader,
+  Content: AppShellContent
+});
+export {
+  AppShell
+};