@godxjp/ui 18.0.3 → 18.1.0

package/dist/components/general/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "default" | "ghost" | "destructive" | "outline" | "dashed" | "secondary" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type { ButtonProp, ButtonProp as ButtonProps } from "../../props/components/general.prop.js";

package/dist/components/layout/centered-shell.d.ts

@@ -0,0 +1,22 @@
+import type { CenteredShellProp } from "../../props/components/layout.prop.js";
+export type { CenteredShellProp, CenteredShellProp as CenteredShellProps, } from "../../props/components/layout.prop.js";
+/**
+ * CenteredShell — authenticated, no-sidebar, centred-column page shell: the hosted-ID "My Page",
+ * account / self-service, and standalone-settings shape. It fills the gap between the two existing
+ * shells:
+ *
+ * - `AppShell` REQUIRES a sidebar — its padded topbar chrome (`.app-topbar`) is a grid area beside
+ *   the nav rail, so you cannot get a padded top bar without a rail.
+ * - `AuthShell` is the UNAUTHENTICATED root (login/mfa/reset); it centres a narrow ~24rem card
+ *   VERTICALLY and has no top-right actions slot.
+ *
+ * CenteredShell gives a **padded top bar with real actions** (banner) reusing the SAME chrome as
+ * `.app-topbar` (padding-inline · border · backdrop) WITHOUT a sidebar, a scrollable `main` whose
+ * content is a **centred column** of a configurable medium width (`width` = sm|md|lg, all wider than
+ * the 24rem auth card) **top-aligned** so sections flow and scroll (not vertically centred), and an
+ * optional footer (contentinfo). A hosted account page thus needs ZERO custom CSS and never
+ * hand-rolls a bar (the bare `Topbar` primitive ships no padding — the `.ui-topbar` zero-inset
+ * footgun). Layout-only: delegate motion to `Reveal` (wrap a section) so `prefers-reduced-motion`
+ * is honoured in one place.
+ */
+export declare function CenteredShell({ topbar, footer, children, width, className, }: CenteredShellProp): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+function CenteredShell({
+  topbar,
+  footer,
+  children,
+  width = "md",
+  className
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "centered-shell", className: cn("ui-centered-shell", className), children: [
+    topbar !== void 0 && /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: "ui-centered-shell-bar ui-scale-fixed",
+        "aria-label": t("layout.centeredShell.headerLabel"),
+        children: topbar
+      }
+    ),
+    /* @__PURE__ */ jsx("main", { className: "ui-centered-shell-main", "aria-label": t("layout.centeredShell.mainLabel"), children: /* @__PURE__ */ jsx("div", { className: "ui-centered-shell-column", "data-width": width, children }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx(
+      "footer",
+      {
+        className: "ui-centered-shell-footer",
+        "aria-label": t("layout.centeredShell.footerLabel"),
+        children: footer
+      }
+    )
+  ] });
+}
+export {
+  CenteredShell
+};

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

@@ -7,6 +7,9 @@ export { AppShell } from "./app-shell.js";
 export type { AppShellProps } from "./app-shell.js";
 export { AuthShell } from "./auth-shell.js";
 export type { AuthShellProp, AuthShellProps } from "./auth-shell.js";
