@godxjp/ui 13.13.0 → 13.15.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, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, }: 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, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, }: 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

@@ -14,6 +14,9 @@ import {
   syncDatetimeContext
 } from "../lib/datetime";
 import { DEFAULT_STORAGE_KEY, readStoredPreferences, writeStoredPreferences } from "./storage";
+import {
+  applyThemeAxes
+} from "./theme-axes";
 import { resolveDefaultTimeFormat } from "./time-format-labels";
 import { resolveDefaultTimezone } from "./timezones";
 import {
@@ -56,10 +59,18 @@ function AppProvider({
   timezoneOptions,
   storageKey = DEFAULT_STORAGE_KEY,
   persist = true,
+  theme: initialTheme = "light",
+  brand: initialBrand = null,
+  density: initialDensity = "default",
+  fontSize: initialFontSize = "default",
   onLocaleChange,
   onTimezoneChange,
   onTimeFormatChange,
-  onDateFormatChange
+  onDateFormatChange,
+  onThemeChange,
+  onBrandChange,
+  onDensityChange,
+  onFontSizeChange
 }) {
   const initialLocale = defaultLocale;
   const [locale, setLocaleState] = React.useState(initialLocale);
@@ -72,8 +83,21 @@ function AppProvider({
   const [dateFormat, setDateFormatState] = React.useState(
     () => resolveInitialDateFormat(void 0, defaultDateFormat, initialLocale)
   );
+  const [theme, setThemeState] = React.useState(initialTheme);
+  const [brand, setBrandState] = React.useState(initialBrand);
+  const [density, setDensityState] = React.useState(initialDensity);
+  const [fontSize, setFontSizeState] = React.useState(initialFontSize);
   const hasMountedRef = React.useRef(false);
-  const prefsRef = React.useRef({ locale, timezone, timeFormat, dateFormat });
+  const prefsRef = React.useRef({
+    locale,
+    timezone,
+    timeFormat,
+    dateFormat,
+    theme,
+    brand,
+    density,
+    fontSize
+  });
   React.useEffect(() => {
     const stored = persist ? readStoredPreferences(storageKey) : {};
     const nextLocale = stored.locale ?? defaultLocale;
@@ -88,28 +112,48 @@ function AppProvider({
       defaultDateFormat,
       nextLocale
     );
+    const nextTheme = stored.theme ?? initialTheme;
+    const nextBrand = stored.brand ?? initialBrand;
+    const nextDensity = stored.density ?? initialDensity;
+    const nextFontSize = stored.fontSize ?? initialFontSize;
     prefsRef.current = {
       locale: nextLocale,
       timezone: nextTimezone,
       timeFormat: nextTimeFormat,
-      dateFormat: nextDateFormat
+      dateFormat: nextDateFormat,
+      theme: nextTheme,
+      brand: nextBrand,
+      density: nextDensity,
+      fontSize: nextFontSize
     };
     setLocaleState(nextLocale);
     setTimezoneState(nextTimezone);
     setTimeFormatState(nextTimeFormat);
     setDateFormatState(nextDateFormat);
+    setThemeState(nextTheme);
+    setBrandState(nextBrand);
+    setDensityState(nextDensity);
+    setFontSizeState(nextFontSize);
   }, [
     defaultDateFormat,
     defaultLocale,
     defaultTimeFormat,
     defaultTimezone,
+    initialTheme,
+    initialBrand,
+    initialDensity,
+    initialFontSize,
     persist,
     storageKey,
     systemTimezone
   ]);
   React.useEffect(() => {
-    prefsRef.current = { locale, timezone, timeFormat, dateFormat };
-  }, [locale, timezone, timeFormat, dateFormat]);
+    prefsRef.current = { locale, timezone, timeFormat, dateFormat, theme, brand, density, fontSize };
+  }, [locale, timezone, timeFormat, dateFormat, theme, brand, density, fontSize]);
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    applyThemeAxes(document.documentElement, { theme, brand, density, fontSize });
+  }, [theme, brand, density, fontSize]);
   const setLocale = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, locale: next };
