@godxjp/ui 31.28.4 → 31.30.0

package/dist/styles/layout.css

@@ -138,7 +138,10 @@
     min-inline-size: 0;
   }
 
-  .ui-space-compact[data-orientation="horizontal"][data-full-width="true"] > [data-slot="space-compact-item"]:not(:has(.ui-control, .ui-control-multiline, .ui-tag-input)) {
+  .ui-space-compact[data-orientation="horizontal"][data-full-width="true"]
+    > [data-slot="space-compact-item"]:not(
+      :has(.ui-control, .ui-control-multiline, .ui-tag-input)
+    ) {
     flex: none;
   }
 
@@ -146,16 +149,21 @@
     flex-direction: column;
   }
 
-  .ui-space-compact[data-orientation="vertical"][data-full-width="true"] > [data-slot="space-compact-item"] {
+  .ui-space-compact[data-orientation="vertical"][data-full-width="true"]
+    > [data-slot="space-compact-item"] {
     min-inline-size: auto;
     min-block-size: 0;
   }
 
-  .ui-space-compact[data-orientation="horizontal"] > [data-slot="space-compact-item"] + [data-slot="space-compact-item"] {
+  .ui-space-compact[data-orientation="horizontal"]
+    > [data-slot="space-compact-item"]
+    + [data-slot="space-compact-item"] {
     margin-inline-start: calc(var(--control-border-width, var(--stroke-hairline)) * -1);
   }
 
-  .ui-space-compact[data-orientation="vertical"] > [data-slot="space-compact-item"] + [data-slot="space-compact-item"] {
+  .ui-space-compact[data-orientation="vertical"]
+    > [data-slot="space-compact-item"]
+    + [data-slot="space-compact-item"] {
     margin-block-start: calc(var(--control-border-width, var(--stroke-hairline)) * -1);
   }
 
@@ -175,12 +183,14 @@
     z-index: 1;
   }
 
-  .ui-space-compact[data-orientation="horizontal"] > [data-slot="space-compact-item"]:not(:first-child) {
+  .ui-space-compact[data-orientation="horizontal"]
+    > [data-slot="space-compact-item"]:not(:first-child) {
     --input-radius-start: 0;
     --control-trigger-radius-start: 0;
   }
 
-  .ui-space-compact[data-orientation="horizontal"] > [data-slot="space-compact-item"]:not(:last-child) {
+  .ui-space-compact[data-orientation="horizontal"]
+    > [data-slot="space-compact-item"]:not(:last-child) {
     --input-radius-end: 0;
     --control-trigger-radius-end: 0;
   }
@@ -410,6 +420,10 @@
     align-items: start;
   }
 
+  .ui-responsive-grid[data-dense] {
+    grid-auto-flow: row dense;
+  }
+
   .ui-responsive-grid[data-align="start"] {
     align-items: start;
   }
@@ -926,7 +940,10 @@
 
   .ui-page-container[data-header-scale="display"] .ui-page-title,
   .ui-page-container[data-header-scale="display"] .ui-page-header .ui-page-title {
-    font-size: var(--page-title-font-size-display);
+    font-size: var(
+      --page-title-font-size-display,
+      var(--font-size-4xl, calc(var(--font-size-display) / var(--font-size-display-ratio)))
+    );
     font-weight: var(--font-weight-semibold);
     line-height: var(--page-title-line-height-display);
     text-wrap: balance;
@@ -1966,22 +1983,27 @@
   .ui-master-detail[data-rail-width="wide"] {
     --master-detail-rail-size: var(--master-detail-rail-wide);
   }
+
   .ui-responsive-grid-item {
     grid-column: span min(var(--responsive-grid-base, 1), var(--responsive-grid-item-base, 1));
+    grid-row: span var(--responsive-grid-item-row-base, 1);
   }
   @container responsive-grid (min-width: 40rem) {
     .ui-responsive-grid-item {
       grid-column: span min(var(--responsive-grid-sm, 1), var(--responsive-grid-item-sm, 1));
+      grid-row: span var(--responsive-grid-item-row-sm, 1);
     }
   }
   @container responsive-grid (min-width: 48rem) {
     .ui-responsive-grid-item {
       grid-column: span min(var(--responsive-grid-md, 1), var(--responsive-grid-item-md, 1));
+      grid-row: span var(--responsive-grid-item-row-md, 1);
     }
   }
   @container responsive-grid (min-width: 64rem) {
     .ui-responsive-grid-item {
       grid-column: span min(var(--responsive-grid-lg, 1), var(--responsive-grid-item-lg, 1));
+      grid-row: span var(--responsive-grid-item-row-lg, 1);
     }
   }
   .ui-separator[data-label-size="2xs"] .ui-separator-label {

package/dist/styles/shell-layout.css

@@ -1504,6 +1504,21 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .ui-app-launcher-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--app-launcher-footer-gap);
+    margin-block-start: var(--app-launcher-footer-space-block);
+    padding-block-start: var(--app-launcher-footer-space-block);
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
+    font-size: var(--app-launcher-footer-font-size);
+  }
+
+  .ui-app-launcher-launchpad .ui-app-launcher-footer {
+    justify-content: center;
+  }
+
   .ui-app-launcher-state {
     display: flex;
     min-height: var(--app-launcher-state-min-height);
@@ -1606,6 +1621,17 @@
     height: var(--sidebar-product-caret-icon-size);
   }
 
+  .sb-action {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    padding: var(--sidebar-action-padding);
+  }
+
+  .sb-root[data-collapsed="true"] .sb-action {
+    align-items: center;
+  }
+
   .sb-nav-scroll {
     flex: 1;
     min-height: 0;

package/dist/tokens/components/control.css

@@ -470,6 +470,11 @@
   );
   --emoji-picker-glyph-size: var(--icon-size-lg);
   --emoji-picker-grid-max-block-size: 16rem;
+
+  --sortable-list-gap: var(--space-2);
+  --sortable-list-item-padding: var(--space-2);
+  --sortable-list-item-radius: var(--control-radius);
+  --sortable-list-grid-item-min-inline-size: 12rem;
 }
 
 @media (pointer: coarse) {

package/dist/tokens/components/data-display.css

@@ -250,6 +250,12 @@
 :root {
   --range-timeline-label-width: var(--app-shell-sidebar-width);
 
+  --range-timeline-resizer-inline-size: var(--space-6);
+  --range-timeline-resizer-active-width: var(--stroke-md, 2px);
+
+  --range-timeline-busy-body-alpha: 0.55;
+  --range-timeline-busy-line-block-size: var(--stroke-md, 2px);
+
   --range-timeline-unit-width: var(--range-timeline-unit-width-default);
 
   --range-timeline-unit-width-compact: calc(var(--control-height-sm) * 1.5);
@@ -258,6 +264,12 @@
   --range-timeline-row-height: var(--control-height-lg);
   --range-timeline-bar-height: var(--control-height-sm);
 
+  --range-timeline-bar-muted-alpha: 0.45;
+  --range-timeline-bar-overdue-width: var(--stroke-md);
+
+  --range-timeline-plan-border-width: var(--stroke-hairline);
+  --range-timeline-early-marker-inline-size: var(--stroke-md);
+
   --range-timeline-border-color: var(--border);
 
   --range-timeline-grid-color: initial;

package/dist/tokens/components/feedback.css

@@ -29,6 +29,12 @@
   --sheet-close-rest-alpha: 0.7;
   --sheet-header-close-space-inline-end: var(--space-8);
   --dialog-width-default: 32rem;
+
+  --dialog-width: initial;
+
+  --dialog-motion-duration: initial;
+  --sheet-enter-duration: initial;
+  --sheet-exit-duration: initial;
   --dialog-viewport-inset: 1.5rem;
   --dialog-overlay-background: initial;
 

package/dist/tokens/components/shell.css

@@ -139,6 +139,8 @@
 
   --sidebar-nav-item-radius: initial;
   --sidebar-nav-scroll-padding: var(--space-3) var(--space-2);
+
+  --sidebar-action-padding: var(--space-3) var(--space-2) 0;
   --sidebar-section-gap: var(--space-4);
   --sidebar-section-label-padding-x: var(--space-2);
   --sidebar-section-label-padding-bottom: var(--space-1);
@@ -240,6 +242,10 @@
   --app-launcher-group-label-color: initial;
   --app-launcher-state-min-height: 8rem;
 
+  --app-launcher-footer-space-block: var(--space-2);
+  --app-launcher-footer-gap: var(--space-3);
+  --app-launcher-footer-font-size: var(--font-size-sm, var(--font-size-base));
+
   --app-launcher-launchpad-backdrop-background: initial;
   --app-launcher-launchpad-backdrop-blur-size: var(--blur-lg);
   --app-launcher-launchpad-backdrop-alpha: 55%;

package/dist/tokens/semantic/layout.css

@@ -91,10 +91,7 @@
 
   --page-title-font-size-chrome: var(--heading-h3, var(--font-size-base));
 
-  --page-title-font-size-display: var(
-    --font-size-4xl,
-    calc(var(--font-size-display) / var(--font-size-display-ratio))
-  );
+  --page-title-font-size-display: initial;
   --page-title-line-height-display: 1.4;
 
   --page-icon-size: var(--icon-size-4xl);

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **184**
-- With ≥1 frame: **160** · zero-frame: **24**
+- Public components: **185**
+- With ≥1 frame: **161** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -48,7 +48,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | CardBar | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | TimeRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | VisuallyHidden | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
-| RangeTimeline | **✗** | · | N/A | N/A | · | · | · | · | · | · |
+| RangeTimeline | **✗** | · | · | N/A | · | · | · | · | · | · |
 | PageContainer | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | PageCover | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Flex | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
@@ -195,6 +195,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | PieChart | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | CommandPalette | ✓ | N/A | · | · | · | · | · | · | · | · |
 | EmojiPicker | ✓ | · | · | · | · | · | · | · | · | · |
+| SortableList | ✓ | N/A | · | · | · | · | · | · | · | · |
 | TwoFactorSetup | ✓ | N/A | · | · | · | · | · | · | · | · |
 | AuthDivider | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | AuthFooter | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/avatar.tsx

@@ -11,9 +11,11 @@ import {
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Building2, KeyRound, ShieldCheck, Sparkles } from "lucide-react";
 
 import portraitAmber from "../assets/portrait-amber.svg";
+import shotLandscape from "../assets/shot-landscape.svg";
 import portraitClay from "../assets/portrait-clay.svg";
 import portraitIndigo from "../assets/portrait-indigo.svg";
 import portraitIris from "../assets/portrait-iris.svg";
@@ -39,9 +41,39 @@ import portraitSlate from "../assets/portrait-slate.svg";
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
+  const { t } = useTranslation();
   return (
     <PageContainer title="Avatar" subtitle="Identity image with a readable fallback">
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("avatarDocs.fitTitle")}</CardTitle>
+            <CardDescription>{t("avatarDocs.fitDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {/* gh#1176: a wide logo — cover crops it, contain shows it whole. */}
+            <Flex direction="row" wrap align="center" gap="md">
+              <Flex direction="col" align="center" gap="xs">
+                <Avatar shape="square" size="lg">
+                  <AvatarImage src={shotLandscape} alt={t("avatarDocs.logo")} />
+                  <AvatarFallback>AC</AvatarFallback>
+                </Avatar>
+                <Text size="sm" tone="muted">
+                  cover
+                </Text>
+              </Flex>
+              <Flex direction="col" align="center" gap="xs">
+                <Avatar shape="square" size="lg">
+                  <AvatarImage src={shotLandscape} alt={t("avatarDocs.logo")} fit="contain" />
+                  <AvatarFallback>AC</AvatarFallback>
+                </Avatar>
+                <Text size="sm" tone="muted">
+                  contain
+                </Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>Image + fallback</CardTitle>

package/docs/data-display/timeline.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import { useState, type CSSProperties } from "react";
 
 import { useTranslation } from "@godxjp/ui/i18n";
 import {
@@ -11,6 +11,7 @@ import {
   RangeTimeline,
   type TimelineItem,
 } from "@godxjp/ui/data-display";
+import { Switch } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { ArrowRightLeft, MessageSquare } from "lucide-react";
@@ -90,6 +91,7 @@ const richItems: TimelineItem[] = [
 
 export default function Demo() {
   const { t, locale } = useTranslation();
+  const [gantt, setGantt] = useState({ width: 280, busy: false });
   // An activity log (gh#1092): every row already happened, so none is "done" or "upcoming" —
   // `status: "log"` keeps the neutral dot and adds no screen-reader status prefix.
   const logItems: TimelineItem[] = [
@@ -270,6 +272,87 @@ export default function Demo() {
             />
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("rangeTimelineDocs.resizeTitle")}</CardTitle>
+            <CardDescription>{t("rangeTimelineDocs.resizeDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Switch
+                checked={gantt.busy}
+                onCheckedChange={(busy) => setGantt((state) => ({ ...state, busy }))}
+                aria-label={t("rangeTimelineDocs.busyToggle")}
+              />
+              <RangeTimeline
+                label={t("rangeTimeline.schedule")}
+                columns={Array.from({ length: 14 }, (_, index) => ({
+                  label: new Intl.NumberFormat(locale).format(index + 1),
+                  units: 1,
+                }))}
+                rows={[
+                  {
+                    id: "r1",
+                    label: t("rangeTimelineDocs.longTask"),
+                    start: 1,
+                    end: 6,
+                    startLabel: "",
+                    endLabel: "",
+                    color: "#2563eb",
+                    tooltip: t("rangeTimelineDocs.longTask"),
+                  },
+                  {
+                    id: "r3",
+                    label: t("rangeTimelineDocs.doneTask"),
+                    start: 0,
+                    end: 2,
+                    startLabel: "",
+                    endLabel: "",
+                    color: "#16a34a",
+                    muted: true,
+                  },
+                  {
+                    id: "r4",
+                    label: t("rangeTimelineDocs.lateTask"),
+                    start: 3,
+                    end: 8,
+                    startLabel: "",
+                    endLabel: "",
+                    color: "#f59e0b",
+                    overdue: true,
+                  },
+                  {
+                    id: "r5",
+                    label: t("rangeTimelineDocs.plannedTask"),
+                    start: 2,
+                    end: 9,
+                    startLabel: "",
+                    endLabel: "",
+                    color: "#7c3aed",
+                    plan: { start: 2, end: 6 },
+                  },
+                  {
+                    id: "r2",
+                    label: t("rangeTimelineDocs.undatedTask"),
+                    start: null,
+                    end: null,
+                    startLabel: "",
+                    endLabel: "",
+                  },
+                ]}
+                resizableLabel={{ min: 180, max: 520 }}
+                labelWidth={gantt.width}
+                onLabelWidthChange={(width) => setGantt((state) => ({ ...state, width }))}
+                busy={gantt.busy}
+              />
+              <Text size="sm" tone="muted">
+                {t("rangeTimelineDocs.width", {
+                  width: new Intl.NumberFormat(locale).format(gantt.width),
+                })}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
 
         {/* sticky sits OUTSIDE a Card on purpose: Card clips (`overflow: hidden`), and a clipping
             ancestor becomes the box the header sticks to — the same limit as antd Table sticky. */}

package/docs/data-entry/sortable-list.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { SortableList } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * SortableList (gh#1173) — a desktop editor's widget order (tiles) and a settings list of tabs,
+ * reordered by dragging a grip or by the keyboard, every step announced.
+ */
+export default function Demo() {
+  const { t, locale } = useTranslation();
+  const list = new Intl.ListFormat(locale, { style: "narrow", type: "unit" });
+  const ordinal = new Intl.NumberFormat(locale);
+  const widgets = [
+    { value: "calendar", label: t("sortableListDocs.calendar") },
+    { value: "mail", label: t("sortableListDocs.mail") },
+    { value: "tasks", label: t("sortableListDocs.tasks") },
+    { value: "notes", label: t("sortableListDocs.notes") },
+  ];
+  const tabs = [
+    { value: "overview", label: t("sortableListDocs.overview") },
+    { value: "members", label: t("sortableListDocs.members") },
+    { value: "billing", label: t("sortableListDocs.billing"), disabled: true },
+    { value: "audit", label: t("sortableListDocs.audit") },
+  ];
+  const [order, setOrder] = React.useState(widgets.map((w) => w.value));
+  return (
+    <PageContainer title="SortableList" subtitle={t("sortableListDocs.subtitle")}>
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("sortableListDocs.widgetsTitle")}</CardTitle>
+            <CardDescription>{t("sortableListDocs.widgetsDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <SortableList
+                aria-label={t("sortableListDocs.widgetsTitle")}
+                layout="grid"
+                items={widgets}
+                value={order}
+                onValueChange={setOrder}
+                renderItem={(item, { index }) => (
+                  <Flex direction="col" gap="xs">
+                    <Text weight="medium">{item.label}</Text>
+                    <Text size="sm" tone="muted">
+                      {t("sortableListDocs.slot", { position: ordinal.format(index + 1) })}
+                    </Text>
+                  </Flex>
+                )}
+              />
+              <Text size="sm" tone="muted">
+                {t("sortableListDocs.saved", {
+                  order: list.format(
+                    order.map((key) => widgets.find((w) => w.value === key)?.label ?? key),
+                  ),
+                })}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("sortableListDocs.tabsTitle")}</CardTitle>
+            <CardDescription>{t("sortableListDocs.tabsDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SortableList aria-label={t("sortableListDocs.tabsTitle")} items={tabs} />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/feedback/dialog.tsx

@@ -21,7 +21,8 @@ import {
   CardTitle,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import { useTranslation } from "@godxjp/ui/i18n";
 
 /** Every branch of DialogHeader's `tone`, in the order the vocabulary declares them. */
 const headerTones = [
@@ -49,6 +50,8 @@ const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY"
  * Use DialogFooter for primary/cancel actions.
  */
 export default function Demo() {
+  const { t } = useTranslation();
+  const [wideOpen, setWideOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(true);
   const [detailOpen, setDetailOpen] = useState(false);
   const [toneOpen, setToneOpen] = useState(false);
@@ -128,6 +131,39 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("dialogWidthDocs.title")}</CardTitle>
+            <CardDescription>{t("dialogWidthDocs.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Dialog open={wideOpen} onOpenChange={setWideOpen}>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                  {t("dialogWidthDocs.open")}
+                </Button>
+              </DialogTrigger>
+              <DialogContent width="60rem">
+                <DialogHeader>
+                  <DialogTitle>{t("dialogWidthDocs.dialogTitle")}</DialogTitle>
+                  <DialogDescription>{t("dialogWidthDocs.dialogDescription")}</DialogDescription>
+                </DialogHeader>
+                <DialogBody>
+                  <ResponsiveGrid columns={{ base: 1, sm: 3 }}>
+                    {[1, 2, 3, 4, 5, 6].map((n) => (
+                      <Card key={n}>
+                        <CardContent>
+                          <Text>{t("dialogWidthDocs.desktop", { n: String(n) })}</Text>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </ResponsiveGrid>
+                </DialogBody>
+              </DialogContent>
+            </Dialog>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Read-only detail pop-up</CardTitle>

package/docs/i18n/messages/en.json

@@ -1638,5 +1638,67 @@
     "label": "Icon",
     "chosen": "Chosen: {icon}",
     "none": "No icon"
+  },
+  "dialogWidthDocs": {
+    "title": "Wide dialog (width)",
+    "description": "DialogContent width sizes the panel for an overview grid; it is capped at the viewport minus the inset, so it still fits a phone.",
+    "open": "Open the overview",
+    "dialogTitle": "All desktops",
+    "dialogDescription": "A 60rem dialog holding a three-column grid.",
+    "desktop": "Desktop {n}"
+  },
+  "sortableListDocs": {
+    "subtitle": "Drag a grip, or Space · arrows · Space · Esc — every move is announced",
+    "widgetsTitle": "Home widgets",
+    "widgetsDescription": "Order the tiles on your desktop. The order is saved once, when you drop.",
+    "calendar": "Calendar",
+    "mail": "Mail",
+    "tasks": "Tasks",
+    "notes": "Notes",
+    "slot": "Slot {position}",
+    "saved": "Saved order: {order}",
+    "tabsTitle": "Project tabs",
+    "tabsDescription": "A list layout. Billing is locked by your plan, so it cannot be picked up — the others still move past it.",
+    "overview": "Overview",
+    "members": "Members",
+    "billing": "Billing",
+    "audit": "Audit log"
+  },
+  "topbarItemDocs": {
+    "notifications": "Notifications",
+    "notificationsUnread": "Notifications, {count} unread"
+  },
+  "appLauncherDocs": {
+    "requestAccess": "Request access",
+    "allApps": "All apps"
+  },
+  "responsiveGridDocs": {
+    "boardTitle": "Widget board (rowSpan + dense)",
+    "boardDescription": "A 2×1 cell, a tall 1×2 cell (ResponsiveGrid.Item rowSpan={2}) and 1×1 cells. dense lets the small cells fill the space beside the wide and tall ones.",
+    "revenue": "Monthly revenue",
+    "tasks": "Open tasks",
+    "members": "Members",
+    "invoices": "Invoices",
+    "services": "Services",
+    "invitations": "Invitations"
+  },
+  "avatarDocs": {
+    "fitTitle": "Logos: fit=\"contain\"",
+    "fitDescription": "cover (the default) crops to fill — right for a face. contain shows a wide or transparent logo whole.",
+    "logo": "Acme logo"
+  },
+  "sidebarDocs": {
+    "newEntry": "New journal entry"
+  },
+  "rangeTimelineDocs": {
+    "resizeTitle": "Resizable label column, loading, undated rows",
+    "resizeDescription": "Drag the divider in the header (or focus it and use the arrow keys, Shift for bigger steps, Home/End) to widen the label column. The width is controlled, so an app can remember it per user. The switch marks a range as loading; a row without dates shows a hint instead of a bar.",
+    "busyToggle": "Loading a new range",
+    "longTask": "EXSELI-81 Rebuild the contact form and its confirmation email",
+    "undatedTask": "EXSELI-82 Not scheduled yet",
+    "width": "Label column: {width}px",
+    "doneTask": "EXSELI-79 Release notes (done)",
+    "lateTask": "EXSELI-80 Data migration (overdue)",
+    "plannedTask": "EXSELI-84 Payment API (plan 3–7, actual 3–10)"
   }
 }