@adea-ai/ui 0.60.3 → 0.61.0

package/dist/components/conversation/thread-panel.js

@@ -0,0 +1,123 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button/button.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { X } from "lucide-solid";
+import { Show, splitProps } from "solid-js";
+//#region src/components/conversation/thread-panel.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class="text-muted-foreground text-2xs"> `);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="bg-muted/40 shrink-0 border-b border-border px-3 py-2">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class="shrink-0 border-t border-border p-2">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<aside data-slot=thread-panel><header class="flex h-topbar shrink-0 items-center gap-2 border-b border-border px-3"><div class="flex min-w-0 flex-col"><span class="truncate text-sm font-semibold tracking-tight">Thread</span></div></header><div class="min-h-0 flex-1 overflow-y-auto overscroll-contain"role=region aria-label="Thread replies"tabindex=0>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span class="text-muted-foreground truncate text-2xs">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<button type=button><span class="flex min-w-0 flex-col"><span class="truncate text-xs font-medium">`);
+function ThreadPanel(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"label",
+		"count",
+		"root",
+		"composer",
+		"onClose",
+		"children"
+	]);
+	return (() => {
+		var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+		_el$3.firstChild;
+		var _el$8 = _el$2.nextSibling;
+		spread(_el$, mergeProps({
+			get ["aria-label"]() {
+				return `Thread: ${local.label}`;
+			},
+			get ["class"]() {
+				return cn("bg-surface flex h-full w-96 shrink-0 flex-col border-s border-border", local.class);
+			}
+		}, rest), false, true);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return local.count !== void 0;
+			},
+			get children() {
+				var _el$5 = _tmpl$(), _el$6 = _el$5.firstChild;
+				insert(_el$5, () => local.count, _el$6);
+				insert(_el$5, () => local.count === 1 ? "reply" : "replies", null);
+				return _el$5;
+			}
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return local.onClose;
+			},
+			get children() {
+				return createComponent(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": "Close thread",
+					"class": "ms-auto text-muted-foreground",
+					onClick: () => local.onClose?.(),
+					get children() {
+						return createComponent(X, {});
+					}
+				});
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return local.root;
+			},
+			get children() {
+				var _el$7 = _tmpl$2();
+				insert(_el$7, () => local.root);
+				return _el$7;
+			}
+		}), _el$8);
+		insert(_el$8, () => local.children);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return local.composer;
+			},
+			get children() {
+				var _el$9 = _tmpl$3();
+				insert(_el$9, () => local.composer);
+				return _el$9;
+			}
+		}), null);
+		return _el$;
+	})();
+}
+function AttachmentCard(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"name",
+		"detail",
+		"unavailable",
+		"icon"
+	]);
+	return (() => {
+		var _el$0 = _tmpl$6(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild;
+		spread(_el$0, mergeProps({
+			get disabled() {
+				return local.unavailable;
+			},
+			get ["class"]() {
+				return cn("flex max-w-64 items-center gap-2.5 rounded-md border border-border bg-surface-sunken px-2.5 py-2 text-start", "transition-colors ease-out outline-none", local.unavailable ? "cursor-not-allowed opacity-60" : "hover:border-input hover:bg-surface-hover", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "[&_svg]:size-4 [&_svg]:shrink-0", local.class);
+			}
+		}, rest), false, true);
+		insert(_el$0, () => local.icon, _el$1);
+		insert(_el$10, () => local.name);
+		insert(_el$1, createComponent(Show, {
+			get when() {
+				return local.detail;
+			},
+			get children() {
+				var _el$11 = _tmpl$5();
+				insert(_el$11, () => local.detail);
+				return _el$11;
+			}
+		}), null);
+		return _el$0;
+	})();
+}
+//#endregion
+export { AttachmentCard, ThreadPanel };
+
+//# sourceMappingURL=thread-panel.js.map

