@k2b/ui 0.29.0 → 0.31.0

package/dist/ssr/intl/weekend.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["intl/weekend.ts"],"sourcesContent":["/** Intl week data: weekend days as ISO numbers, 1 for Monday to 7 for Sunday. */\ntype WeekInfo = { weekend?: readonly number[] };\ntype LocaleWeekInfo = { getWeekInfo?: () => WeekInfo; weekInfo?: WeekInfo };\n\n/** Saturday and Sunday as JavaScript day numbers, for engines without week data and for an unknown locale. */\nconst fallbackWeekend: ReadonlySet<number> = new Set([6, 0]);\nconst cache = new Map<string, ReadonlySet<number>>();\n\n/**\n * The weekend days of `locale` as JavaScript day numbers (0 for Sunday): Saturday and Sunday in Germany, Friday and\n * Saturday in Israel. The days come from the engine's Intl week data where it has them, otherwise Saturday and Sunday.\n * Without a locale the answer is Saturday and Sunday too, so a server render and the browser agree.\n */\nexport const weekendDays = (locale: string | undefined): ReadonlySet<number> => {\n  if (!locale) return fallbackWeekend;\n  const cached = cache.get(locale);\n  if (cached) return cached;\n  let days = fallbackWeekend;\n  try {\n    const intlLocale = new Intl.Locale(locale) as Intl.Locale & LocaleWeekInfo;\n    const weekend = (intlLocale.getWeekInfo?.() ?? intlLocale.weekInfo)?.weekend;\n    if (weekend?.length) days = new Set(weekend.map((day) => day % 7));\n  } catch {\n    // An invalid locale tag keeps Saturday and Sunday.\n  }\n  cache.set(locale, days);\n  return days;\n};\n\n/** The day of the week of a date key such as `2026-10-24`, as a JavaScript day number (0 for Sunday). */\nexport const dayOfWeekOfKey = (key: string): number => {\n  const [year = 1970, month = 1, day = 1] = key.slice(0, 10).split(\"-\").map(Number);\n  return new Date(Date.UTC(year, month - 1, day)).getUTCDay();\n};\n\n/** Whether the day of `key` is a weekend day of `locale`. */\nexport const isWeekendKey = (key: string, locale: string | undefined): boolean => weekendDays(locale).has(dayOfWeekOfKey(key));\n\n/** Whether column `index` of a week that starts on `firstDayOfWeek` (0 for Sunday, 1 for Monday) is a weekend day. */\nexport const isWeekendColumn = (index: number, firstDayOfWeek: number, locale: string | undefined): boolean =>\n  weekendDays(locale).has((firstDayOfWeek + index) % 7);\n"],"mappings":"AAAA;;AAIA;AACA,MAAM,eAAoC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5D,MAAM,KAAK,GAAG,IAAI,GAAG,CAA8B,CAAC;;AAEpD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM,WAAW,GAAI,MAA0B,IAA0B;EAC9E,IAAI,CAAC,MAAM,EAAE,OAAO,eAAe;EACnC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;EAChC,IAAI,MAAM,EAAE,OAAO,MAAM;EACzB,IAAI,IAAI,GAAG,eAAe;EAC1B,IAAI;IACF,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAiC;IAC1E,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,IAAI,UAAU,CAAC,QAAQ,GAAG,OAAO;IAC5E,IAAI,OAAO,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAE,GAAG,IAAK,GAAG,GAAG,CAAC,CAAC,CAAC;EACpE,CAAC,CAAC,MAAM;IACN;EAAA;EAEF,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC;EACvB,OAAO,IAAI;AACb,CAAC;;AAED;AACA,OAAO,MAAM,cAAc,GAAI,GAAW,IAAa;EACrD,MAAM,CAAC,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;EACjF,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AAC7D,CAAC;;AAED;AACA,OAAO,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,MAA0B,KAAc,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;;AAE9H;AACA,OAAO,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,cAAsB,EAAE,MAA0B,KAC/F,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,GAAG,KAAK,IAAI,CAAC,CAAC","ignoreList":[]}

package/dist/ssr/layout/AppOverview.js

