@adea-ai/ui 0.142.3 → 0.142.4

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

@@ -10,9 +10,22 @@ import type { ComponentProps } from 'solid-js';
  *
  * The centre track is sized for a lone search field. A bar whose centre holds
  * more than that, such as a search plus an action beside it, passes
- * `centerWidth="wide"`: the centre then stays fluid below 1280px, never
- * narrower than 7rem so its controls are not squeezed out by a long leading
- * group (which scrolls instead), and takes a wider fixed track above it.
+ * `centerWidth="wide"`: the centre then stays fluid below 1280px, with each
+ * side group sized to its content but capped between 30% and 40% of the row
+ * (a longer group scrolls instead): the cap is 30% on the narrowest rows and
+ * grows to 40% as the row widens, so full side groups never squeeze the
+ * centre's search out of it and enlarged text never pushes a short leading
+ * control such as a navigation toggle out of the row. Above 1280px it takes a
+ * wider fixed track.
+ *
+ * A wide bar also never squeezes its centre to nothing. When the row is
+ * narrower than 19rem (measured in rem, so enlarged text reaches it at a wider
+ * window) the centre moves to a second row of its own and the two side groups
+ * share the first, the trailing group taking the remainder beside the leading
+ * group's cap, so the leading and trailing controls and the whole centre each
+ * keep a full row instead of fighting for one. The bar grows from one row
+ * to two only then. The wide layout places the leading group, centre and
+ * trailing group as its first, second and third children.
  *
  * On a frameless desktop window this row is also the drag region, so it carries
  * `window-drag` and the controls inside it opt back out. `macos-inset` and
@@ -31,9 +44,11 @@ export type TopBarProps = ComponentProps<'header'> & {
     glass?: boolean;
     /**
      * How wide the centre track is. `field` (default) suits a lone search field.
-     * `wide` suits a centre that also holds an action: fluid below 1280px and
-     * never narrower than 7rem (the side groups scroll to make room), then a
-     * clamp of 32vw up to 672px between equal side tracks.
+     * `wide` suits a centre that also holds an action: fluid below 1280px between
+     * side groups sized to their content and capped between 30% and 40% of the
+     * row (a longer group scrolls), then a clamp of 32vw up to 672px between equal
+     * side tracks.
+     * Below a 19rem row the centre drops to a second row of its own.
      */
     centerWidth?: 'field' | 'wide';
 };

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

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCA8BxC;AAYD,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,kCAqBvF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,kCAgBF;AAED,mFAAmF;AACnF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAY5D;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCA8BpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,kCAqB7E"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAkCxC;AAYD,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,kCAqBvF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,kCAgBF;AAED,mFAAmF;AACnF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAY5D;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCA8BpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,kCAqB7E"}

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