package/dist/components/conversation/thread-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thread-panel.js","names":["X","ComponentProps","JSX","Show","splitProps","cn","Button","ThreadPanelProps","label","count","root","Element","composer","onClose","ThreadPanel","props","local","rest","_el$","_tmpl$4","_el$2","firstChild","_el$3","_el$4","_el$8","nextSibling","_$spread","_$mergeProps","aria-label","class","_$insert","_$createComponent","when","undefined","children","_el$5","_tmpl$","_el$6","variant","size","onClick","_el$7","_tmpl$2","_el$9","_tmpl$3","AttachmentCardProps","name","detail","unavailable","icon","AttachmentCard","_el$0","_tmpl$6","_el$1","_el$10","disabled","_el$11","_tmpl$5","_$mergeProps","_$createComponent"],"sources":["../../../src/components/conversation/thread-panel.tsx"],"sourcesContent":["import { X } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../ui/button/button'\n\n/**\n * ThreadPanel.\n *\n * The replies to one message, shown beside the transcript rather than in it. Keeping\n * a thread out of the main flow is what stops a busy side conversation from burying\n * the conversation everyone is having.\n *\n * The root message is repeated at the top — with `pinned` — because a thread read out\n * of context is a set of answers to a question the reader can no longer see.\n *\n * The panel is a `complementary` landmark with a label, so it is reachable by\n * landmark navigation rather than by tabbing through the transcript to find it.\n */\nexport type ThreadPanelProps = ComponentProps<'aside'> & {\n  /** The thread's title, usually the root message's author. */\n  label: string\n  /** A count of replies, shown beside the label. */\n  count?: number\n  /** The root message, drawn above the replies. */\n  root?: JSX.Element\n  /** The composer for a reply. */\n  composer?: JSX.Element\n  onClose?: () => void\n}\n\nexport function ThreadPanel(props: ThreadPanelProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'count',\n    'root',\n    'composer',\n    'onClose',\n    'children',\n  ])\n\n  return (\n    <aside\n      data-slot=\"thread-panel\"\n      aria-label={`Thread: ${local.label}`}\n      class={cn(\n        'bg-surface flex h-full w-96 shrink-0 flex-col border-s border-border',\n        local.class\n      )}\n      {...rest}\n    >\n      <header class=\"flex h-topbar shrink-0 items-center gap-2 border-b border-border px-3\">\n        <div class=\"flex min-w-0 flex-col\">\n          <span class=\"truncate text-sm font-semibold tracking-tight\">Thread</span>\n          <Show when={local.count !== undefined}>\n            <span class=\"text-muted-foreground text-2xs\">\n              {local.count} {local.count === 1 ? 'reply' : 'replies'}\n            </span>\n          </Show>\n        </div>\n        <Show when={local.onClose}>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Close thread\"\n            class=\"ms-auto text-muted-foreground\"\n            onClick={() => local.onClose?.()}\n          >\n            <X />\n          </Button>\n        </Show>\n      </header>\n\n      <Show when={local.root}>\n        <div class=\"bg-muted/40 shrink-0 border-b border-border px-3 py-2\">{local.root}</div>\n      </Show>\n\n      <div\n        class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\"\n        role=\"region\"\n        aria-label=\"Thread replies\"\n        tabindex=\"0\"\n      >\n        {local.children}\n      </div>\n\n      <Show when={local.composer}>\n        <div class=\"shrink-0 border-t border-border p-2\">{local.composer}</div>\n      </Show>\n    </aside>\n  )\n}\n\n/**\n * An attachment card.\n *\n * A file is not a link: the reader wants to know what it is and how big it is before\n * deciding to open it, so the media type and size are on the card rather than behind\n * a click. `unavailable` is a real state — an artifact can be deleted, or live on a\n * device this one is not authorized for — and it is drawn as text rather than as a\n * dead link.\n */\nexport type AttachmentCardProps = ComponentProps<'button'> & {\n  name: string\n  /** A short description of the type and size, e.g. \"image/png · 24,120 bytes\". */\n  detail?: string\n  /** Draw the card as unavailable, with the reason as the detail. */\n  unavailable?: boolean\n  icon?: JSX.Element\n}\n\nexport function AttachmentCard(props: AttachmentCardProps) {\n  const [local, rest] = splitProps(props, ['class', 'name', 'detail', 'unavailable', 'icon'])\n\n  return (\n    <button\n      type=\"button\"\n      disabled={local.unavailable}\n      class={cn(\n        'flex max-w-64 items-center gap-2.5 rounded-md border border-border bg-surface-sunken px-2.5 py-2 text-start',\n        'transition-colors ease-out outline-none',\n        local.unavailable\n          ? 'cursor-not-allowed opacity-60'\n          : 'hover:border-input hover:bg-surface-hover',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        '[&_svg]:size-4 [&_svg]:shrink-0',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.icon}\n      <span class=\"flex min-w-0 flex-col\">\n        <span class=\"truncate text-xs font-medium\">{local.name}</span>\n        <Show when={local.detail}>\n          <span class=\"text-muted-foreground truncate text-2xs\">{local.detail}</span>\n        </Show>\n      </span>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/components/layout/app-shell/app-shell.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentProps, JSX } from 'solid-js';
+/**
+ * AppShell.
+ *
+ * The window's skeleton: a grid whose regions are the side rail, an optional
+ * secondary sidebar, a top bar and the content area, with a status bar pinned
+ * to the bottom.
+ *
+ * Its whole job is to be the *one* place that decides the geometry, so two
+ * applications built on this library cannot disagree about how tall the top bar
+ * is or where the content begins. Every dimension comes from a token — not from
+ * a class on a child — which is why the regions do not accept a height.
+ *
+ * Both apps are desktop shells, so the arrangement is height-locked: the shell
+ * fills the viewport, each region scrolls internally, and the document itself
+ * never scrolls. That is what stops a wheel event over a pane from dragging the
+ * whole window.
+ *
+ *   <AppShell>
+ *     <SideRail>…</SideRail>
+ *     <AppShellBody>
+ *       <AppShellTopBar>…</AppShellTopBar>
+ *       <AppShellMain>…</AppShellMain>
+ *     </AppShellBody>
+ *   </AppShell>
+ *
+ * A second sidebar goes inside `AppShellBody` as a `SidebarNav`, or as a
+ * `ResizablePanelGroup` when the user is allowed to resize the split.
+ */
+export declare function AppShell(props: ComponentProps<'div'>): JSX.Element;
+/** The area to the right of the rail: top bar over content over status bar. */
+export declare function AppShellBody(props: ComponentProps<'div'>): JSX.Element;
+/**
+ * The main content area.
+ *
+ * `min-h-0 min-w-0` is load-bearing: a flex child defaults to its content size,
+ * so without it a wide table or a long line makes the whole shell scroll
+ * horizontally instead of the pane.
+ */
+export declare function AppShellMain(props: ComponentProps<'main'>): JSX.Element;
+/** A resizable split between two or more panes, filling the body. */
+export declare function AppShellContent(props: ComponentProps<'div'> & {
+    children?: JSX.Element;
+}): JSX.Element;
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/components/layout/app-shell/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-shell/app-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAcpD;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAUxD;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,eAUzD;AAED,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAUxF"}

