@adea-ai/ui 0.84.0 → 0.87.0

package/dist/components/composites/list-row/list-row.d.ts

@@ -14,9 +14,8 @@ import type { ComponentProps, JSX, ValidComponent } from 'solid-js';
  * arithmetic.
  *
  * A row is only interactive when it is given an `as` that can be activated
- * (an anchor, a button) or an `onClick`. Without either it renders as a
- * `div` with no hover treatment, because a hover state on something that does
- * nothing is a lie.
+ * (an anchor, a button) or an `onClick`. Click handlers default to a native
+ * button; a row without either remains a `div` with no hover treatment.
  */
 export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<T, {
     class?: string;
@@ -30,6 +29,10 @@ export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<T,
     trailing?: JSX.Element;
     /** A dimmed second line under the main content. */
     description?: string;
+    /** A short explanation shown on pointer hover and keyboard focus. */
+    tooltip?: string;
+    /** Native button type; defaults to `button` for button rows. */
+    type?: ComponentProps<'button'>['type'];
 }>;
 export declare function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>): JSX.Element;
 /**

package/dist/components/composites/list-row/list-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-row.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAInE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC3E,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CACF,CAAA;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,eA+C/E;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAoBhG"}
+{"version":3,"file":"list-row.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAKnE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC3E,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CACF,CAAA;AA8FD,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,eAwB/E;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAoBhG"}

package/dist/components/composites/list-row/list-row.js

@@ -1,27 +1,40 @@
 import { cn } from "../../../lib/utils.js";
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
+import { className, createComponent, effect, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { Show, splitProps } from "solid-js";
 import { Polymorphic } from "@kobalte/core/polymorphic";
 //#region src/components/composites/list-row/list-row.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span class="flex size-4 shrink-0 items-center justify-center [&amp;_svg]:size-4">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span class="text-muted-foreground truncate text-xs">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=list-row-description>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<span class="flex min-w-0 flex-1 flex-col"><span class=truncate>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<span class="ms-auto flex shrink-0 items-center gap-1 text-muted-foreground">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span data-slot=list-row-trailing>`);
 var _tmpl$5 = /*#__PURE__*/ template(`<span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100">`);
 var _tmpl$6 = /*#__PURE__*/ template(`<div class="group/list-header flex items-center gap-1 px-2 py-1"><span class="min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase">`);
 var _tmpl$7 = /*#__PURE__*/ template(`<div data-slot=list-group><div class="flex flex-col gap-0.5">`);
-function ListRow(props) {
+function ListRowBase(props) {
 	const [local, rest] = splitProps(props, [
+		"as",
 		"class",
 		"selected",
 		"dense",
 		"leading",
 		"trailing",
 		"description",
+		"tooltip",
+		"type",
+		"tabIndex",
 		"children"
 	]);
 	return createComponent(Polymorphic, mergeProps({
-		as: "div",
+		get as() {
+			return local.as ?? "div";
+		},
+		get type() {
+			return memo(() => local.as === "button")() ? local.type ?? "button" : local.type;
+		},
+		get tabIndex() {
+			return local.tabIndex ?? (local.as === "button" || local.as === "a" ? 0 : void 0);
+		},
 		get ["aria-current"]() {
 			return local.selected ? "true" : void 0;
 		},
@@ -30,8 +43,10 @@ function ListRow(props) {
 		},
 		get ["class"]() {
 			return cn("group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm", "transition-colors ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", {
-				"h-row-sm": local.dense,
-				"h-row-md": !local.dense
+				"h-row-sm": local.dense && !local.description,
+				"h-row-md": !local.dense && !local.description,
+				"min-h-row-sm py-1": local.dense && local.description,
+				"min-h-row-md py-1.5": !local.dense && local.description
 			}, {
 				"bg-primary-subtle text-foreground": local.selected,
 				"hover:bg-surface-hover": !local.selected
@@ -59,6 +74,7 @@ function ListRow(props) {
 					get children() {
 						var _el$4 = _tmpl$2();
 						insert(_el$4, () => local.description);
+						effect(() => className(_el$4, cn("truncate text-xs", local.selected ? "text-foreground" : "text-muted-foreground")));
 						return _el$4;
 					}
 				}), null);
@@ -71,12 +87,58 @@ function ListRow(props) {
 				get children() {
 					var _el$5 = _tmpl$4();
 					insert(_el$5, () => local.trailing);
+					effect(() => className(_el$5, cn("ms-auto flex shrink-0 items-center gap-1", local.selected ? "text-foreground" : "text-muted-foreground")));
 					return _el$5;
 				}
 			})
 		];
 	} }));
 }
