@godxjp/ui 13.15.0 → 13.16.0

package/dist/app/app-provider.d.ts

@@ -1,7 +1,7 @@
 import { type AppDateFormat, type AppLocale, type AppTimeFormat, type AppTimezone } from "./types";
 import type { AppContextValue, AppProviderProp } from "../props/components/app.prop";
 export type { AppProviderProp, AppContextValue } from "../props/components/app.prop";
-export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, }: AppProviderProp): import("react/jsx-runtime").JSX.Element;
+export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, scaling: initialScaling, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, onScalingChange, }: AppProviderProp): import("react/jsx-runtime").JSX.Element;
 export declare function useAppContext(): AppContextValue;
 /** Returns null outside AppProvider — used by pickers for optional context. */
 export declare function useOptionalAppContext(): AppContextValue | null;

package/dist/app/app-provider.js

@@ -63,6 +63,7 @@ function AppProvider({
   brand: initialBrand = null,
   density: initialDensity = "default",
   fontSize: initialFontSize = "default",
+  scaling: initialScaling = null,
   onLocaleChange,
   onTimezoneChange,
   onTimeFormatChange,
@@ -70,7 +71,8 @@ function AppProvider({
   onThemeChange,
   onBrandChange,
   onDensityChange,
-  onFontSizeChange
+  onFontSizeChange,
+  onScalingChange
 }) {
   const initialLocale = defaultLocale;
   const [locale, setLocaleState] = React.useState(initialLocale);
@@ -87,6 +89,7 @@ function AppProvider({
   const [brand, setBrandState] = React.useState(initialBrand);
   const [density, setDensityState] = React.useState(initialDensity);
   const [fontSize, setFontSizeState] = React.useState(initialFontSize);
+  const [scaling, setScalingState] = React.useState(initialScaling);
   const hasMountedRef = React.useRef(false);
   const prefsRef = React.useRef({
     locale,
@@ -96,7 +99,8 @@ function AppProvider({
     theme,
     brand,
     density,
-    fontSize
+    fontSize,
+    scaling
   });
   React.useEffect(() => {
     const stored = persist ? readStoredPreferences(storageKey) : {};
@@ -116,6 +120,7 @@ function AppProvider({
     const nextBrand = stored.brand ?? initialBrand;
     const nextDensity = stored.density ?? initialDensity;
     const nextFontSize = stored.fontSize ?? initialFontSize;
+    const nextScaling = stored.scaling ?? initialScaling;
     prefsRef.current = {
       locale: nextLocale,
       timezone: nextTimezone,
@@ -124,7 +129,8 @@ function AppProvider({
       theme: nextTheme,
       brand: nextBrand,
       density: nextDensity,
-      fontSize: nextFontSize
+      fontSize: nextFontSize,
+      scaling: nextScaling
     };
     setLocaleState(nextLocale);
     setTimezoneState(nextTimezone);
@@ -134,6 +140,7 @@ function AppProvider({
     setBrandState(nextBrand);
     setDensityState(nextDensity);
     setFontSizeState(nextFontSize);
+    setScalingState(nextScaling);
   }, [
     defaultDateFormat,
     defaultLocale,
@@ -143,17 +150,28 @@ function AppProvider({
     initialBrand,
     initialDensity,
     initialFontSize,
+    initialScaling,
     persist,
     storageKey,
     systemTimezone
   ]);
   React.useEffect(() => {
-    prefsRef.current = { locale, timezone, timeFormat, dateFormat, theme, brand, density, fontSize };
-  }, [locale, timezone, timeFormat, dateFormat, theme, brand, density, fontSize]);
+    prefsRef.current = {
+      locale,
+      timezone,
+      timeFormat,
+      dateFormat,
+      theme,
+      brand,
+      density,
+      fontSize,
+      scaling
+    };
+  }, [locale, timezone, timeFormat, dateFormat, theme, brand, density, fontSize, scaling]);
   React.useEffect(() => {
     if (typeof document === "undefined") return;
-    applyThemeAxes(document.documentElement, { theme, brand, density, fontSize });
-  }, [theme, brand, density, fontSize]);
+    applyThemeAxes(document.documentElement, { theme, brand, density, fontSize, scaling });
+  }, [theme, brand, density, fontSize, scaling]);
   const setLocale = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, locale: next };
@@ -226,6 +244,15 @@ function AppProvider({
     },
     [onFontSizeChange, persist, storageKey]
   );
+  const setScaling = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, scaling: next };
+      setScalingState(next);
+      onScalingChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onScalingChange, persist, storageKey]
+  );
   const requestHeaders = React.useMemo(
     () => buildRequestHeaders(locale, timezone, timeFormat, dateFormat),
     [locale, timezone, timeFormat, dateFormat]
@@ -269,6 +296,7 @@ function AppProvider({
       brand,
       density,
       fontSize,
+      scaling,
       setLocale,
       setTimezone,
       setTimeFormat,
@@ -276,7 +304,8 @@ function AppProvider({
       setTheme,
       setBrand,
       setDensity,
-      setFontSize
+      setFontSize,
+      setScaling
     }),
     [
       locale,
@@ -291,6 +320,7 @@ function AppProvider({
       brand,
       density,
       fontSize,
+      scaling,
       setLocale,
       setTimezone,
       setTimeFormat,
@@ -298,7 +328,8 @@ function AppProvider({
       setTheme,
       setBrand,
       setDensity,
-      setFontSize
+      setFontSize,
+      setScaling
     ]
   );
   return /* @__PURE__ */ jsx(AppContext.Provider, { value, children });

package/dist/app/storage.d.ts

@@ -11,6 +11,8 @@ export type StoredAppPreferences = {
     brand?: AppBrand | null;
     density?: AppDensity;
     fontSize?: AppFontSize;
+    /** Continuous global size multiplier; `null` defers to the density preset. */
+    scaling?: number | null;
 };
 export declare function readStoredPreferences(storageKey: string): StoredAppPreferences;
 export declare function writeStoredPreferences(storageKey: string, preferences: StoredAppPreferences): void;

package/dist/app/storage.js

@@ -22,7 +22,8 @@ function readStoredPreferences(storageKey) {
       theme: isAppTheme(parsed.theme) ? parsed.theme : void 0,
       brand: isAppBrand(parsed.brand) ? parsed.brand : void 0,
       density: isAppDensity(parsed.density) ? parsed.density : void 0,
-      fontSize: isAppFontSize(parsed.fontSize) ? parsed.fontSize : void 0
+      fontSize: isAppFontSize(parsed.fontSize) ? parsed.fontSize : void 0,
+      scaling: typeof parsed.scaling === "number" && Number.isFinite(parsed.scaling) ? parsed.scaling : void 0
     };
   } catch {
     return {};

package/dist/app/theme-axes.d.ts

@@ -11,12 +11,15 @@ export declare const APP_THEMES: readonly ["light", "dark"];
 export declare const APP_BRANDS: readonly ["brand", "crm", "logistics", "partner", "slate"];
 export declare const APP_DENSITIES: readonly ["compact", "default", "comfortable"];
 export declare const APP_FONT_SIZES: readonly ["sm", "default", "lg"];
-/** The four axes as held by AppProvider. `brand: null` opts out (app token wins). */
+/** The axes as held by AppProvider. `brand: null` opts out (app token wins).
+ * `scaling: null` defers to the density preset; a number is the continuous global
+ * size multiplier (the `--scaling` factor / Radix model) and overrides the preset. */
 export type AppThemeAxes = {
     theme: AppTheme;
     brand: AppBrand | null;
     density: AppDensity;
     fontSize: AppFontSize;
+    scaling: number | null;
 };
 export declare const isAppTheme: (v: unknown) => v is AppTheme;
 export declare const isAppBrand: (v: unknown) => v is AppBrand;

package/dist/app/theme-axes.js

@@ -24,6 +24,10 @@ function applyThemeAxes(el, axes) {
     if (axes.brand === null) delete el.dataset.brand;
     else el.dataset.brand = axes.brand;
   }
+  if (axes.scaling !== void 0) {
+    if (axes.scaling === null) el.style.removeProperty("--scaling");
+    else el.style.setProperty("--scaling", String(axes.scaling));
+  }
 }
 export {
   APP_BRANDS,

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

@@ -42,6 +42,13 @@ export type AppProviderProp = {
     density?: AppDensity;
     /** Initial base type size — written to `<html data-font-size>`. Default: `"default"`. */
     fontSize?: AppFontSize;
+    /**
+     * Continuous global size multiplier — sets inline `--scaling` on `<html>`. Every
+     * size token (spacing, control/table/checkbox/switch heights, radius) rescales in
+     * proportion (Radix-style). `null` (default) defers to the `density` preset; a
+     * number (e.g. `0.95`) overrides it. Type is a separate axis — not scaled.
+     */
+    scaling?: number | null;
     onLocaleChange?: (locale: AppLocale) => void;
     onTimezoneChange?: (timezone: AppTimezone) => void;
     onTimeFormatChange?: (timeFormat: AppTimeFormat) => void;
@@ -50,6 +57,7 @@ export type AppProviderProp = {
     onBrandChange?: (brand: AppBrand | null) => void;
     onDensityChange?: (density: AppDensity) => void;
     onFontSizeChange?: (fontSize: AppFontSize) => void;
+    onScalingChange?: (scaling: number | null) => void;
 };
 /** Which AppProvider setting the {@link AppSettingPicker} reads/writes. */
 export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat" | "theme" | "brand" | "density" | "fontSize";
@@ -81,11 +89,12 @@ export type AppContextValue = {
     requestHeaders: AppRequestHeaders;
     /** Configured timezone list; `undefined` → full IANA in the timezone-picker recipe. */
     timezoneOptions?: readonly AppTimezone[];
-    /** Current theme axes (mirror `<html data-*>`). */
+    /** Current theme axes (mirror `<html data-*>` / inline `--scaling`). */
     theme: AppTheme;
     brand: AppBrand | null;
     density: AppDensity;
     fontSize: AppFontSize;
+    scaling: number | null;
     setLocale: (locale: AppLocale) => void;
     setTimezone: (timezone: AppTimezone) => void;
     setTimeFormat: (timeFormat: AppTimeFormat) => void;
@@ -94,4 +103,5 @@ export type AppContextValue = {
     setBrand: (brand: AppBrand | null) => void;
     setDensity: (density: AppDensity) => void;
     setFontSize: (fontSize: AppFontSize) => void;
+    setScaling: (scaling: number | null) => void;
 };

package/dist/styles/density.css

@@ -1,54 +1,31 @@
 /*
- * DENSITY — one knob retunes φ-unit, controls, tables. Two entry points, same vars:
- *   • `<PageContainer density>` → `.ui-density-*` class (scoped, overrides global).
- *   • the density AXIS → `:root[data-density="*"]` on <html> (AppProvider density prop),
- *     so density cascades app-wide incl. portalled overlays. PageContainer inherits it
- *     when its `density` prop is unset (emits no class).
- * Apps use the prop / axis, never these classes directly.
+ * DENSITY — named presets of the global `--scaling` factor (foundation.css).
+ * One knob: density sets `--scaling`, and every size token (spacing grid, control
+ * / table / checkbox / switch heights, radius, and everything derived from them)
+ * rescales in proportion. Two entry points, same variable:
+ *   • `<PageContainer density>` → `.ui-density-*` class (scoped to a descendant,
+ *     wins for its subtree by proximity).
+ *   • the density AXIS → `:root[data-density="*"]` on <html> (AppProvider density
+ *     prop), so it cascades app-wide incl. portalled overlays. For a value off the
+ *     three presets, set `--scaling` directly (AppProvider `scaling` prop).
+ *
+ * INTENTIONALLY UNLAYERED — do NOT wrap in `@layer components`. `--scaling` has an
+ * unlayered `:root` default (foundation.css); a layered `:root[data-density]` would
+ * always lose to it regardless of specificity, making the axis a no-op on <html>.
+ * Unlayered, `:root[data-density="x"]` (0,2,0) beats the `:root` default (0,1,0).
  */
 
-@layer components {
-  .ui-density-compact,
-  :root[data-density="compact"] {
-    --control-height: var(--control-height-compact);
-    --control-padding-x: var(--control-padding-x-compact);
-    --table-row-height: var(--table-row-height-compact);
-    --phi-unit: var(--space-3);
-    --checkbox-size: var(--checkbox-size-compact);
-    --switch-width: var(--switch-width-compact);
-    --switch-height: var(--switch-height-compact);
-    --switch-thumb-size: var(--switch-thumb-size-compact);
-    --switch-thumb-translate: var(--switch-thumb-translate-compact);
-    --table-cell-padding-y: var(--space-1);
-    /* Tighter overlay/card chrome at compact density (12px vertical). */
-    --space-chrome-y: var(--space-3);
-  }
+.ui-density-compact,
+:root[data-density="compact"] {
+  --scaling: 0.92;
+}
 
-  .ui-density-default,
-  :root[data-density="default"] {
-    --control-height: var(--control-height-default);
-    --control-padding-x: var(--control-padding-x-default);
-    --table-row-height: var(--table-row-height-default);
-    --table-cell-padding-y: var(--space-2);
-  }
+.ui-density-default,
+:root[data-density="default"] {
+  --scaling: 1;
+}
 
-  .ui-density-comfortable,
-  :root[data-density="comfortable"] {
-    --control-height: var(--control-height-comfortable);
-    /* Comfortable steps 44 → 36 → 32 (design spacing-density), steeper than the
-     * default 4px step so sm/xs aren't left 4px too tall. */
-    --control-height-sm: calc(var(--control-height) - 0.5rem);
-    --control-height-xs: calc(var(--control-height) - 0.75rem);
-    --control-padding-x: var(--control-padding-x-comfortable);
-    --table-row-height: var(--table-row-height-comfortable);
-    --phi-unit: var(--space-6);
-    --checkbox-size: var(--checkbox-size-comfortable);
-    --switch-width: var(--switch-width-comfortable);
-    --switch-height: var(--switch-height-comfortable);
-    --switch-thumb-size: var(--switch-thumb-size-comfortable);
-    --switch-thumb-translate: var(--switch-thumb-translate-comfortable);
-    --table-cell-padding-y: var(--space-2);
-    /* Roomier overlay/card chrome at comfortable density (24px vertical). */
-    --space-chrome-y: var(--space-6);
-  }
+.ui-density-comfortable,
+:root[data-density="comfortable"] {
+  --scaling: 1.08;
 }

package/dist/tokens/components/control.css

@@ -8,22 +8,21 @@
   --control-padding-x-default: var(--space-3);
   --control-padding-x-comfortable: var(--space-4);
 
-  --control-height: var(--control-height-default);
-  /* Adjacent control sizes, derived from the active --control-height.
-   * Default/compact use a 4px/8px step; density overrides comfortable
-   * (which steps 44→36→32 per the design's spacing-density spec). */
-  --control-height-sm: calc(var(--control-height) - 0.25rem);
-  --control-height-lg: calc(var(--control-height) + 0.25rem);
-  --control-height-xs: calc(var(--control-height) - 0.5rem);
+  --control-height: calc(var(--control-height-default) * var(--scaling));
+  /* Adjacent control sizes, derived from the active --control-height. The ±step
+   * is scaled too so the whole control ladder stays proportional under --scaling. */
+  --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
+  --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
+  --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
   --control-padding-x: var(--control-padding-x-default);
   --control-gap: var(--space-inline-sm);
   --control-gap-sm: var(--space-inline-xs);
   --control-radius: var(--radius);
-  --control-icon-size: 1rem;
-  --control-icon-size-sm: 0.875rem;
+  --control-icon-size: calc(1rem * var(--scaling));
+  --control-icon-size-sm: calc(0.875rem * var(--scaling));
   --control-focus-ring-width: 2px;
 
-  --checkbox-size: 1rem;
+  --checkbox-size: calc(1rem * var(--scaling));
   --checkbox-size-compact: 0.875rem;
   --checkbox-size-comfortable: 1.125rem;
   --choice-gap: var(--space-inline-sm);
@@ -32,16 +31,16 @@
   --choice-description-gap: 0.125rem;
   --choice-control-offset: 0.125rem;
 
-  --switch-width: 2.25rem;
+  --switch-width: calc(2.25rem * var(--scaling));
   --switch-width-compact: 2rem;
   --switch-width-comfortable: 2.5rem;
-  --switch-height: 1.25rem;
+  --switch-height: calc(1.25rem * var(--scaling));
   --switch-height-compact: 1.125rem;
   --switch-height-comfortable: 1.375rem;
-  --switch-thumb-size: 1rem;
+  --switch-thumb-size: calc(1rem * var(--scaling));
   --switch-thumb-size-compact: 0.875rem;
   --switch-thumb-size-comfortable: 1.125rem;
-  --switch-thumb-translate: 1rem;
+  --switch-thumb-translate: calc(1rem * var(--scaling));
   --switch-thumb-translate-compact: 0.875rem;
   --switch-thumb-translate-comfortable: 1.125rem;
 

package/dist/tokens/components/table.css

@@ -4,7 +4,7 @@
   --table-row-height-compact: 1.75rem;
   --table-row-height-default: 2rem;
   --table-row-height-comfortable: 2.75rem;
-  --table-row-height: var(--table-row-height-default);
+  --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
   --table-head-font-size: var(--font-size-xs);

package/dist/tokens/foundation.css

@@ -75,7 +75,7 @@
   --disabled-opacity: 0.5;
 
   /* Shape and elevation */
-  --radius: 0.375rem; /* 6px — radius base; override to retheme every step */
+  --radius: calc(0.375rem * var(--scaling)); /* 6px base × scaling; override to retheme every step */
   --radius-ratio: 1.618; /* φ — radii scale by the golden ratio (steps derive in @theme) */
   --radius-pill: 9999px; /* fully-round: switch / radio / slider / pill badges (NOT --radius-derived) */
   --radius-sharp: 0; /* squared corners: table cells, flush inputs */
@@ -140,17 +140,29 @@
   --line-height-body: 1.7;
   --letter-spacing-tight: 0;
 
-  /* Raw spacing scale */
+  /* ── SCALING — the one global density knob (Radix Themes model). A single
+   * dimensionless multiplier on every SIZE token (spacing grid, control / table /
+   * checkbox / switch heights, radius), so the whole UI rescales in proportion
+   * from one place. `1` = the design baseline. The `density` axis sets named
+   * presets (compact .92 · default 1 · comfortable 1.08); AppProvider's `scaling`
+   * prop sets any value continuously. Type has its OWN base+ratio (--font-size-base)
+   * and is NOT scaled here — fontSize stays an orthogonal axis. Touch targets
+   * (--touch-target-min) are also exempt (a11y minimum). */
+  --scaling: 1;
+
+  /* Raw spacing scale — the 4px grid, scaled. Everything that derives from
+   * --space-* (padding, gaps, --phi-unit, semantic spacing, chrome) inherits the
+   * scaling automatically; this is the single highest-leverage scaling point. */
   --space-0: 0;
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-  --space-12: 3rem;
+  --space-1: calc(0.25rem * var(--scaling));
+  --space-2: calc(0.5rem * var(--scaling));
+  --space-3: calc(0.75rem * var(--scaling));
+  --space-4: calc(1rem * var(--scaling));
+  --space-5: calc(1.25rem * var(--scaling));
+  --space-6: calc(1.5rem * var(--scaling));
+  --space-8: calc(2rem * var(--scaling));
+  --space-10: calc(2.5rem * var(--scaling));
+  --space-12: calc(3rem * var(--scaling));
 
   /* Golden ratio scale */
   --ratio-phi: 1.6180339887;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.15.0",
+  "version": "13.16.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,