package/dist/components/layout/app-shell/app-shell.js

@@ -0,0 +1,89 @@
+import { cn } from "../../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/layout/app-shell/app-shell.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=app-shell>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=app-shell-body>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<main data-slot=app-shell-main>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=app-shell-content>`);
+/**
+* AppShell.
+*
+* The window's skeleton: a grid whose regions are the side rail, an optional
+* secondary sidebar, a top bar and the content area, with a status bar pinned
+* to the bottom.
+*
+* Its whole job is to be the *one* place that decides the geometry, so two
+* applications built on this library cannot disagree about how tall the top bar
+* is or where the content begins. Every dimension comes from a token — not from
+* a class on a child — which is why the regions do not accept a height.
+*
+* Both apps are desktop shells, so the arrangement is height-locked: the shell
+* fills the viewport, each region scrolls internally, and the document itself
+* never scrolls. That is what stops a wheel event over a pane from dragging the
+* whole window.
+*
+*   <AppShell>
+*     <SideRail>…</SideRail>
+*     <AppShellBody>
+*       <AppShellTopBar>…</AppShellTopBar>
+*       <AppShellMain>…</AppShellMain>
+*     </AppShellBody>
+*   </AppShell>
+*
+* A second sidebar goes inside `AppShellBody` as a `SidebarNav`, or as a
+* `ResizablePanelGroup` when the user is allowed to resize the split.
+*/
+function AppShell(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("bg-background text-foreground flex h-screen w-screen overflow-hidden", "data-[window-drag=true]:window-drag", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+/** The area to the right of the rail: top bar over content over status bar. */
+function AppShellBody(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("flex min-h-0 min-w-0 flex-1 flex-col", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+/**
+* The main content area.
+*
+* `min-h-0 min-w-0` is load-bearing: a flex child defaults to its content size,
+* so without it a wide table or a long line makes the whole shell scroll
+* horizontally instead of the pane.
+*/
+function AppShellMain(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
+}
+/** A resizable split between two or more panes, filling the body. */
+function AppShellContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("flex min-h-0 min-w-0 flex-1 overflow-hidden", local.class);
+		} }, rest), false, false);
+		return _el$4;
+	})();
+}
+//#endregion
+export { AppShell, AppShellBody, AppShellContent, AppShellMain };
+
+//# sourceMappingURL=app-shell.js.map

