@godxjp/ui 16.9.4 → 17.0.0

package/dist/components/general/index.js

@@ -1,8 +1,12 @@
 import { Button, buttonVariants } from "./button.js";
 import { Text, Heading } from "./typography.js";
+import { Logo } from "./logo.js";
+import { Reveal } from "./reveal.js";
 export {
   Button,
   Heading,
+  Logo,
+  Reveal,
   Text,
   buttonVariants
 };

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type LogoSize = "xs" | "sm" | "md" | "lg";
+export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * The brand glyph — a short mark (a letter/initials, default `"g"`) or a custom node such as an
+     * inline `<svg>`. Keep it to 1–2 glyphs; the box is square and centres its content.
+     */
+    glyph?: React.ReactNode;
+    /** Box size tier (tokenised). Default `"md"` (1.75rem). */
+    size?: LogoSize;
+    /**
+     * Accessible name for the mark. When set, the logo is exposed to assistive tech as an image with
+     * this name; when omitted the mark is decorative (`aria-hidden`) — the correct default when a
+     * readable wordmark sits beside it.
+     */
+    label?: string;
+}
+/**
+ * Logo — the product brand-mark box: a glyph on the primary fill. Use it INSTEAD of hand-rolling a
+ * bare span with a fixed square size, a literal radius, and `bg-primary` + type utilities in shell
+ * headers, auth screens, and topbars — that repeats literal size/radius and puts type utilities on
+ * a bare span (rules #45/#46). Size, radius, and per-tier font-size are tokens; the fill reads the
+ * primary role, so a re-themed `--primary` re-tints the mark automatically. Pair with a wordmark for
+ * the full lockup (leave `label` unset so the mark stays decorative and the wordmark carries the
+ * accessible name).
+ */
+export declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/general/logo.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Logo = React.forwardRef(
+  ({ glyph = "g", size = "md", label, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "logo",
+      "data-size": size,
+      className: cn("ui-logo", className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      ...props,
+      children: glyph
+    }
+  )
+);
+Logo.displayName = "Logo";
+export {
+  Logo
+};

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

@@ -0,0 +1,14 @@
+import type { RevealProp } from "../../props/components/general.prop.js";
+export type { RevealProp, RevealProp as RevealProps } from "../../props/components/general.prop.js";
+/**
+ * Reveal — the official entrance-motion primitive (staggered fade-up). Content animates in on mount
+ * reading the DS motion tokens (`--duration-slow`, `--ease-emphasized`, `--reveal-distance`), so a
+ * consumer never hand-rolls `@keyframes` + `.app-reveal`/`.d1..d6`. `delay` is a stagger ordinal
+ * (`0..6`) — an index into the `--reveal-stagger-step` ladder, never a raw ms — so a column of rows
+ * cascades in. Under `prefers-reduced-motion` the animation is dropped entirely: content renders in
+ * its final position, fully visible, with no layout shift (CSS `@media` guard in motion.css).
+ *
+ * Pure/server-safe: no hooks, no effects. Pass `asChild` to merge the reveal onto the single child
+ * element (no wrapper `<div>`) when an extra box would break a grid/flex layout.
+ */
+export declare function Reveal({ children, delay, asChild, className, ...props }: RevealProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/general/reveal.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import { cn } from "../../lib/utils.js";
+function Reveal({ children, delay = 0, asChild = false, className, ...props }) {
+  const shared = {
+    "data-slot": "reveal",
+    "data-reveal-delay": delay > 0 ? String(delay) : void 0
+  };
+  if (asChild && isValidElement(children)) {
+    const child = children;
+    return cloneElement(child, {
+      ...shared,
+      ...props,
+      className: cn("ui-reveal", child.props.className, className)
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { ...shared, ...props, className: cn("ui-reveal", className), children });
+}
+export {
+  Reveal
+};

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 */