@godxjp/ui 23.4.2 → 23.4.4

package/README.md

@@ -110,11 +110,40 @@ The framework ships colors, the type scale, the wa-iro palette, and (opt-in) bun
 @import "@godxjp/ui/styles/core"; /* every component layer, no @font-face */
 ```
 
+Supplying Noto Sans JP yourself and want the cold-visit swap not to reflow the page? Take the
+third entry instead — the same layers plus the six metric-matched fallback faces, whose `src` is
+`local()`-only, so it costs **zero network bytes** over `core`:
+
+```css
+@import "@godxjp/ui/styles/core-with-fallbacks"; /* core + 6 local()-only faces */
+```
+
+Then name the family directly after your own face:
+`--font-sans-base: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;`
+
+`core` stays at **zero** `@font-face` on purpose — `grep -c '@font-face'
+node_modules/@godxjp/ui/dist/styles/core.css` → `0` is the promise, so the fallbacks got their own
+entry rather than being folded in.
+
+Japanese app that wants the bundled face without the per-screen round-trips? The fourth entry
+replaces the 729 sliced faces with one merged file per weight, JIS X 0208 level 1:
+
+```css
+@import "@godxjp/ui/styles/core-with-jis-level1"; /* core + fallbacks + 3 merged faces */
+```
+
+**3 requests, ~1.53 MB, all on first paint** — against 150 requests and 1,772,728 bytes for a
+694-character Japanese screen on `styles`, spread across screens. It does not cover JIS level 2
+(rare-surname kanji fall through to the platform face, so name one after ours) and it loses to the
+slices below roughly 620 distinct characters. Full table and reasoning in
+[docs/CUSTOMER-THEMING.md](docs/CUSTOMER-THEMING.md).
+
 > **Do not cherry-pick `*-layout.css` files.** Layers depend on each other (a
 > Select's rows, a menu's surface, a form's rhythm live in shared rules) and a
 > missing layer fails silently: menus render with no background, rows with no
-> height. `styles` and `styles/core` are the two supported entries; the runtime
-> `visual-audit` flags a page whose layers are incomplete (`css-layers-missing`).
+> height. `styles`, `styles/core`, `styles/core-with-fallbacks` and
+> `styles/core-with-jis-level1` are the four supported entries; the runtime `visual-audit` flags a
+> page whose layers are incomplete (`css-layers-missing`).
 
 ## Golden ratio (φ ≈ 1.618)
 

package/dist/components/data-entry/branch-scope-picker.js

@@ -188,7 +188,7 @@ const BranchScopePicker = React.forwardRef(
           ),
           /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: t("dataEntry.branchScope.selectedCount", { count: branchIds.length }) })
         ] }),
-        invalid && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error })
+        invalid && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-error-strong text-xs", children: error })
       ] })
     );
   }

package/dist/components/data-entry/date-picker.js

@@ -441,14 +441,8 @@ function DatePicker(props) {
         event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
         clear();
       },
-      className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
-      children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(
-        X,
-        {
-          className: range ? "ui-month-picker-icon" : "ui-control-inline-affix-icon",
-          "aria-hidden": "true"
-        }
-      )
+      className: "ui-control-inline-affix-action",
+      children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
     }
   ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
     "button",
@@ -457,14 +451,8 @@ function DatePicker(props) {
       disabled: allDisabled,
       tabIndex: -1,
       "aria-label": triggerLabel ?? (isPeriod ? t("dataEntry.monthPicker.openGrid") : range ? t("dataEntry.dateRangePicker.openCalendar") : t("dataEntry.datePicker.openCalendar")) ?? "Open calendar",
-      className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
-      children: /* @__PURE__ */ jsx(
-        CalendarIcon,
-        {
-          className: range ? "ui-month-picker-icon" : "ui-control-inline-affix-icon",
-          "aria-hidden": "true"
-        }
-      )
+      className: "ui-control-inline-affix-action",
+      children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
     }
   ) });
   const panel = /* @__PURE__ */ jsxs(

package/dist/components/data-entry/form-field.js

@@ -175,7 +175,7 @@ function FormField({
             t(`dataEntry.form.${validationStatus}`)
           ] }) : null,
           helperPlacement === "after" ? helperNode : null,
-          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-destructive text-xs", children: error }) : null
+          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: error }) : null
         ] })
       ]
     }

package/dist/components/data-entry/upload.js

@@ -434,7 +434,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -483,7 +483,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       /* @__PURE__ */ jsxs(
         Button,
         {
@@ -514,7 +514,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-upload-grid", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       (showUploadList ? items : []).map((item2) => /* @__PURE__ */ jsx(
         UploadPictureCard,
         {
@@ -548,7 +548,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       /* @__PURE__ */ jsx(Button, { type: "button", disabled, variant: triggerVariant, onClick: openPicker, children: children ?? t("dataEntry.upload.addImage") }),
       list
     ] });
@@ -558,7 +558,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm ui-upload-picture", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "ui-upload-picture-frame", children: [
         /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "ui-upload-picture-img" }),
         item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay ui-upload-picture-overlay", children: t("dataEntry.upload.uploading") }),
@@ -650,7 +650,7 @@ function UploadDraftActions({
   const { state, undoRemove, undoReplace } = draft;
   if (state.canUndoRemove) {
     return /* @__PURE__ */ jsxs("div", { className: "ui-upload-draft-undo", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-destructive", children: t("dataEntry.upload.markedForDelete") }),
+      /* @__PURE__ */ jsx("span", { className: "text-error-strong", children: t("dataEntry.upload.markedForDelete") }),
       /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: undoRemove, children: [
         /* @__PURE__ */ jsx(RotateCcw, { className: "ui-upload-draft-icon", "aria-hidden": "true" }),
         t("dataEntry.upload.undo")
@@ -690,7 +690,7 @@ function UploadPictureCard({
         }
       )
     ] }),
-    item.status === "error" && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-destructive", children: item.error }),
+    item.status === "error" && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-error-strong", children: item.error }),
     /* @__PURE__ */ jsxs("div", { className: "ui-inline-xs", children: [
       onCancel && item.status === "uploading" && /* @__PURE__ */ jsx(
         Button,
@@ -760,7 +760,7 @@ function UploadFileList({
         /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
         /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [
           formatBytes(item.size),
-          item.status === "error" && item.error && /* @__PURE__ */ jsxs("span", { role: "alert", className: "text-destructive", children: [
+          item.status === "error" && item.error && /* @__PURE__ */ jsxs("span", { role: "alert", className: "text-error-strong", children: [
             " ",
             "\xB7 ",
             item.error

package/dist/components/layout/draggable-panel.d.ts

@@ -1,18 +1,19 @@
 import * as React from "react";
 import type { DragAxisProp, DraggablePanelPositionProp } from "../../props/components/layout.prop.js";
-export type { DraggablePanelProp, DraggablePanelProp as DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DragAxisProp, DragBoundsProp, } from "../../props/components/layout.prop.js";
+export type { DraggablePanelProp, DraggablePanelProp as DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelLabels, DragAxisProp, DragBoundsProp, } from "../../props/components/layout.prop.js";
 export declare const DraggablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "children" | "onDrag" | "title"> & {
     title: import("../../props/index.js").TitleProp;
     children?: import("../../props/index.js").ChildrenProp;
     extra?: import("../../props/index.js").ExtraProp;
     placement?: import("./draggable-panel.js").DraggablePanelPlacementProp;
-    width?: Extract<import("../../props/index.js").SizeProp, "sm" | "md" | "lg">;
+    width?: Extract<import("../../props/index.js").SizeProp, "sm" | "md" | "lg"> | "xl";
     axis?: DragAxisProp;
     bounds?: import("./draggable-panel.js").DragBoundsProp;
     position?: DraggablePanelPositionProp;
     defaultPosition?: DraggablePanelPositionProp;
     onPositionChange?: (position: DraggablePanelPositionProp) => void;
     onClose?: () => void;
+    labels?: import("./draggable-panel.js").DraggablePanelLabels;
     disabled?: import("../../props/index.js").DisabledProp;
     className?: import("../../props/index.js").ClassNameProp;
 } & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/draggable-panel.js

@@ -51,6 +51,7 @@ const DraggablePanel = React.forwardRef(
     defaultPosition,
     onPositionChange,
     onClose,
+    labels,
     disabled = false,
     className,
     ...props
@@ -73,6 +74,14 @@ const DraggablePanel = React.forwardRef(
       [bounds, onPositionChange, position]
     );
     React.useEffect(() => () => stopDrag.current?.(), []);
+    React.useEffect(() => {
+      if (bounds !== "viewport" || typeof window === "undefined") return;
+      const onResize = () => {
+        commit(currentRef.current);
+      };
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }, [bounds, commit]);
     const setPanel = React.useCallback(
       (node) => {
         panelRef.current = node;
@@ -156,7 +165,7 @@ const DraggablePanel = React.forwardRef(
                 type: "button",
                 "data-slot": "draggable-panel-handle",
                 className: "ui-draggable-panel-handle ui-focus-ring",
-                "aria-label": t("layout.draggablePanel.moveLabel"),
+                "aria-label": labels?.move ?? t("layout.draggablePanel.moveLabel"),
                 "aria-disabled": movable ? void 0 : "true",
                 onPointerDown: handlePointerDown,
                 onKeyDown: handleKeyDown,
@@ -171,7 +180,7 @@ const DraggablePanel = React.forwardRef(
                 type: "button",
                 "data-slot": "draggable-panel-close",
                 className: "ui-draggable-panel-close ui-focus-ring",
-                "aria-label": t("feedback.alert.dismiss"),
+                "aria-label": labels?.close ?? t("feedback.alert.dismiss"),
                 onClick: onClose,
                 children: /* @__PURE__ */ jsx(X, { className: "ui-draggable-panel-close-icon", "aria-hidden": "true" })
               }

package/dist/components/layout/index.d.ts

@@ -50,7 +50,7 @@ export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
 export { DraggablePanel } from "./draggable-panel.js";
-export type { DraggablePanelProp, DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DragAxisProp, DragBoundsProp, } from "./draggable-panel.js";
+export type { DraggablePanelProp, DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelLabels, DragAxisProp, DragBoundsProp, } from "./draggable-panel.js";
 export { Separator } from "./separator.js";
 export type { SeparatorProp, SeparatorProps } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";

package/dist/props/components/index.d.ts

@@ -1,4 +1,4 @@
-export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";

package/dist/props/components/layout.prop.d.ts

@@ -1442,6 +1442,11 @@ export type DraggablePanelPositionProp = {
     x: number;
     y: number;
 };
+/** Optional overrides for title-bar control labels when `AppProvider` is not in scope (gh#606). */
+export type DraggablePanelLabels = {
+    close?: string;
+    move?: string;
+};
 /**
  * @see DraggablePanel — a floating surface the person using it can MOVE, so a docked assistant
  * stops covering the thing they are asking about.
@@ -1458,8 +1463,8 @@ export type DraggablePanelProp = Omit<React.HTMLAttributes<HTMLElement>, "title"
     extra?: ExtraProp;
     /** Resting corner before any movement. Default `bottom-end`. */
     placement?: DraggablePanelPlacementProp;
-    /** Panel width, from the token scale. Default `md`. */
-    width?: Extract<SizeProp, "sm" | "md" | "lg">;
+    /** Panel width, from the token scale (`sm`–`xl`). Default `md`. */
+    width?: Extract<SizeProp, "sm" | "md" | "lg"> | "xl";
     /** react-draggable `axis`. Default `both`. */
     axis?: DragAxisProp;
     /** react-draggable `bounds`. Default `viewport`. */
@@ -1476,6 +1481,12 @@ export type DraggablePanelProp = Omit<React.HTMLAttributes<HTMLElement>, "title"
     onPositionChange?: (position: DraggablePanelPositionProp) => void;
     /** Presence renders the close control in the title bar (antd Modal's `onCancel`). */
     onClose?: () => void;
+    /**
+     * Localized strings for the close and move controls. Each key wins over `t()` when set; omit to
+     * keep the framework default. For script-injected embeds that cannot mount `AppProvider` without
+     * restyling the host page — a scoped provider subtree is the long-term fix (gh#606).
+     */
+    labels?: DraggablePanelLabels;
     /** react-draggable `disabled` — the panel stays, the handle stops moving it. */
     disabled?: DisabledProp;
     className?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -2536,6 +2536,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "onClose";
             readonly local: true;
             readonly reason: "Presence renders the title-bar close control — antd Modal's onCancel.";
+        }, {
+            readonly field: "labels";
+            readonly local: true;
+            readonly reason: "Optional close/move strings for embeds that cannot mount AppProvider without restyling the host page (gh#606).";
         }];
     };
     readonly ThumbnailSizeProp: {

package/dist/props/registry.js

@@ -2953,6 +2953,11 @@ const COMPONENT_PROP_REGISTRY = {
         field: "onClose",
         local: true,
         reason: "Presence renders the title-bar close control \u2014 antd Modal's onCancel."
+      },
+      {
+        field: "labels",
+        local: true,
+        reason: "Optional close/move strings for embeds that cannot mount AppProvider without restyling the host page (gh#606)."
       }
     ]
   },

package/dist/styles/control.css

@@ -1355,6 +1355,27 @@
     block-size: 0.75rem;
   }
 
+  .ui-number-input-step {
+    position: relative;
+  }
+
+  .ui-number-input-step::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    inline-size: var(--touch-target-min);
+    block-size: var(--touch-target-min);
+  }
+
+  .ui-number-input-step-up::after {
+    inset-block-end: 0;
+  }
+
+  .ui-number-input-step-down::after {
+    inset-block-start: 0;
+  }
+
   @media (pointer: coarse) {
     .ui-number-input:not([data-size="xs"]):not([data-size="sm"]) {
       --control-height: var(--number-input-touch-height);

package/dist/styles/core-with-fallbacks.css

@@ -0,0 +1,3 @@
+
+@import "./core.css";
+@import "./font-fallbacks.css";

package/dist/styles/core-with-jis-level1.css

@@ -0,0 +1,3 @@
+
+@import "./core-with-fallbacks.css";
+@import "./jis-level1-fonts.css";

package/dist/styles/dialog-layout.css

@@ -107,7 +107,7 @@
 
   .ui-dialog-step-up-error {
     font-size: var(--dialog-step-up-error-font-size);
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   [data-slot="dialog-footer"] {

package/dist/styles/font-fallbacks.css

@@ -0,0 +1,83 @@
+
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 400;
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
+  size-adjust: 103.02%;
+  ascent-override: 112.6%;
+  descent-override: 27.96%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 500;
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
+  size-adjust: 105.5%;
+  ascent-override: 109.95%;
+  descent-override: 27.3%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 700;
+  src:
+    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
+    local("LiberationSans-Bold");
+  size-adjust: 101.5%;
+  ascent-override: 114.29%;
+  descent-override: 28.37%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 400;
+  src:
+    local("Hiragino Sans W3"), local("HiraginoSans-W3"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
+    local("Noto Sans CJK JP"), local("NotoSansCJKjp-Regular"), local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 500;
+  src:
+    local("Hiragino Sans W5"), local("HiraginoSans-W5"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
+    local("Noto Sans CJK JP Medium"), local("NotoSansCJKjp-Medium"), local("Noto Sans CJK JP"),
+    local("NotoSansCJKjp-Regular"), local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 700;
+  src:
+    local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"),
+    local("HiraKakuProN-W6"), local("Yu Gothic Bold"), local("YuGothic-Bold"), local("Meiryo Bold"),
+    local("Meiryo-Bold"), local("Noto Sans CJK JP Bold"), local("NotoSansCJKjp-Bold"),
+    local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}

package/dist/styles/fonts.css

@@ -6,88 +6,7 @@
 @import "@fontsource/noto-sans-jp/500.css";
 @import "@fontsource/noto-sans-jp/700.css";
 
-@font-face {
-  font-family: "Noto Sans JP Fallback";
-  font-weight: 400;
-  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
-  size-adjust: 103.02%;
-  ascent-override: 112.6%;
-  descent-override: 27.96%;
-  line-gap-override: 0%;
-  unicode-range:
-    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
-    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Noto Sans JP Fallback";
-  font-weight: 500;
-  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
-  size-adjust: 105.5%;
-  ascent-override: 109.95%;
-  descent-override: 27.3%;
-  line-gap-override: 0%;
-  unicode-range:
-    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
-    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Noto Sans JP Fallback";
-  font-weight: 700;
-  src:
-    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
-    local("LiberationSans-Bold");
-  size-adjust: 101.5%;
-  ascent-override: 114.29%;
-  descent-override: 28.37%;
-  line-gap-override: 0%;
-  unicode-range:
-    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
-    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Noto Sans JP Fallback";
-  font-weight: 400;
-  src:
-    local("Hiragino Sans W3"), local("HiraginoSans-W3"), local("Hiragino Kaku Gothic ProN W3"),
-    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
-    local("Noto Sans CJK JP"), local("NotoSansCJKjp-Regular"), local("IPAGothic");
-  ascent-override: 116%;
-  descent-override: 28.8%;
-  line-gap-override: 0%;
-  unicode-range:
-    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
-}
-@font-face {
-  font-family: "Noto Sans JP Fallback";
-  font-weight: 500;
-  src:
-    local("Hiragino Sans W5"), local("HiraginoSans-W5"), local("Hiragino Kaku Gothic ProN W3"),
-    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
-    local("Noto Sans CJK JP Medium"), local("NotoSansCJKjp-Medium"), local("Noto Sans CJK JP"),
-    local("NotoSansCJKjp-Regular"), local("IPAGothic");
-  ascent-override: 116%;
-  descent-override: 28.8%;
-  line-gap-override: 0%;
-  unicode-range:
-    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
-}
-@font-face {
-  font-family: "Noto Sans JP Fallback";
-  font-weight: 700;
-  src:
-    local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"),
-    local("HiraKakuProN-W6"), local("Yu Gothic Bold"), local("YuGothic-Bold"), local("Meiryo Bold"),
-    local("Meiryo-Bold"), local("Noto Sans CJK JP Bold"), local("NotoSansCJKjp-Bold"),
-    local("IPAGothic");
-  ascent-override: 116%;
-  descent-override: 28.8%;
-  line-gap-override: 0%;
-  unicode-range:
-    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
-}
+@import "./font-fallbacks.css";
 
 :root {
   --font-sans-base:

package/dist/styles/jis-level1-fonts.css

@@ -0,0 +1,24 @@
+
+@font-face {
+  font-family: "Noto Sans JP";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/noto-sans-jp-jis-level1-400.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Noto Sans JP";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./fonts/noto-sans-jp-jis-level1-500.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Noto Sans JP";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/noto-sans-jp-jis-level1-700.woff2") format("woff2");
+}

package/dist/styles/layout.css

@@ -1799,6 +1799,7 @@
     flex-direction: column;
     inline-size: var(--draggable-panel-width);
     max-inline-size: calc(100% - var(--draggable-panel-inset) - var(--draggable-panel-inset));
+    block-size: var(--draggable-panel-block-size);
     max-block-size: var(--draggable-panel-max-block-size);
     border: var(--draggable-panel-border-width) solid hsl(var(--border));
     border-radius: var(--draggable-panel-radius);
@@ -1818,6 +1819,10 @@
     inline-size: var(--draggable-panel-width-lg);
   }
 
+  .ui-draggable-panel[data-width="xl"] {
+    inline-size: var(--draggable-panel-width-xl);
+  }
+
   .ui-draggable-panel[data-placement^="top"] {
     inset-block-start: var(--draggable-panel-inset);
   }

package/dist/tokens/components/draggable-panel.css

@@ -12,6 +12,10 @@
   --draggable-panel-width-sm: 18rem;
   --draggable-panel-width: 22rem;
   --draggable-panel-width-lg: 28rem;
+
+  --draggable-panel-width-xl: var(--centered-shell-width-md);
+
+  --draggable-panel-block-size: auto;
   --draggable-panel-max-block-size: 70vh;
 
   --draggable-panel-radius: var(--radius-lg);

package/docs/CONSUMER-RULES.md

@@ -2,7 +2,7 @@
 
 Read this once; the audit enforces it. Everything else in `docs/` is for contributors.
 
-1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled) or `@import "@godxjp/ui/styles/core"` (no fonts). Never cherry-pick `*-layout.css`.
+1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled, 729 sliced woff2 faces, ~11.7 MB), `@import "@godxjp/ui/styles/core"` (no `@font-face` at all), `@import "@godxjp/ui/styles/core-with-fallbacks"` (`core` + six `local()`-only metric-matched faces, still zero network bytes — for when you supply Noto Sans JP yourself) or `@import "@godxjp/ui/styles/core-with-jis-level1"` (`core-with-fallbacks` + Noto Sans JP merged to JIS X 0208 level 1: **3 requests, ~1.53 MB, once** instead of ~8 font requests on every navigation — for a Japanese app that wants the bundled face). Never cherry-pick `*-layout.css`.
 2. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
 4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`.