package/dist/components/layout/app-shell/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","names":["ComponentProps","JSX","splitProps","cn","AppShell","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","AppShellBody","_el$2","_tmpl$2","AppShellMain","_el$3","_tmpl$3","AppShellContent","children","Element","_el$4","_tmpl$4","_$mergeProps"],"sources":["../../../../src/components/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * AppShell.\n *\n * The window's skeleton: a grid whose regions are the side rail, an optional\n * secondary sidebar, a top bar and the content area, with a status bar pinned\n * to the bottom.\n *\n * Its whole job is to be the *one* place that decides the geometry, so two\n * applications built on this library cannot disagree about how tall the top bar\n * is or where the content begins. Every dimension comes from a token — not from\n * a class on a child — which is why the regions do not accept a height.\n *\n * Both apps are desktop shells, so the arrangement is height-locked: the shell\n * fills the viewport, each region scrolls internally, and the document itself\n * never scrolls. That is what stops a wheel event over a pane from dragging the\n * whole window.\n *\n *   <AppShell>\n *     <SideRail>…</SideRail>\n *     <AppShellBody>\n *       <AppShellTopBar>…</AppShellTopBar>\n *       <AppShellMain>…</AppShellMain>\n *     </AppShellBody>\n *   </AppShell>\n *\n * A second sidebar goes inside `AppShellBody` as a `SidebarNav`, or as a\n * `ResizablePanelGroup` when the user is allowed to resize the split.\n */\nexport function AppShell(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"app-shell\"\n      class={cn(\n        'bg-background text-foreground flex h-screen w-screen overflow-hidden',\n        'data-[window-drag=true]:window-drag',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The area to the right of the rail: top bar over content over status bar. */\nexport function AppShellBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"app-shell-body\"\n      class={cn('flex min-h-0 min-w-0 flex-1 flex-col', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * The main content area.\n *\n * `min-h-0 min-w-0` is load-bearing: a flex child defaults to its content size,\n * so without it a wide table or a long line makes the whole shell scroll\n * horizontally instead of the pane.\n */\nexport function AppShellMain(props: ComponentProps<'main'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <main\n      data-slot=\"app-shell-main\"\n      class={cn('flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** A resizable split between two or more panes, filling the body. */\nexport function AppShellContent(props: ComponentProps<'div'> & { children?: JSX.Element }) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"app-shell-content\"\n      class={cn('flex min-h-0 min-w-0 flex-1 overflow-hidden', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgBI,SAASC,OAA8B;CACrD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,wEACA,uCACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBK,aAAaR,OAA8B;CACzD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,wCAAwCG,MAAMM,KAAK;EAAC,EAAA,GAC1DL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd;;;;;;;;AASA,SAAgBE,aAAaX,OAA+B;CAC1D,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAY,QAAAC,QAAA;EAAAR,OAAAO,OAAAN,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,wDAAwDG,MAAMM,KAAK;EAAC,EAAA,GAC1EL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAU;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBE,gBAAgBd,OAA2D;CACzF,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAiB,QAAAC,QAAA;EAAAb,OAAAY,OAAAX,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,+CAA+CG,MAAMM,KAAK;EAAC,EAAA,GACjEL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAe;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/layout/app-shell/index.d.ts

