@godxjp/ui 23.4.0 → 23.4.2

package/dist/components/data-display/badge.d.ts

@@ -73,8 +73,21 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
      */
     tabular?: boolean;
     children?: React.ReactNode;
+    /**
+     * antd `Tag` `closable` + `onClose` — one callback when the user activates the × the chip draws.
+     * Named `onRemove` (not `onClose`) because this DS already uses `onClose` on overlays and
+     * `onValueChange` on fields; the chip remover is not a dismiss surface. Omitting it is antd
+     * `closable={false}`: no × is rendered.
+     *
+     * The × accessible name is built from the visible label (`children`, or the resolved `status`
+     * label) via `navigation.filterBar.removeFilter` — pass a string `children` (or plain text
+     * label) so the name quotes the chip, e.g. `getByRole('button', { name: /期限: 今週/ })`.
+     */
+    onRemove?: () => void;
+    /** Disables only the × when `onRemove` is set (FilterBar bar/chip disabled). Label stays visible. */
+    removeDisabled?: boolean;
 }
-export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, onRemove, removeDisabled, ...props }: BadgeProps): React.JSX.Element;
 /**
  * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
  * general-purpose primitive.

package/dist/components/data-display/badge.js

@@ -9,6 +9,7 @@ import {
   Pause,
   Play,
   Trash2,
+  X,
   XCircle
 } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
@@ -100,6 +101,8 @@ function Badge({
   tabular,
   style,
   children,
+  onRemove,
+  removeDisabled,
   ...props
 }) {
   const { t } = useTranslation();
@@ -108,6 +111,7 @@ function Badge({
   const ResolvedIcon = icon === void 0 ? statusDef?.icon : icon;
   const resolvedChildren = children ?? (status ? status in STATUS_MAP ? t(`status.${status}`) : status : void 0);
   const tinted = color != null && color !== "";
+  const removeLabel = typeof children === "string" ? children : typeof resolvedChildren === "string" ? resolvedChildren : void 0;
   return /* @__PURE__ */ jsxs(
     Element,
     {
@@ -116,6 +120,7 @@ function Badge({
       "data-tinted": tinted ? "" : void 0,
       "data-shape": shape ?? "default",
       "data-tabular": tabular ? "" : void 0,
+      "data-removable": onRemove ? "" : void 0,
       className: cn(
         badgeVariants({
           variant: tinted ? "tinted" : variant ?? "default",
@@ -128,7 +133,22 @@ function Badge({
       ...props,
       children: [
         ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { "data-slot": "badge-icon", "aria-hidden": "true" }) : null,
-        resolvedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "badge-label", children: resolvedChildren }) : null
+        resolvedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "badge-label", children: resolvedChildren }) : null,
+        onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "badge-remove",
+            className: "ui-control-inline-affix-action ui-badge-remove",
+            "aria-label": removeLabel != null ? t("navigation.filterBar.removeFilter", { label: removeLabel }) : t("common.delete"),
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove();
+            },
+            disabled: removeDisabled,
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+          }
+        ) : null
       ]
     }
   );

package/dist/components/data-display/data-table.d.ts

@@ -4,10 +4,12 @@ import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangePr
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
- * opts the column into the sort cycle; `align` / `width` / `pin` / `hiddenOnMobile` / `priority`
- * tune layout; `enableHiding` (default true) lists the column in DataTable.ViewOptions.
+ * opts the column into the sort cycle; `align` / `width` / `pin` / `hideBelow` / `hiddenOnMobile` /
+ * `priority` tune layout; `enableHiding` (default true) lists the column in DataTable.ViewOptions.
  */
 export type ColumnDef<T> = ColumnDefProp<T>;
