@godxjp/ui 18.13.1 → 18.15.0

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

@@ -511,8 +511,12 @@ DataTable.Content = function DataTableContent() {
                     style: columnWidth(col.width).style,
                     className: cn(
                       columnWidth(col.width).className,
-                      col.align === "right" && "text-end",
-                      col.align === "center" && "text-center",
+                      // `headerAlign` when the heading differs from the rows,
+                      // `align` otherwise. A table wanting centred headings
+                      // over start-aligned text could not say so before, and
+                      // consumers reached for `[&_th_button]:justify-center`.
+                      (col.headerAlign ?? col.align) === "right" && "text-end",
+                      (col.headerAlign ?? col.align) === "center" && "text-center",
                       col.hiddenOnMobile && "hidden md:table-cell",
                       isSortable && "select-none",
                       col.pin === "end" && "ui-data-table-pin-end"

package/dist/components/data-entry/form-errors.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { FormErrorsProp, FormErrorsProviderProp } from "../../props/components/data-entry.prop.js";
+import type { ErrorBagProp } from "../../props/vocabulary/index.js";
+export type { FormErrorsProp, FormErrorsProp as FormErrorsProps, FormErrorsProviderProp, FormErrorsProviderProp as FormErrorsProviderProps, } from "../../props/components/data-entry.prop.js";
+/**
+ * Registry shared by a `Form` with its FormFields and `<FormErrors />`. Each mounted
+ * `FormField name="…"` CLAIMS its error-bag key (it is the visible owner of that message);
+ * `<FormErrors />` renders only the unclaimed remainder. Claims are reference-counted so
+ * duplicate names and unmount order stay correct.
+ */
+interface FormErrorsRegistryValue {
+    errors: ErrorBagProp;
+    claimed: ReadonlyMap<string, number>;
+    /** Claim `key`; returns the release function (stable identity — safe as an effect dep). */
+    claim: (key: string) => () => void;
+}
+/** Read the nearest Form's error registry (null when used outside a Form). */
+export declare function useFormErrorsRegistry(): FormErrorsRegistryValue | null;
+/** First message of a bag entry — Laravel arrays surface their first message on the field. */
+export declare function firstBagMessage(entry: string | string[] | undefined): string | undefined;
+/**
+ * FormErrorsProvider — one shared error registry (error bag + claim set) over a region.
+ * 兄弟 Form 群で 1 つのエラーバッグを共有するための公開プロバイダ。Two ways to get one:
+ *
+ * 1. `Form errors={…}` renders this provider itself (both `<form>` and `asChild` modes) —
+ *    the single-form case needs nothing else.
+ * 2. An edit screen split into several sibling Card+Form sections (the standard exseli shape)
+ *    wraps the REGION in `<FormErrorsProvider errors={…}>` instead: Forms **without** their own
+ *    `errors` join the surrounding registry, every `FormField name="…"` inside claims into it,
+ *    and one `<FormErrors />` anywhere in the region renders the unclaimed remainder.
+ *
+ * A nested Form WITH its own `errors` starts a new registry that shadows this one — its claims
+ * and messages stay inside it.
+ */
+export declare function FormErrorsProvider({ errors, children }: FormErrorsProviderProp): React.JSX.Element;
+/** FormField calls this to claim its error-bag key while mounted (no-op outside a Form). */
+export declare function useClaimErrorKey(name: string | undefined): void;
+/**
+ * FormErrors — renders the error-bag entries no mounted `FormField name="…"` displays: server
+ * validation errors attached to hidden/derived fields (an `action_mode`, a `page`, a source-record
+ * id) that would otherwise fail silently. Place it inside a `Form errors={…}` — typically above
+ * the fields; it renders nothing while every entry is claimed or the bag is empty. Composed on
+ * `Alert tone="destructive"` (role="alert"), so appearing messages are announced assertively.
+ */
+export declare function FormErrors({ errors: errorsProp, title, className }: FormErrorsProp): React.JSX.Element | null;

package/dist/components/data-entry/form-errors.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { Alert, AlertContent, AlertDescription, AlertTitle } from "../feedback/alert.js";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+const FormErrorsRegistryContext = React.createContext(null);
+function useFormErrorsRegistry() {
+  return React.useContext(FormErrorsRegistryContext);
+}
+function firstBagMessage(entry) {
+  const message = Array.isArray(entry) ? entry[0] : entry;
+  return message ? message : void 0;
+}
+function FormErrorsProvider({ errors, children }) {
+  const [claimed, setClaimed] = React.useState(/* @__PURE__ */ new Map());
+  const claim = React.useCallback((key) => {
+    setClaimed((prev) => {
+      const next = new Map(prev);
+      next.set(key, (next.get(key) ?? 0) + 1);
+      return next;
+    });
+    return () => {
+      setClaimed((prev) => {
+        const next = new Map(prev);
+        const count = (next.get(key) ?? 0) - 1;
+        if (count <= 0) next.delete(key);
+        else next.set(key, count);
+        return next;
+      });
+    };
+  }, []);
+  const value = React.useMemo(
+    () => ({ errors: errors ?? {}, claimed, claim }),
+    [errors, claimed, claim]
+  );
+  return /* @__PURE__ */ jsx(FormErrorsRegistryContext.Provider, { value, children });
+}
+function useClaimErrorKey(name) {
+  const registry = useFormErrorsRegistry();
+  const claim = registry?.claim;
+  useIsomorphicLayoutEffect(() => {
+    if (!name || !claim) return;
+    return claim(name);
+  }, [name, claim]);
+}
+function FormErrors({ errors: errorsProp, title, className }) {
+  const { t } = useTranslation();
+  const registry = useFormErrorsRegistry();
+  const errors = errorsProp ?? registry?.errors;
+  const claimed = registry?.claimed;
+  const messages = [];
+  for (const [key, entry] of Object.entries(errors ?? {})) {
+    if (entry == null || (claimed?.get(key) ?? 0) > 0) continue;
+    for (const message of Array.isArray(entry) ? entry : [entry]) {
+      if (message) messages.push({ key, message });
+    }
+  }
+  if (!messages.length) return null;
+  return /* @__PURE__ */ jsx(Alert, { tone: "destructive", className, children: /* @__PURE__ */ jsxs(AlertContent, { children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: title ?? t("dataEntry.formErrors.title") }),
+    messages.map(({ key, message }, index) => /* @__PURE__ */ jsx(AlertDescription, { children: message }, `${key}-${index}`))
+  ] }) });
+}
+export {
+  FormErrors,
+  FormErrorsProvider,
+  firstBagMessage,
+  useClaimErrorKey,
+  useFormErrorsRegistry
+};

