@godxjp/ui 28.10.0 → 28.13.0

package/agent/components.json

@@ -441,6 +441,11 @@
         "name": "allowEmpty",
         "type": "[boolean,boolean]"
       },
+      {
+        "description": "A PAIR, one per endpoint — TimePicker's single-string `placeholder` is omitted from this type on purpose, because a range has two empty fields and one string would label both of them the same. Route both through t().",
+        "name": "placeholder",
+        "type": "[string,string]"
+      },
       {
         "description": "Native names are name_from and name_to.",
         "name": "name",
@@ -3796,17 +3801,22 @@
     ]
   },
   {
-    "example": "import { Clock } from \"lucide-react\";\nimport {\n  ServiceCatalogCta,\n  ServiceLauncherCard,\n  ServiceLauncherCardSkeleton,\n} from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { ResponsiveGrid } from \"@godxjp/ui/layout\";\n\n// ResponsiveGrid owns the canonical 3 → 2 → 1 ladder; the page writes no tracks.\n<ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>\n  {loading\n    ? services.map((s) => <ServiceLauncherCardSkeleton key={s.id} label={t(\"loadingService\")} />)\n    : services.map((s) => (\n        <ServiceLauncherCard\n          key={s.id}\n          icon={Clock}\n          title={s.name}\n          statusLabel={s.accessLabel}\n          statusTone={s.accessTone}\n          description={s.description}\n          metadata={s.hostnameAndPlan}\n          disabledReason={s.blockedReason}\n          action={\n            <Button asChild={s.canLaunch} disabled={!s.canLaunch}>\n              {s.canLaunch ? <a href={s.launchUrl}>{t(\"launch\")}</a> : t(\"launch\")}\n            </Button>\n          }\n        />\n      ))}\n  <ServiceCatalogCta\n    title={t(\"addFromCatalog\")}\n    action={<Button variant=\"outline\">{t(\"viewCatalog\")}</Button>}\n  />\n</ResponsiveGrid>",
+    "example": "import { Clock } from \"lucide-react\";\nimport {\n  ServiceCatalogCta,\n  ServiceLauncherCard,\n  ServiceLauncherCardSkeleton,\n} from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { ResponsiveGrid } from \"@godxjp/ui/layout\";\n\n// ResponsiveGrid owns the canonical 3 → 2 → 1 ladder; the page writes no tracks.\n<ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>\n  {loading\n    ? services.map((s) => <ServiceLauncherCardSkeleton key={s.id} label={t(\"loadingService\")} />)\n    : services.map((s) => (\n        <ServiceLauncherCard\n          key={s.id}\n          icon={Clock}\n          // The uploaded mark when there is one; the tile falls back to `icon` when there is not,\n          // and again if the file behind the URL has gone away.\n          logo={s.logoUrl ?? undefined}\n          title={s.name}\n          statusLabel={s.accessLabel}\n          statusTone={s.accessTone}\n          description={s.description}\n          metadata={s.hostnameAndPlan}\n          disabledReason={s.blockedReason}\n          action={\n            <Button asChild={s.canLaunch} disabled={!s.canLaunch}>\n              {s.canLaunch ? <a href={s.launchUrl}>{t(\"launch\")}</a> : t(\"launch\")}\n            </Button>\n          }\n        />\n      ))}\n  <ServiceCatalogCta\n    title={t(\"addFromCatalog\")}\n    action={<Button variant=\"outline\">{t(\"viewCatalog\")}</Button>}\n  />\n</ResponsiveGrid>",
     "group": "data-display",
     "importPath": "@godxjp/ui/data-display",
     "name": "ServiceLauncherCard",
     "props": [
       {
-        "description": "Decorative service glyph rendered in the canonical semantic icon surface.",
+        "description": "Decorative glyph for the KIND of service, rendered in the canonical semantic icon surface. Stays required because it is also what `logo` falls back to when an upload is missing or broken.",
         "name": "icon",
         "required": true,
         "type": "LucideIcon"
       },
+      {
+        "description": "URL of the service's OWN uploaded mark (the PNG/WebP an administrator uploaded). When it loads it replaces `icon` in the medallion, in the glyph's exact box (--card-service-launcher-icon-glyph-size, object-fit: contain). It is a fallback chain, not a switch: the tile renders `icon` while the URL is in flight and KEEPS rendering `icon` if the URL 404s or is empty — a broken logo never reaches the DOM as an <img>. Decorative (alt=\"\", medallion aria-hidden), so there is no logoAlt prop: the service name is already beside it.",
+        "name": "logo",
+        "type": "string"
+      },
       {
         "description": "Real downstream service display name.",
         "name": "title",
@@ -3865,13 +3875,15 @@
     "subParts": [
       "ServiceLauncherCardSkeleton"
     ],
-    "tagline": "Token-owned downstream-service launcher tile with semantic icon, status, metadata, action, disabled reason, matching skeleton, and companion catalog CTA.",
+    "tagline": "Token-owned downstream-service launcher tile with an uploaded service logo (falling back to a semantic icon), status, metadata, action, disabled reason, matching skeleton, and companion catalog CTA.",
     "usage": [
       "DO provide status, hostname, plan, access state and action from the product's real API contract. ServiceLauncherCard deliberately performs no entitlement or URL inference — it has no href/entitlement/available prop at all.",
       "DO own the layout with ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }} — the canonical 3→2→1 launcher grid. ResponsiveGrid queries its OWN container (40/48/64rem), so never hand-write grid-template-columns or a media query in the page. The shorthand columns={3} also works but widens to 2 columns earlier (40rem).",
       "DO render ServiceLauncherCard directly as a grid child; it already owns its Card shell, its 36px medallion (--control-height-lg tier) and the canonical internal rhythm.",
       "DO replace it with ServiceLauncherCardSkeleton while loading (it carries a required `label` and aria-busy, and deliberately opens no live region). Use ServiceCatalogCta as the peer tile only when a real catalog/add route exists.",
       "DO keep `metadata` to machine identifiers (hostname · plan) — it is the only mono line. Sentences belong in `description` / `disabledReason`.",
+      "DO pass BOTH `logo` and `icon` when a service may have an uploaded mark: `logo={s.logoUrl ?? undefined}` with `icon` as the kind glyph. `icon` is not optional and must not be treated as redundant — it is the tile a freshly created service, and a service whose logo file has been deleted, actually shows.",
+      "DON'T wrap an <img> in a component to squeeze it through `icon`, and DON'T style the medallion to fit a picture. `logo` sizes the image to the glyph's own token, so a grid mixing logo tiles and glyph tiles keeps one optical weight.",
       "DON'T recreate launcher geometry with page-local CSS, utility padding, grid tracks, or a hand-built Card hierarchy. Retune it with the --card-service-launcher-* tokens instead.",
       "DON'T show LIVE, a hostname, subscribed plan, or launch action merely because a service is active in the global catalog."
     ],
@@ -4359,12 +4371,23 @@
         "name": "onAcknowledge",
         "type": "() => void"
       },
+      {
+        "description": "Copy on the button `onAcknowledge` creates. Defaults to a localized \"I've saved it\" — override it when the confirmation claims something more specific than having read the secret (\"保管しました\", \"Stored in 1Password\"). Consumer-owned wording: route it through t().",
+        "name": "acknowledgeLabel",
+        "type": "React.ReactNode"
+      },
       {
         "defaultValue": "false",
         "description": "Offer a download-as-file button.",
         "name": "downloadable",
         "type": "boolean"
       },
+      {
+        "defaultValue": "\"credential.txt\"",
+        "description": "Name of the file `downloadable` writes. The default is deliberately anonymous; set it when the user will hold several at once (`api-key-prod.txt`) so the saved files are still telling apart in a downloads folder.",
+        "name": "downloadFileName",
+        "type": "string"
+      },
       {
         "defaultValue": "\"md\"",
         "description": "Action button size tier.",
@@ -4376,6 +4399,16 @@
         "description": "Caution banner severity.",
         "name": "tone",
         "type": "\"warning\" | \"destructive\" | \"info\""
+      },
+      {
+        "description": "DOM id on the root. Useful here because the surface is usually inside a Dialog: it is what a `aria-describedby` on the dialog, or a deep link back to the issued credential, can point at.",
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "description": "Accessible name for the credential region when `label` is not set or is a non-string node. `label` is the VISIBLE caption and already names the region when it is a plain string, so reach for this only when the caption is rich content or when the surrounding dialog title is the only thing saying which secret this is.",
+        "name": "aria-label",
+        "type": "string"
       }
     ],
     "related": [
@@ -5828,6 +5861,11 @@
         "description": "Disable search input and clearing.",
         "name": "disabled",
         "type": "boolean"
+      },
+      {
+        "description": "Class on the `<input>` itself. SearchInput renders a WRAPPER (label, icon, clear button, input), so `className` lands on that wrapper and never reaches the field — this is the second handle, for the case where the field and its chrome need different treatment. Layout and colour still belong to tokens; use it for the rare geometry a token cannot reach.",
+        "name": "inputClassName",
+        "type": "string"
       }
     ],
     "related": [
@@ -6303,6 +6341,12 @@
         "name": "id",
         "type": "string"
       },
