@godxjp/ui 18.2.0 → 18.4.0

package/README.md

@@ -70,7 +70,7 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 | **Layout**         | `@godxjp/ui/layout`       | `Flex`, `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                                               |
 | **General**        | `@godxjp/ui/general`      | `Button`                                                                                                                                                                                                                                |
 | **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `Field`, `DatePicker`, `TimePicker`, `Combobox`, `Switch`, `Toggle`, `Upload`, `Cascader`, `TreeSelect`, `ColorPicker`, `Slider`, `PasswordInput`, `PasswordStrength`, `InputOTP`, `Rating`, `TagInput` |
-| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                                       |
+| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                         |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
 | **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
 | **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |
@@ -121,7 +121,7 @@ separate `@godxjp/ui/data-grid` (`DataGrid`) subpath has been merged in and remo
 ## Consumer setup — theme is self-contained
 
 The framework ships colors, the type scale, the wa-iro palette, and (opt-in)
-bundled fonts (Noto Sans JP + Montserrat via `@fontsource`). A consumer's entire
+bundled fonts (M PLUS 2 + Noto Sans JP fallback via `@fontsource`). A consumer's entire
 styling surface is **one import + content sources** — no `:root` overrides, no
 font `<link>`:
 

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

@@ -4,6 +4,9 @@ export { ListRow } from "./list-row.js";
 export type { ListRowProps } from "./list-row.js";
 export { CredentialReveal } from "./credential-reveal.js";
 export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "./credential-reveal.js";
+export { QrCode } from "./qr-code.js";
+export type { QrCodeProps } from "./qr-code.js";
+export type { QrCodeProp } from "../../props/components/data-display.prop.js";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card.js";
 export type { StatCardProps, CardBarProps } from "./card.js";

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

@@ -1,6 +1,7 @@
 import { Badge } from "./badge.js";
 import { ListRow } from "./list-row.js";
 import { CredentialReveal } from "./credential-reveal.js";
+import { QrCode } from "./qr-code.js";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 import {
   Card,
@@ -86,6 +87,7 @@ export {
   PopoverTitle,
   PopoverTrigger,
   Progress,
+  QrCode,
   ScrollArea,
   ScrollBar,
   StatCard,

package/dist/components/data-display/qr-code.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { QrCodeProp } from "../../props/components/data-display.prop.js";
+export type QrCodeProps = QrCodeProp & Omit<React.ComponentPropsWithoutRef<"svg">, keyof QrCodeProp | "children" | "role" | "style" | "type">;
+/**
+ * Renders a QR code entirely in-process. The encoded value is never sent to a network service,
+ * written to an element attribute, or included in accessible text.
+ */
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "children" | "role" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/data-display/qr-code.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { QRCodeSVG } from "qrcode.react";
+import { cn } from "../../lib/utils.js";
+const QR_INTRINSIC_SIZE = 256;
+const QrCode = React.forwardRef(
+  ({ value, label, size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      QRCodeSVG,
+      {
+        ref,
+        ...props,
+        value,
+        title: label,
+        size: QR_INTRINSIC_SIZE,
+        level: "M",
+        boostLevel: true,
+        marginSize: 4,
+        bgColor: "hsl(var(--qr-code-background))",
+        fgColor: "hsl(var(--qr-code-foreground))",
+        role: "img",
+        "aria-label": label,
+        focusable: "false",
+        "data-slot": "qr-code",
+        "data-size": size,
+        className: cn("ui-qr-code", className)
+      }
+    );
+  }
+);
+QrCode.displayName = "QrCode";
+export {
+  QrCode
+};

package/dist/components/layout/app-shell.js

@@ -49,7 +49,7 @@ function AppShell({
             type: "button",
             variant: "ghost",
             size: "sm",
-            className: "app-mobile-nav-trigger hidden max-lg:inline-flex",
+            className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
             "aria-label": t("layout.appShell.openNav"),
             "aria-haspopup": "dialog",
             children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })

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

@@ -110,6 +110,17 @@ export type CredentialRevealProp = {
     id?: IdProp;
     "aria-label"?: string;
 };
+/** @see QrCode */
+export type QrCodeProp = {
+    /** Sensitive or public value encoded locally into the QR modules. */
+    value: string;
+    /** Purpose-specific accessible name. The encoded value is never used as accessible text. */
+    label: string;
+    /** Natural display size. Default `md`. */
+    size?: SizeProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+};
 /** @see DataTable */
 export type DataTableProp<T> = {
     data: T[];

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

@@ -1,7 +1,7 @@
 export type { AppShellProp, 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, DateRangePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
-export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, } from "./data-display.prop.js";
+export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";

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

@@ -76,7 +76,7 @@ export type AppShellProp = {
     footer?: ReactNode;
     sidebarCollapsed?: boolean;
     /**
-     * Navigation shown in the mobile drawer below the `lg` breakpoint, where the docked sidebar is
+     * Navigation shown in the mobile drawer at the DXS 900px breakpoint, where the docked sidebar is
      * hidden. AppShell OWNS the drawer: it renders a hamburger trigger in the topbar and a focus-
      * trapped Sheet (Esc + overlay close, focus returns to the trigger) — hiding the sidebar without
      * a reachable alternative is invalid (gh#165). Defaults to `sidebar`, so the same nav is

package/dist/props/registry.d.ts

@@ -734,6 +734,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["LabelProp", "SizeProp", "ToneProp", "OnValueChangeProp", "HandlerProp", "ClassNameProp", "IdProp"];
     };
+    readonly QrCodeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"];
+    };
     readonly ChartSeriesProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";

package/dist/props/registry.js

@@ -810,6 +810,11 @@ const COMPONENT_PROP_REGISTRY = {
       "IdProp"
     ]
   },
+  QrCodeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"]
+  },
   ChartSeriesProp: {
     group: "data-display",
     file: "components/charts.prop.ts",

package/dist/styles/base.css

@@ -27,7 +27,7 @@
  * base sans. Consumers switch a locale's face by setting its slot, e.g.
  *   :root { --font-sans-ja: "Noto Sans JP", var(--font-sans-base); }
  * without writing any [lang] selectors. The opt-in bundle styles/fonts fills
- * these slots for its Noto Sans JP + Montserrat faces. `--font-sans-base` is a
+ * these slots for its M PLUS 2 + Noto Sans JP fallback. `--font-sans-base` is a
  * separate token (not --font-family-sans) so the fallback can't self-reference. */
 [lang="ja"] {
   --font-family-sans: var(--font-sans-ja, var(--font-sans-base));

package/dist/styles/card-layout.css

@@ -42,7 +42,7 @@
     overflow: hidden;
   }
 
-  /* ── Surface variants — fill only; flat at rest (border, no shadow) ──── */
+  /* ── Surface variants — fill only; retain the shared DXS surface elevation ──── */
   [data-slot="card"][data-variant="muted"] {
     background: hsl(var(--secondary));
   }

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

@@ -534,4 +534,23 @@
     display: flex;
     justify-content: flex-end;
   }
+
+  /* QrCode — a quiet, scanner-safe SVG surface with an ISO/IEC-style four-module quiet zone
+   * supplied by the encoder. Sizing is natural rather than stretched across its container. */
+  .ui-qr-code {
+    display: block;
+    inline-size: var(--qr-code-size-md);
+    block-size: auto;
+    max-inline-size: 100%;
+    aspect-ratio: 1;
+  }
+  .ui-qr-code[data-size="xs"] {
+    inline-size: var(--qr-code-size-xs);
+  }
+  .ui-qr-code[data-size="sm"] {
+    inline-size: var(--qr-code-size-sm);
+  }
+  .ui-qr-code[data-size="lg"] {
+    inline-size: var(--qr-code-size-lg);
+  }
 }

package/dist/styles/dialog-layout.css

@@ -132,4 +132,8 @@
     font-size: var(--font-size-base);
     color: hsl(var(--muted-foreground));
   }
+
+  [data-slot="dialog-header"]:not([data-tone="default"]) [data-slot="dialog-description"] {
+    color: hsl(var(--foreground));
+  }
 }

package/dist/styles/fonts.css

@@ -3,35 +3,33 @@
  *
  * Self-contained so consumers need no font config. The browser only downloads
  * the subset files matching the rendered text:
- *   · Noto Sans JP — the DEFAULT face (Japanese + Latin), used for all locales
- *                    except `vi`.
- *   · Montserrat   — swapped in for the Vietnamese locale (`<html lang="vi">`),
- *                    incl. its `vietnamese` subset for full diacritics.
- *                    See --font-family-sans + :lang(vi) in base.css.
+ *   · M PLUS 2 — the DXS DEFAULT face for Japanese and Latin, including the
+ *                Vietnamese glyph coverage used by the product locales.
+ *   · Noto Sans JP — retained as the CJK fallback after M PLUS 2.
  *
  * The all-in-one `@godxjp/ui/styles` entry pulls this in automatically. If you
  * manage fonts yourself (e.g. next/font), DON'T import this — import
  * `@godxjp/ui/styles/base` + the layout layers you use and supply your own
  * faces via the --font-family-* tokens.
  * ───────────────────────────────────────────────────────────────────────── */
+@import "@fontsource/m-plus-2/400.css";
+@import "@fontsource/m-plus-2/500.css";
+@import "@fontsource/m-plus-2/700.css";
 @import "@fontsource/noto-sans-jp/400.css";
 @import "@fontsource/noto-sans-jp/500.css";
 @import "@fontsource/noto-sans-jp/700.css";
-@import "@fontsource/montserrat/400.css";
-@import "@fontsource/montserrat/500.css";
-@import "@fontsource/montserrat/700.css";
 
 /* Fill the font-token slots (see tokens/foundation.css + styles/base.css) with
  * the bundled faces, so the all-in-one `@godxjp/ui/styles` entry stays
- * zero-config: Noto Sans JP is the default face (Japanese + clean Latin), and
- * the Vietnamese locale leads with Montserrat (Noto Sans JP tail keeps CJK
- * glyphs, which Montserrat lacks). Consumers on the per-layer setup who supply
- * their own faces simply DON'T import this file and set the slots themselves. */
+ * zero-config: M PLUS 2 is the DXS default face for every supported locale and
+ * Noto Sans JP remains its CJK fallback. Consumers on the per-layer setup who
+ * supply their own faces simply DON'T import this file and set the slots. */
 :root {
   --font-sans-base:
-    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    system-ui, "Hiragino Sans", sans-serif;
+    "M PLUS 2", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
+    "Noto Sans JP", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
+    sans-serif;
   --font-sans-vi:
-    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    system-ui, "Noto Sans JP", sans-serif;
+    "M PLUS 2", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
+    sans-serif;
 }

package/dist/styles/layout.css

@@ -414,7 +414,7 @@
    * touch targets remain readable while page chrome stops competing with primary actions. A
    * single Flex action group must wrap even when the consumer omitted `wrap`, because clipping
    * header actions makes functionality unreachable. */
-  @media (max-width: 639px) {
+  @media (max-width: 720px) {
     .ui-page-container {
       --space-page-active-x: var(--space-page-compact-x);
       --space-page-active-y: var(--space-page-compact-y);

package/dist/styles/shell-layout.css

@@ -11,11 +11,9 @@
       "sidebar main"
       "sidebar footer";
     grid-template-columns: 16rem minmax(0, 1fr);
-    grid-template-rows: 3.25rem minmax(0, 1fr) auto;
+    grid-template-rows: var(--app-shell-bar-height) minmax(0, 1fr) auto;
     height: 100vh;
-    background:
-      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
-      hsl(var(--background));
+    background: hsl(var(--background));
   }
 
   .app-root[data-collapsed="true"] {
@@ -46,10 +44,9 @@
     gap: var(--space-3);
     padding-inline: var(--space-4);
     border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--background) / 0.92);
+    background: hsl(var(--card));
     /* Opt-in brand-chrome wash — invisible by default (--topbar-gradient: none). */
     background-image: var(--topbar-gradient);
-    backdrop-filter: blur(12px);
   }
 
   .app-main {
@@ -69,6 +66,7 @@
      * content can never extend the document scroll height (gh#104 — same shell-containment
      * family as the gh#103 body-stretch void). */
     contain: paint;
+    background-color: var(--app-shell-main-background);
   }
 
   .app-footer {
@@ -78,7 +76,8 @@
   }
 
   .app-main .ui-page-container {
-    max-width: none;
+    width: 100%;
+    max-width: var(--app-shell-page-max-width);
   }
 
   /*
@@ -92,9 +91,7 @@
     display: flex;
     min-height: 100dvh;
     flex-direction: column;
-    background:
-      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
-      hsl(var(--background));
+    background: hsl(var(--muted));
   }
 
   .ui-auth-shell-bar {
@@ -135,9 +132,7 @@
     display: flex;
     min-height: 100dvh;
     flex-direction: column;
-    background:
-      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
-      hsl(var(--background));
+    background: hsl(var(--muted));
   }
 
   .ui-centered-shell-bar {
@@ -149,10 +144,9 @@
     gap: var(--space-3);
     padding-inline: var(--centered-shell-bar-padding-x);
     border-bottom: 1px solid hsl(var(--border));
-    background: hsl(var(--background) / 0.92);
+    background: hsl(var(--card));
     /* Opt-in brand-chrome wash — shares the topbar hook, invisible by default (none). */
     background-image: var(--topbar-gradient);
-    backdrop-filter: blur(12px);
   }
 
   .ui-centered-shell-main {
@@ -235,7 +229,7 @@
     font-size: var(--font-size-base);
   }
 
-  @media (width < 64rem) {
+  @media (width <= 56.25rem) {
     .app-root,
     .app-root[data-collapsed="true"] {
       grid-template-areas:
@@ -265,7 +259,7 @@
   .sb-product,
   .sb-brand {
     display: flex;
-    min-height: 3.25rem;
+    min-height: var(--app-shell-bar-height);
     align-items: center;
     gap: var(--space-2);
     padding-inline: var(--space-4);
@@ -294,8 +288,8 @@
 
   .sb-logo-mark {
     display: grid;
-    width: 1.75rem;
-    height: 1.75rem;
+    width: var(--sidebar-brand-mark-size);
+    height: var(--sidebar-brand-mark-size);
     flex: 0 0 auto;
     place-items: center;
     border-radius: var(--radius);
@@ -344,14 +338,15 @@
   .sb-nav-scroll {
     flex: 1;
     overflow-y: auto;
+    padding: var(--space-3) var(--space-2);
   }
 
   .sb-section {
-    padding: var(--space-3) var(--space-2);
+    padding: 0;
   }
 
   .sb-section + .sb-section {
-    border-top: 1px solid hsl(var(--border));
+    margin-top: var(--space-4);
   }
 
   .sb-section-label {
@@ -373,18 +368,18 @@
   .sb-nav-item {
     display: flex;
     width: 100%;
-    height: var(--control-height);
+    height: var(--sidebar-nav-item-height);
     min-width: 0;
     align-items: center;
-    gap: var(--space-2);
-    padding-inline: var(--space-2);
+    gap: 0.625rem;
+    padding-inline: 0.625rem;
     border: 0;
     border-radius: calc(var(--radius) - 1px);
     background: transparent;
     color: hsl(var(--muted-foreground));
     cursor: pointer;
     font-family: inherit;
-    font-size: var(--font-size-base);
+    font-size: var(--sidebar-nav-item-font-size);
     text-align: start;
   }
 
@@ -737,7 +732,7 @@
 
   .tb-search {
     display: flex;
-    width: min(20rem, 30vw);
+    width: min(var(--topbar-search-max-width), 40vw);
     height: var(--control-height-sm);
     align-items: center;
     gap: var(--space-2);

package/dist/tokens/components/card.css

@@ -41,11 +41,10 @@
    * --card-header-background-alpha: 0 for a quiet borderless-band header.
    * Default = 1px solid hsl(var(--card-border)) (resolved at the call site). */
   --card-header-border-bottom: initial;
-  --card-radius: var(--radius);
-  /* Resting elevation — quiet by default (rule #44): cards are flat (1px border, no shadow) in the
-   * reference-design baseline. A service that wants lifted cards sets this to an elevation token once,
-   * e.g. --card-shadow: var(--shadow-sm), and every Card picks up the shadow with no markup change. */
-  --card-shadow: 0 0 0 0 transparent;
+  --card-radius: var(--radius-xl);
+  /* The DXS hi-fi baseline uses a quiet 10px data surface with one shadow-sm
+   * elevation layer. Consumers can still flatten or lift cards through this knob. */
+  --card-shadow: var(--shadow-sm);
   /* Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the
    * surface box-shadow so a service can wash every card with the global glow, e.g.
    * --card-glow: var(--shadow-glow), with no markup change. */

package/dist/tokens/components/data-display.css

@@ -31,4 +31,13 @@
      re-resolves under a scoped theme. Defaults = hsl(var(--primary) / 0.3) border · 0.05 fill. */
   --tree-item-active-border: initial;
   --tree-item-active-background: initial;
+
+  /* QR codes stay scanner-safe in light and dark application themes. Consumers may override these
+     component tokens only when the resulting pair retains strong contrast. */
+  --qr-code-foreground: 0 0% 0%;
+  --qr-code-background: 0 0% 100%;
+  --qr-code-size-xs: 6rem;
+  --qr-code-size-sm: 8rem;
+  --qr-code-size-md: 10rem;
+  --qr-code-size-lg: 12.5rem;
 }

package/dist/tokens/components/shell.css

@@ -20,6 +20,16 @@
   --sidebar-gradient: none;
   --topbar-gradient: none;
 
+  /* DXS application-shell geometry. These defaults mirror the checked-in
+   * Admin/Console hi-fi source while remaining themeable by consumers. */
+  --app-shell-bar-height: 3rem;
+  --app-shell-page-max-width: 80rem;
+  --app-shell-main-background: hsl(var(--muted) / 0.4);
+  --sidebar-brand-mark-size: 1.375rem;
+  --sidebar-nav-item-height: 2rem;
+  --sidebar-nav-item-font-size: 0.8125rem;
+  --topbar-search-max-width: 26.25rem;
+
   /* Sidebar active-item tint/marker — `initial` so the role defaults re-resolve at the call site
    * under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override
    * never reaches it). A service re-tunes the active sub-item accent without forking CSS.
@@ -47,7 +57,7 @@
    * account, standalone settings). The bar mirrors AppShell's `.app-topbar` chrome (fixed height +
    * inline padding); the column max-width has three tiers, all wider than the 24rem auth card. A
    * service retunes the bar inset, block padding and each width tier without forking CSS. */
-  --centered-shell-bar-height: 3.25rem;
+  --centered-shell-bar-height: var(--app-shell-bar-height);
   --centered-shell-bar-padding-x: var(--space-4);
   --centered-shell-main-padding: var(--space-6);
   --centered-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);

package/dist/tokens/foundation.css

@@ -161,8 +161,8 @@
    *        --font-sans-zh-hans  (lang="zh" | "zh-Hans" | "zh-CN")
    *        --font-sans-zh-hant  (lang="zh-Hant" | "zh-TW")
    *      e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
-   * The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots for its bundled
-   * Noto Sans JP + Montserrat faces, so the all-in-one entry is zero-config. */
+   * The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots with the DXS
+   * M PLUS 2 face and Noto Sans JP fallback, so the all-in-one entry is zero-config. */
   --font-sans-base:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
     sans-serif;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.2.0",
-  "godxUiMcp": "18.2.0",
+  "version": "18.4.0",
+  "godxUiMcp": "18.3.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {
@@ -374,7 +374,7 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
-    "@fontsource/montserrat": "^5.2.8",
+    "@fontsource/m-plus-2": "^5.2.9",
     "@fontsource/noto-sans-jp": "^5.2.9",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",
@@ -410,6 +410,7 @@
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^1.25.0",
+    "qrcode.react": "4.2.0",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.2",
     "sonner": "^2.0.7",
@@ -427,6 +428,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.19.19",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
@@ -437,7 +439,9 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^15.15.0",
     "jsdom": "^29.1.1",
+    "jsqr": "^1.4.0",
     "playwright": "^1.61.1",
+    "pngjs": "^7.0.0",
     "prettier": "^3.9.5",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.2.7",