@godxjp/ui 31.29.0 → 31.30.0

package/dist/styles/data-display-layout.css

@@ -353,6 +353,10 @@
     border-radius: var(--legend-swatch-radius);
   }
 
+  .ui-legend-swatch[data-color="true"] {
+    background: var(--legend-swatch-color, hsl(var(--muted-foreground)));
+  }
+
   .ui-legend-swatch[data-tone="default"] {
     background: hsl(
       var(
@@ -2008,6 +2012,50 @@
   .ui-range-timeline-header {
     background: hsl(var(--muted));
   }
+
+  .ui-range-timeline-label-resizer {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: calc(var(--range-timeline-resizer-inline-size) / -2);
+    z-index: 2;
+    inline-size: var(--range-timeline-resizer-inline-size);
+    cursor: col-resize;
+    touch-action: none;
+  }
+  .ui-range-timeline-label-resizer::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    inline-size: var(--range-timeline-resizer-active-width);
+    translate: -50% 0;
+    background: transparent;
+  }
+  .ui-range-timeline-label-resizer:hover::after,
+  .ui-range-timeline-label-resizer:focus-visible::after {
+    background: hsl(var(--primary));
+  }
+  .ui-range-timeline-label-resizer:focus-visible {
+    outline: none;
+  }
+
+  .ui-range-timeline[data-busy="true"] .ui-range-timeline-body {
+    opacity: var(--range-timeline-busy-body-alpha);
+  }
+  .ui-range-timeline-busy {
+    position: relative;
+    overflow: hidden;
+    block-size: var(--range-timeline-busy-line-block-size);
+    background: hsl(var(--primary) / 0.2);
+  }
+  .ui-range-timeline-busy::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inline-size: 30%;
+    background: hsl(var(--primary));
+    animation: ui-range-timeline-busy var(--duration-slow, 1.2s) ease-in-out infinite;
+  }
   .ui-range-timeline-label {
     position: sticky;
     inset-inline-start: 0;
@@ -2109,10 +2157,77 @@
       --radius-sm,
       calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
     );
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
+    background: var(--range-timeline-bar-color, hsl(var(--primary)));
+    color: var(--range-timeline-bar-ink, hsl(var(--primary-foreground)));
+  }
+
+  .ui-range-timeline-plan,
+  .ui-range-timeline-overrun,
+  .ui-range-timeline-early {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    block-size: var(--range-timeline-bar-height);
+  }
+  .ui-range-timeline-plan {
+    border: var(--range-timeline-plan-border-width) dashed hsl(var(--foreground) / 0.45);
+    border-radius: var(
+      --radius-sm,
+      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+    );
+  }
+  .ui-range-timeline-overrun {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    overflow: visible;
+    background: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+    pointer-events: none;
+  }
+  .ui-range-timeline-variance {
+    position: absolute;
+    inset-inline-start: 100%;
+    padding-inline: var(--space-1);
+    color: hsl(var(--text-error));
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+  }
+  .ui-range-timeline-plan-note {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    padding-inline: var(--space-1);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  .ui-range-timeline-early {
+    z-index: 1;
+    inline-size: var(--range-timeline-early-marker-inline-size);
+    background: hsl(var(--success));
+    pointer-events: none;
+  }
+  .ui-range-timeline-bar[data-muted="true"] {
+    opacity: var(--range-timeline-bar-muted-alpha);
+  }
+  .ui-range-timeline-bar[data-overdue="true"] {
+    box-shadow: inset calc(-1 * var(--range-timeline-bar-overdue-width)) 0 0 hsl(var(--destructive));
+  }
+  [dir="rtl"] .ui-range-timeline-bar[data-overdue="true"] {
+    box-shadow: inset var(--range-timeline-bar-overdue-width) 0 0 hsl(var(--destructive));
+  }
+
+  .ui-range-timeline-bar-hit {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
   }
   .ui-range-timeline-handle {
+    z-index: 1;
     position: absolute;
     inset-block: 0;
     min-inline-size: 0;
@@ -3372,3 +3487,21 @@
     display: contents;
   }
 }
+
+@keyframes ui-range-timeline-busy {
+  from {
+    inset-inline-start: -30%;
+  }
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-range-timeline-busy::before {
+    animation: none;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    opacity: 0.6;
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.29.0",
+  "version": "31.30.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

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/docs/FRAME-COVERAGE-REPORT.md

@@ -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 | · | · | · | · | · | · |

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/i18n/messages/en.json

@@ -1689,5 +1689,16 @@
   },
   "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)"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1682,5 +1682,16 @@
   },
   "sidebarDocs": {
     "newEntry": "仕訳を追加"
+  },
+  "rangeTimelineDocs": {
+    "resizeTitle": "ラベル列の幅変更・読み込み中・日付なしの行",
+    "resizeDescription": "ヘッダーの区切りをドラッグ（またはフォーカスして矢印キー、Shiftで大きく、Home/End）するとラベル列の幅が変わります。幅は制御プロパティなので、アプリ側でユーザーごとに保存できます。スイッチは新しい期間の読み込み中を示し、日付のない行はバーの代わりに案内を表示します。",
+    "busyToggle": "新しい期間を読み込み中",
+    "longTask": "EXSELI-81 問い合わせフォームと確認メールの改修",
+    "undatedTask": "EXSELI-82 まだ日程未定",
+    "width": "ラベル列: {width}px",
+    "doneTask": "EXSELI-79 リリースノート（完了）",
+    "lateTask": "EXSELI-80 データ移行（期限超過）",
+    "plannedTask": "EXSELI-84 決済API（予定 3–7、実績 3–10）"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1682,5 +1682,16 @@
   },
   "sidebarDocs": {
     "newEntry": "Thêm bút toán"
+  },
+  "rangeTimelineDocs": {
+    "resizeTitle": "Cột nhãn đổi độ rộng, đang tải, hàng chưa có ngày",
+    "resizeDescription": "Kéo vạch ngăn ở header (hoặc focus rồi dùng phím mũi tên, Shift để bước lớn, Home/End) để mở rộng cột nhãn. Độ rộng là prop controlled nên app có thể lưu theo từng người dùng. Công tắc đánh dấu đang tải khoảng mới; hàng chưa có ngày hiện gợi ý thay cho thanh.",
+    "busyToggle": "Đang tải khoảng mới",
+    "longTask": "EXSELI-81 Làm lại form liên hệ và email xác nhận",
+    "undatedTask": "EXSELI-82 Chưa lên lịch",
+    "width": "Cột nhãn: {width}px",
+    "doneTask": "EXSELI-79 Ghi chú phát hành (xong)",
+    "lateTask": "EXSELI-80 Chuyển dữ liệu (quá hạn)",
+    "plannedTask": "EXSELI-84 API thanh toán (kế hoạch 3–7, thực tế 3–10)"
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.29.0",
-  "godxUiMcp": "31.29.0",
+  "version": "31.30.0",
+  "godxUiMcp": "31.30.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",