@@ -56,7 +56,6 @@ const AppOverviewAside = props => _$ssr(_tmpl$5, `k2b-app-overview__aside ${_$es
 })), _$escape(props.children));
 const AppOverviewCards = props => _$ssr(_tmpl$6, `k2b-app-overview__cards ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 const AppOverviewEmptyState = props => _$createComponent(Placeholder, {
-  surface: "paper",
   variant: "panel",
   get title() {
     return props.title;

package/dist/ssr/layout/AppOverview.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/AppOverview.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport { PanelHeader } from \"./PanelHeader\";\n\nexport type AppOverviewProps = {\n  title: string;\n  subtitle?: string;\n  icon: string;\n  /** The page's single primary action, such as a create button or menu. */\n  actions?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewPanelProps = {\n  title: string;\n  description?: JSX.Element;\n  toolbar?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewEmptyStateProps = {\n  title: string;\n  description?: JSX.Element;\n  icon?: string;\n  class?: string;\n  children?: JSX.Element;\n};\n\nexport type AppOverviewCardsProps = {\n  class?: string;\n  children: JSX.Element;\n};\n\ntype AppOverviewComponent = ((props: AppOverviewProps) => JSX.Element) & {\n  Main: (props: AppOverviewPanelProps) => JSX.Element;\n  Aside: (props: AppOverviewPanelProps) => JSX.Element;\n  Cards: (props: AppOverviewCardsProps) => JSX.Element;\n  EmptyState: (props: AppOverviewEmptyStateProps) => JSX.Element;\n};\n\nconst tablerIconClass = (icon: string | null | undefined, fallback: string): string => {\n  const value = icon?.trim() || fallback;\n  return value.startsWith(\"ti \") ? value : `ti ${value}`;\n};\n\nconst AppOverviewPanelHeader = (props: Pick<AppOverviewPanelProps, \"title\" | \"description\" | \"toolbar\">): JSX.Element => (\n  <div class=\"k2b-app-overview__panel-header\">\n    <div>\n      <h2>{props.title}</h2>\n      <Show when={props.description}>\n        <p class=\"k2b-app-overview__panel-description\">{props.description}</p>\n      </Show>\n    </div>\n    <Show when={props.toolbar}>\n      <div class=\"k2b-app-overview__toolbar\">{props.toolbar}</div>\n    </Show>\n  </div>\n);\n\nconst AppOverviewMain = (props: AppOverviewPanelProps): JSX.Element => (\n  <section class={`k2b-app-overview__main ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </section>\n);\n\nconst AppOverviewAside = (props: AppOverviewPanelProps): JSX.Element => (\n  <aside class={`k2b-app-overview__aside ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </aside>\n);\n\nconst AppOverviewCards = (props: AppOverviewCardsProps): JSX.Element => (\n  <div class={`k2b-app-overview__cards ${props.class ?? \"\"}`}>{props.children}</div>\n);\n\nconst AppOverviewEmptyState = (props: AppOverviewEmptyStateProps): JSX.Element => (\n  <Placeholder\n    surface=\"paper\"\n    variant=\"panel\"\n    title={props.title}\n    description={props.description}\n    icon={props.icon ? tablerIconClass(props.icon, \"ti-inbox\") : undefined}\n    action={props.children}\n    class={props.class}\n  />\n);\n\nconst AppOverview = ((props: AppOverviewProps): JSX.Element => (\n  <div class={`k2b-app-overview ${props.class ?? \"\"}`}>\n    <header class=\"k2b-app-overview__header\">\n      <span class=\"k2b-app-overview__icon k2b-icon-tile\" aria-hidden=\"true\">\n        <i class={tablerIconClass(props.icon, \"ti-apps\")} />\n      </span>\n      <PanelHeader as=\"h1\" size=\"lg\" title={props.title} subtitle={props.subtitle} actions={props.actions} />\n    </header>\n    <div class=\"k2b-app-overview__columns\">{props.children}</div>\n  </div>\n)) as AppOverviewComponent;\n\nAppOverview.Main = AppOverviewMain;\nAppOverview.Aside = AppOverviewAside;\nAppOverview.Cards = AppOverviewCards;\nAppOverview.EmptyState = AppOverviewEmptyState;\n\nexport default AppOverview;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,WAAW,MAAM,yBAAyB;AACjD,SAAS,WAAW,QAAQ,eAAe;AAwC3C,MAAM,eAAe,GAAG,CAAC,IAA+B,EAAE,QAAgB,KAAa;EACrF,MAAM,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,QAAQ;EACtC,OAAO,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,KAAK,EAAE;AACxD,CAAC;AAED,MAAM,sBAAsB,GAAI,KAAuE,4BAG5F,KAAK,CAAC,KAAK,8BACf,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA;IAAA,8BACqB,KAAK,CAAC,WAAW;EAAA;AAAA,gCAGpE,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;EAAA;IAAA,+BACiB,KAAK,CAAC,OAAO;EAAA;AAAA,IAG1D;AAED,MAAM,eAAe,GAAI,KAA4B,mBACnC,mCAA0B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAC1D,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACtC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BACzD,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACxC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,WAAG,KAAK,CAAC,QAAQ,EAC5E;AAED,MAAM,qBAAqB,GAAI,KAAiC,sBAC7D,WAAW;EACV,OAAO;EACP,OAAO;EAAA,IACP,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAClB,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAC9B,IAAI;IAAA,OAAE,oBAAK,CAAC,IAAI,MAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,SAAS;EAAA;EAAA,IACtE,MAAM;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA;IAAA,OACf,KAAK,CAAC,KAAK;EAAA;AAAA,EAErB;AAED,MAAM,WAAW,GAAK,KAAuB,mBAC/B,6BAAoB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,mCAGnC,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,4CAEjD,WAAW;EAAC,EAAE;EAAM,IAAI;EAAA,IAAM,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,QAAQ;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cAE7D,KAAK,CAAC,QAAQ,EAEhC;AAE1B,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,UAAU,GAAG,qBAAqB;AAE9C,eAAe,WAAW","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/AppOverview.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport { PanelHeader } from \"./PanelHeader\";\n\nexport type AppOverviewProps = {\n  title: string;\n  subtitle?: string;\n  icon: string;\n  /** The page's single primary action, such as a create button or menu. */\n  actions?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewPanelProps = {\n  title: string;\n  description?: JSX.Element;\n  toolbar?: JSX.Element;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport type AppOverviewEmptyStateProps = {\n  title: string;\n  description?: JSX.Element;\n  icon?: string;\n  class?: string;\n  children?: JSX.Element;\n};\n\nexport type AppOverviewCardsProps = {\n  class?: string;\n  children: JSX.Element;\n};\n\ntype AppOverviewComponent = ((props: AppOverviewProps) => JSX.Element) & {\n  Main: (props: AppOverviewPanelProps) => JSX.Element;\n  Aside: (props: AppOverviewPanelProps) => JSX.Element;\n  Cards: (props: AppOverviewCardsProps) => JSX.Element;\n  EmptyState: (props: AppOverviewEmptyStateProps) => JSX.Element;\n};\n\nconst tablerIconClass = (icon: string | null | undefined, fallback: string): string => {\n  const value = icon?.trim() || fallback;\n  return value.startsWith(\"ti \") ? value : `ti ${value}`;\n};\n\nconst AppOverviewPanelHeader = (props: Pick<AppOverviewPanelProps, \"title\" | \"description\" | \"toolbar\">): JSX.Element => (\n  <div class=\"k2b-app-overview__panel-header\">\n    <div>\n      <h2>{props.title}</h2>\n      <Show when={props.description}>\n        <p class=\"k2b-app-overview__panel-description\">{props.description}</p>\n      </Show>\n    </div>\n    <Show when={props.toolbar}>\n      <div class=\"k2b-app-overview__toolbar\">{props.toolbar}</div>\n    </Show>\n  </div>\n);\n\nconst AppOverviewMain = (props: AppOverviewPanelProps): JSX.Element => (\n  <section class={`k2b-app-overview__main ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </section>\n);\n\nconst AppOverviewAside = (props: AppOverviewPanelProps): JSX.Element => (\n  <aside class={`k2b-app-overview__aside ${props.class ?? \"\"}`}>\n    <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n    {props.children}\n  </aside>\n);\n\nconst AppOverviewCards = (props: AppOverviewCardsProps): JSX.Element => (\n  <div class={`k2b-app-overview__cards ${props.class ?? \"\"}`}>{props.children}</div>\n);\n\nconst AppOverviewEmptyState = (props: AppOverviewEmptyStateProps): JSX.Element => (\n  <Placeholder\n    variant=\"panel\"\n    title={props.title}\n    description={props.description}\n    icon={props.icon ? tablerIconClass(props.icon, \"ti-inbox\") : undefined}\n    action={props.children}\n    class={props.class}\n  />\n);\n\nconst AppOverview = ((props: AppOverviewProps): JSX.Element => (\n  <div class={`k2b-app-overview ${props.class ?? \"\"}`}>\n    <header class=\"k2b-app-overview__header\">\n      <span class=\"k2b-app-overview__icon k2b-icon-tile\" aria-hidden=\"true\">\n        <i class={tablerIconClass(props.icon, \"ti-apps\")} />\n      </span>\n      <PanelHeader as=\"h1\" size=\"lg\" title={props.title} subtitle={props.subtitle} actions={props.actions} />\n    </header>\n    <div class=\"k2b-app-overview__columns\">{props.children}</div>\n  </div>\n)) as AppOverviewComponent;\n\nAppOverview.Main = AppOverviewMain;\nAppOverview.Aside = AppOverviewAside;\nAppOverview.Cards = AppOverviewCards;\nAppOverview.EmptyState = AppOverviewEmptyState;\n\nexport default AppOverview;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,WAAW,MAAM,yBAAyB;AACjD,SAAS,WAAW,QAAQ,eAAe;AAwC3C,MAAM,eAAe,GAAG,CAAC,IAA+B,EAAE,QAAgB,KAAa;EACrF,MAAM,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,QAAQ;EACtC,OAAO,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,KAAK,EAAE;AACxD,CAAC;AAED,MAAM,sBAAsB,GAAI,KAAuE,4BAG5F,KAAK,CAAC,KAAK,8BACf,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA;IAAA,8BACqB,KAAK,CAAC,WAAW;EAAA;AAAA,gCAGpE,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;EAAA;IAAA,+BACiB,KAAK,CAAC,OAAO;EAAA;AAAA,IAG1D;AAED,MAAM,eAAe,GAAI,KAA4B,mBACnC,mCAA0B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAC1D,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACtC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BACzD,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACxC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,WAAG,KAAK,CAAC,QAAQ,EAC5E;AAED,MAAM,qBAAqB,GAAI,KAAiC,sBAC7D,WAAW;EACV,OAAO;EAAA,IACP,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAClB,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAC9B,IAAI;IAAA,OAAE,oBAAK,CAAC,IAAI,MAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,SAAS;EAAA;EAAA,IACtE,MAAM;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA;IAAA,OACf,KAAK,CAAC,KAAK;EAAA;AAAA,EAErB;AAED,MAAM,WAAW,GAAK,KAAuB,mBAC/B,6BAAoB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,mCAGnC,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,4CAEjD,WAAW;EAAC,EAAE;EAAM,IAAI;EAAA,IAAM,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,QAAQ;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cAE7D,KAAK,CAAC,QAAQ,EAEhC;AAE1B,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,UAAU,GAAG,qBAAqB;AAE9C,eAAe,WAAW","ignoreList":[]}

package/dist/ssr/layout/AppWorkspace.js

@@ -8,14 +8,14 @@ import { ssrStyle as _$ssrStyle } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=\"separator\"", " style=\"", "\"><span aria-hidden=\"true\"></span></button>"],
-  _tmpl$2 = ["<p>", "</p>"],
+  _tmpl$2 = ["<p class=\"k2b-truncate-fade\">", "</p>"],
   _tmpl$3 = ["<div class=\"k2b-app-workspace__level-actions\">", "</div>"],
-  _tmpl$4 = ["<header class=\"k2b-app-workspace__level-head\">", "<div class=\"k2b-app-workspace__level-title\"><h2 tabindex=\"-1\">", "</h2>", "</div>", "</header>"],
-  _tmpl$5 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
-  _tmpl$6 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
-  _tmpl$7 = "<i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>",
-  _tmpl$8 = ["<div class=\"k2b-app-workspace__level-body\"", ">", "</div>"],
-  _tmpl$9 = ["<style>", "</style>"],
+  _tmpl$4 = ["<header class=\"k2b-app-workspace__level-head\">", "<div class=\"k2b-app-workspace__level-title\"><h2 tabindex=\"-1\"><span class=\"k2b-truncate-fade\">", "</span></h2>", "</div>", "</header>"],
+  _tmpl$5 = ["<style>", "</style>"],
+  _tmpl$6 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
+  _tmpl$7 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
+  _tmpl$8 = "<i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>",
+  _tmpl$9 = ["<div class=\"k2b-app-workspace__level-body\"", ">", "</div>"],
   _tmpl$0 = "<i class=\"ti ti-layout-sidebar-right\" aria-hidden=\"true\"></i>",
   _tmpl$1 = ["<aside", " class=\"", "\"", "", " style=\"", "\"><button type=\"button\" class=\"k2b-app-workspace__detail-grabber\"", " aria-pressed=\"false\"><span aria-hidden=\"true\"></span></button>", "</aside>"],
   _tmpl$10 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
@@ -40,35 +40,42 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$29 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
   _tmpl$30 = ["<span", " aria-hidden=\"true\">", "</span>"],
   _tmpl$31 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
-  _tmpl$32 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
-  _tmpl$33 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
-  _tmpl$34 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\">", "<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>", "</span>"],
+  _tmpl$32 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label k2b-truncate-fade\">", "</span>", "</span>"],
+  _tmpl$33 = ["<span class=\"k2b-app-workspace__sidebar-item-description k2b-truncate-fade\">", "</span>"],
+  _tmpl$34 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\">", "<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines\">", "</span></span>", "</span>"],
   _tmpl$35 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
   _tmpl$36 = ["<i", "></i>"],
   _tmpl$37 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
   _tmpl$38 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$39 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\"><span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span><span class=\"k2b-app-workspace__sidebar-item-description\">", "</span></span>"],
