react-material-design 0.0.0-stage → 0.5.1

package/dist/layouts/Panes/Panes.d.ts

@@ -0,0 +1,28 @@
+import { SizeUnit } from '../../utils/index';
+import { PointerEvent, PropsWithChildren } from 'react';
+export interface SavedPane {
+    size: SizeUnit;
+    collapsed: boolean;
+}
+export interface PanesProps extends PropsWithChildren {
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+    defaultLayout?: Record<string, SavedPane>;
+    autoSaveId?: string;
+    onLayoutChange?: (layout: Record<string, SavedPane>) => void;
+}
+export interface PaneData {
+    id: string;
+    size: SizeUnit | "auto";
+    snapped: boolean;
+    collapsed: boolean;
+    isRecovering: boolean;
+    isAnimating: boolean;
+}
+export interface PanesContext {
+    activeDrag: string | null;
+    startDrag: (leftId: string, rightId: string, event: PointerEvent) => void;
+}
+export declare const PanesContext: import('react').Context<PanesContext | null>;
+export declare const usePanes: () => PanesContext;
+export default function Panes(props: PanesProps): import('react').JSX.Element;

package/dist/layouts/Panes/Panes.js

@@ -0,0 +1,182 @@
+import { formatSizeFromPx as e, getComponentTokenValue as t, isBrowser as n, parseSizeToPx as r } from "../../utils/index.js";
+import { useIsomorphicLayoutEffect as i } from "../../utils/hooks.js";
+import a from "../../components/misc/OrderedCollection/index.js";
+import o from "./Pane.render.js";
+import './style.css';/* empty css           */
+import { c as s } from "react/compiler-runtime";
+import c from "classnames";
+import { Fragment as l, createContext as u, useCallback as d, useContext as f, useEffectEvent as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useElementRef as y, useWindowEventListener as b } from "react-dom-event-hooks";
+//#region lib/layouts/Panes/Panes.tsx
+var x = u(null), S = () => {
+	let e = f(x);
+	if (!e) throw Error("MenuPane or MenuGroup must be used in Menu component");
+	return e;
+};
+function C(e) {
+	let t = s(10), { startDrag: n, activeDrag: r } = S(), i = r === e.leftId, a;
+	t[0] !== e.leftId || t[1] !== e.rightId || t[2] !== n ? (a = (t) => n(e.leftId, e.rightId, t), t[0] = e.leftId, t[1] = e.rightId, t[2] = n, t[3] = a) : a = t[3];
+	let o = a, l;
+	t[4] === i ? l = t[5] : (l = c("ResizeHandle", { dragging: i }), t[4] = i, t[5] = l);
+	let u;
+	t[6] === Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ _("div", { className: "handle" }), t[6] = u) : u = t[6];
+	let d;
+	return t[7] !== o || t[8] !== l ? (d = /* @__PURE__ */ _("div", {
+		className: l,
+		role: "separator",
+		onPointerDown: o,
+		children: u
+	}), t[7] = o, t[8] = l, t[9] = d) : d = t[9], d;
+}
+function w(s) {
+	let { orientation: u = "horizontal", autoSaveId: f, onLayoutChange: S } = s, [w, T] = g(0), [E, D] = g(0), { saveRef: O } = y(d((e) => {
+		let n = e.getBoundingClientRect();
+		D(u === "horizontal" ? n.width : n.height), T(t(e, "panes-handle-size"));
+	}, [u])), [k, A] = g([]), [j, M] = g({}), N = m(() => Math.max(0, k.length - 1) * w, [w, k.length]), P = m(() => Math.max(0, E - N), [E, N]), [F, I] = g(null), L = h(null), R = h(null), z = h({}), B = d((e, t) => !(e.id !== t.id || e.defaultSize !== t.defaultSize || e.minSize !== t.minSize || e.snapPoints?.length !== t.snapPoints?.length || t.snapPoints?.every((t, n) => t !== e.snapPoints?.at(n)) || e.className !== t.className || e.children !== t.children), []), V = d((e) => {
+		A(e), M(e.reduce((e, t) => {
+			let n = j[t.id];
+			return e[t.id] = {
+				id: t.id,
+				size: n ? n.size : L.current?.[t.id]?.size ?? t.defaultSize ?? "auto",
+				snapped: n ? n.snapped : !1,
+				collapsed: n ? n.collapsed : L.current?.[t.id]?.collapsed ?? !1,
+				isRecovering: n ? n.isRecovering : !1,
+				isAnimating: n ? n.isAnimating : !1
+			}, e;
+		}, {}));
+	}, [j]), H = p(() => {
+		M((e) => {
+			let t = k.filter((t) => e[t.id]?.size === "auto"), n = { ...e }, i, a = 0, o = 0, s, c;
+			return t.length === 0 ? e : (k.forEach((t) => {
+				i = e[t.id]?.size, i && i !== "auto" && (typeof i == "string" && i.endsWith("%") && (o += parseFloat(i)), a += r(i, P, 0));
+			}), P > 0 ? (s = Math.max(0, P - a), c = s / P * 100 / t.length, t.forEach((e) => n[e.id] = {
+				...n[e.id],
+				size: `${c}%`
+			})) : (s = Math.max(0, 100 - o), c = s / t.length, t.forEach((e) => n[e.id] = {
+				...n[e.id],
+				size: `${c}%`
+			})), n);
+		});
+	}), U = d((e) => {
+		let t = {};
+		for (let n in e) t[n] = {
+			size: e[n].size,
+			collapsed: e[n].collapsed
+		};
+		f && typeof window < "u" && localStorage.setItem(`material-panes-${f}`, JSON.stringify(t)), S?.(t);
+	}, [f, S]), W = m(() => ({
+		activeDrag: F,
+		startDrag(e, t, n) {
+			let i = j[e], a = j[t];
+			i && a && P && (n.preventDefault(), n.currentTarget.setPointerCapture(n.pointerId), R.current = {
+				leftId: e,
+				rightId: t,
+				startX: n.clientX,
+				startY: n.clientY,
+				startLeftPx: r(i.size, P),
+				startRightPx: r(a.size, P)
+			}, I(e));
+		}
+	}), [
+		F,
+		P,
+		j
+	]), G = m(() => k.map((e, t) => {
+		let n = j[e.id];
+		return n ? /* @__PURE__ */ v(l, { children: [!!t && /* @__PURE__ */ _(C, {
+			leftId: k[t - 1]?.id,
+			rightId: e.id
+		}), /* @__PURE__ */ _(o, {
+			...n,
+			...e,
+			totalHandlesSize: N,
+			activeDrag: F,
+			children: e.children
+		})] }, n.id) : null;
+	}), [
+		F,
+		j,
+		k,
+		N
+	]);
+	return b("pointermove", (t) => {
+		if (!R.current) return;
+		let { leftId: n, rightId: i, startX: a, startY: o, startLeftPx: s, startRightPx: c } = R.current, l = u === "horizontal" ? t.clientX - a : t.clientY - o, d = s + c, f = k.find((e) => e.id === n), p = k.find((e) => e.id === i), m = j[n], h = j[i], g = r(f?.minSize, P, 0), _ = r(p?.minSize, P, 0), v = s + l, y = c - l, b, x = !1, S = !1, C = !1, w = !1, T = !1, E, D, O;
+		if (f?.snapPoints) {
+			for (let e of f.snapPoints) if (b = r(e, P), Math.abs(v - b) < 20) {
+				v = b, y = d - v, x = !0, w = !0;
+				break;
+			}
+		}
+		if (!x && p?.snapPoints) {
+			for (let e of p.snapPoints) if (b = r(e, P), Math.abs(y - b) < 20) {
+				y = b, v = d - y, T = !0;
+				break;
+			}
+		}
+		v < g / 2 ? (S = !0, v = 0, y = d) : v < g && (v = g, y = d - g), y < _ / 2 ? (C = !0, y = 0, v = d) : y < _ && (y = _, v = d - _), v < 0 && (v = 0, y = d), y < 0 && (v = d, y = 0), E = !S && m.collapsed || !w && m.snapped, D = !C && h.collapsed || !T && h.snapped, O = m.isRecovering || h.isRecovering || !1, E || D ? (O = !0, z.current[n] && clearTimeout(z.current[n]), z.current[n] = setTimeout(() => {
+			M((e) => {
+				let t = { ...e };
+				return t[n] && (t[n] = {
+					...t[n],
+					isRecovering: !1,
+					isAnimating: !1
+				}), t[i] && (t[i] = {
+					...t[i],
+					isRecovering: !1,
+					isAnimating: !1
+				}), t;
+			});
+		}, 200)) : (S || w || C || T) && (O = !1, z.current[n] && clearTimeout(z.current[n])), M((t) => {
+			let r = e(v, t[n].size, P), a = e(y, t[i].size, P), o = S || w || C || T || O;
+			return {
+				...t,
+				[n]: {
+					...t[n],
+					snapped: w,
+					collapsed: S,
+					isRecovering: O,
+					isAnimating: o,
+					size: r
+				},
+				[i]: {
+					...t[i],
+					snapped: T,
+					collapsed: C,
+					isRecovering: O,
+					isAnimating: o,
+					size: a
+				}
+			};
+		});
+	}), b("pointerup", () => {
+		R.current && (U(j), R.current = null, I(null));
+	}), i(() => {
+		let e;
+		if (L.current === null) {
+			if (s.defaultLayout) L.current = s.defaultLayout;
+			else if (s.autoSaveId && n()) try {
+				e = localStorage.getItem(`material-panes-${s.autoSaveId}`), e && (L.current = JSON.parse(e));
+			} catch (e) {
+				console.error("localStorage error:", e);
+			}
+			L.current ||= {};
+		}
+		H();
+	}), /* @__PURE__ */ _("div", {
+		ref: O,
+		className: c("Panes", u, s.className),
+		children: /* @__PURE__ */ v(x, {
+			value: W,
+			children: [G, /* @__PURE__ */ _(a, {
+				childName: "Pane",
+				onChildrenChange: V,
+				compareChild: B,
+				children: s.children
+			})]
+		})
+	});
+}
+//#endregion
+export { x as PanesContext, w as default, S as usePanes };