+      {
+        "defaultValue": "false",
+        "description": "ANNOUNCES the requirement; it does not enforce it. react-aria's Switch omits `isRequired`, and a switch is never the target of native constraint validation in this library, so this writes `aria-required=\"true\"` onto the real input and stops there. The form layer (FormField / your schema) still owns whether an unflipped switch blocks submit — pairing this with nothing that validates is how a screen reader ends up promising a check the form never makes.",
+        "name": "required",
+        "type": "boolean"
+      },
       {
         "defaultValue": "false",
         "description": "Disable the toggle.",
@@ -6535,6 +6579,12 @@
         "name": "id",
         "type": "string"
       },
+      {
+        "defaultValue": "false",
+        "description": "Keeps its HTML spelling here and becomes react-aria's `isRequired`, so unlike Switch — where the same prop only ANNOUNCES the requirement — this is real constraint validation on the underlying input: an unchecked box blocks native form submission. The consent checkbox is the case it exists for. It does not render an asterisk; the required MARK belongs to FormField's label.",
+        "name": "required",
+        "type": "boolean"
+      },
       {
         "description": "antd `<Checkbox>label</Checkbox>` — the INLINE label: box first, label at inline-end on the same line, the same markup as a `Checkbox.Group` option. A real `<label for>`: clicking the text toggles the box and the text is its accessible name. `className` then styles the labelled row.",
         "name": "children",
@@ -7675,6 +7725,16 @@
         "description": "Ant Design `onTabScroll`, fired whenever the trigger strip's own scrollport moves — a swipe, a wheel, or the component re-pinning the active trigger (antd reports its own re-pins too). LOGICAL VALUES instead of antd's `left | right | top | bottom`: two of those four are just the other axis of the same event, and upstream's pair is read off the sign of an inner transform, so in an RTL strip its `left` means the opposite of what it means in LTR. `start`/`end` say the same thing on whichever axis and in whichever direction the strip is written. Only fires for the `items` API, which is the path that owns the strip element.",
         "name": "onTabScroll",
         "type": "(info: { direction: \"start\" | \"end\" }) => void"
+      },
+      {
+        "description": "Class on the TRIGGER STRIP (`TabsList`) under the `items` API — the handle that composing the tree manually gives you as `<TabsList className>`. `className` reaches only the root, which holds the strip AND the panels, so anything meant for the bar alone belongs here. Almost always unnecessary: placement, size, centring and the card rail are props and `--tabs-*` tokens.",
+        "name": "listClassName",
+        "type": "string"
+      },
+      {
+        "description": "Class on EVERY panel (`TabsContent`) under the `items` API. It is written so it can WIN: the joined card body travels to CSS as `data-bodied` on the root rather than as a class, precisely so a consumer class on the panel is not fighting a utility the component already claimed (gh#762). Reach for the `bodied` prop and the `--tabs-panel-*` tokens first — this is for the geometry no token exposes.",
+        "name": "contentClassName",
+        "type": "string"
       }
     ],
     "related": [
@@ -8734,6 +8794,11 @@
         "description": "Search query change (antd `showSearch.onSearch`).",
         "name": "onSearchChange",
         "type": "(query: string) => void"
+      },
+      {
+        "description": "Accessible name for the COMBOBOX TRIGGER — the element a keyboard user lands on, not the panel. Inside a FormField it is injected for you and you do not pass it; on a bare Cascader (a toolbar scope filter, a compact drilldown with no label row) it is the only name the control has, and cardinal rule 227 requires one. Route it through t(). The rest of the field-a11y contract — aria-labelledby / describedby / errormessage / invalid / required — is accepted on every form-capable component here and is FormField's to wire.",
+        "name": "aria-label",
+        "type": "string"
       }
     ],
     "related": [
@@ -9094,6 +9159,11 @@
         "name": "className",
         "type": "string"
       },