+/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */
+function ListRowTooltipTarget(props) {
+	const [local, rest] = splitProps(props, ["rowAs"]);
+	return createComponent(ListRowBase, mergeProps({ get as() {
+		return local.rowAs;
+	} }, rest));
+}
+function ListRow(props) {
+	const [local, rest] = splitProps(props, ["as", "tooltip"]);
+	const hasClickHandler = () => Boolean(rest.onClick || rest["on:click"]);
+	const rowAs = () => local.as ?? (hasClickHandler() ? "button" : "div");
+	const rowType = () => rowAs() === "button" ? rest.type ?? "button" : rest.type;
+	return createComponent(Show, {
+		get when() {
+			return local.tooltip;
+		},
+		get fallback() {
+			return createComponent(ListRowBase, mergeProps({
+				get as() {
+					return rowAs();
+				},
+				get type() {
+					return rowType();
+				}
+			}, rest));
+		},
+		get children() {
+			return createComponent(Tooltip, { get children() {
+				return [createComponent(TooltipTrigger, mergeProps({
+					as: ListRowTooltipTarget,
+					get rowAs() {
+						return rowAs();
+					},
+					get type() {
+						return rowType();
+					}
+				}, rest, { get children() {
+					return rest.children;
+				} })), createComponent(TooltipContent, { get children() {
+					return local.tooltip;
+				} })];
+			} });
+		}
+	});
+}
 /**
 * A group of rows with an optional heading and a scrolling body. The heading is
 * a plain label rather than a control: grouping is for reading, and a

package/dist/components/composites/list-row/list-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-row.js","names":["PolymorphicProps","Polymorphic","ComponentProps","JSX","ValidComponent","Show","splitProps","cn","ListRowProps","T","class","selected","dense","leading","Element","trailing","description","ListRow","props","local","rest","_$createComponent","_$mergeProps","as","aria-current","undefined","data-selected","children","when","_el$","_tmpl$","_$insert","_el$2","_tmpl$3","_el$3","firstChild","_el$4","_tmpl$2","_el$5","_tmpl$4","ListGroup","label","action","_el$6","_tmpl$7","_el$0","_$spread","_el$7","_tmpl$6","_el$8","_el$9","_tmpl$5","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/composites/list-row/list-row.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * ListRow.\n *\n * One row in a list of like things: a project, a session, a file, a person. It\n * is the highest-frequency component in an application of this shape, and the\n * one where a half-pixel of drift is most visible — twenty rows of a sidebar\n * make any inconsistency in height or padding obvious.\n *\n * The structure is fixed at four slots — `leading`, `children`, `meta`,\n * `trailing` — so rows that show an avatar, an icon, a status dot, a timestamp\n * and an overflow menu all sit at the same height without the caller doing\n * arithmetic.\n *\n * A row is only interactive when it is given an `as` that can be activated\n * (an anchor, a button) or an `onClick`. Without either it renders as a\n * `div` with no hover treatment, because a hover state on something that does\n * nothing is a lie.\n */\nexport type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the row as current. Sets `aria-current` for a link row. */\n    selected?: boolean\n    /** Draw the row at the compact height. */\n    dense?: boolean\n    /** Leading slot: an avatar, an icon, a checkbox. */\n    leading?: JSX.Element\n    /** Trailing slot: a count, a menu trigger, a timestamp. */\n    trailing?: JSX.Element\n    /** A dimmed second line under the main content. */\n    description?: string\n  }\n>\n\nexport function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps, [\n    'class',\n    'selected',\n    'dense',\n    'leading',\n    'trailing',\n    'description',\n    'children',\n  ])\n\n  return (\n    <Polymorphic\n      as=\"div\"\n      aria-current={local.selected ? 'true' : undefined}\n      data-selected={local.selected ? '' : undefined}\n      class={cn(\n        'group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',\n        'transition-colors ease-out outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        { 'h-row-sm': local.dense, 'h-row-md': !local.dense },\n        {\n          'bg-primary-subtle text-foreground': local.selected,\n          'hover:bg-surface-hover': !local.selected,\n        },\n        local.class\n      )}\n      {...(rest as ComponentProps<'div'>)}\n    >\n      <Show when={local.leading}>\n        <span class=\"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4\">\n          {local.leading}\n        </span>\n      </Show>\n      <span class=\"flex min-w-0 flex-1 flex-col\">\n        <span class=\"truncate\">{local.children}</span>\n        <Show when={local.description}>\n          <span class=\"text-muted-foreground truncate text-xs\">{local.description}</span>\n        </Show>\n      </span>\n      <Show when={local.trailing}>\n        <span class=\"ms-auto flex shrink-0 items-center gap-1 text-muted-foreground\">\n          {local.trailing}\n        </span>\n      </Show>\n    </Polymorphic>\n  )\n}\n\n/**\n * A group of rows with an optional heading and a scrolling body. The heading is\n * a plain label rather than a control: grouping is for reading, and a\n * disclosure on a list of five rows costs more attention than it saves.\n */\nexport function ListGroup(props: ComponentProps<'div'> & { label?: string; action?: JSX.Element }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])\n\n  return (\n    <div data-slot=\"list-group\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"group/list-header flex items-center gap-1 px-2 py-1\">\n          <span class=\"min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {local.label}\n          </span>\n          <Show when={local.action}>\n            <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100\">\n              {local.action}\n            </span>\n          </Show>\n        </div>\n      </Show>\n      <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAyCA,SAAgBiB,QAA0CC,OAAwB;CAChF,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAuB;EACtD;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,OAAAG,gBACGpB,aAAWqB,WAAA;EACVC,IAAE;EAAA,KAAA,kBAAA;GAAA,OACYJ,MAAMR,WAAW,SAASc,KAAAA;EAAS;EAAA,KAAA,mBAAA;GAAA,OAClCN,MAAMR,WAAW,KAAKc,KAAAA;EAAS;EAAA,KAAA,WAAA;GAAA,OACvClB,GACL,uEACA,2CACA,oFACA;IAAE,YAAYY,MAAMP;IAAO,YAAY,CAACO,MAAMP;GAAM,GACpD;IACE,qCAAqCO,MAAMR;IAC3C,0BAA0B,CAACQ,MAAMR;GACnC,GACAQ,MAAMT,KACR;EAAC;CAAA,GACIU,MAA6B,EAAA,IAAAO,WAAA;EAAA,OAAA;GAAAN,gBAEjChB,MAAI;IAAA,IAACuB,OAAI;KAAA,OAAET,MAAMN;IAAO;IAAA,IAAAc,WAAA;KAAA,IAAAE,OAAAC,OAAA;KAAAC,OAAAF,YAEpBV,MAAMN,OAAO;KAAA,OAAAgB;IAAA;GAAA,CAAA;UAAA;IAAA,IAAAG,QAAAC,QAAA,GAAAC,QAAAF,MAAAG;IAAAJ,OAAAG,aAIQf,MAAMQ,QAAQ;IAAAI,OAAAC,OAAAX,gBACrChB,MAAI;KAAA,IAACuB,OAAI;MAAA,OAAET,MAAMH;KAAW;KAAA,IAAAW,WAAA;MAAA,IAAAS,QAAAC,QAAA;MAAAN,OAAAK,aAC2BjB,MAAMH,WAAW;MAAA,OAAAoB;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAJ;GAAA,EAAA,CAAA;GAAAX,gBAG1EhB,MAAI;IAAA,IAACuB,OAAI;KAAA,OAAET,MAAMJ;IAAQ;IAAA,IAAAY,WAAA;KAAA,IAAAW,QAAAC,QAAA;KAAAR,OAAAO,aAErBnB,MAAMJ,QAAQ;KAAA,OAAAuB;IAAA;GAAA,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA;AAKzB;;;;;;AAOA,SAAgBE,UAAUtB,OAAyE;CACjG,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO;EAAC;EAAS;EAAS;EAAU;CAAU,CAAC;CAEhF,cAAA;EAAA,IAAAyB,QAAAC,QAAA,GAAAC,QAAAF,MAAAR;EAAAW,OAAAH,OAAArB,WAAA,EAAA,KAAA,WAAA;GAAA,OACqCf,GAAG,yBAAyBY,MAAMT,KAAK;EAAC,EAAA,GAAMU,IAAI,GAAA,OAAA,IAAA;EAAAW,OAAAY,OAAAtB,gBAClFhB,MAAI;GAAA,IAACuB,OAAI;IAAA,OAAET,MAAMsB;GAAK;GAAA,IAAAd,WAAA;IAAA,IAAAoB,QAAAC,QAAA,GAAAC,QAAAF,MAAAZ;IAAAJ,OAAAkB,aAGhB9B,MAAMsB,KAAK;IAAAV,OAAAgB,OAAA1B,gBAEbhB,MAAI;KAAA,IAACuB,OAAI;MAAA,OAAET,MAAMuB;KAAM;KAAA,IAAAf,WAAA;MAAA,IAAAuB,QAAAC,QAAA;MAAApB,OAAAmB,aAEnB/B,MAAMuB,MAAM;MAAA,OAAAQ;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAH;GAAA;EAAA,CAAA,GAAAF,KAAA;EAAAd,OAAAc,aAKe1B,MAAMQ,QAAQ;EAAA,OAAAgB;CAAA,EAAA,CAAA;AAGxD"}
+{"version":3,"file":"list-row.js","names":["PolymorphicProps","Polymorphic","ComponentProps","JSX","ValidComponent","Show","splitProps","Tooltip","TooltipContent","TooltipTrigger","cn","ListRowProps","T","class","selected","dense","leading","Element","trailing","description","tooltip","type","ListRowBaseProps","as","ListRowBase","props","local","rest","_$createComponent","_$mergeProps","_$memo","tabIndex","undefined","aria-current","data-selected","children","when","_el$","_tmpl$","_$insert","_el$2","_tmpl$3","_el$3","firstChild","_el$4","_tmpl$2","_$effect","_$className","_el$5","_tmpl$4","ListRowTooltipTargetProps","Omit","rowAs","ListRowTooltipTarget","ListRow","hasClickHandler","Boolean","onClick","rowType","fallback","ListGroup","label","action","_el$6","_tmpl$7","_el$0","_$spread","_el$7","_tmpl$6","_el$8","_el$9","_tmpl$5","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/composites/list-row/list-row.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\nimport { cn } from '#lib/utils'\n\n/**\n * ListRow.\n *\n * One row in a list of like things: a project, a session, a file, a person. It\n * is the highest-frequency component in an application of this shape, and the\n * one where a half-pixel of drift is most visible — twenty rows of a sidebar\n * make any inconsistency in height or padding obvious.\n *\n * The structure is fixed at four slots — `leading`, `children`, `meta`,\n * `trailing` — so rows that show an avatar, an icon, a status dot, a timestamp\n * and an overflow menu all sit at the same height without the caller doing\n * arithmetic.\n *\n * A row is only interactive when it is given an `as` that can be activated\n * (an anchor, a button) or an `onClick`. Click handlers default to a native\n * button; a row without either remains a `div` with no hover treatment.\n */\nexport type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the row as current. Sets `aria-current` for a link row. */\n    selected?: boolean\n    /** Draw the row at the compact height. */\n    dense?: boolean\n    /** Leading slot: an avatar, an icon, a checkbox. */\n    leading?: JSX.Element\n    /** Trailing slot: a count, a menu trigger, a timestamp. */\n    trailing?: JSX.Element\n    /** A dimmed second line under the main content. */\n    description?: string\n    /** A short explanation shown on pointer hover and keyboard focus. */\n    tooltip?: string\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n  }\n>\n\ntype ListRowBaseProps<T extends ValidComponent = 'div'> = ListRowProps<T> & {\n  as?: T\n  type?: ComponentProps<'button'>['type']\n}\n\nfunction ListRowBase<T extends ValidComponent = 'div'>(props: ListRowBaseProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps, [\n    'as',\n    'class',\n    'selected',\n    'dense',\n    'leading',\n    'trailing',\n    'description',\n    'tooltip',\n    'type',\n    'tabIndex',\n    'children',\n  ])\n\n  return (\n    <Polymorphic\n      as={(local.as ?? 'div') as T}\n      type={local.as === 'button' ? (local.type ?? 'button') : local.type}\n      tabIndex={local.tabIndex ?? (local.as === 'button' || local.as === 'a' ? 0 : undefined)}\n      aria-current={local.selected ? 'true' : undefined}\n      data-selected={local.selected ? '' : undefined}\n      class={cn(\n        'group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',\n        'transition-colors ease-out outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        {\n          'h-row-sm': local.dense && !local.description,\n          'h-row-md': !local.dense && !local.description,\n          'min-h-row-sm py-1': local.dense && local.description,\n          'min-h-row-md py-1.5': !local.dense && local.description,\n        },\n        {\n          'bg-primary-subtle text-foreground': local.selected,\n          'hover:bg-surface-hover': !local.selected,\n        },\n        local.class\n      )}\n      {...(rest as ComponentProps<'div'>)}\n    >\n      <Show when={local.leading}>\n        <span class=\"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4\">\n          {local.leading}\n        </span>\n      </Show>\n      <span class=\"flex min-w-0 flex-1 flex-col\">\n        <span class=\"truncate\">{local.children}</span>\n        <Show when={local.description}>\n          <span\n            data-slot=\"list-row-description\"\n            class={cn(\n              'truncate text-xs',\n              local.selected ? 'text-foreground' : 'text-muted-foreground'\n            )}\n          >\n            {local.description}\n          </span>\n        </Show>\n      </span>\n      <Show when={local.trailing}>\n        <span\n          data-slot=\"list-row-trailing\"\n          class={cn(\n            'ms-auto flex shrink-0 items-center gap-1',\n            local.selected ? 'text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {local.trailing}\n        </span>\n      </Show>\n    </Polymorphic>\n  )\n}\n\ntype ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<\n  ListRowBaseProps<T>,\n  'as'\n> & { rowAs?: T }\n\n/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */\nfunction ListRowTooltipTarget<T extends ValidComponent = 'div'>(\n  props: ListRowTooltipTargetProps<T>\n) {\n  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, ['rowAs'])\n  return <ListRowBase as={local.rowAs} {...(rest as ListRowBaseProps<T>)} />\n}\n\nexport function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps, ['as', 'tooltip'])\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n  const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)\n\n  return (\n    <Show\n      when={local.tooltip}\n      fallback={<ListRowBase as={rowAs()} type={rowType()} {...(rest as ListRowBaseProps<T>)} />}\n    >\n      <Tooltip>\n        <TooltipTrigger\n          as={ListRowTooltipTarget}\n          rowAs={rowAs()}\n          type={rowType()}\n          {...(rest as ListRowTooltipTargetProps<T>)}\n        >\n          {rest.children}\n        </TooltipTrigger>\n        <TooltipContent>{local.tooltip}</TooltipContent>\n      </Tooltip>\n    </Show>\n  )\n}\n\n/**\n * A group of rows with an optional heading and a scrolling body. The heading is\n * a plain label rather than a control: grouping is for reading, and a\n * disclosure on a list of five rows costs more attention than it saves.\n */\nexport function ListGroup(props: ComponentProps<'div'> & { label?: string; action?: JSX.Element }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])\n\n  return (\n    <div data-slot=\"list-group\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"group/list-header flex items-center gap-1 px-2 py-1\">\n          <span class=\"min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {local.label}\n          </span>\n          <Show when={local.action}>\n            <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100\">\n              {local.action}\n            </span>\n          </Show>\n        </div>\n      </Show>\n      <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/settings/settings.d.ts

@@ -7,28 +7,26 @@ import type { ComponentProps, JSX } from 'solid-js';
  * placement all wander unless something fixes them.
  *
  * The row is a two-column layout at a fixed label width, so controls line up
- * down the page regardless of how long the labels are. That alignment is the
- * difference between a settings page that reads as designed and one that reads
- * as a form.
- *
- * `SettingsRow` puts the control on the trailing side and the label leading;
- * `SettingsField` stacks them for a control too wide for a row (a textarea, a
- * list). Both share the same label and description treatment.
+ * down the page regardless of how long the labels are. `SettingsRow` also
+ * exposes its label and description through the shared form-field context to
+ * the first control inside it. `SettingsField` is the visual stacked layout;
+ * use `FormField` when the control needs label, help, or validation wiring.
  */
 export declare function SettingsSection(props: ComponentProps<'section'> & {
     title: string;
     description?: string;
     /** A control for the section as a whole, e.g. a master toggle. */
     action?: JSX.Element;
+    /** Use a spaced content stack for fields, alerts, and cards instead of divided rows. */
+    bodyLayout?: 'rows' | 'content';
 }): JSX.Element;
 /**
  * One setting: a label and description on the leading side, a control on the
  * trailing side.
  *
- * `label` is wired to the control through `aria-labelledby` when the control is
- * not already labelled, so a caller can pass a bare `Switch` and still get an
- * accessible name. The row does not invent an id per render — it derives one
- * from the label, which is stable across renders and readable in a snapshot.
+ * The label and description are linked to a shared control through field
+ * context. An explicit `aria-label` or `aria-labelledby` on the control keeps
+ * precedence; otherwise the visible row label names it.
  */
 export declare function SettingsRow(props: ComponentProps<'div'> & {
     label: string;

package/dist/components/composites/settings/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/settings/settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACrB,eAwBF;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,eAuCF;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAC3B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,eAiBzF;AAED,2EAA2E;AAC3E,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASxD"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/settings/settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,eAwCF;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,eAsDF;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAC3B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,eAiBzF;AAED,2EAA2E;AAC3E,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASxD"}

package/dist/components/composites/settings/settings.js

@@ -1,10 +1,11 @@
 import { cn } from "../../../lib/utils.js";
+import { FormFieldContext, createFormFieldContext } from "../../../lib/form-field.js";
 import { className, createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
-import { Show, splitProps } from "solid-js";
+import { Show, createUniqueId, splitProps } from "solid-js";
 //#region src/components/composites/settings/settings.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<p class="max-w-prose text-sm text-muted-foreground text-pretty">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<div class="flex shrink-0 items-center gap-2">`);
-var _tmpl$3 = /*#__PURE__*/ template(`<section data-slot=settings-section><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 flex-col gap-0.5"><h2 class="text-base font-semibold tracking-tight"></h2></div></div><div class="divide-y divide-border rounded-xl border border-border">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<section data-slot=settings-section><div class="flex items-start justify-between gap-4"><div class="flex min-w-0 flex-col gap-0.5"><h2 class="text-base font-semibold tracking-tight"></h2></div></div><div data-slot=settings-section-body>`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=settings-row><div class="flex min-w-0 flex-col gap-0.5"><div data-slot=settings-row-label class="text-sm font-medium"></div></div><div data-slot=settings-row-control>`);
 var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=settings-field><div class="flex flex-col gap-0.5"><label class="text-sm font-medium"></label></div><div>`);
 var _tmpl$6 = /*#__PURE__*/ template(`<div data-slot=settings-page>`);
@@ -16,13 +17,10 @@ var _tmpl$6 = /*#__PURE__*/ template(`<div data-slot=settings-page>`);
 * placement all wander unless something fixes them.
 *
 * The row is a two-column layout at a fixed label width, so controls line up
-* down the page regardless of how long the labels are. That alignment is the
-* difference between a settings page that reads as designed and one that reads
-* as a form.
-*
-* `SettingsRow` puts the control on the trailing side and the label leading;
-* `SettingsField` stacks them for a control too wide for a row (a textarea, a
-* list). Both share the same label and description treatment.
+* down the page regardless of how long the labels are. `SettingsRow` also
+* exposes its label and description through the shared form-field context to
+* the first control inside it. `SettingsField` is the visual stacked layout;
+* use `FormField` when the control needs label, help, or validation wiring.
 */
 function SettingsSection(props) {
 	const [local, rest] = splitProps(props, [
@@ -30,6 +28,7 @@ function SettingsSection(props) {
 		"title",
 		"description",
 		"action",
+		"bodyLayout",
 		"children"
 	]);
 	return (() => {
@@ -59,6 +58,7 @@ function SettingsSection(props) {
 			}
 		}), null);
 		insert(_el$7, () => local.children);
+		effect(() => className(_el$7, cn(local.bodyLayout === "content" ? "flex flex-col gap-4" : "divide-y divide-border rounded-xl border border-border")));
 		return _el$;
 	})();
 }
@@ -66,10 +66,9 @@ function SettingsSection(props) {
 * One setting: a label and description on the leading side, a control on the
 * trailing side.
 *
-* `label` is wired to the control through `aria-labelledby` when the control is
-* not already labelled, so a caller can pass a bare `Switch` and still get an
-* accessible name. The row does not invent an id per render — it derives one
-* from the label, which is stable across renders and readable in a snapshot.
+* The label and description are linked to a shared control through field
+* context. An explicit `aria-label` or `aria-labelledby` on the control keeps
+* precedence; otherwise the visible row label names it.
 */
 function SettingsRow(props) {
 	const [local, rest] = splitProps(props, [
@@ -80,26 +79,42 @@ function SettingsRow(props) {
 		"bare",
 		"children"
 	]);
-	return (() => {
-		var _el$8 = _tmpl$4(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$10 = _el$9.nextSibling;
-		spread(_el$8, mergeProps({ get ["class"]() {
-			return cn("flex gap-4 p-4", local.orientation === "vertical" ? "flex-col" : "flex-col sm:flex-row sm:items-center sm:justify-between", local.class);
-		} }, rest), false, true);
-		insert(_el$0, () => local.label);
-		insert(_el$9, createComponent(Show, {
-			get when() {
-				return local.description;
-			},
-			get children() {
-				var _el$1 = _tmpl$();
-				insert(_el$1, () => local.description);
-				return _el$1;
-			}
-		}), null);
-		insert(_el$10, () => local.children);
-		effect(() => className(_el$10, cn("shrink-0", local.orientation === "vertical" && "w-full")));
-		return _el$8;
-	})();
+	const rowId = createUniqueId();
+	const labelId = `${rowId}-label`;
+	const descriptionId = `${rowId}-description`;
+	const field = createFormFieldContext({
+		defaultControlId: rowId,
+		labelId,
+		descriptionId,
+		hint: () => local.description,
+		error: () => void 0,
+		group: () => false
+	});
+	return createComponent(FormFieldContext.Provider, {
+		value: field,
+		get children() {
+			var _el$8 = _tmpl$4(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$10 = _el$9.nextSibling;
+			spread(_el$8, mergeProps({ get ["class"]() {
+				return cn("flex gap-4 p-4", local.orientation === "vertical" ? "flex-col" : "flex-col sm:flex-row sm:items-center sm:justify-between", local.class);
+			} }, rest), false, true);
+			setAttribute(_el$0, "id", labelId);
+			insert(_el$0, () => local.label);
+			insert(_el$9, createComponent(Show, {
+				get when() {
+					return local.description;
+				},
+				get children() {
+					var _el$1 = _tmpl$();
+					setAttribute(_el$1, "id", descriptionId);
+					insert(_el$1, () => local.description);
+					return _el$1;
+				}
+			}), null);
+			insert(_el$10, () => local.children);
+			effect(() => className(_el$10, cn("shrink-0", local.orientation === "vertical" && "w-full")));
+			return _el$8;
+		}
+	});
 }
 /** A stacked label-and-control pair, for a control too wide for a row. */
 function SettingsField(props) {

package/dist/components/composites/settings/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","names":["ComponentProps","JSX","Show","splitProps","cn","SettingsSection","props","title","description","action","Element","local","rest","_el$","_tmpl$3","_el$2","firstChild","_el$3","_el$4","_el$7","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","when","children","_el$5","_tmpl$","_el$6","_tmpl$2","SettingsRow","label","orientation","bare","_el$8","_tmpl$4","_el$9","_el$0","_el$10","_el$1","_$effect","_$className","SettingsField","htmlFor","_el$11","_tmpl$5","_el$12","_el$13","_el$15","_el$14","_$setAttribute","SettingsPage","_el$16","_tmpl$6","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/composites/settings/settings.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * SettingsSection and SettingsRow.\n *\n * A settings page is the most repetitive surface in any application, and the\n * one where drift is most visible: label sizes, control widths and description\n * placement all wander unless something fixes them.\n *\n * The row is a two-column layout at a fixed label width, so controls line up\n * down the page regardless of how long the labels are. That alignment is the\n * difference between a settings page that reads as designed and one that reads\n * as a form.\n *\n * `SettingsRow` puts the control on the trailing side and the label leading;\n * `SettingsField` stacks them for a control too wide for a row (a textarea, a\n * list). Both share the same label and description treatment.\n */\nexport function SettingsSection(\n  props: ComponentProps<'section'> & {\n    title: string\n    description?: string\n    /** A control for the section as a whole, e.g. a master toggle. */\n    action?: JSX.Element\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'title', 'description', 'action', 'children'])\n\n  return (\n    <section\n      data-slot=\"settings-section\"\n      class={cn('flex flex-col gap-4 px-5 py-5', local.class)}\n      {...rest}\n    >\n      <div class=\"flex items-start justify-between gap-4\">\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <h2 class=\"text-base font-semibold tracking-tight\">{local.title}</h2>\n          <Show when={local.description}>\n            <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n          </Show>\n        </div>\n        <Show when={local.action}>\n          <div class=\"flex shrink-0 items-center gap-2\">{local.action}</div>\n        </Show>\n      </div>\n      <div class=\"divide-y divide-border rounded-xl border border-border\">{local.children}</div>\n    </section>\n  )\n}\n\n/**\n * One setting: a label and description on the leading side, a control on the\n * trailing side.\n *\n * `label` is wired to the control through `aria-labelledby` when the control is\n * not already labelled, so a caller can pass a bare `Switch` and still get an\n * accessible name. The row does not invent an id per render — it derives one\n * from the label, which is stable across renders and readable in a snapshot.\n */\nexport function SettingsRow(\n  props: ComponentProps<'div'> & {\n    label: string\n    description?: string\n    /** Render a vertical stack when the control needs the full width. */\n    orientation?: 'horizontal' | 'vertical'\n    /** Hide the divider this row would otherwise contribute. */\n    bare?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'description',\n    'orientation',\n    'bare',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"settings-row\"\n      class={cn(\n        'flex gap-4 p-4',\n        local.orientation === 'vertical'\n          ? 'flex-col'\n          : 'flex-col sm:flex-row sm:items-center sm:justify-between',\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"flex min-w-0 flex-col gap-0.5\">\n        <div data-slot=\"settings-row-label\" class=\"text-sm font-medium\">\n          {local.label}\n        </div>\n        <Show when={local.description}>\n          <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n        </Show>\n      </div>\n      <div\n        data-slot=\"settings-row-control\"\n        class={cn('shrink-0', local.orientation === 'vertical' && 'w-full')}\n      >\n        {local.children}\n      </div>\n    </div>\n  )\n}\n\n/** A stacked label-and-control pair, for a control too wide for a row. */\nexport function SettingsField(\n  props: ComponentProps<'div'> & { label: string; description?: string; htmlFor?: string }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'description', 'htmlFor', 'children'])\n\n  return (\n    <div data-slot=\"settings-field\" class={cn('flex flex-col gap-2 p-4', local.class)} {...rest}>\n      <div class=\"flex flex-col gap-0.5\">\n        <label for={local.htmlFor} class=\"text-sm font-medium\">\n          {local.label}\n        </label>\n        <Show when={local.description}>\n          <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n        </Show>\n      </div>\n      <div>{local.children}</div>\n    </div>\n  )\n}\n\n/** A settings page's scrolling body, with the header sticky at the top. */\nexport function SettingsPage(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"settings-page\"\n      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"settings.js","names":["ComponentProps","JSX","createUniqueId","Show","splitProps","createFormFieldContext","FormFieldContext","cn","SettingsSection","props","title","description","action","Element","bodyLayout","local","rest","_el$","_tmpl$3","_el$2","firstChild","_el$3","_el$4","_el$7","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","when","children","_el$5","_tmpl$","_el$6","_tmpl$2","_$effect","_$className","SettingsRow","label","orientation","bare","rowId","labelId","descriptionId","field","defaultControlId","hint","error","undefined","group","Provider","value","_el$8","_tmpl$4","_el$9","_el$0","_el$10","_$setAttribute","_el$1","SettingsField","htmlFor","_el$11","_tmpl$5","_el$12","_el$13","_el$15","_el$14","SettingsPage","_el$16","_tmpl$6","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/composites/settings/settings.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * SettingsSection and SettingsRow.\n *\n * A settings page is the most repetitive surface in any application, and the\n * one where drift is most visible: label sizes, control widths and description\n * placement all wander unless something fixes them.\n *\n * The row is a two-column layout at a fixed label width, so controls line up\n * down the page regardless of how long the labels are. `SettingsRow` also\n * exposes its label and description through the shared form-field context to\n * the first control inside it. `SettingsField` is the visual stacked layout;\n * use `FormField` when the control needs label, help, or validation wiring.\n */\nexport function SettingsSection(\n  props: ComponentProps<'section'> & {\n    title: string\n    description?: string\n    /** A control for the section as a whole, e.g. a master toggle. */\n    action?: JSX.Element\n    /** Use a spaced content stack for fields, alerts, and cards instead of divided rows. */\n    bodyLayout?: 'rows' | 'content'\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'title',\n    'description',\n    'action',\n    'bodyLayout',\n    'children',\n  ])\n\n  return (\n    <section\n      data-slot=\"settings-section\"\n      class={cn('flex flex-col gap-4 px-5 py-5', local.class)}\n      {...rest}\n    >\n      <div class=\"flex items-start justify-between gap-4\">\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <h2 class=\"text-base font-semibold tracking-tight\">{local.title}</h2>\n          <Show when={local.description}>\n            <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n          </Show>\n        </div>\n        <Show when={local.action}>\n          <div class=\"flex shrink-0 items-center gap-2\">{local.action}</div>\n        </Show>\n      </div>\n      <div\n        data-slot=\"settings-section-body\"\n        class={cn(\n          local.bodyLayout === 'content'\n            ? 'flex flex-col gap-4'\n            : 'divide-y divide-border rounded-xl border border-border'\n        )}\n      >\n        {local.children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * One setting: a label and description on the leading side, a control on the\n * trailing side.\n *\n * The label and description are linked to a shared control through field\n * context. An explicit `aria-label` or `aria-labelledby` on the control keeps\n * precedence; otherwise the visible row label names it.\n */\nexport function SettingsRow(\n  props: ComponentProps<'div'> & {\n    label: string\n    description?: string\n    /** Render a vertical stack when the control needs the full width. */\n    orientation?: 'horizontal' | 'vertical'\n    /** Hide the divider this row would otherwise contribute. */\n    bare?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'description',\n    'orientation',\n    'bare',\n    'children',\n  ])\n  const rowId = createUniqueId()\n  const labelId = `${rowId}-label`\n  const descriptionId = `${rowId}-description`\n  const field = createFormFieldContext({\n    defaultControlId: rowId,\n    labelId,\n    descriptionId,\n    hint: () => local.description,\n    error: () => undefined,\n    group: () => false,\n  })\n\n  return (\n    <FormFieldContext.Provider value={field}>\n      <div\n        data-slot=\"settings-row\"\n        class={cn(\n          'flex gap-4 p-4',\n          local.orientation === 'vertical'\n            ? 'flex-col'\n            : 'flex-col sm:flex-row sm:items-center sm:justify-between',\n          local.class\n        )}\n        {...rest}\n      >\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <div id={labelId} data-slot=\"settings-row-label\" class=\"text-sm font-medium\">\n            {local.label}\n          </div>\n          <Show when={local.description}>\n            <p id={descriptionId} class=\"max-w-prose text-sm text-muted-foreground text-pretty\">\n              {local.description}\n            </p>\n          </Show>\n        </div>\n        <div\n          data-slot=\"settings-row-control\"\n          class={cn('shrink-0', local.orientation === 'vertical' && 'w-full')}\n        >\n          {local.children}\n        </div>\n      </div>\n    </FormFieldContext.Provider>\n  )\n}\n\n/** A stacked label-and-control pair, for a control too wide for a row. */\nexport function SettingsField(\n  props: ComponentProps<'div'> & { label: string; description?: string; htmlFor?: string }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'description', 'htmlFor', 'children'])\n\n  return (\n    <div data-slot=\"settings-field\" class={cn('flex flex-col gap-2 p-4', local.class)} {...rest}>\n      <div class=\"flex flex-col gap-0.5\">\n        <label for={local.htmlFor} class=\"text-sm font-medium\">\n          {local.label}\n        </label>\n        <Show when={local.description}>\n          <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n        </Show>\n      </div>\n      <div>{local.children}</div>\n    </div>\n  )\n}\n\n/** A settings page's scrolling body, with the header sticky at the top. */\nexport function SettingsPage(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"settings-page\"\n      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/conversation/message-composer.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/utils.js";
 import { Button } from "../ui/button/button.js";
-import { Kbd } from "../ui/kbd/kbd.js";
 import { Spinner } from "../ui/spinner/spinner.js";
+import { Kbd } from "../ui/kbd/kbd.js";
 import { Textarea } from "../ui/textarea/textarea.js";
 import { createComposerImeGuard } from "./ime-guard.js";
 import { className, createComponent, effect, insert, memo, mergeProps, spread, template } from "solid-js/web";

package/dist/components/conversation/scroll-follow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-follow.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/scroll-follow.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAA;AAezE,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,QAAQ,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IAClC,SAAS,EAAE,MAAM,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,2BAA2B,GAAG,SAAS,CAAA;IAC/D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,2BAA2B,KAAK,IAAI,CAAA;CACnE;;;;4BAsH2B,cAAc;2BAGf,cAAc;EAIxC"}
+{"version":3,"file":"scroll-follow.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/scroll-follow.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAA;AAgBzE,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,QAAQ,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IAClC,SAAS,EAAE,MAAM,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,2BAA2B,GAAG,SAAS,CAAA;IAC/D,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,2BAA2B,KAAK,IAAI,CAAA;CACnE;;;;4BAmN2B,cAAc;2BAGf,cAAc;EAIxC"}

package/dist/components/conversation/scroll-follow.js

@@ -6,6 +6,7 @@ var geometry = (element) => ({
 	scrollHeight: element.scrollHeight,
 	clientHeight: element.clientHeight
 });
+var noop = () => {};
 /** Internal plain-scroller binding; host-owned restoration can disable follow. */
 function createScrollFollow(options) {
 	const [atBottom, setAtBottom] = createSignal(true);
@@ -16,6 +17,9 @@ function createScrollFollow(options) {
 	let lastWriteClientHeight = -1;
 	let previousTop = -1;
 	let lastScrollClientHeight = 0;
+	let pendingRestore;
+	let pendingRestoreUserIntent = false;
+	let removeRestoreIntentListeners = noop;
 	const reportPosition = () => {
 		if (scroller) untrack(() => options.onPositionChange?.({
 			top: scroller.scrollTop,
@@ -25,12 +29,12 @@ function createScrollFollow(options) {
 	onCleanup(reportPosition);
 	const writePin = (element, target) => {
 		element.scrollTop = target;
-		lastWriteTop = target;
+		lastWriteTop = element.scrollTop;
 		lastWriteClientHeight = element.clientHeight;
-		previousTop = target;
+		previousTop = element.scrollTop;
 	};
 	const pinAuto = () => {
-		if (!scroller || !options.enabled()) return;
+		if (!scroller || !options.enabled() || pendingRestore) return;
 		const geom = geometry(scroller);
 		const result = evaluateAutoPin({
 			stick,
@@ -49,6 +53,17 @@ function createScrollFollow(options) {
 	};
 	const onScroll = () => {
 		if (!scroller) return;
+		if (pendingRestore) {
+			const maxTop = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+			const clampedFromTop = Math.min(pendingRestore.fromTop, maxTop);
+			if (pendingRestore.fromTop - clampedFromTop > 1 && Math.abs(scroller.scrollTop - clampedFromTop) <= 1) return;
+			if (!pendingRestoreUserIntent) return;
+			cancelAnimationFrame(pendingRestore.frame);
+			pendingRestore = void 0;
+			pendingRestoreUserIntent = false;
+			removeRestoreIntentListeners();
+			removeRestoreIntentListeners = noop;
+		}
 		if (!options.enabled()) {
 			reportPosition();
 			return;
@@ -84,7 +99,20 @@ function createScrollFollow(options) {
 	createEffect(() => {
 		options.resetKey();
 		const enabled = options.enabled();
-		const initial = untrack(() => options.initialPosition?.());
+		const candidate = untrack(() => options.initialPosition?.());
+		const initial = candidate && Number.isFinite(candidate.top) && candidate.top >= 0 ? candidate : void 0;
+		let scheduledRestore;
+		let observer;
+		onCleanup(() => {
+			if (scheduledRestore) {
+				cancelAnimationFrame(scheduledRestore.frame);
+				if (pendingRestore === scheduledRestore) pendingRestore = void 0;
+			}
+			pendingRestoreUserIntent = false;
+			removeRestoreIntentListeners();
+			removeRestoreIntentListeners = noop;
+			observer?.disconnect();
+		});
 		stick = true;
 		lastWriteTop = -1;
 		lastWriteClientHeight = -1;
@@ -92,19 +120,71 @@ function createScrollFollow(options) {
 		lastScrollClientHeight = 0;
 		setAtBottom(true);
 		if (!enabled || !scroller) return;
-		if (initial && Number.isFinite(initial.top) && initial.top >= 0) {
-			stick = initial.following;
-			writePin(scroller, stick ? bottomTarget(geometry(scroller)) : initial.top);
-			previousTop = scroller.scrollTop;
-			lastScrollClientHeight = scroller.clientHeight;
-		} else writePin(scroller, bottomTarget(geometry(scroller)));
+		if (initial) stick = enabled && initial.following;
+		const observe = () => {
+			if (!enabled || typeof ResizeObserver === "undefined") return;
+			observer = new ResizeObserver(pinAuto);
+			observer.observe(scroller);
+			if (content) observer.observe(content);
+		};
+		const watchRestoreIntent = () => {
+			const element = scroller;
+			if (!element) return;
+			const markIntent = (event) => {
+				if (!pendingRestore) return;
+				if (event.type === "pointerdown" && event.target !== element) return;
+				if (event.type === "keydown") {
+					if (event.target !== element) return;
+					const key = event.key;
+					if (![
+						"ArrowDown",
+						"ArrowUp",
+						"PageDown",
+						"PageUp",
+						"Home",
+						"End",
+						" "
+					].includes(key)) return;
+				}
+				pendingRestoreUserIntent = true;
+			};
+			element.addEventListener("wheel", markIntent, { passive: true });
+			element.addEventListener("pointerdown", markIntent);
+			element.addEventListener("keydown", markIntent);
+			removeRestoreIntentListeners = () => {
+				element.removeEventListener("wheel", markIntent);
+				element.removeEventListener("pointerdown", markIntent);
+				element.removeEventListener("keydown", markIntent);
+			};
+		};
+		if (initial && !stick) {
+			const restore = {
+				frame: 0,
+				fromTop: scroller.scrollTop,
+				target: initial.top
+			};
+			scheduledRestore = restore;
+			pendingRestore = restore;
+			pendingRestoreUserIntent = false;
+			watchRestoreIntent();
+			observe();
+			restore.frame = requestAnimationFrame(() => {
+				if (pendingRestore !== restore || !scroller) return;
+				pendingRestore = void 0;
+				pendingRestoreUserIntent = false;
+				removeRestoreIntentListeners();
+				removeRestoreIntentListeners = noop;
+				writePin(scroller, restore.target);
+				setAtBottom(computeAtBottom(geometry(scroller), options.threshold()));
+				reportPosition();
+			});
+			return;
+		}
+		if (!initial && enabled) writePin(scroller, bottomTarget(geometry(scroller)));
+		else if (initial && stick) writePin(scroller, bottomTarget(geometry(scroller)));
 		setAtBottom(computeAtBottom(geometry(scroller), options.threshold()));
 		reportPosition();
-		if (typeof ResizeObserver === "undefined") return;
-		const observer = new ResizeObserver(pinAuto);
-		observer.observe(scroller);
-		if (content) observer.observe(content);
-		onCleanup(() => observer.disconnect());
+		observe();
 	});
 	return {
 		atBottom,