@godxjp/ui 16.10.0 → 17.0.0

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

@@ -0,0 +1,11 @@
+import type { AuthShellProp } from "../../props/components/layout.prop.js";
+export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../props/components/layout.prop.js";
+/**
+ * AuthShell — centred auth/login page shell (login · mfa · passkey · device · reset). A top brand
+ * bar (banner), a centred `main` that holds the auth `Card`, and an optional footer (contentinfo),
+ * over a `min-h-dvh` surface. Control density is scoped to the comfortable tier (44px, the WCAG
+ * touch floor) and the auth heading is bumped up, so forms read at the right size — replacing a
+ * consumer's `.auth-shell-*` / `.ui-auth-scope` classes. Motion is delegated to `Reveal` (wrap the
+ * card) so `prefers-reduced-motion` is honoured in one place.
+ */
+export declare function AuthShell({ brand, footer, children, className }: AuthShellProp): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+function AuthShell({ brand, footer, children, className }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-shell", className: cn("ui-auth-shell", className), children: [
+    brand !== void 0 && /* @__PURE__ */ jsx("header", { className: "ui-auth-shell-bar", "aria-label": t("layout.authShell.brandLabel"), children: brand }),
+    /* @__PURE__ */ jsx("main", { className: "ui-auth-shell-main", "aria-label": t("layout.authShell.mainLabel"), children: /* @__PURE__ */ jsx("div", { className: "ui-auth-shell-card", children }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-auth-shell-footer", "aria-label": t("layout.authShell.footerLabel"), children: footer })
+  ] });
+}
+export {
+  AuthShell
+};