+  _tmpl$39 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\"><span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines\">", "</span></span><span class=\"k2b-app-workspace__sidebar-item-description k2b-truncate-fade\">", "</span></span>"],
   _tmpl$40 = ["<span class=\"", "\"", ">", "</span>"],
   _tmpl$41 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$42 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$42 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines\">", "</span></span>"],
   _tmpl$43 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
   _tmpl$44 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
   _tmpl$45 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
   _tmpl$46 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
   _tmpl$47 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$48 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
-  _tmpl$49 = ["<div class=\"k2b-app-workspace__head\"", ">", "", "</div>"],
-  _tmpl$50 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
-  _tmpl$51 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
-  _tmpl$52 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$48 = ["<span class=\"k2b-app-workspace__head-primary-label\">", "</span>"],
+  _tmpl$49 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
+  _tmpl$50 = ["<div class=\"k2b-app-workspace__head-views\">", "</div>"],
+  _tmpl$51 = ["<div class=\"k2b-app-workspace__head-filters\" role=\"group\"", ">", "", "</div>"],
+  _tmpl$52 = ["<span class=\"k2b-app-workspace__head-count\"><span>", "</span></span>"],
+  _tmpl$53 = ["<div class=\"k2b-app-workspace__head-actions\">", "", "</div>"],
+  _tmpl$54 = ["<div class=\"k2b-app-workspace__head\"", "><div class=\"k2b-app-workspace__head-lead\">", "", "", "", "", "</div>", "</div>"],
+  _tmpl$55 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
+  _tmpl$56 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$57 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createRoot, createSignal, createUniqueId, For, getOwner, mergeProps, on, onCleanup, onMount, Show, useContext } from "solid-js";
 import { Dynamic, isServer } from "solid-js/web";
