@eifi1/ui-kit 0.51.3 → 0.51.4

package/src/feedback/feedback-table.tsx

@@ -453,7 +453,9 @@ function statusRank(status: FeedbackStatus): number {
  * - Fitted to the table's width (0.48, keksdose live #451): Subject `grow`s and
  *   ellipsises, and a narrow table leaves out URL, then Email, then Resolved
  *   (`fitPriority` 1–3) — the open report repeats all three — then Votes and Category
- *   (4, 5) before Subject would drop below 10rem. Drop the two keys with
+ *   (4, 5), then User, Date and # (6–8, 0.51.4) before Subject would drop below 8rem
+ *   (`growMin`, 0.51.4; the table's default floor is 10).
+ *   Drop the two keys with
  *   `{ ...col, grow: undefined, fitPriority: undefined }` for the 0.47 layout.
  * - `/my-feedback` shows the same nine: the Email cell's context fallback exists for it
  *   (the admin list's join is absent there, §3.1), and its phone card drops the submitter
@@ -499,6 +501,9 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       sortBy: (row) => row.id,
       filter: { type: "number", getValue: (row) => row.id },
       mobileHidden: true,
+      // The very last to go (0.51.4, Kurvenschmiede): replies and the feedback loop name a
+      // report by its number, so it stays while anything else can give way.
+      fitPriority: 8,
     },
     {
       key: "date",
@@ -506,6 +511,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       cell: (row) => <FeedbackDate value={row.created_at} renderDate={renderDate} />,
       sortBy: (row) => instant(row.created_at),
       filter: { type: "date", getValue: (row) => row.created_at },
+      // Seventh to go (0.51.4): the open report shows it.
+      fitPriority: 7,
     },
     {
       key: "category",
@@ -536,6 +543,11 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       // The rest of the row, one line and an ellipsis (0.48, keksdose live #451: one long
       // crash title pushed Status and the row actions off the edge).
       grow: true,
+      // 8rem, not the table's 10 (0.51.4, Kurvenschmiede): at 768px beside a sidebar only
+      // Subject, Status (a fixed 13.5rem) and the row actions are left, and they were up
+      // to 20px too wide (Hungarian). A subject's first words carry it; the open report
+      // has the rest.
+      growMin: 8,
     },
     {
       key: "user",
@@ -559,6 +571,10 @@ export function feedbackColumns<T extends FeedbackTableRow>({
         row.user_id == null
           ? labels.deletedUser
           : `${feedbackSubmitter(row, labels)} ${feedbackSubmitterEmail(row)}`,
+      // Sixth to go (0.51.4, Kurvenschmiede): with only 1–5, Subject reached its floor while
+      // #, Date and User were still drawn, and the inbox scrolled sideways from 768 to
+      // ~1115px beside an open sidebar. The open report names the submitter.
+      fitPriority: 6,
     },
     {
       key: "email",

package/src/i18n/german.ts

@@ -782,6 +782,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
     list: {
       unread: "Ungelesen",
       opensInNewTab: "öffnet in einem neuen Tab",
+      showAll: (count) => `Alle anzeigen (${n(count)})`,
+      showFewer: "Weniger anzeigen",
     },
     breadcrumbs: {
       label: "Brotkrümelnavigation",
@@ -917,6 +919,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
         impressum: "Impressum",
         privacy: "Datenschutz",
         terms: "Nutzungsbedingungen",
+        security: "Sicherheit",
+        accessibility: "Barrierefreiheit",
       },
       titles: {
         impressum: "Impressum",
@@ -936,6 +940,10 @@ export function germanLabels(numberLocale: string): UiKitLabels {
         show: (o) => `Fassung auf ${o.bindingLanguage} anzeigen`,
       },
       updated: (date) => `Stand: ${date}`,
+      summary: {
+        title: "Das Wichtigste in Kürze",
+        note: "Diese Zusammenfassung dient der Orientierung; verbindlich ist allein der vollständige Text.",
+      },
       sections: {
         impressum: {
           operator: {
@@ -992,7 +1000,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
           },
           changes: {
             title: "Änderungen dieser Bedingungen",
-            body: "Wir können diese Bedingungen im Zuge der Weiterentwicklung des Dienstes anpassen. Wesentliche Änderungen kündigen wir mindestens 30 Tage vor ihrem Inkrafttreten per E-Mail und in der App an, zusammen mit dem neuen Text. Wenn Sie nicht einverstanden sind, können Sie vor diesem Datum widersprechen oder Ihr Konto löschen und bis dahin Ihre Daten exportieren. Nutzen Sie den Dienst nach diesem Datum weiter, gelten die geänderten Bedingungen.",
+            body: "Wir können diese Bedingungen im Zuge der Weiterentwicklung des Dienstes anpassen. Wesentliche Änderungen kündigen wir mindestens 30 Tage vor ihrem Inkrafttreten per E-Mail und in der App an, zusammen mit dem neuen Text. Wenn Sie nicht einverstanden sind, können Sie vor diesem Datum widersprechen oder Ihr Konto löschen und bis dahin Ihre Daten exportieren. Nutzen Sie den Dienst nach diesem Datum weiter, gelten die geänderten Bedingungen. Änderungen, die nur zu Ihrem Vorteil sind oder gesetzlich vorgeschrieben sind, gelten ohne diese Ankündigung; ihnen kann nicht widersprochen werden. Widersprechen Sie einer Änderung, können wir Ihr Konto auf den Tag ihres Inkrafttretens schließen. Haben Sie einen Zeitraum bezahlt, der über dieses Datum hinausgeht, erstatten wir den nicht genutzten Teil.",
           },
           language: {
             title: "Sprache",

package/src/i18n/locales/en.ts

@@ -95,6 +95,10 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
       ...d.chipInput,
       atLimit: (max) => `Limit of ${n(max)} reached`,
     },
+    list: {
+      ...d.list,
+      showAll: (count) => `Show all (${n(count)})`,
+    },
     iconPicker: {
       ...d.iconPicker,
       resultCount: (count) => (count === 1 ? "1 icon" : `${n(count)} icons`),

package/src/i18n/locales/es.ts

@@ -765,6 +765,8 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
     list: {
       unread: "No leído",
       opensInNewTab: "se abre en una pestaña nueva",
+      showAll: (count) => `Mostrar todo (${n(count)})`,
+      showFewer: "Mostrar menos",
     },
     breadcrumbs: {
       label: "Ruta de navegación",
@@ -897,6 +899,8 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
         impressum: "Aviso legal",
         privacy: "Política de privacidad",
         terms: "Condiciones de uso",
+        security: "Seguridad",
+        accessibility: "Accesibilidad",
       },
       titles: {
         impressum: "Aviso legal",
@@ -916,6 +920,10 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
         show: (o) => `Ver la versión en ${o.bindingLanguage}`,
       },
       updated: (date) => `Última actualización: ${date}`,
+      summary: {
+        title: "En resumen",
+        note: "Este resumen es solo orientativo; únicamente el texto completo es vinculante.",
+      },
       sections: {
         impressum: {
           operator: {
@@ -972,7 +980,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
           },
           changes: {
             title: "Cambios en estas condiciones",
-            body: "Podemos actualizar estas condiciones a medida que evolucione el servicio. Anunciamos cualquier cambio importante al menos 30 días antes de que entre en vigor, por correo electrónico y en la aplicación, junto con el nuevo texto. Si no está de acuerdo, puede oponerse o eliminar su cuenta antes de esa fecha, y puede exportar sus datos hasta entonces. Si sigue usando el servicio después de esa fecha, se aplican las condiciones modificadas.",
+            body: "Podemos actualizar estas condiciones a medida que evolucione el servicio. Anunciamos cualquier cambio importante al menos 30 días antes de que entre en vigor, por correo electrónico y en la aplicación, junto con el nuevo texto. Si no está de acuerdo, puede oponerse o eliminar su cuenta antes de esa fecha, y puede exportar sus datos hasta entonces. Si sigue usando el servicio después de esa fecha, se aplican las condiciones modificadas. Los cambios que solo le benefician, o que exige la ley, se aplican sin este preaviso y no admiten oposición. Si se opone a un cambio, podemos cerrar su cuenta en la fecha en que entre en vigor. Si ha pagado un periodo que va más allá de esa fecha, le reembolsamos la parte no utilizada.",
           },
           language: {
             title: "Idioma",

package/src/i18n/locales/fr.ts

@@ -781,6 +781,8 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
     list: {
       unread: "Non lu",
       opensInNewTab: "s’ouvre dans un nouvel onglet",
+      showAll: (count) => `Tout afficher (${n(count)})`,
+      showFewer: "Afficher moins",
     },
     breadcrumbs: {
       label: "Fil d’Ariane",
@@ -916,6 +918,8 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
         impressum: "Mentions légales",
         privacy: "Confidentialité",
         terms: "Conditions d’utilisation",
+        security: "Sécurité",
+        accessibility: "Accessibilité",
       },
       titles: {
         impressum: "Mentions légales",
@@ -935,6 +939,10 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
         show: (o) => `Afficher la version en ${o.bindingLanguage}`,
       },
       updated: (date) => `Dernière mise à jour\u00a0: ${date}`,
+      summary: {
+        title: "En bref",
+        note: "Ce résumé sert d’orientation\u202f; seul le texte complet fait foi.",
+      },
       sections: {
         impressum: {
           operator: {
@@ -991,7 +999,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
           },
           changes: {
             title: "Modifications des présentes conditions",
-            body: "Nous pouvons mettre à jour ces conditions au fil de l’évolution du service. Nous annonçons toute modification importante au moins 30 jours avant son entrée en vigueur, par e-mail et dans l’app, avec le nouveau texte. Si vous n’êtes pas d’accord, vous pouvez vous y opposer ou supprimer votre compte avant cette date, et exporter vos données jusque-là. Si vous continuez à utiliser le service après cette date, les conditions modifiées s’appliquent.",
+            body: "Nous pouvons mettre à jour ces conditions au fil de l’évolution du service. Nous annonçons toute modification importante au moins 30 jours avant son entrée en vigueur, par e-mail et dans l’app, avec le nouveau texte. Si vous n’êtes pas d’accord, vous pouvez vous y opposer ou supprimer votre compte avant cette date, et exporter vos données jusque-là. Si vous continuez à utiliser le service après cette date, les conditions modifiées s’appliquent. Les modifications qui sont uniquement à votre avantage, ou que la loi impose, s’appliquent sans ce préavis et ne peuvent pas faire l’objet d’une opposition. Si vous vous opposez à une modification, nous pouvons fermer votre compte à la date de son entrée en vigueur. Si vous avez payé une période qui s’étend au-delà de cette date, nous remboursons la part non utilisée.",
           },
           language: {
             title: "Langue",

package/src/i18n/locales/hu.ts

@@ -766,6 +766,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
     list: {
       unread: "Olvasatlan",
       opensInNewTab: "új lapon nyílik meg",
+      showAll: (count) => `Összes megjelenítése (${n(count)})`,
+      showFewer: "Kevesebb megjelenítése",
     },
     breadcrumbs: {
       label: "Morzsamenü",
@@ -901,6 +903,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
         impressum: "Impresszum",
         privacy: "Adatvédelmi tájékoztató",
         terms: "Felhasználási feltételek",
+        security: "Biztonság",
+        accessibility: "Akadálymentesség",
       },
       titles: {
         impressum: "Impresszum",
@@ -923,6 +927,10 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
         show: (o) => `Az irányadó változat megjelenítése (${o.bindingLanguage})`,
       },
       updated: (date) => `Utolsó frissítés: ${date}`,
+      summary: {
+        title: "Röviden",
+        note: "Ez az összefoglaló tájékoztató jellegű; kizárólag a teljes szöveg az irányadó.",
+      },
       sections: {
         impressum: {
           operator: {
@@ -979,7 +987,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
           },
           changes: {
             title: "A feltételek módosítása",
-            body: "Ezeket a feltételeket a szolgáltatás fejlődésével módosíthatjuk. A lényeges változásokat legalább 30 nappal a hatálybalépésük előtt bejelentjük e-mailben és az alkalmazásban, az új szöveggel együtt. Ha nem ért egyet, ezen időpont előtt tiltakozhat, vagy törölheti a fiókját, és addig exportálhatja az adatait. Ha ezen időpont után is használja a szolgáltatást, a módosított feltételek érvényesek.",
+            body: "Ezeket a feltételeket a szolgáltatás fejlődésével módosíthatjuk. A lényeges változásokat legalább 30 nappal a hatálybalépésük előtt bejelentjük e-mailben és az alkalmazásban, az új szöveggel együtt. Ha nem ért egyet, ezen időpont előtt tiltakozhat, vagy törölheti a fiókját, és addig exportálhatja az adatait. Ha ezen időpont után is használja a szolgáltatást, a módosított feltételek érvényesek. Azok a változások, amelyek kizárólag az Ön javát szolgálják, vagy amelyeket jogszabály ír elő, e bejelentés nélkül is hatályosak, és ellenük nem lehet tiltakozni. Ha tiltakozik egy változás ellen, a hatálybalépés napjával megszüntethetjük a fiókját. Ha olyan időszakra fizetett, amely ezen a napon túlnyúlik, a fel nem használt részt visszatérítjük.",
           },
           language: {
             title: "Nyelv",

package/src/i18n/locales/it.ts

@@ -769,6 +769,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
     list: {
       unread: "Non letto",
       opensInNewTab: "si apre in una nuova scheda",
+      showAll: (count) => `Mostra tutto (${n(count)})`,
+      showFewer: "Mostra meno",
     },
     breadcrumbs: {
       label: "Percorso di navigazione",
@@ -902,6 +904,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         impressum: "Impressum",
         privacy: "Privacy",
         terms: "Condizioni d’uso",
+        security: "Sicurezza",
+        accessibility: "Accessibilità",
       },
       titles: {
         impressum: "Impressum",
@@ -922,6 +926,10 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         show: (o) => `Mostra la versione in ${o.bindingLanguage}`,
       },
       updated: (date) => `Ultimo aggiornamento: ${date}`,
+      summary: {
+        title: "In breve",
+        note: "Questo riepilogo serve da orientamento; fa fede solo il testo completo.",
+      },
       sections: {
         impressum: {
           operator: {
@@ -980,7 +988,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
           },
           changes: {
             title: "Modifiche a queste condizioni",
-            body: "Possiamo aggiornare queste condizioni con l’evoluzione del servizio. Annunciamo ogni modifica sostanziale almeno 30 giorni prima della sua entrata in vigore, via email e nell’app, insieme al nuovo testo. Se non è d’accordo, può opporsi o eliminare il Suo account prima di tale data, e può esportare i Suoi dati fino ad allora. Se continua a usare il servizio dopo tale data, si applicano le condizioni modificate.",
+            body: "Possiamo aggiornare queste condizioni con l’evoluzione del servizio. Annunciamo ogni modifica sostanziale almeno 30 giorni prima della sua entrata in vigore, via email e nell’app, insieme al nuovo testo. Se non è d’accordo, può opporsi o eliminare il Suo account prima di tale data, e può esportare i Suoi dati fino ad allora. Se continua a usare il servizio dopo tale data, si applicano le condizioni modificate. Le modifiche che vanno solo a Suo vantaggio, o che sono imposte dalla legge, si applicano senza questo preavviso e non è possibile opporvisi. Se si oppone a una modifica, possiamo chiudere il Suo account alla data della sua entrata in vigore. Se ha pagato un periodo che va oltre tale data, Le rimborsiamo la parte non utilizzata.",
           },
           language: {
             title: "Lingua",

package/src/i18n/locales/zh.ts

@@ -746,6 +746,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
     list: {
       unread: "未读",
       opensInNewTab: "在新标签页中打开",
+      showAll: (count) => `显示全部（${n(count)}）`,
+      showFewer: "收起",
     },
     breadcrumbs: {
       label: "面包屑导航",
@@ -876,6 +878,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         impressum: "运营者信息",
         privacy: "隐私政策",
         terms: "使用条款",
+        security: "安全",
+        accessibility: "无障碍",
       },
       titles: {
         impressum: "运营者信息",
@@ -896,6 +900,10 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         show: (o) => `查看${o.bindingLanguage}版本`,
       },
       updated: (date) => `最后更新：${date}`,
+      summary: {
+        title: "要点",
+        note: "本摘要仅供参考；只有完整文本具有约束力。",
+      },
       sections: {
         impressum: {
           operator: {
@@ -952,7 +960,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
           },
           changes: {
             title: "条款变更",
-            body: "我们可能会随着服务的发展更新本条款。重大变更将至少在生效前 30 天通过电子邮件和应用程序公布，并附上新文本。如您不同意，可在该日期前提出异议或删除您的账户，并可在此之前导出您的数据。如您在该日期后继续使用本服务，则适用变更后的条款。",
+            body: "我们可能会随着服务的发展更新本条款。重大变更将至少在生效前 30 天通过电子邮件和应用程序公布，并附上新文本。如您不同意，可在该日期前提出异议或删除您的账户，并可在此之前导出您的数据。如您在该日期后继续使用本服务，则适用变更后的条款。仅对您有利的变更或法律要求的变更，无需上述提前通知即可生效，且不得提出异议。如您对某项变更提出异议，我们可在该变更生效之日关闭您的账户。如您已付费的期间超过该日期，我们将退还未使用部分的费用。",
           },
           language: {
             title: "语言",

package/src/i18n/review.ts

@@ -311,6 +311,8 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "legal.translation.show": operatorSample,
   // 0.51.3: the as-of line, with the date already written out.
   "legal.updated": [["{{date}}"]],
+  // 0.51.4: a limited list's "Show all (n)", with the whole list's count.
+  "list.showAll": [[12], [1240]],
   // 0.29.0: the sign-in and sign-up parts (docs/auth-harmonization.md).
   "signIn.tagHint": [["{{taggedAddress}}"]],
   "register.emailTagUse": [["{{address}}"]],

package/src/index.ts

@@ -548,6 +548,7 @@ export type {
   LegalOperator,
   LegalOperatorText,
   LegalPageKey,
+  LegalInfoPageKey,
   LegalTextSectionLabels,
   LegalOperatorSectionLabels,
   LegalFramedSectionLabels,

package/src/lib/text-match.ts

@@ -29,6 +29,36 @@ export function foldForSearch(text: string, locale?: string): string {
   return lower.normalize("NFD").replace(/\p{M}+/gu, "").replace(/ß/g, "ss");
 }
 
+/**
+ * A picker's query as its words, each folded (0.51.4, keksdose's /prices shop picker):
+ * "Migros  Zürich" → `["migros", "zurich"]`. An empty or blank query has no words.
+ */
+export function searchWords(query: string, locale?: string): string[] {
+  return foldForSearch(query, locale).split(/\s+/).filter((word) => word !== "");
+}
+
+/**
+ * Whether a row matches a picker's query: EVERY word appears in at least one of the row's
+ * texts — "migros 8004" finds a row named "Migros · 8004 Zürich", and a row whose chain is
+ * its group and whose place is its label (pass both). Until 0.51.4 the whole query had to
+ * be ONE substring of one text, so two words found nothing unless they stood side by side
+ * in that order. One word matches exactly as before, and so does the old query when it
+ * was a substring. No words match everything.
+ *
+ * `words` from {@link searchWords}; `texts` as they are (folded here), `undefined` skipped.
+ */
+export function matchesSearch(
+  words: readonly string[],
+  texts: readonly (string | undefined)[],
+  locale?: string,
+): boolean {
+  if (words.length === 0) return true;
+  // One haystack per row; a word holds no whitespace, so it cannot match across the
+  // newline between two texts.
+  const hay = texts.filter((t): t is string => t !== undefined).map((t) => foldForSearch(t, locale)).join("\n");
+  return words.every((word) => hay.includes(word));
+}
+
 /** {@link rankMatch}'s answer: lower is better, `-1` is no match. */
 export type MatchRank = -1 | 0 | 1 | 2;
 

package/src/settings/use-settings-focus.ts

@@ -115,3 +115,11 @@ export function useSettingsFocus(anchor?: string | null): void {
     [],
   );
 }
+
+/**
+ * {@link useSettingsFocus} under a name for any page (0.51.4, keksdose run 89): the hook
+ * was always allowed on an app's own pages (keksdose's /reports/matching lands
+ * `?focus=matching-unmatched` on a card), but its name said Settings at every such call
+ * site. The same function, so the two cannot drift; `useSettingsFocus` stays.
+ */
+export const useFocusParam: typeof useSettingsFocus = useSettingsFocus;

package/src/shell/dev-menu.tsx

@@ -126,6 +126,11 @@ const isRow = (entry: TopBarMenuEntry) => entry.kind !== "heading" && entry.kind
  *
  * Nothing renders unless `enabled`, and nothing with no row to show. The panel scrolls
  * (`TopBarActionMenu`'s `scrollable`): some 25 rows ran off a 390×844 phone.
+ *
+ * From `md` up the groups stand side by side, one column each, in that order (0.51.4,
+ * `TopBarActionMenu`'s `columns`; keksdose dev #640, Marcel: "Each group gets a column").
+ * "Back to {role}" stays under the roles. A desktop too narrow for all of them wraps
+ * the columns onto a second row; a phone keeps the one scrolling column.
  */
 export function DevMenu<R extends string, P extends string>({
   enabled,
@@ -254,6 +259,7 @@ export function DevMenu<R extends string, P extends string>({
       aria-label={name}
       entries={entries}
       scrollable
+      columns
     />
   );
 }

package/src/shell/topbar-action-menu.tsx

@@ -1,5 +1,5 @@
 import { useId, useLayoutEffect, useRef } from "react";
-import type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
+import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
 import { Link } from "react-router";
 import { cn } from "../lib/cn";
 import { HoverMenu, type HoverMenuProps } from "../components/hover-menu";
@@ -109,6 +109,40 @@ function toBlocks(entries: readonly TopBarMenuEntry[]): Block[] {
   return blocks.filter((block) => block.kind === "loose" || block.rows.length > 0);
 }
 
+/** One column of `columns` (0.51.4): a group and the loose entries after it, up to the
+ *  next group — so a group's own way out behind a rule (DevMenu's "Back to {role}") stays
+ *  under it instead of running across the panel. */
+type LooseBlock = Extract<Block, { kind: "loose" }>;
+type Column = { group: Extract<Block, { kind: "group" }>; after: Array<RowEntry | DividerEntry>; index: number };
+
+/** `blocks` as the columns layout draws them: what comes before the first group, then a
+ *  column per group. A rule that would end a column is dropped: the column's edge is the
+ *  separation there. */
+function toColumns(blocks: readonly Block[]): { lead: LooseBlock[]; columns: Column[] } {
+  const lead: LooseBlock[] = [];
+  const columns: Column[] = [];
+  blocks.forEach((block, index) => {
+    if (block.kind === "group") columns.push({ group: block, after: [], index });
+    else if (columns.length === 0) lead.push(block);
+    else columns[columns.length - 1]!.after.push(block.entry);
+  });
+  for (const column of columns) {
+    while (column.after.at(-1)?.kind === "divider") column.after.pop();
+  }
+  return { lead, columns };
+}
+
+/**
+ * `columns`' panel: each column 14rem, the panel as wide as its columns (a CSS variable
+ * the list sets) but never wider than the glass, and from `md` up only. The grid places
+ * as many 14rem columns as that width holds, so a narrow desktop wraps the groups onto a
+ * second row instead of scrolling sideways. The header, the title and the footer span
+ * the row.
+ */
+const COLUMNS_PANEL =
+  "md:grid md:grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] md:items-start md:gap-y-2 md:w-[min(calc(100vw-2rem),var(--menu-columns-width))]";
+const SPAN_ALL = "md:col-span-full";
+
 /**
  * The non-interactive identity block at the top of an account menu — kastlan's name +
  * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the
@@ -225,6 +259,7 @@ export function TopBarActionMenu({
   align,
   panelClassName,
   scrollable = false,
+  columns = false,
   triggerAttributes,
 }: {
   /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */
@@ -308,6 +343,19 @@ export function TopBarActionMenu({
    * header and the footer are inside the list and scroll with the rows.
    */
   scrollable?: boolean;
+  /**
+   * From `md` up, lay the heading groups side by side, one column per group (0.51.4,
+   * `DevMenu`; keksdose dev #640, Marcel: "Each group gets a column. That way it would be
+   * much better visible for desktop users"). Below `md`, the one column as before.
+   *
+   * A column is a group and the loose rows after it up to the next heading, so a row
+   * behind a rule at the end of a group (DevMenu's "Back to {role}") stays in that
+   * group's column. Loose rows before the first heading, the header, the menu-wide
+   * `heading` and the footer span the panel. The DOM order is unchanged, so ↓/↑ walk the
+   * rows down one column and on into the next, as a reader reads them. `leading` and
+   * `children` rows take a cell each; add `md:col-span-full` to one that should span.
+   */
+  columns?: boolean;
   /** `data-*` attributes for the trigger itself — a tour's anchor (`data-tour`), a test
    *  hook. The parts built on this menu (`TourMenu`) pass theirs through here. */
   triggerAttributes?: { [key: `data-${string}`]: string | number | boolean | undefined };
@@ -316,6 +364,10 @@ export function TopBarActionMenu({
   // entry's `key`, which is the caller's text and may hold a space — and a space in
   // `aria-labelledby` is a list separator.
   const uid = useId();
+  const blocks = toBlocks(entries);
+  const grouped = columns ? toColumns(blocks) : null;
+  // A menu with no group has nothing to put side by side: the list as always.
+  const laidOut = grouped && grouped.columns.length > 0 ? grouped : null;
   return (
     <HoverMenu
       aria-label={ariaLabel}
@@ -380,8 +432,8 @@ export function TopBarActionMenu({
         const footerClass =
           "flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted [&_a:hover]:text-primary [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-focus [&_a:focus-visible]:ring-brand";
         /** One action or link row — loose, or inside a heading's group. */
-        const row = (entry: RowEntry) => (
-          <li key={entry.key}>
+        const row = (entry: RowEntry, className?: string) => (
+          <li key={entry.key} className={className}>
             {entry.kind === "link" ? (
               <MenuItem
                 href={entry.to}
@@ -413,11 +465,46 @@ export function TopBarActionMenu({
             )}
           </li>
         );
+        /** A rule or a row outside any group; `span` stretches it across the columns. */
+        const loose = (block: LooseBlock, span: boolean) => {
+          const entry = block.entry;
+          if (entry.kind === "divider") {
+            return <li key={entry.key} className={cn("my-1 border-t border-subtle", span && SPAN_ALL)} />;
+          }
+          return row(entry, span ? SPAN_ALL : undefined);
+        };
+        /** A heading's group: its name, then its rows in a named `role="group"`. */
+        const group = (block: Extract<Block, { kind: "group" }>, i: number, tight: boolean, inColumn = false) => {
+          const headingId = `${uid}-group-${i}`;
+          return (
+            <li key={block.heading.key} role="none">
+              <div
+                id={headingId}
+                role="presentation"
+                className={cn(
+                  "px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-muted [overflow-wrap:anywhere]",
+                  // A column's heading lines up with its neighbours' at the top of the
+                  // grid row; under `md` the columns stack, and it spaces like the list's.
+                  tight ? "pt-1" : cn("pt-2.5", inColumn && "md:pt-1"),
+                )}
+              >
+                {block.heading.label}
+              </div>
+              <ul role="group" aria-labelledby={headingId}>
+                {block.rows.map((entry) => row(entry))}
+              </ul>
+            </li>
+          );
+        };
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel
-          <ul className={cn("py-1", scrollable && SCROLLABLE_PANEL, panelClassName)} onKeyDown={keepTabInsidePanel}>
+          <ul
+            className={cn("py-1", scrollable && SCROLLABLE_PANEL, laidOut && COLUMNS_PANEL, panelClassName)}
+            style={laidOut ? ({ "--menu-columns-width": `${laidOut.columns.length * 14}rem` } as CSSProperties) : undefined}
+            onKeyDown={keepTabInsidePanel}
+          >
             {header && (
-              <MenuSection className="mb-1 border-b border-subtle px-3 py-2">
+              <MenuSection className={cn("mb-1 border-b border-subtle px-3 py-2", laidOut && SPAN_ALL)}>
                 <div className="truncate text-sm font-medium text-primary">{header.title}</div>
                 {header.subtitle != null && (
                   <div className="truncate text-xs text-muted">{header.subtitle}</div>
@@ -426,45 +513,42 @@ export function TopBarActionMenu({
               </MenuSection>
             )}
             {heading && (
-              <li className="px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder">
+              <li
+                className={cn(
+                  "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder",
+                  laidOut && SPAN_ALL,
+                )}
+              >
                 {heading}
               </li>
             )}
             {leading?.(close)}
-            {toBlocks(entries).map((block, i, blocks) => {
-              if (block.kind === "loose") {
-                const entry = block.entry;
-                if (entry.kind === "divider") {
-                  return <li key={entry.key} className="my-1 border-t border-subtle" />;
-                }
-                return row(entry);
-              }
-              const headingId = `${uid}-group-${i}`;
-              const before = blocks[i - 1];
-              // Under a rule (or at the top of the rows) the rule's margin is the gap;
-              // straight under another group's last row the heading makes its own.
-              const tight = !before || (before.kind === "loose" && before.entry.kind === "divider");
-              return (
-                <li key={block.heading.key} role="none">
-                  <div
-                    id={headingId}
-                    role="presentation"
-                    className={cn(
-                      "px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-muted [overflow-wrap:anywhere]",
-                      tight ? "pt-1" : "pt-2.5",
-                    )}
-                  >
-                    {block.heading.label}
-                  </div>
-                  <ul role="group" aria-labelledby={headingId}>
-                    {block.rows.map(row)}
-                  </ul>
-                </li>
-              );
-            })}
+            {laidOut ? (
+              <>
+                {laidOut.lead.map((block) => loose(block, true))}
+                {laidOut.columns.map((column, c) => (
+                  // A column of the grid; under `md` a group as in the list, its rows
+                  // following.
+                  <li key={column.group.heading.key} role="none" data-menu-column="" className="min-w-0">
+                    <ul role="none">
+                      {group(column.group, column.index, c === 0 && laidOut.lead.length === 0, true)}
+                      {column.after.map((entry) => loose({ kind: "loose", entry }, false))}
+                    </ul>
+                  </li>
+                ))}
+              </>
+            ) : (
+              blocks.map((block, i) => {
+                if (block.kind === "loose") return loose(block, false);
+                const before = blocks[i - 1];
+                // Under a rule (or at the top of the rows) the rule's margin is the gap;
+                // straight under another group's last row the heading makes its own.
+                return group(block, i, !before || (before.kind === "loose" && before.entry.kind === "divider"));
+              })
+            )}
             {children?.(close)}
             {footerBody != null && footerBody !== false && (
-              <MenuSection className="mt-1 border-t border-subtle px-3 py-2">
+              <MenuSection className={cn("mt-1 border-t border-subtle px-3 py-2", laidOut && SPAN_ALL)}>
                 {footerLabel ? (
                   <nav aria-label={footerLabel} className={footerClass}>
                     {footerBody}

package/src/shell.ts

@@ -41,7 +41,7 @@ export type {
   SettingsLocationRules,
   SettingsLocationResult,
 } from "./settings/use-settings-route";
-export { useSettingsFocus, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from "./settings/use-settings-focus";
+export { useSettingsFocus, useFocusParam, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from "./settings/use-settings-focus";
 export { SettingsSection } from "./settings/settings-section";
 export type { SettingsSectionProps } from "./settings/settings-section";
 export { useSettingsLayout } from "./settings/settings-context";