package/docs/CUSTOMER-THEMING.md

@@ -16,14 +16,71 @@ That single import ships everything: colors, the bundled fonts (**Noto Sans JP**
 
 ---
 
-## CSS entries — `styles` or `styles/core`, nothing smaller
+## CSS entries — `styles`, `styles/core`, `styles/core-with-fallbacks`, `styles/core-with-jis-level1`, nothing smaller
 
-`@godxjp/ui/styles` bundles every component's CSS plus the fonts. When you manage fonts yourself (next/font, a system stack, a browser extension that must not ship font files), load the same layers without the faces:
+`@godxjp/ui/styles` bundles every component's CSS plus the fonts: **729 woff2 subsets, ~11.7 MB on disk** at the current @fontsource versions (issue #535 measured 737 files / 13 MB in a real consumer build). When you manage fonts yourself (next/font, a system stack, a browser extension that must not ship font files), load the same layers without the faces:
 
 ```css
 @import "@godxjp/ui/styles/core"; /* every component layer, no @font-face */
 ```
 
+`core` carries **zero** `@font-face` — `grep -c '@font-face' node_modules/@godxjp/ui/dist/styles/core.css` → `0` — and that number is the point of it. If you supply Noto Sans JP yourself and also want the cold-visit swap to stop reflowing the page (issue #475), take the third entry: `core` plus the six metric-matched fallback faces, every one `local()`-only, so the extra cost over `core` is **zero network bytes**.
+
+```css
+@import "@godxjp/ui/styles/core-with-fallbacks"; /* core + 6 local()-only faces */
+```
+
+It declares the faces and nothing else — name the family yourself, directly after your own face:
+
+```css
+:root {
+  --font-sans-base: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;
+}
+```
+
+### A Japanese app that wants the bundled face anyway
+
+The slicing is what costs the round-trips: a browser cannot know which of the 729 faces it needs
+until it has laid out and measured the text, so every new screen discovers a new handful. The
+fourth entry replaces them with **one merged file per weight**, JIS X 0208 level 1 — 2965 kanji
+plus kana, symbols, Cyrillic, Latin and Vietnamese, 3861 code points:
+
+```css
+@import "@godxjp/ui/styles/core-with-jis-level1"; /* core + fallbacks + 3 merged faces */
+```
+
+Measured against the sliced entry, Noto Sans JP only, weights 400/500/700:
+
+| distinct Japanese characters on screen        |                   `styles` |   `core-with-jis-level1` |
+| --------------------------------------------- | -------------------------: | -----------------------: |
+| 448 — this package's own `ja` labels, no data |  99 requests · 1,051,268 B | 3 requests · 1,534,636 B |
+| 694 — labels plus names, addresses, prose     | 150 requests · 1,772,728 B | 3 requests · 1,534,636 B |
+| 772 — a little more prose                     | 216 requests · 3,491,840 B | 3 requests · 1,534,636 B |
+
+The left column grows with your content and is paid again on every screen that renders a character
+no earlier screen did; the right column does not move. **Below roughly 620 distinct characters the
+slices are fewer bytes** (in ~100 requests), so an app that renders less Japanese than this
+package's own menu labels should stay on `styles`.
+
+What is deliberately not in it: **JIS level 2** (rows 48–84), which would roughly double the bytes
+to cover kanji that appear in rare surnames — those resolve from the platform Japanese face, so
+name one after ours. **M PLUS 2**, which sits behind Noto Sans JP in every stack this package ships
+and is therefore never downloaded today either; merging it would add 1,089,676 bytes for nothing.
+And **no `unicode-range`** on the merged faces, because per-range discovery is the mechanism the
+entry exists to remove — the cost of that is a Latin-only screen downloading its weight's ~500 KB
+rather than the ~25 KB of Latin inside it.
+
+Like `core-with-fallbacks`, it declares faces and does not set `--font-sans-base`; name a platform
+Japanese face after ours so level 2 kanji have somewhere to land:
+
+```css
+:root {
+  --font-sans-base:
+    "Noto Sans JP", "Noto Sans JP Fallback", "Hiragino Sans", "Yu Gothic Medium", Meiryo, system-ui,
+    sans-serif;
+}
+```
+
 The per-layer files (`control`, `card-layout`, `navigation-layout`, …) are the package's internal structure, **not a public menu**. Layers share rules — a Select's rows and a menu's surface, a form's rhythm, a card's header type — so a page that loads a subset renders naked menus and unsized rows with no error. The runtime `visual-audit` reports it as `css-layers-missing`.
 
 ---
@@ -176,3 +233,4 @@ Scope the overrides under a tenant attribute instead of `:root`. The colour util
 Set `data-tenant` on the app root. Two CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
 
 - **Radius & shadow-tint don't cascade from a scoped anchor.** `--radius-{xs…2xl}`, `--card-radius`, `--control-radius` and the `--shadow-{xs…2xl}` ramp are computed at their declaring element, so a scoped `--radius` / `--shadow-color` override won't reach them. For a scoped re-theme, re-declare the derived tokens you need (e.g. `--card-radius: var(--radius)`, or set `--card-shadow` to a literal value).
+````

package/docs/DESIGN-AUTHORITY.md

@@ -247,6 +247,10 @@ in page CSS.
   (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`.
+- **`DraggablePanel.labels`.** antd's Draggable Modal demo has no i18n hook for the drag handle.
+  Embedded consumers cannot mount `AppProvider` without writing theme attributes on the host
+  `document.documentElement` (gh#606). `labels?: { close?: string; move?: string }` overrides `t()`
+  per control; a scoped `AppProvider` subtree remains the long-term fix.
 - **`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

package/docs/TOKENS.md

@@ -53,7 +53,7 @@ in the source.
 | Tier     | Tokens                                      | What it paints                                                     | Contrast bar                                              |
 | -------- | ------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------- |
 | **FILL** | `--success`, `--warning`, `--info`, `--destructive` | A solid chip, band or bar with a label ON it                        | AA **4.5:1** against its own `*-foreground` label          |
-| **TEXT** | `--text-success`, `--text-warning`, `--text-info`, `--text-error` | Small coloured type — a StatCard delta, an outline badge label      | AA **4.5:1** against the surface BEHIND it                 |
+| **TEXT** | `--text-success`, `--text-warning`, `--text-info`, `--text-error` | Small coloured type — a StatCard delta, an outline badge label, a field's error line | AA **4.5:1** against the surface BEHIND it                 |
 | **MARK** | `--mark-success`, `--mark-warning`, `--mark-info`, `--mark-destructive`, `--mark-primary`, `--mark-attention` | A thin shape carrying meaning with nothing written on it — a `Card accent` rail, a `DataTable rowTone` rail | SC 1.4.11 **3:1** against the surface it sits on |
 
 The MARK tier exists because both rails were reading FILL, and two of them were effectively
@@ -94,6 +94,24 @@ Worst case anywhere on the two routes after the move: **4.52:1**. `.ui-progress-
 over-capacity) reads the same tokens as the slice, so a `tone="warning"` meter and a `warning`
 slice on one screen stay the same colour.
 
+**ERROR PROSE WAS THE THIRD PLACE THE SAME MISTAKE LIVED (gh#610).** `Alert`, `Text` and
+`Heading` resolved their destructive ink through TEXT from the start, but the `role="alert"` line
+the data-entry primitives render — `<FormField error>`, `Upload`'s rejections, the `Dialog` step-up
+failure — was on `text-destructive`, the FILL utility. So the same `tone` was readable inside an
+`Alert` and near-invisible one line below it, in the field that caused it. Measured in Chromium on
+`/isolate/layout-auth-recovery-examples-mfa-challenge`:
+
+| surface | ground | FILL (before) | TEXT (after) |
+| --- | --- | --- | --- |
+| `.ui-form-field-note[role="alert"]` | dark card | **2.95** | **5.52** |
+| `.ui-form-field-note[role="alert"]` | light card | 6.16 | **7.21** |
+
+Only the DARK branch failed, and the light one passing is why it survived: the fill is tuned for a
+white label ON it, so it darkens on light grounds and lightens on dark ones — the opposite of what
+ink needs. The guard is `error-text-tier.test.ts` (token ratios on `--background`/`--card`/
+`--muted` in both themes, plus a source scan for the fill utility), and `check:contrast` gained the
+two `ui-auth-shell` routes it had never loaded.
+
 **A theme that repoints `--secondary` owes `--progress-track-background`.** The track defaults to
 `hsl(var(--secondary))`, which is a pale neutral in the stock palette. `docs/showcase/acme-portal`
 repurposes `--secondary` as a navy *button* colour, so its bars were drawn on a near-black track

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.2",
-  "godxUiMcp": "23.4.2",
+  "version": "23.4.4",
+  "godxUiMcp": "23.4.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -46,6 +46,9 @@
       "import": "./dist/index.js"
     },
     "./styles": "./dist/styles/index.css",
+    "./styles/core": "./dist/styles/core.css",
+    "./styles/core-with-fallbacks": "./dist/styles/core-with-fallbacks.css",
+    "./styles/core-with-jis-level1": "./dist/styles/core-with-jis-level1.css",
     "./styles/*": "./dist/styles/*.css",
     "./theme/*": "./dist/theme/*",
     "./tokens": "./dist/tokens/base.css",
@@ -378,6 +381,7 @@
     "audit": "node scripts/ui-audit.mjs",
     "audit:examples": "node scripts/ui-audit.mjs docs",
     "build": "tsup && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs && node scripts/fix-esm-extensions.mjs && node scripts/add-use-client.mjs",
+    "build:jis-level1-fonts": "node scripts/build-jis-level1-fonts.mjs",
     "dev": "node scripts/dev.mjs",
     "prepublishOnly": "pnpm run build",
     "check:audit-sync": "node scripts/check-audit-sync.mjs",

package/scripts/_agent-setup.mjs

@@ -125,6 +125,18 @@ export function stampedDigest(text) {
   return text?.match(DIGEST_RE)?.[1] ?? null;
 }
 
+/**
+ * Refresh only the human-readable release marker when the managed body is already current.
+ *
+ * The writer keys off digest; `ui-audit` keys off version (godx-jp/id#513). When rule text is
+ * unchanged across releases both must still agree after sync — without rewriting the body or
+ * breaking idempotency when digest and version already match.
+ */
+function resyncVersionStamp(text) {
+  if (stampedVersion(text) === KIT_VERSION) return null;
+  return text.replace(STAMP_RE, `<!-- godxjp-ui:version ${KIT_VERSION} -->`);
+}
+
 /**
  * Replace the MANAGED region of a file and leave everything else alone.
  *
@@ -533,7 +545,14 @@ export function refreshGuineaPigSkill(root) {
    * to anyone reading it. Only the digest half is compared.
    */
   const stamp = `${KIT_VERSION}:${digestOf(base)}`;
-  if (readFileSync(optin, "utf8").trim().split(":").pop() === digestOf(base)) return false;
+  const optinLine = readFileSync(optin, "utf8").trim();
+  const optinDigest = optinLine.split(":").pop();
+  if (optinDigest === digestOf(base)) {
+    if (optinLine.split(":")[0] === KIT_VERSION) return false;
+    // Base unchanged — only the release half of `<version>:<digest>` drifted (same split as above).
+    writeFileAtomic(optin, `${stamp}\n`);
+    return true;
+  }
 
   const current = readFileSync(target, "utf8");
   const marker = "\n---\n\n# 8. ";
@@ -581,8 +600,14 @@ export function ensureConsumerRules(root) {
   const managed = `${front}${body}`;
   const next = `${OWNED_STAMP(managed)}\n${managed}`;
 
-  if (existsSync(target) && stampedDigest(readFileSync(target, "utf8")) === digestOf(managed)) {
-    return false;
+  if (existsSync(target)) {
+    const current = readFileSync(target, "utf8");
+    if (stampedDigest(current) === digestOf(managed)) {
+      const resynced = resyncVersionStamp(current);
+      if (resynced == null) return false;
+      writeFileAtomic(target, resynced);
+      return uiDir;
+    }
   }
   mkdirSync(dir, { recursive: true });
   writeFileAtomic(target, next);

package/scripts/cli.mjs

@@ -2,6 +2,7 @@
 /**
  * @godxjp/ui CLI — `npx @godxjp/ui <command>`.
  *   init-agent     scaffold the agent forcing-kit (MCP + auto-audit hook + mandate)
+ *   sync-rules     refresh package-owned agent rules (same path as postinstall)
  *   audit          static UI audit (regex over source)
  *   visual-audit   runtime audit (Playwright + axe-core) against a running app
  */
@@ -12,6 +13,7 @@ import { fileURLToPath } from "node:url";
 const HERE = dirname(fileURLToPath(import.meta.url));
 const MAP = {
   "init-agent": "init-agent-kit.mjs",
+  "sync-rules": "postinstall.mjs",
   audit: "ui-audit.mjs",
   "visual-audit": "visual-audit.mjs",
 };
@@ -19,8 +21,10 @@ const MAP = {
 const [cmd, ...rest] = process.argv.slice(2);
 const script = MAP[cmd];
 if (!script) {
-  console.error("usage: godxjp-ui <init-agent | audit | visual-audit> [args]");
+  console.error("usage: godxjp-ui <init-agent | sync-rules | audit | visual-audit> [args]");
   process.exit(1);
 }
-const r = spawnSync("node", [join(HERE, script), ...rest], { stdio: "inherit" });
+const env =
+  cmd === "sync-rules" ? { ...process.env, INIT_CWD: process.env.INIT_CWD ?? process.cwd() } : process.env;
+const r = spawnSync("node", [join(HERE, script), ...rest], { stdio: "inherit", env });
 process.exit(r.status ?? 0);

package/scripts/consumer-rule.md

@@ -1,6 +1,9 @@
 # @godxjp/ui
 
-> **Tệp này do gói `@godxjp/ui` sở hữu và bị GHI ĐÈ mỗi lần nâng cấp.**
+> **Tệp này do gói `@godxjp/ui` sở hữu.** Nội dung được ghi lại khi luật trong gói đổi (thường
+> qua postinstall sau `npm i`, trừ khi `.npmrc` có `ignore-scripts=true`). Khi đó chạy
+> `npx @godxjp/ui sync-rules`. Dấu `<!-- godxjp-ui:version -->` luôn được đồng bộ với phiên bản
+> gói đang cài — kể cả khi thân tệp không đổi giữa hai bản.
 > Đừng sửa ở đây — luật của riêng kho thuộc về một tệp khác trong `.ai/rules/`,
 > và index sẽ nạp cả hai. (Khác với `.claude/skills/.../SKILL.md`, nơi mục §8
 > trở đi là của kho và được giữ lại.)
@@ -9,11 +12,13 @@
 `docs/CONSUMER-RULES.md` (10 luật) và, với kho chuột bạch, ở
 `.claude/skills/godx-ui-guinea-pig/SKILL.md`.
 
-## Nạp style: HAI lối vào, và lối thứ hai không chở font
+## Nạp style: BỐN lối vào, và ba lối sau đều không chở 729 lát font
 
 ```css
-@import "@godxjp/ui/styles";      /* mọi layer + Noto Sans JP / M PLUS 2 đóng gói sẵn */
+@import "@godxjp/ui/styles"; /* mọi layer + 729 lát woff2 cắt theo unicode-range */
 @import "@godxjp/ui/styles/core"; /* CÙNG các layer ấy, KHÔNG một @font-face nào */
+@import "@godxjp/ui/styles/core-with-fallbacks"; /* core + 6 khối local()-only, vẫn 0 byte mạng */
+@import "@godxjp/ui/styles/core-with-jis-level1"; /* + Noto Sans JP gộp JIS mức 1: 3 request, ~1,53 MB */
 ```
 
 Chọn `core` khi kho tự lo mặt chữ, hoặc khi không muốn chở font: `@fontsource` cắt
@@ -21,9 +26,36 @@ Noto Sans JP thành hàng trăm lát `unicode-range`, và trình duyệt chỉ b
 SAU khi đã dựng bố cục — một consumer đo được **737 lát / 13 MB**, gấp bảy lần toàn bộ
 JavaScript của họ, cộng ~8 vòng tải mỗi lần chuyển màn.
 
-`core` không phải cherry-pick: nó là một trong hai lối vào được hỗ trợ, và thứ tự layer
-vẫn nguyên vẹn. Cherry-pick từng layer riêng lẻ thì vẫn cấm — đó là thứ làm vỡ hợp đồng
-thứ tự, không phải việc chọn lối vào.
+Lối thứ ba dành cho kho **tự cấp Noto Sans JP** (next/font, self-host) mà vẫn muốn cửa
+sổ swap không đội hình: nó chở đúng 6 `@font-face` metric-matched, `src` toàn `local()`
+nên **không tải byte nào**. Nhớ tự xếp tên họ chữ ngay sau mặt chữ của bạn:
+`--font-sans-base: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;`
+
+Lối thứ tư dành cho **app tiếng Nhật vẫn muốn font kèm gói**, nhưng không muốn trả số
+vòng tải mỗi lần chuyển màn: nó thay 729 lát bằng **một tệp gộp cho mỗi weight**, phủ
+JIS X 0208 mức 1 (2965 kanji + kana + ký hiệu + Latin + tiếng Việt, 3861 code point).
+Đo trên ba weight, chỉ Noto Sans JP:
+
+| số ký tự Nhật khác nhau trên màn | `styles`                     | `core-with-jis-level1`     |
+| -------------------------------- | ---------------------------- | -------------------------- |
+| 448 (nhãn `ja` của chính gói)    | 99 request · 1.051.268 byte  | 3 request · 1.534.636 byte |
+| 694 (nhãn + tên, địa chỉ, câu)   | 150 request · 1.772.728 byte | 3 request · 1.534.636 byte |
+| 772 (thêm chút văn xuôi)         | 216 request · 3.491.840 byte | 3 request · 1.534.636 byte |
+
+Cột trái phình theo NỘI DUNG và phải trả lại ở mỗi màn có ký tự mới; cột phải không đổi.
+**Dưới khoảng 620 ký tự khác nhau thì cắt lát ít byte hơn** (đổi bằng ~100 request), nên
+app nào render ít chữ Nhật hơn cả menu của gói này thì cứ ở `styles`. Lối này KHÔNG chở
+JIS mức 2 — kanji trong họ tên hiếm sẽ rơi xuống mặt chữ của hệ điều hành, nên hãy xếp
+một mặt chữ Nhật của hệ ngay sau mặt chữ của gói. Nó cũng không đụng `--font-sans-base`,
+y như lối thứ ba.
+
+`core` giữ `@font-face` = **0** và đó là lời hứa đo được —
+`grep -c '@font-face' node_modules/@godxjp/ui/dist/styles/core.css` → `0`. Vì vậy các
+fallback nằm ở entry riêng chứ không nhét vào `core`.
+
+Không lối nào trong bốn là cherry-pick: cả bốn đều được hỗ trợ và thứ tự layer vẫn
+nguyên vẹn. Cherry-pick từng layer riêng lẻ thì vẫn cấm — đó là thứ làm vỡ hợp đồng thứ
+tự, không phải việc chọn lối vào.
 
 ## Bố cục chuẩn của platform: BA CỘT, và ba cột là BA PHẠM VI
 
@@ -66,24 +98,69 @@ Slack thì đặt lại **một dòng**, không fork `.app-nav-rail`.
 Hỏi MCP `godxjp-ui` (`search_components`, `get_component`). Đo được trong một
 ngày: năm thứ cần đều ĐÃ CÓ và vẫn bị dựng lại bằng thứ khác —
 
-| Cần                                      | Đã có                 |
-| ---------------------------------------- | --------------------- |
-| đường kẻ chạm mép Card                   | `<CardContent flush>` |
-| header có kẻ khi thân là danh sách flush | `<CardHeader banded>` |
-| một hàng LÀ liên kết (thay cho nút rời)  | `<ListRow asChild>`   |
-| kẻ ô từng ngày trong lịch                | `<Calendar bordered>` |
-| dải giữa hai vùng, tự kẻ theo VỊ TRÍ     | `<CardBar>`           |
+| Cần                                             | Đã có                                                                              |
+| ----------------------------------------------- | ---------------------------------------------------------------------------------- |
+| đường kẻ chạm mép Card                          | `<CardContent flush>`                                                              |
+| header có kẻ khi thân là danh sách flush        | `<CardHeader banded>`                                                              |
+| một hàng LÀ liên kết (thay cho nút rời)         | `<ListRow asChild>`                                                                |
+| kẻ ô từng ngày trong lịch                       | `<Calendar bordered>`                                                              |
+| dải giữa hai vùng, tự kẻ theo VỊ TRÍ            | `<CardBar>` (`border` để ép khi xếp chồng)                                         |
+| chip "điều kiện đang bật" có dấu × để bỏ        | `<Badge onRemove>` — KHÔNG phải `TagInput`                                         |
+| dải tab nằm TRONG đầu Card                      | `<Card tabList activeTabKey onTabChange>`                                          |
+| tiêu đề / đoạn văn / liên kết trong văn bản     | `<Title>` · `<Paragraph>` · `<Link>` (`Text` 33 prop)                              |
+| nút nổi góc màn (quay lên đầu, hành động nhanh) | `<FloatButton>`                                                                    |
+| khung xương của một FORM khi đang tải           | `<SkeletonForm>`                                                                   |
+| ô màu chỉ để xem, màu do NGƯỜI DÙNG chọn        | `<Swatch>`                                                                         |
+| ảnh đại diện của một tệp / bản xem trước        | `<Thumbnail>`                                                                      |
+| danh sách "có gì trong gói này"                 | `<FeatureList>`                                                                    |
+| panel kéo giãn được (chia đôi màn)              | `<DraggablePanel>`                                                                 |
+| màn hội thoại AI                                | `<Welcome>` · `<Conversations>` · `<Attachments>` · `<ThoughtChain>` · `<Actions>` |
 
 Lỗi không phải "đoán sai tên prop" mà là **cho rằng nó không tồn tại nên không
 hỏi**.
 
-## Catalog chở PROP, không chở LUẬT BỐ CỤC
+## Dialog và AlertDialog là MỘT họ — `variant` là lối chuẩn
 
-`CardBar` trong manifest có đúng một prop (`extra`) — không dòng nào nói nó tự
-kẻ theo vị trí (đầu: kẻ dưới · cuối: kẻ trên · giữa: cả hai). Luật ấy chỉ nằm
-trong chú thích `node_modules/@godxjp/ui/src/styles/card-layout.css`.
+Đừng với tay sang 12 export `AlertDialog*` nữa. Chúng **vẫn chạy y như cũ** (gỡ
+là breaking change) nhưng là **LỐI CŨ**: đo được 26 export với **12 cặp trùng
+tên** và **0** phần chỉ `AlertDialog` mới có. antd — thẩm quyền bề mặt prop của
+gói này — chỉ có MỘT `Modal`, và mức nguy hiểm ở đó là một PROP.
 
-**Làm bố cục trong một component của DS → mở tệp `*-layout.css` của nó ra đọc.**
+```tsx
+<DialogContent variant="destructive">   {/* thay cho <AlertDialogContent> */}
+```
+
+Một prop ấy quyết định ba thứ đi cùng nhau: `role="alertdialog"`, click ra ngoài
+KHÔNG đóng, nút chính nhấn mạnh destructive (và ✕ mặc định tắt). Esc VẪN đóng —
+y như `AlertDialogContent` trước nay. Đặt `variant` ở `DialogRoot` thì cả cây kế
+thừa.
+
+## antd là CHUẨN — thiếu gì thì port 100%, đừng tự thiết kế
+
+`docs/DESIGN-AUTHORITY.md` của gói: **nơi antd đặt tên cho một năng lực, gói này
+lấy nguyên tên và nguyên ngữ nghĩa của antd.** Một năng lực còn thiếu được port
+từ antd **100% TRƯỚC** — tên, prop, ngữ nghĩa — rồi mới cải tiến. Không thiết kế
+lại trước, không port một nửa.
+
+Nghĩa là với consumer: thấy thiếu prop thì **mở issue kèm tên antd của nó**
+(`sorter`, `closable`, `okType`…), đừng đề xuất một cái tên mới và đừng tự vẽ
+lại bằng class tiện ích. Ba trục cố ý lệch khỏi antd đều đã ghi lý do trong
+DESIGN-AUTHORITY (logical thay cho `left/right`, từ vựng giá trị của gói này,
+`density` thay cho `size`) — lệch thêm thì phải viết ra ở đó.
+
+## Catalog giờ chở CẢ luật bố cục — nhưng phải hỏi mới có
+
+Mục này từng nói "catalog chở PROP, không chở LUẬT BỐ CỤC", với `CardBar` làm
+bằng chứng: một prop (`extra`), không dòng nào nói nó tự kẻ theo vị trí. **Bằng
+chứng ấy đã hết đúng.** `CardBar` nay có 6 prop, trong đó `border` (`"none" |
+"block-start" | "block-end" | "both"`) ép được đường kẻ khi xếp chồng, và cả
+`Card` lẫn `CardBar` trong catalog đều nói ra luật vị trí (đầu: kẻ dưới · cuối:
+kẻ trên · giữa: cả hai).
+
+Nên luật hiện hành là: **hỏi `get_component` trước** — nay nó thường trả lời cả
+hình dạng lẫn luật. Còn khi `usage`/`description` im lặng về bố cục thì mới mở
+`node_modules/@godxjp/ui/src/styles/*-layout.css` của component ấy ra đọc; chú
+thích trong đó vẫn là bản đầy đủ nhất.
 
 ## Card không lồng Card
 

package/scripts/guinea-pig-skill.md

@@ -101,6 +101,28 @@ Thứ tự ưu tiên, chỉ tiến khi bước trước thật sự không diễ
 **dùng → ghép → thêm prop vào component đã có → tạo component mới.**
 Một prop nữa hơn một component nữa.
 
+**Và TÊN không phải của bạn — nó là của antd.** `docs/DESIGN-AUTHORITY.md` (mục
+"The PROP SURFACE of a component is antd's too"): **nơi antd đặt tên cho một năng
+lực, kho này lấy nguyên tên và nguyên ngữ nghĩa của antd. Một năng lực còn thiếu
+được port từ antd 100% TRƯỚC — tên, prop, ngữ nghĩa — rồi mới cải tiến. Không
+thiết kế lại trước, và không port một nửa.**
+
+Đây là luật mới nhất và là luật hay bị bỏ qua nhất, vì nó nghe như lời khuyên.
+Cái giá của việc bỏ qua đã đo được: `DataTable` mọc `pin: "end"` nơi antd có
+`fixed`, `sortable: true` nơi antd có `sorter`, và không có câu trả lời nào cho
+filter/expandable — mỗi lần một người quyết một kiểu. Cùng hình dạng lỗi:
+`Dialog` + `AlertDialog` từng là 26 export với **12 cặp trùng tên** và **0** phần
+chỉ `AlertDialog` mới có, trong khi antd chỉ có MỘT `Modal` (nguy hiểm là một
+PROP, `okType`). Nay là một họ, `variant` là lối chuẩn, 12 export cũ ở lại vì gỡ
+là breaking. Và cả họ Ant Design X từng tới nửa vời — thiếu `Conversations`,
+`Attachments`, `ThoughtChain`, `Welcome`, `Actions`, nay đã đủ.
+
+Ba chỗ cố ý lệch khỏi antd (logical thay `left/right`, từ vựng giá trị của kho
+này, `density` thay `size`) đều **ghi lý do trong DESIGN-AUTHORITY**. Lệch thêm
+thì phải viết vào đó, không lệch lặng lẽ. Và đọc bề mặt antd từ **type đã cài ở
+một checkout khác**, không từ trí nhớ — `antd` đã bị gỡ khỏi devDependencies của
+kho này từ 20.0.0 và `check:no-antd-runtime` canh cho nó không quay lại.
+
 ### Bước 4 — Kiểm bằng tarball TRƯỚC khi phát hành
 
 Đây là bước làm cho "vừa làm vừa trải nghiệm" thành thật. Đừng phát hành rồi
@@ -303,15 +325,22 @@ không tồn tại nên không hỏi**.
 Trước khi viết bất kỳ bố cục nào: `search_components` + `get_component`. Rẻ hơn
 mọi lần sửa sau.
 
-**Nhưng catalog chở PROP, không chở LUẬT BỐ CỤC** — và đó là một khoảng trống
-thật của catalog, không chỉ là lỗi của người dùng nó. Ví dụ đo được: `CardBar`
-trong manifest có đúng một prop (`extra`), không dòng nào nói nó **tự lấy đường
-kẻ theo VỊ TRÍ** — đầu thì kẻ dưới, cuối thì kẻ trên, ở giữa thì cả hai. Luật ấy
-chỉ nằm trong chú thích của `src/styles/card-layout.css`, cùng chỗ định nghĩa hai
-nhịp `section` (header phẳng) và `band` (header có kẻ).
-
-Nên khi làm bố cục bên trong một component của DS: **mở tệp `*-layout.css` của
-nó ra đọc**. Một agent hỏi MCP đúng cách vẫn sẽ không biết những luật này.
+**Catalog từng chở PROP mà không chở LUẬT BỐ CỤC — và ví dụ ấy nay đã được vá,
+nên đừng trích nó nữa.** Bản trước của mục này viết: `CardBar` trong manifest có
+đúng một prop (`extra`), không dòng nào nói nó tự lấy đường kẻ theo VỊ TRÍ. Đo
+lại hôm nay: `CardBar` có **6 prop**, trong đó `border` (`"none" | "block-start"
+| "block-end" | "both"`) ép được đường kẻ khi xếp chồng, và luật vị trí (đầu: kẻ
+dưới · cuối: kẻ trên · giữa: cả hai) nằm **trong chính catalog** — ở `usage` của
+`CardBar` lẫn `description` của `Card`.
+
+Bài học còn lại vẫn thật, chỉ đổi hình: một luật bố cục **có thể** chỉ sống
+trong chú thích CSS, và không có cổng nào bắt nó phải lên catalog. Nên:
+
+1. Hỏi `get_component` trước — nay nó thường trả lời cả hình dạng lẫn luật.
+2. `usage`/`description` im lặng về bố cục → mở `src/styles/*-layout.css` của
+   component ấy ra đọc (chỗ định nghĩa hai nhịp `section` và `band` chẳng hạn).
+3. Là chuột bạch, khi bước 2 phải dùng tới, đó là **khoảng trống catalog** — đưa
+   luật ấy lên `usage` trong cùng PR, theo §4. Đó là cách `CardBar` được vá.
 
 ## 6. Thứ KHÔNG đẩy lên DS
 

package/scripts/ui-audit.mjs

@@ -902,8 +902,24 @@ function jsxOpeningEnd(source, start) {
  * filters AND a table is a mixed body, where the padding is correct — the reporter hit that trap
  * with a `childElementCount === 1` test.
  */
+/*
+ * The alternation is DERIVED from the stylesheet, not guessed. `SkeletonTable` was missing and the
+ * same mistake went through silently (gh#611) — which is the worse half, because `SkeletonTable`
+ * is the package's OWN stand-in for `DataTable`: a consumer writes the skeleton and the table side
+ * by side, one is flagged and the other is not.
+ *
+ * The list to match is exactly what `[data-slot="card-content"][data-flush]` special-cases in CSS,
+ * because a per-pair exception there IS the statement that the pair matters:
+ *
+ *     .ui-data-table-root · .ui-data-table-scroll · .ui-data-table-toolbar   → DataTable
+ *     .ui-skeleton-table                                                     → SkeletonTable
+ *
+ * `Table` stays because it is the primitive `DataTable` is built from and a consumer can place it
+ * directly. Adding a component to that CSS block without adding it here reopens this issue, so the
+ * two are checked against each other in the rule's test.
+ */
 const CARD_TABLE_FLUSH = new RegExp(
-  `<CardContent(?![^>]*\\bflush\\b)(?:\\s${ATTRS})?>\\s*<(?:DataTable|Table)\\b`,
+  `<CardContent(?![^>]*\\bflush\\b)(?:\\s${ATTRS})?>\\s*<(?:DataTable|SkeletonTable|Table)\\b`,
   "g",
 );
 
@@ -1006,7 +1022,7 @@ function staleOwnedRules() {
       `This file is written by @godxjp/ui and says version ${stamped}, but the installed package ` +
       `is ${installed}. Its rules describe a different library than the one you are building ` +
       "against — most likely because `ignore-scripts=true` kept our postinstall from running.",
-    replacement: 'INIT_CWD="$PWD" node node_modules/@godxjp/ui/scripts/postinstall.mjs',
+    replacement: "npx @godxjp/ui sync-rules",
     snippet: `<!-- godxjp-ui:version ${stamped} --> vs installed ${installed}`,
   };
 }