@carlonicora/nextjs-jsonapi 1.112.1 → 1.113.0

package/dist/features/help/index.js

@@ -21,7 +21,7 @@ var _chunkYBZVWLPHjs = require('../../chunk-YBZVWLPH.js');
 
 
 
-var _chunkDRJUN4R6js = require('../../chunk-DRJUN4R6.js');
+var _chunkUBFVV2DAjs = require('../../chunk-UBFVV2DA.js');
 
 
 var _chunk6XWW67F2js = require('../../chunk-6XWW67F2.js');
@@ -73,29 +73,29 @@ var _lucidereact = require('lucide-react');
 
 
 function HelpAssistantSheet({ open, onOpenChange }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkDRJUN4R6js.SheetContent,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUBFVV2DAjs.SheetContent,
     {
       side: "right",
       className: "flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
     }
   ) });
 }
 _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheet, "HelpAssistantSheet");
 function HelpAssistantSheetBody() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const ctx = _chunkDRJUN4R6js.useAssistantContext.call(void 0, );
+  const ctx = _chunkUBFVV2DAjs.useAssistantContext.call(void 0, );
   const showThread = !!ctx.assistant || ctx.sending || ctx.messages.length > 0;
   const send = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (content) => ctx.sendMessage(content, { howToMode: true }), "send");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDRJUN4R6js.SheetHeader, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.SheetTitle, { children: t("help.askAi.sheet.title") }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUBFVV2DAjs.SheetHeader, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.SheetTitle, { children: t("help.askAi.sheet.title") }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
     ] }),
-    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkDRJUN4R6js.AssistantThread,
+        _chunkUBFVV2DAjs.AssistantThread,
         {
           messages: ctx.messages,
           sending: ctx.sending,
@@ -105,7 +105,7 @@ function HelpAssistantSheetBody() {
           onRetry: ctx.retrySend
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.AssistantComposer, { onSend: send, disabled: ctx.sending })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.AssistantComposer, { onSend: send, disabled: ctx.sending })
     ] })
   ] });
 }
@@ -115,20 +115,20 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheetBody, "HelpAssistantSheet
 
 function HelpAskAi() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunkDRJUN4R6js.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkUBFVV2DAjs.useCurrentUserContext.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const disabled = !currentUser;
   if (disabled) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDRJUN4R6js.Tooltip, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDRJUN4R6js.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.Button, { variant: "outline", size: "sm", disabled: true }), children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUBFVV2DAjs.Tooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUBFVV2DAjs.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.Button, { variant: "outline", size: "sm", disabled: true }), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
         t("help.askAi.button")
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.TooltipContent, { children: t("help.askAi.loginTooltip") })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.TooltipContent, { children: t("help.askAi.loginTooltip") })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDRJUN4R6js.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUBFVV2DAjs.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
       t("help.askAi.button")
     ] }),
@@ -141,7 +141,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAskAi, "HelpAskAi");
 
 function HelpHeader() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunkDRJUN4R6js.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkUBFVV2DAjs.useCurrentUserContext.call(void 0, );
   const { brand } = useHelp();
   const logo = _optionalChain([brand, 'optionalAccess', _ => _.logo]);
   const label = _nullishCoalesce(_optionalChain([brand, 'optionalAccess', _2 => _2.label]), () => ( "Help"));
@@ -157,7 +157,7 @@ function HelpHeader() {
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAskAi, {}),
-      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
+      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
     ] })
   ] });
 }
