@adea-ai/ui 0.146.0 → 0.146.2

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

@@ -27,6 +27,11 @@ import type { ComponentProps, JSX } from 'solid-js';
  * own so the leading controls, the breadcrumb and the actions keep their room;
  * the breadcrumb is the first thing to truncate.
  *
+ * The bar never spills past its window. When the leading controls are wider than
+ * the window (a 320px viewport at 200% text), they wrap onto a second row inside
+ * the leading half instead of being cut off or pushing the page sideways, and
+ * the actions are capped to the bar and scroll if they are still too wide.
+ *
  * On a frameless desktop window the bar is the drag region (`draggable`) and
  * every control opts back out; `macosInset` and `windowsInset` reserve the
  * native window controls.

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

@@ -1 +1 @@
-{"version":3,"file":"shell-top-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/shell-top-bar/shell-top-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,kEAAkE;IAClE,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACxB,iCAAiC;IACjC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC3B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iFAAiF;IACjF,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACxB,yBAAyB;IACzB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiHlD"}
+{"version":3,"file":"shell-top-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/shell-top-bar/shell-top-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,kEAAkE;IAClE,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACxB,iCAAiC;IACjC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC3B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iFAAiF;IACjF,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACxB,yBAAyB;IACzB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiHlD"}

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