@@ -22,7 +22,7 @@ function TopBar(props) {
 	return (() => {
 		var _el$ = _tmpl$();
 		spread(_el$, mergeProps({ get ["class"]() {
-			return cn("h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]", local.centerWidth === "wide" && "grid-cols-[auto_minmax(7rem,1fr)_auto] gap-2 md:grid-cols-[auto_minmax(7rem,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)]", local.glass && "glass-panel", local.draggable && "window-drag", local.macosInset ? "window-inset-macos" : "ps-3", local.windowsInset ? "window-inset-windows" : "pe-3", local.class);
+			return cn("h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]", local.centerWidth === "wide" && "@container/top-bar h-auto grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] grid-rows-[minmax(calc(var(--topbar-height)-1px),auto)] gap-x-2 gap-y-0 md:grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)] [&>:nth-child(2)]:@max-[19rem]/top-bar:col-span-full [&>:nth-child(2)]:@max-[19rem]/top-bar:row-start-2 [&>:nth-child(2)]:@max-[19rem]/top-bar:pb-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-span-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-start-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:row-start-1", local.glass && "glass-panel", local.draggable && "window-drag", local.macosInset ? "window-inset-macos" : "ps-3", local.windowsInset ? "window-inset-windows" : "pe-3", local.class);
 		} }, rest), false, false);
 		return _el$;
 	})();
@@ -50,7 +50,7 @@ function TopBarSection(props) {
 			invokeFocusHandler(local.onFocusIn, event);
 		};
 		spread(_el$2, mergeProps({ get ["class"]() {
-			return cn("window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden", local.align === "end" && "md:justify-end", local.align !== "end" && "justify-start", local.class);
+			return cn("window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden", local.align === "end" && "md:justify-end-safe", local.align !== "end" && "justify-start", local.class);
 		} }, rest), false, false);
 		return _el$2;
 	})();

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

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","names":["ComponentProps","Show","splitProps","Search","cn","TopBarProps","draggable","macosInset","windowsInset","glass","centerWidth","TopBar","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","invokeFocusHandler","handler","event","Event","Array","isArray","callback","data","TopBarSection","align","_el$2","_tmpl$2","$$focusin","target","HTMLElement","scrollIntoView","block","inline","onFocusIn","TopBarTitle","_el$3","_tmpl$3","TopBarBreadcrumb","_el$4","_tmpl$4","TopBarSearchProps","placeholder","shortcut","keyshortcuts","TopBarSearch","_el$5","_tmpl$6","_el$6","firstChild","aria-keyshortcuts","_$insert","_$createComponent","when","children","_el$7","_tmpl$5","TopBarPill","label","_el$8","_tmpl$7","_el$9","_$delegateEvents","_$mergeProps","_$createComponent","_$delegateEvents"],"sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Search } from 'lucide-solid'\nimport { cn } from '#lib/utils'\n\n/**\n * TopBar.\n *\n * The window's title row and primary toolbar. Three tracks: a leading group, a\n * centred search, and a trailing group. On wide screens the search is a fixed\n * function of the window width and the side groups are equal remainders. On\n * narrow screens the middle track yields space to the controls, and each side\n * group scrolls when necessary so keyboard focus can reveal every action.\n *\n * The centre track is sized for a lone search field. A bar whose centre holds\n * more than that, such as a search plus an action beside it, passes\n * `centerWidth=\"wide\"`: the centre then stays fluid below 1280px, never\n * narrower than 7rem so its controls are not squeezed out by a long leading\n * group (which scrolls instead), and takes a wider fixed track above it.\n *\n * On a frameless desktop window this row is also the drag region, so it carries\n * `window-drag` and the controls inside it opt back out. `macos-inset` and\n * `windows-inset` reserve the space the native window controls occupy, which is\n * why the row can look off-centre in a frameless window and be correct: it is\n * centred in the space the user can actually see.\n */\nexport type TopBarProps = ComponentProps<'header'> & {\n  /** Make the row draggable, for a frameless window. */\n  draggable?: boolean\n  /** Reserve space for the macOS traffic lights. */\n  macosInset?: boolean\n  /** Reserve space for the Windows caption buttons. */\n  windowsInset?: boolean\n  /** Blur the content scrolling under the bar. */\n  glass?: boolean\n  /**\n   * How wide the centre track is. `field` (default) suits a lone search field.\n   * `wide` suits a centre that also holds an action: fluid below 1280px and\n   * never narrower than 7rem (the side groups scroll to make room), then a\n   * clamp of 32vw up to 672px between equal side tracks.\n   */\n  centerWidth?: 'field' | 'wide'\n}\n\nexport function TopBar(props: TopBarProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'draggable',\n    'macosInset',\n    'windowsInset',\n    'glass',\n    'centerWidth',\n  ])\n\n  return (\n    <header\n      data-slot=\"top-bar\"\n      class={cn(\n        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',\n        local.centerWidth === 'wide' &&\n          'grid-cols-[auto_minmax(7rem,1fr)_auto] gap-2 md:grid-cols-[auto_minmax(7rem,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)]',\n        local.glass && 'glass-panel',\n        local.draggable && 'window-drag',\n        /* Each edge gets exactly one inline-padding utility. A window inset\n           and px-3 would share a layer and tie-break by build order, and a\n           build that put px-3 last hid the leading controls under the\n           traffic lights. */\n        local.macosInset ? 'window-inset-macos' : 'ps-3',\n        local.windowsInset ? 'window-inset-windows' : 'pe-3',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nfunction invokeFocusHandler(handler: unknown, event: Event) {\n  if (Array.isArray(handler)) {\n    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n    callback(data, event)\n  } else if (typeof handler === 'function') {\n    const callback = handler as (event: Event) => void\n    callback(event)\n  }\n}\n\n/** A scrollable side group; equal wide-screen tracks centre the search. */\nexport function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  const [local, rest] = splitProps(props, ['class', 'align', 'onFocusIn'])\n\n  return (\n    <div\n      data-slot=\"top-bar-section\"\n      class={cn(\n        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',\n        local.align === 'end' && 'md:justify-end',\n        local.align !== 'end' && 'justify-start',\n        local.class\n      )}\n      onFocusIn={(event) => {\n        if (event.target instanceof HTMLElement) {\n          event.target.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n        }\n        invokeFocusHandler(local.onFocusIn, event)\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport function TopBarTitle(\n  props: ComponentProps<'div'> & {\n    /** Aligns text within this slot; it does not position the slot. */\n    align?: 'start' | 'center'\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'align'])\n  return (\n    <div\n      data-slot=\"top-bar-title\"\n      class={cn(\n        /* The title slot sits in the drag region; a link, button or field\n           placed in it (a breadcrumb, a view's search) must stay pressable. */\n        'truncate text-sm font-medium [&_:is(a,button,input)]:window-no-drag',\n        local.align === 'center' && 'text-center',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A breadcrumb or path readout that yields to the actions when space runs out. */\nexport function TopBarBreadcrumb(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"top-bar-breadcrumb\"\n      class={cn(\n        'flex min-w-0 items-center gap-1.5 text-sm [&_:is(a,button,input)]:window-no-drag',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type TopBarSearchProps = ComponentProps<'button'> & {\n  /** The hint shown inside the field, e.g. \"Search projects and files\". */\n  placeholder?: string\n  /** The shortcut chip drawn at the trailing edge, e.g. \"⌘K\". */\n  shortcut?: string\n  /**\n   * The parseable chord behind `shortcut`, e.g. `Meta+K`. The chip is\n   * `aria-hidden` — reading it out would pollute the button's accessible\n   * name — so this is what assistive technology announces instead. Supply it\n   * whenever `shortcut` is drawn.\n   */\n  keyshortcuts?: string\n}\n\n/**\n * The search affordance in the middle track.\n *\n * It is a button, not an input, and that is deliberate: clicking it opens the\n * command palette, which already owns the input, the ranking and the keyboard\n * handling. A second live input here would be a second source of truth for the\n * same query. It is styled to read as a field because that is what it behaves\n * like from the user's side.\n */\nexport function TopBarSearch(props: TopBarSearchProps) {\n  const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut', 'keyshortcuts'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-search\"\n      class={cn(\n        'text-muted-foreground flex h-control-md w-full min-w-(--control-height-md) items-center justify-center gap-2 rounded-md border border-input px-3 text-sm sm:justify-start',\n        'transition-colors ease-out outline-none',\n        'hover:bg-surface-hover hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag',\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      <Search aria-hidden=\"true\" class=\"size-4 shrink-0 sm:hidden\" />\n      <span class=\"sr-only sm:not-sr-only sm:truncate\">{local.placeholder ?? 'Search'}</span>\n      <Show when={local.shortcut}>\n        <kbd\n          aria-hidden=\"true\"\n          class=\"bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-code text-code sm:flex\"\n        >\n          {local.shortcut}\n        </kbd>\n      </Show>\n    </button>\n  )\n}\n\n/**\n * A labelled top-bar control — the readouts KiroCrew puts in the trailing\n * group. Container queries on the group decide which of these survive a narrow\n * window; a caller marks the cheap-to-drop ones and the group handles the rest.\n */\nexport function TopBarPill(props: ComponentProps<'button'> & { label: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-pill\"\n      class={cn(\n        'text-muted-foreground inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium',\n        'transition-colors ease-out outline-none',\n        'hover:border-input hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag [&_svg]:size-3.5 [&_svg]:shrink-0',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <span>{local.label}</span>\n    </button>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"top-bar.js","names":["ComponentProps","Show","splitProps","Search","cn","TopBarProps","draggable","macosInset","windowsInset","glass","centerWidth","TopBar","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","invokeFocusHandler","handler","event","Event","Array","isArray","callback","data","TopBarSection","align","_el$2","_tmpl$2","$$focusin","target","HTMLElement","scrollIntoView","block","inline","onFocusIn","TopBarTitle","_el$3","_tmpl$3","TopBarBreadcrumb","_el$4","_tmpl$4","TopBarSearchProps","placeholder","shortcut","keyshortcuts","TopBarSearch","_el$5","_tmpl$6","_el$6","firstChild","aria-keyshortcuts","_$insert","_$createComponent","when","children","_el$7","_tmpl$5","TopBarPill","label","_el$8","_tmpl$7","_el$9","_$delegateEvents","_$mergeProps","_$createComponent","_$delegateEvents"],"sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Search } from 'lucide-solid'\nimport { cn } from '#lib/utils'\n\n/**\n * TopBar.\n *\n * The window's title row and primary toolbar. Three tracks: a leading group, a\n * centred search, and a trailing group. On wide screens the search is a fixed\n * function of the window width and the side groups are equal remainders. On\n * narrow screens the middle track yields space to the controls, and each side\n * group scrolls when necessary so keyboard focus can reveal every action.\n *\n * The centre track is sized for a lone search field. A bar whose centre holds\n * more than that, such as a search plus an action beside it, passes\n * `centerWidth=\"wide\"`: the centre then stays fluid below 1280px, with each\n * side group sized to its content but capped between 30% and 40% of the row\n * (a longer group scrolls instead): the cap is 30% on the narrowest rows and\n * grows to 40% as the row widens, so full side groups never squeeze the\n * centre's search out of it and enlarged text never pushes a short leading\n * control such as a navigation toggle out of the row. Above 1280px it takes a\n * wider fixed track.\n *\n * A wide bar also never squeezes its centre to nothing. When the row is\n * narrower than 19rem (measured in rem, so enlarged text reaches it at a wider\n * window) the centre moves to a second row of its own and the two side groups\n * share the first, the trailing group taking the remainder beside the leading\n * group's cap, so the leading and trailing controls and the whole centre each\n * keep a full row instead of fighting for one. The bar grows from one row\n * to two only then. The wide layout places the leading group, centre and\n * trailing group as its first, second and third children.\n *\n * On a frameless desktop window this row is also the drag region, so it carries\n * `window-drag` and the controls inside it opt back out. `macos-inset` and\n * `windows-inset` reserve the space the native window controls occupy, which is\n * why the row can look off-centre in a frameless window and be correct: it is\n * centred in the space the user can actually see.\n */\nexport type TopBarProps = ComponentProps<'header'> & {\n  /** Make the row draggable, for a frameless window. */\n  draggable?: boolean\n  /** Reserve space for the macOS traffic lights. */\n  macosInset?: boolean\n  /** Reserve space for the Windows caption buttons. */\n  windowsInset?: boolean\n  /** Blur the content scrolling under the bar. */\n  glass?: boolean\n  /**\n   * How wide the centre track is. `field` (default) suits a lone search field.\n   * `wide` suits a centre that also holds an action: fluid below 1280px between\n   * side groups sized to their content and capped between 30% and 40% of the\n   * row (a longer group scrolls), then a clamp of 32vw up to 672px between equal\n   * side tracks.\n   * Below a 19rem row the centre drops to a second row of its own.\n   */\n  centerWidth?: 'field' | 'wide'\n}\n\nexport function TopBar(props: TopBarProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'draggable',\n    'macosInset',\n    'windowsInset',\n    'glass',\n    'centerWidth',\n  ])\n\n  return (\n    <header\n      data-slot=\"top-bar\"\n      class={cn(\n        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',\n        /* The bar is its own container so its children can move to a second\n           row by the row's width in rem, which enlarged text shrinks. The\n           first row keeps the bar's height (less the 1px bottom border); the\n           second only exists when the centre has dropped onto it. */\n        local.centerWidth === 'wide' &&\n          '@container/top-bar h-auto grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] grid-rows-[minmax(calc(var(--topbar-height)-1px),auto)] gap-x-2 gap-y-0 md:grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)] [&>:nth-child(2)]:@max-[19rem]/top-bar:col-span-full [&>:nth-child(2)]:@max-[19rem]/top-bar:row-start-2 [&>:nth-child(2)]:@max-[19rem]/top-bar:pb-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-span-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-start-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:row-start-1',\n        local.glass && 'glass-panel',\n        local.draggable && 'window-drag',\n        /* Each edge gets exactly one inline-padding utility. A window inset\n           and px-3 would share a layer and tie-break by build order, and a\n           build that put px-3 last hid the leading controls under the\n           traffic lights. */\n        local.macosInset ? 'window-inset-macos' : 'ps-3',\n        local.windowsInset ? 'window-inset-windows' : 'pe-3',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nfunction invokeFocusHandler(handler: unknown, event: Event) {\n  if (Array.isArray(handler)) {\n    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n    callback(data, event)\n  } else if (typeof handler === 'function') {\n    const callback = handler as (event: Event) => void\n    callback(event)\n  }\n}\n\n/** A scrollable side group; equal wide-screen tracks centre the search. */\nexport function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  const [local, rest] = splitProps(props, ['class', 'align', 'onFocusIn'])\n\n  return (\n    <div\n      data-slot=\"top-bar-section\"\n      class={cn(\n        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',\n        local.align === 'end' && 'md:justify-end-safe',\n        local.align !== 'end' && 'justify-start',\n        local.class\n      )}\n      onFocusIn={(event) => {\n        if (event.target instanceof HTMLElement) {\n          event.target.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n        }\n        invokeFocusHandler(local.onFocusIn, event)\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport function TopBarTitle(\n  props: ComponentProps<'div'> & {\n    /** Aligns text within this slot; it does not position the slot. */\n    align?: 'start' | 'center'\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'align'])\n  return (\n    <div\n      data-slot=\"top-bar-title\"\n      class={cn(\n        /* The title slot sits in the drag region; a link, button or field\n           placed in it (a breadcrumb, a view's search) must stay pressable. */\n        'truncate text-sm font-medium [&_:is(a,button,input)]:window-no-drag',\n        local.align === 'center' && 'text-center',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A breadcrumb or path readout that yields to the actions when space runs out. */\nexport function TopBarBreadcrumb(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"top-bar-breadcrumb\"\n      class={cn(\n        'flex min-w-0 items-center gap-1.5 text-sm [&_:is(a,button,input)]:window-no-drag',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type TopBarSearchProps = ComponentProps<'button'> & {\n  /** The hint shown inside the field, e.g. \"Search projects and files\". */\n  placeholder?: string\n  /** The shortcut chip drawn at the trailing edge, e.g. \"⌘K\". */\n  shortcut?: string\n  /**\n   * The parseable chord behind `shortcut`, e.g. `Meta+K`. The chip is\n   * `aria-hidden` — reading it out would pollute the button's accessible\n   * name — so this is what assistive technology announces instead. Supply it\n   * whenever `shortcut` is drawn.\n   */\n  keyshortcuts?: string\n}\n\n/**\n * The search affordance in the middle track.\n *\n * It is a button, not an input, and that is deliberate: clicking it opens the\n * command palette, which already owns the input, the ranking and the keyboard\n * handling. A second live input here would be a second source of truth for the\n * same query. It is styled to read as a field because that is what it behaves\n * like from the user's side.\n */\nexport function TopBarSearch(props: TopBarSearchProps) {\n  const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut', 'keyshortcuts'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-search\"\n      class={cn(\n        'text-muted-foreground flex h-control-md w-full min-w-(--control-height-md) items-center justify-center gap-2 rounded-md border border-input px-3 text-sm sm:justify-start',\n        'transition-colors ease-out outline-none',\n        'hover:bg-surface-hover hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag',\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      <Search aria-hidden=\"true\" class=\"size-4 shrink-0 sm:hidden\" />\n      <span class=\"sr-only sm:not-sr-only sm:truncate\">{local.placeholder ?? 'Search'}</span>\n      <Show when={local.shortcut}>\n        <kbd\n          aria-hidden=\"true\"\n          class=\"bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-code text-code sm:flex\"\n        >\n          {local.shortcut}\n        </kbd>\n      </Show>\n    </button>\n  )\n}\n\n/**\n * A labelled top-bar control — the readouts KiroCrew puts in the trailing\n * group. Container queries on the group decide which of these survive a narrow\n * window; a caller marks the cheap-to-drop ones and the group handles the rest.\n */\nexport function TopBarPill(props: ComponentProps<'button'> & { label: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-pill\"\n      class={cn(\n        'text-muted-foreground inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium',\n        'transition-colors ease-out outline-none',\n        'hover:border-input hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag [&_svg]:size-3.5 [&_svg]:shrink-0',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <span>{local.label}</span>\n    </button>\n  )\n}\n"],"mappings":"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"}

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

