@godxjp/ui 31.31.8 → 32.0.1

package/dist/{components/layout → lab}/legal-document-shell.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { LegalDocumentShellProp } from "../../props/components/layout.prop.js";
-export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProp as LegalDocumentShellProps, } from "../../props/components/layout.prop.js";
+import type { LegalDocumentShellProp } from "../props/components/layout.prop.js";
+export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProp as LegalDocumentShellProps, } from "../props/components/layout.prop.js";
 /**
  * LegalDocumentShell — the long-form **legal / policy document** surface: terms of service,
  * privacy policy, DPA, cookie policy, SLA, EULA, security policy. Semantics: `<article>` labelled

package/dist/{components/layout → lab}/legal-document-shell.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { useControlledLatch } from "../../lib/hooks.js";
-import { cn } from "../../lib/utils.js";
-import { Heading } from "../general/typography.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { useControlledLatch } from "../lib/hooks.js";
+import { cn } from "../lib/utils.js";
+import { Heading } from "../components/general/typography.js";
 const SPY_ROOT_MARGIN = "-10% 0px -75% 0px";
 const SECTION_ID_SEPARATOR = "\0";
 const ISO_CALENDAR_DATE = /^\d{4}-\d{2}-\d{2}$/;

package/dist/{components/data-display → lab}/marquee.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import type { GapProp } from "../../props/vocabulary/index.js";
-export type { MarqueeDirectionProp, MarqueeSpeedProp, MarqueeProp, MarqueeProp as MarqueeProps, } from "../../props/components/data-display.prop.js";
+import type { GapProp } from "../props/vocabulary/index.js";
+export type { MarqueeDirectionProp, MarqueeSpeedProp, MarqueeProp, MarqueeProp as MarqueeProps, } from "../props/components/data-display.prop.js";
 export declare const Marquee: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onPause" | "onPlay"> & {
-    children?: import("../../props/index.js").ChildrenProp;
+    children?: import("../props/index.js").ChildrenProp;
     play?: boolean;
     defaultPlay?: boolean;
     onPlayChange?: (play: boolean) => void;
@@ -11,6 +11,6 @@ export declare const Marquee: React.ForwardRefExoticComponent<Omit<React.HTMLAtt
     gap?: GapProp;
     pauseOnHover?: boolean;
     fade?: boolean;
-    label?: import("../../props/index.js").LabelProp;
-    className?: import("../../props/index.js").ClassNameProp;
+    label?: import("../props/index.js").LabelProp;
+    className?: import("../props/index.js").ClassNameProp;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/{components/data-display → lab}/marquee.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Pause, Play } from "lucide-react";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { useMediaQuery } from "../../lib/hooks.js";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../general/button.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { useMediaQuery } from "../lib/hooks.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/general/button.js";
 import { revealInMarquee } from "./marquee-reveal.js";
-import { ScrollArea } from "./scroll-area.js";
+import { ScrollArea } from "../components/data-display/scroll-area.js";
 function gapToken(step) {
   if (step === "none" || step === 0) return "0px";
   if (typeof step === "number") return `var(--space-${step})`;

package/dist/{components/layout → lab}/masonry.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { MasonryProp } from "../../props/components/layout.prop.js";
-export type { MasonryColumnsProp, MasonryGapProp, MasonryItemProp, MasonryLayoutEntryProp, MasonryProp, MasonryProp as MasonryProps, } from "../../props/components/layout.prop.js";
+import type { MasonryProp } from "../props/components/layout.prop.js";
+export type { MasonryColumnsProp, MasonryGapProp, MasonryItemProp, MasonryLayoutEntryProp, MasonryProp, MasonryProp as MasonryProps, } from "../props/components/layout.prop.js";
 /**
  * Masonry — Ant Design `Masonry` (6.0.0): tiles of unequal height packed into columns, each tile
  * dropped into whichever column is shortest when its turn comes.

package/dist/{components/layout → lab}/masonry.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { isDevelopment } from "../../lib/dev.js";
-import { useMediaQuery } from "../../lib/hooks.js";
-import { cn } from "../../lib/utils.js";
+import { isDevelopment } from "../lib/dev.js";
+import { useMediaQuery } from "../lib/hooks.js";
+import { cn } from "../lib/utils.js";
 const BREAKPOINT_QUERY = {
   sm: "(min-width: 40rem)",
   md: "(min-width: 48rem)",

package/dist/{components/navigation → lab}/mega-menu.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { MegaMenuItemProp, MegaMenuLinkComponentProp } from "../../props/components/navigation.prop.js";
-export type { MegaMenuGroupProp, MegaMenuGroupProp as MegaMenuGroupProps, MegaMenuItemProp, MegaMenuItemProp as MegaMenuItemProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProp as MegaMenuLinkComponentProps, MegaMenuLinkProp, MegaMenuLinkProp as MegaMenuLinkProps, MegaMenuPanelProp, MegaMenuPanelProp as MegaMenuPanelProps, MegaMenuProp, MegaMenuProp as MegaMenuProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProp as MegaMenuTriggerActionProps, } from "../../props/components/navigation.prop.js";
+import type { MegaMenuItemProp, MegaMenuLinkComponentProp } from "../props/components/navigation.prop.js";
+export type { MegaMenuGroupProp, MegaMenuGroupProp as MegaMenuGroupProps, MegaMenuItemProp, MegaMenuItemProp as MegaMenuItemProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProp as MegaMenuLinkComponentProps, MegaMenuLinkProp, MegaMenuLinkProp as MegaMenuLinkProps, MegaMenuPanelProp, MegaMenuPanelProp as MegaMenuPanelProps, MegaMenuProp, MegaMenuProp as MegaMenuProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProp as MegaMenuTriggerActionProps, } from "../props/components/navigation.prop.js";
 export declare const MegaMenu: React.ForwardRefExoticComponent<{
     items: readonly MegaMenuItemProp[];
     open?: string | null;
@@ -16,6 +16,6 @@ export declare const MegaMenu: React.ForwardRefExoticComponent<{
     label?: string;
     expandIcon?: React.ReactNode | false;
     linkComponent?: MegaMenuLinkComponentProp;
-    id?: import("../../props/index.js").IdProp;
-    className?: import("../../props/index.js").ClassNameProp;
+    id?: import("../props/index.js").IdProp;
+    className?: import("../props/index.js").ClassNameProp;
 } & Omit<React.HTMLAttributes<HTMLElement>, "children" | "defaultValue" | "onChange"> & React.RefAttributes<HTMLElement>>;

package/dist/{components/navigation → lab}/mega-menu.js

@@ -2,8 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronDown } from "lucide-react";
-import { cn } from "../../lib/utils.js";
-import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../lib/utils.js";
+import { useTranslation } from "../i18n/use-translation.js";
 const OPEN_DELAY_MS = 0;
 const CLOSE_DELAY_MS = 100;
 function nextEnabled(items, from, step) {

package/dist/{components/data-display → lab}/org-chart.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { OrgChartProp } from "../../props/components/data-display.prop.js";
-export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProp as OrgChartProps, } from "../../props/components/data-display.prop.js";
+import type { OrgChartProp } from "../props/components/data-display.prop.js";
+export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProp as OrgChartProps, } from "../props/components/data-display.prop.js";
 /** `ref` reaches the root `<div>` — the container the breakpoint is measured against. */
 export declare const OrgChart: React.ForwardRefExoticComponent<OrgChartProp & React.RefAttributes<HTMLDivElement>>;