@@ -199,7 +199,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, useHelpFilter, "useHelpFilter");
 
 function HelpSideNav() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkDRJUN4R6js.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkUBFVV2DAjs.usePageUrlGenerator.call(void 0, );
   const pathname = _navigation.usePathname.call(void 0, );
   const [articles, setArticles] = _react.useState.call(void 0, []);
   _react.useEffect.call(void 0, () => {
@@ -280,7 +280,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpSideNav, "HelpSideNav");
 function HelpArticleBody(props) {
   const t = _nextintl.useTranslations.call(void 0, );
   const format = _nextintl.useFormatter.call(void 0, );
-  const generateUrl = _chunkDRJUN4R6js.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkUBFVV2DAjs.usePageUrlGenerator.call(void 0, );
   const { howToType, title, summary, updatedAt, prev, next, children } = props;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "article", { className: "prose dark:prose-invert max-w-none", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: "text-muted-foreground mb-2 text-xs", children: [
@@ -358,7 +358,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpTOC, "HelpTOC");
 
 function HelpHint({ contextKey }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkDRJUN4R6js.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkUBFVV2DAjs.usePageUrlGenerator.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const [picked, setPicked] = _react.useState.call(void 0, null);
   const [articles, setArticles] = _react.useState.call(void 0, []);
@@ -376,7 +376,7 @@ function HelpHint({ contextKey }) {
   if (matches.length === 0) return null;
   const active = _nullishCoalesce(picked, () => ( (matches.length === 1 ? matches[0] : null)));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkDRJUN4R6js.Sheet,
+    _chunkUBFVV2DAjs.Sheet,
     {
       open,
       onOpenChange: (o) => {
@@ -384,11 +384,11 @@ function HelpHint({ contextKey }) {
         if (!o) setPicked(null);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDRJUN4R6js.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkDRJUN4R6js.SheetHeader, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUBFVV2DAjs.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUBFVV2DAjs.SheetHeader, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
           ] }),
           active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-4 space-y-3", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-muted-foreground text-sm", children: active.summary }),
@@ -420,7 +420,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpHint, "HelpHint");
 
 function HelpSearchResultRow({ result, onSelect }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkDRJUN4R6js.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkUBFVV2DAjs.usePageUrlGenerator.call(void 0, );
   const [article, setArticle] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     let active = true;
@@ -431,7 +431,7 @@ function HelpSearchResultRow({ result, onSelect }) {
   }, [result.id]);
   if (!article) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkDRJUN4R6js.CommandItem,
+      _chunkUBFVV2DAjs.CommandItem,
       {
         value: result.id,
         disabled: true,
@@ -440,7 +440,7 @@ function HelpSearchResultRow({ result, onSelect }) {
       }
     );
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDRJUN4R6js.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBFVV2DAjs.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _link2.default,
     {
       href: generateUrl({ page: `/help/${article.howToType}/${article.slug}` }),

package/dist/features/help/index.mjs

@@ -21,7 +21,7 @@ import {
   useAssistantContext,
   useCurrentUserContext,
   usePageUrlGenerator
-} from "../../chunk-LYLGU2BK.mjs";
+} from "../../chunk-CI36BXIG.mjs";
 import {
   _getStaticHelpContent
 } from "../../chunk-CWVYU4YZ.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.112.1",
+  "version": "1.113.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/tables/ContentListTable.tsx

@@ -47,6 +47,7 @@ type ContentListTableProps = {
   defaultExpanded?: boolean | ExpandedState;
   fullWidth?: boolean;
   groupBy?: string;
+  emptyState?: ReactNode;
 };
 
 export const ContentListTable = memo(function ContentListTable(props: ContentListTableProps) {
@@ -219,7 +220,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
             ) : (
               <TableRow>
                 <TableCell colSpan={tableColumns.length} className="h-24 text-center">
-                  No results.
+                  {props.emptyState ?? "No results."}
                 </TableCell>
               </TableRow>
             )}

package/src/shadcnui/index.ts

@@ -16,10 +16,12 @@ export * from "./ui/checkbox";
 export * from "./ui/collapsible";
 export * from "./ui/combobox";
 export * from "./ui/command";
+export * from "./ui/confirm-dialog";
 export * from "./ui/context-menu";
 export * from "./ui/dialog";
 export * from "./ui/drawer";
 export * from "./ui/dropdown-menu";
+export * from "./ui/empty-state";
 export * from "./ui/field";
 export * from "./ui/form";
 export * from "./ui/hover-card";
@@ -40,6 +42,7 @@ export * from "./ui/sidebar";
 export * from "./ui/skeleton";
 export * from "./ui/slider";
 export * from "./ui/sonner";
+export * from "./ui/spinner";
 export * from "./ui/switch";
 export * from "./ui/table";
 export * from "./ui/tabs";

package/src/shadcnui/ui/__tests__/confirm-dialog.test.tsx

@@ -0,0 +1,46 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/confirm-dialog.test.tsx
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ConfirmDialog } from "../confirm-dialog";
+
+describe("ConfirmDialog", () => {
+  it("renders title/description and calls onConfirm then closes", async () => {
+    const onConfirm = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        onOpenChange={onOpenChange}
+        title="Reveal plot secrets?"
+        description="Spoilers ahead."
+        confirmLabel="Reveal"
+        cancelLabel="Keep hidden"
+        destructive
+        onConfirm={onConfirm}
+      />,
+    );
+    expect(screen.getByText("Reveal plot secrets?")).toBeInTheDocument();
+    expect(screen.getByText("Spoilers ahead.")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Reveal" }));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("cancel closes without confirming", async () => {
+    const onConfirm = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        onOpenChange={onOpenChange}
+        title="t"
+        confirmLabel="Yes"
+        cancelLabel="No"
+        onConfirm={onConfirm}
+      />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "No" }));
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+});