@@ -14,9 +14,22 @@ import { cn } from '../../../lib/utils'
  *
  * The centre track is sized for a lone search field. A bar whose centre holds
  * more than that, such as a search plus an action beside it, passes
- * `centerWidth="wide"`: the centre then stays fluid below 1280px, never
- * narrower than 7rem so its controls are not squeezed out by a long leading
- * group (which scrolls instead), and takes a wider fixed track above it.
+ * `centerWidth="wide"`: the centre then stays fluid below 1280px, with each
+ * side group sized to its content but capped between 30% and 40% of the row
+ * (a longer group scrolls instead): the cap is 30% on the narrowest rows and
+ * grows to 40% as the row widens, so full side groups never squeeze the
+ * centre's search out of it and enlarged text never pushes a short leading
+ * control such as a navigation toggle out of the row. Above 1280px it takes a
+ * wider fixed track.
+ *
+ * A wide bar also never squeezes its centre to nothing. When the row is
+ * narrower than 19rem (measured in rem, so enlarged text reaches it at a wider
+ * window) the centre moves to a second row of its own and the two side groups
+ * share the first, the trailing group taking the remainder beside the leading
+ * group's cap, so the leading and trailing controls and the whole centre each
+ * keep a full row instead of fighting for one. The bar grows from one row
+ * to two only then. The wide layout places the leading group, centre and
+ * trailing group as its first, second and third children.
  *
  * On a frameless desktop window this row is also the drag region, so it carries
  * `window-drag` and the controls inside it opt back out. `macos-inset` and
