@adea-ai/ui 0.60.4 → 0.61.0

package/dist/components/layout/sidebar-nav/sidebar-nav.js

@@ -0,0 +1,231 @@
+import { cn } from "../../../lib/utils.js";
+import { createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { ChevronRight } from "lucide-solid";
+import { Show, createSignal, splitProps } from "solid-js";
+import { Polymorphic } from "@kobalte/core/polymorphic";
+//#region src/components/layout/sidebar-nav/sidebar-nav.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-header>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-title>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-content>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-footer>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span class="min-w-0 flex-1 truncate">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span class="shrink-0 tabular-nums text-muted-foreground">`);
+var _tmpl$7 = /*#__PURE__*/ template(`<button type=button class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle">`);
+var _tmpl$8 = /*#__PURE__*/ template(`<span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100">`);
+var _tmpl$9 = /*#__PURE__*/ template(`<div class="flex flex-col gap-0.5">`);
+var _tmpl$0 = /*#__PURE__*/ template(`<div data-slot=sidebar-nav-section><div class="group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60">`);
+var _tmpl$1 = /*#__PURE__*/ template(`<div class="flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase">`);
+var _tmpl$10 = /*#__PURE__*/ template(`<span class="ms-auto flex shrink-0 items-center gap-1">`);
+var _tmpl$11 = /*#__PURE__*/ template(`<button type=button>`);
+function SidebarNav(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"aria-label",
+		"children"
+	]);
+	return createComponent(Polymorphic, mergeProps({
+		as: "nav",
+		get ["aria-label"]() {
+			return local["aria-label"] ?? "Section";
+		},
+		get ["class"]() {
+			return cn("bg-sidebar text-sidebar-foreground flex h-full w-sidebar shrink-0 flex-col border-e border-sidebar-border", local.class);
+		}
+	}, rest, { get children() {
+		return local.children;
+	} }));
+}
+function SidebarNavHeader(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("flex h-topbar shrink-0 items-center justify-between gap-2 px-3", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+function SidebarNavTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("truncate text-sm font-semibold tracking-tight", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+/** The scrolling middle of the sidebar. */
+function SidebarNavContent(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 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
+}
+function SidebarNavFooter(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("flex shrink-0 items-center gap-1 border-t border-sidebar-border p-2", local.class);
+		} }, rest), false, false);
+		return _el$4;
+	})();
+}
+/**
+* A titled, collapsible group. Collapsible because a list of projects
+* inevitably outgrows the column, and the user needs to put the ones they are
+* not using away *without* them disappearing into a menu.
+*/
+function SidebarNavSection(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"label",
+		"collapsible",
+		"defaultOpen",
+		"count",
+		"action",
+		"children"
+	]);
+	const [open, setOpen] = createSignal(local.defaultOpen ?? true);
+	const heading = [
+		createComponent(Show, {
+			get when() {
+				return local.collapsible;
+			},
+			get children() {
+				return createComponent(ChevronRight, {
+					"aria-hidden": "true",
+					get ["class"]() {
+						return cn("size-3.5 shrink-0 text-muted-foreground transition-transform ease-out", { "rotate-90": open() });
+					}
+				});
+			}
+		}),
+		(() => {
+			var _el$5 = _tmpl$5();
+			insert(_el$5, () => local.label);
+			return _el$5;
+		})(),
+		createComponent(Show, {
+			get when() {
+				return local.count !== void 0;
+			},
+			get children() {
+				var _el$6 = _tmpl$6();
+				insert(_el$6, () => local.count);
+				return _el$6;
+			}
+		})
+	];
+	return (() => {
+		var _el$7 = _tmpl$0(), _el$8 = _el$7.firstChild;
+		spread(_el$7, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-0.5", local.class);
+		} }, rest), false, true);
+		insert(_el$8, createComponent(Show, {
+			get when() {
+				return local.collapsible;
+			},
+			get fallback() {
+				return (() => {
+					var _el$10 = _tmpl$1();
+					insert(_el$10, heading);
+					return _el$10;
+				})();
+			},
+			get children() {
+				var _el$9 = _tmpl$7();
+				_el$9.$$click = () => setOpen((value) => !value);
+				insert(_el$9, heading);
+				effect(() => setAttribute(_el$9, "aria-expanded", open()));
+				return _el$9;
+			}
+		}), null);
+		insert(_el$8, createComponent(Show, {
+			get when() {
+				return local.action;
+			},
+			get children() {
+				var _el$0 = _tmpl$8();
+				insert(_el$0, () => local.action);
+				return _el$0;
+			}
+		}), null);
+		insert(_el$7, createComponent(Show, {
+			get when() {
+				return !local.collapsible || open();
+			},
+			get children() {
+				var _el$1 = _tmpl$9();
+				insert(_el$1, () => local.children);
+				return _el$1;
+			}
+		}), null);
+		return _el$7;
+	})();
+}
+/** A sidebar row. Exported classes, so a caller's own element can match it. */
+var sidebarNavItemClass = [
+	"group/nav-item relative flex min-w-0 items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium",
+	"whitespace-nowrap transition-colors ease-out outline-none select-none",
+	"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle",
+	"[&_svg]:size-4 [&_svg]:shrink-0"
+].join(" ");
+var sidebarNavItemStateClass = {
+	active: "bg-primary-subtle text-foreground",
+	idle: "text-muted-foreground hover:bg-surface-hover hover:text-foreground"
+};
+function SidebarNavItem(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"active",
+		"nested",
+		"trailing",
+		"children"
+	]);
+	return createComponent(Polymorphic, mergeProps({
+		as: "a",
+		get ["aria-current"]() {
+			return local.active ? "page" : void 0;
+		},
+		get ["data-active"]() {
+			return local.active ? "" : void 0;
+		},
+		get ["class"]() {
+			return cn(sidebarNavItemClass, local.active ? sidebarNavItemStateClass.active : sidebarNavItemStateClass.idle, { "ps-8": local.nested }, local.class);
+		}
+	}, rest, { get children() {
+		return [memo(() => local.children), createComponent(Show, {
+			get when() {
+				return local.trailing;
+			},
+			get children() {
+				var _el$11 = _tmpl$10();
+				insert(_el$11, () => local.trailing);
+				return _el$11;
+			}
+		})];
+	} }));
+}
+/** A row that is a button rather than a destination — "New project". */
+function SidebarNavButton(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return (() => {
+		var _el$12 = _tmpl$11();
+		spread(_el$12, mergeProps({ get ["class"]() {
+			return cn(sidebarNavItemClass, sidebarNavItemStateClass.idle, "w-full disabled:pointer-events-none disabled:opacity-50", local.class);
+		} }, rest), false, true);
+		insert(_el$12, () => local.children);
+		return _el$12;
+	})();
+}
+delegateEvents(["click"]);
+//#endregion
+export { SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, sidebarNavItemClass, sidebarNavItemStateClass };
+
+//# sourceMappingURL=sidebar-nav.js.map