package/dist/components/data-entry/form-field.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { FormFieldProp } from "../../props/components/data-entry.prop.js";
 export type { FormFieldProp, FormFieldProp as FormFieldProps, } from "../../props/components/data-entry.prop.js";
-export declare function FormField({ id, label, required, helper, error, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;
+export declare function FormField({ id, name, label, required, helper, error: errorProp, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;

package/dist/components/data-entry/form-field.js

@@ -5,14 +5,16 @@ import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
 import { FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
 import { useFormLayout } from "./form.js";
+import { firstBagMessage, useClaimErrorKey, useFormErrorsRegistry } from "./form-errors.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const FOCUSABLE_SELECTOR = 'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])';
 function FormField({
   id,
+  name,
   label,
   required,
   helper,
-  error,
+  error: errorProp,
   labelAddon,
   layout: layoutProp,
   labelWidth: labelWidthProp,
@@ -28,6 +30,9 @@ function FormField({
   const controlWidth = controlWidthProp ?? form?.controlWidth;
   const labelAlign = form?.labelAlign ?? "end";
   const collapseBelow = form?.collapseBelow ?? "md";
+  const errorsRegistry = useFormErrorsRegistry();
+  useClaimErrorKey(name);
+  const error = errorProp ?? (name && errorsRegistry ? firstBagMessage(errorsRegistry.errors[name]) : void 0);
   const autoId = React.useId();
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;

package/dist/components/data-entry/form.d.ts

@@ -32,6 +32,7 @@ export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttribu
     collapseBelow?: BreakpointProp | false;
     columns?: import("../../props/components/layout.prop.js").ResponsiveGridColumnsProp;
     density?: import("../../props/index.js").DensityProp;
+    errors?: import("../../props/index.js").ErrorBagProp;
     asChild?: boolean;
     className?: import("../../props/index.js").ClassNameProp;
 } & React.RefAttributes<HTMLFormElement>>;

package/dist/components/data-entry/form.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
+import { FormErrorsProvider } from "./form-errors.js";
 import { ResponsiveGrid } from "../layout/responsive-grid.js";
 const FormLayoutContext = React.createContext(null);
 function useFormLayout() {
@@ -16,6 +17,7 @@ const Form = React.forwardRef(function Form2({
   collapseBelow = "md",
   columns,
   density,
+  errors,
   asChild = false,
   className,
   children,
@@ -26,17 +28,20 @@ const Form = React.forwardRef(function Form2({
     [layout, labelWidth, controlWidth, labelAlign, collapseBelow]
   );
   const content = columns != null ? /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children }) : children;
+  const withRegistry = (node) => errors !== void 0 ? /* @__PURE__ */ jsx(FormErrorsProvider, { errors, children: node }) : node;
   if (asChild) {
-    return /* @__PURE__ */ jsx(FormLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ref,
-        "data-slot": "form",
-        "data-layout": layout,
-        className: cn("ui-form", density && `ui-density-${density}`, className),
-        ...props,
-        children
-      }
+    return /* @__PURE__ */ jsx(FormLayoutContext.Provider, { value: ctx, children: withRegistry(
+      /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          "data-slot": "form",
+          "data-layout": layout,
+          className: cn("ui-form", density && `ui-density-${density}`, className),
+          ...props,
+          children
+        }
+      )
     ) });
   }
   return /* @__PURE__ */ jsx(
@@ -47,7 +52,7 @@ const Form = React.forwardRef(function Form2({
       "data-layout": layout,
       className: cn("ui-form", density && `ui-density-${density}`, className),
       ...props,
-      children: /* @__PURE__ */ jsx(FormLayoutContext.Provider, { value: ctx, children: content })
+      children: /* @__PURE__ */ jsx(FormLayoutContext.Provider, { value: ctx, children: withRegistry(content) })
     }
   );
 });

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

@@ -13,6 +13,8 @@ export { Form, useFormLayout, type FormLayoutContextValue } from "./form.js";
 export type { FormProp, FormProps } from "./form.js";
 export { FormField } from "./form-field.js";
 export type { FormFieldProp, FormFieldProps } from "./form-field.js";
+export { FormErrors, FormErrorsProvider } from "./form-errors.js";
+export type { FormErrorsProp, FormErrorsProps, FormErrorsProviderProp, FormErrorsProviderProps, } from "./form-errors.js";
 export { Field } from "./field.js";
 export type { FieldProps } from "./field.js";
 export { SearchInput } from "./search-input.js";

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

@@ -19,6 +19,7 @@ import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
 import { Textarea } from "./textarea.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
+import { FormErrors, FormErrorsProvider } from "./form-errors.js";
 import { Field } from "./field.js";
 import { SearchInput } from "./search-input.js";
 import { Switch } from "./switch.js";
@@ -69,6 +70,8 @@ export {
   DateRangePicker,
   Field,
   Form,
+  FormErrors,
+  FormErrorsProvider,
   FormField,
   Input,
   InputOTP,

package/dist/components/data-entry/upload.d.ts

@@ -4,4 +4,4 @@ export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadV
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
 export { collectUploadCommitActions, createUploadItem } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;
+export declare function Upload({ variant, triggerSize, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;

package/dist/components/data-entry/upload.js

@@ -75,6 +75,7 @@ async function runUpload(file, item, onUpload, setItems) {
 }
 function Upload({
   variant = "dropzone",
+  triggerSize,
   value,
   defaultValue,
   onValueChange,
@@ -212,13 +213,26 @@ function Upload({
     ] });
   }
   if (variant === "button") {
+    const iconOnly = typeof triggerSize === "string" && triggerSize.startsWith("icon");
+    const label = children ?? t("dataEntry.upload.buttonLabel");
     return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", disabled, onClick: openPicker, children: [
-        /* @__PURE__ */ jsx(UploadIcon, { className: "me-2 size-4", "aria-hidden": "true" }),
-        children ?? t("dataEntry.upload.buttonLabel")
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: triggerSize,
+          disabled,
+          onClick: openPicker,
+          "aria-label": iconOnly ? typeof label === "string" ? label : void 0 : void 0,
+          children: [
+            /* @__PURE__ */ jsx(UploadIcon, { className: iconOnly ? "size-4" : "me-2 size-4", "aria-hidden": "true" }),
+            iconOnly ? null : label
+          ]
+        }
+      ),
       items.length > 0 && /* @__PURE__ */ jsx(UploadFileList, { items, onRemove: removable ? removeItem : void 0 })
     ] });
   }

package/dist/components/layout/split-pane.d.ts

@@ -2,7 +2,13 @@ import type { ReactNode } from "react";
 export type SplitPaneProps = {
     children: ReactNode;
     aside: ReactNode;
-    asideWidth?: "sm" | "md";
+    /**
+     * How wide the rail is once the pane is wide enough to split: `sm` 20rem,
+     * `md` 22rem, `lg` 30rem. `lg` is for rails that carry a panel rather than a
+     * list — a metadata table, a recently-updated feed — and it holds off
+     * splitting until 64rem so the main column stays the wider of the two.
+     */
+    asideWidth?: "sm" | "md" | "lg";
     /** Accessible complementary landmark name; required when multiple panes share a document. */
     asideLabel?: string;
 };

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

@@ -21,6 +21,7 @@ function FormFieldControl({
       FormField,
       {
         id: fieldName,
+        name: fieldName,
         label,
         required,
         helper,
@@ -46,6 +47,7 @@ function FormFieldControl({
         FormField,
         {
           id: String(name),
+          name: String(name),
           label,
           required,
           helper,

package/dist/i18n/messages/en.json

@@ -128,6 +128,9 @@
       "denied": "You do not have permission to view branches",
       "loading": "Loading branches…",
       "noMatches": "No branches match your search"
+    },
+    "formErrors": {
+      "title": "Please review the following errors"
     }
   },
   "feedback": {

package/dist/i18n/messages/ja.json

@@ -125,6 +125,9 @@
       "denied": "ブランチを表示する権限がありません",
       "loading": "ブランチを読み込み中…",
       "noMatches": "検索に一致するブランチがありません"
+    },
+    "formErrors": {
+      "title": "入力内容にエラーがあります"
     }
   },
   "feedback": {

package/dist/i18n/messages/vi.json

@@ -125,6 +125,9 @@
       "denied": "Bạn không có quyền xem chi nhánh",
       "loading": "Đang tải chi nhánh…",
       "noMatches": "Không có chi nhánh khớp với tìm kiếm"
+    },
+    "formErrors": {
+      "title": "Dữ liệu nhập có lỗi, vui lòng kiểm tra"
     }
   },
   "feedback": {

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

@@ -8,7 +8,7 @@ import type { DateRange } from "react-day-picker";
 import type * as React from "react";
 import type { UploadFileItem } from "../../components/data-entry/upload-types.js";
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
-import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnChangeProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp } from "../vocabulary/index.js";
+import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorBagProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnChangeProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp, TitleProp } from "../vocabulary/index.js";
 import type { ResponsiveGridColumnsProp } from "./layout.prop.js";
 /** One-outline-per-group appearance for the compound InputOTP control. */
 export type InputOTPGroupAppearanceProp = "slots" | "grouped";
@@ -88,6 +88,15 @@ export type FormProp = React.FormHTMLAttributes<HTMLFormElement> & {
     collapseBelow?: BreakpointProp | false;
     columns?: ResponsiveGridColumnsProp;
     density?: DensityProp;
+    /**
+     * Server validation error bag (e.g. Inertia's `form.errors`). Each `FormField name="…"` inside
+     * resolves its own message from the bag automatically and CLAIMS its key; `<FormErrors />`
+     * renders the remaining, unclaimed entries — errors attached to hidden/derived fields that no
+     * visible field displays. Works in both the `<form>` and `asChild` modes. A Form WITHOUT this
+     * prop joins a surrounding `FormErrorsProvider` instead (sibling Card+Form sections sharing one
+     * bag); a Form WITH it starts its own (shadowing) registry.
+     */
+    errors?: ErrorBagProp;
     /**
      * Render the caller's own element instead of a `<form>`, keeping only the layout context.
      * For routing libraries that own the form element (Inertia, TanStack Form) — two `<form>`
@@ -110,6 +119,13 @@ export type FormProp = React.FormHTMLAttributes<HTMLFormElement> & {
 export type FormFieldProp = {
     /** Optional — auto-generated and injected into the child control when omitted. */
     id?: IdProp;
+    /**
+     * Error-bag key of this field. When the surrounding `Form` carries `errors`, the field
+     * resolves its message from `errors[name]` automatically (an explicit `error` prop wins)
+     * and CLAIMS the key so `<FormErrors />` does not repeat it. Not injected into the child —
+     * pass `name` on the control itself for native form submission.
+     */
+    name?: NameProp;
     label: LabelProp;
     required?: RequiredProp;
     helper?: HelperProp;
@@ -130,6 +146,12 @@ export type FormFieldProp = {
 } | {
     /** Optional — auto-generated and injected into the child control when omitted. */
     id?: IdProp;
+    /**
+     * Error-bag key of this field. When the surrounding `Form` carries `errors`, the field
+     * resolves its message from `errors[name]` automatically (an explicit `error` prop wins)
+     * and CLAIMS the key so `<FormErrors />` does not repeat it.
+     */
+    name?: NameProp;
     label: LabelProp;
     required?: RequiredProp;
     helper?: HelperProp;
@@ -149,6 +171,37 @@ export type FormFieldProp = {
     /** Read-only value — renders as `Descriptions.Item`-matched text instead of a control. */
     staticText: React.ReactNode;
 };
+/**
+ * @see FormErrors — the "no field to stand on" error summary. Renders the entries of the
+ * surrounding `Form`'s error bag that no mounted `FormField name="…"` has claimed — validation
+ * errors attached to hidden/derived fields (`action_mode`, `page`, a source-record id…) that
+ * would otherwise fail silently. Renders nothing while every error is claimed or the bag is empty.
+ */
+export type FormErrorsProp = {
+    /**
+     * Explicit error bag — overrides the surrounding `Form errors`. Use it when the component sits
+     * outside a `Form` (e.g. inside `FormRoot`); field claiming still applies when a `Form` provides
+     * the registry.
+     */
+    errors?: ErrorBagProp;
+    /** Heading above the messages. Defaults to the localized "please review your input" title. */
+    title?: TitleProp;
+    className?: ClassNameProp;
+};
+/**
+ * @see FormErrorsProvider — one shared error registry over a REGION of sibling Forms. An edit
+ * screen split into several Card+Form sections shares a single server bag: wrap the sections in
+ * this provider instead of passing `errors` to each Form, and every `FormField name="…"` inside
+ * (Forms without their own `errors` join the surrounding registry) claims into the same registry,
+ * so one `<FormErrors />` anywhere in the region renders exactly the unclaimed remainder.
+ * `Form errors={…}` renders this provider itself — a Form WITH its own `errors` starts a new
+ * (shadowing) registry.
+ */
+export type FormErrorsProviderProp = {
+    /** Server validation error bag shared by every Form/FormField in the region. */
+    errors?: ErrorBagProp;
+    children?: React.ReactNode;
+};
 /** @see SearchInput */
 export type SearchInputProp = FieldA11yProps & {
     id?: IdProp;
@@ -467,6 +520,15 @@ export type UploadProp = FieldA11yProps & {
     }>;
     /** Injected by FormField (or set directly) — applied to the native `<input type="file">`. */
     id?: IdProp;
+    /**
+     * `variant="button"` only — the size of the visible trigger, forwarded to
+     * Button. An icon size renders the trigger icon-only and moves the label to
+     * `aria-label`, which is what a toolbar wants: a 32px square beside the other
+     * icon buttons rather than a 147px labelled one that outweighs them.
+     *
+     * @see Button — same size scale
+     */
+    triggerSize?: "default" | "md" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
     className?: ClassNameProp;
     children?: React.ReactNode;
 };

package/dist/props/registry.d.ts

@@ -69,6 +69,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "shared";
         readonly description: "Validation error message";
     };
+    readonly ErrorBagProp: {
+        readonly file: "vocabulary/shared.prop.ts";
+        readonly category: "shared";
+        readonly description: "Server validation error bag keyed by field name (Laravel/Inertia errors)";
+    };
     readonly PlaceholderProp: {
         readonly file: "vocabulary/shared.prop.ts";
         readonly category: "shared";
@@ -863,12 +868,22 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly FormProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["FormLayoutProp", "WidthProp", "BreakpointProp", "DensityProp"];
+        readonly vocabulary: readonly ["FormLayoutProp", "WidthProp", "BreakpointProp", "DensityProp", "ErrorBagProp"];
     };
     readonly FormFieldProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["IdProp", "LabelProp", "RequiredProp", "HelperProp", "ErrorProp", "FormLayoutProp", "WidthProp"];
+        readonly vocabulary: readonly ["IdProp", "NameProp", "LabelProp", "RequiredProp", "HelperProp", "ErrorProp", "FormLayoutProp", "WidthProp"];
+    };
+    readonly FormErrorsProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ErrorBagProp", "TitleProp", "ClassNameProp"];
+    };
+    readonly FormErrorsProviderProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["ErrorBagProp"];
     };
     readonly SearchInputProp: {
         readonly group: "data-entry";

package/dist/props/registry.js

@@ -65,6 +65,11 @@ const VOCABULARY_REGISTRY = {
     category: "shared",
     description: "Validation error message"
   },
+  ErrorBagProp: {
+    file: "vocabulary/shared.prop.ts",
+    category: "shared",
+    description: "Server validation error bag keyed by field name (Laravel/Inertia errors)"
+  },
   PlaceholderProp: {
     file: "vocabulary/shared.prop.ts",
     category: "shared",
@@ -959,13 +964,14 @@ const COMPONENT_PROP_REGISTRY = {
   FormProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
-    vocabulary: ["FormLayoutProp", "WidthProp", "BreakpointProp", "DensityProp"]
+    vocabulary: ["FormLayoutProp", "WidthProp", "BreakpointProp", "DensityProp", "ErrorBagProp"]
   },
   FormFieldProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
     vocabulary: [
       "IdProp",
+      "NameProp",
       "LabelProp",
       "RequiredProp",
       "HelperProp",
@@ -974,6 +980,16 @@ const COMPONENT_PROP_REGISTRY = {
       "WidthProp"
     ]
   },
+  FormErrorsProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ErrorBagProp", "TitleProp", "ClassNameProp"]
+  },
+  FormErrorsProviderProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["ErrorBagProp"]
+  },
   SearchInputProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",

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

@@ -34,6 +34,18 @@ export type ColumnDefProp<T> = {
      */
     width?: string;
     align?: ColumnAlignProp;
+    /**
+     * Alignment of the header cell, when it differs from the body.
+     *
+     * Defaults to `align`, which is the usual case. It exists because a table
+     * can want centred headings over start-aligned text — a long subject reads
+     * from the left while its column heading sits over the column — and `align`
+     * alone cannot say that: setting it to `center` centres the rows too.
+     *
+     * Consumers were reaching for `[&_th_button]:justify-center` to get there,
+     * which is a hand-tuned override of a layout the table owns.
+     */
+    headerAlign?: ColumnAlignProp;
     hiddenOnMobile?: boolean;
     /**
      * List this column in DataTable.ViewOptions (the column show/hide "set view"

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

@@ -1,5 +1,5 @@
 /** 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 { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";

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

@@ -29,6 +29,11 @@ export type LabelProp = React.ReactNode;
 export type HelperProp = React.ReactNode;
 /** Validation error message. */
 export type ErrorProp = React.ReactNode;
+/**
+ * Server validation error bag, keyed by field name — the shape Laravel hands Inertia
+ * (`errors: { field: "message" }`) or a JSON API returns (`{ field: ["m1", "m2"] }`).
+ */
+export type ErrorBagProp = Partial<Record<string, string | string[]>>;
 /** Placeholder text for inputs. */
 export type PlaceholderProp = string;
 /** HTML input `name` attribute. */

package/dist/styles/form-layout.css

@@ -33,6 +33,16 @@
     margin-block-start: var(--form-field-row-gap);
   }
 
+  /* …except when the fields are ResponsiveGrid ITEMS (Form columns={n}): there the grid's own
+   * `gap` owns the rhythm, and a per-item margin double-spaces every row AND breaks column
+   * alignment — the FIRST field has no preceding sibling so no margin, while its row-mate does,
+   * shifting row 1's columns 11px apart and inflating every grid track by the margin. Fields
+   * merely NESTED somewhere inside a grid cell (a stacked pair in one cell) are not direct
+   * children, keep the margin, and are unaffected. */
+  .ui-responsive-grid > .ui-form-field + .ui-form-field {
+    margin-block-start: 0;
+  }
+
   /* Vertical (default + collapsed state): label stacked above the control column, LEFT-aligned.
    * Gap = the shared --field-label-gap so FormField matches Descriptions and every label-above stack. */
   .ui-form-field {

package/dist/styles/layout.css

@@ -384,6 +384,17 @@
     }
   }
 
+  /* `lg` splits later than the other two ON PURPOSE. A rail is only useful when
+   * the column it sits beside still reads as the main one, and at the 48rem
+   * threshold a 30rem rail would leave 16.5rem of main — narrower than the rail
+   * itself, which inverts the whole point. 64rem leaves the main column 33.5rem,
+   * about twice the rail, so the page still reads main-plus-rail. */
+  @container split-pane (min-width: 64rem) {
+    .ui-split-pane[data-aside-width="lg"] {
+      grid-template-columns: minmax(0, 1fr) 30rem;
+    }
+  }
+
   .ui-split-pane-main,
   .ui-split-pane-aside {
     min-width: 0;

package/dist/styles/table-layout.css

@@ -169,6 +169,44 @@
     gap: var(--space-inline-xs);
   }
 
+  /* A centred header centres its LABEL, not its button.
+   *
+   * The sort chevron lives inside the label, so centring the button alone
+   * leaves the words half an icon to the left of the column they name —
+   * measured at 8px on a 12px icon, which is enough to read as a mistake in a
+   * row of headings.
+   *
+   * The fix is symmetry, not a counterweight. Reserving the chevron's width on
+   * BOTH sides and taking the chevron itself out of flow means the words are
+   * centred by construction — the label's own box is centred in the cell, and
+   * nothing inside it can shift them. A counterweight sitting in flow as a
+   * flex sibling was the first attempt and it holds only while there is room
+   * to spare: flex items shrink, so on a column narrow enough to squeeze them
+   * the balance collapses and the label slides back off centre. Measured at
+   * 8px on a 56px column, 0px on the wide ones — a bug that only appears in
+   * the narrow case is worse than one that appears everywhere.
+   *
+   * Only when the column asked to be centred: a start-aligned header wants the
+   * icon to follow the text with nothing before it. */
+  :is(th, td).text-center > .ui-data-table-sort-button > .ui-data-table-sort-label {
+    position: relative;
+    /* The icon's width plus the gap it would have sat behind — the space the
+     * chevron occupied when it was in flow, now reserved on each side. */
+    padding-inline: calc(0.75rem + var(--space-inline-xs));
+  }
+
+  /* Out of flow, in the inline-end reservation its own padding just made.
+   * Logical inset, so RTL puts it on the other side with the padding. */
+  :is(th, td).text-center
+    > .ui-data-table-sort-button
+    > .ui-data-table-sort-label
+    > :not(:first-child) {
+    position: absolute;
+    inset-inline-end: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
   .ui-data-table-scroll {
     position: relative;
     overflow-x: auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.13.1",
-  "godxUiMcp": "18.13.1",
+  "version": "18.15.0",
+  "godxUiMcp": "18.15.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",