-import { Button, IconButton, IconButtonLink } from "../actions/Button";
+import { Button, ButtonLink, IconButton, IconButtonLink } from "../actions/Button";
+import { useFilterMessages } from "../actions/filter-messages";
 import { dialogCore } from "../feedback/dialog-core";
 import { RenderErrorBoundary } from "../internal/render-error";
 import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
-import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
+import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
+import { appWorkspaceInverseWidthCss, appWorkspaceWidthCss, appWorkspaceWidthToken, isAppWorkspaceWidthShare } from "./app-workspace-width";
 import BottomSheet, { bottomSheetAdaptiveOptions } from "./BottomSheet";
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
@@ -81,6 +88,8 @@ const ResizeContext = createContext(true);
 /** The enclosing workspace: its head names the sidebar, and a nested workspace leaves the page title to it. */
 const WorkspaceContext = createContext();
 const LayoutStateContext = createContext(null);
+const HEAD = Symbol("AppWorkspace.Head");
+const headSlot = value => !!value && typeof value === "object" && "kind" in value && value.kind === HEAD;
 const MAIN_PANE = Symbol("AppWorkspace.MainPane");
 const SIDEBAR_DESKTOP = Symbol("AppWorkspace.SidebarDesktop");
 const SIDEBAR_ITEM_ICON = Symbol("AppWorkspace.SidebarItemIcon");
