@godxjp/ui 31.1.0 → 31.3.0

package/docs/data-display/data-table/examples/selectable-inbox.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  ListRow,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * A selectable inbox — `ListRow` hosted in a DataTable column (gh#1016).
+ *
+ * DataTable is the only primitive that selects rows; ListRow is the canonical entity row. The
+ * column is marked `flush: true`, so its body cells drop their own padding and the ListRow owns
+ * the inset: the avatar sits 16px from the checkbox (the same step as any other column, not 32px),
+ * the row is ListRow's own height, and an unread row's band spans the whole table row — the
+ * checkbox cell included. The header cell keeps its padding, so its label sits on the row's inset.
+ */
+type Message = {
+  id: string;
+  from: string;
+  initials: string;
+  subject: string;
+  read: boolean;
+};
+
+const MESSAGES: Message[] = [
+  {
+    id: "m1",
+    from: "Aiko Tanaka",
+    initials: "AT",
+    subject: "April invoice is ready",
+    read: false,
+  },
+  {
+    id: "m2",
+    from: "Minh Nguyen",
+    initials: "MN",
+    subject: "Release notes for 4.2",
+    read: false,
+  },
+  {
+    id: "m3",
+    from: "Kenji Sato",
+    initials: "KS",
+    subject: "Meeting minutes",
+    read: true,
+  },
+  {
+    id: "m4",
+    from: "Lan Pham",
+    initials: "LP",
+    subject: "Access request approved",
+    read: true,
+  },
+];
+
+const columns: ColumnDef<Message>[] = [
+  {
+    key: "message",
+    header: "Message",
+    // The cell's CONTENT owns the inset — without it the cell padding stacks on the row's.
+    flush: true,
+    render: (m) => (
+      <ListRow
+        asChild
+        density="compact"
+        unread={!m.read}
+        leading={
+          <Avatar size="sm">
+            <AvatarFallback>{m.initials}</AvatarFallback>
+          </Avatar>
+        }
+        title={m.from}
+        description={m.subject}
+      >
+        <a href={`#${m.id}`} />
+      </ListRow>
+    ),
+  },
+];
+
+export default function SelectableInboxDemo() {
+  const [selected, setSelected] = useState<Set<string>>(new Set(["m2"]));
+
+  return (
+    <PageContainer title="Inbox" subtitle="DataTable selectable · ListRow in a flush column">
+      <Card>
+        <CardHeader>
+          <CardTitle>Messages</CardTitle>
+        </CardHeader>
+        <CardContent flush>
+          <DataTable
+            data={MESSAGES}
+            columns={columns}
+            getRowId={(m) => m.id}
+            getRowLabel={(m) => m.subject}
+            selectable
+            selected={selected}
+            onSelectChange={setSelected}
+            density="compact"
+          />
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/data-display/data-table/index.md

@@ -3,3 +3,5 @@
 The admin list primitive — sticky header, sorting, bulk selection, density toggle, cursor pagination, and a built-in empty/loading state. Never wrap it in a `data.length === 0` guard; the empty state renders itself. See Examples for a full list-page screen.
 
 See the "Approval queue" example.
+
+See the "Selectable inbox" example for a `ListRow` hosted in a selectable DataTable: mark that column `flush: true` so the cell drops its own padding and the ListRow owns the inset (gh#1016).

package/docs/feedback/auth-expiry.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { QueryClient, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { SkeletonTable } from "@godxjp/ui/feedback";
+import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { AlertMutationFeedback, AuthExpiryProvider, DataState } from "@godxjp/ui/query";
+
+/**
+ * AuthExpiryProvider · the app root owns an expired session (gh#1022). Every DataState /
+ * InfiniteQueryState / AlertMutationFeedback / AlertQueryError underneath calls `onAuthExpired`
+ * automatically, once for any number of simultaneous 401s, and shows a neutral pending state
+ * instead of an error alert. A real app redirects to its IdP here:
+ *   window.location.assign(`/auth/login?return_to=${encodeURIComponent(location.href)}`)
+ */
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+});
+
+type Member = { id: string; name: string };
+
+const expired = () => Object.assign(new Error("Access token expired"), { status: 401 });
+
+function MembersCard() {
+  const { t } = useTranslation();
+  const columns: ColumnDef<Member>[] = [
+    { key: "id", header: "ID" },
+    { key: "name", header: t("authExpiryDocs.nameColumn") },
+  ];
+  const query = useQuery<Member[]>({
+    queryKey: ["auth-expiry-members"],
+    queryFn: async () => {
+      throw expired();
+    },
+  });
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>{t("authExpiryDocs.membersTitle")}</CardTitle>
+        <CardDescription>A 401 keeps the skeleton and announces the redirect.</CardDescription>
+      </CardHeader>
+      <CardContent flush>
+        <DataState query={query} skeleton={<SkeletonTable rows={3} columns={2} />}>
+          {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+        </DataState>
+      </CardContent>
+    </Card>
+  );
+}
+
+function InviteCard() {
+  const { t } = useTranslation();
+  const mutation = useMutation({
+    mutationFn: async () => {
+      throw expired();
+    },
+  });
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>{t("authExpiryDocs.inviteTitle")}</CardTitle>
+        <CardDescription>A 401 on submit shows a muted status line, not an alert.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Flex direction="col" gap="md" align="start">
+          <Button onClick={() => mutation.mutate()}>{t("authExpiryDocs.send")}</Button>
+          <AlertMutationFeedback mutation={mutation} />
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function Demo() {
+  const [calls, setCalls] = useState(0);
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthExpiryProvider onAuthExpired={() => setCalls((n) => n + 1)}>
+        <PageContainer
+          title="AuthExpiryProvider"
+          subtitle="Expired session handled once at the app root, never as a page error"
+        >
+          <Flex direction="col" gap="lg">
+            <Text size="sm" tone="muted">
+              onAuthExpired calls: {calls}
+            </Text>
+            <MembersCard />
+            <InviteCard />
+          </Flex>
+        </PageContainer>
+      </AuthExpiryProvider>
+    </QueryClientProvider>
+  );
+}

package/docs/i18n/messages/en.json

@@ -1444,5 +1444,11 @@
       "sample": "Sample",
       "date": "September 2026 · demo date"
     }
+  },
+  "authExpiryDocs": {
+    "membersTitle": "Members",
+    "nameColumn": "Name",
+    "inviteTitle": "Send invitation",
+    "send": "Send"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1438,5 +1438,11 @@
       "sample": "サンプル",
       "date": "2026年9月 · 予定日はデモ用"
     }
+  },
+  "authExpiryDocs": {
+    "membersTitle": "メンバー",
+    "nameColumn": "氏名",
+    "inviteTitle": "招待を送信",
+    "send": "送信"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1438,5 +1438,11 @@
       "sample": "Mẫu",
       "date": "Tháng 9/2026 · ngày dùng cho demo"
     }
