@omniviewdev/ui 0.1.0

package/dist/layout/AppShell.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface AppShellProps {
+    header?: ReactNode;
+    sidebar?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    sidebarWidth?: number | string;
+    sidebarCollapsed?: boolean;
+    headerHeight?: number | string;
+    footerHeight?: number | string;
+    sx?: SxProps<Theme>;
+}
+declare function AppShell({ header, sidebar, footer, children, sidebarWidth, sidebarCollapsed, headerHeight, footerHeight, sx, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppShell {
+    var displayName: string;
+}
+export default AppShell;

package/dist/layout/DockLayout.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface DockLeaf {
+    type: 'leaf';
+    id: string;
+    minSize?: number;
+}
+export interface DockSplit {
+    type: 'horizontal' | 'vertical';
+    children: DockNode[];
+    sizes?: number[];
+}
+export type DockNode = DockLeaf | DockSplit;
+export interface DockLayoutProps {
+    layout: DockNode;
+    renderPanel: (id: string) => React.ReactNode;
+    sx?: SxProps<Theme>;
+}
+declare function DockLayout({ layout, renderPanel, sx, }: DockLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DockLayout {
+    var displayName: string;
+}
+export default DockLayout;

package/dist/layout/Inline.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface InlineProps {
+    gap?: number;
+    align?: string;
+    justify?: string;
+    divider?: boolean;
+    children: ReactNode;
+    sx?: SxProps<Theme>;
+}
+declare function Inline({ gap, align, justify, divider, children, sx, }: InlineProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Inline {
+    var displayName: string;
+}
+export default Inline;

package/dist/layout/Panel.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface PanelProps {
+    title?: string;
+    icon?: ReactNode;
+    toolbar?: ReactNode;
+    children: ReactNode;
+    collapsible?: boolean;
+    onClose?: () => void;
+    elevation?: 'flat' | 'raised' | 'overlay';
+    sx?: SxProps<Theme>;
+}
+declare function Panel({ title, icon, toolbar, children, collapsible, onClose, elevation, sx, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Panel {
+    var displayName: string;
+}
+export default Panel;

package/dist/layout/ResizableSplitPane.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface ResizableSplitPaneProps {
+    direction?: 'horizontal' | 'vertical';
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    onResize?: (size: number) => void;
+    children: [ReactNode, ReactNode];
+    handleSize?: number;
+    id?: string;
+    sx?: SxProps<Theme>;
+}
+declare function ResizableSplitPane({ direction, defaultSize, minSize, maxSize, onResize, children, handleSize, id, sx, }: ResizableSplitPaneProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ResizableSplitPane {
+    var displayName: string;
+}
+export default ResizableSplitPane;

package/dist/layout/Spacer.d.ts

@@ -0,0 +1,9 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface SpacerProps {
+    sx?: SxProps<Theme>;
+}
+declare function Spacer({ sx }: SpacerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Spacer {
+    var displayName: string;
+}
+export default Spacer;

package/dist/layout/Stack.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { StackProps as MuiStackProps } from '@mui/material/Stack';
+export interface StackProps extends Omit<MuiStackProps, 'divider'> {
+    /** Alias for spacing */
+    gap?: number;
+    /** Alias for alignItems */
+    align?: string;
+    /** Alias for justifyContent */
+    justify?: string;
+    /** When true, renders dividers between children. Can also pass a ReactNode. */
+    divider?: boolean | ReactNode;
+    /** Shorthand: when true, flex-wrap is 'wrap' */
+    wrap?: boolean;
+}
+declare function Stack({ direction, gap, spacing, align, alignItems, justify, justifyContent, wrap, flexWrap, divider, children, sx, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Stack {
+    var displayName: string;
+}
+export default Stack;

package/dist/layout/index.d.ts

@@ -0,0 +1,16 @@
+export { default as useResizablePanel } from './useResizablePanel';
+export type { UseResizablePanelOptions, UseResizablePanelReturn } from './useResizablePanel';
+export { default as ResizableSplitPane } from './ResizableSplitPane';
+export type { ResizableSplitPaneProps } from './ResizableSplitPane';
+export { default as AppShell } from './AppShell';
+export type { AppShellProps } from './AppShell';
+export { default as Panel } from './Panel';
+export type { PanelProps } from './Panel';
+export { default as Stack } from './Stack';
+export type { StackProps } from './Stack';
+export { default as Inline } from './Inline';
+export type { InlineProps } from './Inline';
+export { default as Spacer } from './Spacer';
+export type { SpacerProps } from './Spacer';
+export { default as DockLayout } from './DockLayout';
+export type { DockLayoutProps, DockNode, DockLeaf, DockSplit } from './DockLayout';

package/dist/layout/useResizablePanel.d.ts

@@ -0,0 +1,18 @@
+export interface UseResizablePanelOptions {
+    direction: 'horizontal' | 'vertical';
+    defaultSize: number;
+    minSize?: number;
+    maxSize?: number;
+    onResize?: (size: number) => void;
+    storageKey?: string;
+}
+export interface UseResizablePanelReturn {
+    size: number;
+    isDragging: boolean;
+    handleProps: {
+        onMouseDown: React.MouseEventHandler;
+        onDoubleClick: React.MouseEventHandler;
+    };
+    reset: () => void;
+}
+export default function useResizablePanel({ direction, defaultSize, minSize, maxSize, onResize, storageKey, }: UseResizablePanelOptions): UseResizablePanelReturn;

package/dist/layout.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),r=require("react/jsx-runtime"),u=require("@mui/material/Box"),R=require("@mui/material/Typography"),C=require("@mui/material/IconButton"),W=require("@mui/material/Collapse"),w=require("react-icons/lu"),E=require("@mui/material/Stack"),P=require("@mui/material/Divider");function T(e,t){try{const n=localStorage.getItem(e);return n?Number(n):t}catch{return t}}function S(e,t){try{localStorage.setItem(e,String(t))}catch{}}function I({direction:e,defaultSize:t,minSize:n=0,maxSize:s=1/0,onResize:l,storageKey:o}){const[i,p]=v.useState(()=>o?T(o,t):t),[d,c]=v.useState(!1),a=v.useRef({pos:0,size:0}),h=v.useCallback(f=>Math.max(n,Math.min(s,f)),[n,s]),m=v.useCallback(f=>{f.preventDefault();const x=e==="horizontal"?f.clientX:f.clientY;a.current={pos:x,size:i},c(!0)},[e,i]);v.useEffect(()=>{if(!d)return;const f=b=>{const H=(e==="horizontal"?b.clientX:b.clientY)-a.current.pos,D=h(a.current.size+H);p(D),l?.(D)},x=()=>{c(!1),o&&S(o,i)};return document.addEventListener("mousemove",f),document.addEventListener("mouseup",x),()=>{document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",x)}},[d,e,h,l,o,i]);const y=v.useCallback(()=>{const x=h(i===n?t:n);p(x),l?.(x),o&&S(o,x)},[i,n,t,h,l,o]),j=v.useCallback(()=>{p(t),l?.(t),o&&S(o,t)},[t,l,o]);return{size:i,isDragging:d,handleProps:{onMouseDown:m,onDoubleClick:y},reset:j}}function k({direction:e="horizontal",defaultSize:t=300,minSize:n=100,maxSize:s,onResize:l,children:o,handleSize:i=4,id:p,sx:d}){const{size:c,isDragging:a,handleProps:h}=I({direction:e,defaultSize:t,minSize:n,maxSize:s,onResize:l,storageKey:p?`ov-split-${p}`:void 0}),m=e==="horizontal";return r.jsxs(u,{sx:{display:"flex",flexDirection:m?"row":"column",height:"100%",width:"100%",overflow:"hidden",userSelect:a?"none":void 0,...d},children:[r.jsx(u,{sx:{[m?"width":"height"]:c,flexShrink:0,overflow:"auto"},children:o[0]}),r.jsx(u,{...h,sx:{[m?"width":"height"]:i,flexShrink:0,cursor:m?"col-resize":"row-resize",bgcolor:a?"var(--ov-accent)":"transparent",transition:a?"none":"background-color 0.15s","&:hover":{bgcolor:"var(--ov-border-default)"}}}),r.jsx(u,{sx:{flex:1,overflow:"auto",minWidth:0,minHeight:0},children:o[1]})]})}k.displayName="ResizableSplitPane";function A({header:e,sidebar:t,footer:n,children:s,sidebarWidth:l=240,sidebarCollapsed:o=!1,headerHeight:i=48,footerHeight:p=32,sx:d}){const c=o?0:l,a=e?i:0,h=n?p:0;return r.jsxs(u,{sx:{display:"grid",gridTemplateAreas:`
+          "header header"
+          "sidebar main"
+          "footer footer"
+        `,gridTemplateColumns:t?`${typeof c=="number"?`${c}px`:c} 1fr`:"1fr",gridTemplateRows:`${typeof a=="number"?`${a}px`:a} 1fr ${typeof h=="number"?`${h}px`:h}`,height:"100vh",width:"100vw",overflow:"hidden","--ov-shell-sidebar-width":typeof c=="number"?`${c}px`:c,"--ov-shell-header-height":typeof a=="number"?`${a}px`:a,"--ov-shell-footer-height":typeof h=="number"?`${h}px`:h,...d},children:[e&&r.jsx(u,{sx:{gridArea:"header",overflow:"hidden"},children:e}),t&&r.jsx(u,{sx:{gridArea:"sidebar",overflow:"auto",transition:"width 0.2s ease"},children:t}),r.jsx(u,{sx:{gridArea:"main",overflow:"auto"},children:s}),n&&r.jsx(u,{sx:{gridArea:"footer",overflow:"hidden"},children:n})]})}A.displayName="AppShell";const B={flat:"none",raised:"0 1px 3px rgba(0,0,0,0.12)",overlay:"0 4px 12px rgba(0,0,0,0.2)"};function L({title:e,icon:t,toolbar:n,children:s,collapsible:l=!1,onClose:o,elevation:i="flat",sx:p}){const[d,c]=v.useState(!1);return r.jsxs(u,{sx:{display:"flex",flexDirection:"column",border:"1px solid var(--ov-border-default)",borderRadius:"6px",bgcolor:"var(--ov-bg-surface)",boxShadow:B[i],overflow:"hidden",...p},children:[(e||n||o)&&r.jsxs(u,{sx:{display:"flex",alignItems:"center",gap:1,px:1.5,py:.75,borderBottom:d?"none":"1px solid var(--ov-border-muted)",bgcolor:"var(--ov-bg-subtle)",minHeight:36},children:[l&&r.jsx(C,{size:"small",onClick:()=>c(a=>!a),sx:{p:.25},children:d?r.jsx(w.LuChevronRight,{size:14}):r.jsx(w.LuChevronDown,{size:14})}),t&&r.jsx(u,{sx:{display:"flex",color:"var(--ov-fg-muted)"},children:t}),e&&r.jsx(R,{variant:"body2",sx:{fontWeight:600,fontSize:"0.8125rem",color:"var(--ov-fg-base)",flex:1},children:e}),n&&r.jsx(u,{sx:{display:"flex",alignItems:"center",gap:.5},children:n}),o&&r.jsx(C,{size:"small",onClick:o,sx:{p:.25,ml:"auto"},children:r.jsx(w.LuX,{size:14})})]}),r.jsx(W,{in:!d,children:r.jsx(u,{sx:{flex:1,overflow:"auto"},children:s})})]})}L.displayName="Panel";function z({direction:e="column",gap:t,spacing:n,align:s,alignItems:l,justify:o,justifyContent:i,wrap:p,flexWrap:d,divider:c=!1,children:a,sx:h,...m}){const y=n??t??1,j=l??s,f=i??o,x=d??(p?"wrap":void 0),b=typeof c=="boolean"?c?r.jsx(P,{orientation:e==="row"?"vertical":"horizontal",flexItem:!0}):void 0:c;return r.jsx(E,{direction:e,spacing:y,alignItems:j,justifyContent:f,flexWrap:x,divider:b,sx:h,...m,children:a})}z.displayName="Stack";function $({gap:e=1,align:t="center",justify:n,divider:s=!1,children:l,sx:o}){return r.jsx(z,{direction:"row",gap:e,align:t,justify:n,wrap:!0,divider:s,sx:o,children:l})}$.displayName="Inline";function q({sx:e}){return r.jsx(u,{sx:{flex:1,...e}})}q.displayName="Spacer";function g(e,t){if(e.type==="leaf")return r.jsx(u,{sx:{flex:1,minWidth:0,minHeight:0,overflow:"auto"},children:t(e.id)});const n=e.type==="horizontal"?"horizontal":"vertical",s=e.children;return s.length===0?null:s.length===1?g(s[0],t):N(s,n,e.sizes,t)}function N(e,t,n,s){if(e.length===1)return g(e[0],s);const l=n?.[0]??50,o=e[0],i=e.slice(1),p=n?.slice(1),d=o.type==="leaf"?o.minSize??100:100;return r.jsxs(k,{direction:t,defaultSize:l,minSize:d,children:[g(o,s),i.length===1?g(i[0],s):N(i,t,p,s)]})}function M({layout:e,renderPanel:t,sx:n}){return r.jsx(u,{sx:{display:"flex",flex:1,minWidth:0,minHeight:0,overflow:"hidden",...typeof n=="object"&&!Array.isArray(n)?n:{}},children:g(e,t)})}M.displayName="DockLayout";exports.AppShell=A;exports.DockLayout=M;exports.Inline=$;exports.Panel=L;exports.ResizableSplitPane=k;exports.Spacer=q;exports.Stack=z;exports.useResizablePanel=I;

package/dist/layout.js

@@ -0,0 +1,378 @@
+import { useState as S, useRef as N, useCallback as b, useEffect as W } from "react";
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+import E from "@mui/material/Typography";
+import A from "@mui/material/IconButton";
+import H from "@mui/material/Collapse";
+import { LuChevronRight as M, LuChevronDown as T, LuX as j } from "react-icons/lu";
+import B from "@mui/material/Stack";
+import R from "@mui/material/Divider";
+function X(e, o) {
+  try {
+    const r = localStorage.getItem(e);
+    return r ? Number(r) : o;
+  } catch {
+    return o;
+  }
+}
+function w(e, o) {
+  try {
+    localStorage.setItem(e, String(o));
+  } catch {
+  }
+}
+function J({
+  direction: e,
+  defaultSize: o,
+  minSize: r = 0,
+  maxSize: i = 1 / 0,
+  onResize: s,
+  storageKey: t
+}) {
+  const [l, u] = S(
+    () => t ? X(t, o) : o
+  ), [p, c] = S(!1), a = N({ pos: 0, size: 0 }), f = b(
+    (h) => Math.max(r, Math.min(i, h)),
+    [r, i]
+  ), v = b(
+    (h) => {
+      h.preventDefault();
+      const m = e === "horizontal" ? h.clientX : h.clientY;
+      a.current = { pos: m, size: l }, c(!0);
+    },
+    [e, l]
+  );
+  W(() => {
+    if (!p) return;
+    const h = (y) => {
+      const L = (e === "horizontal" ? y.clientX : y.clientY) - a.current.pos, k = f(a.current.size + L);
+      u(k), s?.(k);
+    }, m = () => {
+      c(!1), t && w(t, l);
+    };
+    return document.addEventListener("mousemove", h), document.addEventListener("mouseup", m), () => {
+      document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", m);
+    };
+  }, [p, e, f, s, t, l]);
+  const D = b(() => {
+    const m = f(l === r ? o : r);
+    u(m), s?.(m), t && w(t, m);
+  }, [l, r, o, f, s, t]), z = b(() => {
+    u(o), s?.(o), t && w(t, o);
+  }, [o, s, t]);
+  return {
+    size: l,
+    isDragging: p,
+    handleProps: {
+      onMouseDown: v,
+      onDoubleClick: D
+    },
+    reset: z
+  };
+}
+function I({
+  direction: e = "horizontal",
+  defaultSize: o = 300,
+  minSize: r = 100,
+  maxSize: i,
+  onResize: s,
+  children: t,
+  handleSize: l = 4,
+  id: u,
+  sx: p
+}) {
+  const { size: c, isDragging: a, handleProps: f } = J({
+    direction: e,
+    defaultSize: o,
+    minSize: r,
+    maxSize: i,
+    onResize: s,
+    storageKey: u ? `ov-split-${u}` : void 0
+  }), v = e === "horizontal";
+  return /* @__PURE__ */ g(
+    d,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: v ? "row" : "column",
+        height: "100%",
+        width: "100%",
+        overflow: "hidden",
+        userSelect: a ? "none" : void 0,
+        ...p
+      },
+      children: [
+        /* @__PURE__ */ n(
+          d,
+          {
+            sx: {
+              [v ? "width" : "height"]: c,
+              flexShrink: 0,
+              overflow: "auto"
+            },
+            children: t[0]
+          }
+        ),
+        /* @__PURE__ */ n(
+          d,
+          {
+            ...f,
+            sx: {
+              [v ? "width" : "height"]: l,
+              flexShrink: 0,
+              cursor: v ? "col-resize" : "row-resize",
+              bgcolor: a ? "var(--ov-accent)" : "transparent",
+              transition: a ? "none" : "background-color 0.15s",
+              "&:hover": {
+                bgcolor: "var(--ov-border-default)"
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ n(d, { sx: { flex: 1, overflow: "auto", minWidth: 0, minHeight: 0 }, children: t[1] })
+      ]
+    }
+  );
+}
+I.displayName = "ResizableSplitPane";
+function P({
+  header: e,
+  sidebar: o,
+  footer: r,
+  children: i,
+  sidebarWidth: s = 240,
+  sidebarCollapsed: t = !1,
+  headerHeight: l = 48,
+  footerHeight: u = 32,
+  sx: p
+}) {
+  const c = t ? 0 : s, a = e ? l : 0, f = r ? u : 0;
+  return /* @__PURE__ */ g(
+    d,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateAreas: `
+          "header header"
+          "sidebar main"
+          "footer footer"
+        `,
+        gridTemplateColumns: o ? `${typeof c == "number" ? `${c}px` : c} 1fr` : "1fr",
+        gridTemplateRows: `${typeof a == "number" ? `${a}px` : a} 1fr ${typeof f == "number" ? `${f}px` : f}`,
+        height: "100vh",
+        width: "100vw",
+        overflow: "hidden",
+        "--ov-shell-sidebar-width": typeof c == "number" ? `${c}px` : c,
+        "--ov-shell-header-height": typeof a == "number" ? `${a}px` : a,
+        "--ov-shell-footer-height": typeof f == "number" ? `${f}px` : f,
+        ...p
+      },
+      children: [
+        e && /* @__PURE__ */ n(d, { sx: { gridArea: "header", overflow: "hidden" }, children: e }),
+        o && /* @__PURE__ */ n(
+          d,
+          {
+            sx: {
+              gridArea: "sidebar",
+              overflow: "auto",
+              transition: "width 0.2s ease"
+            },
+            children: o
+          }
+        ),
+        /* @__PURE__ */ n(d, { sx: { gridArea: "main", overflow: "auto" }, children: i }),
+        r && /* @__PURE__ */ n(d, { sx: { gridArea: "footer", overflow: "hidden" }, children: r })
+      ]
+    }
+  );
+}
+P.displayName = "AppShell";
+const Y = {
+  flat: "none",
+  raised: "0 1px 3px rgba(0,0,0,0.12)",
+  overlay: "0 4px 12px rgba(0,0,0,0.2)"
+};
+function U({
+  title: e,
+  icon: o,
+  toolbar: r,
+  children: i,
+  collapsible: s = !1,
+  onClose: t,
+  elevation: l = "flat",
+  sx: u
+}) {
+  const [p, c] = S(!1);
+  return /* @__PURE__ */ g(
+    d,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        border: "1px solid var(--ov-border-default)",
+        borderRadius: "6px",
+        bgcolor: "var(--ov-bg-surface)",
+        boxShadow: Y[l],
+        overflow: "hidden",
+        ...u
+      },
+      children: [
+        (e || r || t) && /* @__PURE__ */ g(
+          d,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              px: 1.5,
+              py: 0.75,
+              borderBottom: p ? "none" : "1px solid var(--ov-border-muted)",
+              bgcolor: "var(--ov-bg-subtle)",
+              minHeight: 36
+            },
+            children: [
+              s && /* @__PURE__ */ n(
+                A,
+                {
+                  size: "small",
+                  onClick: () => c((a) => !a),
+                  sx: { p: 0.25 },
+                  children: p ? /* @__PURE__ */ n(M, { size: 14 }) : /* @__PURE__ */ n(T, { size: 14 })
+                }
+              ),
+              o && /* @__PURE__ */ n(d, { sx: { display: "flex", color: "var(--ov-fg-muted)" }, children: o }),
+              e && /* @__PURE__ */ n(
+                E,
+                {
+                  variant: "body2",
+                  sx: {
+                    fontWeight: 600,
+                    fontSize: "0.8125rem",
+                    color: "var(--ov-fg-base)",
+                    flex: 1
+                  },
+                  children: e
+                }
+              ),
+              r && /* @__PURE__ */ n(d, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: r }),
+              t && /* @__PURE__ */ n(A, { size: "small", onClick: t, sx: { p: 0.25, ml: "auto" }, children: /* @__PURE__ */ n(j, { size: 14 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(H, { in: !p, children: /* @__PURE__ */ n(d, { sx: { flex: 1, overflow: "auto" }, children: i }) })
+      ]
+    }
+  );
+}
+U.displayName = "Panel";
+function $({
+  direction: e = "column",
+  gap: o,
+  spacing: r,
+  align: i,
+  alignItems: s,
+  justify: t,
+  justifyContent: l,
+  wrap: u,
+  flexWrap: p,
+  divider: c = !1,
+  children: a,
+  sx: f,
+  ...v
+}) {
+  return /* @__PURE__ */ n(
+    B,
+    {
+      direction: e,
+      spacing: r ?? o ?? 1,
+      alignItems: s ?? i,
+      justifyContent: l ?? t,
+      flexWrap: p ?? (u ? "wrap" : void 0),
+      divider: typeof c == "boolean" ? c ? /* @__PURE__ */ n(R, { orientation: e === "row" ? "vertical" : "horizontal", flexItem: !0 }) : void 0 : c,
+      sx: f,
+      ...v,
+      children: a
+    }
+  );
+}
+$.displayName = "Stack";
+function q({
+  gap: e = 1,
+  align: o = "center",
+  justify: r,
+  divider: i = !1,
+  children: s,
+  sx: t
+}) {
+  return /* @__PURE__ */ n(
+    $,
+    {
+      direction: "row",
+      gap: e,
+      align: o,
+      justify: r,
+      wrap: !0,
+      divider: i,
+      sx: t,
+      children: s
+    }
+  );
+}
+q.displayName = "Inline";
+function F({ sx: e }) {
+  return /* @__PURE__ */ n(d, { sx: { flex: 1, ...e } });
+}
+F.displayName = "Spacer";
+function x(e, o) {
+  if (e.type === "leaf")
+    return /* @__PURE__ */ n(d, { sx: { flex: 1, minWidth: 0, minHeight: 0, overflow: "auto" }, children: o(e.id) });
+  const r = e.type === "horizontal" ? "horizontal" : "vertical", i = e.children;
+  return i.length === 0 ? null : i.length === 1 ? x(i[0], o) : C(i, r, e.sizes, o);
+}
+function C(e, o, r, i) {
+  if (e.length === 1) return x(e[0], i);
+  const s = r?.[0] ?? 50, t = e[0], l = e.slice(1), u = r?.slice(1), p = t.type === "leaf" ? t.minSize ?? 100 : 100;
+  return /* @__PURE__ */ g(
+    I,
+    {
+      direction: o,
+      defaultSize: s,
+      minSize: p,
+      children: [
+        x(t, i),
+        l.length === 1 ? x(l[0], i) : C(l, o, u, i)
+      ]
+    }
+  );
+}
+function G({
+  layout: e,
+  renderPanel: o,
+  sx: r
+}) {
+  return /* @__PURE__ */ n(
+    d,
+    {
+      sx: {
+        display: "flex",
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0,
+        overflow: "hidden",
+        ...typeof r == "object" && !Array.isArray(r) ? r : {}
+      },
+      children: x(e, o)
+    }
+  );
+}
+G.displayName = "DockLayout";
+export {
+  P as AppShell,
+  G as DockLayout,
+  q as Inline,
+  U as Panel,
+  I as ResizableSplitPane,
+  F as Spacer,
+  $ as Stack,
+  J as useResizablePanel
+};

package/dist/menus/ContextMenu.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ContextMenuItem } from './types';
+export interface ContextMenuProps {
+    items: ContextMenuItem[];
+    children: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function ContextMenu({ items, children, onOpenChange, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ContextMenu {
+    var displayName: string;
+}
+export default ContextMenu;

package/dist/menus/DropdownMenu.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ComponentSize } from '../types';
+import { ContextMenuItem } from './types';
+import { SubmenuDirection } from './NestedMenuItem';
+export interface DropdownMenuProps {
+    items: ContextMenuItem[];
+    trigger: React.ReactNode;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /** Which side nested submenus expand toward. Inferred from placement if not set. */
+    submenuDirection?: SubmenuDirection;
+    size?: ComponentSize;
+    width?: number | string;
+    sx?: SxProps<Theme>;
+}
+declare function DropdownMenu({ items, trigger, placement, submenuDirection, width, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DropdownMenu {
+    var displayName: string;
+}
+export default DropdownMenu;

package/dist/menus/MenuBar.d.ts

@@ -0,0 +1,11 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { MenuBarItem } from './types';
+export interface MenuBarProps {
+    menus: MenuBarItem[];
+    sx?: SxProps<Theme>;
+}
+declare function MenuBar({ menus, sx }: MenuBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MenuBar {
+    var displayName: string;
+}
+export default MenuBar;

package/dist/menus/NestedMenuItem.d.ts

@@ -0,0 +1,13 @@
+import { ContextMenuItem } from './types';
+export type SubmenuDirection = 'left' | 'right';
+export interface NestedMenuItemProps {
+    item: ContextMenuItem;
+    onClose: () => void;
+    /** Which side submenus expand toward. Defaults to 'right'. */
+    submenuDirection?: SubmenuDirection;
+}
+declare function NestedMenuItem({ item, onClose, submenuDirection }: NestedMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NestedMenuItem {
+    var displayName: string;
+}
+export default NestedMenuItem;

package/dist/menus/SplitButton.d.ts

@@ -0,0 +1,15 @@
+import { SemanticColor, Emphasis, ComponentSize } from '../types';
+import { SplitButtonOption } from './types';
+export interface SplitButtonProps {
+    options: SplitButtonOption[];
+    onSelect: (option: SplitButtonOption) => void;
+    defaultIndex?: number;
+    color?: SemanticColor;
+    emphasis?: Emphasis;
+    size?: ComponentSize;
+}
+declare function SplitButton({ options, onSelect, defaultIndex, color, emphasis, size, }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SplitButton {
+    var displayName: string;
+}
+export default SplitButton;

package/dist/menus/index.d.ts

@@ -0,0 +1,11 @@
+export type { ContextMenuItem, MenuBarItem, SplitButtonOption } from './types';
+export { default as ContextMenu } from './ContextMenu';
+export type { ContextMenuProps } from './ContextMenu';
+export { default as DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu';
+export { default as NestedMenuItem } from './NestedMenuItem';
+export type { NestedMenuItemProps, SubmenuDirection } from './NestedMenuItem';
+export { default as MenuBar } from './MenuBar';
+export type { MenuBarProps } from './MenuBar';
+export { default as SplitButton } from './SplitButton';
+export type { SplitButtonProps } from './SplitButton';

package/dist/menus/types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { SemanticColor } from '../types';
+export interface ContextMenuItem {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    shortcut?: string[];
+    color?: SemanticColor;
+    disabled?: boolean;
+    dividerAfter?: boolean;
+    children?: ContextMenuItem[];
+    onClick?: () => void;
+}
+export interface MenuBarItem {
+    key: string;
+    label: string;
+    items: ContextMenuItem[];
+}
+export interface SplitButtonOption {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}