package/dist/components/layout/sidebar-nav/sidebar-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-nav.js","names":["PolymorphicProps","Polymorphic","ChevronRight","ComponentProps","JSX","ValidComponent","Show","createSignal","splitProps","cn","SidebarNavProps","T","class","SidebarNav","props","local","rest","_$createComponent","_$mergeProps","as","aria-label","children","SidebarNavHeader","_el$","_tmpl$","_$spread","SidebarNavTitle","_el$2","_tmpl$2","SidebarNavContent","_el$3","_tmpl$3","SidebarNavFooter","_el$4","_tmpl$4","SidebarNavSection","label","collapsible","defaultOpen","count","action","Element","open","setOpen","heading","when","_el$5","_tmpl$5","_$insert","undefined","_el$6","_tmpl$6","_el$7","_tmpl$0","_el$8","firstChild","fallback","_el$10","_tmpl$1","_el$9","_tmpl$7","$$click","value","_$effect","_$setAttribute","_el$0","_tmpl$8","_el$1","_tmpl$9","SidebarNavItemProps","active","nested","trailing","sidebarNavItemClass","join","sidebarNavItemStateClass","idle","SidebarNavItem","aria-current","data-active","_$memo","_el$11","_tmpl$10","SidebarNavButton","_el$12","_tmpl$11","_$delegateEvents","_$createComponent","_$mergeProps","_$setAttribute","_$memo","_$delegateEvents"],"sources":["../../../../src/components/layout/sidebar-nav/sidebar-nav.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport { ChevronRight } from 'lucide-solid'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, createSignal, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * SidebarNav.\n *\n * The secondary navigation column: the list of things inside the destination\n * the rail selected — projects, sessions, files, threads. It is a different\n * object from the rail, not a wider version of it, which is why it is a separate\n * component rather than the rail with labels on.\n *\n * Rows share one recipe with the rail's, so a row in a sidebar and a row in a\n * rail read as the same kind of thing at the same density. That recipe is\n * exactly KiroCrew's nav row: `text-sm font-medium`, `gap-2.5`, `px-3 py-2`,\n * `rounded-md`, `transition-colors`.\n *\n * The width comes from `--sidebar-width`. Sections collapse by default only when\n * the caller says so, because a section that starts collapsed and holds the\n * user's own work is a hidden default.\n */\nexport type SidebarNavProps<T extends ValidComponent = 'nav'> = PolymorphicProps<\n  T,\n  { class?: string; 'aria-label'?: string }\n>\n\nexport function SidebarNav<T extends ValidComponent = 'nav'>(props: SidebarNavProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavProps, ['class', 'aria-label', 'children'])\n\n  return (\n    <Polymorphic\n      as=\"nav\"\n      aria-label={local['aria-label'] ?? 'Section'}\n      class={cn(\n        'bg-sidebar text-sidebar-foreground flex h-full w-sidebar shrink-0 flex-col border-e border-sidebar-border',\n        local.class\n      )}\n      {...(rest as ComponentProps<'nav'>)}\n    >\n      {local.children}\n    </Polymorphic>\n  )\n}\n\nexport function SidebarNavHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-header\"\n      class={cn('flex h-topbar shrink-0 items-center justify-between gap-2 px-3', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SidebarNavTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-title\"\n      class={cn('truncate text-sm font-semibold tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** The scrolling middle of the sidebar. */\nexport function SidebarNavContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-content\"\n      class={cn('flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SidebarNavFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sidebar-nav-footer\"\n      class={cn('flex shrink-0 items-center gap-1 border-t border-sidebar-border p-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A titled, collapsible group. Collapsible because a list of projects\n * inevitably outgrows the column, and the user needs to put the ones they are\n * not using away *without* them disappearing into a menu.\n */\nexport function SidebarNavSection(\n  props: ComponentProps<'div'> & {\n    label: string\n    /** Render a disclosure control instead of a plain heading. */\n    collapsible?: boolean\n    defaultOpen?: boolean\n    /** Count shown beside the label. */\n    count?: number\n    /** A control at the trailing edge of the heading row. */\n    action?: JSX.Element\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'collapsible',\n    'defaultOpen',\n    'count',\n    'action',\n    'children',\n  ])\n  const [open, setOpen] = createSignal(local.defaultOpen ?? true)\n\n  const heading = (\n    <>\n      <Show when={local.collapsible}>\n        <ChevronRight\n          aria-hidden=\"true\"\n          class={cn('size-3.5 shrink-0 text-muted-foreground transition-transform ease-out', {\n            'rotate-90': open(),\n          })}\n        />\n      </Show>\n      <span class=\"min-w-0 flex-1 truncate\">{local.label}</span>\n      <Show when={local.count !== undefined}>\n        <span class=\"shrink-0 tabular-nums text-muted-foreground\">{local.count}</span>\n      </Show>\n    </>\n  )\n\n  return (\n    <div data-slot=\"sidebar-nav-section\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <div class=\"group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60\">\n        <Show\n          when={local.collapsible}\n          fallback={\n            <div class=\"flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase\">\n              {heading}\n            </div>\n          }\n        >\n          <button\n            type=\"button\"\n            aria-expanded={open()}\n            onClick={() => setOpen((value) => !value)}\n            class=\"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {heading}\n          </button>\n        </Show>\n        <Show when={local.action}>\n          <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100\">\n            {local.action}\n          </span>\n        </Show>\n      </div>\n      <Show when={!local.collapsible || open()}>\n        <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n      </Show>\n    </div>\n  )\n}\n\nexport type SidebarNavItemProps<T extends ValidComponent = 'a'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    active?: boolean\n    /** Indent one level, for a child row such as a branch under a project. */\n    nested?: boolean\n    /** Trailing slot: a count, a status dot, a hover action. */\n    trailing?: JSX.Element\n  }\n>\n\n/** A sidebar row. Exported classes, so a caller's own element can match it. */\nexport const sidebarNavItemClass = [\n  'group/nav-item relative flex min-w-0 items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium',\n  'whitespace-nowrap transition-colors ease-out outline-none select-none',\n  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n  '[&_svg]:size-4 [&_svg]:shrink-0',\n].join(' ')\n\nexport const sidebarNavItemStateClass = {\n  active: 'bg-primary-subtle text-foreground',\n  idle: 'text-muted-foreground hover:bg-surface-hover hover:text-foreground',\n}\n\nexport function SidebarNavItem<T extends ValidComponent = 'a'>(props: SidebarNavItemProps<T>) {\n  const [local, rest] = splitProps(props as SidebarNavItemProps, [\n    'class',\n    'active',\n    'nested',\n    'trailing',\n    'children',\n  ])\n\n  return (\n    <Polymorphic\n      as=\"a\"\n      aria-current={local.active ? 'page' : undefined}\n      data-active={local.active ? '' : undefined}\n      class={cn(\n        sidebarNavItemClass,\n        local.active ? sidebarNavItemStateClass.active : sidebarNavItemStateClass.idle,\n        { 'ps-8': local.nested },\n        local.class\n      )}\n      {...(rest as ComponentProps<'a'>)}\n    >\n      {local.children}\n      <Show when={local.trailing}>\n        <span class=\"ms-auto flex shrink-0 items-center gap-1\">{local.trailing}</span>\n      </Show>\n    </Polymorphic>\n  )\n}\n\n/** A row that is a button rather than a destination — \"New project\". */\nexport function SidebarNavButton(props: ComponentProps<'button'>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      class={cn(\n        sidebarNavItemClass,\n        sidebarNavItemStateClass.idle,\n        'w-full disabled:pointer-events-none disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/components/layout/status-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBar, StatusBarItem, StatusBarSpacer } from './status-bar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/status-bar/index.d.ts.map

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