+  },
+  "authExpiryDocs": {
+    "membersTitle": "Thành viên",
+    "nameColumn": "Họ tên",
+    "inviteTitle": "Gửi lời mời",
+    "send": "Gửi"
   }
 }

package/docs/query/data-state.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 
 import {
@@ -12,8 +13,9 @@ import {
   type ColumnDef,
 } from "@godxjp/ui/data-display";
 import { SkeletonTable } from "@godxjp/ui/feedback";
+import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { DataState } from "@godxjp/ui/query";
+import { AuthExpiryProvider, DataState } from "@godxjp/ui/query";
 
 /**
  * DataState · drives skeleton / error / empty / success for ONE useQuery block.
@@ -99,8 +101,40 @@ function PrerequisiteBlock() {
   );
 }
 
+function ExpiredSessionQuery({ queryKey }: { queryKey: string }) {
+  const query = useQuery<Invoice[]>({
+    queryKey: [queryKey],
+    queryFn: async () => {
+      throw Object.assign(new Error("Access token expired"), { status: 401 });
+    },
+  });
+  return (
+    <DataState query={query} skeleton={<SkeletonTable rows={3} />}>
+      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+    </DataState>
+  );
+}
+
+function AuthExpiryBlock() {
+  // The app root owns session expiry (gh#1022). A real app redirects to the IdP here:
+  //   window.location.assign(`/auth/login?return_to=${encodeURIComponent(location.href)}`)
+  // Two queries 401 at once — the handler still runs exactly once, and no alert is painted.
+  const [calls, setCalls] = useState(0);
+  return (
+    <AuthExpiryProvider onAuthExpired={() => setCalls((n) => n + 1)}>
+      <Flex direction="col" gap="md">
+        <Text size="sm" tone="muted">
+          onAuthExpired calls: {calls}
+        </Text>
+        <ExpiredSessionQuery queryKey="ds-auth-expiry-a" />
+        <ExpiredSessionQuery queryKey="ds-auth-expiry-b" />
+      </Flex>
+    </AuthExpiryProvider>
+  );
+}
+
 function AuthErrorBlock() {
-  // A 401 / expired token never resolves by retrying — DataState offers session renewal instead.
+  // Without an AuthExpiryProvider: the proportionate fallback — a neutral sign-in prompt.
   const query = useQuery<Invoice[]>({
     queryKey: ["ds-auth-error"],
     queryFn: async () => {
@@ -175,10 +209,24 @@ export default function Demo() {
 
           <Card>
             <CardHeader>
-              <CardTitle level={2}>Error · auth (session renewal)</CardTitle>
+              <CardTitle level={2}>Session expired · AuthExpiryProvider (recommended)</CardTitle>
+              <CardDescription>
+                Mount `AuthExpiryProvider` once at the app root. A 401 calls `onAuthExpired`
+                automatically, once for any number of simultaneous 401s, while each DataState keeps
+                its skeleton and announces the redirect to sign-in through a live region.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AuthExpiryBlock />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>Session expired · fallback without a provider</CardTitle>
               <CardDescription>
-                A 401 / expired token routes to session renewal via `onAuthError`, never a blind
-                retry, and never surfaces the raw token message.
+                Without a provider a 401 renders a neutral, width-capped sign-in prompt whose button
+                calls `onAuthError`. It never offers a blind retry or shows the raw token message.
               </CardDescription>
             </CardHeader>
             <CardContent>

package/package.json

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