@logicplanes/kaeso-ui 0.1.0

package/ai/icons.md

@@ -0,0 +1,28 @@
+# Icon vocabulary
+
+Version 0.1.0. Generated from `src/icons/vocabulary.ts`; do not edit. Use the name, never an icon picked by look: `icons.key` always means a key. Hugeicons, Stroke Rounded. Rules: `foundations/icons.md`.
+
+## Kaeso objects
+
+`key`, `providerKey`, `project`, `organization`, `model`, `playground`, `alias`, `limit`, `budget`, `requestLog`, `usage`, `member`, `members`, `serviceAccount`, `settings`, `audit`, `instance`, `provider`, `route`, `gateway`, `database`, `security`, `session`, `overview`, `chart`, `home`
+
+## Capabilities
+
+`tools`, `reasoning`, `vision`, `pdf`, `structuredOutput`
+
+## Actions
+
+`signOut`, `copy`, `externalLink`, `openExternal`, `add`, `close`, `edit`, `delete`, `download`, `upload`, `refresh`, `retry`, `search`, `filter`, `displayOptions`, `more`, `menu`, `sort`, `switcher`, `expand`, `collapse`, `show`, `hide`, `reveal`, `sidebar`, `sidePanel`, `list`, `board`, `stack`
+
+## Status
+
+`check`, `success`, `warning`, `error`, `info`, `minus`, `notification`
+
+## Navigation
+
+`chevronDown`, `chevronUp`, `chevronLeft`, `chevronRight`, `arrowRight`
+
+## Misc
+
+`calendar`, `time`, `code`, `mail`, `keyboard`, `help`, `github`, `themeLight`, `themeDark`, `themeSystem`
+

package/ai/tokens.md