package/src/shadcnui/ui/__tests__/empty-state.test.tsx

@@ -0,0 +1,26 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/empty-state.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { InboxIcon } from "lucide-react";
+import { EmptyState } from "../empty-state";
+
+describe("EmptyState", () => {
+  it("renders title, description and action", () => {
+    render(
+      <EmptyState
+        icon={InboxIcon}
+        title="No games yet"
+        description="Create your first game."
+        action={<button type="button">New game</button>}
+      />,
+    );
+    expect(screen.getByText("No games yet")).toBeInTheDocument();
+    expect(screen.getByText("Create your first game.")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "New game" })).toBeInTheDocument();
+  });
+
+  it("renders without optional parts", () => {
+    render(<EmptyState title="Empty" />);
+    expect(screen.getByText("Empty")).toBeInTheDocument();
+  });
+});

package/src/shadcnui/ui/__tests__/spinner.test.tsx

@@ -0,0 +1,18 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/spinner.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Spinner } from "../spinner";
+
+describe("Spinner", () => {
+  it("renders a status indicator with animate-spin", () => {
+    render(<Spinner />);
+    const spinner = screen.getByRole("status");
+    expect(spinner).toHaveClass("animate-spin");
+    expect(spinner).toHaveClass("size-4");
+  });
+
+  it("applies the size variant", () => {
+    render(<Spinner size="lg" />);
+    expect(screen.getByRole("status")).toHaveClass("size-8");
+  });
+});

package/src/shadcnui/ui/confirm-dialog.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+type ConfirmDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: React.ReactNode;
+  confirmLabel: string;
+  cancelLabel: string;
+  destructive?: boolean;
+  onConfirm: () => void | Promise<void>;
+};
+
+/**
+ * Convenience confirmation dialog. Controlled-only and trigger-less by design:
+ * callers render their own trigger Button and own the open state, which avoids
+ * every trigger-composition pitfall (no asChild, no nested <button>).
+ */
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  destructive = false,
+  onConfirm,
+}: ConfirmDialogProps) {
+  const [pending, setPending] = React.useState(false);
+
+  const handleConfirm = async () => {
+    try {
+      setPending(true);
+      await onConfirm();
+      onOpenChange(false);
+    } catch {
+      // A rejecting onConfirm keeps the dialog open; the caller owns user-facing
+      // error feedback inside onConfirm.
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={(next) => !pending && onOpenChange(next)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description && <AlertDialogDescription>{description}</AlertDialogDescription>}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>{cancelLabel}</AlertDialogCancel>
+          <Button
+            variant={destructive ? "destructive" : "default"}
+            onClick={() => void handleConfirm()}
+            disabled={pending}
+          >
+            {confirmLabel}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export { ConfirmDialog, type ConfirmDialogProps };

package/src/shadcnui/ui/empty-state.tsx

@@ -0,0 +1,32 @@
+import type { LucideIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type EmptyStateProps = React.ComponentProps<"div"> & {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+};
+
+function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn("flex flex-col items-center justify-center gap-1.5 rounded-md p-6 text-center", className)}
+      {...props}
+    >
+      {Icon && (
+        <div className="bg-muted text-muted-foreground mb-1 inline-flex size-8 items-center justify-center rounded-md">
+          <Icon className="size-4" />
+        </div>
+      )}
+      <div className="text-sm font-medium">{title}</div>
+      {description && <div className="text-muted-foreground text-xs/relaxed">{description}</div>}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+}
+
+export { EmptyState };

package/src/shadcnui/ui/spinner.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2Icon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const spinnerVariants = cva("animate-spin", {
+  variants: {
+    size: {
+      sm: "size-3.5",
+      default: "size-4",
+      lg: "size-8",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+function Spinner({
+  className,
+  size,
+  ...props
+}: React.ComponentProps<typeof Loader2Icon> & VariantProps<typeof spinnerVariants>) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn(spinnerVariants({ size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Spinner, spinnerVariants };