@@ -9,7 +9,7 @@ var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=shell-top-bar-workspace cla
 var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=shell-top-bar-breadcrumb class="window-no-drag flex h-topbar min-w-0 flex-1 items-center truncate ps-3 text-sm [&amp;_:is(a,button)]:window-no-drag">`);
 var _tmpl$5 = /*#__PURE__*/ template(`<div class="min-w-0 flex-1"aria-hidden=true>`);
 var _tmpl$6 = /*#__PURE__*/ template(`<div data-slot=shell-top-bar-search class="window-no-drag min-w-0 max-w-md shrink basis-72 px-3 @max-[34rem]/shell-top-bar:order-last @max-[34rem]/shell-top-bar:max-w-none @max-[34rem]/shell-top-bar:basis-full @max-[34rem]/shell-top-bar:pb-2">`);
-var _tmpl$7 = /*#__PURE__*/ template(`<div data-slot=shell-top-bar-actions class="window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1">`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div data-slot=shell-top-bar-actions class="window-no-drag flex h-topbar max-w-full min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1">`);
 var _tmpl$8 = /*#__PURE__*/ template(`<header data-slot=shell-top-bar><div data-slot=shell-top-bar-leading>`);
 function ShellTopBar(props) {
 	const [local, rest] = splitProps(props, [
@@ -118,7 +118,7 @@ function ShellTopBar(props) {
 			}
 		}), null);
 		effect((_p$) => {
-			var _v$ = local.sidebarOpen ? "true" : "false", _v$2 = cn("window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden pe-3", local.sidebarOpen && "md:w-[calc(var(--rail-width)+var(--shell-sidebar-width,17rem)-var(--shell-top-bar-inset))]");
+			var _v$ = local.sidebarOpen ? "true" : "false", _v$2 = cn("window-no-drag flex min-h-topbar max-w-full min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1 pe-3", local.sidebarOpen && "md:w-[calc(var(--rail-width)+var(--shell-sidebar-width,17rem)-var(--shell-top-bar-inset))]");
 			_v$ !== _p$.e && setAttribute(_el$2, "data-sidebar-open", _p$.e = _v$);
 			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
 			return _p$;

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

@@ -1 +1 @@
-{"version":3,"file":"shell-top-bar.js","names":["ComponentProps","JSX","children","Show","splitProps","cn","Separator","ShellTopBarProps","Omit","navigation","Element","sidebarToggle","workspace","sidebarOpen","sidebarWidth","breadcrumb","search","actions","draggable","macosInset","windowsInset","glass","ShellTopBar","props","local","rest","_el$","_tmpl$8","_el$2","firstChild","_$spread","_$mergeProps","class","style","_$memo","undefined","_$insert","_$createComponent","when","_el$3","_tmpl$","_el$4","_tmpl$2","_el$5","_tmpl$3","orientation","_el$6","_tmpl$4","_tmpl$5","_el$8","_tmpl$6","_el$9","_tmpl$7","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","_$mergeProps","_$memo","_$createComponent","_$setAttribute","_$className"],"sources":["../../../../src/components/layout/shell-top-bar/shell-top-bar.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { children, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Separator } from '../../ui/separator'\n\n/**\n * ShellTopBar.\n *\n * The window's top bar as both applications draw it. It has two halves with a\n * vertical divider between them:\n *\n *   - **Leading**: history arrows, the sidebar toggle and the workspace\n *     switcher, in that order. This is the part that belongs to the window.\n *   - **Content**: breadcrumbs, search and the view's actions. This is the part\n *     that belongs to the view, and it always sits to the right of the divider.\n *\n * ## Why the divider tracks the sidebar\n *\n * With the sidebar open the divider lands on the sidebar's trailing edge, so the\n * bar reads as the rail and sidebar's header on one side and the content's\n * header on the other. The bar spans the rail and the sidebar (they sit under\n * it), so the leading half is as wide as `--rail-width` plus the sidebar's width\n * less the bar's own start padding. The host publishes the width as\n * `--shell-sidebar-width` on an ancestor; the fallback of 17rem matches the\n * default sidebar. Below the 48rem breakpoint the sidebar is a drawer and the\n * leading half is only as wide as its controls.\n *\n * ## Narrow windows\n *\n * The bar is its own container. Below 34rem the search drops to a row of its\n * own so the leading controls, the breadcrumb and the actions keep their room;\n * the breadcrumb is the first thing to truncate.\n *\n * On a frameless desktop window the bar is the drag region (`draggable`) and\n * every control opts back out; `macosInset` and `windowsInset` reserve the\n * native window controls.\n */\nexport type ShellTopBarProps = Omit<ComponentProps<'header'>, 'children'> & {\n  /** History arrows. Rendered first, left of the sidebar toggle. */\n  navigation?: JSX.Element\n  /** The sidebar toggle button. */\n  sidebarToggle?: JSX.Element\n  /** The workspace switcher. */\n  workspace?: JSX.Element\n  /**\n   * Whether the sidebar is open at wide widths. Open, the divider aligns with\n   * the sidebar's edge; closed, the leading half hugs its controls.\n   */\n  sidebarOpen?: boolean\n  /**\n   * The open sidebar's width in pixels. Published as `--shell-sidebar-width` on\n   * the bar so the divider tracks a resizable sidebar; leave it unset to use an\n   * ancestor's variable or the 17rem default.\n   */\n  sidebarWidth?: number\n  /** Breadcrumbs or the view's title. Takes the free space and truncates first. */\n  breadcrumb?: JSX.Element\n  /** The view's search. */\n  search?: JSX.Element\n  /** The view's actions, at the trailing edge. */\n  actions?: JSX.Element\n  /** Make the bar a drag region, for a frameless window. */\n  draggable?: boolean\n  /** Reserve space for the macOS traffic lights. */\n  macosInset?: boolean\n  /** Reserve space for the Windows caption buttons. */\n  windowsInset?: boolean\n  /** Blur the content scrolling under the bar. */\n  glass?: boolean\n}\n\nexport function ShellTopBar(props: ShellTopBarProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'navigation',\n    'sidebarToggle',\n    'workspace',\n    'sidebarOpen',\n    'sidebarWidth',\n    'breadcrumb',\n    'search',\n    'actions',\n    'draggable',\n    'macosInset',\n    'windowsInset',\n    'glass',\n  ])\n\n  // Resolve each slot once: a JSX prop is a getter that builds its elements on\n  // every read, so testing it with `Show` and then rendering it would build\n  // (and run the refs of) two copies.\n  const navigation = children(() => local.navigation)\n  const sidebarToggle = children(() => local.sidebarToggle)\n  const workspace = children(() => local.workspace)\n  const breadcrumb = children(() => local.breadcrumb)\n  const search = children(() => local.search)\n  const actions = children(() => local.actions)\n\n  return (\n    <header\n      data-slot=\"shell-top-bar\"\n      class={cn(\n        '@container/shell-top-bar relative z-(--z-sticky) flex min-h-topbar shrink-0 flex-wrap items-center border-b border-border bg-card text-card-foreground',\n        local.glass && 'glass-panel',\n        local.draggable && 'window-drag',\n        /* Each edge gets exactly one inline-padding utility, for the reason the\n           shared TopBar documents: two would tie-break by build order. The inset\n           is also published as a variable so the leading half can subtract it. */\n        local.macosInset\n          ? 'window-inset-macos [--shell-top-bar-inset:84px]'\n          : 'ps-3 [--shell-top-bar-inset:0.75rem]',\n        local.windowsInset ? 'window-inset-windows' : 'pe-3',\n        local.class\n      )}\n      style={\n        local.sidebarWidth === undefined\n          ? undefined\n          : { '--shell-sidebar-width': `${local.sidebarWidth}px` }\n      }\n      {...rest}\n    >\n      <div\n        data-slot=\"shell-top-bar-leading\"\n        data-sidebar-open={local.sidebarOpen ? 'true' : 'false'}\n        class={cn(\n          'window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden pe-3',\n          /* Wide and open: span the rail and the sidebar so the divider lands on\n             the sidebar's edge. The sidebar's own border is the 1px the divider\n             overlaps, so no extra allowance is needed. */\n          local.sidebarOpen &&\n            'md:w-[calc(var(--rail-width)+var(--shell-sidebar-width,17rem)-var(--shell-top-bar-inset))]'\n        )}\n      >\n        <Show when={navigation()}>\n          <div data-slot=\"shell-top-bar-navigation\" class=\"flex shrink-0 items-center gap-2\">\n            {navigation()}\n          </div>\n        </Show>\n        <Show when={sidebarToggle()}>\n          <div data-slot=\"shell-top-bar-toggle\" class=\"flex shrink-0 items-center\">\n            {sidebarToggle()}\n          </div>\n        </Show>\n        <Show when={workspace()}>\n          <div data-slot=\"shell-top-bar-workspace\" class=\"flex min-w-0 items-center\">\n            {workspace()}\n          </div>\n        </Show>\n      </div>\n      <Separator\n        orientation=\"vertical\"\n        data-slot=\"shell-top-bar-divider\"\n        aria-hidden=\"true\"\n        class=\"h-5\"\n      />\n      <Show when={breadcrumb()}>\n        <div\n          data-slot=\"shell-top-bar-breadcrumb\"\n          class=\"window-no-drag flex h-topbar min-w-0 flex-1 items-center truncate ps-3 text-sm [&_:is(a,button)]:window-no-drag\"\n        >\n          {breadcrumb()}\n        </div>\n      </Show>\n      <Show when={!breadcrumb()}>\n        <div class=\"min-w-0 flex-1\" aria-hidden=\"true\" />\n      </Show>\n      <Show when={search()}>\n        <div\n          data-slot=\"shell-top-bar-search\"\n          class=\"window-no-drag min-w-0 max-w-md shrink basis-72 px-3 @max-[34rem]/shell-top-bar:order-last @max-[34rem]/shell-top-bar:max-w-none @max-[34rem]/shell-top-bar:basis-full @max-[34rem]/shell-top-bar:pb-2\"\n        >\n          {search()}\n        </div>\n      </Show>\n      <Show when={actions()}>\n        <div\n          data-slot=\"shell-top-bar-actions\"\n          class=\"window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1\"\n        >\n          {actions()}\n        </div>\n      </Show>\n    </header>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"shell-top-bar.js","names":["ComponentProps","JSX","children","Show","splitProps","cn","Separator","ShellTopBarProps","Omit","navigation","Element","sidebarToggle","workspace","sidebarOpen","sidebarWidth","breadcrumb","search","actions","draggable","macosInset","windowsInset","glass","ShellTopBar","props","local","rest","_el$","_tmpl$8","_el$2","firstChild","_$spread","_$mergeProps","class","style","_$memo","undefined","_$insert","_$createComponent","when","_el$3","_tmpl$","_el$4","_tmpl$2","_el$5","_tmpl$3","orientation","_el$6","_tmpl$4","_tmpl$5","_el$8","_tmpl$6","_el$9","_tmpl$7","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","_$mergeProps","_$memo","_$createComponent","_$setAttribute","_$className"],"sources":["../../../../src/components/layout/shell-top-bar/shell-top-bar.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { children, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Separator } from '../../ui/separator'\n\n/**\n * ShellTopBar.\n *\n * The window's top bar as both applications draw it. It has two halves with a\n * vertical divider between them:\n *\n *   - **Leading**: history arrows, the sidebar toggle and the workspace\n *     switcher, in that order. This is the part that belongs to the window.\n *   - **Content**: breadcrumbs, search and the view's actions. This is the part\n *     that belongs to the view, and it always sits to the right of the divider.\n *\n * ## Why the divider tracks the sidebar\n *\n * With the sidebar open the divider lands on the sidebar's trailing edge, so the\n * bar reads as the rail and sidebar's header on one side and the content's\n * header on the other. The bar spans the rail and the sidebar (they sit under\n * it), so the leading half is as wide as `--rail-width` plus the sidebar's width\n * less the bar's own start padding. The host publishes the width as\n * `--shell-sidebar-width` on an ancestor; the fallback of 17rem matches the\n * default sidebar. Below the 48rem breakpoint the sidebar is a drawer and the\n * leading half is only as wide as its controls.\n *\n * ## Narrow windows\n *\n * The bar is its own container. Below 34rem the search drops to a row of its\n * own so the leading controls, the breadcrumb and the actions keep their room;\n * the breadcrumb is the first thing to truncate.\n *\n * The bar never spills past its window. When the leading controls are wider than\n * the window (a 320px viewport at 200% text), they wrap onto a second row inside\n * the leading half instead of being cut off or pushing the page sideways, and\n * the actions are capped to the bar and scroll if they are still too wide.\n *\n * On a frameless desktop window the bar is the drag region (`draggable`) and\n * every control opts back out; `macosInset` and `windowsInset` reserve the\n * native window controls.\n */\nexport type ShellTopBarProps = Omit<ComponentProps<'header'>, 'children'> & {\n  /** History arrows. Rendered first, left of the sidebar toggle. */\n  navigation?: JSX.Element\n  /** The sidebar toggle button. */\n  sidebarToggle?: JSX.Element\n  /** The workspace switcher. */\n  workspace?: JSX.Element\n  /**\n   * Whether the sidebar is open at wide widths. Open, the divider aligns with\n   * the sidebar's edge; closed, the leading half hugs its controls.\n   */\n  sidebarOpen?: boolean\n  /**\n   * The open sidebar's width in pixels. Published as `--shell-sidebar-width` on\n   * the bar so the divider tracks a resizable sidebar; leave it unset to use an\n   * ancestor's variable or the 17rem default.\n   */\n  sidebarWidth?: number\n  /** Breadcrumbs or the view's title. Takes the free space and truncates first. */\n  breadcrumb?: JSX.Element\n  /** The view's search. */\n  search?: JSX.Element\n  /** The view's actions, at the trailing edge. */\n  actions?: JSX.Element\n  /** Make the bar a drag region, for a frameless window. */\n  draggable?: boolean\n  /** Reserve space for the macOS traffic lights. */\n  macosInset?: boolean\n  /** Reserve space for the Windows caption buttons. */\n  windowsInset?: boolean\n  /** Blur the content scrolling under the bar. */\n  glass?: boolean\n}\n\nexport function ShellTopBar(props: ShellTopBarProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'navigation',\n    'sidebarToggle',\n    'workspace',\n    'sidebarOpen',\n    'sidebarWidth',\n    'breadcrumb',\n    'search',\n    'actions',\n    'draggable',\n    'macosInset',\n    'windowsInset',\n    'glass',\n  ])\n\n  // Resolve each slot once: a JSX prop is a getter that builds its elements on\n  // every read, so testing it with `Show` and then rendering it would build\n  // (and run the refs of) two copies.\n  const navigation = children(() => local.navigation)\n  const sidebarToggle = children(() => local.sidebarToggle)\n  const workspace = children(() => local.workspace)\n  const breadcrumb = children(() => local.breadcrumb)\n  const search = children(() => local.search)\n  const actions = children(() => local.actions)\n\n  return (\n    <header\n      data-slot=\"shell-top-bar\"\n      class={cn(\n        '@container/shell-top-bar relative z-(--z-sticky) flex min-h-topbar shrink-0 flex-wrap items-center border-b border-border bg-card text-card-foreground',\n        local.glass && 'glass-panel',\n        local.draggable && 'window-drag',\n        /* Each edge gets exactly one inline-padding utility, for the reason the\n           shared TopBar documents: two would tie-break by build order. The inset\n           is also published as a variable so the leading half can subtract it. */\n        local.macosInset\n          ? 'window-inset-macos [--shell-top-bar-inset:84px]'\n          : 'ps-3 [--shell-top-bar-inset:0.75rem]',\n        local.windowsInset ? 'window-inset-windows' : 'pe-3',\n        local.class\n      )}\n      style={\n        local.sidebarWidth === undefined\n          ? undefined\n          : { '--shell-sidebar-width': `${local.sidebarWidth}px` }\n      }\n      {...rest}\n    >\n      <div\n        data-slot=\"shell-top-bar-leading\"\n        data-sidebar-open={local.sidebarOpen ? 'true' : 'false'}\n        class={cn(\n          'window-no-drag flex min-h-topbar max-w-full min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1 pe-3',\n          /* Wide and open: span the rail and the sidebar so the divider lands on\n             the sidebar's edge. The sidebar's own border is the 1px the divider\n             overlaps, so no extra allowance is needed. */\n          local.sidebarOpen &&\n            'md:w-[calc(var(--rail-width)+var(--shell-sidebar-width,17rem)-var(--shell-top-bar-inset))]'\n        )}\n      >\n        <Show when={navigation()}>\n          <div data-slot=\"shell-top-bar-navigation\" class=\"flex shrink-0 items-center gap-2\">\n            {navigation()}\n          </div>\n        </Show>\n        <Show when={sidebarToggle()}>\n          <div data-slot=\"shell-top-bar-toggle\" class=\"flex shrink-0 items-center\">\n            {sidebarToggle()}\n          </div>\n        </Show>\n        <Show when={workspace()}>\n          <div data-slot=\"shell-top-bar-workspace\" class=\"flex min-w-0 items-center\">\n            {workspace()}\n          </div>\n        </Show>\n      </div>\n      <Separator\n        orientation=\"vertical\"\n        data-slot=\"shell-top-bar-divider\"\n        aria-hidden=\"true\"\n        class=\"h-5\"\n      />\n      <Show when={breadcrumb()}>\n        <div\n          data-slot=\"shell-top-bar-breadcrumb\"\n          class=\"window-no-drag flex h-topbar min-w-0 flex-1 items-center truncate ps-3 text-sm [&_:is(a,button)]:window-no-drag\"\n        >\n          {breadcrumb()}\n        </div>\n      </Show>\n      <Show when={!breadcrumb()}>\n        <div class=\"min-w-0 flex-1\" aria-hidden=\"true\" />\n      </Show>\n      <Show when={search()}>\n        <div\n          data-slot=\"shell-top-bar-search\"\n          class=\"window-no-drag min-w-0 max-w-md shrink basis-72 px-3 @max-[34rem]/shell-top-bar:order-last @max-[34rem]/shell-top-bar:max-w-none @max-[34rem]/shell-top-bar:basis-full @max-[34rem]/shell-top-bar:pb-2\"\n        >\n          {search()}\n        </div>\n      </Show>\n      <Show when={actions()}>\n        <div\n          data-slot=\"shell-top-bar-actions\"\n          class=\"window-no-drag flex h-topbar max-w-full min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1\"\n        >\n          {actions()}\n        </div>\n      </Show>\n    </header>\n  )\n}\n"],"mappings":"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"}

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

@@ -31,6 +31,11 @@ import { Separator } from '../../ui/separator'
  * own so the leading controls, the breadcrumb and the actions keep their room;
  * the breadcrumb is the first thing to truncate.
  *
+ * The bar never spills past its window. When the leading controls are wider than
+ * the window (a 320px viewport at 200% text), they wrap onto a second row inside
+ * the leading half instead of being cut off or pushing the page sideways, and
+ * the actions are capped to the bar and scroll if they are still too wide.
+ *
  * On a frameless desktop window the bar is the drag region (`draggable`) and
  * every control opts back out; `macosInset` and `windowsInset` reserve the
  * native window controls.
@@ -123,7 +128,7 @@ export function ShellTopBar(props: ShellTopBarProps) {
         data-slot="shell-top-bar-leading"
         data-sidebar-open={local.sidebarOpen ? 'true' : 'false'}
         class={cn(
-          'window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden pe-3',
+          'window-no-drag flex min-h-topbar max-w-full min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1 pe-3',
           /* Wide and open: span the rail and the sidebar so the divider lands on
              the sidebar's edge. The sidebar's own border is the 1px the divider
              overlaps, so no extra allowance is needed. */
@@ -175,7 +180,7 @@ export function ShellTopBar(props: ShellTopBarProps) {
       <Show when={actions()}>
         <div
           data-slot="shell-top-bar-actions"
-          class="window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1"
+          class="window-no-drag flex h-topbar max-w-full min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1"
         >
           {actions()}
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.146.0",
+  "version": "0.146.2",
   "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/shell-top-bar/shell-top-bar.tsx

@@ -31,6 +31,11 @@ import { Separator } from '../../ui/separator'
  * own so the leading controls, the breadcrumb and the actions keep their room;
  * the breadcrumb is the first thing to truncate.
  *
+ * The bar never spills past its window. When the leading controls are wider than
+ * the window (a 320px viewport at 200% text), they wrap onto a second row inside
+ * the leading half instead of being cut off or pushing the page sideways, and
+ * the actions are capped to the bar and scroll if they are still too wide.
+ *
  * On a frameless desktop window the bar is the drag region (`draggable`) and
  * every control opts back out; `macosInset` and `windowsInset` reserve the
  * native window controls.
@@ -123,7 +128,7 @@ export function ShellTopBar(props: ShellTopBarProps) {
         data-slot="shell-top-bar-leading"
         data-sidebar-open={local.sidebarOpen ? 'true' : 'false'}
         class={cn(
-          'window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden pe-3',
+          'window-no-drag flex min-h-topbar max-w-full min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1 pe-3',
           /* Wide and open: span the rail and the sidebar so the divider lands on
              the sidebar's edge. The sidebar's own border is the 1px the divider
              overlaps, so no extra allowance is needed. */
@@ -175,7 +180,7 @@ export function ShellTopBar(props: ShellTopBarProps) {
       <Show when={actions()}>
         <div
           data-slot="shell-top-bar-actions"
-          class="window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1"
+          class="window-no-drag flex h-topbar max-w-full min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1"
         >
           {actions()}
         </div>