@@ -0,0 +1,207 @@
+# @logicplanes/kaeso-ui tokens
+
+Version 0.1.0. Generated from `@logicplanes/kaeso-tokens`; do not edit. Components use these through role names (`bg-panel`, `text-fg-secondary`, `h-36`, `rounded-pill`); a raw value never appears in a component. How to use them: `foundations/*.md`.
+
+## Neutrals
+
+| Variable | Light | Dark |
+|---|---|---|
+| `--k-bg-panel` | #ffffff | #000000 |
+| `--k-bg-chrome` | #f5f5f5 | #0a0a0a |
+| `--k-bg-raised` | #ffffff | #111111 |
+| `--k-fill-1` | #f5f5f5 | #141414 |
+| `--k-fill-2` | #ebebeb | #1c1c1c |
+| `--k-fill-3` | #e0e0e0 | #262626 |
+| `--k-line-subtle` | #f0f0f0 | #171717 |
+| `--k-line` | #e5e5e5 | #222222 |
+| `--k-line-strong` | #d4d4d4 | #333333 |
+| `--k-text` | #0a0a0a | #fafafa |
+| `--k-text-secondary` | #666666 | #a3a3a3 |
+| `--k-text-tertiary` | #707070 | #858585 |
+| `--k-text-disabled` | #b8b8b8 | #4d4d4d |
+| `--k-ink` | #0a0a0a | #fafafa |
+| `--k-on-ink` | #ffffff | #000000 |
+| `--k-focus` | #0a0a0a | #fafafa |
+| `--k-overlay` | rgb(0 0 0 / 0.24) | rgb(0 0 0 / 0.72) |
+| `--k-panel-ring` | #e5e5e5 | #1a1a1a |
+| `--k-toast-bg` | #0a0a0a | #1c1c1c |
+| `--k-scan` | #ffffff | #ffffff |
+| `--k-on-scan` | #0a0a0a | #0a0a0a |
+| `--k-toast-fg` | #fafafa | #fafafa |
+| `--k-toast-fg-secondary` | #a3a3a3 | #a3a3a3 |
+| `--k-toast-ring` | rgb(255 255 255 / 0.06) | rgb(255 255 255 / 0.09) |
+| `--k-toast-action` | rgb(255 255 255 / 0.12) | rgb(255 255 255 / 0.1) |
+| `--k-toast-action-hover` | rgb(255 255 255 / 0.2) | rgb(255 255 255 / 0.16) |
+| `--k-toast-danger` | #f87171 | #f87171 |
+| `--k-item-hover` | #f5f5f5 | #222222 |
+| `--k-item-pressed` | #ebebeb | #2b2b2b |
+| `--k-control-on-fill` | #ffffff | #222222 |
+| `--k-control-on-fill-hover` | #fafafa | #2b2b2b |
+| `--k-bg-tooltip` | #ffffff | #1c1c1c |
+
+## Status
+
+| Variable | Light | Dark |
+|---|---|---|
+| `--k-success` | #22c55e | #22c55e |
+| `--k-success-text` | #166534 | #4ade80 |
+| `--k-success-tint` | #f0fdf4 | color-mix(in oklab, #22c55e 20%, #000) |
+| `--k-warning` | #f59e0b | #f59e0b |
+| `--k-warning-text` | #92400e | #fbbf24 |
+| `--k-warning-tint` | #fffbeb | color-mix(in oklab, #f59e0b 20%, #000) |
+| `--k-danger` | #ef4444 | #ef4444 |
+| `--k-danger-text` | #b91c1c | #f87171 |
+| `--k-danger-tint` | #fef2f2 | color-mix(in oklab, #ef4444 22%, #000) |
+| `--k-info` | #3b82f6 | #3b82f6 |
+| `--k-info-text` | #1d4ed8 | #60a5fa |
+| `--k-info-tint` | #eff6ff | color-mix(in oklab, #3b82f6 22%, #000) |
+
+## Data
+
+| Variable | Series | Light | Dark |
+|---|---|---|---|
+| `--k-viz-1` | blue | #3b82f6 | #60a5fa |
+| `--k-viz-2` | amber | #f59e0b | #fbbf24 |
+| `--k-viz-3` | emerald | #10b981 | #34d399 |
+| `--k-viz-4` | rose | #f43f5e | #fb7185 |
+| `--k-viz-5` | violet | #8b5cf6 | #a78bfa |
+| `--k-viz-6` | teal | #14b8a6 | #2dd4bf |
+| `--k-viz-7` | orange | #f97316 | #fb923c |
+| `--k-viz-8` | fuchsia | #d946ef | #e879f9 |
+
+## Type
+
+| Utility | Size / line height | Weight | Tracking |
+|---|---|---|---|
+| `text-micro` | 11/14px | 500 | 0.01em |
+| `text-caption` | 12/16px | 500 |  |
+| `text-small` | 13/18px | 400 |  |
+| `text-body` | 14/20px | 400 |  |
+| `text-body-lg` | 15/22px | 500 | -0.005em |
+| `text-title-sm` | 17/24px | 600 | -0.01em |
+| `text-title` | 20/28px | 600 | -0.015em |
+| `text-title-lg` | 28/34px | 600 | -0.022em |
+| `text-display` | 40/44px | 600 | -0.03em |
+| `text-metric` | 28/32px | 600 | -0.02em |
+
+## Controls
+
+| Variable | Height | Padding | Icon | Gap |
+|---|---|---|---|---|
+| `--k-control-xs` | 24px | 10 | 14 | 4 |
+| `--k-control-sm` | 32px | 12 | 16 | 6 |
+| `--k-control-md` | 36px | 16 | 16 | 6 |
+| `--k-control-lg` | 40px | 18 | 18 | 8 |
+| `--k-control-xl` | 48px | 22 | 20 | 8 |
+
+## Rows
+
+| Variable | Height |
+|---|---|
+| `--k-row-list` | 44px |
+| `--k-row-table` | 40px |
+| `--k-row-table-compact` | 36px |
+| `--k-row-table-comfortable` | 48px |
+| `--k-row-menu` | 34px |
+| `--k-row-menu-coarse` | 44px |
+| `--k-row-sidebar` | 32px |
+| `--k-row-option` | 34px |
+| `--k-row-settings` | 64px |
+| `--k-row-settings-single` | 56px |
+| `--k-row-group-header` | 36px |
+| `--k-row-palette` | 40px |
+
+## Radii
+
+| Utility | Value |
+|---|---|
+| `rounded-pill` | pill |
+| `rounded-panel` | 12px |
+| `rounded-menu` | 16px |
+| `rounded-item` | 10px |
+| `rounded-popover` | 16px |
+| `rounded-dialog` | 20px |
+| `rounded-sheet` | 16px |
+| `rounded-group` | 14px |
+| `rounded-well` | 14px |
+| `rounded-tooltip` | 12px |
+| `rounded-palette` | 20px |
+| `rounded-palette-item` | 12px |
+| `rounded-checkbox` | 5px |
+| `rounded-org` | 8px |
+| `rounded-kbd` | 6px |
+| `rounded-code` | 6px |
+| `rounded-bar` | 3px |
+| `rounded-cell` | 3px |
+| `rounded-avatar` | 6px |
+| `rounded-field` | 18px |
+| `rounded-textarea` | 14px |
+| `rounded-cell-lg` | 14px |
+| `rounded-tooltip-lg` | 20px |
+| `rounded-frame` | 24px |
+| `rounded-toast` | 22px |
+
+## Elevation
+
+| Utility | Light | Dark |
+|---|---|---|
+| `shadow-ring` | `inset 0 0 0 1px var(--k-line)` | `inset 0 0 0 1px var(--k-line)` |
+| `shadow-control` | `inset 0 0 0 1px var(--k-line), 0 1px 2px rgb(0 0 0 / 0.05)` | `inset 0 0 0 1px var(--k-line)` |
+| `shadow-control-hover` | `inset 0 0 0 1px var(--k-line-strong), 0 1px 2px rgb(0 0 0 / 0.05)` | `inset 0 0 0 1px var(--k-line-strong)` |
+| `shadow-control-on-fill` | `inset 0 0 0 1px var(--k-line-strong)` | `inset 0 0 0 1px var(--k-line-strong)` |
+| `shadow-selector` | `inset 0 0 0 1px var(--k-line-strong), 0 1px 2px rgb(0 0 0 / 0.05)` | `inset 0 0 0 1px var(--k-line-strong)` |
+| `shadow-selector-hover` | `inset 0 0 0 1px var(--k-text-disabled), 0 1px 2px rgb(0 0 0 / 0.05)` | `inset 0 0 0 1px var(--k-text-disabled)` |
+| `shadow-frame` | `0 0 0 1px var(--k-line)` | `0 0 0 1px var(--k-line)` |
+| `shadow-xs` | `0 0 0 1px var(--k-line), 0 1px 2px rgb(0 0 0 / 0.03)` | `0 0 0 1px var(--k-line)` |
+| `shadow-raised` | `0 0 0 1px var(--k-line), 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 16px 32px -8px rgb(0 0 0 / 0.14)` | `0 0 0 1px #262626, 0 16px 40px rgb(0 0 0 / 0.8)` |
+| `shadow-dialog` | `0 0 0 1px var(--k-line), 0 24px 64px -16px rgb(0 0 0 / 0.24)` | `0 0 0 1px #2a2a2a, 0 32px 80px rgb(0 0 0 / 0.9)` |
+| `shadow-panel` | `0 0 0 1px var(--k-panel-ring), 0 1px 2px rgb(0 0 0 / 0.03)` | `0 0 0 1px var(--k-panel-ring)` |
+| `shadow-segment` | `inset 0 0 0 1px var(--k-line), 0 1px 2px rgb(0 0 0 / 0.06)` | `inset 0 0 0 1px var(--k-line-strong)` |
+| `shadow-toast` | `inset 0 0 0 1px var(--k-toast-ring), 0 2px 6px rgb(0 0 0 / 0.12), 0 12px 32px -8px rgb(0 0 0 / 0.35)` | `inset 0 0 0 1px var(--k-toast-ring), 0 2px 6px rgb(0 0 0 / 0.6), 0 16px 40px rgb(0 0 0 / 0.8)` |
+| `shadow-thumb` | `0 1px 2px rgb(0 0 0 / 0.16), 0 0 0 1px rgb(0 0 0 / 0.04)` | `0 1px 2px rgb(0 0 0 / 0.5)` |
+
+## Motion
+
+| Variable | Value |
+|---|---|
+| `--k-duration-fast` | 120ms |
+| `--k-duration-close-overlay` | 110ms |
+| `--k-duration-overlay` | 160ms |
+| `--k-duration-close-dialog` | 140ms |
+| `--k-duration-dialog` | 200ms |
+| `--k-duration-close-sheet` | 180ms |
+| `--k-duration-sheet` | 240ms |
+| `--k-duration-toast-in` | 220ms |
+| `--k-duration-toast-out` | 160ms |
+| `--k-duration-indicator` | 180ms |
+| `--k-duration-disclosure` | 200ms |
+| `--k-duration-chart` | 240ms |
+| `--k-duration-check` | 140ms |
+| `--k-duration-radio` | 160ms |
+| `--k-duration-copied` | 1200ms |
+| `--k-duration-fresh` | 1000ms |
+| `--k-ease-standard` | cubic-bezier(0.2, 0, 0, 1) |
+| `--k-ease-overlay` | cubic-bezier(0.16, 1, 0.3, 1) |
+| `--k-ease-exit` | cubic-bezier(0.4, 0, 1, 1) |
+| `--k-ease-pulse` | cubic-bezier(0.4, 0, 0.6, 1) |
+| `--k-spinner-turn` | 2400ms |
+| `--k-skeleton-duration` | 1600ms |
+| spinner delay (before it shows) | 300ms |
+| spinner minimum (once shown) | 400ms |
+
+## Layers
+
+| Variable | Value |
+|---|---|
+| `--k-z-sticky` | 10 |
+| `--k-z-sheet` | 40 |
+| `--k-z-overlay` | 50 |
+| `--k-z-toast` | 60 |
+| `--k-z-tooltip` | 70 |
+
+## Lengths
+
+Every length a component may use. The class suffix is the pixel value: `h-36` is 36px. Spacing scale: 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.
+
+0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 32, 34, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96, 112, 120, 140, 160, 180, 200, 220, 240, 248, 260, 280, 320, 360, 400, 440, 480, 560, 640, 720, 760, 800
+