+      {
+        "description": "Lands on the `role=\"group\"` shuttle container, not on any one input — a two-pane shuttle has no single labelable control, so this is what a FormField label points at. FormField injects it; pass it yourself only for a bare Transfer.",
+        "name": "id",
+        "type": "string"
+      },
       {
         "description": "Controlled selection state as a tuple: index 0 = keys checked in the source panel, index 1 = keys checked in the target panel. Omit to use internal (uncontrolled) selection state. Must be paired with `onSelectChange` when provided.",
         "name": "selectedKeys",
@@ -9208,6 +9278,11 @@
         "name": "className",
         "type": "string"
       },
+      {
+        "description": "Lands on the native `<input type=\"file\">`, NOT on the wrapper — the hidden input is the semantic focus target, so this is what makes a `<label htmlFor>` (or FormField, which injects it) actually focus the picker. Putting it on the visible dropzone instead is the usual reason a label click does nothing.",
+        "name": "id",
+        "type": "string"
+      },
       {
         "description": "Custom button label for variant='button'. Falls back to the i18n 'Upload file' string.",
         "name": "children",
@@ -12075,6 +12150,41 @@
         "description": "Main-axis alignment of the whole code row (groups + separators) inside the field. `center` is the canonical auth challenge. Before this existed, every consumer wrapped the OTP in their own flex-centring div — do not. A service that wants all code fields centred sets `--otp-container-align` once instead.",
         "name": "align",
         "type": "\"start\" | \"center\" | \"end\""
+      },
+      {
+        "description": "Fires ONCE the last slot fills, whether the user typed it or pasted the whole code. This is the auto-submit hook: a 2FA challenge with a visible submit button is a step nobody wants, and the alternative — watching `value.length === maxLength` in an effect — re-fires on every re-render. Keep the submit button anyway for the paste-then-correct case.",
+        "name": "onComplete",
+        "type": "(value: string) => void"
+      },
+      {
+        "description": "Rewrites CLIPBOARD text before it reaches the field. Distinct from `formatter`, which normalises every value: this one only sees a paste, which is where the junk arrives — `\"123 456\"`, `\"code: 123456\"`, a copied SMS line. Note the order the field applies them: `pattern` is matched against the RAW keystroke first, so a pattern must accept what a user actually types, not only what these two produce.",
+        "name": "pasteTransformer",
+        "type": "(pasted: string) => string"
+      },
+      {
+        "description": "Class on the ROW container `input-otp` renders (the slots' flex parent), which `className` cannot reach — `className` lands on the hidden input, because that is the real field. Prefer `align` and the `--otp-*` tokens; this is the vendored escape hatch underneath them.",
+        "name": "containerClassName",
+        "type": "string"
+      },
+      {
+        "description": "`input-otp`'s answer to the 1Password / LastPass badge that browsers float over a code field and that covers the last slot. `increase-width` (its default) reserves room so the badge sits beside the row; `none` turns the accommodation off, which is what a row already centred by `align` usually wants. Pure layout — it changes no value and no keyboard behaviour.",
+        "name": "pushPasswordManagerStrategy",
+        "type": "\"increase-width\" | \"none\""
+      },
+      {
+        "description": "The `<noscript>` stylesheet `input-otp` injects so the slots are still visible with JS disabled. Pass `null` to suppress it — the one real reason being a CSP that forbids inline styles and that `nonce` cannot satisfy. Leave it alone otherwise.",
+        "name": "noScriptCSSFallback",
+        "type": "string | null"
+      },
+      {
+        "description": "CSP nonce stamped on the stylesheet `input-otp` injects. Required only under a `style-src 'nonce-…'` policy, where the field otherwise renders unstyled and the console reports a blocked inline style. Pass the same nonce the document was served with.",
+        "name": "nonce",
+        "type": "string"
+      },
+      {
+        "description": "`input-otp`'s headless mode: you draw the entire row from the slot state instead of composing InputOTPGroup / InputOTPSlot. It is mutually exclusive with `children` — the vendor types the two as a union and this component keeps that union. Reaching for it means giving up the slot styling, the group outline and the separator this package owns, so it is the last resort, not a customisation point.",
+        "name": "render",
+        "type": "(props: InputOTPRenderProps) => React.ReactNode"
       }
     ],
     "related": [
@@ -13842,6 +13952,16 @@
         "name": "appearance",
         "type": "\"bar\" | \"icon\""
       },