@@ -0,0 +1,2 @@
+export { AppShell, AppShellBody, AppShellContent, AppShellMain } from './app-shell';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/app-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-shell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/layout/page/index.d.ts

@@ -0,0 +1,2 @@
+export { Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, } from './page';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,WAAW,GACZ,MAAM,QAAQ,CAAA"}

package/dist/components/layout/page/page.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps, JSX } from 'solid-js';
+/**
+ * PageHeader.
+ *
+ * The title block at the top of a scrollable page: where the user is, what this
+ * page is, and the actions that apply to the whole of it.
+ *
+ * The action slot is single and singular on purpose. A page header with four
+ * equally-weighted buttons has not decided what the page is for; the design
+ * system can only make that look tidy, not make it true. Put the primary action
+ * here and the rest in an overflow menu or on the rows they belong to.
+ */
+export declare function PageHeader(props: ComponentProps<'header'>): JSX.Element;
+export declare function PageHeaderContent(props: ComponentProps<'div'>): JSX.Element;
+export declare function PageHeaderTitle(props: ComponentProps<'h1'>): JSX.Element;
+export declare function PageHeaderDescription(props: ComponentProps<'p'>): JSX.Element;
+/** The trailing action group. One primary action, at most. */
+export declare function PageHeaderActions(props: ComponentProps<'div'>): JSX.Element;
+/**
+ * A section inside a page, with an optional title and a description.
+ * Sections are separated by space rather than by rules — a page of boxed
+ * sections reads as a dashboard, and most pages are not one.
+ */
+export declare function PageSection(props: ComponentProps<'section'> & {
+    title?: string;
+    description?: string;
+    action?: JSX.Element;
+}): JSX.Element;
+/** The scroll container a page's header and sections sit in. */
+export declare function Page(props: ComponentProps<'div'>): JSX.Element;
+//# sourceMappingURL=page.d.ts.map

package/dist/components/layout/page/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/page/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,eAazD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS7D;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,eAS1D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,eAS/D;AAED,8DAA8D;AAC9D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS7D;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eA4BlG;AAED,gEAAgE;AAChE,wBAAgB,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAShD"}

package/dist/components/layout/page/page.js

