@godxjp/ui 31.30.1 → 31.31.0

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

@@ -2221,6 +2221,176 @@
     box-shadow: inset var(--range-timeline-bar-overdue-width) 0 0 hsl(var(--destructive));
   }
 
+  .ui-range-timeline-finish,
+  .ui-range-timeline-plan-tick {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translate(-50%, -50%);
+    block-size: var(--range-timeline-bar-height);
+  }
+  [dir="rtl"] .ui-range-timeline-finish,
+  [dir="rtl"] .ui-range-timeline-plan-tick {
+    transform: translate(50%, -50%);
+  }
+  .ui-range-timeline-finish {
+    inline-size: var(--range-timeline-finish-inline-size);
+    border-radius: var(--range-timeline-finish-inline-size);
+    background: var(--range-timeline-bar-color, hsl(var(--primary)));
+  }
+  .ui-range-timeline-plan-tick {
+    inline-size: 0;
+    border-inline-start: var(--range-timeline-plan-tick-inline-size) dashed
+      hsl(var(--foreground) / 0.45);
+  }
+  .ui-range-timeline-bar[data-open-end="true"] {
+    mask-image: linear-gradient(
+      to right,
+      black calc(100% - var(--range-timeline-open-end-fade-inline-size)),
+      transparent
+    );
+  }
+  [dir="rtl"] .ui-range-timeline-bar[data-open-end="true"] {
+    mask-image: linear-gradient(
+      to left,
+      black calc(100% - var(--range-timeline-open-end-fade-inline-size)),
+      transparent
+    );
+  }
+  .ui-range-timeline-bar[data-cancelled="true"],
+  .ui-range-timeline-milestone[data-cancelled="true"]::before {
+    background-image: repeating-linear-gradient(
+      -45deg,
+      transparent 0 var(--range-timeline-cancelled-hatch-gap),
+      var(--range-timeline-cancelled-hatch-color, hsl(var(--foreground) / 0.45))
+        var(--range-timeline-cancelled-hatch-gap)
+        calc(
+          var(--range-timeline-cancelled-hatch-gap) +
+            var(--range-timeline-cancelled-hatch-line-width)
+        )
+    );
+  }
+  .ui-range-timeline-milestone,
+  .ui-range-timeline-plan-diamond {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: var(--range-timeline-milestone-size);
+    block-size: var(--range-timeline-milestone-size);
+    transform: translate(-50%, -50%);
+  }
+  [dir="rtl"] .ui-range-timeline-milestone,
+  [dir="rtl"] .ui-range-timeline-plan-diamond {
+    transform: translate(50%, -50%);
+  }
+  .ui-range-timeline-milestone::before,
+  .ui-range-timeline-plan-diamond::before {
+    content: "";
+    position: absolute;
+    inset: calc(var(--range-timeline-milestone-size) * 0.15);
+    rotate: 45deg;
+  }
+  .ui-range-timeline-milestone {
+    color: var(--range-timeline-bar-ink, hsl(var(--primary-foreground)));
+  }
+  .ui-range-timeline-milestone::before {
+    background-color: var(--range-timeline-bar-color, hsl(var(--primary)));
+  }
+  .ui-range-timeline-milestone[data-muted="true"] {
+    opacity: var(--range-timeline-bar-muted-alpha);
+  }
+  .ui-range-timeline-milestone[data-overdue="true"]::before {
+    box-shadow: 0 0 0 var(--range-timeline-bar-overdue-width) hsl(var(--destructive));
+  }
+  .ui-range-timeline-plan-diamond::before {
+    border: var(--range-timeline-plan-border-width) dashed hsl(var(--foreground) / 0.45);
+  }
+
+  .ui-range-timeline-milestone > .ui-range-timeline-handle {
+    inset-inline: 0;
+    inline-size: 100%;
+  }
+  .ui-range-timeline-early-label {
+    z-index: 1;
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    padding-inline: var(--space-1);
+    color: hsl(var(--text-success));
+    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-links {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: grid;
+    grid-template-columns: var(--range-timeline-label-width) minmax(0, 1fr);
+    pointer-events: none;
+  }
+  .ui-range-timeline-links-track {
+    position: relative;
+    min-inline-size: 0;
+  }
+  .ui-range-timeline-links-svg {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  .ui-range-timeline-link line {
+    fill: none;
+    stroke: var(--range-timeline-link-color, hsl(var(--muted-foreground)));
+    stroke-width: var(--range-timeline-link-width);
+  }
+  .ui-range-timeline-link[data-violated="true"] line {
+    stroke: hsl(var(--mark-destructive, var(--text-error)));
+  }
+  .ui-range-timeline-link-head path {
+    fill: var(--range-timeline-link-color, hsl(var(--muted-foreground)));
+  }
+  .ui-range-timeline-link-head[data-violated="true"] path {
+    fill: hsl(var(--mark-destructive, var(--text-error)));
+  }
+
+  .ui-range-timeline-link-violation {
+    position: absolute;
+    inline-size: var(--range-timeline-link-violation-size);
+    block-size: var(--range-timeline-link-violation-size);
+    translate: -50% -50%;
+    border-radius: var(--radius-full, 9999px);
+    pointer-events: auto;
+  }
+  [dir="rtl"] .ui-range-timeline-link-violation {
+    translate: 50% -50%;
+  }
+  .ui-range-timeline-link-violation::before {
+    content: "";
+    position: absolute;
+    inset: calc(var(--range-timeline-link-violation-size) * 0.3);
+    border-radius: inherit;
+    background: hsl(var(--mark-destructive, var(--text-error)));
+  }
+
+  .ui-range-timeline-row[data-emphasis="warning"] > .ui-range-timeline-label {
+    box-shadow: inset var(--range-timeline-emphasis-width) 0 0
+      hsl(var(--mark-warning, var(--text-warning)));
+  }
+  .ui-range-timeline-row[data-emphasis="critical"] > .ui-range-timeline-label {
+    box-shadow: inset var(--range-timeline-emphasis-width) 0 0
+      hsl(var(--mark-destructive, var(--text-error)));
+  }
+  [dir="rtl"] .ui-range-timeline-row[data-emphasis="warning"] > .ui-range-timeline-label {
+    box-shadow: inset calc(-1 * var(--range-timeline-emphasis-width)) 0 0
+      hsl(var(--mark-warning, var(--text-warning)));
+  }
+  [dir="rtl"] .ui-range-timeline-row[data-emphasis="critical"] > .ui-range-timeline-label {
+    box-shadow: inset calc(-1 * var(--range-timeline-emphasis-width)) 0 0
+      hsl(var(--mark-destructive, var(--text-error)));
+  }
+
   .ui-range-timeline-bar-hit {
     position: absolute;
     inset: 0;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.30.1",
+  "version": "31.31.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

@@ -270,6 +270,18 @@
   --range-timeline-plan-border-width: var(--stroke-hairline);
   --range-timeline-early-marker-inline-size: var(--stroke-md);
 
+  --range-timeline-milestone-size: var(--range-timeline-bar-height);
+  --range-timeline-finish-inline-size: calc(var(--stroke-md) * 2);
+  --range-timeline-plan-tick-inline-size: var(--stroke-md);
+  --range-timeline-open-end-fade-inline-size: var(--space-6);
+  --range-timeline-cancelled-hatch-gap: var(--space-1);
+  --range-timeline-cancelled-hatch-line-width: var(--stroke-md);
+  --range-timeline-cancelled-hatch-color: initial;
+  --range-timeline-link-color: initial;
+  --range-timeline-link-width: var(--stroke-hairline);
+  --range-timeline-link-violation-size: var(--space-6);
+  --range-timeline-emphasis-width: var(--stroke-md);
+
   --range-timeline-border-color: var(--border);
 
   --range-timeline-grid-color: initial;

package/docs/data-display/timeline.tsx

@@ -354,6 +354,104 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("rangeTimelineDocs.schedulesTitle")}</CardTitle>
+            <CardDescription>{t("rangeTimelineDocs.schedulesDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              planLabel={t("rangeTimelineDocs.baseline")}
+              columns={Array.from({ length: 14 }, (_, index) => ({
+                label: new Intl.NumberFormat(locale).format(index + 1),
+                units: 1,
+              }))}
+              rows={[
+                {
+                  id: "phase",
+                  label: t("rangeTimelineDocs.phase"),
+                  start: null,
+                  end: null,
+                  startLabel: "",
+                  endLabel: "",
+                  emptyHint: false,
+                },
+                {
+                  id: "design",
+                  label: t("rangeTimelineDocs.design"),
+                  start: 0,
+                  end: 3,
+                  startLabel: "",
+                  endLabel: "",
+                  color: "#16a34a",
+                  plan: { start: 0, end: 4 },
+                },
+                {
+                  id: "build",
+                  label: t("rangeTimelineDocs.build"),
+                  start: 4,
+                  end: 9,
+                  startLabel: "",
+                  endLabel: "",
+                  color: "#2563eb",
+                  plan: { start: 4, end: 7 },
+                  emphasis: "critical",
+                },
+                {
+                  id: "release",
+                  label: t("rangeTimelineDocs.release"),
+                  start: null,
+                  end: 10,
+                  startLabel: "",
+                  endLabel: "",
+                  shape: "milestone",
+                  color: "#7c3aed",
+                  plan: { start: null, end: 8 },
+                },
+                {
+                  id: "ops",
+                  label: t("rangeTimelineDocs.ops"),
+                  start: 6,
+                  end: 12,
+                  startLabel: "",
+                  endLabel: "",
+                  openEnd: true,
+                  emphasis: "warning",
+                },
+                {
+                  id: "legacy",
+                  label: t("rangeTimelineDocs.legacy"),
+                  start: 2,
+                  end: 5,
+                  startLabel: "",
+                  endLabel: "",
+                  cancelled: true,
+                },
+                {
+                  id: "audit",
+                  label: t("rangeTimelineDocs.audit"),
+                  start: null,
+                  end: 5,
+                  startLabel: "",
+                  endLabel: "",
+                },
+              ]}
+              links={[
+                { id: "design-build", from: "design", to: "build" },
+                {
+                  id: "build-release",
+                  from: "build",
+                  to: "release",
+                  type: "FF",
+                  violated: true,
+                  label: t("rangeTimelineDocs.violation"),
+                },
+              ]}
+            />
+          </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. */}
         <Card>

package/docs/i18n/messages/en.json

@@ -1699,6 +1699,17 @@
     "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)"
+    "plannedTask": "EXSELI-84 Payment API (plan 3–7, actual 3–10)",
+    "schedulesTitle": "Schedules: milestones, dependencies, baselines",
+    "schedulesDescription": "A phase heading row with no hint, bars against a baseline (overrun and early labels), a milestone diamond with its hollow baseline, an open-ended row with no end grip, a cancelled row, a finish recorded without a start, and dependency arrows: a violated one gets a focusable marker. Emphasis marks the critical path and an at-risk row.",
+    "baseline": "the baseline",
+    "phase": "Phase 1: Launch",
+    "design": "Design",
+    "build": "Build",
+    "release": "Release",
+    "ops": "Operations (in progress)",
+    "legacy": "Legacy migration (cancelled)",
+    "audit": "Security review (finish only)",
+    "violation": "Release cannot finish before the build"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1692,6 +1692,17 @@
     "width": "ラベル列: {width}px",
     "doneTask": "EXSELI-79 リリースノート（完了）",
     "lateTask": "EXSELI-80 データ移行（期限超過）",
-    "plannedTask": "EXSELI-84 決済API（予定 3–7、実績 3–10）"
+    "plannedTask": "EXSELI-84 決済API（予定 3–7、実績 3–10）",
+    "schedulesTitle": "工程：マイルストーン・依存関係・ベースライン",
+    "schedulesDescription": "見出しだけの行、ベースラインに対する遅れ・前倒しの表示、ベースライン（中抜きのひし形）付きのマイルストーン、完了未記録で終了グリップのない行、中止した行、開始日不明で完了だけ記録された行、依存関係の矢印（違反はフォーカスできるマーカー付き）。強調はクリティカルパスと要注意の行を示します。",
+    "baseline": "ベースライン",
+    "phase": "フェーズ1：リリース準備",
+    "design": "設計",
+    "build": "開発",
+    "release": "リリース",
+    "ops": "運用（進行中）",
+    "legacy": "旧システム移行（中止）",
+    "audit": "セキュリティ審査（完了のみ）",
+    "violation": "開発の完了前にリリースは完了できません"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1692,6 +1692,17 @@
     "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)"
+    "plannedTask": "EXSELI-84 API thanh toán (kế hoạch 3–7, thực tế 3–10)",
+    "schedulesTitle": "Lịch trình: mốc, phụ thuộc, đường cơ sở",
+    "schedulesDescription": "Một hàng tiêu đề không có gợi ý, các thanh so với đường cơ sở (nhãn trễ và sớm), một mốc hình thoi với đường cơ sở rỗng, một hàng chưa ghi nhận hoàn thành không có tay nắm cuối, một hàng đã hủy, một hàng chỉ có ngày hoàn thành, và các mũi tên phụ thuộc: mũi tên vi phạm có điểm đánh dấu có thể focus. Nhấn mạnh đánh dấu đường găng và hàng có rủi ro.",
+    "baseline": "đường cơ sở",
+    "phase": "Giai đoạn 1: Ra mắt",
+    "design": "Thiết kế",
+    "build": "Phát triển",
+    "release": "Phát hành",
+    "ops": "Vận hành (đang chạy)",
+    "legacy": "Chuyển hệ thống cũ (đã hủy)",
+    "audit": "Đánh giá bảo mật (chỉ ngày hoàn thành)",
+    "violation": "Không thể phát hành trước khi phát triển xong"
   }
 }

package/package.json

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