package/dist/components/layout/status-bar/status-bar.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * StatusBar.
+ *
+ * The thin strip pinned to the bottom of the window. Its purpose is to hold
+ * *ambient* facts the user checks without acting: connection state, branch,
+ * counts, the current mode. Anything interactive belongs in the top bar or a
+ * pane — a status bar is read, not operated, and a control here is one the user
+ * will not find.
+ *
+ * Height comes from `--statusbar-height`, so a pane's bottom padding can
+ * reserve it without a magic number.
+ */
+export declare function StatusBar(props: ComponentProps<'footer'>): import("solid-js").JSX.Element;
+/** A single readout. `tone` carries meaning; it is not decoration. */
+export declare function StatusBarItem(props: ComponentProps<'span'> & {
+    tone?: 'default' | 'success' | 'warning' | 'destructive';
+    /** Draw a leading state dot, e.g. for a connection. */
+    dot?: boolean;
+}): import("solid-js").JSX.Element;
+/** Pushes everything after it to the trailing edge. */
+export declare function StatusBarSpacer(): import("solid-js").JSX.Element;
+//# sourceMappingURL=status-bar.d.ts.map

package/dist/components/layout/status-bar/status-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/status-bar/status-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,kCAaxD;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAC3B,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;IACxD,uDAAuD;IACvD,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,kCA8BF;AAED,uDAAuD;AACvD,wBAAgB,eAAe,mCAE9B"}