@@ -0,0 +1,143 @@
+import { cn } from "../../../lib/utils.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/layout/page/page.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<header data-slot=page-header>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=page-header-content>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<h1 data-slot=page-header-title>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<p data-slot=page-header-description>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=page-header-actions>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<p class="max-w-prose text-sm text-muted-foreground text-pretty">`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div class="flex shrink-0 items-center gap-2">`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div class="flex items-baseline justify-between gap-3"><div class="flex min-w-0 flex-col gap-0.5"><h2 class="text-base font-semibold tracking-tight">`);
+var _tmpl$9 = /*#__PURE__*/ template(`<section data-slot=page-section>`);
+var _tmpl$0 = /*#__PURE__*/ template(`<div data-slot=page>`);
+/**
+* PageHeader.
+*
+* The title block at the top of a scrollable page: where the user is, what this
+* page is, and the actions that apply to the whole of it.
+*
+* The action slot is single and singular on purpose. A page header with four
+* equally-weighted buttons has not decided what the page is for; the design
+* system can only make that look tidy, not make it true. Put the primary action
+* here and the rest in an overflow menu or on the rows they belong to.
+*/
+function PageHeader(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("flex shrink-0 flex-wrap items-start justify-between gap-x-4 gap-y-3 px-5 pt-5 pb-4", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+function PageHeaderContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("flex min-w-0 flex-col gap-1", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+function PageHeaderTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("text-xl font-semibold tracking-tight", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
+}
+function PageHeaderDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("max-w-prose text-sm text-muted-foreground text-pretty", local.class);
+		} }, rest), false, false);
+		return _el$4;
+	})();
+}
+/** The trailing action group. One primary action, at most. */
+function PageHeaderActions(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$5 = _tmpl$5();
+		spread(_el$5, mergeProps({ get ["class"]() {
+			return cn("flex shrink-0 items-center gap-2", local.class);
+		} }, rest), false, false);
+		return _el$5;
+	})();
+}
+/**
+* A section inside a page, with an optional title and a description.
+* Sections are separated by space rather than by rules — a page of boxed
+* sections reads as a dashboard, and most pages are not one.
+*/
+function PageSection(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"title",
+		"description",
+		"action",
+		"children"
+	]);
+	return (() => {
+		var _el$6 = _tmpl$9();
+		spread(_el$6, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-3 px-5 py-4", local.class);
+		} }, rest), false, true);
+		insert(_el$6, createComponent(Show, {
+			get when() {
+				return local.title;
+			},
+			get children() {
+				var _el$7 = _tmpl$8(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild;
+				insert(_el$9, () => local.title);
+				insert(_el$8, createComponent(Show, {
+					get when() {
+						return local.description;
+					},
+					get children() {
+						var _el$0 = _tmpl$6();
+						insert(_el$0, () => local.description);
+						return _el$0;
+					}
+				}), null);
+				insert(_el$7, createComponent(Show, {
+					get when() {
+						return local.action;
+					},
+					get children() {
+						var _el$1 = _tmpl$7();
+						insert(_el$1, () => local.action);
+						return _el$1;
+					}
+				}), null);
+				return _el$7;
+			}
+		}), null);
+		insert(_el$6, () => local.children, null);
+		return _el$6;
+	})();
+}
+/** The scroll container a page's header and sections sit in. */
+function Page(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$10 = _tmpl$0();
+		spread(_el$10, mergeProps({ get ["class"]() {
+			return cn("flex min-h-0 flex-1 flex-col overflow-y-auto", local.class);
+		} }, rest), false, false);
+		return _el$10;
+	})();
+}
+//#endregion
+export { Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection };
+
+//# sourceMappingURL=page.js.map