+      {
+        "description": "Which way the panel opens. DERIVED from `appearance` when unset — `bottom` in a bar (the panel drops below the trigger, the only direction that does not cover the bar itself), `right` otherwise, because a rail is vertical and its panel goes beside it. State it when the chrome can be RE-DOCKED: `appearance` says the trigger is NOT in a bar, and it cannot say which way is out — a rail pinned to the top edge is not a bar and still opens downward. Measured without it, an embedded bar trigger at (2,50) put its panel at (12,90), lying over the host application's sidebar. Not used by `responsive=\"fullscreen\"`, which has no side.",
+        "name": "side",
+        "type": "\"top\" | \"right\" | \"bottom\" | \"left\""
+      },
+      {
+        "description": "Where the panel sits along the `side` edge — the cross-axis half of the same decision, and derived the same way: `end` in a bar (the Workspace shape, flush with the bar's end), `start` otherwise (aligned to the rail trigger's own start). State it alongside `side` when you state either.",
+        "name": "align",
+        "type": "\"start\" | \"center\" | \"end\""
+      },
       {
         "description": "Controlled open state.",
         "name": "open",
@@ -14030,6 +14150,11 @@
         "description": "Accessible table name (localized default).",
         "name": "label",
         "type": "string"
+      },
+      {
+        "description": "DOM id on the grid root. Worth setting on a permissions page that also renders a summary or a legend elsewhere: it is the anchor those can point at, and the stable handle for an E2E selector that must not depend on the localized `label`.",
+        "name": "id",
+        "type": "string"
       }
     ],
     "related": [
@@ -14120,6 +14245,16 @@
         "description": "Override the localized radio labels (e.g. domain wording like 全店舗).",
         "name": "allLabel / selectedLabel",
         "type": "ReactNode"
+      },
+      {
+        "description": "Native form name, forwarded to the MODE radio group — the all / selected choice is what submits under it. The checked branch ids are not native fields; they live in the single `{ mode, branchIds }` value and are yours to serialise.",
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "description": "DOM id on the picker root, and the SEED for the ids beneath it — the validation message is `${id}-error`, which is what `aria-errormessage` points at. Left out, a `useId`-based id is generated, so the association still holds; set it when a server-rendered page needs those ids to be stable.",
+        "name": "id",
+        "type": "string"
       }
     ],
     "related": [
@@ -14202,6 +14337,11 @@
         "description": "Forwarded to MasterDetail (localized region labels by default). Never re-derive tracks or breakpoints in the app.",
         "name": "railWidth / masterViewport / collapseBelow / masterLabel / detailLabel",
         "type": "MasterDetail geometry + region labels"
+      },
+      {
+        "description": "DOM id on the panel root — the two-region MasterDetail wrapper, not the rail or the detail. It is the handle for a deep link onto the roles panel of a settings page, and for an E2E selector that must survive `masterLabel` being localized.",
+        "name": "id",
+        "type": "string"
       }
     ],
     "related": [
@@ -15110,6 +15250,31 @@
         "description": "Child mode: visible trigger; upload runs through a hidden input beside it.",
         "name": "children",
         "type": "ReactElement"
+      },
+      {
+        "description": "antd Upload `onRemove`, narrowed to the attachment row. RETURNING `false` (or a promise of it) VETOES the removal and the card stays — anything else, including `undefined`, lets it go. That is how you gate a removal behind a confirm dialog without owning `items` yourself. It is awaited, so an async guard works.",
+        "name": "onRemove",
+        "type": "(item: AttachmentsItemProp) => boolean | void | Promise<boolean | void>"
+      },
+      {
+        "description": "Ant Design X `classNames` — per-part classes (root, list, card, file, upload, placeholder). DECLARED AND FORWARDED, and the only semantic part map in this package: docs/DESIGN-AUTHORITY.md rules that antd's `classNames`/`styles` maps are NOT adopted because this library answers that layer with tokens (cardinal rule #45), and Attachments is the one component that carries them anyway. Recorded there as a contradiction, not a pattern — do not copy it onto another component, and retune through `--attachments-*` instead.",
+        "name": "classNames",
+        "type": "Partial<Record<AttachmentsSemanticProp, string>>"
+      },
+      {
+        "description": "Ant Design X `styles` — the same part map as `classNames`, as inline styles, and under the same standing ruling against it. Inline styles beat every stylesheet rule, so this is the one handle in the package that can take a part off the design system entirely. The `--attachments-*` tokens are the supported route.",
+        "name": "styles",
+        "type": "Partial<Record<AttachmentsSemanticProp, React.CSSProperties>>"
+      },
+      {
+        "description": "Ant Design X `rootClassName` — the outermost node. It is not a duplicate of `className`: in the full-screen-drop mode (`getDropContainer`) the outermost node is the OVERLAY rather than the inline tray, which is why antd separates the two. Both are applied.",
+        "name": "rootClassName",
+        "type": "string"
+      },
+      {
+        "description": "ACCEPTED AND INERT. Ant Design X forwards it to its own Image preview; this package has no Image primitive yet, so the prop exists only so an Ant X call site type-checks, and passing it changes nothing on screen. Do not reach for it expecting a preview knob.",
+        "name": "imageProps",
+        "type": "Record<string, unknown>"
       }
     ],
     "related": [
@@ -15127,7 +15292,8 @@
     "usage": [
       "DO keep antd field names on each item (`thumbUrl`, `originFileObj`, `uid`) — an Ant X call site should compile unchanged.",
       "DO use `ref.select({ accept, multiple })` to open the picker programmatically (Ant X 2.0).",
-      "DON'T expect `styles`/`classNames` from Ant X — retune through `--attachments-*` tokens."
+      "Ant X's `classNames` / `styles` / `rootClassName` ARE declared and forwarded, although docs/DESIGN-AUTHORITY.md rules that antd's semantic part maps are not adopted here. The older note in this slot said not to expect them at all; the type has never agreed with it, so an agent reading only the catalog was told the opposite of what autocomplete offered. Retune through the `--attachments-*` tokens, and treat the maps as a recorded contradiction on this one component rather than a pattern to reuse.",
+      "The card is a FIXED box — 268x68 (Ant X's own), from `--attachments-card-size` (inline) and `--attachments-card-block-size`. The block size is also the `+` tile's square and the `overflow=\"scrollY\"` one-row viewport, so retune it once and all three follow. The file input is `sr-only`: never style it visible."
     ],
     "useCases": [
       "The attachment tray above a ChatComposer in an assistant surface.",

package/agent/index.json

@@ -4,7 +4,7 @@
     "components": 170,
     "patterns": 19,
     "rules": 47,
-    "tokens": 1684,
+    "tokens": 1685,
     "vocabulary": 14
   },
   "files": [
@@ -48,9 +48,9 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v28.10.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v28.13.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
-  "version": "28.10.0"
+  "version": "28.13.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 170 components, 1684 design tokens,
-> 47 cardinal rules. This file is the entry point for AI agents. Catalog version 28.10.0.
+> A Japanese-enterprise React design system: 170 components, 1685 design tokens,
+> 47 cardinal rules. This file is the entry point for AI agents. Catalog version 28.13.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@28.10.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@28.13.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v28.10.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v28.13.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -155,62 +155,67 @@
     "value": "var(--space-inline-lg)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Gap between cards in the list. Ant X: `marginXS` = 8px.",
     "name": "--attachments-gap",
     "value": "var(--space-2)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "THE CARD BOX. Ant X's file card is a fixed 268x68 chip: wide enough for a name plus one line * of description, short enough that a row of them reads as a tray and not as a list. Both axes * are fixed there and fixed here — the block size is what the `+` tile and the `scrollY` * one-row viewport are measured against, so it has three readers, not one. Ant X `width: 268`",
     "name": "--attachments-card-size",
-    "value": "var(--upload-tile-size)"
+    "value": "16.75rem"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Ant X `cardHeight` = 14 * 1.5714 * 2 + 12 + 12 = 68",
+    "name": "--attachments-card-block-size",
+    "value": "4.25rem"
+  },
+  {
+    "description": "Ant X `token.borderRadius` = 6 ≡ --radius",
     "name": "--attachments-card-radius",
-    "value": "var(--upload-tile-radius)"
+    "value": "var(--radius-lg)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Ant X `marginSM` — glyph to name",
     "name": "--attachments-card-gap",
-    "value": "var(--upload-tile-space-gap)"
+    "value": "var(--space-3)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "THE PLACEHOLDER — the whole control while the list is empty, and the drop target. Ant X `token.padding` = 16",
     "name": "--attachments-placeholder-space-inset",
-    "value": "var(--upload-dropzone-space-inset)"
+    "value": "var(--space-4)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Ant X `token.borderRadius` = 6 ≡ --radius",
     "name": "--attachments-placeholder-radius",
-    "value": "var(--upload-dropzone-radius)"
+    "value": "var( --radius-lg )"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Ant X's placeholder mark is `fontSizeHeading2` = 30px, which is not a step of this repo's * nine-value icon scale (gh#326) and whose neighbours are 24 and 36. It stays on the step the * frozen table in `src/tokens/__tests__/icon-size-scale.test.ts` already records for it — the * same mark Upload's dropzone draws, which is the surface a reader meets this one beside.",
     "name": "--attachments-placeholder-icon-size",
-    "value": "var(--upload-dropzone-icon-size)"
+    "value": "var(--icon-size-3xl)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. * * EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not * always so: all twelve of these resolved, were generated into the MCP catalog, were described to * every consumer — and nothing anywhere read one of them, because the component had no stylesheet * at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` * (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and * mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences.",
     "name": "--attachments-placeholder-title-font-size",
-    "value": "var(--font-size-sm, var(--font-size-base))"
+    "value": "var(--font-size-base)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. * * EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not * always so: all twelve of these resolved, were generated into the MCP catalog, were described to * every consumer — and nothing anywhere read one of them, because the component had no stylesheet * at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` * (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and * mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences.",
     "name": "--attachments-placeholder-description-font-size",
-    "value": "var(--upload-dropzone-meta-font-size)"
+    "value": "var(--font-size-sm, var(--font-size-base))"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. * * EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not * always so: all twelve of these resolved, were generated into the MCP catalog, were described to * every consumer — and nothing anywhere read one of them, because the component had no stylesheet * at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` * (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and * mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences.",
     "name": "--attachments-placeholder-gap",
-    "value": "var(--space-2)"
+    "value": "var(--space-1)"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "The scrim the drop layer paints over the whole control while a file is dragged across it. * Role-mirror knob, so `initial` and the role resolved at the CALL SITE (docs/TOKENS.md) — * a `[data-tenant]`/`.dark` scope that re-seeds `--background` must reach this. Documented * default = `color-mix(in srgb, hsl(var(--background)) 85%, transparent)`, which is Ant X's * `colorBgPlaceholderHover` (`colorBgContainer` at alpha .85).",
     "name": "--attachments-drop-overlay-background",
     "value": "initial"
   },
   {
-    "description": "Attachments — Ant Design X chat-surface file collection. * * Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and * tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css.",
+    "description": "The ✕ at the end of a card's row. Ant X draws it at `fontSizeLG` = 16; it stays at the 14px * step the frozen icon table records, which is also `--upload-remove-icon-size`. Two remove * affordances in one group drawing two different sizes is the defect, not the saving.",
     "name": "--attachments-remove-icon-size",
     "value": "var(--upload-remove-icon-size)"
   },
@@ -5885,9 +5890,9 @@
     "value": "calc(var(--space-1) / 2)"
   },
   {
-    "description": "track background — the recessed ground a control group sits in.",
+    "description": "track background — the recessed ground a control group sits in. default = var(--muted), resolved at the call site",
     "name": "--segmented-track-background",
-    "value": "var(--muted)"
+    "value": "initial"
   },
   {
     "description": "track radius = the base radius; item radius = one step DOWN the radius scale, not * `radius − trackPadding` (the two coincide only because the source scale happens to step by 2). * This scale is φ-spaced, so \"one step down\" from --radius is --radius-md (6px → 3.71px, against * the source's 6 → 4); --radius-sm is two steps and reads visibly squarer. The same pair is * already what TabsList (`rounded-lg`) and TabsTrigger (`rounded-md`) use — this library's other * track-and-slab control.",
@@ -5945,9 +5950,9 @@
     "value": "var(--secondary)"
   },
   {
-    "description": "selected fill = the elevated surface + a soft shadow — the selected slab reads as lifted * off the recessed track, which is the whole affordance.",
+    "description": "selected fill = the elevated surface + a soft shadow — the selected slab reads as lifted * off the recessed track, which is the whole affordance. default = var(--background), resolved at the call site",
     "name": "--segmented-item-selected-background",
-    "value": "var(--background)"
+    "value": "initial"
   },
   {
     "description": "Segmented (one-of-N control) component tokens. * * EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the * role assignments come from the widely-implemented enterprise Segmented control, transcribed as * ratios rather than as pixels: * * track padding: the bold line width → 2px * track background: the page's recessed neutral * item colour: the label ink · hover / selected colour: the body ink * item hover fill: the lighter neutral · item active fill: the heavier neutral * item selected fill: the elevated surface * label height = control height − track padding × 2 → 32 − 4 = 28 * label padding-inline = control padding-x − border width → 12 − 1 = 11 * icon gap = the small margin step / 2 → 6 * * THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active * TabsTrigger is `bg-background` + `shadow-sm` — the same track-and-slab pair, so a Segmented and a * default Tabs strip read as one control family in both themes rather than two near-misses. That * matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK * with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a * literal port would invert the pairing relative to every Tabs strip on the same page. * * NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented * values for its default seed and for this system's `#0071bd` — the control is neutral by * construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css * owns. So the ports below are ROLE references (the same neutrals this system already names), * never copied hex. * * The disabled state is the ONE place this departs. The source recolours to a disabled ink and * changes nothing else; this system disables every control with the one `--disabled-opacity` knob, * and a single library-wide answer outranks a per-component one. * * The other thing NOT ported is the sliding thumb: it exists to animate between items, and the * implementations that have one remove the `-item-selected` class while it runs, which means the * selected state lives in two places at once. A static selected slab reads identically at rest and * cannot desynchronise.",

package/dist/components/data-display/service-launcher-card.d.ts

@@ -28,7 +28,26 @@ import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp, ToneProp } from "../../props/vocabulary/index.js";
 export type ServiceLauncherStatusTone = Extract<ToneProp, "success" | "warning" | "destructive" | "info" | "neutral" | "muted">;
 export interface ServiceLauncherCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * The generic glyph for this KIND of service. Stays REQUIRED and stays a `LucideIcon`: every
+     * service has one, including a service created ten seconds ago that has no logo yet, and it is
+     * the thing `logo` falls back to. See the `logo` note for why this was not widened to a union.
+     */
     icon: LucideIcon;
+    /**
+     * URL of the service's OWN uploaded mark — the PNG/WebP an administrator uploaded (gh#850).
+     * When it loads, it replaces `icon` in the medallion, in the glyph's exact box.
+     *
+     * It is a fallback chain, not a switch: the tile shows `icon` while the URL is in flight, and
+     * KEEPS showing `icon` if the URL 404s, is empty, or decodes to nothing. A launcher never
+     * degrades to an empty medallion or a torn-page glyph because a logo went missing — which is the
+     * only state that reaches production, since a logo path outlives the file it points at.
+     *
+     * Decorative, and deliberately has no `logoAlt` companion: the medallion is `aria-hidden` and the
+     * service NAME sits beside it. A screen reader must not hear "Attendance" twice (WCAG 2.2 · 1.1.1
+     * — an image adjacent to text conveying the same thing is decorative).
+     */
+    logo?: string;
     title: React.ReactNode;
     titleLevel?: HeadingLevelProp;
     statusLabel?: React.ReactNode;

package/dist/components/data-display/service-launcher-card.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Plus } from "lucide-react";
+import { useImageLoadingStatus } from "../../lib/image-loading-status.js";
 import { cn } from "../../lib/utils.js";
 import { Badge } from "./badge.js";
 import { Card, CardContent } from "./card.js";
@@ -9,6 +10,7 @@ const ServiceLauncherCard = React.forwardRef(
   ({
     className,
     icon: Icon,
+    logo,
     title,
     titleLevel = 2,
     statusLabel,
@@ -20,6 +22,11 @@ const ServiceLauncherCard = React.forwardRef(
     ...props
   }, ref) => {
     const Heading = `h${titleLevel}`;
+    const [logoStatus, setLogoStatus] = React.useState("idle");
+    const logoLoadingStatus = useImageLoadingStatus(logo || void 0, {
+      loadingStatus: logoStatus,
+      setLoadingStatus: setLogoStatus
+    });
     return /* @__PURE__ */ jsx(
       Card,
       {
@@ -32,7 +39,13 @@ const ServiceLauncherCard = React.forwardRef(
         children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
           /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-heading", children: [
             /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-identity", children: [
-              /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: logoLoadingStatus === "loaded" ? (
+                /* No `loading="lazy"`: the probe above has ALREADY fetched this URL by the time
+                 * this element exists, so a lazy hint would describe a request that is over.
+                 * `decoding="async"` is the hint that still means something here — it keeps the
+                 * decode of a grid of logos off the main thread. */
+                /* @__PURE__ */ jsx("img", { "data-slot": "service-launcher-logo", src: logo, alt: "", decoding: "async" })
+              ) : /* @__PURE__ */ jsx(Icon, {}) }),
               /* @__PURE__ */ jsx(Heading, { "data-slot": "service-launcher-title", children: title })
             ] }),
             statusLabel != null ? /* @__PURE__ */ jsx(Badge, { tone: statusTone, "data-slot": "service-launcher-status", children: statusLabel }) : null