+export { CenteredShell } from "./centered-shell.js";
+export type { CenteredShellProp, CenteredShellProps } from "./centered-shell.js";
+export type { CenteredShellWidthProp } from "../../props/vocabulary/index.js";
 export { Breadcrumb } from "./breadcrumb.js";
 export type { BreadcrumbProps } from "./breadcrumb.js";
 export { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";

package/dist/components/layout/index.js

@@ -3,6 +3,7 @@ import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
 import { AuthShell } from "./auth-shell.js";
+import { CenteredShell } from "./centered-shell.js";
 import { Breadcrumb } from "./breadcrumb.js";
 import { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
 import { Topbar } from "./topbar.js";
@@ -15,6 +16,7 @@ export {
   AspectRatio,
   AuthShell,
   Breadcrumb,
+  CenteredShell,
   Flex,
   PageContainer,
   ResizableHandle,

package/dist/form/form-context.d.ts

@@ -0,0 +1,23 @@
+import type { FormStateAdapter } from "../props/components/form.prop.js";
+/**
+ * Context carrying a framework-agnostic {@link FormStateAdapter}. `FormRoot` provides it on the
+ * adapter path (server-driven form libraries — Inertia/formik/TanStack); it stays `null` on the
+ * built-in react-hook-form path, where `FormFieldControl` falls back to RHF's own context.
+ */
+export declare const FormAdapterContext: import("react").Context<FormStateAdapter | null>;
+/** Read the active form-state adapter, or `null` when `FormRoot` runs the react-hook-form path. */
+export declare function useFormAdapter(): FormStateAdapter | null;
+/**
+ * Whether the surrounding `FormRoot` is currently submitting — works for BOTH paths: the adapter's
+ * `isSubmitting` (e.g. Inertia's `processing`) or react-hook-form's `formState.isSubmitting`. Spread
+ * onto a submit button so `processing` drives its loading state automatically:
+ * `<Button type="submit" loading={useFormSubmitting()}>`.
+ */
+export declare function useFormSubmitting(): boolean;
+/**
+ * Normalise a control's change payload to a bare value. The `FormFieldControl` render-prop spreads
+ * `onChange` onto a control that may call it with a DOM `ChangeEvent` (native `<Input>`) OR a raw
+ * value (a `Select`'s `onValueChange`). Mirror react-hook-form's own event unwrapping so the adapter
+ * path binds identically for every control kind.
+ */
+export declare function extractControlValue(arg: unknown): unknown;

package/dist/form/form-context.js

@@ -0,0 +1,29 @@
+"use client";
+import { createContext, useContext } from "react";
+import { useFormContext } from "react-hook-form";
+const FormAdapterContext = createContext(null);
+function useFormAdapter() {
+  return useContext(FormAdapterContext);
+}
+function useFormSubmitting() {
+  const adapter = useContext(FormAdapterContext);
+  const rhf = useFormContext();
+  if (adapter) return adapter.isSubmitting;
+  return rhf?.formState?.isSubmitting ?? false;
+}
+function extractControlValue(arg) {
+  if (arg && typeof arg === "object" && "target" in arg) {
+    const target = arg.target;
+    if (target && typeof target === "object" && "type" in target) {
+      const el = target;
+      return el.type === "checkbox" ? el.checked : el.value;
+    }
+  }
+  return arg;
+}
+export {
+  FormAdapterContext,
+  extractControlValue,
+  useFormAdapter,
+  useFormSubmitting
+};

package/dist/form/form-field-control.js

@@ -2,6 +2,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Controller, useFormContext } from "react-hook-form";
 import { FormField } from "../components/data-entry/form-field.js";
+import { extractControlValue, useFormAdapter } from "./form-context.js";
+const noopRef = () => {
+};
 function FormFieldControl({
   name,
   label,
@@ -10,12 +13,35 @@ function FormFieldControl({
   className,
   children
 }) {
-  const { control } = useFormContext();
+  const adapter = useFormAdapter();
+  const rhf = useFormContext();
+  if (adapter) {
+    const fieldName = String(name);
+    return /* @__PURE__ */ jsx(
+      FormField,
+      {
+        id: fieldName,
+        label,
+        required,
+        helper,
+        error: adapter.getError(fieldName),
+        className,
+        children: children({
+          id: fieldName,
+          name: fieldName,
+          value: adapter.getValue(fieldName),
+          onChange: (...args) => adapter.setValue(fieldName, extractControlValue(args[0])),
+          onBlur: () => adapter.onBlur?.(fieldName),
+          ref: noopRef
+        })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Controller,
     {
       name,
-      control,
+      control: rhf.control,
       render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
         FormField,
         {

package/dist/form/form-root.d.ts

@@ -1,4 +1,10 @@
 import { type FieldValues } from "react-hook-form";
 import type { FormRootProp } from "../props/components/form.prop.js";
 export type { FormRootProp } from "../props/components/form.prop.js";
-export declare function FormRoot<TFieldValues extends FieldValues>({ form, onSubmit, children, className, id, }: FormRootProp<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+/**
+ * FormRoot — the form shell. Provide EITHER `form` (built-in react-hook-form + Zod, client-side
+ * validation) OR `adapter` (a framework-agnostic {@link FormStateAdapter} for a server-driven form
+ * library — Inertia's `useForm` via `@godxjp/ui/inertia`, formik, TanStack Form). Both drive the same
+ * `FormFieldControl` auto-binding; the core keeps ZERO dependency on any non-RHF form library.
+ */
+export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, children, className, id, }: FormRootProp<TFieldValues>): import("react/jsx-runtime").JSX.Element;

package/dist/form/form-root.js

@@ -1,13 +1,34 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { FormProvider } from "react-hook-form";
 import { cn } from "../lib/utils.js";
+import { FormAdapterContext } from "./form-context.js";
 function FormRoot({
   form,
+  adapter,
   onSubmit,
   children,
   className,
   id
 }) {
+  if (adapter) {
+    return /* @__PURE__ */ jsx(FormAdapterContext.Provider, { value: adapter, children: /* @__PURE__ */ jsx(
+      "form",
+      {
+        id,
+        className: cn("ui-stack-md", className),
+        onSubmit: (event) => {
+          event.preventDefault();
+          void onSubmit(adapter.getValues?.() ?? {});
+        },
+        noValidate: true,
+        children
+      }
+    ) });
+  }
+  if (!form) {
+    throw new Error("FormRoot requires either a `form` (react-hook-form) or an `adapter` prop.");
+  }
   return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
     "form",
     {

package/dist/form/index.d.ts

@@ -4,4 +4,5 @@ export { FormRoot } from "./form-root.js";
 export type { FormRootProp } from "./form-root.js";
 export { FormFieldControl } from "./form-field-control.js";
 export type { FormFieldControlProp } from "./form-field-control.js";
-export type { ZodSchemaProp, FieldErrorMessageProp } from "../props/components/form.prop.js";
+export { useFormSubmitting, useFormAdapter } from "./form-context.js";
+export type { ZodSchemaProp, FieldErrorMessageProp, FormStateAdapter, } from "../props/components/form.prop.js";

package/dist/form/index.js

@@ -1,8 +1,11 @@
 import { useZodForm } from "./use-zod-form.js";
 import { FormRoot } from "./form-root.js";
 import { FormFieldControl } from "./form-field-control.js";
+import { useFormSubmitting, useFormAdapter } from "./form-context.js";
 export {
   FormFieldControl,
   FormRoot,
+  useFormAdapter,
+  useFormSubmitting,
   useZodForm
 };

package/dist/i18n/messages/en.json

@@ -138,6 +138,11 @@
       "mainLabel": "Main content",
       "footerLabel": "Footer"
     },
+    "centeredShell": {
+      "headerLabel": "Header",
+      "mainLabel": "Main content",
+      "footerLabel": "Footer"
+    },
     "topbar": {
       "toggleSidebar": "Toggle sidebar",
       "search": "Search",

package/dist/i18n/messages/ja.json

@@ -138,6 +138,11 @@
       "mainLabel": "メインコンテンツ",
       "footerLabel": "フッター"
     },
+    "centeredShell": {
+      "headerLabel": "ヘッダー",
+      "mainLabel": "メインコンテンツ",
+      "footerLabel": "フッター"
+    },
     "topbar": {
       "toggleSidebar": "サイドバーの切り替え",
       "search": "検索",

package/dist/i18n/messages/vi.json

@@ -138,6 +138,11 @@
       "mainLabel": "Nội dung chính",
       "footerLabel": "Chân trang"
     },
+    "centeredShell": {
+      "headerLabel": "Đầu trang",
+      "mainLabel": "Nội dung chính",
+      "footerLabel": "Chân trang"
+    },
     "topbar": {
       "toggleSidebar": "Bật/tắt thanh bên",
       "search": "Tìm kiếm",

package/dist/inertia/index.d.ts

@@ -0,0 +1,65 @@
+import type { FormStateAdapter } from "../props/components/form.prop.js";
+/**
+ * Structural shape of Inertia's `useForm` return that the adapter needs. Duck-typed on purpose —
+ * `@godxjp/ui` keeps ZERO dependency on `@inertiajs/react`; the real `useForm()` object satisfies
+ * this shape, so a consumer passes it directly with no import from this package.
+ */
+export interface InertiaFormLike<TData extends Record<string, unknown> = Record<string, unknown>> {
+    /** Current form values (server-driven state). */
+    data: TData;
+    /** Write a single field back (Inertia signature: `setData(key, value)`). */
+    setData(key: string, value: unknown): void;
+    /** Server (Laravel FormRequest) validation errors, keyed by field name. */
+    errors: Partial<Record<string, string>>;
+    /** True while a submit request is in flight. */
+    processing: boolean;
+}
+/**
+ * Wrap an Inertia `useForm()` object as a framework-agnostic {@link FormStateAdapter} so it drives
+ * `FormRoot`/`FormFieldControl` with the SAME auto-binding as the react-hook-form path — no manual
+ * `value`/`onChange`/`error`/`aria-invalid` per field, and `processing` flows to submit-button
+ * loading via `useFormSubmitting()`. Server errors in `form.errors` surface on the matching
+ * `FormFieldControl` and clear on correction (Inertia clears the error on `setData`).
+ *
+ * @example
+ * ```tsx
+ * import { FormRoot, FormFieldControl, useFormSubmitting } from "@godxjp/ui/form";
+ * import { inertiaAdapter } from "@godxjp/ui/inertia";
+ * import { useForm } from "@inertiajs/react";
+ *
+ * const form = useForm({ email: "", password: "" });
+ * return (
+ *   <FormRoot adapter={inertiaAdapter(form)} onSubmit={() => form.post("/login")}>
+ *     <FormFieldControl name="email" label="Email" required>
+ *       {(field) => <Input {...field} type="email" value={String(field.value ?? "")} />}
+ *     </FormFieldControl>
+ *     <Button type="submit" loading={useFormSubmitting()}>Sign in</Button>
+ *   </FormRoot>
+ * );
+ * ```
+ */
+export declare function inertiaAdapter<TData extends Record<string, unknown>>(form: InertiaFormLike<TData>): FormStateAdapter;
+/**
+ * Lighter helper for consumers who compose `FormField` by hand rather than `FormRoot`. Returns the
+ * exact props to spread onto a `FormField` + its control — `value`, `onChange`, `error`, `name` —
+ * so no field is hand-wired. Use `inertiaAdapter` + `FormRoot` for the full auto-binding instead.
+ *
+ * @example
+ * ```tsx
+ * const form = useForm({ email: "" });
+ * const email = useInertiaField(form, "email");
+ * <FormField id="email" label="Email" error={email.error}>
+ *   <Input {...email} value={String(email.value ?? "")} type="email" />
+ * </FormField>
+ * ```
+ */
+export declare function useInertiaField<TData extends Record<string, unknown>>(form: InertiaFormLike<TData>, name: string): {
+    name: string;
+    value: unknown;
+    error: string | undefined;
+    onChange: (event: {
+        target: {
+            value: unknown;
+        };
+    }) => void;
+};

package/dist/inertia/index.js

@@ -0,0 +1,22 @@
+"use client";
+function inertiaAdapter(form) {
+  return {
+    getValue: (name) => form.data[name],
+    setValue: (name, value) => form.setData(name, value),
+    getError: (name) => form.errors[name],
+    isSubmitting: form.processing,
+    getValues: () => form.data
+  };
+}
+function useInertiaField(form, name) {
+  return {
+    name,
+    value: form.data[name],
+    error: form.errors[name],
+    onChange: (event) => form.setData(name, event?.target?.value)
+  };
+}
+export {
+  inertiaAdapter,
+  useInertiaField
+};

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

@@ -9,9 +9,41 @@ export type ZodSchemaProp<T extends z.ZodType = z.ZodType> = T;
 export type UseZodFormOptionsProp<TFieldValues extends FieldValues> = Omit<UseFormProps<TFieldValues>, "resolver">;
 /** Return type of useZodForm. */
 export type UseZodFormReturnProp<TFieldValues extends FieldValues> = UseFormReturn<TFieldValues>;
+/**
+ * Framework-agnostic form-state adapter — decouples `FormRoot`/`FormFieldControl` from any single
+ * form library. The DS ships the built-in react-hook-form path (`form`), and an adapter lets a
+ * SERVER-driven form library plug into the same auto-binding: Inertia's `useForm`
+ * (`@godxjp/ui/inertia`), formik, or TanStack Form. The core has ZERO dependency on any of them —
+ * a consumer wraps its own form object in an adapter and passes it to `FormRoot`.
+ */
+export interface FormStateAdapter {
+    /** Current value of the field `name` (dotted paths allowed if the underlying store supports them). */
+    getValue(name: string): unknown;
+    /** Write `value` back to the field `name` (e.g. Inertia's `setData(name, value)`). */
+    setValue(name: string, value: unknown): void;
+    /** Server/validation error message for `name`, or undefined when the field is valid. */
+    getError(name: string): string | undefined;
+    /** True while a submit is in flight (e.g. Inertia's `processing`) — drives submit-button loading. */
+    isSubmitting: boolean;
+    /** Optional blur handler (e.g. touch-tracking); called with the field name. */
+    onBlur?(name: string): void;
+    /** Optional snapshot of all values, passed to `onSubmit`; defaults to `{}` when absent. */
+    getValues?(): unknown;
+}
 /** @see FormRoot */
 export type FormRootProp<TFieldValues extends FieldValues> = {
-    form: UseZodFormReturnProp<TFieldValues>;
+    /**
+     * react-hook-form return (client-side Zod validation). Provide EITHER `form` OR `adapter` — `form`
+     * is the built-in client path; `adapter` plugs in a server-driven form library (Inertia/formik).
+     */
+    form?: UseZodFormReturnProp<TFieldValues>;
+    /**
+     * Framework-agnostic form-state adapter (e.g. `inertiaAdapter(form)` from `@godxjp/ui/inertia`).
+     * Provide EITHER `form` OR `adapter`. With an adapter, `FormFieldControl` auto-binds each field by
+     * `name` (value/onChange/error/aria) and `useFormSubmitting()` reads `isSubmitting`.
+     */
+    adapter?: FormStateAdapter;
+    /** Submit handler. RHF path receives validated `values`; the adapter path calls it with a snapshot (`getValues()`), typically ignored in favour of the form library's own submit (`form.post(url)`). */
     onSubmit: (values: TFieldValues) => void | Promise<void>;
     children: React.ReactNode;
     className?: string;

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

@@ -1,7 +1,7 @@
 /** Layout component prop types — @see docs/COMPONENTS.md#layout */
 import type * as React from "react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
-import type { BreadcrumbProp, TitleProp, SubtitleProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, GapProp, ClassNameProp, ChildrenProp } from "../vocabulary/index.js";
+import type { BreadcrumbProp, TitleProp, SubtitleProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, GapProp, ClassNameProp, ChildrenProp } from "../vocabulary/index.js";
 /** @see PageContainer */
 export type PageContainerProp = {
     title: TitleProp;
@@ -108,6 +108,34 @@ export type AuthShellProp = {
     footer?: ReactNode;
     className?: ClassNameProp;
 };
+/**
+ * @see CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
+ * account / self-service, standalone settings). A padded top bar with real actions (banner) reusing
+ * AppShell's `.app-topbar` chrome WITHOUT a sidebar, a scrollable `main` holding a centred column of
+ * configurable medium width (`width` = sm|md|lg, all wider than AuthShell's 24rem card) top-aligned
+ * so sections flow + scroll, and an optional footer (contentinfo). Fills the gap between AppShell
+ * (needs a sidebar) and AuthShell (unauthenticated, narrow vertically-centred card) — so a hosted
+ * account page needs ZERO custom CSS and never hand-rolls a bar (the `.ui-topbar` zero-inset
+ * footgun). Layout-only; delegate motion to `Reveal`.
+ */
+export type CenteredShellProp = {
+    /** Centred column content — page sections (identity hero, org picker, service grid, team list). */
+    children: ReactNode;
+    /**
+     * Top bar slot (banner) — a `<Topbar>` with brand + real actions (an `AppSettingPicker`, a user
+     * menu, sign-out). CenteredShell wraps it in the SAME padded chrome as AppShell's topbar
+     * (padding-inline · border · backdrop), so you never hand-roll a bar. Omit → no banner.
+     */
+    topbar?: ReactNode;
+    /** Footer slot (contentinfo) pinned to the bottom (legal links, locale switch, support). Omit → none. */
+    footer?: ReactNode;
+    /**
+     * Max-width of the centred content column: `sm` ~32rem, `md` (default) ~46rem, `lg` ~64rem — all
+     * wider than AuthShell's 24rem auth card. A service retunes each tier via `--centered-shell-width-*`.
+     */
+    width?: CenteredShellWidthProp;
+    className?: ClassNameProp;
+};
 /** @see Sidebar */
 export type SidebarProductProp = {
     name: string;

package/dist/props/registry.d.ts

@@ -184,6 +184,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "layout";
         readonly description: "Page shell layout — default, narrow, flush, ghost";
     };
+    readonly CenteredShellWidthProp: {
+        readonly file: "vocabulary/layout.prop.ts";
+        readonly category: "layout";
+        readonly description: "CenteredShell column max-width — sm, md, lg";
+    };
     readonly GapProp: {
         readonly file: "vocabulary/layout.prop.ts";
         readonly category: "layout";
@@ -453,6 +458,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp"];
     };
+    readonly CenteredShellProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["ChildrenProp", "ClassNameProp", "CenteredShellWidthProp"];
+    };
     readonly SidebarProductProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";

package/dist/props/registry.js

@@ -182,6 +182,11 @@ const VOCABULARY_REGISTRY = {
     category: "layout",
     description: "Page shell layout \u2014 default, narrow, flush, ghost"
   },
+  CenteredShellWidthProp: {
+    file: "vocabulary/layout.prop.ts",
+    category: "layout",
+    description: "CenteredShell column max-width \u2014 sm, md, lg"
+  },
   GapProp: {
     file: "vocabulary/layout.prop.ts",
     category: "layout",
@@ -438,6 +443,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: ["ChildrenProp", "ClassNameProp"]
   },
+  CenteredShellProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["ChildrenProp", "ClassNameProp", "CenteredShellWidthProp"]
+  },
   SidebarProductProp: {
     group: "layout",
     file: "components/layout.prop.ts",

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

@@ -1,7 +1,7 @@
 /** Barrel — all vocabulary prop types. */
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
-export type { PageDensityProp, PageContainerVariantProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
+export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
 export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, } from "./data.prop.js";

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

@@ -8,6 +8,8 @@ export type PageDensityProp = "compact" | "default" | "comfortable";
 export type DensityProp = "compact" | "default" | "comfortable";
 /** Page shell layout — orthogonal to PageDensityProp. */
 export type PageContainerVariantProp = "default" | "narrow" | "flush" | "ghost";
+/** CenteredShell content-column max-width tier — sm ~32rem, md ~46rem, lg ~64rem. */
+export type CenteredShellWidthProp = "sm" | "md" | "lg";
 /** Shared gap between layout children; components may document subsets. */
 export type GapProp = "xs" | "sm" | "md" | "lg" | "xl";
 /** DataTable row density subset. */

package/dist/styles/shell-layout.css

@@ -123,6 +123,72 @@
     color: hsl(var(--muted-foreground));
   }
 
+  /*
+   * CENTERED SHELL — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
+   * account / self-service, standalone settings). A flex column over the same brand-wash surface as
+   * the app/auth shells: a padded top bar that MIRRORS `.app-topbar` chrome (fixed height + inline
+   * padding + border + backdrop) but WITHOUT a sidebar grid, a scrollable `main` whose content is a
+   * width-tiered centred column that is TOP-aligned (sections flow + scroll, never vertically
+   * centred like the auth card), and an optional footer. Every knob reads a token.
+   */
+  .ui-centered-shell {
+    display: flex;
+    min-height: 100dvh;
+    flex-direction: column;
+    background:
+      linear-gradient(180deg, hsl(var(--primary) / 0.035), transparent 14rem),
+      hsl(var(--background));
+  }
+
+  .ui-centered-shell-bar {
+    display: flex;
+    min-width: 0;
+    min-height: var(--centered-shell-bar-height);
+    flex: 0 0 auto;
+    align-items: center;
+    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);
+    /* 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 {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow: auto;
+    /* Ambient brand glow hook — shares the app-main hook, invisible by default (none). */
+    background-image: var(--gradient-glow);
+    /* Sole scroll/clip boundary for the page area (same containment rationale as `.app-main`). */
+    contain: paint;
+    padding: var(--centered-shell-main-padding);
+  }
+
+  .ui-centered-shell-column {
+    width: 100%;
+    margin-inline: auto;
+    max-width: var(--centered-shell-width-md);
+  }
+
+  .ui-centered-shell-column[data-width="sm"] {
+    max-width: var(--centered-shell-width-sm);
+  }
+
+  .ui-centered-shell-column[data-width="lg"] {
+    max-width: var(--centered-shell-width-lg);
+  }
+
+  .ui-centered-shell-footer {
+    padding: var(--centered-shell-footer-padding);
+    border-top: 1px solid hsl(var(--border));
+    text-align: center;
+    color: hsl(var(--muted-foreground));
+  }
+
   .app-topbar-rail {
     display: flex;
     min-width: 0;

package/dist/tokens/components/shell.css

@@ -42,4 +42,16 @@
   --auth-shell-bar-padding: var(--space-5) var(--space-6);
   --auth-shell-main-padding: var(--space-6);
   --auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
+
+  /* CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
+   * 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-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);
+  --centered-shell-width-sm: 32rem;
+  --centered-shell-width-md: 46rem;
+  --centered-shell-width-lg: 64rem;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.0.3",
-  "godxUiMcp": "18.0.2",
+  "version": "18.1.0",
+  "godxUiMcp": "18.0.3",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -88,6 +88,10 @@
       "types": "./dist/form/index.d.ts",
       "import": "./dist/form/index.js"
     },
+    "./inertia": {
+      "types": "./dist/inertia/index.d.ts",
+      "import": "./dist/inertia/index.js"
+    },
     "./app": {
       "types": "./dist/app/index.d.ts",
       "import": "./dist/app/index.js"