package/dist/layouts/Panes/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./Panes.cjs"),t=require("./Pane.cjs");exports.Pane=t.default,exports.default=e.default;

package/dist/layouts/Panes/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Panes';
+export { default as Pane } from './Pane';
+export type { PanesProps } from './Panes';
+export type { PaneProps } from './Pane';

package/dist/layouts/Panes/index.js

@@ -0,0 +1,3 @@
+import e from "./Panes.js";
+import t from "./Pane.js";
+export { t as Pane, e as default };

package/dist/layouts/Panes/style.css

@@ -0,0 +1 @@
+.Panes{background-color:var(--md-comp-panes-container-color);height:300px;display:flex}.Panes.horizontal{flex-direction:row}.Panes.horizontal>.ResizeHandle{cursor:col-resize}.Panes.horizontal>.ResizeHandle:before{width:var(--md-comp-panes-handle-indicator-inline-size);height:var(--md-comp-panes-handle-indicator-block-size)}.Panes.horizontal>.ResizeHandle.dragging:before{width:var(--md-comp-panes-handle-indicator-dragging-inline-size)}.Panes.vertical{flex-direction:column}.Panes.vertical>.ResizeHandle{cursor:row-resize}.Panes.vertical>.ResizeHandle:before{width:var(--md-comp-panes-handle-indicator-block-size);height:var(--md-comp-panes-handle-indicator-inline-size)}.Panes.vertical>.ResizeHandle.dragging:before{height:var(--md-comp-panes-handle-indicator-dragging-inline-size)}.Panes>.ResizeHandle{flex:0 0 var(--md-comp-panes-handle-size);position:relative}.Panes>.ResizeHandle:before{content:"";background-color:var(--md-comp-panes-handle-indicator-color);border-radius:var(--md-comp-panes-handle-indicator-shape);transition:width var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), height var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), background-color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Panes>.ResizeHandle.dragging:before{background-color:var(--md-comp-panes-handle-indicator-dragging-color)}.Panes>.Pane{flex:0 1 var(--pane-size);background-color:var(--md-comp-panes-pane-container-color);border-radius:var(--md-comp-panes-pane-container-shape);box-sizing:border-box;overflow:auto}.Panes>.Pane.animating{transition:all var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing)}.Panes>.Pane.collapsed{overflow:hidden}.Panes>.Pane.inline-padding{padding-inline:var(--md-sys-measurement-space200)}.Panes>.Pane.block-padding{padding-block:var(--md-sys-measurement-space200)}

package/dist/layouts/Tabs/Tab.cjs

