@godxjp/ui 27.5.0 → 27.6.0

package/dist/components/data-display/range-timeline.js

@@ -44,7 +44,10 @@ const RangeTimeline = React.forwardRef(
           "div",
           {
             className: "ui-range-timeline-canvas",
-            style: { "--range-timeline-columns": Math.max(1, columns.length) },
+            style: {
+              "--range-timeline-columns": Math.max(1, columns.length),
+              "--range-timeline-units": units
+            },
             children: [
               bands && bands.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
                 /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", "aria-hidden": "true" }),
@@ -52,7 +55,7 @@ const RangeTimeline = React.forwardRef(
                   "div",
                   {
                     className: "ui-range-timeline-column",
-                    style: { flex: band.units },
+                    style: { gridColumn: `span ${band.units}` },
                     children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", children: band.label })
                   },
                   index
@@ -64,15 +67,15 @@ const RangeTimeline = React.forwardRef(
                   "div",
                   {
                     className: "ui-range-timeline-column",
-                    style: { flex: column.units },
+                    style: { gridColumn: `span ${column.units}` },
                     children: /* @__PURE__ */ jsx(Text, { size: "xs", children: column.label })
                   },
                   index
                 )) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", children: [
-                (bordered || columns.some((column) => column.muted)) && // Decorative: the same flex/units layout as the header columns, laid once behind every
-                // row so each vertical rule runs the full body height exactly under its header column.
+                (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
+                // each vertical rule runs the full body height exactly under its header column.
                 /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-grid", "aria-hidden": "true", children: [
                   /* @__PURE__ */ jsx("div", {}),
                   /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", children: columns.map((column, index) => /* @__PURE__ */ jsx(
@@ -80,7 +83,7 @@ const RangeTimeline = React.forwardRef(
                     {
                       className: "ui-range-timeline-grid-column",
                       "data-muted": column.muted ? "true" : void 0,
-                      style: { flex: column.units }
+                      style: { gridColumn: `span ${column.units}` }
                     },
                     index
                   )) })

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "27.5.0",
+  "version": "27.6.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/components/data-entry.prop.d.ts

@@ -745,8 +745,9 @@ export type CalendarProp = DayPickerProps & CalendarFooterProp & {
      *
      * Default `true` — the owner's call, from a real screen: with no ruling the month read as a
      * cloud of numbers and was "very hard to read". Pass `bordered={false}` for the floating-button
-     * look. The line colour is `--calendar-grid-border-color` (default `--input`, the ≥3:1 tier;
-     * the decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
+     * look. The line colour is `--calendar-grid-border-color` (default `--input` at 0.5 alpha,
+     * 1.74:1 light / 1.95:1 dark on the popover; the full `--input` read too dark, and the
+     * decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
      */
     bordered?: boolean;
     /** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */

package/dist/styles/control.css

@@ -2229,13 +2229,13 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
-    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
@@ -2247,7 +2247,7 @@
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
-    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
@@ -2268,8 +2268,8 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day {

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

@@ -1351,8 +1351,10 @@
     padding: var(--space-2);
     border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
   }
+
   .ui-range-timeline-columns {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(var(--range-timeline-units, 1), minmax(0, 1fr));
   }
   .ui-range-timeline-column {
     min-inline-size: 0;
@@ -1390,12 +1392,12 @@
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-column,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-label,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-grid-column {
-    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input)));
+    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
   }
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
     border-block-start: var(--range-timeline-grid-width) solid
-      var(--range-timeline-grid-color, hsl(var(--input)));
+      var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
   }
   .ui-range-timeline-outside {
     position: absolute;

package/docs/data-display/timeline.tsx

@@ -200,6 +200,42 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月をまたぐ日単位の軸（bands）</CardTitle>
+            <CardDescription>
+              9月25日から10月7日まで。bands
+              の月の境界は、その月の1日の列の境界にぴったり重なります。
+              始まりが月の途中なので、最初の月の帯は6日分だけの幅です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              bands={[
+                { label: monthLabel(8), units: 6 },
+                { label: monthLabel(9), units: 7 },
+              ]}
+              columns={Array.from({ length: 13 }, (_, index) => {
+                const date = new Date(Date.UTC(2026, 8, 25 + index));
+                return {
+                  label: new Intl.NumberFormat(locale).format(date.getUTCDate()),
+                  units: 1,
+                  muted: date.getUTCDay() === 0 || date.getUTCDay() === 6,
+                };
+              })}
+              rows={[
+                { id: "migration", label: "移行", start: 3, end: 8 },
+                { id: "october", label: "10月の作業", start: 6, end: 12 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(25 + row.start),
+                endLabel: dayLabel(25 + row.end),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>

package/docs/data-entry/calendar.tsx

@@ -77,9 +77,8 @@ export default function Demo() {
               罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
             </CardTitle>
             <CardDescription>
-              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定
-              --input、背景に対し 3:1
-              以上)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
+              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --input の
+              50%、背景に対し約 1.7:1)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
               罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
               {"{false}"} を渡す。
             </CardDescription>

package/package.json

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

package/scripts/_agent-setup.mjs

@@ -16,12 +16,14 @@ import {
   existsSync,
   mkdirSync,
   readFileSync,
+  realpathSync,
   renameSync,
   statSync,
   unlinkSync,
   writeFileSync,
 } from "node:fs";
-import { basename, dirname, join } from "node:path";
+import { homedir } from "node:os";
+import { basename, dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 /** This package's own root — the source of the version we stamp with. */
@@ -425,6 +427,83 @@ export function ensureMcpJson(root) {
   return created ? "created" : "added";
 }
 
+/**
+ * Registrations of the catalog server OUTSIDE the project — READ-ONLY (gh#722).
+ *
+ * `.mcp.json` is not the only place an agent's MCP servers come from. Claude Code keeps
+ * user-scoped servers in the top-level `mcpServers` of `~/.claude.json` (under
+ * `$CLAUDE_CONFIG_DIR` when that is set) and local-scoped ones — private to one checkout — under
+ * `projects[<absolute project path>].mcpServers` of the same file. Both are live beside the
+ * project's entry. Measured: a user-scoped `godxjp-ui` serving a ≤ 21.0.0 catalog answered next
+ * to the project's pinned `godx-ui`, and an agent took a removed component's page from it.
+ *
+ * That file belongs to the user, spans every project, and is not ours to edit: this only READS
+ * it. A missing, unreadable or malformed file yields nothing, silently. Returns
+ * `{ key, scope, pin }` per entry — never `env`, which is where secrets live.
+ */
+export function findOutOfProjectUiMcp(
+  root,
+  configDir = process.env.CLAUDE_CONFIG_DIR || homedir(),
+) {
+  try {
+    const read = readJsonFile(join(configDir, ".claude.json"));
+    if (read.state !== "ok") return [];
+    const found = [];
+    const collect = (servers, scope) => {
+      if (!servers || typeof servers !== "object" || Array.isArray(servers)) return;
+      for (const [key, entry] of Object.entries(servers)) {
+        if (!runsUiMcp(entry)) continue;
+        const parts = [entry.command, ...(Array.isArray(entry.args) ? entry.args : [])];
+        const pin = parts.find(
+          (part) => typeof part === "string" && /(^|\/)@godxjp\/ui-mcp(@|$)/.test(part),
+        );
+        found.push({ key, scope, pin });
+      }
+    };
+    collect(read.json.mcpServers, "user");
+    const projects = read.json.projects;
+    if (projects && typeof projects === "object" && !Array.isArray(projects)) {
+      const paths = new Set([resolve(root)]);
+      try {
+        paths.add(realpathSync(root));
+      } catch {
+        // A root that cannot be resolved is looked up by its given path only.
+      }
+      for (const path of paths) collect(projects[path]?.mcpServers, "local");
+    }
+    return found;
+  } catch {
+    return [];
+  }
+}
+
+const shellWord = (word) => (/^[\w.@/-]+$/.test(word) ? word : `'${word.replace(/'/g, "'\\''")}'`);
+
+/**
+ * What `sync-rules` and `init-agent` print about out-of-project registrations: key, pin, that it
+ * was left untouched, and the command that updates it. Empty string when there are none.
+ */
+export function outOfProjectUiMcpReport(root, configDir) {
+  const found = findOutOfProjectUiMcp(root, configDir);
+  if (found.length === 0) return "";
+  const expected = mcpServerFor(root).args[0];
+  let out =
+    `\n  @godxjp/ui → @godxjp/ui-mcp is ALSO registered outside this project, in Claude Code's ` +
+    `.claude.json.\n  It answers beside the project's .mcp.json entry (${expected}) and an agent ` +
+    `can call either — the tool names differ only by the key.\n`;
+  for (const { key, scope, pin } of found) {
+    const k = shellWord(key);
+    const runs = /@godxjp\/ui-mcp@\S+$/.test(pin ?? "")
+      ? pin
+      : `${pin ?? "@godxjp/ui-mcp"} (unpinned: resolves the latest release)`;
+    out +=
+      `    • "${key}" (${scope} scope) runs ${runs} — outside the project, left untouched.\n` +
+      `        remove it:  claude mcp remove ${k} -s ${scope}\n` +
+      `        or re-pin:  claude mcp remove ${k} -s ${scope} && claude mcp add ${k} -s ${scope} -- npx ${expected}\n`;
+  }
+  return out;
+}
+
 /** Ensure `.claude/settings.json` has the audit PostToolUse + workflow SessionStart hooks. */
 export function ensureClaudeHooks(root) {
   const path = join(root, ".claude", "settings.json");

package/scripts/cli.mjs

@@ -34,7 +34,11 @@ const HELP = {
   Refresh the package-owned agent files for the installed @godxjp/ui version: the godx-ui entry in
   .mcp.json, the managed CLAUDE.md block, .claude/godxjp-ui-workflow.md and .ai/rules/godxjp-ui.md.
   It is the postinstall step, run by hand — use it when the app installs with ignore-scripts=true,
-  where postinstall never runs and the rules go stale. Silent no-op in CI and when opted out.`,
+  where postinstall never runs and the rules go stale. Silent no-op in CI and when opted out.
+
+  It also READS Claude Code's ~/.claude.json and reports any @godxjp/ui-mcp registered there (user
+  scope, or local scope for this project): key, pin, and the claude mcp command that updates it.
+  That file is outside the project and is never written; env values are never printed.`,
   audit: `godxjp-ui audit [dir …] [--changed] [--format json] [--quiet] [--rules]
 
   Static UI-standardization audit over source (regex, no browser, fast). Exits non-zero on errors.

package/scripts/init-agent-kit.mjs

@@ -4,6 +4,7 @@ import {
   ensureClaudeHooks,
   ensureClaudeMd,
   ensureMcpJson,
+  outOfProjectUiMcpReport,
   shouldSkip,
   writeWorkflowMd,
 } from "./_agent-setup.mjs";
@@ -28,6 +29,8 @@ console.log(
 );
 console.log(`    • .claude/godxjp-ui-workflow.md — ${md ? "created" : "already present"}`);
 console.log(`    • CLAUDE.md — godxjp-ui mandate (${claudeMd})`);
+const outside = outOfProjectUiMcpReport(root);
+if (outside) console.log(outside);
 console.log(`
   The auto-audit hook now runs on every Write/Edit of a .tsx file and feeds findings
   back to the agent — it cannot skip the audit. Restart your agent to load the MCP + hooks.

package/scripts/postinstall.mjs

@@ -8,6 +8,7 @@ import {
   ensureClaudeMd,
   ensureMcpJson,
   ensureConsumerRules,
+  outOfProjectUiMcpReport,
   refreshGuineaPigSkill,
   shouldSkip,
   writeWorkflowMd,
@@ -25,6 +26,10 @@ try {
   if (r.startsWith("left untouched") || r.startsWith("present (custom godx-ui")) {
     console.log(`\n  @godxjp/ui → .mcp.json ${r}\n`);
   }
+  // A registration outside the project is reported whatever the project file says, before any of
+  // the quiet exits below: it is live beside ours and nothing here will ever change it (gh#722).
+  const outside = outOfProjectUiMcpReport(root);
+  if (outside) console.log(outside);
   // The mandate is plain text the agent reads every turn (CLAUDE.md block + workflow file). It
   // changes nothing in the dev loop, so it is installed by default: an agent that never saw the
   // but no mandate). Only the hooks — which DO change the loop — stay behind `init-agent`.