package/dist/blocks/delete-resource.js

@@ -0,0 +1,35 @@
+"use client";
+import { i as e } from "../chunks/context-BELWW79w.js";
+import { t } from "../chunks/dialog-CVqSVk3T.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/blocks/delete-resource/delete-resource.tsx
+var r = { confirm: {
+	typed: { classes: "" },
+	simple: { classes: "" }
+} }, i = { confirm: "typed" };
+function a({ kind: r, name: i, consequence: a, verb: o, confirm: s = "typed", onConfirm: c, trigger: l, open: u, onOpenChange: d, inline: f }) {
+	let p = e();
+	return /* @__PURE__ */ n(t, {
+		title: o === void 0 ? p("deleteResource.deleteTitle", "Delete this {kind}?", { kind: r }) : p("deleteResource.title", "{verb} this {kind}?", {
+			verb: o,
+			kind: r
+		}),
+		description: a,
+		confirmLabel: o === void 0 ? p("deleteResource.deleteConfirm", "Delete {kind}", { kind: r }) : p("deleteResource.confirm", "{verb} {kind}", {
+			verb: o,
+			kind: r
+		}),
+		onConfirm: c,
+		tone: "danger",
+		...s === "typed" ? { confirmText: i } : {},
+		...l ? { trigger: l } : {},
+		...u === void 0 ? {} : { open: u },
+		...d ? { onOpenChange: d } : {},
+		...f ? { inline: f } : {}
+	});
+}
+process.env.NODE_ENV !== "production" && (a.displayName = "DeleteResource");
+//#endregion
+export { a as DeleteResource, i as KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS, r as KAESO_DELETE_RESOURCE_VARIANTS };
+
+//# sourceMappingURL=delete-resource.js.map

package/dist/blocks/delete-resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-resource.js","names":["useUiText","KAESO_DELETE_RESOURCE_VARIANTS","KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS","DeleteResource","t","AlertDialog","verb","consequence","confirm","name","trigger","open","onOpenChange","inline"],"sources":["../../src/blocks/delete-resource/delete-resource.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { AlertDialog } from \"../../components/dialog/dialog.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_DELETE_RESOURCE_VARIANTS = {\n  confirm: {\n    typed: { classes: \"\" },\n    simple: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_DELETE_RESOURCE_DEFAULT_VARIANTS = { confirm: \"typed\" } as const;\n\nexport interface DeleteResourceProps {\n  kind: string;\n  name: string;\n  consequence: ReactNode;\n  verb?: string | undefined;\n  confirm?: keyof typeof KAESO_DELETE_RESOURCE_VARIANTS.confirm | undefined;\n  onConfirm: () => void | Promise<void>;\n  trigger?: ReactElement | undefined;\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  inline?: boolean | undefined;\n}\n\nexport function DeleteResource({ kind, name, consequence, verb, confirm = \"typed\", onConfirm, trigger, open, onOpenChange, inline }: DeleteResourceProps) {\n  const t = useUiText();\n  return (\n    <AlertDialog\n      title={\n        verb === undefined ? t(\"deleteResource.deleteTitle\", \"Delete this {kind}?\", { kind }) : t(\"deleteResource.title\", \"{verb} this {kind}?\", { verb, kind })\n      }\n      description={consequence}\n      confirmLabel={\n        verb === undefined ? t(\"deleteResource.deleteConfirm\", \"Delete {kind}\", { kind }) : t(\"deleteResource.confirm\", \"{verb} {kind}\", { verb, kind })\n      }\n      onConfirm={onConfirm}\n      tone=\"danger\"\n      {...(confirm === \"typed\" ? { confirmText: name } : {})}\n      {...(trigger ? { trigger } : {})}\n      {...(open !== undefined ? { open } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n      {...(inline ? { inline } : {})}\n    />\n  );\n}\nif (process.env.NODE_ENV !== \"production\") DeleteResource.displayName = \"DeleteResource\";\n"],"mappings":";;;;;AAIA,IAAaC,IAAiC,EAC5C,SAAS;CACP,OAAO,EAAE,SAAS,GAAG;CACrB,QAAQ,EAAE,SAAS,GAAG;AACxB,EACF,GACaC,IAAyC,EAAE,SAAS,QAAQ;AAezE,SAAgBC,EAAe,EAAE,SAAM,SAAM,gBAAa,SAAM,aAAU,SAAS,cAAW,YAAS,SAAM,iBAAc,aAA+B;CACxJ,IAAMC,IAAIJ,EAAU;CACpB,OACE,kBAACK,GAAD;EACE,OACEC,MAAS,KAAA,IAAYF,EAAE,8BAA8B,uBAAuB,EAAE,QAAK,CAAC,IAAIA,EAAE,wBAAwB,uBAAuB;GAAE;GAAM;EAAK,CAAC;EAEzJ,aAAaG;EACb,cACED,MAAS,KAAA,IAAYF,EAAE,gCAAgC,iBAAiB,EAAE,QAAK,CAAC,IAAIA,EAAE,0BAA0B,iBAAiB;GAAE;GAAM;EAAK,CAAC;EAEtI;EACX,MAAK;EACL,GAAKI,MAAY,UAAU,EAAE,aAAaC,EAAK,IAAI,CAAC;EACpD,GAAKC,IAAU,EAAE,WAAQ,IAAI,CAAC;EAC9B,GAAKC,MAAS,KAAA,IAAuB,CAAC,IAAZ,EAAE,QAAK;EACjC,GAAKC,IAAe,EAAE,gBAAa,IAAI,CAAC;EACxC,GAAKC,IAAS,EAAE,UAAO,IAAI,CAAC;CAC7B,CAAA;AAEL;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAe,cAAc"}