@@ -0,0 +1 @@
+const e=require("../../components/Icon/Icon.cjs"),t=require("../../components/misc/OrderedCollection/index.cjs"),n=require("./Tabs.cjs");let r=require("react/compiler-runtime"),i=require("react"),a=require("react/jsx-runtime");function o(o){let s=(0,r.c)(21),{label:c,icon:l}=o,u=(0,i.useContext)(n.TabsContext),d;s[0]!==u||s[1]!==c||s[2]!==o.id?(d=typeof c==`function`?c(u===o.id):c,s[0]=u,s[1]=c,s[2]=o.id,s[3]=d):d=s[3];let f=d,p;s[4]!==u||s[5]!==l||s[6]!==o.id?(p=typeof l==`function`?l(u===o.id):l,s[4]=u,s[5]=l,s[6]=o.id,s[7]=p):p=s[7];let m=p,h;s[8]===m?h=s[9]:(h=e.convertIconDefinition(m),s[8]=m,s[9]=h);let g=h,_;s[10]!==g||s[11]!==f||s[12]!==o.blockContentPadding||s[13]!==o.children||s[14]!==o.contentPadding||s[15]!==o.id||s[16]!==o.inlineContentPadding?(_={id:o.id,label:f,icon:g,inlineContentPadding:o.inlineContentPadding,blockContentPadding:o.blockContentPadding,contentPadding:o.contentPadding,children:o.children},s[10]=g,s[11]=f,s[12]=o.blockContentPadding,s[13]=o.children,s[14]=o.contentPadding,s[15]=o.id,s[16]=o.inlineContentPadding,s[17]=_):_=s[17];let v=_,y;return s[18]!==v||s[19]!==o.id?(y=(0,a.jsx)(t.OrderedCollectionChild,{name:`Tab`,id:o.id,content:v}),s[18]=v,s[19]=o.id,s[20]=y):y=s[20],y}exports.default=o;

package/dist/layouts/Tabs/Tab.d.ts

@@ -0,0 +1,13 @@
+import { IconDefinition } from '../../components/Icon/Icon';
+import { PropsWithChildren } from 'react';
+import { LayoutPadding } from '../types';
+export interface TabProps extends PropsWithChildren, LayoutPadding {
+    id: string;
+    label: string | ((current: boolean) => string);
+    icon?: IconDefinition | ((current: boolean) => IconDefinition);
+}
+export interface TabData extends TabProps {
+    label: string;
+    icon?: IconDefinition;
+}
+export default function Tab(props: TabProps): import('react').JSX.Element;

package/dist/layouts/Tabs/Tab.js