package/dist/components/layout/status-bar/status-bar.js

@@ -0,0 +1,68 @@
+import { cn } from "../../../lib/utils.js";
+import { className, effect, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/layout/status-bar/status-bar.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<footer data-slot=status-bar>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=status-bar-item>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span aria-hidden=true>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span aria-hidden=true class=flex-1>`);
+/**
+* StatusBar.
+*
+* The thin strip pinned to the bottom of the window. Its purpose is to hold
+* *ambient* facts the user checks without acting: connection state, branch,
+* counts, the current mode. Anything interactive belongs in the top bar or a
+* pane — a status bar is read, not operated, and a control here is one the user
+* will not find.
+*
+* Height comes from `--statusbar-height`, so a pane's bottom padding can
+* reserve it without a magic number.
+*/
+function StatusBar(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground flex h-statusbar shrink-0 items-center gap-3 border-t border-border px-3 text-2xs", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+/** A single readout. `tone` carries meaning; it is not decoration. */
+function StatusBarItem(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"tone",
+		"dot",
+		"children"
+	]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap [&_svg]:size-3 [&_svg]:shrink-0", {
+				"text-muted-foreground": local.tone === void 0 || local.tone === "default",
+				"text-success": local.tone === "success",
+				"text-warning": local.tone === "warning",
+				"text-destructive": local.tone === "destructive"
+			}, local.class);
+		} }, rest), false, true);
+		insert(_el$2, (() => {
+			var _c$ = memo(() => !!local.dot);
+			return () => _c$() ? (() => {
+				var _el$3 = _tmpl$3();
+				effect(() => className(_el$3, cn("size-1.5 shrink-0 rounded-full bg-current", { "animate-pulse": local.tone === "warning" })));
+				return _el$3;
+			})() : null;
+		})(), null);
+		insert(_el$2, () => local.children, null);
+		return _el$2;
+	})();
+}
+/** Pushes everything after it to the trailing edge. */
+function StatusBarSpacer() {
+	return _tmpl$4();
+}
+//#endregion
+export { StatusBar, StatusBarItem, StatusBarSpacer };
+
+//# sourceMappingURL=status-bar.js.map

package/dist/components/layout/status-bar/status-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.js","names":["ComponentProps","splitProps","cn","StatusBar","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","StatusBarItem","tone","dot","_el$2","_tmpl$2","undefined","_$insert","_c$","_$memo","_el$3","_tmpl$3","_$effect","_$className","children","StatusBarSpacer","_tmpl$4","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/layout/status-bar/status-bar.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * StatusBar.\n *\n * The thin strip pinned to the bottom of the window. Its purpose is to hold\n * *ambient* facts the user checks without acting: connection state, branch,\n * counts, the current mode. Anything interactive belongs in the top bar or a\n * pane — a status bar is read, not operated, and a control here is one the user\n * will not find.\n *\n * Height comes from `--statusbar-height`, so a pane's bottom padding can\n * reserve it without a magic number.\n */\nexport function StatusBar(props: ComponentProps<'footer'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <footer\n      data-slot=\"status-bar\"\n      class={cn(\n        'text-muted-foreground flex h-statusbar shrink-0 items-center gap-3 border-t border-border px-3 text-2xs',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A single readout. `tone` carries meaning; it is not decoration. */\nexport function StatusBarItem(\n  props: ComponentProps<'span'> & {\n    tone?: 'default' | 'success' | 'warning' | 'destructive'\n    /** Draw a leading state dot, e.g. for a connection. */\n    dot?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'tone', 'dot', 'children'])\n\n  return (\n    <span\n      data-slot=\"status-bar-item\"\n      class={cn(\n        'inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap [&_svg]:size-3 [&_svg]:shrink-0',\n        {\n          'text-muted-foreground': local.tone === undefined || local.tone === 'default',\n          'text-success': local.tone === 'success',\n          'text-warning': local.tone === 'warning',\n          'text-destructive': local.tone === 'destructive',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.dot ? (\n        <span\n          aria-hidden=\"true\"\n          class={cn('size-1.5 shrink-0 rounded-full bg-current', {\n            'animate-pulse': local.tone === 'warning',\n          })}\n        />\n      ) : null}\n      {local.children}\n    </span>\n  )\n}\n\n/** Pushes everything after it to the trailing edge. */\nexport function StatusBarSpacer() {\n  return <span aria-hidden=\"true\" class=\"flex-1\" />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBA,SAAgBG,UAAUC,OAAiC;CACzD,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,2GACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBK,cACdR,OAKA;CACA,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO;EAAC;EAAS;EAAQ;EAAO;CAAU,CAAC;CAE5E,cAAA;EAAA,IAAAW,QAAAC,QAAA;EAAAP,OAAAM,OAAAL,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,+FACA;IACE,yBAAyBG,MAAMQ,SAASI,KAAAA,KAAaZ,MAAMQ,SAAS;IACpE,gBAAgBR,MAAMQ,SAAS;IAC/B,gBAAgBR,MAAMQ,SAAS;IAC/B,oBAAoBR,MAAMQ,SAAS;GACrC,GACAR,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,IAAA;EAAAY,OAAAH,cAAA;GAAA,IAAAI,MAAAC,WAAA,CAAA,CAEPf,MAAMS,GAAG;GAAA,aAATK,IAAA,WAAA;IAAA,IAAAE,QAAAC,QAAA;IAAAC,aAAAC,UAAAH,OAGUnB,GAAG,6CAA6C,EACrD,iBAAiBG,MAAMQ,SAAS,UAClC,CAAC,CAAC,CAAA;IAAA,OAAAQ;GAAA,EAAA,CAAA,IAEF;EAAI,EAAA,CAAA,GAAA,IAAA;EAAAH,OAAAH,aACPV,MAAMoB,UAAQ,IAAA;EAAA,OAAAV;CAAA,EAAA,CAAA;AAGrB;;AAGA,SAAgBW,kBAAkB;CAChC,OAAAC,QAAA;AACF"}

package/dist/components/layout/top-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, type TopBarProps, type TopBarSearchProps, } from './top-bar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/top-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/top-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAA"}

package/dist/components/layout/top-bar/top-bar.d.ts

@@ -0,0 +1,59 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * TopBar.
+ *
+ * The window's title row and primary toolbar. Three tracks: a leading group, a
+ * centred search, and a trailing group. The search is a fixed function of the
+ * window width and the two side groups are equal remainders, which is what
+ * makes the search *exactly* window-centred by construction — no measurement,
+ * no observer, no absolutely-positioned overlay to keep clear of.
+ *
+ * On a frameless desktop window this row is also the drag region, so it carries
+ * `window-drag` and the controls inside it opt back out. `macos-inset` and
+ * `windows-inset` reserve the space the native window controls occupy, which is
+ * why the row can look off-centre in a frameless window and be correct: it is
+ * centred in the space the user can actually see.
+ */
+export type TopBarProps = ComponentProps<'header'> & {
+    /** Make the row draggable, for a frameless window. */
+    draggable?: boolean;
+    /** Reserve space for the macOS traffic lights. */
+    macosInset?: boolean;
+    /** Reserve space for the Windows caption buttons. */
+    windowsInset?: boolean;
+    /** Blur the content scrolling under the bar. */
+    glass?: boolean;
+};
+export declare function TopBar(props: TopBarProps): import("solid-js").JSX.Element;
+/** A side group. Both sides are equal remainders, which centres the search. */
+export declare function TopBarSection(props: ComponentProps<'div'> & {
+    align?: 'start' | 'end';
+}): import("solid-js").JSX.Element;
+export declare function TopBarTitle(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+/** A breadcrumb or path readout that yields to the actions when space runs out. */
+export declare function TopBarBreadcrumb(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+export type TopBarSearchProps = ComponentProps<'button'> & {
+    /** The hint shown inside the field, e.g. "Search projects and files". */
+    placeholder?: string;
+    /** The shortcut chip drawn at the trailing edge, e.g. "⌘K". */
+    shortcut?: string;
+};
+/**
+ * The search affordance in the middle track.
+ *
+ * It is a button, not an input, and that is deliberate: clicking it opens the
+ * command palette, which already owns the input, the ranking and the keyboard
+ * handling. A second live input here would be a second source of truth for the
+ * same query. It is styled to read as a field because that is what it behaves
+ * like from the user's side.
+ */
+export declare function TopBarSearch(props: TopBarSearchProps): import("solid-js").JSX.Element;
+/**
+ * A labelled top-bar control — the readouts KiroCrew puts in the trailing
+ * group. Container queries on the group decide which of these survive a narrow
+ * window; a caller marks the cheap-to-drop ones and the group handles the rest.
+ */
+export declare function TopBarPill(props: ComponentProps<'button'> & {
+    label: string;
+}): import("solid-js").JSX.Element;
+//# sourceMappingURL=top-bar.d.ts.map

package/dist/components/layout/top-bar/top-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAuBxC;AAED,+EAA+E;AAC/E,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,kCAevF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASvD;AAED,mFAAmF;AACnF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAS5D;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAyBpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,kCAqB7E"}

package/dist/components/layout/top-bar/top-bar.js

@@ -0,0 +1,118 @@
+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/top-bar/top-bar.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<header data-slot=top-bar>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=top-bar-section>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=top-bar-title>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=top-bar-breadcrumb>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<kbd class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<button type=button data-slot=top-bar-search><span class=truncate>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<button type=button data-slot=top-bar-pill><span>`);
+function TopBar(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"draggable",
+		"macosInset",
+		"windowsInset",
+		"glass"
+	]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)] items-center gap-3 border-b border-border px-3", local.glass && "glass-panel", local.draggable && "window-drag", local.macosInset && "window-inset-macos", local.windowsInset && "window-inset-windows", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+/** A side group. Both sides are equal remainders, which centres the search. */
+function TopBarSection(props) {
+	const [local, rest] = splitProps(props, ["class", "align"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("flex min-w-0 items-center gap-2 overflow-hidden", local.align === "end" && "justify-end", local.align !== "end" && "justify-start", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+function TopBarTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("truncate text-sm font-medium", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
+}
+/** A breadcrumb or path readout that yields to the actions when space runs out. */
+function TopBarBreadcrumb(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return cn("flex min-w-0 items-center gap-1.5 text-sm", local.class);
+		} }, rest), false, false);
+		return _el$4;
+	})();
+}
+/**
+* The search affordance in the middle track.
+*
+* It is a button, not an input, and that is deliberate: clicking it opens the
+* command palette, which already owns the input, the ranking and the keyboard
+* handling. A second live input here would be a second source of truth for the
+* same query. It is styled to read as a field because that is what it behaves
+* like from the user's side.
+*/
+function TopBarSearch(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"placeholder",
+		"shortcut"
+	]);
+	return (() => {
+		var _el$5 = _tmpl$6(), _el$6 = _el$5.firstChild;
+		spread(_el$5, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground flex h-control-md w-full items-center gap-2 rounded-md border border-input px-3 text-sm", "transition-colors ease-out outline-none", "hover:bg-surface-hover hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "window-no-drag", local.class);
+		} }, rest), false, true);
+		insert(_el$6, () => local.placeholder ?? "Search");
+		insert(_el$5, createComponent(Show, {
+			get when() {
+				return local.shortcut;
+			},
+			get children() {
+				var _el$7 = _tmpl$5();
+				insert(_el$7, () => local.shortcut);
+				return _el$7;
+			}
+		}), null);
+		return _el$5;
+	})();
+}
+/**
+* A labelled top-bar control — the readouts KiroCrew puts in the trailing
+* group. Container queries on the group decide which of these survive a narrow
+* window; a caller marks the cheap-to-drop ones and the group handles the rest.
+*/
+function TopBarPill(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"label",
+		"children"
+	]);
+	return (() => {
+		var _el$8 = _tmpl$7(), _el$9 = _el$8.firstChild;
+		spread(_el$8, mergeProps({ get ["class"]() {
+			return cn("text-muted-foreground inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium", "transition-colors ease-out outline-none", "hover:border-input hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "window-no-drag [&_svg]:size-3.5 [&_svg]:shrink-0", local.class);
+		} }, rest), false, true);
+		insert(_el$8, () => local.children, _el$9);
+		insert(_el$9, () => local.label);
+		return _el$8;
+	})();
+}
+//#endregion
+export { TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle };
+
+//# sourceMappingURL=top-bar.js.map