package/dist/blocks/pages.js

@@ -0,0 +1,70 @@
+"use client";
+import { t as e } from "../chunks/cn-CidVUKMm.js";
+import { t } from "../chunks/app-frame-BBIMch8X.js";
+import { r as n } from "../chunks/page-header-BIRswR73.js";
+import { t as r } from "../chunks/empty-DIbBpytW.js";
+import { a as i, t as a } from "../chunks/section-XStLtXKa.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/blocks/pages/pages.tsx
+var l = { page: {
+	list: { classes: "" },
+	table: { classes: "" },
+	overview: { classes: "" },
+	empty: { classes: "" },
+	auth: { classes: "" }
+} }, u = { page: "list" };
+function d({ header: e, toolbar: r, children: i, sheet: a }) {
+	return /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s(n, {
+			start: /* @__PURE__ */ s(t.MenuButton, {}),
+			...e
+		}),
+		r,
+		/* @__PURE__ */ s(t.Body, { children: i }),
+		a
+	] });
+}
+process.env.NODE_ENV !== "production" && (d.displayName = "ListPage");
+var f = d;
+function p({ header: e, metrics: r, controls: a, chart: l, children: u, aside: d }) {
+	let f = /* @__PURE__ */ c("div", {
+		className: "flex flex-col gap-40",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex flex-wrap items-end justify-between gap-16",
+				children: [r, a && /* @__PURE__ */ s("div", {
+					className: "flex items-center gap-8",
+					children: a
+				})]
+			}),
+			l,
+			u
+		]
+	});
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(n, {
+		start: /* @__PURE__ */ s(t.MenuButton, {}),
+		...e
+	}), /* @__PURE__ */ s(t.Body, { children: /* @__PURE__ */ s("div", {
+		className: "px-24 pt-24 pb-64",
+		children: d ? /* @__PURE__ */ s(i, {
+			aside: d,
+			children: f
+		}) : f
+	}) })] });
+}
+process.env.NODE_ENV !== "production" && (p.displayName = "OverviewPage");
+function m({ header: i, ...a }) {
+	return /* @__PURE__ */ c(o, { children: [i && /* @__PURE__ */ s(n, {
+		start: /* @__PURE__ */ s(t.MenuButton, {}),
+		...i
+	}), /* @__PURE__ */ s(t.Body, { children: /* @__PURE__ */ s("div", {
+		className: e("flex min-h-full items-center justify-center px-24"),
+		children: /* @__PURE__ */ s(r, { ...a })
+	}) })] });
+}
+process.env.NODE_ENV !== "production" && (m.displayName = "EmptyPage");
+var h = a;
+//#endregion
+export { h as AuthPage, m as EmptyPage, u as KAESO_PAGES_DEFAULT_VARIANTS, l as KAESO_PAGES_VARIANTS, d as ListPage, p as OverviewPage, f as TablePage };
+
+//# sourceMappingURL=pages.js.map