@@ -0,0 +1,33 @@
+import { convertIconDefinition as e } from "../../components/Icon/Icon.js";
+import { OrderedCollectionChild as t } from "../../components/misc/OrderedCollection/index.js";
+import { TabsContext as n } from "./Tabs.js";
+import { c as r } from "react/compiler-runtime";
+import { useContext as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region lib/layouts/Tabs/Tab.tsx
+function o(o) {
+	let s = r(21), { label: c, icon: l } = o, u = i(n), d;
+	s[0] !== u || s[1] !== c || s[2] !== o.id ? (d = typeof c == "function" ? c(u === o.id) : c, s[0] = u, s[1] = c, s[2] = o.id, s[3] = d) : d = s[3];
+	let f = d, p;
+	s[4] !== u || s[5] !== l || s[6] !== o.id ? (p = typeof l == "function" ? l(u === o.id) : l, s[4] = u, s[5] = l, s[6] = o.id, s[7] = p) : p = s[7];
+	let m = p, h;
+	s[8] === m ? h = s[9] : (h = e(m), s[8] = m, s[9] = h);
+	let g = h, _;
+	s[10] !== g || s[11] !== f || s[12] !== o.blockContentPadding || s[13] !== o.children || s[14] !== o.contentPadding || s[15] !== o.id || s[16] !== o.inlineContentPadding ? (_ = {
+		id: o.id,
+		label: f,
+		icon: g,
+		inlineContentPadding: o.inlineContentPadding,
+		blockContentPadding: o.blockContentPadding,
+		contentPadding: o.contentPadding,
+		children: o.children
+	}, s[10] = g, s[11] = f, s[12] = o.blockContentPadding, s[13] = o.children, s[14] = o.contentPadding, s[15] = o.id, s[16] = o.inlineContentPadding, s[17] = _) : _ = s[17];
+	let v = _, y;
+	return s[18] !== v || s[19] !== o.id ? (y = /* @__PURE__ */ a(t, {
+		name: "Tab",
+		id: o.id,
+		content: v
+	}), s[18] = v, s[19] = o.id, s[20] = y) : y = s[20], y;
+}
+//#endregion
+export { o as default };

package/dist/layouts/Tabs/Tabs.cjs

@@ -0,0 +1 @@
+require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../components/Icon/Icon.cjs"),n=require("../../utils/index.cjs"),r=require("../../utils/hooks.cjs"),i=require("../../components/misc/OrderedCollection/index.cjs"),a=require("../../components/misc/StateLayer/index.cjs"),o=require("../../components/misc/Transitionable/index.cjs");;/* empty css             */let s=require("classnames");s=e.__toESM(s,1);let c=require("react"),l=require("react/jsx-runtime"),u=require("react-dom-event-hooks");var d=(0,c.createContext)(void 0);function f(e){let{variant:f=`primary`,defaultActiveTab:p,activeTab:m,onActiveTabChange:h}=e,[g,_]=(0,c.useState)([]),v=(0,c.useMemo)(()=>g.some(e=>!!e.label),[g]),y=(0,c.useMemo)(()=>g.some(e=>!!e.icon),[g]),[b,x]=(0,c.useState)(p??m??``),S=(0,c.useMemo)(()=>{let e=m??b;return g.find(t=>t.id===e)?e:p},[m,b,p,g]),{saveRef:C,ref:w}=(0,u.useMultiElementRef)(),T=(0,c.useRef)(null),E=(0,c.useRef)(null),D=(0,c.useRef)(null),O=(0,c.useCallback)(e=>{x(t=>t||(e.at(0)?.id??``)),_(e)},[]),k=(0,c.useCallback)((e=!1)=>{let t=w.current.get(S??``),r,i;D.current!==null&&(D.current=cancelAnimationFrame(D.current)??null),D.current=requestAnimationFrame(()=>{t&&T.current&&(r=T.current.getBoundingClientRect(),i=f===`primary`?n.getRelativeRect(t,r):n.getRelativeRect(t.parentElement,r),e&&E.current?.classList.add(`immediate`),E.current?.style.setProperty(`--position-left`,`${i.left}px`),E.current?.style.setProperty(`--position-right`,`${r.width-i.right}px`),e&&setTimeout(()=>E.current?.classList.remove(`immediate`)))})},[S,w,f]),{saveRef:A}=(0,u.useResizeObserver)(()=>k(!0)),j=(0,c.useCallback)(e=>{let t=e.currentTarget.dataset.id;t&&(m||x(t),h?.(t))},[m,h]);return r.useIsomorphicLayoutEffect(()=>{k()},[S,g.length,k]),(0,l.jsx)(d,{value:S,children:(0,l.jsxs)(`div`,{className:(0,s.default)(`Tabs`,f),children:[(0,l.jsx)(`nav`,{ref:A,className:(0,s.default)(`navigation`,{labels:v,icons:y}),children:(0,l.jsxs)(`div`,{ref:T,className:`container`,children:[g.map(e=>(0,l.jsxs)(`button`,{className:(0,s.default)(`button`,{active:e.id===S}),"data-id":e.id,onClick:j,children:[(0,l.jsx)(a.default,{}),(0,l.jsxs)(`div`,{ref:C,className:`content`,"data-key":e.id,children:[(0,l.jsx)(t.IconProvider,{size:24,fill:e.id===S,children:(0,l.jsx)(o.default,{value:e.icon,className:`icon`})}),(0,l.jsx)(o.default,{value:e.label,className:`label`})]})]},e.id)),(0,l.jsx)(`div`,{ref:E,className:`indicator`})]})}),(0,l.jsx)(`div`,{className:`activities`,children:g.map(e=>(0,l.jsx)(c.Activity,{name:`Tab_`+e.id,mode:e.id===S?`visible`:`hidden`,children:(0,l.jsx)(`div`,{className:(0,s.default)(`content`,{"inline-padding":e.inlineContentPadding??e.contentPadding??!1,"block-padding":e.blockContentPadding??e.contentPadding??!1}),children:e.children})},e.id))}),(0,l.jsx)(i.default,{name:`Tabs`,childName:`Tab`,onChildrenChange:O,compareChild:n.shallowEqual,children:e.children})]})})}exports.TabsContext=d,exports.default=f;

package/dist/layouts/Tabs/Tabs.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export interface TabsProps {
+    variant?: "primary" | "secondary";
+    defaultActiveTab?: string;
+    activeTab?: string;
+    onActiveTabChange?: (active: string) => void;
+}
+export declare const TabsContext: import('react').Context<string | undefined>;
+export default function Tabs(props: PropsWithChildren<TabsProps>): import('react').JSX.Element;

package/dist/layouts/Tabs/Tabs.js

@@ -0,0 +1,110 @@
+import { IconProvider as e } from "../../components/Icon/Icon.js";
+import { getRelativeRect as t, shallowEqual as n } from "../../utils/index.js";
+import { useIsomorphicLayoutEffect as r } from "../../utils/hooks.js";
+import i from "../../components/misc/OrderedCollection/index.js";
+import a from "../../components/misc/StateLayer/index.js";
+import o from "../../components/misc/Transitionable/index.js";
+import './style.css';/* empty css           */
+import s from "classnames";
+import { Activity as c, createContext as l, useCallback as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useMultiElementRef as g, useResizeObserver as _ } from "react-dom-event-hooks";
+//#region lib/layouts/Tabs/Tabs.tsx
+var v = l(void 0);
+function y(l) {
+	let { variant: y = "primary", defaultActiveTab: b, activeTab: x, onActiveTabChange: S } = l, [C, w] = p([]), T = d(() => C.some((e) => !!e.label), [C]), E = d(() => C.some((e) => !!e.icon), [C]), [D, O] = p(b ?? x ?? ""), k = d(() => {
+		let e = x ?? D;
+		return C.find((t) => t.id === e) ? e : b;
+	}, [
+		x,
+		D,
+		b,
+		C
+	]), { saveRef: A, ref: j } = g(), M = f(null), N = f(null), P = f(null), F = u((e) => {
+		O((t) => t || (e.at(0)?.id ?? "")), w(e);
+	}, []), I = u((e = !1) => {
+		let n = j.current.get(k ?? ""), r, i;
+		P.current !== null && (P.current = cancelAnimationFrame(P.current) ?? null), P.current = requestAnimationFrame(() => {
+			n && M.current && (r = M.current.getBoundingClientRect(), i = t(y === "primary" ? n : n.parentElement, r), e && N.current?.classList.add("immediate"), N.current?.style.setProperty("--position-left", `${i.left}px`), N.current?.style.setProperty("--position-right", `${r.width - i.right}px`), e && setTimeout(() => N.current?.classList.remove("immediate")));
+		});
+	}, [
+		k,
+		j,
+		y
+	]), { saveRef: L } = _(() => I(!0)), R = u((e) => {
+		let t = e.currentTarget.dataset.id;
+		t && (x || O(t), S?.(t));
+	}, [x, S]);
+	return r(() => {
+		I();
+	}, [
+		k,
+		C.length,
+		I
+	]), /* @__PURE__ */ m(v, {
+		value: k,
+		children: /* @__PURE__ */ h("div", {
+			className: s("Tabs", y),
+			children: [
+				/* @__PURE__ */ m("nav", {
+					ref: L,
+					className: s("navigation", {
+						labels: T,
+						icons: E
+					}),
+					children: /* @__PURE__ */ h("div", {
+						ref: M,
+						className: "container",
+						children: [C.map((t) => /* @__PURE__ */ h("button", {
+							className: s("button", { active: t.id === k }),
+							"data-id": t.id,
+							onClick: R,
+							children: [/* @__PURE__ */ m(a, {}), /* @__PURE__ */ h("div", {
+								ref: A,
+								className: "content",
+								"data-key": t.id,
+								children: [/* @__PURE__ */ m(e, {
+									size: 24,
+									fill: t.id === k,
+									children: /* @__PURE__ */ m(o, {
+										value: t.icon,
+										className: "icon"
+									})
+								}), /* @__PURE__ */ m(o, {
+									value: t.label,
+									className: "label"
+								})]
+							})]
+						}, t.id)), /* @__PURE__ */ m("div", {
+							ref: N,
+							className: "indicator"
+						})]
+					})
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "activities",
+					children: C.map((e) => /* @__PURE__ */ m(c, {
+						name: "Tab_" + e.id,
+						mode: e.id === k ? "visible" : "hidden",
+						children: /* @__PURE__ */ m("div", {
+							className: s("content", {
+								"inline-padding": e.inlineContentPadding ?? e.contentPadding ?? !1,
+								"block-padding": e.blockContentPadding ?? e.contentPadding ?? !1
+							}),
+							children: e.children
+						})
+					}, e.id))
+				}),
+				/* @__PURE__ */ m(i, {
+					name: "Tabs",
+					childName: "Tab",
+					onChildrenChange: F,
+					compareChild: n,
+					children: l.children
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { v as TabsContext, y as default };

package/dist/layouts/Tabs/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./Tabs.cjs"),t=require("./Tab.cjs");exports.Tab=t.default,exports.default=e.default;

package/dist/layouts/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Tabs';
+export { default as Tab } from './Tab';
+export type { TabsProps } from './Tabs';
+export type { TabProps } from './Tab';

package/dist/layouts/Tabs/index.js

@@ -0,0 +1,3 @@
+import e from "./Tabs.js";
+import t from "./Tab.js";
+export { t as Tab, e as default };

package/dist/layouts/Tabs/style.css

@@ -0,0 +1 @@
+.Tabs{flex-direction:column;width:100%;height:100%;display:flex}.Tabs>.navigation{width:100%;overflow-x:auto}.Tabs>.navigation>.container{flex-flow:row;width:max-content;min-width:100%;height:100%;display:flex;position:relative}.Tabs>.navigation>.container>.button{flex:1 0 max-content;padding:0;cursor:pointer;background-color:#0000;border:none;border-radius:0;outline:none;justify-content:center;align-items:center;margin:0;padding-inline:8px;display:flex}.Tabs>.navigation>.container>.button>.content{display:flex}.Tabs>.navigation>.container>.button>.content>.icon,.Tabs>.navigation>.container>.button>.content>.label{transition:color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing)}.Tabs>.navigation>.container>.button:focus-visible>.StateLayer{border-radius:var(--md-sys-shape-corner-large)}.Tabs>.navigation>.container>.button>.StateLayer{outline-offset:calc(-1 * var(--md-comp-state-focus-indicator-thickness))}.Tabs>.navigation>.container>.indicator{position:absolute;bottom:0}.Tabs>.navigation>.container>.indicator:not(.immediate){transition:inset var(--md-sys-motion-spring-expressive-default-spatial-duration) var(--md-sys-motion-spring-expressive-default-spatial-easing), background-color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing)}.Tabs>.activities{box-sizing:border-box;scrollbar-color:var(--md-sys-color-surface-variant) var(--md-sys-color-surface);flex:1;overflow:auto}.Tabs>.activities>.content{box-sizing:border-box;width:100%;height:100%}.Tabs>.activities>.content.inline-padding{padding-inline:var(--md-sys-measurement-space200)}.Tabs>.activities>.content.block-padding{padding-block:var(--md-sys-measurement-space200)}.Tabs.primary>.navigation{height:var(--md-comp-primary-navigation-tab-container-height);min-height:var(--md-comp-primary-navigation-tab-container-height);background-color:var(--md-comp-primary-navigation-tab-container-color)}.Tabs.primary>.navigation:is(.labels,.icons){height:var(--md-comp-primary-navigation-tab-with-icon-and-label-text-container-height)}.Tabs.primary>.navigation>.container>.button{--md-comp-state-focus-indicator-color:var(--md-comp-primary-navigation-tab-focus-indicator-color);--md-comp-state-focus-indicator-thickness:var(--md-comp-primary-navigation-tab-focus-indicator-thickness);--md-comp-state-focus-indicator-outer-offset:var(--md-comp-primary-navigation-tab-focus-indicator-outline-offset)}.Tabs.primary>.navigation>.container>.button.active{--md-comp-state-hover-state-layer-opacity:var(--md-comp-primary-navigation-tab-active-hover-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-primary-navigation-tab-active-focus-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-primary-navigation-tab-active-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-primary-navigation-tab-active-hover-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-primary-navigation-tab-active-focus-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-primary-navigation-tab-active-pressed-state-layer-color)}.Tabs.primary>.navigation>.container>.button.active>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-active-label-text-color)}.Tabs.primary>.navigation>.container>.button.active>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-active-icon-color)}.Tabs.primary>.navigation>.container>.button.active:hover>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-active-hover-label-text-color)}.Tabs.primary>.navigation>.container>.button.active:hover>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-active-hover-icon-color)}.Tabs.primary>.navigation>.container>.button:not(.active){--md-comp-state-hover-state-layer-opacity:var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-color)}.Tabs.primary>.navigation>.container>.button:not(.active)>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-inactive-label-text-color)}.Tabs.primary>.navigation>.container>.button:not(.active)>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-inactive-icon-color)}.Tabs.primary>.navigation>.container>.button:not(.active):hover>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-inactive-hover-label-text-color)}.Tabs.primary>.navigation>.container>.button:not(.active):hover>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-inactive-hover-icon-color)}.Tabs.primary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-inactive-pressed-label-text-color)}.Tabs.primary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-inactive-pressed-icon-color)}.Tabs.primary>.navigation>.container>.button>.content{flex-direction:column;align-items:center}.Tabs.primary>.navigation>.container>.button>.content>.label{font-family:var(--md-comp-primary-navigation-tab-with-label-text-label-text-font);font-weight:var(--md-comp-primary-navigation-tab-with-label-text-label-text-weight);font-size:var(--md-comp-primary-navigation-tab-with-label-text-label-text-size);letter-spacing:var(--md-comp-primary-navigation-tab-with-label-text-label-text-tracking);line-height:var(--md-comp-primary-navigation-tab-with-label-text-label-text-line-height);font-variation-settings:"wght" var(--md-comp-primary-navigation-tab-with-label-text-label-text-wght), "GRAD" var(--md-comp-primary-navigation-tab-with-label-text-label-text-grad), "wdth" var(--md-comp-primary-navigation-tab-with-label-text-label-text-wdth), "ROND" var(--md-comp-primary-navigation-tab-with-label-text-label-text-rond), "opsz" var(--md-comp-primary-navigation-tab-with-label-text-label-text-opsz), "CRSV" var(--md-comp-primary-navigation-tab-with-label-text-label-text-crsv), "slnt" var(--md-comp-primary-navigation-tab-with-label-text-label-text-slnt), "FILL" var(--md-comp-primary-navigation-tab-with-label-text-label-text-fill), "HEXP" var(--md-comp-primary-navigation-tab-with-label-text-label-text-hexp)}.Tabs.primary>.navigation>.container>.indicator{height:var(--md-comp-primary-navigation-tab-active-indicator-height);background-color:var(--md-comp-primary-navigation-tab-active-indicator-color);border-radius:var(--md-comp-primary-navigation-tab-active-indicator-height);left:calc(var(--position-left) + 2px);right:calc(var(--position-right) + 2px);border-bottom-right-radius:0;border-bottom-left-radius:0}.Tabs.secondary>.navigation{height:var(--md-comp-secondary-navigation-tab-container-height);min-height:var(--md-comp-secondary-navigation-tab-container-height);background-color:var(--md-comp-secondary-navigation-tab-container-color)}.Tabs.secondary>.navigation>.container>.button{--md-comp-state-hover-state-layer-opacity:var(--md-comp-secondary-navigation-tab-hover-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-secondary-navigation-tab-focus-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-secondary-navigation-tab-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-secondary-navigation-tab-hover-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-secondary-navigation-tab-focus-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-secondary-navigation-tab-pressed-state-layer-color);--md-comp-state-focus-indicator-color:var(--md-comp-secondary-navigation-tab-focus-indicator-color);--md-comp-state-focus-indicator-thickness:var(--md-comp-secondary-navigation-tab-focus-indicator-thickness);--md-comp-state-focus-indicator-outer-offset:var(--md-comp-secondary-navigation-tab-focus-indicator-outline-offset)}.Tabs.secondary>.navigation>.container>.button.active>.content>.label{color:var(--md-comp-secondary-navigation-tab-active-label-text-color)}.Tabs.secondary>.navigation>.container>.button.active>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-active-icon-color)}.Tabs.secondary>.navigation>.container>.button.active:hover>.content>.label{color:var(--md-comp-secondary-navigation-tab-hover-label-text-color)}.Tabs.secondary>.navigation>.container>.button.active:hover>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-hover-icon-color)}.Tabs.secondary>.navigation>.container>.button:not(.active)>.content>.label{color:var(--md-comp-secondary-navigation-tab-inactive-label-text-color)}.Tabs.secondary>.navigation>.container>.button:not(.active)>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-inactive-icon-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):hover>.content>.label{color:var(--md-comp-secondary-navigation-tab-hover-label-text-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):hover>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-hover-icon-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.label{color:var(--md-comp-secondary-navigation-tab-pressed-label-text-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-pressed-icon-color)}.Tabs.secondary>.navigation>.container>.button>.content{flex-direction:row;align-items:center;gap:8px}.Tabs.secondary>.navigation>.container>.button>.content>.label{font-family:var(--md-comp-secondary-navigation-tab-label-text-font);font-weight:var(--md-comp-secondary-navigation-tab-label-text-weight);font-size:var(--md-comp-secondary-navigation-tab-label-text-size);letter-spacing:var(--md-comp-secondary-navigation-tab-label-text-tracking);line-height:var(--md-comp-secondary-navigation-tab-label-text-line-height);font-variation-settings:"wght" var(--md-comp-secondary-navigation-tab-label-text-wght), "GRAD" var(--md-comp-secondary-navigation-tab-label-text-grad), "wdth" var(--md-comp-secondary-navigation-tab-label-text-wdth), "ROND" var(--md-comp-secondary-navigation-tab-label-text-rond), "opsz" var(--md-comp-secondary-navigation-tab-label-text-opsz), "CRSV" var(--md-comp-secondary-navigation-tab-label-text-crsv), "slnt" var(--md-comp-secondary-navigation-tab-label-text-slnt), "FILL" var(--md-comp-secondary-navigation-tab-label-text-fill), "HEXP" var(--md-comp-secondary-navigation-tab-label-text-hexp)}.Tabs.secondary>.navigation>.container>.indicator{height:var(--md-comp-secondary-navigation-tab-active-indicator-height);background-color:var(--md-comp-secondary-navigation-tab-active-indicator-color);left:var(--position-left);right:var(--position-right)}

package/dist/layouts/Toolbox/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../utils/index.cjs"),n=require("../../components/misc/OrderedCollection/index.cjs"),r=require("../../components/ContextMenu/render.cjs"),i=require("../../components/Toolbar/Toolbar.render.cjs");;/* empty css             */let a=require("react/compiler-runtime"),o=require("classnames");o=e.__toESM(o,1);let s=require("react"),c=require("react/jsx-runtime");function l(e){let r=(0,a.c)(45),i;r[0]===Symbol.for(`react.memo_cache_sentinel`)?(i=[],r[0]=i):i=r[0];let[l,_]=(0,s.useState)(i),v;r[1]===Symbol.for(`react.memo_cache_sentinel`)?(v=[`Content`,`Toolbar`,`ContextMenu`],r[1]=v):v=r[1];let y=v,b;r[2]===l?b=r[3]:(b=l.filter(g),r[2]=l,r[3]=b);let x=b,S;r[4]===l?S=r[5]:(S=l.filter(h),r[4]=l,r[5]=S);let C=S,w;r[6]===l?w=r[7]:(w=l.filter(m),r[6]=l,r[7]=w);let T=w,E;r[8]===C?E=r[9]:(E=C.filter(p),r[8]=C,r[9]=E);let D=E,O;r[10]===C?O=r[11]:(O=C.filter(ne),r[10]=C,r[11]=O);let k=O,A;r[12]===k?A=r[13]:(A=k.filter(te),r[12]=k,r[13]=A);let j=A,M;r[14]===k?M=r[15]:(M=k.filter(ee),r[14]=k,r[15]=M);let N=M,P;r[16]===Symbol.for(`react.memo_cache_sentinel`)?(P=[],r[16]=P):P=r[16];let F=P,I;r[17]!==D||r[18]!==N?(I=[...D,...N],r[17]=D,r[18]=N,r[19]=I):I=r[19];let L=I,R=j,z;r[20]===Symbol.for(`react.memo_cache_sentinel`)?(z=[],r[20]=z):z=r[20];let B=z,V=e.inlineContentPadding??e.contentPadding??!1,H=e.blockContentPadding??e.contentPadding??!1,U=f,W;r[21]!==H||r[22]!==V?(W=(0,o.default)(`Toolbox`,{"inline-padding":V,"block-padding":H}),r[21]=H,r[22]=V,r[23]=W):W=r[23];let G;r[24]===Symbol.for(`react.memo_cache_sentinel`)?(G=!!F.length&&(0,c.jsx)(`div`,{className:`tools top`,children:F.map(U)}),r[24]=G):G=r[24];let K;r[25]===L?K=r[26]:(K=!!L.length&&(0,c.jsx)(`div`,{className:`tools bottom`,children:L.map(U)}),r[25]=L,r[26]=K);let q;r[27]===R?q=r[28]:(q=!!R.length&&(0,c.jsx)(`div`,{className:`tools left`,children:R.map(U)}),r[27]=R,r[28]=q);let J;r[29]===Symbol.for(`react.memo_cache_sentinel`)?(J=!!B.length&&(0,c.jsx)(`div`,{className:`tools right`,children:B.map(U)}),r[29]=J):J=r[29];let Y;r[30]===T?Y=r[31]:(Y=T.map(d),r[30]=T,r[31]=Y);let X;r[32]===x?X=r[33]:(X=x.map(u),r[32]=x,r[33]=X);let Z;r[34]!==Y||r[35]!==X?(Z=(0,c.jsxs)(`div`,{className:`content`,children:[Y,X]}),r[34]=Y,r[35]=X,r[36]=Z):Z=r[36];let Q;r[37]===e.children?Q=r[38]:(Q=(0,c.jsx)(n.default,{name:`Toolbox`,childName:y,onChildrenChange:_,compareChild:t.shallowEqual,children:e.children}),r[37]=e.children,r[38]=Q);let $;return r[39]!==W||r[40]!==K||r[41]!==q||r[42]!==Z||r[43]!==Q?($=(0,c.jsxs)(`div`,{className:W,children:[G,K,q,J,Z,Q]}),r[39]=W,r[40]=K,r[41]=q,r[42]=Z,r[43]=Q,r[44]=$):$=r[44],$}function u(e){return(0,c.jsx)(s.Fragment,{children:e.children},e.id)}function d(e){return(0,c.jsx)(r.default,{...e},e.id)}function f(e){switch(e.orderedCollectionName){case`Toolbar`:return(0,c.jsx)(i.default,{...e},e.id);default:return null}}function ee(e){return!e.orientation||e.orientation===`horizontal`}function te(e){return e.orientation===`vertical`}function ne(e){return e.variant===`floating`}function p(e){return e.variant===`docked`}function m(e){return e.orderedCollectionName===`ContextMenu`}function h(e){return e.orderedCollectionName===`Toolbar`}function g(e){return e.orderedCollectionName===`Content`}exports.default=l;

package/dist/layouts/Toolbox/index.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { LayoutPadding } from '../types';
+export interface ToolboxProps extends PropsWithChildren, LayoutPadding {
+}
+export default function Toolbox(props: ToolboxProps): import('react').JSX.Element;

package/dist/layouts/Toolbox/index.js

@@ -0,0 +1,129 @@
+import { shallowEqual as e } from "../../utils/index.js";
+import t from "../../components/misc/OrderedCollection/index.js";
+import n from "../../components/ContextMenu/render.js";
+import r from "../../components/Toolbar/Toolbar.render.js";
+import './style.css';/* empty css           */
+import { c as i } from "react/compiler-runtime";
+import a from "classnames";
+import { Fragment as o, useState as ee } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/layouts/Toolbox/index.tsx
+function l(n) {
+	let r = i(45), o;
+	r[0] === Symbol.for("react.memo_cache_sentinel") ? (o = [], r[0] = o) : o = r[0];
+	let [l, _] = ee(o), v;
+	r[1] === Symbol.for("react.memo_cache_sentinel") ? (v = [
+		"Content",
+		"Toolbar",
+		"ContextMenu"
+	], r[1] = v) : v = r[1];
+	let y = v, b;
+	r[2] === l ? b = r[3] : (b = l.filter(g), r[2] = l, r[3] = b);
+	let x = b, S;
+	r[4] === l ? S = r[5] : (S = l.filter(h), r[4] = l, r[5] = S);
+	let C = S, w;
+	r[6] === l ? w = r[7] : (w = l.filter(m), r[6] = l, r[7] = w);
+	let T = w, E;
+	r[8] === C ? E = r[9] : (E = C.filter(p), r[8] = C, r[9] = E);
+	let D = E, O;
+	r[10] === C ? O = r[11] : (O = C.filter(re), r[10] = C, r[11] = O);
+	let k = O, A;
+	r[12] === k ? A = r[13] : (A = k.filter(ne), r[12] = k, r[13] = A);
+	let j = A, M;
+	r[14] === k ? M = r[15] : (M = k.filter(te), r[14] = k, r[15] = M);
+	let N = M, P;
+	r[16] === Symbol.for("react.memo_cache_sentinel") ? (P = [], r[16] = P) : P = r[16];
+	let F = P, I;
+	r[17] !== D || r[18] !== N ? (I = [...D, ...N], r[17] = D, r[18] = N, r[19] = I) : I = r[19];
+	let L = I, R = j, z;
+	r[20] === Symbol.for("react.memo_cache_sentinel") ? (z = [], r[20] = z) : z = r[20];
+	let B = z, V = n.inlineContentPadding ?? n.contentPadding ?? !1, H = n.blockContentPadding ?? n.contentPadding ?? !1, U = f, W;
+	r[21] !== H || r[22] !== V ? (W = a("Toolbox", {
+		"inline-padding": V,
+		"block-padding": H
+	}), r[21] = H, r[22] = V, r[23] = W) : W = r[23];
+	let G;
+	r[24] === Symbol.for("react.memo_cache_sentinel") ? (G = !!F.length && /* @__PURE__ */ s("div", {
+		className: "tools top",
+		children: F.map(U)
+	}), r[24] = G) : G = r[24];
+	let K;
+	r[25] === L ? K = r[26] : (K = !!L.length && /* @__PURE__ */ s("div", {
+		className: "tools bottom",
+		children: L.map(U)
+	}), r[25] = L, r[26] = K);
+	let q;
+	r[27] === R ? q = r[28] : (q = !!R.length && /* @__PURE__ */ s("div", {
+		className: "tools left",
+		children: R.map(U)
+	}), r[27] = R, r[28] = q);
+	let J;
+	r[29] === Symbol.for("react.memo_cache_sentinel") ? (J = !!B.length && /* @__PURE__ */ s("div", {
+		className: "tools right",
+		children: B.map(U)
+	}), r[29] = J) : J = r[29];
+	let Y;
+	r[30] === T ? Y = r[31] : (Y = T.map(d), r[30] = T, r[31] = Y);
+	let X;
+	r[32] === x ? X = r[33] : (X = x.map(u), r[32] = x, r[33] = X);
+	let Z;
+	r[34] !== Y || r[35] !== X ? (Z = /* @__PURE__ */ c("div", {
+		className: "content",
+		children: [Y, X]
+	}), r[34] = Y, r[35] = X, r[36] = Z) : Z = r[36];
+	let Q;
+	r[37] === n.children ? Q = r[38] : (Q = /* @__PURE__ */ s(t, {
+		name: "Toolbox",
+		childName: y,
+		onChildrenChange: _,
+		compareChild: e,
+		children: n.children
+	}), r[37] = n.children, r[38] = Q);
+	let $;
+	return r[39] !== W || r[40] !== K || r[41] !== q || r[42] !== Z || r[43] !== Q ? ($ = /* @__PURE__ */ c("div", {
+		className: W,
+		children: [
+			G,
+			K,
+			q,
+			J,
+			Z,
+			Q
+		]
+	}), r[39] = W, r[40] = K, r[41] = q, r[42] = Z, r[43] = Q, r[44] = $) : $ = r[44], $;
+}
+function u(e) {
+	return /* @__PURE__ */ s(o, { children: e.children }, e.id);
+}
+function d(e) {
+	return /* @__PURE__ */ s(n, { ...e }, e.id);
+}
+function f(e) {
+	switch (e.orderedCollectionName) {
+		case "Toolbar": return /* @__PURE__ */ s(r, { ...e }, e.id);
+		default: return null;
+	}
+}
+function te(e) {
+	return !e.orientation || e.orientation === "horizontal";
+}
+function ne(e) {
+	return e.orientation === "vertical";
+}
+function re(e) {
+	return e.variant === "floating";
+}
+function p(e) {
+	return e.variant === "docked";
+}
+function m(e) {
+	return e.orderedCollectionName === "ContextMenu";
+}
+function h(e) {
+	return e.orderedCollectionName === "Toolbar";
+}
+function g(e) {
+	return e.orderedCollectionName === "Content";
+}
+//#endregion
+export { l as default };

package/dist/layouts/Toolbox/style.css

@@ -0,0 +1 @@
+.Toolbox{box-sizing:border-box;--toolbox-content-default-spacing:var(--md-sys-measurement-space200);--toolbox-tools-top-size:max(var(--toolbox-tools-top-toolbar-size,var(--toolbox-content-default-spacing,0)));--toolbox-tools-bottom-size:max(var(--toolbox-tools-bottom-toolbar-size,var(--toolbox-content-default-spacing,0)));--toolbox-tools-left-size:max(var(--toolbox-tools-left-toolbar-size,var(--toolbox-content-default-spacing,0)));--toolbox-tools-right-size:max(var(--toolbox-tools-right-toolbar-size,var(--toolbox-content-default-spacing,0)));flex:1;justify-content:stretch;align-items:stretch;width:100%;height:100%;display:flex;position:relative}.Toolbox:has(>.tools.top>.Toolbar.floating){--toolbox-tools-top-toolbar-size:calc(var(--md-comp-toolbar-floating-horizontal-container-height) + var(--md-comp-toolbar-floating-horizontal-container-external-space) * 2)}.Toolbox:has(>.tools.bottom>.Toolbar.docked){--toolbox-tools-bottom-toolbar-size:calc(var(--md-comp-toolbar-docked-container-height) + var(--md-sys-measurement-space200))}.Toolbox:has(>.tools.bottom>.Toolbar.floating){--toolbox-tools-bottom-toolbar-size:calc(var(--md-comp-toolbar-floating-horizontal-container-height) + var(--md-comp-toolbar-floating-horizontal-container-external-space) * 2)}.Toolbox:has(>.tools.left>.Toolbar.floating){--toolbox-tools-left-toolbar-size:calc(var(--md-comp-toolbar-floating-vertical-container-width) + var(--md-comp-toolbar-floating-vertical-container-external-space) * 2)}.Toolbox:has(>.tools.right>.Toolbar.floating){--toolbox-tools-right-toolbar-size:calc(var(--md-comp-toolbar-floating-vertical-container-width) + var(--md-comp-toolbar-floating-vertical-container-external-space) * 2)}.Toolbox>.tools{z-index:4;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute}.Toolbox>.tools>*{pointer-events:initial}.Toolbox>.tools.top{top:0;left:0;right:0}.Toolbox>.tools.top>.Toolbar.floating{margin-top:var(--md-comp-toolbar-floating-horizontal-container-external-space)}.Toolbox>.tools.bottom{bottom:0;left:0;right:0}.Toolbox>.tools.bottom:not(:has(>.Toolbar.docked)){padding-inline:var(--md-sys-measurement-space200)}.Toolbox>.tools.bottom>.Toolbar.docked{flex:1}.Toolbox>.tools.bottom>.Toolbar.floating{margin-bottom:var(--md-comp-toolbar-floating-horizontal-container-external-space)}.Toolbox>.tools.left{padding-block:var(--md-sys-measurement-space300);top:0;bottom:0;left:0}.Toolbox>.tools.left>.Toolbar.floating{margin-left:var(--md-comp-toolbar-floating-vertical-container-external-space)}.Toolbox>.tools.right{padding-block:var(--md-sys-measurement-space300);top:0;bottom:0;right:0}.Toolbox>.tools.right>.Toolbar.floating{margin-right:var(--md-comp-toolbar-floating-vertical-container-external-space)}.Toolbox.inline-padding>.content{padding-inline:var(--toolbox-tools-left-size) var(--toolbox-tools-right-size)}.Toolbox.block-padding>.content{padding-block:var(--toolbox-tools-top-size) var(--toolbox-tools-bottom-size)}.Toolbox>.content{flex:1;overflow:auto}.Toolbox>.content>*{--toolbox-tools-top-size:initial;--toolbox-tools-bottom-size:initial;--toolbox-tools-left-size:initial;--toolbox-tools-right-size:initial;--toolbox-tools-top-menubar-size:initial;--toolbox-tools-top-toolbar-size:initial;--toolbox-tools-bottom-toolbar-size:initial;--toolbox-tools-left-toolbar-size:initial;--toolbox-tools-right-toolbar-size:initial}

package/dist/style/motions.d.ts

@@ -0,0 +1,37 @@
+interface MotionSpringCssConfig {
+    duration: number;
+    easing: string;
+}
+interface MotionSpringConfig {
+    duration: number;
+    easing: (offset: number) => number;
+}
+export declare const MotionSpringCss: {
+    ExpressiveFastSpatial: MotionSpringCssConfig;
+    ExpressiveDefaultSpatial: MotionSpringCssConfig;
+    ExpressiveSlowSpatial: MotionSpringCssConfig;
+    ExpressiveFastEffects: MotionSpringCssConfig;
+    ExpressiveDefaultEffects: MotionSpringCssConfig;
+    ExpressiveSlowEffects: MotionSpringCssConfig;
+    StandardFastSpatial: MotionSpringCssConfig;
+    StandardDefaultSpatial: MotionSpringCssConfig;
+    StandardSlowSpatial: MotionSpringCssConfig;
+    StandardFastEffects: MotionSpringCssConfig;
+    StandardDefaultEffects: MotionSpringCssConfig;
+    StandardSlowEffects: MotionSpringCssConfig;
+};
+export declare const MotionSpring: {
+    ExpressiveFastSpatial: MotionSpringConfig;
+    ExpressiveDefaultSpatial: MotionSpringConfig;
+    ExpressiveSlowSpatial: MotionSpringConfig;
+    ExpressiveFastEffects: MotionSpringConfig;
+    ExpressiveDefaultEffects: MotionSpringConfig;
+    ExpressiveSlowEffects: MotionSpringConfig;
+    StandardFastSpatial: MotionSpringConfig;
+    StandardDefaultSpatial: MotionSpringConfig;
+    StandardSlowSpatial: MotionSpringConfig;
+    StandardFastEffects: MotionSpringConfig;
+    StandardDefaultEffects: MotionSpringConfig;
+    StandardSlowEffects: MotionSpringConfig;
+};
+export {};