@adea-ai/ui 0.113.1 → 0.115.0

package/dist/components/ui/sheet/sheet.js

@@ -32,8 +32,9 @@ var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=sheet-footer>`);
 *
 * Its parts read alike everywhere: `SheetHeader` holds a heading, a description
 * and a full-width rule beneath, with the close button in the corner;
-* `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that
-* holds the decision.
+* `SheetBody` scrolls on its own; `SheetFooter` is a full-width band that holds
+* the decision. Pass `band` to the header, the footer, or both to step those
+* parts onto the ladder's subtle-fill rung (see `SheetFooter`).
 *
 * Controlled sheets opened from outside a `SheetTrigger` restore focus to the
 * element focused before opening. Pass `restoreFocusRef` when a stable external
@@ -161,12 +162,18 @@ function SheetCloseButton(props) {
 		return cn(local.class);
 	} }, rest));
 }
+/**
+* The sheet's title band: a heading, a description and the full-width rule
+* beneath, with the close button in the corner. `band` steps the band onto the
+* subtle-fill rung (see `SheetFooter`) — the two-toned anatomy of a sheet that
+* reads as a panel beside the work rather than one flat canvas.
+*/
 function SheetHeader(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, ["class", "band"]);
 	return (() => {
 		var _el$ = _tmpl$();
 		spread(_el$, mergeProps({ get ["class"]() {
-			return cn("flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start", local.class);
+			return cn("flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start", { "bg-muted": local.band }, local.class);
 		} }, rest), false, false);
 		return _el$;
 	})();
@@ -181,12 +188,25 @@ function SheetBody(props) {
 		return _el$2;
 	})();
 }