+/** Same resolution DataTable stamps as `data-hide-below` — `hiddenOnMobile: true` → `md`. */
+export declare function resolveColumnHideBelow(col: Pick<ColumnDef<unknown>, "hideBelow" | "hiddenOnMobile">): BreakpointProp | undefined;
 interface DataTableProps<T> {
     data: T[];
     columns: ColumnDef<T>[];

package/dist/components/data-display/data-table.js

@@ -73,6 +73,15 @@ import {
   tableCellPaddingClass,
   tableRowHeightClass
 } from "../../lib/control-styles.js";
+function resolveColumnHideBelow(col) {
+  if (col.hideBelow) return col.hideBelow;
+  if (col.hiddenOnMobile) return "md";
+  return void 0;
+}
+function columnHideBelowProps(col) {
+  const step = resolveColumnHideBelow(col);
+  return step ? { "data-hide-below": step } : {};
+}
 function dataTableFeatures() {
   return tableFeatures({
     rowSortingFeature,
@@ -861,7 +870,6 @@ DataTable.Content = function DataTableContent() {
       columnWidth(col.width).className,
       col.align === "right" && "text-end",
       col.align === "center" && "text-center",
-      col.hiddenOnMobile && "hidden md:table-cell",
       col.ellipsis && "ui-data-table-ellipsis",
       edge === "end" && "ui-data-table-pin-end",
       edge === "start" && "ui-data-table-pin-start"
@@ -991,6 +999,7 @@ DataTable.Content = function DataTableContent() {
                             "data-align": col.headerAlign ?? col.align,
                             "aria-sort": isSortable ? activeDirection ? activeDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
                             ...fixedCellProps(col.key, fixedEdge(col)),
+                            ...columnHideBelowProps(col),
                             style: columnCellStyle(col),
                             className: cn(
                               columnCellClass(col),
@@ -1029,6 +1038,7 @@ DataTable.Content = function DataTableContent() {
                       {
                         priority: col.priority,
                         "data-align": col.align,
+                        ...columnHideBelowProps(col),
                         style: columnCellStyle(col),
                         className: cn(cellPadding, columnCellClass(col)),
                         children: /* @__PURE__ */ jsx(
@@ -1252,6 +1262,7 @@ DataTable.Content = function DataTableContent() {
                                 "data-align": col.align,
                                 title,
                                 ...fixedCellProps(col.key, fixedEdge(col)),
+                                ...columnHideBelowProps(col),
                                 style: columnCellStyle(col),
                                 className: cn(cellPadding, columnCellClass(col)),
                                 children: rendered
@@ -1410,5 +1421,6 @@ DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
 DataTable.RowActions.displayName = "DataTable.RowActions";
 export {
   DataTable,
-  flexRender
+  flexRender,
+  resolveColumnHideBelow
 };

package/dist/components/navigation/filter-bar.js

@@ -131,22 +131,17 @@ function Toolbar({
             role: "group",
             "aria-label": t("navigation.filterBar.appliedFilters"),
             className: "ui-filter-bar-chips",
-            children: chips.map((chip) => /* @__PURE__ */ jsxs("span", { className: "ui-filter-bar-chip", children: [
-              /* @__PURE__ */ jsx(Badge, { variant: "outline", children: chip.label }),
-              onChipRemove && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  disabled: disabled || chip.disabled,
-                  "aria-label": t("navigation.filterBar.removeFilter", {
-                    label: typeof chip.label === "string" ? chip.label : chip.value
-                  }),
-                  onClick: () => onChipRemove(chip.value),
-                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-                }
-              )
-            ] }, chip.value))
+            children: chips.map((chip) => /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: "ui-filter-bar-chip",
+                onRemove: onChipRemove ? () => onChipRemove(chip.value) : void 0,
+                removeDisabled: Boolean(disabled || chip.disabled),
+                children: typeof chip.label === "string" ? chip.label : chip.value
+              },
+              chip.value
+            ))
           }
         ),
         showMeta && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-meta", children: error != null ? /* @__PURE__ */ jsx("p", { role: "alert", className: "ui-filter-bar-error", children: error }) : /* @__PURE__ */ jsx("p", { role: "status", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }) })

package/dist/components/ui/segmented.d.ts

@@ -1,6 +1,23 @@
 import * as React from "react";
+/** Counter pill fields on {@link SegmentedOption} — same vocabulary as `Button` / `Toggle`. */
+type SegmentedCountFields = {
+    /**
+     * Optional count rendered as a borderless pill after the label — do not nest `Badge` in `label`
+     * for this (gh#602): `Badge` `secondary` is `--muted`, which matches the Segmented track.
+     */
+    count?: number | string;
+    /** Cap for numeric `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). */
+    overflowCount?: number;
+    /** Render the pill when numeric `count` is 0. Default `true`. */
+    showZero?: boolean;
+    /**
+     * Localized description of what the count means, folded into the accessible name
+     * (`全件, 54 件` when supplied).
+     */
+    countLabel?: string;
+};
 /** One choice in a {@link Segmented}. */
-export type SegmentedOption = {
+export type SegmentedOption = SegmentedCountFields & {
     /** Wire value — what `onValueChange` reports and what a form submits. */
     value: string;
     /** Visible label. It is also the item's accessible name, so it is required. */
@@ -69,3 +86,4 @@ export type SegmentedProps = SegmentedProp;
  * row each of them means.
  */
 export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProp & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ui/segmented.js

@@ -1,9 +1,32 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
 import { withOwnHitTarget } from "../data-entry/choice-hit-target.js";
 import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { numberFormat } from "../../lib/intl-cache.js";
+function SegmentedCountPill({
+  count,
+  overflowCount = 99,
+  showZero = true,
+  countLabel
+}) {
+  const { locale } = useTranslation();
+  const visible = count != null && count !== "" && (typeof count !== "number" || count !== 0 || showZero);
+  const formatted = React.useMemo(() => {
+    if (count == null || count === "") return "";
+    if (typeof count === "string") return count;
+    const format = numberFormat(locale);
+    return count > overflowCount ? `${format.format(overflowCount)}+` : format.format(count);
+  }, [count, locale, overflowCount]);
+  if (!visible) return null;
+  const spoken = countLabel ? `${formatted} ${countLabel}` : formatted;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "data-slot": "segmented-count", className: "ui-segmented-count", "aria-hidden": "true", children: formatted }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spoken}` })
+  ] });
+}
 const Segmented = React.forwardRef(function Segmented2({
   options,
   value,
@@ -59,7 +82,16 @@ const Segmented = React.forwardRef(function Segmented2({
                 children: option.icon
               }
             ),
-            /* @__PURE__ */ jsx("span", { "data-slot": "segmented-item-label", className: "ui-segmented-item-label", children: option.label })
+            /* @__PURE__ */ jsx("span", { "data-slot": "segmented-item-label", className: "ui-segmented-item-label", children: option.label }),
+            /* @__PURE__ */ jsx(
+              SegmentedCountPill,
+              {
+                count: option.count,
+                overflowCount: option.overflowCount,
+                showZero: option.showZero,
+                countLabel: option.countLabel
+              }
+            )
           ]
         },
         option.value

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

@@ -289,6 +289,11 @@ export type BadgeProp = {
     tabular?: boolean;
     className?: ClassNameProp;
     children?: ChildrenProp;
+    /**
+     * antd `Tag` `closable` + `onClose` — omit for a plain chip; set to draw a × that calls this once.
+     * Port name `onRemove` (not `onClose`) — see {@link Badge} JSDoc and `docs/DESIGN-AUTHORITY.md`.
+     */
+    onRemove?: () => void;
 };
 /** @see CredentialReveal */
 /**

package/dist/props/registry.d.ts

@@ -627,7 +627,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly ColumnDefProp: {
         readonly file: "vocabulary/data.prop.ts";
         readonly category: "data";
-        readonly description: 'DataTable column definition — key/header/render/sortable/align/width/pin/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"';
+        readonly description: 'DataTable column definition — key/header/render/sortable/align/width/pin/hideBelow/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"';
     };
     readonly SelectedIdsProp: {
         readonly file: "vocabulary/data.prop.ts";

package/dist/props/registry.js

@@ -628,7 +628,7 @@ const VOCABULARY_REGISTRY = {
   ColumnDefProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
-    description: 'DataTable column definition \u2014 key/header/render/sortable/align/width/pin/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"'
+    description: 'DataTable column definition \u2014 key/header/render/sortable/align/width/pin/hideBelow/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"'
   },
   SelectedIdsProp: {
     file: "vocabulary/data.prop.ts",

package/dist/props/vocabulary/data.prop.d.ts

@@ -38,6 +38,17 @@ export type ColumnDefProp<T> = {
      * usual case.
      */
     headerAlign?: ColumnAlignProp;
+    /**
+     * Hide this column below a canonical viewport step — the SAME contract as `Flex hideBelow`
+     * (sm 40rem · md 48rem · lg 64rem · xl 80rem). Stamped on both `<th>` and `<td>` as
+     * `data-hide-below`; a media query cannot read a `var()`, so the step values are the tokenized
+     * scale written out in the stylesheet. Wins over `hiddenOnMobile` when both are set.
+     */
+    hideBelow?: BreakpointProp;
+    /**
+     * @deprecated Prefer `hideBelow: 'md'`. When `hideBelow` is omitted, `true` is an alias for
+     * `hideBelow: 'md'`.
+     */
     hiddenOnMobile?: boolean;
     /**
      * List this column in DataTable.ViewOptions (the column show/hide "set view"

package/dist/styles/badge-layout.css

@@ -50,4 +50,29 @@
     height: var(--badge-icon-size);
     flex-shrink: 0;
   }
+
+  [data-slot="badge"][data-removable] {
+    padding-inline-end: var(--badge-space-x-removable);
+  }
+
+  [data-slot="badge-remove"] {
+    flex-shrink: 0;
+    margin-inline-end: var(--badge-remove-offset-inline-end);
+    color: inherit;
+    opacity: var(--badge-remove-rest-alpha);
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  [data-slot="badge-remove"]:hover,
+  [data-slot="badge-remove"]:focus-visible {
+    opacity: var(--badge-remove-hover-alpha);
+  }
+
+  [data-slot="badge-remove"] svg {
+    width: var(--badge-remove-icon-size);
+    height: var(--badge-remove-icon-size);
+  }
 }

package/dist/styles/control.css

@@ -1136,6 +1136,22 @@
     vertical-align: middle;
   }
 
+  .ui-segmented-count {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--segmented-count-min-width);
+    margin-inline-start: var(--segmented-count-gap);
+    border-radius: var(--segmented-count-radius);
+    padding-inline: var(--segmented-count-space-inline);
+    background: var(--segmented-count-background, hsl(var(--primary)));
+    color: var(--segmented-count-color, hsl(var(--primary-foreground)));
+    font-size: var(--segmented-count-font-size);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
   .ui-tag-input {
     display: flex;
     flex-wrap: wrap;

package/dist/styles/focus-ring.css

@@ -18,6 +18,7 @@
     .ui-control-inline-affix-action,
     .ui-search-input-clear,
     .ui-tag-input-remove,
+    .ui-badge-remove,
     .ui-color-picker-input,
     .ui-upload-tile-add,
     .ui-upload-picture-empty,
@@ -78,6 +79,7 @@
       .ui-control-inline-affix-action,
       .ui-search-input-clear,
       .ui-tag-input-remove,
+    .ui-badge-remove,
       .ui-color-picker-input,
       .ui-upload-tile-add,
       .ui-upload-picture-empty,

package/dist/styles/layout.css

@@ -1238,7 +1238,6 @@
   .ui-filter-bar-chip {
     display: inline-flex;
     align-items: center;
-    gap: var(--space-1);
     min-width: 0;
   }
 
@@ -1417,28 +1416,36 @@
 
   @media (width < 40rem) {
     .ui-flex[data-hide-below="sm"],
-    .ui-topbar-item[data-hide-below="sm"] {
+    .ui-topbar-item[data-hide-below="sm"],
+    [data-slot="table-head"][data-hide-below="sm"],
+    [data-slot="table-cell"][data-hide-below="sm"] {
       display: none;
     }
   }
 
   @media (width < 48rem) {
     .ui-flex[data-hide-below="md"],
-    .ui-topbar-item[data-hide-below="md"] {
+    .ui-topbar-item[data-hide-below="md"],
+    [data-slot="table-head"][data-hide-below="md"],
+    [data-slot="table-cell"][data-hide-below="md"] {
       display: none;
     }
   }
 
   @media (width < 64rem) {
     .ui-flex[data-hide-below="lg"],
-    .ui-topbar-item[data-hide-below="lg"] {
+    .ui-topbar-item[data-hide-below="lg"],
+    [data-slot="table-head"][data-hide-below="lg"],
+    [data-slot="table-cell"][data-hide-below="lg"] {
       display: none;
     }
   }
 
   @media (width < 80rem) {
     .ui-flex[data-hide-below="xl"],
-    .ui-topbar-item[data-hide-below="xl"] {
+    .ui-topbar-item[data-hide-below="xl"],
+    [data-slot="table-head"][data-hide-below="xl"],
+    [data-slot="table-cell"][data-hide-below="xl"] {
       display: none;
     }
   }

package/dist/tokens/components/badge.css

@@ -12,6 +12,12 @@
 
   --badge-icon-size: var(--icon-size-xs);
 
+  --badge-space-x-removable: var(--space-1);
+  --badge-remove-offset-inline-end: calc(-1 * var(--space-1));
+  --badge-remove-icon-size: var(--badge-icon-size);
+  --badge-remove-rest-alpha: 0.7;
+  --badge-remove-hover-alpha: 1;
+
   --badge-tint-fill: 18%;
   --badge-tint-edge: 45%;
 

package/dist/tokens/components/segmented.css

@@ -22,4 +22,12 @@
 
   --segmented-item-selected-background: var(--background);
   --segmented-item-selected-shadow: var(--shadow-sm);
+
+  --segmented-count-min-width: var(--button-count-min-width);
+  --segmented-count-space-inline: var(--button-count-space-inline);
+  --segmented-count-font-size: var(--button-count-font-size);
+  --segmented-count-radius: var(--radius-pill);
+  --segmented-count-gap: var(--space-1);
+  --segmented-count-background: initial;
+  --segmented-count-color: initial;
 }

package/docs/DESIGN-AUTHORITY.md

@@ -242,6 +242,17 @@ in page CSS.
 - **A capability this library already has keeps its own name.** antd's `size`
   (`small | middle | large`) IS `density` (`compact | default | comfortable`); antd's `locale` IS
   the `t()` layer. Adding the antd spelling as an alias would be duplication, not parity.
+- **`SegmentedOption.count`.** antd's `SegmentedItemType` has no count field — consumers embed counts
+  in `label`. Nested `Badge` `secondary` is `--muted`, which matches the Segmented track
+  (gh#602, measured 1.00:1). This library adds `count` / `overflowCount` / `showZero` /
+  `countLabel` on `SegmentedOption` with a DS-owned pill (`--segmented-count-*` tokens), same
+  counter vocabulary as `Button` / `Toggle`.
+- **`Badge.onRemove` instead of antd `Tag`'s `closable` + `onClose`.** Semantics match antd's
+  closable tag (a chip that draws its own × and fires one callback). The boolean is folded into
+  prop presence (`onRemove` omitted ⇒ no ×), and the callback is named `onRemove` rather than
+  `onClose`, because `onClose` already means overlay dismiss across Dialog/Drawer and would read
+  as closing a surface, not removing one applied filter chip. Implemented on `Badge` — the DS chip
+  primitive — rather than adding a separate `Tag` export beside `Badge`.
 
 **A knob that only a fork could reach is not parity either.** antd's `components`,
 `filterDropdown`, `classNames`/`styles` semantic maps and `prefixCls` all exist to let a consumer

package/docs/data-entry/segmented-in-filter-row.tsx

@@ -1,11 +1,4 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Segmented } from "@godxjp/ui/data-entry";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -24,17 +17,7 @@ const OPTIONS = [
   { value: "ginou", label: "技能実習", count: 82 },
   { value: "tokutei", label: "特定技能", count: 51 },
   { value: "ikusei", label: "育成就労", count: 0 },
-].map(({ value, label, count }) => ({
-  value,
-  label: (
-    <>
-      {label}
-      <Badge as="span" variant="secondary">
-        {count}
-      </Badge>
-    </>
-  ),
-}));
+];
 
 export default function SegmentedInFilterRow() {
   return (

package/docs/data-entry/segmented.tsx

@@ -1,13 +1,6 @@
 import { useState } from "react";
 
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { FormField, Segmented } from "@godxjp/ui/data-entry";
 import { Text, VisuallyHidden } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -108,17 +101,7 @@ export default function Demo() {
                 { value: "active", label: "実習中", count: 96 },
                 { value: "pending", label: "申請中", count: 12 },
                 { value: "gone", label: "失踪・帰国", count: 0 },
-              ].map(({ value, label, count }) => ({
-                value,
-                label: (
-                  <>
-                    {label}
-                    <Badge as="span" variant="secondary">
-                      {count}
-                    </Badge>
-                  </>
-                ),
-              }))}
+              ]}
             />
           </CardContent>
         </Card>

package/package.json

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

package/scripts/_agent-setup.mjs

@@ -24,13 +24,37 @@ import {
 import { basename, dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
-/** The godxjp-ui MCP server — pulled on demand via npx (no extra dependency to ship). */
 /** This package's own root — the source of the version we stamp with. */
 const SELF_ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
 
-export const MCP_SERVER = { command: "npx", args: ["@godxjp/ui-mcp"] };
 export const MCP_KEY = "godx-ui";
 
+/** @deprecated Prefer `mcpServerFor(root)` — bare npx resolves latest on the registry (gh#543). */
+export const MCP_SERVER = { command: "npx", args: ["@godxjp/ui-mcp"] };
+
+function mcpEntryMatches(a, b) {
+  if (a?.command !== b?.command) return false;
+  const argsA = a?.args ?? [];
+  const argsB = b?.args ?? [];
+  if (argsA.length !== argsB.length || argsA.some((x, i) => x !== argsB[i])) return false;
+  const envA = a?.env ?? {};
+  const envB = b?.env ?? {};
+  const keysA = Object.keys(envA).sort();
+  const keysB = Object.keys(envB).sort();
+  if (keysA.length !== keysB.length || keysA.some((k, i) => k !== keysB[i])) return false;
+  return keysA.every((k) => envA[k] === envB[k]);
+}
+
+function mcpConfigMismatchMessage(root, existing, expected) {
+  const ui = readConsumerUiMetadata(root);
+  const pin = expected.args?.[0] ?? "@godxjp/ui-mcp";
+  const ver = ui?.version ?? "(unknown)";
+  return (
+    `present (custom godx-ui MCP entry — not overwritten; expected ${pin} with ` +
+    `env.GODX_UI_VERSION=${ver} from node_modules/@godxjp/ui)`
+  );
+}
+
 /** Commands wired into the consumer's .claude/settings.json. */
 export const AUDIT_HOOK_CMD = "node node_modules/@godxjp/ui/scripts/audit-hook.mjs";
 export const PRIMER_CMD = "cat .claude/godxjp-ui-workflow.md";
@@ -46,6 +70,31 @@ const SUGGESTED_HOOKS = {
 /** The per-session workflow mandate the SessionStart hook injects into the agent. */
 export const KIT_VERSION = readJson(join(SELF_ROOT, "package.json"))?.version ?? "0.0.0";
 
+/**
+ * Read the consumer's installed @godxjp/ui metadata (postinstall runs with UI already in
+ * node_modules). Returns null when absent — caller falls back to this package's release train.
+ */
+export function readConsumerUiMetadata(root) {
+  const uiPkg = readJson(join(root, "node_modules/@godxjp/ui/package.json"));
+  if (!uiPkg?.version) return null;
+  return {
+    version: String(uiPkg.version),
+    godxUiMcp: uiPkg.godxUiMcp ? String(uiPkg.godxUiMcp) : String(uiPkg.version),
+  };
+}
+
+/**
+ * MCP launch config for a consumer root: pin @godxjp/ui-mcp to godxUiMcp from the installed UI
+ * package and pass the real UI version via env (gh#543 — MCP must not read the repo to learn it).
+ */
+export function mcpServerFor(root) {
+  const meta = readConsumerUiMetadata(root);
+  const mcpPin = meta?.godxUiMcp ?? KIT_VERSION;
+  const server = { command: "npx", args: [`@godxjp/ui-mcp@${mcpPin}`] };
+  if (meta?.version) server.env = { GODX_UI_VERSION: meta.version };
+  return server;
+}
+
 const STAMP = (v) => `<!-- godxjp-ui:version ${v} -->`;
 const STAMP_RE = /<!-- godxjp-ui:version ([^\s]+) -->/;
 
@@ -291,13 +340,11 @@ export function refreshBlock(current, next, startMarker, endMarker) {
 
 export function ensureMcpJson(root) {
   const path = join(root, ".mcp.json");
+  const expected = mcpServerFor(root);
+  const suggested = JSON.stringify({ mcpServers: { [MCP_KEY]: expected } }, null, 2) + "\n";
   const read = readJsonFile(path);
   if (read.state !== "ok" && read.state !== "missing") {
-    return refuseAndSuggest(
-      path,
-      JSON.stringify({ mcpServers: { [MCP_KEY]: MCP_SERVER } }, null, 2) + "\n",
-      READ_FAILURE[read.state],
-    );
+    return refuseAndSuggest(path, suggested, READ_FAILURE[read.state]);
   }
   const json = read.state === "ok" ? read.json : {};
   if (
@@ -306,16 +353,17 @@ export function ensureMcpJson(root) {
       typeof json.mcpServers !== "object" ||
       Array.isArray(json.mcpServers))
   ) {
-    return refuseAndSuggest(
-      path,
-      JSON.stringify({ mcpServers: { [MCP_KEY]: MCP_SERVER } }, null, 2) + "\n",
-      "`mcpServers` is not an object",
-    );
+    return refuseAndSuggest(path, suggested, "`mcpServers` is not an object");
   }
   json.mcpServers = json.mcpServers ?? {};
-  if (json.mcpServers[MCP_KEY]) return "present";
+  if (json.mcpServers[MCP_KEY]) {
+    if (!mcpEntryMatches(json.mcpServers[MCP_KEY], expected)) {
+      return mcpConfigMismatchMessage(root, json.mcpServers[MCP_KEY], expected);
+    }
+    return "present";
+  }
   const created = read.state === "missing";
-  json.mcpServers[MCP_KEY] = MCP_SERVER;
+  json.mcpServers[MCP_KEY] = expected;
   writeFileAtomic(path, JSON.stringify(json, null, 2) + "\n");
   return created ? "created" : "added";
 }

package/scripts/postinstall.mjs

@@ -22,7 +22,7 @@ try {
   const r = ensureMcpJson(root);
   // A refusal is a full sentence, not one of the three status words — say it on its own line
   // rather than folding it into "MCP in .mcp.json (…)", where it would read as a success.
-  if (r.startsWith("left untouched")) {
+  if (r.startsWith("left untouched") || r.startsWith("present (custom godx-ui")) {
     console.log(`\n  @godxjp/ui → .mcp.json ${r}\n`);
   }
   // The mandate is plain text the agent reads every turn (CLAUDE.md block + workflow file). It

package/scripts/ui-audit.mjs

@@ -797,12 +797,76 @@ function walk(dir, acc = []) {
   return acc;
 }
 
+/** True when `index` sits inside an unclosed backtick template starting at or after `from`. */
+function insideTemplateLiteral(source, from, index) {
+  let ticks = 0;
+  for (let i = from; i < index; i++) {
+    if (source[i] === "\\") {
+      i++;
+      continue;
+    }
+    if (source[i] === "`") ticks++;
+  }
+  return ticks % 2 === 1;
+}
+
+/** `<TurnResult>(` is a generic call, not JSX — scanning after its `>` hits `` `/path/${id}` ``. */
+function isGenericTypeBeforeCall(source, openStart, closeIndex) {
+  const name = source.slice(openStart + 1, closeIndex);
+  if (!/^[A-Z][\w]*$/.test(name)) return false;
+  return /^\s*\(/.test(source.slice(closeIndex + 1));
+}
+
+/**
+ * Hand currency in JSX text after `>`: `>¥{amount}`, `>${price}`, `$1,200` — not `` `/chat/${id}` ``.
+ * `$` immediately before `{` inside a template literal is interpolation, never a price sigil.
+ */
+function findHandCurrencyInJsxText(source, from) {
+  for (let i = from; i < source.length; i++) {
+    const char = source[i];
+    if (char === "<") break;
+    if (char === "{") break;
+    if (char === "`") {
+      i++;
+      while (i < source.length) {
+        if (source[i] === "\\") {
+          i += 2;
+          continue;
+        }
+        if (source[i] === "`") break;
+        i++;
+      }
+      continue;
+    }
+    if (char === "$") {
+      if (insideTemplateLiteral(source, from, i)) continue;
+      const digits = source.slice(i).match(/^\$(?:\d[\d,]*(?:\.\d+)?|\d)/);
+      if (digits) return { end: i + digits[0].length };
+      const brace = source.slice(i).match(/^\$\s*\{/);
+      if (brace && !insideTemplateLiteral(source, from, i)) {
+        return { end: i + brace[0].length };
+      }
+      continue;
+    }
+    if (/[¥€£₫]/.test(char)) {
+      if (insideTemplateLiteral(source, from, i)) continue;
+      const brace = source.slice(i).match(/^[¥€£₫]\s*\{/);
+      if (brace) return { end: i + brace[0].length };
+    }
+  }
+  return null;
+}
+
 /** Match real JSX text after a balanced opening tag, including props with comparisons. */
 function* currencyMatches(source) {
   for (const opening of source.matchAll(/<(?:[A-Za-z][\w.:]*\b|(?=>))/g)) {
     const end = jsxOpeningEnd(source, opening.index);
-    const text = source.slice(end + 1).match(/^[^<>{}]*[¥$€£₫]\s*\{/);
-    if (text) yield { 0: source.slice(opening.index, end + 1) + text[0], index: opening.index };
+    if (end >= source.length) continue;
+    if (isGenericTypeBeforeCall(source, opening.index, end)) continue;
+    const hit = findHandCurrencyInJsxText(source, end + 1);
+    if (hit) {
+      yield { 0: source.slice(opening.index, hit.end), index: opening.index };
+    }
   }
   yield* source.matchAll(/\}\s*円\s*</g);
 }