@@ -35,9 +48,11 @@ export type TopBarProps = ComponentProps<'header'> & {
   glass?: boolean
   /**
    * How wide the centre track is. `field` (default) suits a lone search field.
-   * `wide` suits a centre that also holds an action: fluid below 1280px and
-   * never narrower than 7rem (the side groups scroll to make room), then a
-   * clamp of 32vw up to 672px between equal side tracks.
+   * `wide` suits a centre that also holds an action: fluid below 1280px between
+   * side groups sized to their content and capped between 30% and 40% of the
+   * row (a longer group scrolls), then a clamp of 32vw up to 672px between equal
+   * side tracks.
+   * Below a 19rem row the centre drops to a second row of its own.
    */
   centerWidth?: 'field' | 'wide'
 }
@@ -57,8 +72,12 @@ export function TopBar(props: TopBarProps) {
       data-slot="top-bar"
       class={cn(
         'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
+        /* The bar is its own container so its children can move to a second
+           row by the row's width in rem, which enlarged text shrinks. The
+           first row keeps the bar's height (less the 1px bottom border); the
+           second only exists when the centre has dropped onto it. */
         local.centerWidth === 'wide' &&
-          'grid-cols-[auto_minmax(7rem,1fr)_auto] gap-2 md:grid-cols-[auto_minmax(7rem,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)]',
+          '@container/top-bar h-auto grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] grid-rows-[minmax(calc(var(--topbar-height)-1px),auto)] gap-x-2 gap-y-0 md:grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)] [&>:nth-child(2)]:@max-[19rem]/top-bar:col-span-full [&>:nth-child(2)]:@max-[19rem]/top-bar:row-start-2 [&>:nth-child(2)]:@max-[19rem]/top-bar:pb-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-span-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-start-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:row-start-1',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         /* Each edge gets exactly one inline-padding utility. A window inset
@@ -93,7 +112,7 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
       data-slot="top-bar-section"
       class={cn(
         'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',
-        local.align === 'end' && 'md:justify-end',
+        local.align === 'end' && 'md:justify-end-safe',
         local.align !== 'end' && 'justify-start',
         local.class
       )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.142.3",
+  "version": "0.142.4",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

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

@@ -14,9 +14,22 @@ import { cn } from '#lib/utils'
  *
  * The centre track is sized for a lone search field. A bar whose centre holds
  * more than that, such as a search plus an action beside it, passes
- * `centerWidth="wide"`: the centre then stays fluid below 1280px, never
- * narrower than 7rem so its controls are not squeezed out by a long leading
- * group (which scrolls instead), and takes a wider fixed track above it.
+ * `centerWidth="wide"`: the centre then stays fluid below 1280px, with each
+ * side group sized to its content but capped between 30% and 40% of the row
+ * (a longer group scrolls instead): the cap is 30% on the narrowest rows and
+ * grows to 40% as the row widens, so full side groups never squeeze the
+ * centre's search out of it and enlarged text never pushes a short leading
+ * control such as a navigation toggle out of the row. Above 1280px it takes a
+ * wider fixed track.
+ *
+ * A wide bar also never squeezes its centre to nothing. When the row is
+ * narrower than 19rem (measured in rem, so enlarged text reaches it at a wider
+ * window) the centre moves to a second row of its own and the two side groups
+ * share the first, the trailing group taking the remainder beside the leading
+ * group's cap, so the leading and trailing controls and the whole centre each
+ * keep a full row instead of fighting for one. The bar grows from one row
+ * to two only then. The wide layout places the leading group, centre and
+ * trailing group as its first, second and third children.
  *
  * On a frameless desktop window this row is also the drag region, so it carries
  * `window-drag` and the controls inside it opt back out. `macos-inset` and
@@ -35,9 +48,11 @@ export type TopBarProps = ComponentProps<'header'> & {
   glass?: boolean
   /**
    * How wide the centre track is. `field` (default) suits a lone search field.
-   * `wide` suits a centre that also holds an action: fluid below 1280px and
-   * never narrower than 7rem (the side groups scroll to make room), then a
-   * clamp of 32vw up to 672px between equal side tracks.
+   * `wide` suits a centre that also holds an action: fluid below 1280px between
+   * side groups sized to their content and capped between 30% and 40% of the
+   * row (a longer group scrolls), then a clamp of 32vw up to 672px between equal
+   * side tracks.
+   * Below a 19rem row the centre drops to a second row of its own.
    */
   centerWidth?: 'field' | 'wide'
 }
@@ -57,8 +72,12 @@ export function TopBar(props: TopBarProps) {
       data-slot="top-bar"
       class={cn(
         'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
+        /* The bar is its own container so its children can move to a second
+           row by the row's width in rem, which enlarged text shrinks. The
+           first row keeps the bar's height (less the 1px bottom border); the
+           second only exists when the centre has dropped onto it. */
         local.centerWidth === 'wide' &&
-          'grid-cols-[auto_minmax(7rem,1fr)_auto] gap-2 md:grid-cols-[auto_minmax(7rem,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)]',
+          '@container/top-bar h-auto grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] grid-rows-[minmax(calc(var(--topbar-height)-1px),auto)] gap-x-2 gap-y-0 md:grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)] [&>:nth-child(2)]:@max-[19rem]/top-bar:col-span-full [&>:nth-child(2)]:@max-[19rem]/top-bar:row-start-2 [&>:nth-child(2)]:@max-[19rem]/top-bar:pb-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-span-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-start-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:row-start-1',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         /* Each edge gets exactly one inline-padding utility. A window inset
@@ -93,7 +112,7 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
       data-slot="top-bar-section"
       class={cn(
         'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',
-        local.align === 'end' && 'md:justify-end',
+        local.align === 'end' && 'md:justify-end-safe',
         local.align !== 'end' && 'justify-start',
         local.class
       )}