+/**
+* The sheet's decision band: a full-width, hairline-ruled strip that holds the
+* actions. `band` paints it with `--muted` — the elevation ladder's
+* subtle-fill rung, one step up from the panel's `--background` — so the sheet
+* reads two-toned: title band and decision band on the raised rung, scrolling
+* body on the panel surface. The rung already exists for cards, sidebars and
+* input fills; this is the panel-shaped overlay family claiming it. Opt-in
+* because the flat panel is the documented default: the centred modal
+* separates with veil, hairline and shadow instead (the elevated overlay rung
+* amplifies the canvas chroma, which reads as a cast across a large panel),
+* and a host opts a whole sheet family in by passing the prop where it composes
+* the parts — not by restyling them from the outside.
+*/
 function SheetFooter(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, ["class", "band"]);
 	return (() => {
 		var _el$3 = _tmpl$3();
 		spread(_el$3, mergeProps({ get ["class"]() {
-			return cn("flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3", local.class);
+			return cn("flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3", { "bg-muted": local.band }, local.class);
 		} }, rest), false, false);
 		return _el$3;
 	})();

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","overlayTitle","cn","createDialogFocusRestoration","DialogOverlay","sheetVariants","variants","side","top","bottom","start","end","variant","edge","inset","compoundVariants","class","defaultVariants","sheetVariantFor","SheetContentProps","closeButton","Element","closeLabel","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","when","_$mergeProps","data-variant","_$memo","CloseButton","aria-label","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { overlayTitle } from '#lib/overlay'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * `variant` decides how it meets that edge. `inset` — the default for `end` —\n * docks the panel inside the main view: below the top bar, one equal gap from\n * the top bar, the end edge and the bottom, with no scrim, so the work it edits\n * stays visible and the top bar stays reachable. It is the shape for editing one\n * thing beside its context (appearance settings, a task, a record). `edge` runs\n * edge to edge over a scrim — the shape of a navigation drawer, and the default\n * for every other side.\n *\n * Its parts read alike everywhere: `SheetHeader` holds a heading, a description\n * and a full-width rule beneath, with the close button in the corner;\n * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that\n * holds the decision.\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\n// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be\n// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the\n// pinned footer out of view. Only SheetBody scrolls.\nconst sheetVariants = cva(\n  'bg-background text-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n      variant: {\n        edge: '',\n        inset: 'panel-dialog-inset w-lg rounded-xl border',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        variant: 'edge',\n        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',\n      },\n      {\n        side: 'bottom',\n        variant: 'edge',\n        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',\n      },\n      {\n        side: 'start',\n        variant: 'edge',\n        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',\n      },\n      {\n        side: 'end',\n        variant: 'edge',\n        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',\n      },\n    ],\n    defaultVariants: { side: 'end', variant: 'edge' },\n  }\n)\n\n/** `inset` for the end edge, `edge` for every other side, unless the caller says. */\nconst sheetVariantFor = (\n  side: SheetContentProps['side'],\n  variant: SheetContentProps['variant']\n): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** The close button's accessible name. Defaults to \"Close\". */\n    closeLabel?: string\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'variant',\n    'children',\n    'closeButton',\n    'closeLabel',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  const variant = () => sheetVariantFor(local.side, local.variant)\n\n  return (\n    <KobalteDialog.Portal>\n      {/* An inset panel is beside the work, so the work stays in view: no scrim.\n          It is still modal — focus stays inside and an outside click dismisses. */}\n      <Show when={variant() === 'edge'}>\n        <DialogOverlay />\n      </Show>\n      <KobalteDialogContent\n        data-variant={variant()}\n        class={cn(\n          sheetVariants({ side: local.side, variant: variant() }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label={local.closeLabel ?? 'Close'}\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\nexport function SheetHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn(\n        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}
+{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","overlayTitle","cn","createDialogFocusRestoration","DialogOverlay","sheetVariants","variants","side","top","bottom","start","end","variant","edge","inset","compoundVariants","class","defaultVariants","sheetVariantFor","SheetContentProps","closeButton","Element","closeLabel","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","when","_$mergeProps","data-variant","_$memo","CloseButton","aria-label","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","band","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { overlayTitle } from '#lib/overlay'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * `variant` decides how it meets that edge. `inset` — the default for `end` —\n * docks the panel inside the main view: below the top bar, one equal gap from\n * the top bar, the end edge and the bottom, with no scrim, so the work it edits\n * stays visible and the top bar stays reachable. It is the shape for editing one\n * thing beside its context (appearance settings, a task, a record). `edge` runs\n * edge to edge over a scrim — the shape of a navigation drawer, and the default\n * for every other side.\n *\n * Its parts read alike everywhere: `SheetHeader` holds a heading, a description\n * and a full-width rule beneath, with the close button in the corner;\n * `SheetBody` scrolls on its own; `SheetFooter` is a full-width band that holds\n * the decision. Pass `band` to the header, the footer, or both to step those\n * parts onto the ladder's subtle-fill rung (see `SheetFooter`).\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\n// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be\n// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the\n// pinned footer out of view. Only SheetBody scrolls.\nconst sheetVariants = cva(\n  'bg-background text-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n      variant: {\n        edge: '',\n        inset: 'panel-dialog-inset w-lg rounded-xl border',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        variant: 'edge',\n        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',\n      },\n      {\n        side: 'bottom',\n        variant: 'edge',\n        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',\n      },\n      {\n        side: 'start',\n        variant: 'edge',\n        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',\n      },\n      {\n        side: 'end',\n        variant: 'edge',\n        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',\n      },\n    ],\n    defaultVariants: { side: 'end', variant: 'edge' },\n  }\n)\n\n/** `inset` for the end edge, `edge` for every other side, unless the caller says. */\nconst sheetVariantFor = (\n  side: SheetContentProps['side'],\n  variant: SheetContentProps['variant']\n): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** The close button's accessible name. Defaults to \"Close\". */\n    closeLabel?: string\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'variant',\n    'children',\n    'closeButton',\n    'closeLabel',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  const variant = () => sheetVariantFor(local.side, local.variant)\n\n  return (\n    <KobalteDialog.Portal>\n      {/* An inset panel is beside the work, so the work stays in view: no scrim.\n          It is still modal — focus stays inside and an outside click dismisses. */}\n      <Show when={variant() === 'edge'}>\n        <DialogOverlay />\n      </Show>\n      <KobalteDialogContent\n        data-variant={variant()}\n        class={cn(\n          sheetVariants({ side: local.side, variant: variant() }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label={local.closeLabel ?? 'Close'}\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\n/**\n * The sheet's title band: a heading, a description and the full-width rule\n * beneath, with the close button in the corner. `band` steps the band onto the\n * subtle-fill rung (see `SheetFooter`) — the two-toned anatomy of a sheet that\n * reads as a panel beside the work rather than one flat canvas.\n */\nexport function SheetHeader(props: ComponentProps<'div'> & { band?: boolean }) {\n  const [local, rest] = splitProps(props, ['class', 'band'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn(\n        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',\n        { 'bg-muted': local.band },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * The sheet's decision band: a full-width, hairline-ruled strip that holds the\n * actions. `band` paints it with `--muted` — the elevation ladder's\n * subtle-fill rung, one step up from the panel's `--background` — so the sheet\n * reads two-toned: title band and decision band on the raised rung, scrolling\n * body on the panel surface. The rung already exists for cards, sidebars and\n * input fills; this is the panel-shaped overlay family claiming it. Opt-in\n * because the flat panel is the documented default: the centred modal\n * separates with veil, hairline and shadow instead (the elevated overlay rung\n * amplifies the canvas chroma, which reads as a cast across a large panel),\n * and a host opts a whole sheet family in by passing the prop where it composes\n * the parts — not by restyling them from the outside.\n */\nexport function SheetFooter(props: ComponentProps<'div'> & { band?: boolean }) {\n  const [local, rest] = splitProps(props, ['class', 'band'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',\n        { 'bg-muted': local.band },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}

package/dist/components/ui/status-chip/status-chip.d.ts

@@ -9,7 +9,7 @@ import { type ComponentProps, type JSX } from 'solid-js';
  * with no text (unreadable to anyone who cannot see it) and a bare word with no
  * explanation ("Needs configuration" — of what?).
  *
- * The tones are deliberately not a rainbow. Six cover what a status can actually
+ * The tones are deliberately not a rainbow. Seven cover what a status can actually
  * mean:
  *
  * - `neutral` — fine, and there is nothing to say about it.
@@ -17,6 +17,8 @@ import { type ComponentProps, type JSX } from 'solid-js';
  * - `warning` — degraded, or needs a decision from the user.
  * - `danger` — blocked, failed, unrecoverable without intervention.
  * - `info` — in flight or scheduled; work is happening, nothing is wrong.
+ * - `pending` — running now with no result yet (a check, a build). The ring
+ *   turns, so it reads as live rather than as a settled state.
  * - `unknown` — the honest absence of information.
  *
  * `unknown` is not the same as `neutral`, and collapsing them is the mistake
@@ -28,9 +30,9 @@ import { type ComponentProps, type JSX } from 'solid-js';
  * the only signal.
  */
 export declare const statusDotVariants: (props?: ({
-    tone?: "success" | "warning" | "info" | "neutral" | "danger" | "unknown" | null | undefined;
+    tone?: "success" | "warning" | "info" | "neutral" | "danger" | "pending" | "unknown" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown';
+export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'pending' | 'unknown';
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
     tone?: StatusTone;
     label: string;

package/dist/components/ui/status-chip/status-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB;;8EAY5B,CAAA;AAWF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1F,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAqChD;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,eAeA"}
+{"version":3,"file":"status-chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB;;8EAa5B,CAAA;AAYF,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAqChD;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,eAeA"}

package/dist/components/ui/status-chip/status-chip.js

@@ -18,7 +18,7 @@ var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex items-baseline justify-be
 * with no text (unreadable to anyone who cannot see it) and a bare word with no
 * explanation ("Needs configuration" — of what?).
 *
-* The tones are deliberately not a rainbow. Six cover what a status can actually
+* The tones are deliberately not a rainbow. Seven cover what a status can actually
 * mean:
 *
 * - `neutral` — fine, and there is nothing to say about it.
@@ -26,6 +26,8 @@ var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex items-baseline justify-be
 * - `warning` — degraded, or needs a decision from the user.
 * - `danger` — blocked, failed, unrecoverable without intervention.
 * - `info` — in flight or scheduled; work is happening, nothing is wrong.
+* - `pending` — running now with no result yet (a check, a build). The ring
+*   turns, so it reads as live rather than as a settled state.
 * - `unknown` — the honest absence of information.
 *
 * `unknown` is not the same as `neutral`, and collapsing them is the mistake
@@ -43,6 +45,7 @@ var statusDotVariants = cva("size-2 shrink-0 rounded-full", {
 		warning: "bg-warning",
 		danger: "bg-destructive",
 		info: "bg-info",
+		pending: "border-2 border-info border-r-transparent motion-safe:animate-spin",
 		unknown: "border border-muted-foreground bg-transparent"
 	} },
 	defaultVariants: { tone: "neutral" }
@@ -53,6 +56,7 @@ var labelTone = {
 	warning: "text-foreground",
 	danger: "text-foreground",
 	info: "text-foreground",
+	pending: "text-foreground",
 	unknown: "text-muted-foreground"
 };
 function StatusChip(props) {

package/dist/components/ui/status-chip/status-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-chip.js","names":["Show","splitProps","ComponentProps","JSX","cva","cn","Tooltip","TooltipContent","TooltipTrigger","statusDotVariants","variants","tone","neutral","success","warning","danger","info","unknown","defaultVariants","labelTone","Record","StatusTone","StatusChipProps","Omit","label","compact","detail","trailing","Element","StatusChip","props","local","rest","chip","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$spread","_$mergeProps","class","_$insert","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$createComponent","when","fallback","children","as","StatusEntry","Readonly","id","name","StatusList","entries","_el$4","_tmpl$2","map","entry","_el$5","_tmpl$4","_el$7","_el$6","_tmpl$3","_$mergeProps","_$className","_$createComponent"],"sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"sourcesContent":["import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport { cva } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n\n/**\n * StatusChip.\n *\n * A state, said in one word, with the reason available on hover. It exists\n * because a status readout has three parts that are always the same three parts —\n * a tone, a label, and the detail that justifies the label — and rendering them\n * ad hoc produces the two failures this component is here to prevent: a colour\n * with no text (unreadable to anyone who cannot see it) and a bare word with no\n * explanation (\"Needs configuration\" — of what?).\n *\n * The tones are deliberately not a rainbow. Six cover what a status can actually\n * mean:\n *\n * - `neutral` — fine, and there is nothing to say about it.\n * - `success` — a check passed, a capability is ready, a job finished.\n * - `warning` — degraded, or needs a decision from the user.\n * - `danger` — blocked, failed, unrecoverable without intervention.\n * - `info` — in flight or scheduled; work is happening, nothing is wrong.\n * - `unknown` — the honest absence of information.\n *\n * `unknown` is not the same as `neutral`, and collapsing them is the mistake\n * worth avoiding: \"this is idle\" and \"we have not been told yet\" are different\n * facts, and a product that shows the second as the first is lying quietly. The\n * ring is hollow so it also reads as different in greyscale.\n *\n * The dot is `aria-hidden` and the label carries the meaning, so a tone is never\n * the only signal.\n */\nexport const statusDotVariants = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      danger: 'bg-destructive',\n      info: 'bg-info',\n      unknown: 'border border-muted-foreground bg-transparent',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst labelTone: Record<StatusTone, string> = {\n  neutral: 'text-foreground',\n  success: 'text-foreground',\n  warning: 'text-foreground',\n  danger: 'text-foreground',\n  info: 'text-foreground',\n  unknown: 'text-muted-foreground',\n}\n\nexport type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown'\n\nexport type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {\n  tone?: StatusTone\n  label: string\n  /** Visually hide the text while preserving it for assistive technology. */\n  compact?: boolean\n  /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */\n  detail?: string\n  /** A trailing slot: a timestamp, a retry affordance, a count. */\n  trailing?: JSX.Element\n}\n\nexport function StatusChip(props: StatusChipProps) {\n  const [local, rest] = splitProps(props, [\n    'tone',\n    'label',\n    'compact',\n    'detail',\n    'trailing',\n    'class',\n  ])\n\n  const chip = (\n    <span\n      class={cn(\n        'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',\n        labelTone[local.tone ?? 'neutral'],\n        local.class\n      )}\n      {...rest}\n    >\n      <span class={statusDotVariants({ tone: local.tone })} aria-hidden=\"true\" />\n      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>\n      {local.trailing}\n    </span>\n  )\n\n  return (\n    <Show when={local.detail} fallback={chip}>\n      {(detail) => (\n        <Tooltip>\n          <TooltipTrigger as=\"span\" class=\"inline-flex\">\n            {chip}\n          </TooltipTrigger>\n          <TooltipContent data-slot=\"tooltip-content\">{detail()}</TooltipContent>\n        </Tooltip>\n      )}\n    </Show>\n  )\n}\n\nexport type StatusEntry = Readonly<{\n  /** A stable key for the row. */\n  id: string\n  /** What is being reported — \"Configuration\", \"Runtime\", \"Sync\". */\n  name: string\n  tone: StatusTone\n  label: string\n  detail?: string\n}>\n\n/**\n * StatusList.\n *\n * The several-facts-about-one-thing shape: an agent with a configuration state, a\n * runtime state and an activity state; a service with a build, a deploy and a\n * health check. It is a definition list rather than a table because there is no\n * column to sort or compare — the rows are facets of a single subject, and a\n * screen reader should hear them as such.\n *\n * Fixed width on the name column is what makes a column of these scannable; the\n * rows line up without a table's semantics.\n */\nexport function StatusList(props: {\n  entries: readonly StatusEntry[]\n  class?: string\n  /** Hide the name column and show only the chips — for a compact badge strip. */\n  compact?: boolean\n}) {\n  return (\n    <dl class={cn('grid gap-2 text-sm', props.class)}>\n      {props.entries.map((entry) => (\n        <div class=\"flex items-baseline justify-between gap-4\">\n          <Show when={!props.compact}>\n            <dt class=\"text-muted-foreground\">{entry.name}</dt>\n          </Show>\n          <dd class={cn(!props.compact && 'shrink-0')}>\n            <StatusChip tone={entry.tone} label={entry.label} detail={entry.detail} />\n          </dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"status-chip.js","names":["Show","splitProps","ComponentProps","JSX","cva","cn","Tooltip","TooltipContent","TooltipTrigger","statusDotVariants","variants","tone","neutral","success","warning","danger","info","pending","unknown","defaultVariants","labelTone","Record","StatusTone","StatusChipProps","Omit","label","compact","detail","trailing","Element","StatusChip","props","local","rest","chip","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$spread","_$mergeProps","class","_$insert","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$createComponent","when","fallback","children","as","StatusEntry","Readonly","id","name","StatusList","entries","_el$4","_tmpl$2","map","entry","_el$5","_tmpl$4","_el$7","_el$6","_tmpl$3","_$mergeProps","_$className","_$createComponent"],"sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"sourcesContent":["import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport { cva } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n\n/**\n * StatusChip.\n *\n * A state, said in one word, with the reason available on hover. It exists\n * because a status readout has three parts that are always the same three parts —\n * a tone, a label, and the detail that justifies the label — and rendering them\n * ad hoc produces the two failures this component is here to prevent: a colour\n * with no text (unreadable to anyone who cannot see it) and a bare word with no\n * explanation (\"Needs configuration\" — of what?).\n *\n * The tones are deliberately not a rainbow. Seven cover what a status can actually\n * mean:\n *\n * - `neutral` — fine, and there is nothing to say about it.\n * - `success` — a check passed, a capability is ready, a job finished.\n * - `warning` — degraded, or needs a decision from the user.\n * - `danger` — blocked, failed, unrecoverable without intervention.\n * - `info` — in flight or scheduled; work is happening, nothing is wrong.\n * - `pending` — running now with no result yet (a check, a build). The ring\n *   turns, so it reads as live rather than as a settled state.\n * - `unknown` — the honest absence of information.\n *\n * `unknown` is not the same as `neutral`, and collapsing them is the mistake\n * worth avoiding: \"this is idle\" and \"we have not been told yet\" are different\n * facts, and a product that shows the second as the first is lying quietly. The\n * ring is hollow so it also reads as different in greyscale.\n *\n * The dot is `aria-hidden` and the label carries the meaning, so a tone is never\n * the only signal.\n */\nexport const statusDotVariants = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      danger: 'bg-destructive',\n      info: 'bg-info',\n      pending: 'border-2 border-info border-r-transparent motion-safe:animate-spin',\n      unknown: 'border border-muted-foreground bg-transparent',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst labelTone: Record<StatusTone, string> = {\n  neutral: 'text-foreground',\n  success: 'text-foreground',\n  warning: 'text-foreground',\n  danger: 'text-foreground',\n  info: 'text-foreground',\n  pending: 'text-foreground',\n  unknown: 'text-muted-foreground',\n}\n\nexport type StatusTone =\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'pending'\n  | 'unknown'\n\nexport type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {\n  tone?: StatusTone\n  label: string\n  /** Visually hide the text while preserving it for assistive technology. */\n  compact?: boolean\n  /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */\n  detail?: string\n  /** A trailing slot: a timestamp, a retry affordance, a count. */\n  trailing?: JSX.Element\n}\n\nexport function StatusChip(props: StatusChipProps) {\n  const [local, rest] = splitProps(props, [\n    'tone',\n    'label',\n    'compact',\n    'detail',\n    'trailing',\n    'class',\n  ])\n\n  const chip = (\n    <span\n      class={cn(\n        'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',\n        labelTone[local.tone ?? 'neutral'],\n        local.class\n      )}\n      {...rest}\n    >\n      <span class={statusDotVariants({ tone: local.tone })} aria-hidden=\"true\" />\n      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>\n      {local.trailing}\n    </span>\n  )\n\n  return (\n    <Show when={local.detail} fallback={chip}>\n      {(detail) => (\n        <Tooltip>\n          <TooltipTrigger as=\"span\" class=\"inline-flex\">\n            {chip}\n          </TooltipTrigger>\n          <TooltipContent data-slot=\"tooltip-content\">{detail()}</TooltipContent>\n        </Tooltip>\n      )}\n    </Show>\n  )\n}\n\nexport type StatusEntry = Readonly<{\n  /** A stable key for the row. */\n  id: string\n  /** What is being reported — \"Configuration\", \"Runtime\", \"Sync\". */\n  name: string\n  tone: StatusTone\n  label: string\n  detail?: string\n}>\n\n/**\n * StatusList.\n *\n * The several-facts-about-one-thing shape: an agent with a configuration state, a\n * runtime state and an activity state; a service with a build, a deploy and a\n * health check. It is a definition list rather than a table because there is no\n * column to sort or compare — the rows are facets of a single subject, and a\n * screen reader should hear them as such.\n *\n * Fixed width on the name column is what makes a column of these scannable; the\n * rows line up without a table's semantics.\n */\nexport function StatusList(props: {\n  entries: readonly StatusEntry[]\n  class?: string\n  /** Hide the name column and show only the chips — for a compact badge strip. */\n  compact?: boolean\n}) {\n  return (\n    <dl class={cn('grid gap-2 text-sm', props.class)}>\n      {props.entries.map((entry) => (\n        <div class=\"flex items-baseline justify-between gap-4\">\n          <Show when={!props.compact}>\n            <dt class=\"text-muted-foreground\">{entry.name}</dt>\n          </Show>\n          <dd class={cn(!props.compact && 'shrink-0')}>\n            <StatusChip tone={entry.tone} label={entry.label} detail={entry.detail} />\n          </dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n"],"mappings":"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"}

package/dist/index.js

@@ -115,7 +115,7 @@ import { CatalogBrowser } from "./components/composites/catalog-browser/catalog-
 import { CatalogDetail, CatalogDetailSection } from "./components/composites/catalog-browser/catalog-detail.js";
 import { ListRowControl } from "./components/composites/list-row/list-row-control.js";
 import { ListGroup, ListRow } from "./components/composites/list-row/list-row.js";
-import { Tree, TreeRow } from "./components/composites/tree/tree.js";
+import { Tree, TreeRow, TreeRowActions } from "./components/composites/tree/tree.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";
@@ -130,4 +130,4 @@ import { AboutDialog } from "./components/composites/about-dialog/about-dialog.j
 import { HelpCenter } from "./components/composites/help-center/help-center.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
 import { writeClipboardText } from "./lib/clipboard.js";
-export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnnotationSurface, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceEditorActions, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, 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, ContextualSidebar, ConversationAvatar, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, 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, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, 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, PixelResizeHandle, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, 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, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, 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, Text, 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, Tree, TreeRow, UpdateChannelControl, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, splitPaneBalanced, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, withAccent, writeClipboardText, zIndexTokens };
+export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnnotationSurface, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceEditorActions, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, 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, ContextualSidebar, ConversationAvatar, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, 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, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, 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, PixelResizeHandle, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, 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, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, 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, Text, 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, Tree, TreeRow, TreeRowActions, UpdateChannelControl, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, splitPaneBalanced, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, withAccent, writeClipboardText, zIndexTokens };

package/dist/r/src/components/composites/list-row/list-row-control.tsx

@@ -18,6 +18,12 @@ export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicP
     trailing?: JSX.Element
     /** A second line that wraps and grows the row to fit its content. */
     description?: string
+    /**
+     * Whether a described row may drop its trailing slot onto its own line when
+     * the row gets narrow (the default). Pass `false` for a short, truncating
+     * label whose single action must stay beside it.
+     */
+    stackTrailing?: boolean
     /** Native button type; defaults to `button` for button rows. */
     type?: ComponentProps<'button'>['type']
   }
@@ -37,6 +43,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
     'leading',
     'trailing',
     'description',
+    'stackTrailing',
     'type',
     'tabIndex',
     'children',
@@ -52,6 +59,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
       aria-current={local.selected ? 'true' : undefined}
       data-selected={local.selected ? '' : undefined}
       data-description={local.description ? '' : undefined}
+      data-stack-trailing={local.stackTrailing === false ? 'never' : undefined}
       class={cn(
         'group/row list-row-description flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',
         'transition-colors ease-out outline-none',

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

@@ -1,3 +1,3 @@
 /** Keyboard-accessible tree rows with virtualization-aware focus handoff. */
-export { Tree, TreeRow, type TreeProps, type TreeRowProps } from './tree'
+export { Tree, TreeRow, TreeRowActions, type TreeProps, type TreeRowProps } from './tree'
 export type { TreeItemDescriptor } from './tree-navigation'

package/dist/r/src/components/composites/tree/tree.tsx

@@ -238,7 +238,12 @@ export function Tree(props: TreeProps) {
         role="tree"
         aria-multiselectable={local.selectionMode === 'multiple' ? 'true' : undefined}
         data-slot="tree"
-        class={cn('flex min-w-0 flex-col', local.class)}
+        class={cn(
+          /* A virtualized host remounts rows as it scrolls; scroll anchoring
+             would latch onto the focused row and fight the scrollbar. */
+          'flex min-w-0 flex-col [overflow-anchor:none]',
+          local.class
+        )}
         onKeyDown={handleKeyDown}
       >
         {local.children}
@@ -382,6 +387,31 @@ export function TreeRow(props: TreeRowProps) {
   )
 }
 
+/**
+ * TreeRowActions.
+ *
+ * Row-level commands (rename, copy, delete) that stay out of the way until the
+ * row is hovered or holds focus, so a long tree reads as names rather than a
+ * wall of buttons. Put it in `TreeRow`'s `trailing` slot beside any status that
+ * must stay visible. `pinned` keeps the actions shown, e.g. while a destructive
+ * action waits for its confirming second press.
+ */
+export function TreeRowActions(props: ComponentProps<'span'> & { pinned?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'pinned'])
+  return (
+    <span
+      data-slot="tree-row-actions"
+      data-pinned={local.pinned ? '' : undefined}
+      class={cn(
+        'flex shrink-0 items-center gap-1 opacity-0 transition-opacity ease-out',
+        'group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 data-pinned:opacity-100',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
 function isActionTarget(target: EventTarget | null, currentTarget: HTMLElement): boolean {
   if (!(target instanceof Element) || target === currentTarget) return false
   return Boolean(

package/dist/r/src/components/layout/contextual-sidebar/contextual-sidebar.tsx

@@ -27,6 +27,13 @@ export type ContextualSidebarProps = {
   label: string
   /** Visible navigation title and mobile dialog title. */
   title: string
+  /**
+   * Where the title row shows. `always` (default) draws it on desktop and in
+   * the mobile sheet; `mobile` keeps the desktop title for assistive
+   * technology only and drops the desktop row, for hosts whose top bar
+   * already names the context. A `header` slot keeps the row visible.
+   */
+  titleVisibility?: 'always' | 'mobile'
   /** Host-controlled expanded state for the desktop panel and mobile dialog. */
   open: boolean
   onOpenChange(open: boolean): void
@@ -169,10 +176,19 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
           />
         </Show>
         <Show when={!mobile || mobileMount()?.connected}>
-          <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>
-            <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>
-            {props.header?.(context)}
-          </SidebarNavHeader>
+          <Show
+            when={mobile || props.titleVisibility !== 'mobile' || props.header}
+            fallback={
+              <SidebarNavTitle as={props.headingAs ?? 'h2'} class="sr-only">
+                {props.title}
+              </SidebarNavTitle>
+            }
+          >
+            <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>
+              <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>
+              {props.header?.(context)}
+            </SidebarNavHeader>
+          </Show>
           <SidebarNavContent class={props.contentClass}>{props.content(context)}</SidebarNavContent>
           {props.footer ? (
             <SidebarNavFooter class={props.footerClass}>{props.footer(context)}</SidebarNavFooter>

package/dist/r/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -140,6 +140,12 @@ export type SidebarNavSectionProps = ComponentProps<'div'> & {
   count?: number
   /** A control at the trailing edge of the heading row. */
   action?: JSX.Element
+  /**
+   * When the trailing action shows. `hover` (default) reveals it on hover or
+   * focus; `always` keeps it visible, for a section whose primary action is
+   * creating its first item.
+   */
+  actionVisibility?: 'hover' | 'always'
   /** Semantic heading element for a host's section hierarchy. */
   headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 }
@@ -156,6 +162,7 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
     'triggerProps',
     'count',
     'action',
+    'actionVisibility',
     'headingAs',
     'children',
   ])
@@ -237,7 +244,13 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
           </Show>
         </Polymorphic>
         <Show when={local.action}>
-          <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(any-pointer:coarse)]:opacity-100">
+          <span
+            data-slot="sidebar-nav-section-action"
+            class={cn('shrink-0', {
+              'opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(any-pointer:coarse)]:opacity-100':
+                local.actionVisibility !== 'always',
+            })}
+          >
             {local.action}
           </span>
         </Show>

package/dist/r/src/components/layout/top-bar/top-bar.tsx

@@ -99,7 +99,9 @@ export function TopBarTitle(
     <div
       data-slot="top-bar-title"
       class={cn(
-        'truncate text-sm font-medium',
+        /* The title slot sits in the drag region; a link, button or field
+           placed in it (a breadcrumb, a view's search) must stay pressable. */
+        'truncate text-sm font-medium [&_:is(a,button,input)]:window-no-drag',
         local.align === 'center' && 'text-center',
         local.class
       )}
@@ -114,7 +116,10 @@ export function TopBarBreadcrumb(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="top-bar-breadcrumb"
-      class={cn('flex min-w-0 items-center gap-1.5 text-sm', local.class)}
+      class={cn(
+        'flex min-w-0 items-center gap-1.5 text-sm [&_:is(a,button,input)]:window-no-drag',
+        local.class
+      )}
       {...rest}
     />
   )

package/dist/r/src/components/ui/dialog/dialog.tsx

@@ -314,12 +314,19 @@ export function DialogContent(props: DialogContentProps) {
   )
 }
 
-export function DialogHeader(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * The dialog's title block. `band` steps it onto the elevation ladder's
+ * subtle-fill rung (`--muted`), the same treatment as the sheet parts' band —
+ * for the dialog family whose panel anatomy matches a sheet's (a title band
+ * over a full-bleed shell, such as a settings dialog) rather than the centred
+ * modal's documented flat surface. See `SheetFooter` for the rung's rationale.
+ */
+export function DialogHeader(props: ComponentProps<'div'> & { band?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'band'])
   return (
     <div
       data-slot="dialog-header"
-      class={cn('flex flex-col gap-1.5 pe-6 text-start', local.class)}
+      class={cn('flex flex-col gap-1.5 pe-6 text-start', { 'bg-muted': local.band }, local.class)}
       {...rest}
     />
   )

package/dist/r/src/components/ui/input/input-control.tsx

@@ -9,17 +9,28 @@ import { cn } from '../../../lib/utils'
  * when a consumer needs only the control; `Input` adds native datalist
  * suggestions for forms that need them.
  */
-export type InputControlProps = ComponentProps<'input'>
+export type InputControlProps = Omit<ComponentProps<'input'>, 'size'> & {
+  /**
+   * The control rung, matching `SelectTrigger`: `sm` for a dense toolbar or
+   * pane filter beside `icon-sm` actions, `md` (the default) everywhere else.
+   */
+  size?: 'sm' | 'md' | 'lg'
+}
 
 export function InputControl(props: InputControlProps) {
-  const [local, rest] = splitProps(props, ['class', 'type'])
+  const [local, rest] = splitProps(props, ['class', 'type', 'size'])
 
   return (
     <input
       data-slot="input"
       type={local.type ?? 'text'}
       class={cn(
-        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+        'w-full min-w-0 rounded-md border border-input bg-transparent py-1',
+        {
+          'h-control-sm px-control-sm text-xs': local.size === 'sm',
+          'h-control-md px-control-md text-sm': local.size === 'md' || local.size === undefined,
+          'h-control-lg px-control-lg text-sm': local.size === 'lg',
+        },
         'transition-[color,box-shadow,border-color] ease-out outline-none',
         'placeholder:text-muted-foreground',
         'selection:bg-primary selection:text-primary-foreground',

package/dist/r/src/components/ui/input/input.tsx

@@ -1,7 +1,6 @@
-import type { ComponentProps } from 'solid-js'
 import { createUniqueId, For, Show, splitProps } from 'solid-js'
 import { useFormFieldControl } from '../../../lib/form-field'
-import { InputControl } from './input-control'
+import { InputControl, type InputControlProps } from './input-control'
 
 /**
  * Input.
@@ -12,10 +11,11 @@ import { InputControl } from './input-control'
  * them separate is what lets an input sit inside a custom control without
  * inheriting a form's ARIA graph.
  *
- * Height comes from `h-control-md`; an input cannot be given a new height
- * without a new token, which is what keeps it aligned with Button and Select.
+ * Height comes from the control tokens (`size`, `md` by default); an input
+ * cannot be given a height off that ladder, which is what keeps it aligned
+ * with Button and Select.
  */
-export type InputProps = ComponentProps<'input'> & {
+export type InputProps = InputControlProps & {
   /** Native text suggestions; custom values remain valid and submit unchanged. */
   suggestions?: readonly string[]
 }