package/dist/blocks/pages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pages.js","names":["_Fragment","cn","PageHeader","Empty","SplitView","AuthLayout","KAESO_PAGES_VARIANTS","KAESO_PAGES_DEFAULT_VARIANTS","ListPage","Fragment","AppFrame","header","toolbar","sheet","TablePage","OverviewPage","main","metrics","controls","chart","children","aside","EmptyPage","empty","AuthPage"],"sources":["../../src/blocks/pages/pages.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { AppFrame } from \"../../components/app-frame/app-frame.js\";\nimport { PageHeader, type PageHeaderProps } from \"../../components/page-header/page-header.js\";\nimport { Empty, type EmptyProps } from \"../../components/empty/empty.js\";\nimport { AuthLayout } from \"../../components/section/section.js\";\nimport { SplitView } from \"../../components/section/section.js\";\n\nexport const KAESO_PAGES_VARIANTS = {\n  page: {\n    list: { classes: \"\" },\n    table: { classes: \"\" },\n    overview: { classes: \"\" },\n    empty: { classes: \"\" },\n    auth: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_PAGES_DEFAULT_VARIANTS = { page: \"list\" } as const;\n\nexport interface ListPageProps {\n  header: PageHeaderProps;\n  toolbar?: ReactNode | undefined;\n  children: ReactNode;\n  sheet?: ReactNode | undefined;\n}\n\nexport function ListPage({ header, toolbar, children, sheet }: ListPageProps) {\n  return (\n    <>\n      <PageHeader start={<AppFrame.MenuButton />} {...header} />\n      {toolbar}\n      <AppFrame.Body>{children}</AppFrame.Body>\n      {sheet}\n    </>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") ListPage.displayName = \"ListPage\";\n\nexport const TablePage = ListPage;\n\nexport function OverviewPage({\n  header,\n  metrics,\n  controls,\n  chart,\n  children,\n  aside,\n}: {\n  header: PageHeaderProps;\n  metrics: ReactNode;\n  controls?: ReactNode | undefined;\n  chart?: ReactNode | undefined;\n  children?: ReactNode | undefined;\n  aside?: ReactNode | undefined;\n}) {\n  const main = (\n    <div className=\"flex flex-col gap-40\">\n      <div className=\"flex flex-wrap items-end justify-between gap-16\">\n        {metrics}\n        {controls && <div className=\"flex items-center gap-8\">{controls}</div>}\n      </div>\n      {chart}\n      {children}\n    </div>\n  );\n  return (\n    <>\n      <PageHeader start={<AppFrame.MenuButton />} {...header} />\n      <AppFrame.Body>\n        <div className=\"px-24 pt-24 pb-64\">{aside ? <SplitView aside={aside}>{main}</SplitView> : main}</div>\n      </AppFrame.Body>\n    </>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") OverviewPage.displayName = \"OverviewPage\";\n\nexport function EmptyPage({ header, ...empty }: { header?: PageHeaderProps | undefined } & EmptyProps) {\n  return (\n    <>\n      {header && <PageHeader start={<AppFrame.MenuButton />} {...header} />}\n      <AppFrame.Body>\n        <div className={cn(\"flex min-h-full items-center justify-center px-24\")}>\n          <Empty {...empty} />\n        </div>\n      </AppFrame.Body>\n    </>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") EmptyPage.displayName = \"EmptyPage\";\n\nexport const AuthPage = AuthLayout;\n"],"mappings":";;;;;;;;AAQA,IAAaM,IAAuB,EAClC,MAAM;CACJ,MAAM,EAAE,SAAS,GAAG;CACpB,OAAO,EAAE,SAAS,GAAG;CACrB,UAAU,EAAE,SAAS,GAAG;CACxB,OAAO,EAAE,SAAS,GAAG;CACrB,MAAM,EAAE,SAAS,GAAG;AACtB,EACF,GACaC,IAA+B,EAAE,MAAM,OAAO;AAS3D,SAAgBC,EAAS,EAAE,WAAQ,YAAS,aAAU,YAAwB;CAC5E,OACE,kBAAAR,GAAA,EAAA,UAAA;EACE,kBAACE,GAAD;GAAY,OAAO,kBAACQ,EAAS,YAAV,CAAsB,CAAA;GAAG,GAAIC;EAAS,CAAA;EACxDC;EACD,kBAACF,EAAS,MAAV,EAAgB,YAAwB,CAAA;EACvCG;CACD,EAAA,CAAA;AAEN;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAS,cAAc;AAElE,IAAaC,IAAYN;AAEzB,SAAgBO,EAAa,EAC3B,WACA,YACA,aACA,UACA,aACA,YAQC;CACD,IAAMC,IACJ,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACGC,GACAC,KAAY,kBAAC,OAAD;KAAK,WAAU;KAA2B,UAAAA;IAAc,CAAA,CAClE;;GACJC;GACAC;EACE;;CAEP,OACE,kBAAApB,GAAA,EAAA,UAAA,CACE,kBAACE,GAAD;EAAY,OAAO,kBAACQ,EAAS,YAAV,CAAsB,CAAA;EAAG,GAAIC;CAAS,CAAA,GACzD,kBAACD,EAAS,MAAV,EAAA,UACE,kBAAC,OAAD;EAAK,WAAU;EAAqB,UAAAW,IAAQ,kBAACjB,GAAD;GAAkB;GAAQ,UAAAY;EAAgB,CAAA,IAAIA;CAAU,CAAA,EACvF,CAAA,CACf,EAAA,CAAA;AAEN;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAa,cAAc;AAEtE,SAAgBM,EAAU,EAAE,WAAQ,GAAGC,KAAgE;CACrG,OACE,kBAAAvB,GAAA,EAAA,UAAA,CACGW,KAAU,kBAACT,GAAD;EAAY,OAAO,kBAACQ,EAAS,YAAV,CAAsB,CAAA;EAAG,GAAIC;CAAS,CAAA,GACpE,kBAACD,EAAS,MAAV,EAAA,UACE,kBAAC,OAAD;EAAK,WAAWT,EAAG,mDAAmD;EACpE,UAAA,kBAACE,GAAD,EAAO,GAAIoB,EAAQ,CAAA;CAChB,CAAA,EACQ,CAAA,CACf,EAAA,CAAA;AAEN;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAU,cAAc;AAEnE,IAAaC,IAAWnB"}

package/dist/blocks/resource-list.js

@@ -0,0 +1,68 @@
+"use client";
+import { i as e } from "../chunks/context-BELWW79w.js";
+import { i as t } from "../chunks/input-Biakz6GB.js";
+import { r as n } from "../chunks/toolbar-Dw3uxpsE.js";
+import { t as r } from "../chunks/empty-DIbBpytW.js";
+import { i, o as a } from "../chunks/list-CN8pO8lv.js";
+import { useMemo as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/blocks/resource-list/resource-list.tsx
+var u = { grouping: {
+	grouped: { classes: "" },
+	flat: { classes: "" }
+} }, d = { grouping: "grouped" };
+function f(e) {
+	return `${e.textValue ?? (typeof e.title == "string" ? e.title : "")} ${e.displayId ?? ""}`.toLowerCase();
+}
+function p({ groups: u, onOpen: d, bulkActions: p = [], toolbar: m, emptyTitle: h, emptyDescription: g, emptyAction: _, "aria-label": v }) {
+	let y = e(), [b, x] = s(""), [S, C] = s(/* @__PURE__ */ new Set()), w = b.trim().toLowerCase(), T = o(() => u.map((e) => ({
+		...e,
+		items: e.items.filter((e) => !w || f(e).includes(w))
+	})).filter((e) => e.items.length > 0), [u, w]), E = o(() => {
+		let e = new Set(T.flatMap((e) => e.items.map((e) => e.id)));
+		return new Set([...S].filter((t) => e.has(t)));
+	}, [T, S]);
+	return /* @__PURE__ */ l("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ l(n, {
+			"aria-label": y("resourceList.filters", "Filters"),
+			children: [
+				m,
+				/* @__PURE__ */ c(n.Spacer, {}),
+				/* @__PURE__ */ c("div", {
+					className: "w-240",
+					children: /* @__PURE__ */ c(t, {
+						"aria-label": y("resourceList.search", "Search"),
+						placeholder: y("resourceList.search", "Search"),
+						value: b,
+						onChange: (e) => x(e.target.value),
+						onClear: () => x(""),
+						shortcut: ["/"]
+					})
+				})
+			]
+		}), T.length === 0 ? /* @__PURE__ */ c(r, {
+			size: "md",
+			title: w ? y("resourceList.noMatches", "No matches") : h ?? y("resourceList.nothingHereYet", "Nothing here yet"),
+			...w ? { description: y("resourceList.tryShorterSearch", "Try a shorter search.") } : g ? { description: g } : {},
+			...!w && _ ? { actions: _ } : {}
+		}) : /* @__PURE__ */ c(i, {
+			"aria-label": v,
+			groups: T,
+			selectable: p.length > 0,
+			selected: E,
+			onSelectedChange: C,
+			...d ? { onOpen: d } : {},
+			selectionActions: p.map((e) => /* @__PURE__ */ c(a, {
+				...e.icon ? { icon: e.icon } : {},
+				onClick: () => e.onClick([...E]),
+				children: e.label
+			}, e.label))
+		})]
+	});
+}
+process.env.NODE_ENV !== "production" && (p.displayName = "ResourceList");
+//#endregion
+export { d as KAESO_RESOURCE_LIST_DEFAULT_VARIANTS, u as KAESO_RESOURCE_LIST_VARIANTS, p as ResourceList };
+
+//# sourceMappingURL=resource-list.js.map

