@adea-ai/ui 0.87.0 → 0.89.1

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

@@ -20,7 +20,7 @@ function TopBar(props) {
 	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);
+			return cn("h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]", 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$;
 	})();
@@ -31,17 +31,17 @@ function TopBarSection(props) {
 	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);
+			return cn("window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-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"]);
+	const [local, rest] = splitProps(props, ["class", "align"]);
 	return (() => {
 		var _el$3 = _tmpl$3();
 		spread(_el$3, mergeProps({ get ["class"]() {
-			return cn("truncate text-sm font-medium", local.class);
+			return cn("truncate text-sm font-medium", local.align === "center" && "text-center", local.class);
 		} }, rest), false, false);
 		return _el$3;
 	})();

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

@@ -1 +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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"}
+{"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-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',\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        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-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'> & { align?: 'start' | 'center' }) {\n  const [local, rest] = splitProps(props, ['class', 'align'])\n  return (\n    <div\n      data-slot=\"top-bar-title\"\n      class={cn(\n        'truncate text-sm font-medium',\n        local.align === 'center' && 'text-center',\n        local.class\n      )}\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/ui/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,kCAQ7D;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG;IACpE,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;CACvC,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAgB5C;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAC1E,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;CACvC,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAoBlD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,kCAG5E"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,KAAK,EAAY,cAAc,EAAE,MAAM,UAAU,CAAA;AA2BxD;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,kCAiC7D;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG;IACpE,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;CACvC,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAgB5C;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAC1E,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;CACvC,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCA+BlD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,kCAc5E"}

package/dist/components/ui/tabs/tabs.js

@@ -1,8 +1,14 @@
 import { cn } from "../../../lib/utils.js";
 import { createComponent, mergeProps } from "solid-js/web";
-import { splitProps } from "solid-js";
+import { createContext, createRenderEffect, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
 import { Tabs } from "@kobalte/core/tabs";
 //#region src/components/ui/tabs/tabs.tsx
+var TabsIdContext = createContext();
+function useTabsId() {
+	const tabs = useContext(TabsIdContext);
+	if (!tabs) throw new Error("[adea-ui]: Tabs parts must be used within Tabs.");
+	return tabs;
+}
 /**
 * Tabs.
 *
@@ -14,10 +20,38 @@ import { Tabs } from "@kobalte/core/tabs";
 * where a full-width underline would collide with the panel's own header rule.
 */
 function Tabs$1(props) {
-	const [local, rest] = splitProps(props, ["class"]);
-	return createComponent(Tabs, mergeProps({ get ["class"]() {
-		return cn("flex flex-col gap-2 data-[orientation=vertical]:flex-row", local.class);
-	} }, rest));
+	const [local, rest] = splitProps(props, ["class", "id"]);
+	const generatedId = `tabs-${createUniqueId()}`;
+	const id = () => local.id ?? generatedId;
+	const [triggerIds, setTriggerIds] = createSignal(/* @__PURE__ */ new Map());
+	const tabs = {
+		id,
+		triggerIds,
+		registerTriggerId: (value, triggerId) => {
+			setTriggerIds((current) => new Map(current).set(value, triggerId));
+		},
+		unregisterTriggerId: (value, triggerId) => {
+			setTriggerIds((current) => {
+				if (current.get(value) !== triggerId) return current;
+				const next = new Map(current);
+				next.delete(value);
+				return next;
+			});
+		}
+	};
+	return createComponent(TabsIdContext.Provider, {
+		value: tabs,
+		get children() {
+			return createComponent(Tabs, mergeProps({
+				get id() {
+					return id();
+				},
+				get ["class"]() {
+					return cn("flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row", local.class);
+				}
+			}, rest));
+		}
+	});
 }
 function TabsList(props) {
 	const [local, rest] = splitProps(props, ["class", "appearance"]);
@@ -26,16 +60,39 @@ function TabsList(props) {
 	} }, rest));
 }
 function TabsTrigger(props) {
-	const [local, rest] = splitProps(props, ["class", "appearance"]);
-	return createComponent(Tabs.Trigger, mergeProps({ get ["class"]() {
-		return cn("inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium", "transition-colors ease-out outline-none select-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", "text-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4", local.appearance === "segmented" ? "h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs" : "h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary", local.class);
-	} }, rest));
+	const [local, rest] = splitProps(props, [
+		"class",
+		"appearance",
+		"id"
+	]);
+	const tabs = useTabsId();
+	const triggerId = () => local.id ?? `${tabs.id()}-trigger-${rest.value}`;
+	createRenderEffect(() => {
+		const value = rest.value;
+		const id = triggerId();
+		tabs.registerTriggerId(value, id);
+		onCleanup(() => tabs.unregisterTriggerId(value, id));
+	});
+	return createComponent(Tabs.Trigger, mergeProps({
+		get id() {
+			return triggerId();
+		},
+		get ["class"]() {
+			return cn("inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium", "transition-colors ease-out outline-none select-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", "text-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4", local.appearance === "segmented" ? "h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs" : "h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary", local.class);
+		}
+	}, rest));
 }
 function TabsContent(props) {
-	const [local, rest] = splitProps(props, ["class"]);
-	return createComponent(Tabs.Content, mergeProps({ get ["class"]() {
-		return cn("flex-1 outline-none", local.class);
-	} }, rest));
+	const [local, rest] = splitProps(props, ["class", "aria-labelledby"]);
+	const tabs = useTabsId();
+	return createComponent(Tabs.Content, mergeProps({
+		get ["aria-labelledby"]() {
+			return local["aria-labelledby"] ?? tabs.triggerIds().get(rest.value) ?? `${tabs.id()}-trigger-${rest.value}`;
+		},
+		get ["class"]() {
+			return cn("min-h-0 min-w-0 flex-1 outline-none", local.class);
+		}
+	}, rest));
 }
 //#endregion
 export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/ui/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","KobalteTabs","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","TabsListProps","List","appearance","TabsList","TabsTriggerProps","Trigger","TabsTrigger","TabsContent","Content","Tabs","_$createComponent","KobalteTabs","_$mergeProps"],"sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as KobalteTabs } from '@kobalte/core/tabs'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Tabs.\n *\n * For switching between sibling views of the *same* subject — a file's code,\n * diff and history. Not for moving between pages: a tab is expected to keep\n * its panel and its scroll position, which a route does not.\n *\n * `appearance=\"segmented\"` gives the joined bar KiroCrew uses inside a pane\n * where a full-width underline would collide with the panel's own header rule.\n */\nexport function Tabs(props: ComponentProps<typeof KobalteTabs>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteTabs\n      class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {\n  appearance?: 'underline' | 'segmented'\n}\n\nexport function TabsList(props: TabsListProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance'])\n\n  return (\n    <KobalteTabs.List\n      class={cn(\n        'inline-flex w-fit shrink-0 items-center justify-center',\n        local.appearance === 'segmented'\n          ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'\n          : 'gap-1 rounded-none border-b border-border',\n        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {\n  appearance?: 'underline' | 'segmented'\n}\n\nexport function TabsTrigger(props: TabsTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance'])\n\n  return (\n    <KobalteTabs.Trigger\n      class={cn(\n        'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',\n        'transition-colors ease-out outline-none select-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'text-foreground',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        local.appearance === 'segmented'\n          ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'\n          : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteTabs.Content class={cn('flex-1 outline-none', local.class)} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgBA,OAAKK,OAA2C;CAC9D,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGP,MAAWQ,WAAA,EAAA,KAAA,WAAA;EAAA,OACHL,GAAG,4DAA4DE,MAAMI,KAAK;CAAC,EAAA,GAC9EH,IAAI,CAAA;AAGd;AAMA,SAAgBO,SAAST,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,SAAS,YAAY,CAAC;CAE/D,OAAAG,gBACGP,KAAYW,MAAIH,WAAA,EAAA,KAAA,WAAA;EAAA,OACRL,GACL,0DACAE,MAAMO,eAAe,cACjB,8CACA,6CACJ,kFACAP,MAAMI,KACR;CAAC,EAAA,GACGH,IAAI,CAAA;AAGd;AAMA,SAAgBU,YAAYZ,OAAyB;CACnD,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,SAAS,YAAY,CAAC;CAE/D,OAAAG,gBACGP,KAAYe,SAAOP,WAAA,EAAA,KAAA,WAAA;EAAA,OACXL,GACL,kGACA,uDACA,oFACA,oDACA,mBACA,+DACAE,MAAMO,eAAe,cACjB,4FACA,2GACJP,MAAMI,KACR;CAAC,EAAA,GACGH,IAAI,CAAA;AAGd;AAEA,SAAgBW,YAAYb,OAAmD;CAC7E,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQP,KAAYkB,SAAOV,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,uBAAuBE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACrF"}
+{"version":3,"file":"tabs.js","names":["Tabs","KobalteTabs","Accessor","ComponentProps","createContext","createRenderEffect","createSignal","createUniqueId","onCleanup","splitProps","useContext","cn","TabsIdContextValue","id","triggerIds","ReadonlyMap","registerTriggerId","value","unregisterTriggerId","TabsIdContext","useTabsId","tabs","Error","props","local","rest","generatedId","setTriggerIds","Map","triggerId","current","set","get","next","delete","_$createComponent","Provider","children","_$mergeProps","class","TabsListProps","List","appearance","TabsList","TabsTriggerProps","Trigger","TabsTrigger","TabsContent","Content","aria-labelledby","Tabs","_$createComponent","KobalteTabs","_$mergeProps"],"sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as KobalteTabs } from '@kobalte/core/tabs'\nimport type { Accessor, ComponentProps } from 'solid-js'\nimport {\n  createContext,\n  createRenderEffect,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { cn } from '#lib/utils'\n\ntype TabsIdContextValue = {\n  id: Accessor<string>\n  triggerIds: Accessor<ReadonlyMap<string, string>>\n  registerTriggerId: (value: string, id: string) => void\n  unregisterTriggerId: (value: string, id: string) => void\n}\n\nconst TabsIdContext = createContext<TabsIdContextValue>()\n\nfunction useTabsId() {\n  const tabs = useContext(TabsIdContext)\n  if (!tabs) throw new Error('[adea-ui]: Tabs parts must be used within Tabs.')\n  return tabs\n}\n\n/**\n * Tabs.\n *\n * For switching between sibling views of the *same* subject — a file's code,\n * diff and history. Not for moving between pages: a tab is expected to keep\n * its panel and its scroll position, which a route does not.\n *\n * `appearance=\"segmented\"` gives the joined bar KiroCrew uses inside a pane\n * where a full-width underline would collide with the panel's own header rule.\n */\nexport function Tabs(props: ComponentProps<typeof KobalteTabs>) {\n  const [local, rest] = splitProps(props, ['class', 'id'])\n  const generatedId = `tabs-${createUniqueId()}`\n  const id = () => local.id ?? generatedId\n  const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())\n  const tabs: TabsIdContextValue = {\n    id,\n    triggerIds,\n    registerTriggerId: (value, triggerId) => {\n      setTriggerIds((current) => new Map(current).set(value, triggerId))\n    },\n    unregisterTriggerId: (value, triggerId) => {\n      setTriggerIds((current) => {\n        if (current.get(value) !== triggerId) return current\n        const next = new Map(current)\n        next.delete(value)\n        return next\n      })\n    },\n  }\n\n  return (\n    <TabsIdContext.Provider value={tabs}>\n      <KobalteTabs\n        id={id()}\n        class={cn(\n          'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',\n          local.class\n        )}\n        {...rest}\n      />\n    </TabsIdContext.Provider>\n  )\n}\n\nexport type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {\n  appearance?: 'underline' | 'segmented'\n}\n\nexport function TabsList(props: TabsListProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance'])\n\n  return (\n    <KobalteTabs.List\n      class={cn(\n        'inline-flex w-fit shrink-0 items-center justify-center',\n        local.appearance === 'segmented'\n          ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'\n          : 'gap-1 rounded-none border-b border-border',\n        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {\n  appearance?: 'underline' | 'segmented'\n}\n\nexport function TabsTrigger(props: TabsTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])\n  const tabs = useTabsId()\n  const triggerId = () => local.id ?? `${tabs.id()}-trigger-${rest.value}`\n\n  // Register before panels render, including SSR where createEffect is skipped.\n  createRenderEffect(() => {\n    const value = rest.value\n    const id = triggerId()\n    tabs.registerTriggerId(value, id)\n    onCleanup(() => tabs.unregisterTriggerId(value, id))\n  })\n\n  return (\n    <KobalteTabs.Trigger\n      id={triggerId()}\n      class={cn(\n        'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',\n        'transition-colors ease-out outline-none select-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'text-foreground',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        local.appearance === 'segmented'\n          ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'\n          : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'aria-labelledby'])\n  const tabs = useTabsId()\n  return (\n    <KobalteTabs.Content\n      aria-labelledby={\n        local['aria-labelledby'] ??\n        tabs.triggerIds().get(rest.value) ??\n        `${tabs.id()}-trigger-${rest.value}`\n      }\n      class={cn('min-h-0 min-w-0 flex-1 outline-none', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/index.js

@@ -106,6 +106,8 @@ import { CatalogBrowser } from "./components/composites/catalog-browser/catalog-
 import { CatalogDetail, CatalogDetailSection } from "./components/composites/catalog-browser/catalog-detail.js";
 import { ListGroup, ListRow } from "./components/composites/list-row/list-row.js";
 import { SettingsField, SettingsPage, SettingsRow, SettingsSection } from "./components/composites/settings/settings.js";
+import { SettingsNavigation } from "./components/composites/settings/settings-navigation.js";
+import { SettingsLayout } from "./components/composites/settings/settings-layout.js";
 import { PropertyList, PropertyRow, PropertyTerm, PropertyValue, Stat, StatGroup } from "./components/composites/stat/stat.js";
 import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./components/composites/appearance-editor/theme-preview.js";
 import { AppearanceEditor, AppearancePopover } from "./components/composites/appearance-editor/appearance-editor.js";
@@ -113,4 +115,4 @@ import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/ver
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
 import { writeClipboardText } from "./lib/clipboard.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavResizeHandle, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, formatBytes, formatReleaseDate, formatToken, initialsFrom, inlineScriptLiteral, isPasteBlock, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, writeClipboardText, zIndexTokens };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavResizeHandle, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, formatBytes, formatReleaseDate, formatToken, initialsFrom, inlineScriptLiteral, isPasteBlock, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, writeClipboardText, zIndexTokens };

package/dist/r/registry.json

@@ -1960,6 +1960,8 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/sidebar-nav",
+        "@adea-ai/ui/tabs",
         "lib"
       ],
       "files": [
@@ -1968,6 +1970,16 @@
           "type": "registry:ui",
           "target": "components/composites/settings/index.ts"
         },
+        {
+          "path": "src/components/composites/settings/settings-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-layout.tsx"
+        },
+        {
+          "path": "src/components/composites/settings/settings-navigation.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-navigation.tsx"
+        },
         {
           "path": "src/components/composites/settings/settings.tsx",
           "type": "registry:ui",

package/dist/r/settings.json

@@ -5,6 +5,8 @@
   "description": "",
   "dependencies": [],
   "registryDependencies": [
+    "@adea-ai/ui/sidebar-nav",
+    "@adea-ai/ui/tabs",
     "lib"
   ],
   "files": [
@@ -13,6 +15,16 @@
       "type": "registry:ui",
       "target": "components/composites/settings/index.ts"
     },
+    {
+      "path": "src/components/composites/settings/settings-layout.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/settings/settings-layout.tsx"
+    },
+    {
+      "path": "src/components/composites/settings/settings-navigation.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/settings/settings-navigation.tsx"
+    },
     {
       "path": "src/components/composites/settings/settings.tsx",
       "type": "registry:ui",

package/dist/r/src/components/composites/settings/index.ts

@@ -1 +1,8 @@
 export { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings'
+export { SettingsLayout, type SettingsLayoutProps } from './settings-layout'
+export {
+  SettingsNavigation,
+  type SettingsNavigationGroup,
+  type SettingsNavigationItem,
+  type SettingsNavigationProps,
+} from './settings-navigation'

package/dist/r/src/components/composites/settings/settings-layout.tsx

@@ -0,0 +1,65 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { Tabs } from '../../ui/tabs'
+import { SettingsNavigation, type SettingsNavigationGroup } from './settings-navigation'
+
+export type SettingsLayoutProps = Omit<
+  ComponentProps<typeof Tabs>,
+  'children' | 'orientation' | 'value' | 'defaultValue' | 'onChange'
+> & {
+  /** Grouped navigation entries; the host owns their values and panel content. */
+  groups: readonly SettingsNavigationGroup[]
+  /** Accessible name for the vertical tab list. */
+  'aria-label': string
+  /** The host-controlled selected destination. */
+  value: string
+  /** Updates the host-controlled selected destination. */
+  onChange: (value: string) => void
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Panels must be rendered as `TabsContent` descendants. */
+  children?: JSX.Element
+}
+
+/**
+ * SettingsLayout.
+ *
+ * A controlled, vertical settings rail beside its scrollable panel viewport.
+ * The host keeps ownership of selection, URL/hash state and panel content.
+ * At narrow viewports the rail contracts while both columns remain shrinkable.
+ */
+export function SettingsLayout(props: SettingsLayoutProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'groups',
+    'aria-label',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+
+  return (
+    <Tabs
+      {...rest}
+      orientation="vertical"
+      value={local.value}
+      class={cn('min-h-0 min-w-0 flex-1 gap-0', local.class)}
+    >
+      <SettingsNavigation
+        aria-label={local['aria-label']}
+        groups={local.groups}
+        value={local.value}
+        onReselect={local.onReselect}
+        revealSelected={local.revealSelected}
+        class="w-24 md:w-sidebar"
+      />
+      <div data-slot="settings-layout-panels" class="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
+        {local.children}
+      </div>
+    </Tabs>
+  )
+}

package/dist/r/src/components/composites/settings/settings-navigation.tsx

@@ -0,0 +1,135 @@
+import type { JSX } from 'solid-js'
+import { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'
+import { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'
+
+/** One host-owned destination in a settings tab list. Values must be unique. */
+export type SettingsNavigationItem = {
+  value: string
+  label: string
+  icon?: JSX.Element
+  disabled?: boolean
+}
+
+/** A visible, accessibly named group of settings destinations. */
+export type SettingsNavigationGroup = {
+  label: string
+  items: readonly SettingsNavigationItem[]
+}
+
+export type SettingsNavigationProps = Omit<
+  TabsListProps,
+  'appearance' | 'children' | 'orientation'
+> & {
+  /** Groups are presentation only; the host owns the tab values and panels. */
+  groups: readonly SettingsNavigationGroup[]
+  /** The same controlled value supplied to the enclosing `Tabs`. */
+  value: string
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Every tab list needs a label independent of its visible group headings. */
+  'aria-label': string
+}
+
+/**
+ * SettingsNavigation.
+ *
+ * A grouped vertical tab list for sibling settings panels. It composes the
+ * shared Tabs behaviour with the shared sidebar row recipe; the host supplies
+ * the controlled value, panel content, icons and any persistence or routing.
+ * Use ordinary tabs for a short, ungrouped row of view choices.
+ *
+ * Kobalte owns roving focus, arrow keys, selection and tab/panel ARIA. This
+ * component adds no URL, storage or host-specific state. Set
+ * `revealSelected={false}` when the surrounding layout does not use an internal
+ * scrolling viewport.
+ */
+export function SettingsNavigation(props: SettingsNavigationProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'aria-label',
+    'groups',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+  const triggers = new Map<string, HTMLButtonElement>()
+  const groupIdPrefix = `settings-navigation-${createUniqueId()}`
+
+  createEffect(() => {
+    const value = local.value
+    const reveal = local.revealSelected
+    if (reveal === false) return
+
+    const revealCurrent = () => {
+      const trigger = triggers.get(value)
+      if (typeof reveal === 'function') reveal(trigger)
+      else trigger?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    }
+
+    revealCurrent()
+    window.addEventListener('resize', revealCurrent)
+    onCleanup(() => window.removeEventListener('resize', revealCurrent))
+  })
+
+  return (
+    <TabsList
+      data-slot="settings-navigation"
+      aria-label={local['aria-label']}
+      orientation="vertical"
+      class={cn(
+        'flex max-h-full min-h-0 min-w-0 shrink-0 flex-col items-stretch justify-start gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.groups.map((group, groupIndex) => {
+        const groupId = `${groupIdPrefix}-group-${groupIndex}`
+        return (
+          <div
+            role="none"
+            data-slot="settings-navigation-group"
+            class="flex min-w-0 flex-col gap-0.5"
+          >
+            <span id={groupId} class="sr-only">
+              {group.label}
+            </span>
+            <span
+              aria-hidden="true"
+              class="px-2 py-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
+            >
+              {group.label}
+            </span>
+            {group.items.map((item) => (
+              <TabsTrigger
+                data-slot="settings-navigation-trigger"
+                orientation="vertical"
+                aria-describedby={groupId}
+                value={item.value}
+                disabled={item.disabled}
+                ref={(element: HTMLButtonElement | undefined) => {
+                  if (element) triggers.set(item.value, element)
+                  else triggers.delete(item.value)
+                }}
+                onClick={() => {
+                  if (local.value === item.value) local.onReselect?.(item.value)
+                }}
+                class={cn(
+                  sidebarNavItemClass,
+                  sidebarNavItemStateClass.idle,
+                  'h-row-lg w-full justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground'
+                )}
+              >
+                {item.icon}
+                <span class="min-w-0 truncate">{item.label}</span>
+              </TabsTrigger>
+            ))}
+          </div>
+        )
+      })}
+    </TabsList>
+  )
+}

package/dist/r/src/components/layout/sidebar-nav/index.ts

@@ -11,6 +11,8 @@ export {
   sidebarNavItemStateClass,
   type SidebarNavItemProps,
   type SidebarNavProps,
+  type SidebarNavSectionProps,
+  type SidebarNavSectionTriggerProps,
   type SidebarNavTitleProps,
 } from './sidebar-nav'
 export {