@@ -100,6 +109,13 @@ const mainPaneSlot = value => Boolean(value && typeof value === "object" && "kin
 const sidebarChildSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === SIDEBAR_DESKTOP);
 const sidebarItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_ITEM_ICON, SIDEBAR_ITEM_LABEL, SIDEBAR_ITEM_META, SIDEBAR_ITEM_ACTION].includes(value.kind));
 const navTreeItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === NAV_TREE_ITEM);
+/** Head row slot. Must be a direct child of AppWorkspace; its parts may be islands. */
+function AppWorkspaceHeadSlot(props) {
+  return {
+    kind: HEAD,
+    props
+  };
+}
 function ResizeHandle(props) {
   const workspaceMessages = useWorkspaceMessages();
   const workspace = useContext(WorkspaceContext);
@@ -108,9 +124,9 @@ function ResizeHandle(props) {
     const state = workspace?.initialLayoutState() ?? providerState;
     const id = props.panelId ?? "primary";
     const size = props.kind === "sidebar" ? state?.sidebarCollapsed ? APP_WORKSPACE_SIDEBAR_COLLAPSED : state?.sidebarWidth : props.kind === "pane" ? state?.paneWidths?.[id] : props.kind === "detail" ? state?.detailWidths?.[id] : state?.drawerHeights?.[id];
-    return Math.min(props.maxSize, Math.max(props.minSize, size ?? props.defaultSize));
+    return Math.min(props.maxSize, Math.max(props.minSize, size ?? (typeof props.defaultSize === "number" ? props.defaultSize : props.defaultSize.min)));
   };
-  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? workspaceMessages().resizeNavigation : props.kind === "pane" ? workspaceMessages().resizeWorkspacePane : props.kind === "detail" ? workspaceMessages().resizeDetailPanel : workspaceMessages().resizeBottomDrawer), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(initialSize(), true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(props.levelShown, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
+  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? workspaceMessages().resizeNavigation : props.kind === "pane" ? workspaceMessages().resizeWorkspacePane : props.kind === "detail" ? workspaceMessages().resizeDetailPanel : workspaceMessages().resizeBottomDrawer), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(initialSize(), true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(props.levelShown, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(appWorkspaceWidthToken(props.defaultSize), true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
 }
 
 /**
@@ -255,10 +271,30 @@ function AppWorkspaceMain(props) {
   // layout. Deriving it from `regions()` made a workspace whose panes are all
   // closed fall back to `resolved()`, which renders the raw slot objects.
   const hasPanes = createMemo(() => paneIds().length > 0);
-  return _$ssrElement("div", _$mergeProps({
+  // The workspace's tracks and queries read Main's minimum on the workspace
+  // itself, which cannot read Main's own variables, so this rule hands it up,
+  // as `AppWorkspace.Detail` does with its width.
+  const minWidth = () => {
+    const value = props.minWidth;
+    return isAppWorkspaceWidthShare(value) ? value : typeof value === "number" && Number.isFinite(value) && value > APP_WORKSPACE_MAIN_MIN ? Math.round(value) : undefined;
+  };
+  const minWidthRule = value => {
+    const main = `.k2b-app-workspace__main[data-workspace-main-min="${appWorkspaceWidthToken(value)}"]`;
+    const inverse = typeof value === "number" ? "" : `;--k2b-workspace-main-min-grid:${appWorkspaceInverseWidthCss(value, "100%")};--k2b-workspace-main-min-cq:${appWorkspaceInverseWidthCss(value, "100cqi")}`;
+    return `.k2b-app-workspace:has(> .k2b-app-workspace__content > ${main}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${main}){--k2b-workspace-main-min:${appWorkspaceWidthCss(value, "100%")}${inverse}}`;
+  };
+  return [_$createComponent(Show, {
+    get when() {
+      return minWidth();
+    },
+    children: value => _$ssr(_tmpl$5, minWidthRule(value()))
+  }), _$ssrElement("div", _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__main ${hasPanes() ? "has-panes" : ""} ${props.class ?? ""}`;
     },
+    get ["data-workspace-main-min"]() {
+      return minWidth() === undefined ? undefined : appWorkspaceWidthToken(minWidth());
+    },
     get ["data-workspace-levels"]() {
       return levelsMode() ? "" : undefined;
     },
@@ -298,7 +334,7 @@ function AppWorkspaceMain(props) {
             return props.mobilePane ?? (anchor?.type === "pane" ? anchor.slot.props.id : "main");
           };
           if (region.type === "primary") {
-            return _$ssr(_tmpl$5, _$ssrAttribute("data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false", false), _$escape(region.children));
+            return _$ssr(_tmpl$6, _$ssrAttribute("data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false", false), _$escape(region.children));
           }
           const pane = region.slot;
           const levelIndex = () => levels().indexOf(pane) + 1;
@@ -307,7 +343,10 @@ function AppWorkspaceMain(props) {
           const variable = appWorkspacePanelVariable("pane", panelId);
           const isAnchor = () => region === anchorRegion();
           const resizable = () => !isAnchor() && (pane.props.resizable ?? rootResizable);
-          const defaultSize = () => pane.props.defaultSize ?? APP_WORKSPACE_PANE_DEFAULT;
+          const defaultSize = () => {
+            const value = pane.props.defaultSize;
+            return typeof value === "number" || isAppWorkspaceWidthShare(value) ? value : APP_WORKSPACE_PANE_DEFAULT;
+          };
           const minSize = () => pane.props.minSize ?? APP_WORKSPACE_PANE_MIN;
           const maxSize = () => Math.max(minSize(), pane.props.maxSize ?? APP_WORKSPACE_PANE_MAX);
           const before = () => levelsMode() || region.index < (anchorRegion()?.index ?? 0);
@@ -351,9 +390,9 @@ function AppWorkspaceMain(props) {
                 get children() {
                   return handle();
                 }
-              }), _$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor() ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-level", levelsMode() ? _$escape(levelIndex(), true) : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(levelAttr("shown"), true), false) + _$ssrAttribute("data-workspace-level-first", _$escape(levelAttr("first"), true), false) + _$ssrAttribute("data-workspace-level-last", _$escape(levelAttr("last"), true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", (levelsMode() ? levelClasses(levelIndex(), "shown").split(" ").includes("1") : activeMobilePane() === pane.props.id) ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", !levelsMode() && pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(isAnchor() ? undefined : {
+              }), _$ssr(_tmpl$7, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor() ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-level", levelsMode() ? _$escape(levelIndex(), true) : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-level-shown", _$escape(levelAttr("shown"), true), false) + _$ssrAttribute("data-workspace-level-first", _$escape(levelAttr("first"), true), false) + _$ssrAttribute("data-workspace-level-last", _$escape(levelAttr("last"), true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", (levelsMode() ? levelClasses(levelIndex(), "shown").split(" ").includes("1") : activeMobilePane() === pane.props.id) ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", !levelsMode() && pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", !levelsMode() && pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(isAnchor() ? undefined : {
                 // A stored width keeps to this pane's limits before the controller attaches.
-                "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${defaultSize()}px), ${maxSize()}px)`,
+                "--k2b-workspace-panel-size": `clamp(${minSize()}px, var(${variable}, ${appWorkspaceWidthCss(defaultSize(), "var(--k2b-workspace-width)")}), ${maxSize()}px)`,
                 "--k2b-workspace-panel-min": `${minSize()}px`
               }), levelsMode() ? _$escape([_$createComponent(LevelHead, {
                 get label() {
@@ -388,13 +427,13 @@ function AppWorkspaceMain(props) {
                           return props.onLevelNavigate ? navigateBack : undefined;
                         },
                         get children() {
-                          return _$ssr(_tmpl$7);
+                          return _$ssr(_tmpl$8);
                         }
                       });
                     }
                   });
                 }
-              }), _$ssr(_tmpl$8, _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$escape(pane.props.children))]) : _$escape(pane.props.children)), _$createComponent(Show, {
+              }), _$ssr(_tmpl$9, _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$escape(pane.props.children))]) : _$escape(pane.props.children)), _$createComponent(Show, {
                 get when() {
                   return _$memo(() => !!resizable())() && before();
                 },
@@ -407,13 +446,16 @@ function AppWorkspaceMain(props) {
         }
       });
     }
-  })), false);
+  })), false)];
 }
+
+/** The Detail region's DOM id, for application controls that target it with aria-controls. */
+export const appWorkspaceDetailElementId = id => `k2b-workspace-detail-${assertStableUiId(id, "AppWorkspace.Detail id")}`;
 function AppWorkspaceDetail(props) {
   const workspaceMessages = useWorkspaceMessages();
   const rootResizable = useContext(ResizeContext);
   const panelId = () => assertStableUiId(props.id, "AppWorkspace.Detail id");
-  const domId = () => `k2b-workspace-detail-${panelId()}`;
+  const domId = () => appWorkspaceDetailElementId(props.id);
   const variable = () => appWorkspacePanelVariable("detail", panelId());
   // Start widths of 20, 26, 30, and 34 rem. They feed `aria-valuenow` and the
   // `var(…, Npx)` first-paint fallback, so they are behaviour, not taste.
@@ -457,7 +499,7 @@ function AppWorkspaceDetail(props) {
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     });
   });
-  return [_$ssr(_tmpl$9, workspaceRule()), _$createComponent(Button, {
+  return [_$ssr(_tmpl$5, workspaceRule()), _$createComponent(Button, {
     type: "button",
     variant: "ghost",
     get ["aria-controls"]() {
@@ -497,7 +539,7 @@ function AppWorkspaceDetail(props) {
         }
       });
     }
-  }), _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__detail ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-width", _$escape(props.width ?? "md", true), false) + _$ssrAttribute("data-workspace-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-detail-closable", props.onClose ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-steppable", props.onStep ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyle({
+  }), _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__detail ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-width", _$escape(props.width ?? "md", true), false) + _$ssrAttribute("data-workspace-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-choice", props.openOnChoice === false ? "request" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-detail-closable", props.onClose ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-steppable", props.onStep ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyle({
     ...sizeStyle(),
     "view-transition-name": props.viewTransitionName
   }), _$ssrAttribute("aria-label", _$escape(workspaceMessages().detailFullHeight, true), false), _$escape(props.children))];