package/dist/blocks/resource-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-list.js","names":["useUiText","SearchInput","Toolbar","Empty","SelectionAction","KAESO_RESOURCE_LIST_VARIANTS","KAESO_RESOURCE_LIST_DEFAULT_VARIANTS","searchText","i","ResourceList","ariaLabel","t","query","setQuery","useState","selected","setSelected","q","filtered","useMemo","groups","g","visibleSelection","shown","id","toolbar","emptyTitle","emptyDescription","emptyAction","List","bulkActions","onOpen","a"],"sources":["../../src/blocks/resource-list/resource-list.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { List, SelectionAction, type ListGroup, type ListItemData } from \"../../components/list/list.js\";\nimport { Toolbar } from \"../../components/toolbar/toolbar.js\";\nimport { SearchInput } from \"../../components/input/input.js\";\nimport { Empty } from \"../../components/empty/empty.js\";\nimport type { IconData } from \"../../components/icon/icon.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_RESOURCE_LIST_VARIANTS = {\n  grouping: {\n    grouped: { classes: \"\" },\n    flat: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_RESOURCE_LIST_DEFAULT_VARIANTS = { grouping: \"grouped\" } as const;\n\nexport interface ResourceListProps {\n  groups: ListGroup[];\n  \"aria-label\": string;\n  onOpen?: ((item: ListItemData) => void) | undefined;\n  bulkActions?: { label: string; icon?: IconData | undefined; onClick: (ids: string[]) => void }[] | undefined;\n  toolbar?: ReactNode | undefined;\n  emptyTitle?: string | undefined;\n  emptyDescription?: string | undefined;\n  emptyAction?: ReactNode | undefined;\n}\n\nfunction searchText(i: ListItemData) {\n  return `${i.textValue ?? (typeof i.title === \"string\" ? i.title : \"\")} ${i.displayId ?? \"\"}`.toLowerCase();\n}\n\nexport function ResourceList({\n  groups,\n  onOpen,\n  bulkActions = [],\n  toolbar,\n  emptyTitle,\n  emptyDescription,\n  emptyAction,\n  \"aria-label\": ariaLabel,\n}: ResourceListProps) {\n  const t = useUiText();\n  const [query, setQuery] = useState(\"\");\n  const [selected, setSelected] = useState<Set<string>>(new Set());\n  const q = query.trim().toLowerCase();\n  const filtered = useMemo(\n    () => groups.map((g) => ({ ...g, items: g.items.filter((i) => !q || searchText(i).includes(q)) })).filter((g) => g.items.length > 0),\n    [groups, q],\n  );\n  const visibleSelection = useMemo(() => {\n    const shown = new Set(filtered.flatMap((g) => g.items.map((i) => i.id)));\n    return new Set([...selected].filter((id) => shown.has(id)));\n  }, [filtered, selected]);\n  return (\n    <div className=\"flex flex-col\">\n      <Toolbar aria-label={t(\"resourceList.filters\", \"Filters\")}>\n        {toolbar}\n        <Toolbar.Spacer />\n        <div className=\"w-240\">\n          <SearchInput\n            aria-label={t(\"resourceList.search\", \"Search\")}\n            placeholder={t(\"resourceList.search\", \"Search\")}\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            onClear={() => setQuery(\"\")}\n            shortcut={[\"/\"]}\n          />\n        </div>\n      </Toolbar>\n      {filtered.length === 0 ? (\n        <Empty\n          size=\"md\"\n          title={q ? t(\"resourceList.noMatches\", \"No matches\") : (emptyTitle ?? t(\"resourceList.nothingHereYet\", \"Nothing here yet\"))}\n          {...(q ? { description: t(\"resourceList.tryShorterSearch\", \"Try a shorter search.\") } : emptyDescription ? { description: emptyDescription } : {})}\n          {...(!q && emptyAction ? { actions: emptyAction } : {})}\n        />\n      ) : (\n        <List\n          aria-label={ariaLabel}\n          groups={filtered}\n          selectable={bulkActions.length > 0}\n          selected={visibleSelection}\n          onSelectedChange={setSelected}\n          {...(onOpen ? { onOpen } : {})}\n          selectionActions={bulkActions.map((a) => (\n            <SelectionAction key={a.label} {...(a.icon ? { icon: a.icon } : {})} onClick={() => a.onClick([...visibleSelection])}>\n              {a.label}\n            </SelectionAction>\n          ))}\n        />\n      )}\n    </div>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") ResourceList.displayName = \"ResourceList\";\n"],"mappings":";;;;;;;;;AAQA,IAAaK,IAA+B,EAC1C,UAAU;CACR,SAAS,EAAE,SAAS,GAAG;CACvB,MAAM,EAAE,SAAS,GAAG;AACtB,EACF,GACaC,IAAuC,EAAE,UAAU,UAAU;AAa1E,SAASC,EAAW,GAAiB;CACnC,OAAO,GAAGC,EAAE,cAAc,OAAOA,EAAE,SAAU,WAAWA,EAAE,QAAQ,IAAI,GAAGA,EAAE,aAAa,KAAK,YAAY;AAC3G;AAEA,SAAgBC,EAAa,EAC3B,WACA,WACA,iBAAc,CAAC,GACf,YACA,eACA,qBACA,gBACA,cAAcC,KACM;CACpB,IAAMC,IAAIX,EAAU,GACd,CAACY,GAAOC,KAAYC,EAAS,EAAE,GAC/B,CAACC,GAAUC,KAAeF,kBAAsB,IAAI,IAAI,CAAC,GACzDG,IAAIL,EAAM,KAAK,CAAC,CAAC,YAAY,GAC7BM,IAAWC,QACTC,EAAO,KAAK,OAAO;EAAE,GAAGC;EAAG,OAAOA,EAAE,MAAM,QAAQ,MAAM,CAACJ,KAAKV,EAAWC,CAAC,CAAC,CAAC,SAASS,CAAC,CAAC;CAAE,EAAE,CAAC,CAAC,QAAQ,MAAMI,EAAE,MAAM,SAAS,CAAC,GACnI,CAACD,GAAQH,CAAC,CACZ,GACMK,IAAmBH,QAAc;EACrC,IAAMI,IAAQ,IAAI,IAAIL,EAAS,SAAS,MAAMG,EAAE,MAAM,KAAK,MAAMb,EAAE,EAAE,CAAC,CAAC;EACvE,OAAO,IAAI,IAAI,CAAC,GAAGO,CAAQ,CAAC,CAAC,QAAQ,MAAOQ,EAAM,IAAIC,CAAE,CAAC,CAAC;CAC5D,GAAG,CAACN,GAAUH,CAAQ,CAAC;CACvB,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAACb,GAAD;GAAS,cAAYS,EAAE,wBAAwB,SAAS;GAAxD,UAAA;IACGc;IACD,kBAACvB,EAAQ,QAAT,CAAiB,CAAA;IACjB,kBAAC,OAAD;KAAK,WAAU;KACb,UAAA,kBAACD,GAAD;MACE,cAAYU,EAAE,uBAAuB,QAAQ;MAC7C,aAAaA,EAAE,uBAAuB,QAAQ;MAC9C,OAAOC;MACP,WAAW,MAAMC,EAAS,EAAE,OAAO,KAAK;MACxC,eAAeA,EAAS,EAAE;MAC1B,UAAU,CAAC,GAAG;KACf,CAAA;IACE,CAAA;GACE;EACR,CAAA,GAAAK,EAAS,WAAW,IACnB,kBAACf,GAAD;GACE,MAAK;GACL,OAAOc,IAAIN,EAAE,0BAA0B,YAAY,IAAKe,KAAcf,EAAE,+BAA+B,kBAAkB;GACzH,GAAKM,IAAI,EAAE,aAAaN,EAAE,iCAAiC,uBAAuB,EAAE,IAAIgB,IAAmB,EAAE,aAAaA,EAAiB,IAAI,CAAC;GAChJ,GAAK,CAACV,KAAKW,IAAc,EAAE,SAASA,EAAY,IAAI,CAAC;EACtD,CAAA,IAED,kBAACC,GAAD;GACE,cAAYnB;GACZ,QAAQQ;GACR,YAAYY,EAAY,SAAS;GACjC,UAAUR;GACV,kBAAkBN;GAClB,GAAKe,IAAS,EAAE,UAAO,IAAI,CAAC;GAC5B,kBAAkBD,EAAY,KAAK,MACjC,kBAAC1B,GAAD;IAA+B,GAAK4B,EAAE,OAAO,EAAE,MAAMA,EAAE,KAAK,IAAI,CAAC;IAAI,eAAeA,EAAE,QAAQ,CAAC,GAAGV,CAAgB,CAAC;IAChH,UAAAU,EAAE;GACY,GAFKA,EAAE,KAEP,CAClB;EACF,CAAA,CAEA;;AAET;AACA,QAAA,IAAA,aAA6B,iBAAc,EAAa,cAAc"}