package/dist/components/layout/top-bar/top-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.js","names":["ComponentProps","Show","splitProps","cn","TopBarProps","draggable","macosInset","windowsInset","glass","TopBar","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","TopBarSection","align","_el$2","_tmpl$2","TopBarTitle","_el$3","_tmpl$3","TopBarBreadcrumb","_el$4","_tmpl$4","TopBarSearchProps","placeholder","shortcut","TopBarSearch","_el$5","_tmpl$6","_el$6","firstChild","_$insert","_$createComponent","when","children","_el$7","_tmpl$5","TopBarPill","label","_el$8","_tmpl$7","_el$9","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * TopBar.\n *\n * The window's title row and primary toolbar. Three tracks: a leading group, a\n * centred search, and a trailing group. The search is a fixed function of the\n * window width and the two side groups are equal remainders, which is what\n * makes the search *exactly* window-centred by construction — no measurement,\n * no observer, no absolutely-positioned overlay to keep clear of.\n *\n * On a frameless desktop window this row is also the drag region, so it carries\n * `window-drag` and the controls inside it opt back out. `macos-inset` and\n * `windows-inset` reserve the space the native window controls occupy, which is\n * why the row can look off-centre in a frameless window and be correct: it is\n * centred in the space the user can actually see.\n */\nexport type TopBarProps = ComponentProps<'header'> & {\n  /** Make the row draggable, for a frameless window. */\n  draggable?: boolean\n  /** Reserve space for the macOS traffic lights. */\n  macosInset?: boolean\n  /** Reserve space for the Windows caption buttons. */\n  windowsInset?: boolean\n  /** Blur the content scrolling under the bar. */\n  glass?: boolean\n}\n\nexport function TopBar(props: TopBarProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'draggable',\n    'macosInset',\n    'windowsInset',\n    'glass',\n  ])\n\n  return (\n    <header\n      data-slot=\"top-bar\"\n      class={cn(\n        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)] items-center gap-3 border-b border-border px-3',\n        local.glass && 'glass-panel',\n        local.draggable && 'window-drag',\n        local.macosInset && 'window-inset-macos',\n        local.windowsInset && 'window-inset-windows',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A side group. Both sides are equal remainders, which centres the search. */\nexport function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  const [local, rest] = splitProps(props, ['class', 'align'])\n\n  return (\n    <div\n      data-slot=\"top-bar-section\"\n      class={cn(\n        'flex min-w-0 items-center gap-2 overflow-hidden',\n        local.align === 'end' && 'justify-end',\n        local.align !== 'end' && 'justify-start',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function TopBarTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"top-bar-title\"\n      class={cn('truncate text-sm font-medium', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** A breadcrumb or path readout that yields to the actions when space runs out. */\nexport function TopBarBreadcrumb(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"top-bar-breadcrumb\"\n      class={cn('flex min-w-0 items-center gap-1.5 text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type TopBarSearchProps = ComponentProps<'button'> & {\n  /** The hint shown inside the field, e.g. \"Search projects and files\". */\n  placeholder?: string\n  /** The shortcut chip drawn at the trailing edge, e.g. \"⌘K\". */\n  shortcut?: string\n}\n\n/**\n * The search affordance in the middle track.\n *\n * It is a button, not an input, and that is deliberate: clicking it opens the\n * command palette, which already owns the input, the ranking and the keyboard\n * handling. A second live input here would be a second source of truth for the\n * same query. It is styled to read as a field because that is what it behaves\n * like from the user's side.\n */\nexport function TopBarSearch(props: TopBarSearchProps) {\n  const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-search\"\n      class={cn(\n        'text-muted-foreground flex h-control-md w-full items-center gap-2 rounded-md border border-input px-3 text-sm',\n        'transition-colors ease-out outline-none',\n        'hover:bg-surface-hover hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag',\n        local.class\n      )}\n      {...rest}\n    >\n      <span class=\"truncate\">{local.placeholder ?? 'Search'}</span>\n      <Show when={local.shortcut}>\n        <kbd class=\"bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex\">\n          {local.shortcut}\n        </kbd>\n      </Show>\n    </button>\n  )\n}\n\n/**\n * A labelled top-bar control — the readouts KiroCrew puts in the trailing\n * group. Container queries on the group decide which of these survive a narrow\n * window; a caller marks the cheap-to-drop ones and the group handles the rest.\n */\nexport function TopBarPill(props: ComponentProps<'button'> & { label: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-pill\"\n      class={cn(\n        'text-muted-foreground inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium',\n        'transition-colors ease-out outline-none',\n        'hover:border-input hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag [&_svg]:size-3.5 [&_svg]:shrink-0',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <span>{local.label}</span>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/components/motion/index.d.ts

@@ -0,0 +1,3 @@
+export { Presence, type PresenceProps } from './presence';
+export { Motion } from 'solid-motionone';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/motion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/motion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/motion/index.js

@@ -0,0 +1,3 @@
+import { Presence as Presence$1 } from "./presence.js";
+import { Motion } from "solid-motionone";
+export { Motion, Presence$1 as Presence };

package/dist/components/motion/presence.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, JSX } from 'solid-js';
+import { Presence as MotionPresence } from 'solid-motionone';
+/**
+ * Presence.
+ *
+ * Enter and exit animation with a guarantee the CSS approach cannot make: an exit
+ * that is **interrupted** — a menu reopened while it is still closing — returns the
+ * element to its shown state instead of finishing the close and then reopening,
+ * which is what a class-based `animate-out` does and what makes a fast user's
+ * interactions feel like the interface is lagging behind them.
+ *
+ * The design system uses CSS transitions for state changes (a hover, a press) and
+ * this for mounting and unmounting, which is the split that keeps the common case
+ * free of a runtime while making the rare case correct.
+ *
+ *   <Show when={open()}>
+ *     <Presence initial={{ opacity: 0, scale: 0.96 }} exit={{ opacity: 0, scale: 0.96 }}>
+ *       <div>…</div>
+ *     </Presence>
+ *   </Show>
+ *
+ * `Presence` keeps the child mounted until its exit finishes, so the `<Show>` above
+ * can stay the only condition in the tree.
+ */
+export type PresenceProps = ComponentProps<typeof MotionPresence> & {
+    children?: JSX.Element;
+};
+export declare function Presence(props: PresenceProps): JSX.Element;
+//# sourceMappingURL=presence.d.ts.map

package/dist/components/motion/presence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.d.ts","sourceRoot":"","sources":["../../../src/components/motion/presence.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAClE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAE5C"}