package/dist/components/layout/flex.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { flexGapClass } from "../../lib/variants.js";
 function Flex({
-  direction = "col",
+  direction = "row",
   gap = "md",
   align,
   justify,

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

@@ -5,6 +5,8 @@ export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexP
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 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 { Breadcrumb } from "./breadcrumb.js";
 export type { BreadcrumbProps } from "./breadcrumb.js";
 export { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";

package/dist/components/layout/index.js

@@ -2,6 +2,7 @@ import { PageContainer } from "./page-container.js";
 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 { Breadcrumb } from "./breadcrumb.js";
 import { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
 import { Topbar } from "./topbar.js";
@@ -12,6 +13,7 @@ import { AspectRatio } from "./aspect-ratio.js";
 export {
   AppShell,
   AspectRatio,
+  AuthShell,
   Breadcrumb,
   Flex,
   PageContainer,

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

@@ -20,10 +20,10 @@ function useFooterReveal(enabled) {
     if (!enabled) return;
     const el = headerRef.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(
-      ([entry]) => setRevealed(!entry.isIntersecting),
-      { root: scrollParent(el), threshold: 0 }
-    );
+    const observer = new IntersectionObserver(([entry]) => setRevealed(!entry.isIntersecting), {
+      root: scrollParent(el),
+      threshold: 0
+    });
     observer.observe(el);
     return () => observer.disconnect();
   }, [enabled]);

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

@@ -63,7 +63,7 @@ const ARIA_KEY = {
 };
 const BRAND_NONE = "__app__";
 const AppSettingPicker = React.forwardRef(
-  function AppSettingPicker2({ kind, className, disabled, id, name, value, onValueChange }, ref) {
+  function AppSettingPicker2({ kind, appearance = "labeled", className, disabled, id, name, value, onValueChange }, ref) {
     const ctx = useOptionalAppContext();
     const { t, locale, fallbackLocale } = useTranslation();
     const raw = value ?? ctx?.[kind];
@@ -119,6 +119,7 @@ const AppSettingPicker = React.forwardRef(
     }, [kind, ctx?.timezoneOptions, current, t, locale, fallbackLocale]);
     const unbound = current === void 0 || !handleChange;
     const Icon = ICON[kind];
+    const iconOnly = appearance === "icon";
     return /* @__PURE__ */ jsxs(
       Select,
       {
@@ -133,11 +134,25 @@ const AppSettingPicker = React.forwardRef(
             {
               ref,
               id,
-              className: cn("w-full", TRIGGER_WIDTH[kind], className),
+              className: cn(
+                iconOnly ? (
+                  // Structurally icon-only: drop the owned width + value spacing, square the box to
+                  // the density-aware --control-height tap target, centre the icon and hide the
+                  // trailing chevron — no consumer descendant-selector overrides required.
+                  "w-[length:var(--control-height)] justify-center ps-0 pe-0 [&_[data-slot=select-chevron]]:hidden"
+                ) : cn("w-full", TRIGGER_WIDTH[kind]),
+                className
+              ),
               "aria-label": t(ARIA_KEY[kind]),
               children: [
-                /* @__PURE__ */ jsx(Icon, { className: "me-2 size-4 shrink-0 opacity-70", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx(SelectValue, {})
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: cn("size-4 shrink-0 opacity-70", !iconOnly && "me-2"),
+                    "aria-hidden": "true"
+                  }
+                ),
+                iconOnly ? null : /* @__PURE__ */ jsx(SelectValue, {})
               ]
             }
           ),

package/dist/components/navigation/pagination.d.ts

@@ -22,5 +22,5 @@ declare const PaginationNext: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function Pagination({ value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, simple, disabled, className, onValueChange, }: PaginationProp): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, simple, disabled, className, onValueChange, }: PaginationProp): import("react/jsx-runtime").JSX.Element | null;
 export { PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, };

package/dist/components/navigation/pagination.js

@@ -103,9 +103,10 @@ function Pagination({
     onValueChange?.(nextPage, size);
   };
   const totalLabel = typeof showTotal === "function" ? showTotal(total, [
-    (safeCurrent - 1) * pageSize + 1,
+    total === 0 ? 0 : (safeCurrent - 1) * pageSize + 1,
     Math.min(safeCurrent * pageSize, total)
   ]) : showTotal ? t("navigation.pagination.total", { total }) : null;
+  if (total <= pageSize) return null;
   if (simple) {
     return /* @__PURE__ */ jsxs(
       "nav",

package/dist/components/query/data-state.d.ts

@@ -4,4 +4,4 @@ export type { DataStateProp, DataStateProp as DataStateProps, } from "../../prop
  * Query lifecycle widget — orchestrates skeleton / error / empty / success for one `useQuery` block.
  * Not a visual component; prefer `@godxjp/ui/query`. Apps may also import via `@godxjp/ui/admin`.
  */
-export declare function DataState<T>({ query, skeleton, empty, isEmpty, errorRenderer, showRetry, onRetry, children, }: DataStateProp<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataState<T>({ query, skeleton, prerequisite, empty, isEmpty, errorRenderer, showRetry, onRetry, onAuthError, children, }: DataStateProp<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/query/data-state.js

@@ -1,7 +1,9 @@
 "use client";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AlertQueryError } from "../feedback/alert.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { classifyQueryError } from "../../lib/query-error.js";
 function defaultIsEmpty(data) {
   if (!data) return true;
   if (Array.isArray(data)) return data.length === 0;
@@ -15,13 +17,16 @@ function defaultIsEmpty(data) {
 function DataState({
   query,
   skeleton,
+  prerequisite = null,
   empty,
   isEmpty = defaultIsEmpty,
   errorRenderer,
-  showRetry = true,
+  showRetry = false,
   onRetry,
+  onAuthError,
   children
 }) {
+  const { t } = useTranslation();
   const retry = React.useCallback(() => {
     if (onRetry) {
       void onRetry();
@@ -29,16 +34,34 @@ function DataState({
     }
     void query.refetch();
   }, [onRetry, query]);
+  if (query.isPending && query.fetchStatus === "idle") return /* @__PURE__ */ jsx(Fragment, { children: prerequisite });
   if (query.isPending) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
   if (query.isError) {
     if (query.isFetching) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
     if (errorRenderer) return /* @__PURE__ */ jsx(Fragment, { children: errorRenderer(query.error, retry) });
-    return /* @__PURE__ */ jsx(AlertQueryError, { error: query.error, onRetry: showRetry ? retry : void 0 });
+    const info = classifyQueryError(query.error);
+    const canRetry = (info.category === "transient" || info.category === "unknown") && (info.retryable || showRetry || Boolean(onRetry));
+    return /* @__PURE__ */ jsx(
+      AlertQueryError,
+      {
+        error: query.error,
+        category: info.category,
+        onRetry: canRetry ? retry : void 0,
+        onAuthAction: info.category === "auth" ? onAuthError : void 0
+      }
+    );
   }
   const data = query.data;
   if (data === void 0) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
   if (empty && (data === null || isEmpty(data))) return /* @__PURE__ */ jsx(Fragment, { children: empty });
-  return /* @__PURE__ */ jsx(Fragment, { children: children(data) });
+  const content = children(data);
+  if (query.isFetching) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      content,
+      /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: t("query.refreshing") })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: content });
 }
 export {
   DataState

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

@@ -8,3 +8,5 @@ export { InfiniteQueryState, flattenItemPages } from "./infinite-query-state.js"
 export type { InfiniteQueryStateProp, InfiniteQueryStateProps } from "./infinite-query-state.js";
 export { PrefetchLink } from "./prefetch-link.js";
 export type { PrefetchLinkProp, PrefetchLinkProps } from "./prefetch-link.js";
+export { classifyQueryError, isRetryableQueryError } from "../../lib/query-error.js";
+export type { QueryErrorCategory, QueryErrorInfo } from "../../lib/query-error.js";

package/dist/components/query/index.js

@@ -3,11 +3,14 @@ import { AlertMutationFeedback } from "./mutation-feedback.js";
 import { ButtonRefetch } from "./query-refetch-button.js";
 import { InfiniteQueryState, flattenItemPages } from "./infinite-query-state.js";
 import { PrefetchLink } from "./prefetch-link.js";
+import { classifyQueryError, isRetryableQueryError } from "../../lib/query-error.js";
 export {
   AlertMutationFeedback,
   ButtonRefetch,
   DataState,
   InfiniteQueryState,
   PrefetchLink,
-  flattenItemPages
+  classifyQueryError,
+  flattenItemPages,
+  isRetryableQueryError
 };

package/dist/i18n/messages/en.json

@@ -102,7 +102,8 @@
       "search": "Search",
       "clear": "Clear selection",
       "loading": "Loading…",
-      "empty": "No results"
+      "empty": "No results",
+      "error": "Couldn’t load options"
     },
     "monthPicker": {
       "openGrid": "Open month grid",
@@ -130,6 +131,11 @@
       "mainLabel": "Main content",
       "footerLabel": "Footer"
     },
+    "authShell": {
+      "brandLabel": "Brand",
+      "mainLabel": "Main content",
+      "footerLabel": "Footer"
+    },
     "topbar": {
       "toggleSidebar": "Toggle sidebar",
       "search": "Search",
@@ -300,7 +306,29 @@
     "ASSIGNMENT_STATUS_TERMINATED": "Terminated"
   },
   "query": {
-    "loadMore": "Load more"
+    "loadMore": "Load more",
+    "refreshing": "Updating…",
+    "error": {
+      "title": {
+        "auth": "Session expired",
+        "forbidden": "Access denied",
+        "notFound": "Not found",
+        "validation": "Check your input",
+        "transient": "Something went wrong",
+        "unknown": "Something went wrong"
+      },
+      "description": {
+        "auth": "Your session has ended. Sign in again to continue.",
+        "forbidden": "You don't have permission to view this. Contact an administrator if you need access.",
+        "notFound": "We couldn't find what you were looking for. It may have been moved or removed.",
+        "validation": "The request couldn't be completed. Review your input and try again.",
+        "transient": "A temporary problem occurred. Please try again in a moment.",
+        "unknown": "An unexpected error occurred. Please try again later."
+      },
+      "action": {
+        "signIn": "Sign in again"
+      }
+    }
   },
   "chart": {
     "empty": "No data to display",

package/dist/i18n/messages/ja.json

@@ -102,7 +102,8 @@
       "search": "検索",
       "clear": "選択をクリア",
       "loading": "読み込み中…",
-      "empty": "該当なし"
+      "empty": "該当なし",
+      "error": "選択肢を読み込めませんでした"
     },
     "monthPicker": {
       "openGrid": "月選択を開く",
@@ -130,6 +131,11 @@
       "mainLabel": "メインコンテンツ",
       "footerLabel": "フッター"
     },
+    "authShell": {
+      "brandLabel": "ブランド",
+      "mainLabel": "メインコンテンツ",
+      "footerLabel": "フッター"
+    },
     "topbar": {
       "toggleSidebar": "サイドバーの切り替え",
       "search": "検索",
@@ -297,7 +303,29 @@
     "ASSIGNMENT_STATUS_TERMINATED": "終了"
   },
   "query": {
-    "loadMore": "さらに読み込む"
+    "loadMore": "さらに読み込む",
+    "refreshing": "更新中…",
+    "error": {
+      "title": {
+        "auth": "セッションの有効期限が切れました",
+        "forbidden": "アクセスできません",
+        "notFound": "見つかりません",
+        "validation": "入力内容をご確認ください",
+        "transient": "問題が発生しました",
+        "unknown": "問題が発生しました"
+      },
+      "description": {
+        "auth": "セッションが終了しました。続行するには再度サインインしてください。",
+        "forbidden": "この内容を表示する権限がありません。アクセスが必要な場合は管理者にお問い合わせください。",
+        "notFound": "お探しの内容が見つかりませんでした。移動または削除された可能性があります。",
+        "validation": "リクエストを完了できませんでした。入力内容を確認してもう一度お試しください。",
+        "transient": "一時的な問題が発生しました。しばらくしてからもう一度お試しください。",
+        "unknown": "予期しないエラーが発生しました。しばらくしてからもう一度お試しください。"
+      },
+      "action": {
+        "signIn": "再度サインイン"
+      }
+    }
   },
   "chart": {
     "empty": "データがありません",

package/dist/i18n/messages/vi.json

@@ -102,7 +102,8 @@
       "search": "Tìm kiếm",
       "clear": "Xóa lựa chọn",
       "loading": "Đang tải…",
-      "empty": "Không có kết quả"
+      "empty": "Không có kết quả",
+      "error": "Không tải được lựa chọn"
     },
     "monthPicker": {
       "openGrid": "Mở chọn tháng",
@@ -130,6 +131,11 @@
       "mainLabel": "Nội dung chính",
       "footerLabel": "Chân trang"
     },
+    "authShell": {
+      "brandLabel": "Thương hiệu",
+      "mainLabel": "Nội dung chính",
+      "footerLabel": "Chân trang"
+    },
     "topbar": {
       "toggleSidebar": "Bật/tắt thanh bên",
       "search": "Tìm kiếm",
@@ -297,7 +303,29 @@
     "ASSIGNMENT_STATUS_TERMINATED": "Chấm dứt"
   },
   "query": {
-    "loadMore": "Tải thêm"
+    "loadMore": "Tải thêm",
+    "refreshing": "Đang cập nhật…",
+    "error": {
+      "title": {
+        "auth": "Phiên đăng nhập đã hết hạn",
+        "forbidden": "Không có quyền truy cập",
+        "notFound": "Không tìm thấy",
+        "validation": "Kiểm tra lại dữ liệu",
+        "transient": "Đã xảy ra lỗi",
+        "unknown": "Đã xảy ra lỗi"
+      },
+      "description": {
+        "auth": "Phiên của bạn đã kết thúc. Vui lòng đăng nhập lại để tiếp tục.",
+        "forbidden": "Bạn không có quyền xem nội dung này. Liên hệ quản trị viên nếu cần quyền truy cập.",
+        "notFound": "Không tìm thấy nội dung bạn cần. Có thể nội dung đã được di chuyển hoặc xóa.",
+        "validation": "Không thể hoàn tất yêu cầu. Vui lòng kiểm tra lại dữ liệu và thử lại.",
+        "transient": "Đã xảy ra sự cố tạm thời. Vui lòng thử lại sau giây lát.",
+        "unknown": "Đã xảy ra lỗi không mong muốn. Vui lòng thử lại sau."
+      },
+      "action": {
+        "signIn": "Đăng nhập lại"
+      }
+    }
   },
   "chart": {
     "empty": "Không có dữ liệu",

package/dist/lib/query-error.d.ts

@@ -0,0 +1,17 @@
+/** Recovery-relevant error classes. Retry is only meaningful for `transient`. */
+export type QueryErrorCategory = "auth" | "forbidden" | "notFound" | "validation" | "transient" | "unknown";
+export type QueryErrorInfo = {
+    category: QueryErrorCategory;
+    /** HTTP status when one could be derived from the error, else `undefined`. */
+    status?: number;
+    /** `true` only when repeating the same request can plausibly resolve the cause. */
+    retryable: boolean;
+};
+/**
+ * Classify a query/API error into a recovery-relevant category. Status codes win; message
+ * keywords are the fallback for transport layers that only surface a string (e.g. an SDK that
+ * throws `new Error("Access token invalid")` with no status). Never exposes the raw message.
+ */
+export declare function classifyQueryError(error: unknown): QueryErrorInfo;
+/** `true` when repeating the same request can plausibly resolve the error. */
+export declare function isRetryableQueryError(error: unknown): boolean;

package/dist/lib/query-error.js

@@ -0,0 +1,58 @@
+function readStatus(error) {
+  if (error && typeof error === "object") {
+    const e = error;
+    for (const value of [e.status, e.statusCode, e.code]) {
+      if (typeof value === "number" && value >= 100 && value <= 599) return value;
+    }
+    const response = e.response;
+    if (response && typeof response.status === "number") return response.status;
+  }
+  const match = readMessage(error).match(/\b([1-5]\d{2})\b/);
+  if (match) {
+    const parsed = Number(match[1]);
+    if (parsed >= 400 && parsed <= 599) return parsed;
+  }
+  return void 0;
+}
+function readMessage(error) {
+  if (typeof error === "string") return error;
+  if (error instanceof Error) return error.message;
+  if (error && typeof error === "object" && typeof error.message === "string") {
+    return error.message;
+  }
+  return "";
+}
+const AUTH_RE = /unauthenticated|unauthorized|access[ _-]?token|invalid token|token (?:is )?(?:expired|invalid)|(?:session|token) (?:has )?expired/i;
+const FORBIDDEN_RE = /forbidden|permission denied|not allowed|access denied|insufficient (?:scope|permission)/i;
+const NOT_FOUND_RE = /not found|does not exist|no such/i;
+const TRANSIENT_RE = /network|failed to fetch|timeout|timed out|connection|econn(?:refused|reset|aborted)|temporarily|unavailable|gateway/i;
+const VALIDATION_RE = /validation|invalid input|bad request|must be|is required/i;
+function classifyQueryError(error) {
+  const status = readStatus(error);
+  const message = readMessage(error);
+  const of = (category, retryable) => ({
+    category,
+    status,
+    retryable
+  });
+  if (status !== void 0) {
+    if (status === 401) return of("auth", false);
+    if (status === 403) return of("forbidden", false);
+    if (status === 404) return of("notFound", false);
+    if (status === 408 || status === 429 || status >= 500) return of("transient", true);
+    if (status === 400 || status === 422) return of("validation", false);
+  }
+  if (AUTH_RE.test(message)) return of("auth", false);
+  if (FORBIDDEN_RE.test(message)) return of("forbidden", false);
+  if (NOT_FOUND_RE.test(message)) return of("notFound", false);
+  if (TRANSIENT_RE.test(message)) return of("transient", true);
+  if (VALIDATION_RE.test(message)) return of("validation", false);
+  return of("unknown", false);
+}
+function isRetryableQueryError(error) {
+  return classifyQueryError(error).retryable;
+}
+export {
+  classifyQueryError,
+  isRetryableQueryError
+};

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

@@ -3,7 +3,7 @@ import type { Locale } from "date-fns";
 import type { DayPickerProps } from "react-day-picker";
 import type { AppLocale, AppRequestHeaders, AppTimeFormat, AppTimezone, AppTimezoneDefault, AppDateFormat } from "../../app/types.js";
 import type { AppBrand, AppDensity, AppFontSize, AppTheme } from "../../app/theme-axes.js";
-import type { ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary/index.js";
+import type { AppSettingPickerAppearanceProp, ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary/index.js";
 /** @see AppProvider */
 export type AppProviderProp = {
     children: ChildrenProp;
@@ -68,6 +68,14 @@ export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat"
  */
 export type AppSettingPickerProp = {
     kind: AppSettingKind;
+    /**
+     * Trigger presentation. `"labeled"` (default) shows the leading icon + the selected value in a
+     * full-width control. `"icon"` renders a supported square, icon-only topbar trigger (e.g. a globe
+     * language switcher): it structurally drops the value text and the picker's owned width — no
+     * descendant-selector CSS overrides needed — while always keeping the localized `aria-label`, so
+     * an icon-only trigger can never ship without an accessible name.
+     */
+    appearance?: AppSettingPickerAppearanceProp;
     className?: ClassNameProp;
     disabled?: DisabledProp;
     id?: IdProp;

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

@@ -2,11 +2,26 @@
 import type * as React from "react";
 import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp } from "../vocabulary/index.js";
 /** @see EmptyState */
+/**
+ * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
+ * (no `default`/`neutral`; `destructive` is the DS name for a "danger" state). Drives the
+ * `--empty-state-icon-foreground` / `--empty-state-icon-tint` role tokens.
+ */
+export type EmptyStateToneProp = Extract<ToneProp, "muted" | "success" | "warning" | "destructive" | "info">;
 export type EmptyStateProp = {
     icon?: IconProp;
     title: TitleProp;
     description?: DescriptionProp;
     action?: ActionProp;
+    /** Visual weight appropriate to the empty condition. Default `page`. */
+    variant?: "page" | "section" | "compact";
+    /**
+     * Medallion colour intent. Default `muted` (the neutral placeholder look). Set `success` for a
+     * confirmation zero-state (e.g. device approved), or `warning`/`destructive`/`info` to match the
+     * condition — tints the icon foreground + medallion fill from the matching role token, so a
+     * consumer never hand-rolls a `.ui-success-state` class to recolour it.
+     */
+    tone?: EmptyStateToneProp;
     className?: ClassNameProp;
 };
 /** @see Descriptions */

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

@@ -320,6 +320,8 @@ export type SearchSelectProp = {
     searchPlaceholder?: PlaceholderProp;
     emptyMessage?: EmptyMessageProp;
     loadingMessage?: string;
+    /** Message shown when an async `loadOptions` rejects — a distinct state from empty/loading. */
+    errorMessage?: string;
     clearLabel?: string;
     /** Show a "clear" row when a value is selected (default true). */
     clearable?: boolean;
@@ -328,6 +330,12 @@ export type SearchSelectProp = {
     name?: NameProp;
     id?: IdProp;
     className?: ClassNameProp;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-errormessage"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean | "true" | "false";
     "data-testid"?: string;
 };
 /**

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

@@ -1,5 +1,6 @@
 /** Feedback component prop types — @see docs/COMPONENTS.md#feedback */
 import type * as React from "react";
+import type { QueryErrorCategory } from "../../lib/query-error.js";
 import type { AlertVariantProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ToneProp, TitleProp } from "../vocabulary/index.js";
 /** @see AlertDialog */
 export type AlertDialogProp = {
@@ -19,7 +20,12 @@ export type AlertDialogProp = {
 /** @see Alert */
 export type AlertQueryErrorProp = {
     error: unknown;
+    /** Override the auto-classified cause. When omitted, the error is classified via `classifyQueryError`. */
+    category?: QueryErrorCategory;
+    /** Retry affordance — only shown for causes where retrying is meaningful (transient/network/5xx). */
     onRetry?: HandlerProp;
+    /** Recovery for `auth` (401/expired token): renew the session or sign in again. Replaces Retry. */
+    onAuthAction?: HandlerProp;
     className?: ClassNameProp;
 };
 /** @see Alert */

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

@@ -1,6 +1,6 @@
 /** Foundation component prop types — @see docs/COMPONENTS.md#foundation */
 import type * as React from "react";
-import type { AsChildProp, ButtonSizeProp, ButtonVariantProp, DisabledProp, FontWeightProp, HeadingLevelProp, OnClickProp, PendingProp, ShapeProp, TextAlignProp, TextSizeProp, TextToneProp } from "../vocabulary/index.js";
+import type { AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DisabledProp, FontWeightProp, HeadingLevelProp, OnClickProp, PendingProp, RevealDelayProp, ShapeProp, TextAlignProp, TextSizeProp, TextToneProp } from "../vocabulary/index.js";
 /** @see Text — typographic primitive; replaces hand-rolled `<span className="text-[13px] …">`. */
 export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
     /** Render element. Default `span`. Covers inline/block text + description-list + code/caption. */
@@ -71,3 +71,25 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
      */
     showZero?: boolean;
 };
+/**
+ * @see Reveal — entrance-motion primitive (staggered fade-up). Wraps content in a real element
+ * that animates in on mount reading the DS motion tokens (`--duration-slow`, `--ease-emphasized`,
+ * `--reveal-distance`), replacing hand-rolled `@keyframes` + `.app-reveal`/`.d1..d6` classes.
+ * Honours `prefers-reduced-motion` — the animation is dropped and content stays fully visible with
+ * no layout shift.
+ */
+export type RevealProp = React.HTMLAttributes<HTMLDivElement> & {
+    /** Child content to reveal on enter. */
+    children?: ChildrenProp;
+    /**
+     * Stagger ordinal — an INDEX into the motion ladder (`0..6`), never a raw ms. Each step adds one
+     * `--reveal-stagger-step` of delay so sibling reveals cascade. Default `0` (enter immediately).
+     */
+    delay?: RevealDelayProp;
+    /**
+     * Merge the reveal behaviour onto the single child element (Radix `Slot`) instead of rendering a
+     * wrapper `<div>` — use when an extra box would break a grid/flex layout. Default `false`.
+     */
+    asChild?: AsChildProp;
+    className?: ClassNameProp;
+};

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

@@ -67,6 +67,23 @@ export type AppShellProp = {
     footer?: ReactNode;
     sidebarCollapsed?: boolean;
 };
+/**
+ * @see AuthShell — centred auth/login page shell (login · mfa · passkey · device · reset). A
+ * top brand bar, a centred `main` that holds the auth `Card`, and an optional footer, over a
+ * `min-h-dvh` surface. The shell scopes `--control-height` to the comfortable tier (44px, the WCAG
+ * touch floor) and bumps the auth heading size so forms read at the right density — replacing
+ * consumers' hand-rolled `.auth-shell-*` / `.ui-auth-scope` classes. Motion is delegated to
+ * `Reveal` (wrap the card) so `prefers-reduced-motion` is honoured at one place.
+ */
+export type AuthShellProp = {
+    /** Centred content — typically a single auth `<Card>` with the form. */
+    children: ReactNode;
+    /** Brand bar slot pinned to the top (e.g. a `<Logo>` / product mark). */
+    brand?: ReactNode;
+    /** Footer slot pinned to the bottom (legal links, locale switch, support). */
+    footer?: ReactNode;
+    className?: ClassNameProp;
+};
 /** @see Sidebar */
 export type SidebarProductProp = {
     name: string;