package/dist/chunks/app-frame-BBIMch8X.js

@@ -0,0 +1,224 @@
+"use client";
+import { t as e } from "./cn-CidVUKMm.js";
+import { r as t } from "./portal-context-BBbzDKmY.js";
+import { t as n } from "./inset-BLMdxX4I.js";
+import { i as r } from "./context-BELWW79w.js";
+import { a as i } from "./button-BHKAE6ui.js";
+import { t as a } from "./icon-button-Bw67oKtx.js";
+import { c as o, l as s, s as c, t as l } from "./sidebar-C4fL_KMm.js";
+import { createContext as u, forwardRef as d, useContext as f, useEffect as p, useId as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { SidebarLeftIcon as y } from "@hugeicons/core-free-icons";
+import { Dialog as b } from "@base-ui/react/dialog";
+//#region src/components/app-frame/app-frame.tsx
+var x = { fill: {
+	screen: { classes: "h-dvh" },
+	parent: { classes: "h-full" }
+} }, S = { fill: "screen" }, C = /* @__PURE__ */ u({
+	openNav: () => void 0,
+	embedded: !1
+}), w = () => f(C), T = /* @__PURE__ */ d(function({ sidebar: t, children: n, corner: r, fill: i = "screen", brandHref: a, brandLabel: o, className: s }, c) {
+	let [l, u] = g(!1), d = h(null), f = `k-main-${m().replace(/[^\w-]/g, "")}`, p = i === "screen" ? "main" : "div";
+	return /* @__PURE__ */ v(C.Provider, {
+		value: {
+			openNav: () => u(!0),
+			embedded: i === "parent"
+		},
+		children: [/* @__PURE__ */ v("div", {
+			ref: c,
+			className: e("relative isolate flex w-full flex-col overflow-hidden bg-chrome text-fg lg:flex-row", x.fill[i].classes, s),
+			children: [
+				/* @__PURE__ */ _(E, { target: f }),
+				/* @__PURE__ */ _("div", {
+					className: "hidden h-full lg:flex",
+					children: t
+				}),
+				/* @__PURE__ */ _(D, {
+					banner: i === "screen",
+					href: a,
+					label: o,
+					open: l,
+					onOpen: () => u(!0),
+					toggleRef: d
+				}),
+				/* @__PURE__ */ _(p, {
+					id: f,
+					className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-panel outline-none safe-area-panel lg:my-8 lg:mr-8 lg:rounded-panel lg:shadow-panel",
+					children: n
+				}),
+				r && /* @__PURE__ */ _("div", {
+					className: "fixed right-16 bottom-16 z-10 flex items-center gap-8",
+					children: r
+				})
+			]
+		}), /* @__PURE__ */ _(A, {
+			navOpen: l,
+			setNavOpen: u,
+			returnFocus: d,
+			children: t
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (T.displayName = "AppFrame");
+function E({ target: t }) {
+	let n = r();
+	return /* @__PURE__ */ _("a", {
+		href: `#${t}`,
+		onClick: (e) => {
+			let n = document.getElementById(t);
+			n && (e.preventDefault(), n.setAttribute("tabindex", "-1"), n.addEventListener("blur", () => n.removeAttribute("tabindex"), { once: !0 }), n.focus());
+		},
+		className: e(i({ size: "sm" }), "absolute top-8 left-8 z-50 not-focus:sr-only"),
+		children: n("appFrame.skipToContent", "Skip to content")
+	});
+}
+process.env.NODE_ENV !== "production" && (E.displayName = "AppFrame.SkipLink");
+function D({ banner: e, href: t, label: n, open: i, onOpen: o, toggleRef: s }) {
+	let c = e ? "header" : "div", u = r();
+	return /* @__PURE__ */ _(c, {
+		"data-phone-bar": "",
+		className: "shrink-0 bg-panel safe-area-bar lg:hidden",
+		children: /* @__PURE__ */ v("div", {
+			className: "mt-8 flex h-52 items-center justify-between pr-20 pl-28",
+			children: [/* @__PURE__ */ _(l, {
+				href: t,
+				label: n
+			}), /* @__PURE__ */ _(a, {
+				ref: s,
+				icon: y,
+				"aria-label": u("appFrame.openNavigation", "Open navigation"),
+				"aria-haspopup": "dialog",
+				"aria-expanded": i,
+				tooltip: !1,
+				onClick: o
+			})]
+		})
+	});
+}
+process.env.NODE_ENV !== "production" && (D.displayName = "AppFrame.PhoneBar");
+function O({ open: e, onOpenChange: n, peek: i = !1, returnFocus: a, children: s }) {
+	let l = h(void 0), u = r();
+	return p(() => {
+		if (!e || i || typeof window > "u") return;
+		let t = window.matchMedia("(min-width: 1024px)"), r = () => t.matches && n(!1);
+		return r(), t.addEventListener("change", r), () => t.removeEventListener("change", r);
+	}, [
+		e,
+		i,
+		n
+	]), /* @__PURE__ */ _(b.Root, {
+		open: e,
+		onOpenChange: (e) => n(e),
+		modal: !i,
+		children: /* @__PURE__ */ v(b.Portal, {
+			container: t(),
+			children: [/* @__PURE__ */ _(b.Backdrop, { className: "fixed inset-0 z-40 bg-overlay opacity-60 backdrop-motion" }), /* @__PURE__ */ _(b.Popup, {
+				"aria-label": u("appFrame.navigation", "Navigation"),
+				"data-side": "left",
+				initialFocus: !i,
+				...a ? { finalFocus: a } : {},
+				className: "fixed top-0 bottom-0 left-0 z-40 flex overflow-hidden rounded-r-sheet bg-chrome shadow-dialog outline-none safe-area-sheet sheet-motion",
+				onClick: (e) => {
+					e.target.closest("a[href]") && n(!1);
+				},
+				onPointerEnter: () => clearTimeout(l.current),
+				onPointerLeave: () => {
+					i && (l.current = setTimeout(() => n(!1), 160));
+				},
+				children: /* @__PURE__ */ _(c.Provider, {
+					value: !0,
+					children: /* @__PURE__ */ _(o.Provider, {
+						value: {
+							close: () => n(!1),
+							peek: i
+						},
+						children: s
+					})
+				})
+			})]
+		})
+	});
+}
+process.env.NODE_ENV !== "production" && (O.displayName = "NavSheet");
+var k = 750;
+function A({ navOpen: e, setNavOpen: t, returnFocus: n, children: r }) {
+	let { peeking: i, setPeeking: a } = s();
+	return /* @__PURE__ */ _(O, {
+		open: e || i,
+		peek: i && !e,
+		...e ? { returnFocus: n } : {},
+		onOpenChange: (e) => {
+			e || (t(!1), a(!1));
+		},
+		children: r
+	});
+}
+function j({ className: t }) {
+	let { openNav: n } = w(), { collapsed: i, setCollapsed: o, setPeeking: c } = s(), l = h(void 0), u = r(), d = () => typeof window < "u" && window.matchMedia("(min-width: 1024px)").matches;
+	return /* @__PURE__ */ _(a, {
+		onPointerEnter: () => {
+			i && d() && (l.current = setTimeout(() => c(!0), 750));
+		},
+		onPointerLeave: () => clearTimeout(l.current),
+		icon: y,
+		"data-sidebar-expand": "",
+		"aria-label": i ? u("appFrame.expandSidebar", "Expand sidebar") : u("appFrame.openNavigation", "Open navigation"),
+		shortcut: i ? ["["] : void 0,
+		onClick: () => {
+			clearTimeout(l.current), i && d() ? o(!1) : n();
+		},
+		className: e("hidden", i && "lg:inline-flex", t)
+	});
+}
+process.env.NODE_ENV !== "production" && (j.displayName = "AppFrame.MenuButton");
+var M = { padding: {
+	none: { classes: "" },
+	list: { classes: "pt-8 pb-24" },
+	page: { classes: "px-24 pt-16 pb-48" }
+} }, N = { padding: "none" }, P = /* @__PURE__ */ d(function({ className: t, padding: n = "none", ...r }, i) {
+	return /* @__PURE__ */ _("div", {
+		ref: i,
+		className: e("min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-quiet", M.padding[n].classes, t),
+		...r
+	});
+});
+process.env.NODE_ENV !== "production" && (P.displayName = "AppFrame.Body");
+var F = /* @__PURE__ */ d(function({ title: t, description: r, actions: i, className: a, children: o, ...s }, c) {
+	return /* @__PURE__ */ v(P, {
+		ref: c,
+		className: "relative",
+		children: [/* @__PURE__ */ _(j, { className: "absolute top-10 left-12 z-10" }), /* @__PURE__ */ v("div", {
+			className: e("mx-auto w-full max-w-settings px-24 pt-64 pb-96", a),
+			...s,
+			children: [/* @__PURE__ */ v("header", {
+				className: "flex flex-col gap-8",
+				children: [/* @__PURE__ */ v("div", {
+					className: "flex items-start justify-between gap-16",
+					children: [/* @__PURE__ */ _("h1", {
+						className: "min-w-0 text-title-lg font-semibold text-fg text-balance",
+						children: t
+					}), i && /* @__PURE__ */ _("div", {
+						className: "flex h-34 shrink-0 items-center gap-8",
+						children: i
+					})]
+				}), r && /* @__PURE__ */ _("p", {
+					className: "text-body-lg font-regular text-fg-secondary",
+					children: r
+				})]
+			}), /* @__PURE__ */ _("div", {
+				className: "mt-8",
+				children: /* @__PURE__ */ _(n, { children: o })
+			})]
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (F.displayName = "AppFrame.Settings");
+var I = /* @__PURE__ */ Object.assign(T, {
+	MenuButton: j,
+	Body: P,
+	Settings: F
+});
+//#endregion
+export { x as a, w as c, S as i, N as n, O as o, M as r, k as s, I as t };
+
+//# sourceMappingURL=app-frame-BBIMch8X.js.map