@@ -1647,16 +1689,28 @@ const AppWorkspaceSidebarIconAction = props => {
  * host's page title with the way up (see `PageTitle`); the page's own
  * `PageTitle` takes its place. The visible title is no heading, because many
  * pages render their own `h1`. From 64 rem a sidebar that marks the current
- * page names it already: the row hides, and only on a page without its own
- * `h1` its heading stays for assistive technology. It is one fixed height
- * and draws no line; CSS decides when it shows, so the server-rendered page
- * already has its final geometry.
+ * page names it already: the title and the way up hide, and only on a page
+ * without its own `h1` its heading stays for assistive technology. With an
+ * `AppWorkspace.Head` slot the row is always there and also carries the
+ * views, the filters, the result count, and the actions; only its title
+ * follows the rules above. It draws no line; CSS decides what shows and when
+ * the filters wrap, so the server-rendered page already has its final
+ * geometry.
  */
 function AppWorkspaceHead(props) {
   const messages = useWorkspaceMessages();
+  const filters = useFilterMessages();
+  // JSX prop getters construct their elements on every read. Share each
+  // resolved slot between its presence check and its rendered content.
+  const resolvedViews = children(() => props.head?.views);
+  const resolvedFilters = children(() => props.head?.filters);
+  const resolvedActions = children(() => props.head?.actions);
+  const resolvedCount = children(() => props.head?.count);
   // A nested workspace is part of a page that already shows its title.
   const trail = props.nested ? () => undefined : usePageTrail();
-  return _$ssr(_tmpl$49, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false), _$escape(_$createComponent(IconButton, {
+  const resetContent = () => filters().reset;
+  const primaryContent = () => [_$ssr(_tmpl$47, _$ssrAttribute("class", _$escape(props.head?.primary?.icon, true), false)), _$ssr(_tmpl$48, _$escape(props.head?.primary?.label))];
+  return _$ssr(_tmpl$54, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false) + _$ssrAttribute("data-row", props.head ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(IconButton, {
     "class": "k2b-app-workspace__head-toggle",
     get label() {
       return messages().showNavigation;
@@ -1667,7 +1721,7 @@ function AppWorkspaceHead(props) {
     "aria-expanded": "false",
     "data-app-workspace-sidebar-toggle": "",
     get children() {
-      return _$ssr(_tmpl$48);
+      return _$ssr(_tmpl$49);
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1679,7 +1733,113 @@ function AppWorkspaceHead(props) {
       },
       as: "p",
       fallback: true
-    }), _$ssr(_tmpl$50, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
+    }), _$ssr(_tmpl$55, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return resolvedViews.toArray().some(Boolean);
+    },
+    get children() {
+      return _$ssr(_tmpl$50, _$escape(resolvedViews()));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return resolvedFilters.toArray().some(Boolean) || props.head?.filtered;
+    },
+    get children() {
+      return _$ssr(_tmpl$51, _$ssrAttribute("aria-label", _$escape(filters().filters, true), false), _$escape(resolvedFilters()), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.head?.filtered;
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return props.head?.resetHref;
+            },
+            get fallback() {
+              return _$createComponent(Button, {
+                variant: "ghost",
+                size: "sm",
+                "class": "k2b-app-workspace__head-reset",
+                onClick: () => props.head?.onReset?.(),
+                get children() {
+                  return resetContent();
+                }
+              });
+            },
+            children: href => _$createComponent(ButtonLink, {
+              variant: "ghost",
+              size: "sm",
+              "class": "k2b-app-workspace__head-reset",
+              get href() {
+                return href();
+              },
+              get onClick() {
+                return props.head?.onReset ? event => {
+                  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                  event.preventDefault();
+                  props.head?.onReset?.();
+                } : undefined;
+              },
+              get children() {
+                return resetContent();
+              }
+            })
+          });
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!props.head?.filtered)() && resolvedCount.toArray().some(value => value !== undefined && value !== null && value !== false);
+    },
+    get children() {
+      return _$ssr(_tmpl$52, _$escape(resolvedCount()));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return resolvedActions.toArray().some(Boolean) || props.head?.primary;
+    },
+    get children() {
+      return _$ssr(_tmpl$53, _$escape(resolvedActions()), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.head?.primary;
+        },
+        children: primary => _$createComponent(Show, {
+          get when() {
+            return primary().href;
+          },
+          get fallback() {
+            return _$createComponent(Button, {
+              variant: "primary",
+              size: "sm",
+              "class": "k2b-app-workspace__head-primary",
+              "data-workspace-primary": "",
+              get onClick() {
+                return primary().onClick;
+              },
+              get children() {
+                return primaryContent();
+              }
+            });
+          },
+          children: href => _$createComponent(ButtonLink, {
+            variant: "primary",
+            size: "sm",
+            "class": "k2b-app-workspace__head-primary",
+            "data-workspace-primary": "",
+            get href() {
+              return href();
+            },
+            get onClick() {
+              return primary().onClick;
+            },
+            get children() {
+              return primaryContent();
+            }
+          })
+        })
+      })));
+    }
   })));
 }
 const AppWorkspace = props => {
@@ -1707,6 +1867,20 @@ const AppWorkspace = props => {
       writeState: state => props.onLayoutChange?.(state)
     }));
   });
+  const contents = () => {
+    const resolved = children(() => props.children);
+    const slots = createMemo(() => flatten(resolved()));
+    // Same props object, same memo value: a sibling change must not rebuild the head's slots.
+    const head = createMemo(() => slots().find(headSlot)?.props);
+    const content = () => slots().filter(value => !headSlot(value));
+    return [_$createComponent(AppWorkspaceHead, {
+      sidebarId: sidebarId,
+      nested: nested,
+      get head() {
+        return head();
+      }
+    }), content()];
+  };
   return _$createComponent(ResizeContext.Provider, {
     get value() {
       return props.resizable !== false;
@@ -1715,10 +1889,7 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          return _$ssr(_tmpl$51, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(_$createComponent(AppWorkspaceHead, {
-            sidebarId: sidebarId,
-            nested: nested
-          })), _$escape(props.children));
+          return _$ssr(_tmpl$56, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(contents()));
         }
       });
     }
@@ -1732,7 +1903,8 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$52, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Head = AppWorkspaceHeadSlot;
+AppWorkspace.Content = props => _$ssr(_tmpl$57, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;