@@ -146,6 +190,42 @@ function AppProvider({
     },
     [onDateFormatChange, persist, storageKey]
   );
+  const setTheme = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, theme: next };
+      setThemeState(next);
+      onThemeChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onThemeChange, persist, storageKey]
+  );
+  const setBrand = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, brand: next };
+      setBrandState(next);
+      onBrandChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onBrandChange, persist, storageKey]
+  );
+  const setDensity = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, density: next };
+      setDensityState(next);
+      onDensityChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onDensityChange, persist, storageKey]
+  );
+  const setFontSize = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, fontSize: next };
+      setFontSizeState(next);
+      onFontSizeChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onFontSizeChange, persist, storageKey]
+  );
   const requestHeaders = React.useMemo(
     () => buildRequestHeaders(locale, timezone, timeFormat, dateFormat),
     [locale, timezone, timeFormat, dateFormat]
@@ -185,10 +265,18 @@ function AppProvider({
       dayPickerLocale: getDayPickerLocale(locale),
       requestHeaders,
       timezoneOptions,
+      theme,
+      brand,
+      density,
+      fontSize,
       setLocale,
       setTimezone,
       setTimeFormat,
-      setDateFormat
+      setDateFormat,
+      setTheme,
+      setBrand,
+      setDensity,
+      setFontSize
     }),
     [
       locale,
@@ -199,10 +287,18 @@ function AppProvider({
       dateFnsLocale,
       requestHeaders,
       timezoneOptions,
+      theme,
+      brand,
+      density,
+      fontSize,
       setLocale,
       setTimezone,
       setTimeFormat,
-      setDateFormat
+      setDateFormat,
+      setTheme,
+      setBrand,
+      setDensity,
+      setFontSize
     ]
   );
   return /* @__PURE__ */ jsx(AppContext.Provider, { value, children });

package/dist/app/index.d.ts

@@ -6,6 +6,7 @@ export * from "./date-formats";
 export * from "./time-format-labels";
 export * from "./date-format-labels";
 export * from "./storage";
+export * from "./theme-axes";
 export * from "./request-headers";
 export { AppProvider, useAppContext, useOptionalAppContext, useAppLocale, useAppTimezone, useAppTimeFormat, useAppDateFormat, } from "./app-provider";
 export { useFormatting, useDateTime } from "./use-formatting";

package/dist/app/index.js

@@ -6,6 +6,7 @@ export * from "./date-formats";
 export * from "./time-format-labels";
 export * from "./date-format-labels";
 export * from "./storage";
+export * from "./theme-axes";
 export * from "./request-headers";
 import {
   AppProvider,

package/dist/app/storage.d.ts

@@ -1,3 +1,4 @@
+import { type AppBrand, type AppDensity, type AppFontSize, type AppTheme } from "./theme-axes";
 import type { AppLocale, AppTimezone, AppTimeFormat, AppDateFormat } from "./types";
 declare const DEFAULT_STORAGE_KEY = "godxjp.app";
 export type StoredAppPreferences = {
@@ -5,6 +6,11 @@ export type StoredAppPreferences = {
     timezone?: AppTimezone;
     timeFormat?: AppTimeFormat;
     dateFormat?: AppDateFormat;
+    theme?: AppTheme;
+    /** `null` = explicit opt-out (keep app token); on read, null/invalid → undefined. */
+    brand?: AppBrand | null;
+    density?: AppDensity;
+    fontSize?: AppFontSize;
 };
 export declare function readStoredPreferences(storageKey: string): StoredAppPreferences;
 export declare function writeStoredPreferences(storageKey: string, preferences: StoredAppPreferences): void;

package/dist/app/storage.js

@@ -1,6 +1,12 @@
 import { isAppLocale } from "./locales";
 import { isAppDateFormat } from "./date-formats";
 import { isAppTimeFormat } from "./time-formats";
+import {
+  isAppBrand,
+  isAppDensity,
+  isAppFontSize,
+  isAppTheme
+} from "./theme-axes";
 const DEFAULT_STORAGE_KEY = "godxjp.app";
 function readStoredPreferences(storageKey) {
   if (typeof window === "undefined") return {};
@@ -12,7 +18,11 @@ function readStoredPreferences(storageKey) {
       locale: isAppLocale(parsed.locale) ? parsed.locale : void 0,
       timezone: typeof parsed.timezone === "string" ? parsed.timezone : void 0,
       timeFormat: isAppTimeFormat(parsed.timeFormat) ? parsed.timeFormat : void 0,
-      dateFormat: isAppDateFormat(parsed.dateFormat) ? parsed.dateFormat : void 0
+      dateFormat: isAppDateFormat(parsed.dateFormat) ? parsed.dateFormat : void 0,
+      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
     };
   } catch {
     return {};

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

@@ -0,0 +1,30 @@
+import type { PageDensityProp } from "../props/vocabulary/layout.prop";
+/** Light / dark spine — `data-theme` (alias of the legacy `.dark` class). */
+export type AppTheme = "light" | "dark";
+/** Primary-palette preset — `data-brand`. `null` = keep the app's own `--primary`. */
+export type AppBrand = "brand" | "crm" | "logistics" | "partner" | "slate";
+/** Control / table / spacing density — `data-density` (same vocab as PageContainer). */
+export type AppDensity = PageDensityProp;
+/** Base type size — `data-font-size`; a preset rescales the whole golden scale. */
+export type AppFontSize = "sm" | "default" | "lg";
+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). */
+export type AppThemeAxes = {
+    theme: AppTheme;
+    brand: AppBrand | null;
+    density: AppDensity;
+    fontSize: AppFontSize;
+};
+export declare const isAppTheme: (v: unknown) => v is AppTheme;
+export declare const isAppBrand: (v: unknown) => v is AppBrand;
+export declare const isAppDensity: (v: unknown) => v is AppDensity;
+export declare const isAppFontSize: (v: unknown) => v is AppFontSize;
+/**
+ * Write the axis attributes onto a root element (default `<html>`). Pass `brand: null`
+ * to remove `data-brand` so the app's own `--primary` token applies. SSR-safe: callers
+ * guard `typeof document`. Exported for non-React / imperative consumers too.
+ */
+export declare function applyThemeAxes(el: HTMLElement, axes: Partial<AppThemeAxes>): void;

package/dist/app/theme-axes.js

@@ -0,0 +1,38 @@
+const APP_THEMES = ["light", "dark"];
+const APP_BRANDS = [
+  "brand",
+  "crm",
+  "logistics",
+  "partner",
+  "slate"
+];
+const APP_DENSITIES = [
+  "compact",
+  "default",
+  "comfortable"
+];
+const APP_FONT_SIZES = ["sm", "default", "lg"];
+const isAppTheme = (v) => APP_THEMES.includes(v);
+const isAppBrand = (v) => APP_BRANDS.includes(v);
+const isAppDensity = (v) => APP_DENSITIES.includes(v);
+const isAppFontSize = (v) => APP_FONT_SIZES.includes(v);
+function applyThemeAxes(el, axes) {
+  if (axes.theme !== void 0) el.dataset.theme = axes.theme;
+  if (axes.density !== void 0) el.dataset.density = axes.density;
+  if (axes.fontSize !== void 0) el.dataset.fontSize = axes.fontSize;
+  if (axes.brand !== void 0) {
+    if (axes.brand === null) delete el.dataset.brand;
+    else el.dataset.brand = axes.brand;
+  }
+}
+export {
+  APP_BRANDS,
+  APP_DENSITIES,
+  APP_FONT_SIZES,
+  APP_THEMES,
+  applyThemeAxes,
+  isAppBrand,
+  isAppDensity,
+  isAppFontSize,
+  isAppTheme
+};

package/dist/components/feedback/sonner.js

@@ -34,9 +34,13 @@ function Toaster({ ...props }) {
         loading: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" })
       },
       style: {
-        "--normal-bg": "var(--popover)",
-        "--normal-text": "var(--popover-foreground)",
-        "--normal-border": "var(--border)",
+        // Color tokens are raw HSL triplets (consumed as hsl(var(--token)));
+        // sonner uses these vars verbatim as CSS colors, so wrap with hsl()
+        // here — unwrapped they are invalid values and the toast renders
+        // transparent.
+        "--normal-bg": "hsl(var(--popover))",
+        "--normal-text": "hsl(var(--popover-foreground))",
+        "--normal-border": "hsl(var(--border))",
         "--border-radius": "var(--radius)"
       },
       position: "bottom-right",

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react/jsx-runtime").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, linkComponent: LinkComponent, density, variant, stickyFooter, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -1,7 +1,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { densityClass, pageContainerVariantClass } from "../../lib/variants";
+function scrollParent(el) {
+  let node = el?.parentElement ?? null;
+  while (node) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+function useFooterReveal(enabled) {
+  const headerRef = useRef(null);
+  const [revealed, setRevealed] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    const el = headerRef.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      ([entry]) => setRevealed(!entry.isIntersecting),
+      { root: scrollParent(el), threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return { headerRef, revealed: enabled && revealed };
+}
 function PageContainerInset({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-page-container-inset", className), ...props, children });
 }
@@ -12,26 +38,33 @@ function PageContainerRoot({
   footer,
   breadcrumb,
   linkComponent: LinkComponent = "a",
-  density = "default",
+  density,
   variant = "default",
   stickyFooter = false,
+  footerReveal = "always",
   fill = false,
   children,
   className
 }) {
+  const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
+  const { headerRef, revealed } = useFooterReveal(reveal);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
-        densityClass[density],
+        // Unset → no class, so the page inherits the global density axis
+        // (:root[data-density]); an explicit prop emits a class that overrides it.
+        density && densityClass[density],
         pageContainerVariantClass[variant],
         stickyFooter && "ui-page-container--sticky-footer",
+        reveal && "ui-page-container--reveal-footer",
         fill && "ui-page-container--fill",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "ui-page-header", children: [
+        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", children: [
           breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
             const isLast = i === breadcrumb.length - 1;
             return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [

package/dist/components/navigation/app-setting-picker.d.ts

@@ -2,8 +2,9 @@ import * as React from "react";
 import type { AppSettingPickerProp } from "../../props/components/app.prop";
 export type { AppSettingKind, AppSettingPickerProp, AppSettingPickerProp as AppSettingPickerProps, } from "../../props/components/app.prop";
 /**
- * One provider-bound Select for any single AppProvider setting — replaces the former
- * Locale/Timezone/Date-format/Time-format pickers. Mount under `<AppProvider>` and it
- * reads/writes the matching context (`kind`); or pass value + onValueChange to control it.
+ * One provider-bound Select for any single AppProvider setting — locale / timezone /
+ * date-format / time-format and the four theme axes (theme / brand / density / fontSize).
+ * Mount under `<AppProvider>` and it reads/writes the matching context (`kind`); or pass
+ * value + onValueChange to control it.
  */
 export declare const AppSettingPicker: React.ForwardRefExoticComponent<AppSettingPickerProp & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/navigation/app-setting-picker.js

@@ -1,10 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarDays, Clock, Globe, Languages } from "lucide-react";
+import {
+  CalendarDays,
+  Clock,
+  Globe,
+  Languages,
+  Palette,
+  Rows3,
+  SunMoon,
+  Type
+} from "lucide-react";
 import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from "../../app/date-format-labels";
 import { APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from "../../app/time-format-labels";
 import { getTimezoneLabel, resolveTimezonePickerOptions } from "../../app/timezones";
 import { APP_LOCALES } from "../../app/types";
+import {
+  APP_BRANDS,
+  APP_DENSITIES,
+  APP_FONT_SIZES,
+  APP_THEMES
+} from "../../app/theme-axes";
 import { useOptionalAppContext } from "../../app/app-provider";
 import { useTranslation } from "../../i18n/use-translation";
 import { cn } from "../../lib/utils";
@@ -19,30 +34,48 @@ const ICON = {
   locale: Languages,
   timezone: Globe,
   dateFormat: CalendarDays,
-  timeFormat: Clock
+  timeFormat: Clock,
+  theme: SunMoon,
+  brand: Palette,
+  density: Rows3,
+  fontSize: Type
 };
 const TRIGGER_WIDTH = {
   locale: "sm:w-40",
   timezone: "sm:w-56",
   dateFormat: "sm:w-44",
-  timeFormat: "sm:w-44"
+  timeFormat: "sm:w-44",
+  theme: "sm:w-36",
+  brand: "sm:w-44",
+  density: "sm:w-40",
+  fontSize: "sm:w-36"
 };
 const ARIA_KEY = {
   locale: "navigation.localePicker.ariaLabel",
   timezone: "navigation.timezonePicker.ariaLabel",
   dateFormat: "navigation.dateFormatPicker.ariaLabel",
-  timeFormat: "navigation.timeFormatPicker.ariaLabel"
+  timeFormat: "navigation.timeFormatPicker.ariaLabel",
+  theme: "navigation.themePicker.ariaLabel",
+  brand: "navigation.brandPicker.ariaLabel",
+  density: "navigation.densityPicker.ariaLabel",
+  fontSize: "navigation.fontSizePicker.ariaLabel"
 };
+const BRAND_NONE = "__app__";
 const AppSettingPicker = React.forwardRef(
   function AppSettingPicker2({ kind, className, disabled, id, name, value, onValueChange }, ref) {
     const ctx = useOptionalAppContext();
     const { t, locale, fallbackLocale } = useTranslation();
-    const current = value ?? ctx?.[kind];
+    const raw = value ?? ctx?.[kind];
+    const current = raw == null ? kind === "brand" ? BRAND_NONE : void 0 : String(raw);
     const setter = ctx ? {
       locale: ctx.setLocale,
       timezone: ctx.setTimezone,
       dateFormat: ctx.setDateFormat,
-      timeFormat: ctx.setTimeFormat
+      timeFormat: ctx.setTimeFormat,
+      theme: ctx.setTheme,
+      density: ctx.setDensity,
+      fontSize: ctx.setFontSize,
+      brand: (next) => ctx.setBrand(next === BRAND_NONE ? null : next)
     }[kind] : void 0;
     const handleChange = onValueChange ?? setter;
     const items = React.useMemo(() => {
@@ -64,6 +97,23 @@ const AppSettingPicker = React.forwardRef(
             value: option.value,
             label: getTimeFormatLabel(option.value, locale, fallbackLocale)
           }));
+        case "theme":
+          return APP_THEMES.map((v) => ({ value: v, label: t(`navigation.themePicker.${v}`) }));
+        case "density":
+          return APP_DENSITIES.map((v) => ({
+            value: v,
+            label: t(`navigation.densityPicker.${v}`)
+          }));
+        case "fontSize":
+          return APP_FONT_SIZES.map((v) => ({
+            value: v,
+            label: t(`navigation.fontSizePicker.${v}`)
+          }));
+        case "brand":
+          return [
+            { value: BRAND_NONE, label: t("navigation.brandPicker.none") },
+            ...APP_BRANDS.map((v) => ({ value: v, label: t(`navigation.brandPicker.${v}`) }))
+          ];
       }
     }, [kind, ctx?.timezoneOptions, current, t, locale, fallbackLocale]);
     const unbound = current === void 0 || !handleChange;

package/dist/i18n/messages/en.json

@@ -201,6 +201,32 @@
         "one": "Total {total} item",
         "other": "Total {total} items"
       }
+    },
+    "themePicker": {
+      "ariaLabel": "Theme",
+      "light": "Light",
+      "dark": "Dark"
+    },
+    "densityPicker": {
+      "ariaLabel": "Density",
+      "compact": "Compact",
+      "default": "Default",
+      "comfortable": "Comfortable"
+    },
+    "fontSizePicker": {
+      "ariaLabel": "Font size",
+      "sm": "Small",
+      "default": "Default",
+      "lg": "Large"
+    },
+    "brandPicker": {
+      "ariaLabel": "Brand",
+      "none": "App default",
+      "brand": "GodX Navy",
+      "crm": "CRM Violet",
+      "logistics": "Logistics Teal",
+      "partner": "Partner Orange",
+      "slate": "HQ Slate"
     }
   },
   "locale": {

package/dist/i18n/messages/ja.json

@@ -198,6 +198,32 @@
       "pageSize": "ページサイズ",
       "pageSizeOption": "{size} / ページ",
       "total": "全 {total} 件"
+    },
+    "themePicker": {
+      "ariaLabel": "テーマ",
+      "light": "ライト",
+      "dark": "ダーク"
+    },
+    "densityPicker": {
+      "ariaLabel": "密度",
+      "compact": "コンパクト",
+      "default": "標準",
+      "comfortable": "広め"
+    },
+    "fontSizePicker": {
+      "ariaLabel": "文字サイズ",
+      "sm": "小",
+      "default": "標準",
+      "lg": "大"
+    },
+    "brandPicker": {
+      "ariaLabel": "ブランド",
+      "none": "アプリ既定",
+      "brand": "GodX Navy",
+      "crm": "CRM Violet",
+      "logistics": "Logistics Teal",
+      "partner": "Partner Orange",
+      "slate": "HQ Slate"
     }
   },
   "locale": {

package/dist/i18n/messages/vi.json

@@ -198,6 +198,32 @@
       "pageSize": "Số dòng mỗi trang",
       "pageSizeOption": "{size} / trang",
       "total": "Tổng {total} mục"
+    },
+    "themePicker": {
+      "ariaLabel": "Giao diện",
+      "light": "Sáng",
+      "dark": "Tối"
+    },
+    "densityPicker": {
+      "ariaLabel": "Mật độ",
+      "compact": "Gọn",
+      "default": "Mặc định",
+      "comfortable": "Thoáng"
+    },
+    "fontSizePicker": {
+      "ariaLabel": "Cỡ chữ",
+      "sm": "Nhỏ",
+      "default": "Mặc định",
+      "lg": "Lớn"
+    },
+    "brandPicker": {
+      "ariaLabel": "Thương hiệu",
+      "none": "Mặc định app",
+      "brand": "GodX Navy",
+      "crm": "CRM Violet",
+      "logistics": "Logistics Teal",
+      "partner": "Partner Orange",
+      "slate": "HQ Slate"
     }
   },
   "locale": {

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

@@ -2,6 +2,7 @@
 import type { Locale } from "date-fns";
 import type { DayPickerProps } from "react-day-picker";
 import type { AppLocale, AppRequestHeaders, AppTimeFormat, AppTimezone, AppTimezoneDefault, AppDateFormat } from "../../app/types";
+import type { AppBrand, AppDensity, AppFontSize, AppTheme } from "../../app/theme-axes";
 import type { ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary";
 /** @see AppProvider */
 export type AppProviderProp = {
@@ -27,13 +28,31 @@ export type AppProviderProp = {
     storageKey?: string;
     /** Persist user choices. Default: true. */
     persist?: boolean;
+    /**
+     * Initial light/dark theme — written to `<html data-theme>`. Default: `"light"`.
+     * (The legacy `.dark` class still works as an equal alias.)
+     */
+    theme?: AppTheme;
+    /**
+     * Initial brand palette preset — written to `<html data-brand>`. OPT-IN: omit
+     * (or `null`) to keep the brand `--primary` your own `theme.css` defines.
+     */
+    brand?: AppBrand | null;
+    /** Initial density — written to `<html data-density>`. Default: `"default"`. */
+    density?: AppDensity;
+    /** Initial base type size — written to `<html data-font-size>`. Default: `"default"`. */
+    fontSize?: AppFontSize;
     onLocaleChange?: (locale: AppLocale) => void;
     onTimezoneChange?: (timezone: AppTimezone) => void;
     onTimeFormatChange?: (timeFormat: AppTimeFormat) => void;
     onDateFormatChange?: (dateFormat: AppDateFormat) => void;
+    onThemeChange?: (theme: AppTheme) => void;
+    onBrandChange?: (brand: AppBrand | null) => void;
+    onDensityChange?: (density: AppDensity) => void;
+    onFontSizeChange?: (fontSize: AppFontSize) => void;
 };
 /** Which AppProvider setting the {@link AppSettingPicker} reads/writes. */
-export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat";
+export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat" | "theme" | "brand" | "density" | "fontSize";
 /**
  * @see AppSettingPicker — one provider-bound Select for any single AppProvider setting.
  * Replaces the former Locale/Timezone/Date-format/Time-format pickers; pick the target
@@ -62,8 +81,17 @@ 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-*>`). */
+    theme: AppTheme;
+    brand: AppBrand | null;
+    density: AppDensity;
+    fontSize: AppFontSize;
     setLocale: (locale: AppLocale) => void;
     setTimezone: (timezone: AppTimezone) => void;
     setTimeFormat: (timeFormat: AppTimeFormat) => void;
     setDateFormat: (dateFormat: AppDateFormat) => void;
+    setTheme: (theme: AppTheme) => void;
+    setBrand: (brand: AppBrand | null) => void;
+    setDensity: (density: AppDensity) => void;
+    setFontSize: (fontSize: AppFontSize) => void;
 };

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

@@ -14,6 +14,16 @@ export type PageContainerProp = {
     variant?: PageContainerVariantProp;
     /** Pin footer to viewport bottom on scroll — pairs well with `variant="narrow"`. */
     stickyFooter?: boolean;
+    /**
+     * When the footer is sticky, control WHEN it shows. `"always"` (default)
+     * keeps it pinned the whole time. `"onScroll"` hides it until the header
+     * (title + `extra` actions) scrolls out of view, then slides it up — the
+     * standard edit/create "save bar" so the primary actions stay reachable as
+     * the form scrolls, without cluttering the top. The footer stays mounted
+     * (no layout reflow → no jitter); observed against the nearest scroll
+     * container.
+     */
+    footerReveal?: "always" | "onScroll";
     /**
      * Grow the body to fill the remaining shell height. Default `false` (top-packed,
      * content-height — short pages leave no stretched void, gh#103). Enable for a

package/dist/styles/density.css

@@ -1,10 +1,15 @@
 /*
- * DENSITY — one knob retunes φ-unit, controls, tables (PageContainer density prop).
- * Owner: .ui-density-* classes only. Apps use <PageContainer density>, never these classes.
+ * 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.
  */
 
 @layer components {
-  .ui-density-compact {
+  .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);
@@ -19,14 +24,16 @@
     --space-chrome-y: var(--space-3);
   }
 
-  .ui-density-default {
+  .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-comfortable {
+  .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. */

package/dist/styles/layout.css

@@ -308,6 +308,31 @@
     background-color: hsl(var(--background));
   }
 
+  /* footerReveal="onScroll": the sticky footer stays mounted (reserving its
+   * flow space, so toggling never reflows the body → no scroll jitter) but is
+   * slid below the fold until the header leaves the viewport, then slides up.
+   * data-revealed is toggled by an IntersectionObserver on the header. */
+  .ui-page-container--reveal-footer .ui-page-footer {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform 200ms ease-out,
+      opacity 200ms ease-out;
+  }
+
+  .ui-page-container--reveal-footer[data-revealed="true"] .ui-page-footer {
+    transform: none;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-page-container--reveal-footer .ui-page-footer {
+      transition: none;
+    }
+  }
+
   .ui-page-header {
     display: flex;
     flex-direction: column;

package/dist/tokens/axes.css

@@ -0,0 +1,59 @@
+/* THEME AXES — global consumer API. AppProvider's theme/brand/density/fontSize
+ * props write `data-*` attributes onto <html>; the selectors here bind each axis
+ * to tokens (Rule #21 "every component honours every theme axis"). Density lives
+ * in density.css (shared with the .ui-density-* classes); the dark theme aliases
+ * in foundation.css. Every axis is a NO-OP at its default value, so apps that set
+ * nothing — or override tokens in their own theme.css — are unaffected.
+ *
+ * `:root[data-…]` (specificity 0,2,0) intentionally outranks an app theme.css
+ * `:root` (0,1,0): when an axis IS set it wins; when it is NOT set the app token
+ * override wins. brand is therefore fully opt-in (no default rule). */
+
+/* ── font-size axis — base-driven: a preset sets ONLY --font-size-base and the
+ *    whole golden modular scale (foundation.css) rescales from it. The `default`
+ *    value emits no rule → foundation 14px stands. */
+:root[data-font-size="sm"] {
+  --font-size-base: 0.8125rem; /* 13px */
+}
+:root[data-font-size="lg"] {
+  --font-size-base: 1rem; /* 16px */
+}
+
+/* ── brand axis — primary-palette presets (canonical values; src/test/theme-globals.ts
+ *    mirrors these for the Storybook toolbar). OPT-IN: no `default` rule, so an app
+ *    that pins --primary in its own theme.css keeps it unless it sets data-brand. */
+:root[data-brand="brand"] {
+  --primary: 211 73% 15%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 24 99% 46%;
+  --accent: 24 99% 95%;
+  --accent-foreground: 24 99% 28%;
+}
+:root[data-brand="crm"] {
+  --primary: 262 83% 58%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 262 83% 58%;
+  --accent: 262 83% 96%;
+  --accent-foreground: 262 83% 28%;
+}
+:root[data-brand="logistics"] {
+  --primary: 173 80% 36%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 173 80% 36%;
+  --accent: 173 80% 94%;
+  --accent-foreground: 173 80% 22%;
+}
+:root[data-brand="partner"] {
+  --primary: 24 95% 53%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 24 95% 53%;
+  --accent: 24 95% 95%;
+  --accent-foreground: 24 95% 28%;
+}
+:root[data-brand="slate"] {
+  --primary: 215 25% 27%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 215 25% 27%;
+  --accent: 215 25% 94%;
+  --accent-foreground: 215 25% 20%;
+}

package/dist/tokens/base.css

@@ -5,6 +5,7 @@
 
 @import "./foundation.css";
 @import "./semantic/layout.css";
+@import "./axes.css";
 @import "./components/control.css";
 @import "./components/form.css";
 @import "./components/card.css";

package/dist/tokens/components/control.css

@@ -62,6 +62,14 @@
   --search-input-end-padding: calc(
     var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
   );
+
+  --choice-description-font-size: var(--font-size-xs);
+  --color-picker-hex-font-size: var(--font-size-xs);
+  --command-group-heading-font-size: var(--font-size-xs);
+  --search-input-label-font-size: var(--font-size-xs);
+  --tag-input-chip-font-size: var(--font-size-xs);
+  --toggle-sm-font-size: var(--font-size-xs);
+  --button-sm-font-size: var(--font-size-xs);
 }
 
 /* Rule #24 — on touch devices (coarse pointer) interactive controls keep a ≥44px tap target
@@ -72,11 +80,4 @@
     --control-height-compact: 2.75rem;
     --control-height-default: 2.75rem;
   }
-  --choice-description-font-size: var(--font-size-xs);
-  --color-picker-hex-font-size: var(--font-size-xs);
-  --command-group-heading-font-size: var(--font-size-xs);
-  --search-input-label-font-size: var(--font-size-xs);
-  --tag-input-chip-font-size: var(--font-size-xs);
-  --toggle-sm-font-size: var(--font-size-xs);
-  --button-sm-font-size: var(--font-size-xs);
 }

package/dist/tokens/foundation.css

@@ -162,8 +162,11 @@
   --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
 }
 
-.dark {
-  /* Warm-tinted dark spine — keeps the hue-60 character at low lightness. */
+.dark,
+:root[data-theme="dark"] {
+  /* Warm-tinted dark spine — keeps the hue-60 character at low lightness.
+   * `data-theme="dark"` is the theme axis (AppProvider theme prop → <html>); the
+   * legacy `.dark` class stays an equal alias so existing toggles keep working. */
   --background: 48 9% 9%;
   --foreground: 60 20% 96%;
   --card: 48 8% 12%;

package/package.json

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