package/dist/{components/data-display → lab}/org-chart.js

@@ -1,10 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { useScrollsHorizontally } from "../../lib/hooks.js";
-import { cn } from "../../lib/utils.js";
-import { Tree } from "./tree.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { useScrollsHorizontally } from "../lib/hooks.js";
+import { cn } from "../lib/utils.js";
+import { Tree } from "../components/data-display/tree.js";
 function flatten(nodes) {
   const out = [];
   const walk = (list, depth, parent) => {

package/dist/{components/layout → lab}/page-cover.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { PageCoverProp } from "../../props/components/layout.prop.js";
-export type { PageCoverProp, PageCoverProp as PageCoverProps, } from "../../props/components/layout.prop.js";
+import type { PageCoverProp } from "../props/components/layout.prop.js";
+export type { PageCoverProp, PageCoverProp as PageCoverProps, } from "../props/components/layout.prop.js";
 /**
  * PageCover (gh#1160) — a page's cover image: Notion's banner across the top, or note.com's
  * eyecatch in the reading column (`variant="eyecatch"`, ~1.91:1, rounded). Put it in

package/dist/{components/layout → lab}/page-cover.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { cn } from "../lib/utils.js";
 const clamp = (value) => Math.min(100, Math.max(0, Math.round(value)));
 const PageCover = React.forwardRef(function PageCover2({
   src,

package/dist/{components/data-display → lab}/range-timeline.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { DensityProp } from "../../props/vocabulary/index.js";
+import type { DensityProp } from "../props/vocabulary/index.js";
 export type RangeTimelineRow = {
     id: string;
     label: React.ReactNode;

package/dist/{components/data-display → lab}/range-timeline.js

@@ -1,13 +1,13 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useTranslation } from "../../i18n/use-translation.js";
+import { useTranslation } from "../i18n/use-translation.js";
 import { ChevronDown, ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
-import { Button } from "../general/button.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
-import { CONTRAST_PIVOT, relativeLuminance } from "../../app/tenant-theme.js";
-import { Text } from "../general/typography.js";
-import { cn } from "../../lib/utils.js";
+import { Button } from "../components/general/button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/feedback/tooltip.js";
+import { CONTRAST_PIVOT, relativeLuminance } from "../app/tenant-theme.js";
+import { Text } from "../components/general/typography.js";
+import { cn } from "../lib/utils.js";
 function inkOn(color) {
   if (!color) return void 0;
   const luminance = relativeLuminance(color);

package/dist/{components/data-entry → lab}/sortable-list.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { SortableListProp } from "../../props/components/data-entry.prop.js";
-export type { SortableListItemProp, SortableListProp, SortableListProp as SortableListProps, } from "../../props/components/data-entry.prop.js";
+import type { SortableListProp } from "../props/components/data-entry.prop.js";
+export type { SortableListItemProp, SortableListProp, SortableListProp as SortableListProps, } from "../props/components/data-entry.prop.js";
 /**
  * SortableList (gh#1173) — reorder a flat list or a grid of tiles by pointer drag or by keyboard
  * on each item's grip: Space/Enter lifts, the arrows (and Home/End) move, Space/Enter drops, Esc

package/dist/{components/data-entry → lab}/sortable-list.js

@@ -2,9 +2,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { GripVertical } from "lucide-react";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../general/button.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/general/button.js";
 const DRAG_THRESHOLD = 4;
 function move(list, from, to) {
   const next = list.slice();

package/dist/{components/data-display → lab}/text-diff.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { TextDiffProp, TextDiffSegment } from "../../props/components/data-display.prop.js";
-export type { TextDiffProp, TextDiffProp as TextDiffProps, TextDiffSegment, } from "../../props/components/data-display.prop.js";
+import type { TextDiffProp, TextDiffSegment } from "../props/components/data-display.prop.js";
+export type { TextDiffProp, TextDiffProp as TextDiffProps, TextDiffSegment, } from "../props/components/data-display.prop.js";
 /** The unit a change is measured in — see `TextDiffProp["granularity"]`. */
 export type TextDiffGranularity = NonNullable<TextDiffProp["granularity"]>;
 /**
@@ -41,5 +41,5 @@ export declare const TextDiff: React.ForwardRefExoticComponent<Omit<React.HTMLAt
     beforeLabel?: React.ReactNode;
     afterLabel?: React.ReactNode;
     lang?: string;
-    className?: import("../../props/index.js").ClassNameProp;
+    className?: import("../props/index.js").ClassNameProp;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/{components/data-display → lab}/text-diff.js

@@ -1,10 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../general/button.js";
-import { VisuallyHidden } from "../general/visually-hidden.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/general/button.js";
+import { VisuallyHidden } from "../components/general/visually-hidden.js";
 const CJK = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
 const DEFAULT_MAX_CELLS = 4e6;
 const MIN_HIDDEN_LINES = 2;

package/dist/{components/data-display → lab}/timeline-grid.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { TimelineGridProp } from "../../props/components/data-display.prop.js";
-export type { TimelineGridColumnProp, TimelineGridEventProp, TimelineGridProp, TimelineGridProp as TimelineGridProps, } from "../../props/components/data-display.prop.js";
+import type { TimelineGridProp } from "../props/components/data-display.prop.js";
+export type { TimelineGridColumnProp, TimelineGridEventProp, TimelineGridProp, TimelineGridProp as TimelineGridProps, } from "../props/components/data-display.prop.js";
 /**
  * TimelineGrid — the time-axis half of the Timeline family: a vertical hour axis, one column per
  * day (or room, or machine) and event blocks placed by start time and duration.

package/dist/{components/data-display → lab}/timeline-grid.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../../lib/utils.js";
+import { cn } from "../lib/utils.js";
 const MINUTES_PER_DAY = 24 * 60;
 const CLOCK = /^(\d{1,2}):(\d{2})$/;
 function toMinutes(value) {

package/dist/lib/control-styles.js

@@ -5,7 +5,7 @@ const controlOpenRingClass = "ui-control-trigger";
 const controlTriggerBaseClass = (
   // PER-EDGE RADIUS THROUGH A KNOB, same repair as Input's `--input-radius-start`/`-end`
   // (gh#841): a plain `rounded-[var(--control-radius)]` is a utility, and `@layer utilities`
-  // outranks `@layer components`, so a joined-control seam (SpaceCompact) can never zero one
+  // outranks `@layer components`, so a joined-control seam (`Flex attached`) can never zero one
   // side of it from a components-layer rule. Unset, both knobs fall back to `--control-radius`
   // exactly as before — no existing trigger changes.
   "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-s-[var(--control-trigger-radius-start,var(--control-radius))] rounded-e-[var(--control-trigger-radius-end,var(--control-radius))] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis"

package/dist/lib/datetime/format.js

@@ -1,7 +1,7 @@
 import { TZDate } from "@date-fns/tz";
 import { format, formatDistanceToNow } from "date-fns";
 import { getDateFnsLocale } from "../../app/locales.js";
-import { getDatePattern, getDateTimePattern } from "../../app/date-formats.js";
+import { getDateTimePattern, getLocaleAwareDatePattern } from "../../app/date-formats.js";
 import { getTimePattern } from "../../app/time-formats.js";
 import { calendarDateToTZDate, hhmmToTZDate, parseDateInput } from "./parse.js";
 import { isDateOnlyString } from "./detect.js";
@@ -13,8 +13,10 @@ function resolveLocale(locale) {
 }
 function resolveOptions(options) {
   const ctx = getDatetimeContext();
+  const locale = resolveLocale(options?.locale);
   return {
-    locale: resolveLocale(options?.locale),
+    locale,
+    tag: typeof options?.locale === "string" ? options.locale : options?.locale?.code ?? ctx.locale,
     timezone: options?.timezone ?? ctx.timezone,
     timeFormat: options?.timeFormat ?? ctx.timeFormat,
     dateFormat: options?.dateFormat ?? ctx.dateFormat
@@ -31,19 +33,31 @@ function formatCalendarDate(value, options) {
   if (!value) return EMPTY;
   const resolved = resolveOptions(options);
   const zoned = calendarDateToTZDate(value, resolved.timezone);
-  return formatTZDate(zoned, getDatePattern(resolved.dateFormat), resolved);
+  return formatTZDate(
+    zoned,
+    getLocaleAwareDatePattern(resolved.dateFormat, resolved.tag),
+    resolved
+  );
 }
 function formatAppDate(value, options) {
   const resolved = resolveOptions(options);
   if (typeof value === "string" && isDateOnlyString(value)) {
     const [year, month, day] = value.split("-").map(Number);
     const zoned2 = new TZDate(year, month - 1, day, resolved.timezone);
-    return formatTZDate(zoned2, getDatePattern(resolved.dateFormat), resolved);
+    return formatTZDate(
+      zoned2,
+      getLocaleAwareDatePattern(resolved.dateFormat, resolved.tag),
+      resolved
+    );
   }
   const parsed = parseDateInput(value);
   if (!parsed) return EMPTY;
   const zoned = instantToTZDate(parsed, resolved.timezone);
-  return formatTZDate(zoned, getDatePattern(resolved.dateFormat), resolved);
+  return formatTZDate(
+    zoned,
+    getLocaleAwareDatePattern(resolved.dateFormat, resolved.tag),
+    resolved
+  );
 }
 function formatAppDateTime(value, options) {
   const parsed = parseDateInput(value);
@@ -52,7 +66,7 @@ function formatAppDateTime(value, options) {
   const zoned = instantToTZDate(parsed, resolved.timezone);
   return formatTZDate(
     zoned,
-    getDateTimePattern(resolved.timeFormat, resolved.dateFormat),
+    getDateTimePattern(resolved.timeFormat, resolved.dateFormat, resolved.tag),
     resolved
   );
 }

package/dist/lib/datetime/sync.d.ts

@@ -7,13 +7,17 @@ export type DatetimeContext = {
     timeFormat: AppTimeFormat;
     dateFormat: AppDateFormat;
 };
-/** Sync module-level datetime prefs from AppProvider (mirrors syncI18nLocale). */
+/**
+ * Sync the CURRENT scope's datetime prefs (mirrors `syncI18nLocale`). AppProvider calls it while
+ * rendering; inside `runWithAppSettings` it writes that request's state only.
+ */
 export declare function syncDatetimeContext(prefs: Pick<DatetimeContext, "locale" | "timezone" | "timeFormat" | "dateFormat"> & {
     dateFnsLocale?: Locale;
 }): void;
+/** The current scope's datetime prefs, with the neutral defaults for anything unset. */
 export declare function getDatetimeContext(): Readonly<DatetimeContext>;
 export declare function enableLiveRelativeFormatting(): void;
 export declare function disableLiveRelativeFormatting(): void;
 export declare function canUseLiveRelativeFormatting(): boolean;
-/** Vitest only — reset to defaults between cases. */
+/** Vitest only — reset the current scope to defaults between cases. */
 export declare function resetDatetimeContextForTests(): void;

package/dist/lib/datetime/sync.js

@@ -1,26 +1,22 @@
-import { getDateFnsLocale, isAppLocale } from "../../app/locales.js";
+import { getDateFnsLocale, normalizeAppLocale } from "../../app/locales.js";
 import { resolveDefaultDateFormat } from "../../app/date-format-labels.js";
+import { resolveDefaultTimeFormat } from "../../app/time-format-labels.js";
+import { getAppSettingsState } from "../../app/settings-scope.js";
 import { resolveHydrationSafeTimezone } from "../../app/timezones.js";
-const DEFAULT_LOCALE = "vi";
-function pageLocale() {
-  if (typeof document === "undefined") return DEFAULT_LOCALE;
-  const lang = (document.documentElement.lang || "").toLowerCase().split("-")[0];
-  return isAppLocale(lang) ? lang : DEFAULT_LOCALE;
-}
-const defaultContext = () => {
-  const locale = pageLocale();
+import { resolveDefaultLocale } from "../../i18n/locale-tags.js";
+function resolveContext(partial) {
+  const locale = partial?.locale ?? resolveDefaultLocale();
   return {
     locale,
-    dateFnsLocale: getDateFnsLocale(locale),
-    timezone: resolveHydrationSafeTimezone("browser"),
-    timeFormat: "24h",
-    dateFormat: resolveDefaultDateFormat(locale)
+    dateFnsLocale: partial?.dateFnsLocale ?? getDateFnsLocale(normalizeAppLocale(locale)),
+    timezone: partial?.timezone ?? resolveHydrationSafeTimezone("browser"),
+    timeFormat: partial?.timeFormat ?? resolveDefaultTimeFormat(locale),
+    dateFormat: partial?.dateFormat ?? resolveDefaultDateFormat(locale)
   };
-};
-let syncedContext = null;
+}
 let liveRelativeFormattingEnabled = true;
 function syncDatetimeContext(prefs) {
-  syncedContext = {
+  getAppSettingsState().datetime = {
     locale: prefs.locale,
     timezone: prefs.timezone,
     timeFormat: prefs.timeFormat,
@@ -29,7 +25,7 @@ function syncDatetimeContext(prefs) {
   };
 }
 function getDatetimeContext() {
-  return syncedContext ?? defaultContext();
+  return resolveContext(getAppSettingsState().datetime);
 }
 function enableLiveRelativeFormatting() {
   liveRelativeFormattingEnabled = true;
@@ -41,7 +37,7 @@ function canUseLiveRelativeFormatting() {
   return liveRelativeFormattingEnabled;
 }
 function resetDatetimeContextForTests() {
-  syncedContext = null;
+  getAppSettingsState().datetime = void 0;
   liveRelativeFormattingEnabled = true;
 }
 export {

package/dist/lib/platform.d.ts

@@ -18,7 +18,7 @@ export declare function isApplePlatform(): boolean;
  * crash.
  *
  * It lives here rather than beside its first caller because it had already been written twice
- * (`src/form/form-root.tsx`, `src/components/layout/legal-document-shell.tsx`) before a third
+ * (`src/form/form-root.tsx`, `src/lab/legal-document-shell.tsx`) before a third
  * caller needed it.
  */
 export declare function prefersReducedMotion(): boolean;

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

@@ -2,9 +2,10 @@
 import type { Locale } from "date-fns";
 import type { DayPickerProps } from "react-day-picker";
 import type { AppLocale, AppRequestHeaders, AppTimeFormat, AppTimezone, AppTimezoneDefault, AppDateFormat } from "../../app/types.js";
+import type { AppPreset } from "../../app/preset.js";
 import type { AppBrand, AppDensity, AppFontSize, AppTheme } from "../../app/theme-axes.js";
 import type { AppPreferenceAxis } from "../../app/storage.js";
-import type { AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary/index.js";
+import type { AppSettingPickerAppearanceProp, AppSettingCycleAppearanceProp, ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary/index.js";
 /**
  * @see ThemeScope
  *
@@ -20,8 +21,16 @@ export type ThemeScopeProp = {
 /** @see AppProvider */
 export type AppProviderProp = {
     children: ChildrenProp;
-    /** Initial locale when nothing in storage. Default: `vi`. */
+    /**
+     * Initial locale when nothing is in storage. Default: `<html lang>` when it names a registered
+     * locale, then the preset's `defaultLocale`, then `en` (v32; was `vi`).
+     */
     defaultLocale?: AppLocale;
+    /**
+     * Product defaults the host opts into (`godxPreset` from `@godxjp/ui/themes/godx`). Fills only
+     * what the props leave unset; its `name` is written to `<html data-preset>`. Omit for neutral.
+     */
+    preset?: AppPreset;
     /** Fallback when a translation key is missing. Default: `en`. */
     fallbackLocale?: AppLocale;
     /** Initial timezone: IANA id, `browser`, or `system`. Default: `browser`. */
@@ -94,7 +103,9 @@ export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat"
  * Replaces the former Locale/Timezone/Date-format/Time-format pickers; pick the target
  * via `kind`. Bound to `<AppProvider>` by default; pass value + onValueChange to control.
  */
-export type AppSettingPickerProp = {
+export type AppSettingPickerMenuProp = {
+    /** `true` (default): open-then-choose from a menu. `false`: see {@link AppSettingPickerCycleProp}. */
+    menu?: true;
     kind: AppSettingKind;
     /**
      * Trigger presentation. `"labeled"` shows the leading icon + the selected value in a control
@@ -117,22 +128,24 @@ export type AppSettingPickerProp = {
     onValueChange?: OnValueChangeProp<string>;
 };
 /**
- * The {@link AppSettingToggle} subset of {@link AppSettingKind} — the settings whose value set is
+ * The `menu={false}` subset of {@link AppSettingKind} — the settings whose value set is
  * CLOSED and short enough to cycle by tapping. `locale`, `timezone`, `dateFormat` and `brand` are
  * deliberately absent: a 400-entry IANA list (or a palette a service extends) is a menu, not a
  * cycle, and tapping through it is not a control anyone can use.
  */
-export type AppSettingToggleKind = Extract<AppSettingKind, "theme" | "density" | "fontSize" | "timeFormat">;
+export type AppSettingCycleKind = Extract<AppSettingKind, "theme" | "density" | "fontSize" | "timeFormat">;
 /**
- * @see AppSettingToggle — one BUTTON that steps a single AppProvider setting to its next value and
- * shows that value as its glyph. The no-menu counterpart to {@link AppSettingPickerProp}: same
- * binding contract (context-bound by default, controlled via value + onValueChange), same option
- * order, one tap instead of open-then-choose.
+ * @see AppSettingPicker `menu={false}` — one BUTTON that steps a single AppProvider setting to its
+ * next value and shows that value as its glyph (the former `AppSettingToggle`, v32 #1223). Same
+ * binding contract as the menu (context-bound by default, controlled via value + onValueChange),
+ * same option order, one tap instead of open-then-choose.
  */
-export type AppSettingToggleProp = {
-    kind: AppSettingToggleKind;
-    /** Box the button takes. Default: `"bar"` — a toggle exists for a top bar. */
-    appearance?: AppSettingToggleAppearanceProp;
+export type AppSettingPickerCycleProp = {
+    /** `false`: no menu — each tap steps to the next value. */
+    menu: false;
+    kind: AppSettingCycleKind;
+    /** Box the button takes. Default: `"bar"` — a cycler exists for a top bar. */
+    appearance?: AppSettingCycleAppearanceProp;
     className?: ClassNameProp;
     disabled?: DisabledProp;
     id?: IdProp;
@@ -140,6 +153,8 @@ export type AppSettingToggleProp = {
     value?: ValueProp<string>;
     onValueChange?: OnValueChangeProp<string>;
 };
+/** @see AppSettingPicker — the menu (default) or, with `menu={false}`, the one-tap cycler. */
+export type AppSettingPickerProp = AppSettingPickerMenuProp | AppSettingPickerCycleProp;
 /** Value exposed by `useAppContext`. */
 export type AppContextValue = {
     locale: AppLocale;

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

@@ -156,30 +156,6 @@ export type FeatureListProp = Omit<React.HTMLAttributes<HTMLUListElement>, "chil
     items: FeatureItemProp[];
     className?: ClassNameProp;
 };
-/**
- * Fixed BLOCK size of a `Thumbnail`; the inline size stays intrinsic.
- *
- * A subset of the shared `SizeProp` ladder — `xs` is off the bottom because a 48px frame with a
- * 1px hairline is a favicon, not a thumbnail, and nothing in the reported cases wanted one.
- */
-export type ThumbnailSizeProp = Extract<SizeProp, "sm" | "md" | "lg">;
-/**
- * @see Thumbnail — a framed image at a FIXED HEIGHT and its own intrinsic width, for a wrapping
- * row of pictures whose aspect ratios differ.
- */
-export type ThumbnailProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
-    /** Image URL. */
-    src: string;
-    /**
-     * Required, with no way to omit it. Pass `""` for a picture that carries no information the
-     * page does not already say — the empty string is a DECISION the author has to make, where a
-     * missing attribute is an omission nobody notices (WCAG 1.1.1).
-     */
-    alt: string;
-    /** Frame height. Default `md`. The width follows the picture's own ratio. */
-    size?: ThumbnailSizeProp;
-    className?: ClassNameProp;
-};
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -1166,7 +1142,7 @@ export type MarqueeSpeedProp = "slow" | "base" | "fast";
  *
  * The clone count is MEASURED (content width against viewport width, re-measured on resize) —
  * the behaviour no CSS-only marquee can have — and the pause control is why this is a component
- * rather than a snippet. See `src/components/data-display/marquee.tsx` for the full argument and
+ * rather than a snippet. See `src/lab/marquee.tsx` for the full argument and
  * for what is deliberately not ported from `react-fast-marquee`.
  */
 export type MarqueeProp = Omit<React.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause" | "children"> & {
@@ -1330,7 +1306,7 @@ export type ImageProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" |
     /** Image URL. */
     src: string;
     /**
-     * Required, as on `Thumbnail`: `""` is a decision, a missing `alt` an omission (WCAG 1.1.1). It
+     * Required: `""` is a decision, a missing `alt` an omission (WCAG 1.1.1). It
      * also names the preview trigger ("Preview: {alt}").
      */
     alt: string;
@@ -1356,7 +1332,17 @@ export type ImageProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" |
      * `width`/`height`, which override the preset's side they name.
      */
     size?: ImageSizeProp;
-    /** How the picture fills a fixed frame (`object-fit`). Default `cover` once the height is fixed. */
+    /**
+     * How the picture fills a fixed frame. `cover` crops, `contain` letterboxes (both inside the
+     * 4:3 `size` frame or the `width`×`height` one). Default `cover` once the height is fixed.
+     *
+     * `intrinsic` keeps the picture's OWN ratio: the frame takes the `size` height and the picture's
+     * own width — nothing cropped, nothing letterboxed — drawn with the hairline thumbnail frame on a
+     * muted backdrop and clamped to its container. `width`/`height` then stay pure `<img>`
+     * attributes (the file's real pixels), so the browser reserves the final width before the
+     * bytes land. This is what the retired `Thumbnail` was (v32 #1223): a wrapping row of portrait
+     * and landscape shots at one height.
+     */
     fit?: ImageFitProp;
     /**
      * Text under the picture, held to the picture's width, so a long file name truncates instead of
@@ -1367,8 +1353,12 @@ export type ImageProp = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" |
 };
 /** `Image` thumbnail frame preset — the `Thumbnail` height scale. */
 export type ImageSizeProp = Extract<SizeProp, "sm" | "md" | "lg">;
-/** `Image` `fit` — the picture's `object-fit` inside a fixed frame. */
-export type ImageFitProp = "cover" | "contain";
+/**
+ * `Image` `fit` — `cover`/`contain` are the picture's `object-fit` inside a fixed frame;
+ * `intrinsic` sizes the frame to the picture's own ratio at the `size` height (the former
+ * `Thumbnail`).
+ */
+export type ImageFitProp = "cover" | "contain" | "intrinsic";
 /**
  * @see ImagePreviewGroup — pages the preview across a set of pictures (antd `Image.PreviewGroup`).
  *