package/dist/components/layout/page/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","names":["ComponentProps","JSX","Show","splitProps","cn","PageHeader","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","PageHeaderContent","_el$2","_tmpl$2","PageHeaderTitle","_el$3","_tmpl$3","PageHeaderDescription","_el$4","_tmpl$4","PageHeaderActions","_el$5","_tmpl$5","PageSection","title","description","action","Element","_el$6","_tmpl$9","_$insert","_$createComponent","when","children","_el$7","_tmpl$8","_el$8","firstChild","_el$9","_el$0","_tmpl$6","_el$1","_tmpl$7","Page","_el$10","_tmpl$0","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/layout/page/page.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * PageHeader.\n *\n * The title block at the top of a scrollable page: where the user is, what this\n * page is, and the actions that apply to the whole of it.\n *\n * The action slot is single and singular on purpose. A page header with four\n * equally-weighted buttons has not decided what the page is for; the design\n * system can only make that look tidy, not make it true. Put the primary action\n * here and the rest in an overflow menu or on the rows they belong to.\n */\nexport function PageHeader(props: ComponentProps<'header'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <header\n      data-slot=\"page-header\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-start justify-between gap-x-4 gap-y-3 px-5 pt-5 pb-4',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function PageHeaderContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"page-header-content\"\n      class={cn('flex min-w-0 flex-col gap-1', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function PageHeaderTitle(props: ComponentProps<'h1'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <h1\n      data-slot=\"page-header-title\"\n      class={cn('text-xl font-semibold tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function PageHeaderDescription(props: ComponentProps<'p'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <p\n      data-slot=\"page-header-description\"\n      class={cn('max-w-prose text-sm text-muted-foreground text-pretty', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** The trailing action group. One primary action, at most. */\nexport function PageHeaderActions(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"page-header-actions\"\n      class={cn('flex shrink-0 items-center gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A section inside a page, with an optional title and a description.\n * Sections are separated by space rather than by rules — a page of boxed\n * sections reads as a dashboard, and most pages are not one.\n */\nexport function PageSection(\n  props: ComponentProps<'section'> & { title?: string; description?: string; action?: JSX.Element }\n) {\n  const [local, rest] = splitProps(props, ['class', 'title', 'description', 'action', 'children'])\n\n  return (\n    <section\n      data-slot=\"page-section\"\n      class={cn('flex flex-col gap-3 px-5 py-4', local.class)}\n      {...rest}\n    >\n      <Show when={local.title}>\n        <div class=\"flex items-baseline justify-between gap-3\">\n          <div class=\"flex min-w-0 flex-col gap-0.5\">\n            <h2 class=\"text-base font-semibold tracking-tight\">{local.title}</h2>\n            <Show when={local.description}>\n              <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">\n                {local.description}\n              </p>\n            </Show>\n          </div>\n          <Show when={local.action}>\n            <div class=\"flex shrink-0 items-center gap-2\">{local.action}</div>\n          </Show>\n        </div>\n      </Show>\n      {local.children}\n    </section>\n  )\n}\n\n/** The scroll container a page's header and sections sit in. */\nexport function Page(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"page\"\n      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeA,SAAgBK,WAAWC,OAAiC;CAC1D,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,sFACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBK,kBAAkBR,OAA8B;CAC9D,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,+BAA+BG,MAAMM,KAAK;EAAC,EAAA,GACjDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBE,gBAAgBX,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAY,QAAAC,QAAA;EAAAR,OAAAO,OAAAN,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,wCAAwCG,MAAMM,KAAK;EAAC,EAAA,GAC1DL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAU;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBE,sBAAsBd,OAA4B;CAChE,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAe,QAAAC,QAAA;EAAAX,OAAAU,OAAAT,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,yDAAyDG,MAAMM,KAAK;EAAC,EAAA,GAC3EL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAa;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBE,kBAAkBjB,OAA8B;CAC9D,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAkB,QAAAC,QAAA;EAAAd,OAAAa,OAAAZ,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,oCAAoCG,MAAMM,KAAK;EAAC,EAAA,GACtDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAgB;CAAA,EAAA,CAAA;AAGd;;;;;;AAOA,SAAgBE,YACdpB,OACA;CACA,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO;EAAC;EAAS;EAAS;EAAe;EAAU;CAAU,CAAC;CAE/F,cAAA;EAAA,IAAAyB,QAAAC,QAAA;EAAArB,OAAAoB,OAAAnB,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,iCAAiCG,MAAMM,KAAK;EAAC,EAAA,GACnDL,IAAI,GAAA,OAAA,IAAA;EAAAyB,OAAAF,OAAAG,gBAEPhC,MAAI;GAAA,IAACiC,OAAI;IAAA,OAAE5B,MAAMoB;GAAK;GAAA,IAAAS,WAAA;IAAA,IAAAC,QAAAC,QAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC;IAAAP,OAAAQ,aAGmClC,MAAMoB,KAAK;IAAAM,OAAAM,OAAAL,gBAC9DhC,MAAI;KAAA,IAACiC,OAAI;MAAA,OAAE5B,MAAMqB;KAAW;KAAA,IAAAQ,WAAA;MAAA,IAAAM,QAAAC,QAAA;MAAAV,OAAAS,aAExBnC,MAAMqB,WAAW;MAAA,OAAAc;KAAA;IAAA,CAAA,GAAA,IAAA;IAAAT,OAAAI,OAAAH,gBAIvBhC,MAAI;KAAA,IAACiC,OAAI;MAAA,OAAE5B,MAAMsB;KAAM;KAAA,IAAAO,WAAA;MAAA,IAAAQ,QAAAC,QAAA;MAAAZ,OAAAW,aACyBrC,MAAMsB,MAAM;MAAA,OAAAe;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAP;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAJ,OAAAF,aAIhExB,MAAM6B,UAAQ,IAAA;EAAA,OAAAL;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBe,KAAKxC,OAA8B;CACjD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAyC,SAAAC,QAAA;EAAArC,OAAAoC,QAAAnC,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,gDAAgDG,MAAMM,KAAK;EAAC,EAAA,GAClEL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAuC;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/layout/panel/index.d.ts

@@ -0,0 +1,2 @@
+export { Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, } from './panel';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAA"}

package/dist/components/layout/panel/panel.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * Panel.
+ *
+ * A titled region inside the content area — an editor, an inspector, a list, a
+ * terminal. It is the third level of surface after the shell and the sidebar,
+ * and like them its parts are fixed: a header with a title and a toolbar, a
+ * scrolling body, an optional footer.
+ *
+ * The body scrolls and the header does not, which is the whole reason this is a
+ * component. A panel whose header scrolls away loses the name of what the user
+ * is looking at, and every hand-built panel gets this wrong at least once.
+ *
+ * Component props are `title`-agnostic on purpose: the panel does not decide
+ * how large its title is, so an inspector's title and an editor's title agree.
+ */
+export declare function Panel(props: ComponentProps<'section'>): import("solid-js").JSX.Element;
+/** A panel whose surface is raised, for a panel floating over the canvas. */
+export declare function PanelCard(props: ComponentProps<'section'>): import("solid-js").JSX.Element;
+export declare function PanelHeader(props: ComponentProps<'header'>): import("solid-js").JSX.Element;
+export declare function PanelTitle(props: ComponentProps<'h2'>): import("solid-js").JSX.Element;
+export declare function PanelDescription(props: ComponentProps<'p'>): import("solid-js").JSX.Element;
+/** The trailing group in a panel header: buttons, tabs, a menu. */
+export declare function PanelActions(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+/** A secondary row under the header: a toolbar, tabs, a filter bar. */
+export declare function PanelToolbar(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+/**
+ * The scrolling region.
+ *
+ * `min-h-0` is required and easy to omit: a flex child's default `min-height`
+ * is its content, so without it a long body pushes the panel past its parent
+ * instead of scrolling.
+ */
+export declare function PanelBody(props: ComponentProps<'div'> & {
+    bare?: boolean;
+}): import("solid-js").JSX.Element;
+export declare function PanelFooter(props: ComponentProps<'footer'>): import("solid-js").JSX.Element;
+/**
+ * The centered message a panel shows when it has no content. Distinct from
+ * `Empty`, which is a full-page state with room for media and actions; this is
+ * the in-pane version, sized for a column.
+ */
+export declare function PanelPlaceholder(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=panel.d.ts.map

package/dist/components/layout/panel/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,kCAarD;AAED,6EAA6E;AAC7E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,kCAYzD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,kCAa1D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,kCASrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,kCAS1D;AAED,mEAAmE;AACnE,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD;AAED,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAYxD;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAqC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,kCAWrF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,kCAS1D;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAe5D"}