@simple-auth-kit/cli 1.3.1 → 1.4.0

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/languages/[id]/page.tsx

@@ -3,8 +3,11 @@
 import { useAbility } from "@casl/react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { AuthApiError, type LanguageSummary } from "@simple-auth-kit/auth-client";
+import { startTransition, useCallback, useEffect, useState } from "react";
+import {
+  AuthApiError,
+  type LanguageSummary,
+} from "@simple-auth-kit/auth-client";
 import { format } from "date-fns";
 import { PencilIcon } from "lucide-react";
 import { toast } from "sonner";
@@ -12,7 +15,13 @@ import { Breadcrumb } from "@/components/breadcrumb";
 import { PermissionRequired } from "@/components/permission-required";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -22,7 +31,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { PERMISSIONS, hasPermission, missingPermissionHint, type AppAbility } from "@/lib/ability";
+import {
+  PERMISSIONS,
+  hasPermission,
+  missingPermissionHint,
+  type AppAbility,
+} from "@/lib/ability";
 import { authClient } from "@/lib/auth-client";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
@@ -65,20 +79,35 @@ export default function LanguageDetailPage() {
 
   useEffect(() => {
     if (!canRead) return;
-    void load();
+    startTransition(() => void load());
   }, [canRead, load]);
 
-  if (!canRead) return <PermissionRequired permission={PERMISSIONS.languagesRead} what="Language details" />;
+  if (!canRead)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.languagesRead}
+        what="Language details"
+      />
+    );
 
   async function toggleActive() {
     if (!language) return;
     try {
       if (language.isActive) await authClient.deactivateLanguage(id);
       else await authClient.activateLanguage(id);
-      setLanguage((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
-      toast.success(language.isActive ? "Language deactivated." : "Language activated.");
+      setLanguage((prev) =>
+        prev ? { ...prev, isActive: !prev.isActive } : prev,
+      );
+      toast.success(
+        language.isActive ? "Language deactivated." : "Language activated.",
+      );
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't change this language's status. Try again."));
+      toast.error(
+        apiErrorMessage(
+          err,
+          "Couldn't change this language's status. Try again.",
+        ),
+      );
     }
   }
 
@@ -89,7 +118,9 @@ export default function LanguageDetailPage() {
       toast.success("Language deleted.");
       router.push("/languages");
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't delete this language. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't delete this language. Try again."),
+      );
       setDeleting(false);
       setDeleteOpen(false);
     }
@@ -97,9 +128,16 @@ export default function LanguageDetailPage() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Breadcrumb items={[{ title: "Languages", href: "/languages" }, { title: language?.name ?? "Details", href: `/languages/${id}` }]} />
+      <Breadcrumb
+        items={[
+          { title: "Languages", href: "/languages" },
+          { title: language?.name ?? "Details", href: `/languages/${id}` },
+        ]}
+      />
 
-      {loading && !language && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !language && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {language && (
         <>
@@ -108,16 +146,26 @@ export default function LanguageDetailPage() {
               <div>
                 <CardTitle>{language.name}</CardTitle>
                 <CardDescription>
-                  Created: {format(new Date(language.createdAt), "dd MMM yyyy")} · Updated: {format(new Date(language.updatedAt), "dd MMM yyyy")}
+                  Created: {format(new Date(language.createdAt), "dd MMM yyyy")}{" "}
+                  · Updated:{" "}
+                  {format(new Date(language.updatedAt), "dd MMM yyyy")}
                 </CardDescription>
               </div>
               <div className="flex items-center gap-1.5">
-                {language.isDefault && <Badge variant="secondary">Default</Badge>}
-                <Badge variant={language.isActive ? "success" : "destructive"}>{language.isActive ? "Active" : "Inactive"}</Badge>
+                {language.isDefault && (
+                  <Badge variant="secondary">Default</Badge>
+                )}
+                <Badge variant={language.isActive ? "success" : "destructive"}>
+                  {language.isActive ? "Active" : "Inactive"}
+                </Badge>
                 <Link
                   href={`/languages/${id}/edit`}
                   className={buttonVariants({ variant: "outline", size: "sm" })}
-                  title={canManage ? undefined : missingPermissionHint(PERMISSIONS.languagesManage)}
+                  title={
+                    canManage
+                      ? undefined
+                      : missingPermissionHint(PERMISSIONS.languagesManage)
+                  }
                   aria-disabled={!canManage}
                   onClick={(e) => !canManage && e.preventDefault()}
                 >
@@ -131,7 +179,12 @@ export default function LanguageDetailPage() {
                 {field("Name", language.name)}
                 {field("Native name", language.nativeName)}
                 {field("Code", language.code)}
-                {field("Direction", language.direction === "rtl" ? "Right to left (RTL)" : "Left to right (LTR)")}
+                {field(
+                  "Direction",
+                  language.direction === "rtl"
+                    ? "Right to left (RTL)"
+                    : "Left to right (LTR)",
+                )}
                 {field("Default language", language.isDefault ? "Yes" : "No")}
               </div>
             </CardContent>
@@ -145,7 +198,11 @@ export default function LanguageDetailPage() {
               <Button
                 variant={language.isActive ? "destructive" : "outline"}
                 disabled={!canStatus}
-                title={canStatus ? undefined : missingPermissionHint(PERMISSIONS.languagesStatus)}
+                title={
+                  canStatus
+                    ? undefined
+                    : missingPermissionHint(PERMISSIONS.languagesStatus)
+                }
                 onClick={() => void toggleActive()}
               >
                 {language.isActive ? "Deactivate" : "Activate"}
@@ -153,7 +210,15 @@ export default function LanguageDetailPage() {
 
               <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
                 <DialogTrigger asChild>
-                  <Button variant="destructive" disabled={!canManage} title={canManage ? undefined : missingPermissionHint(PERMISSIONS.languagesManage)}>
+                  <Button
+                    variant="destructive"
+                    disabled={!canManage}
+                    title={
+                      canManage
+                        ? undefined
+                        : missingPermissionHint(PERMISSIONS.languagesManage)
+                    }
+                  >
                     Delete language
                   </Button>
                 </DialogTrigger>
@@ -161,14 +226,24 @@ export default function LanguageDetailPage() {
                   <DialogHeader>
                     <DialogTitle>Delete {language.name}?</DialogTitle>
                     <DialogDescription>
-                      This soft-deletes the language: it stops appearing in listings and pickers, but the row is kept for audit purposes.
+                      This soft-deletes the language: it stops appearing in
+                      listings and pickers, but the row is kept for audit
+                      purposes.
                     </DialogDescription>
                   </DialogHeader>
                   <DialogFooter>
-                    <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+                    <Button
+                      variant="outline"
+                      onClick={() => setDeleteOpen(false)}
+                      disabled={deleting}
+                    >
                       Cancel
                     </Button>
-                    <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
+                    <Button
+                      variant="destructive"
+                      onClick={() => void handleDelete()}
+                      disabled={deleting}
+                    >
                       {deleting ? "Deleting…" : "Delete language"}
                     </Button>
                   </DialogFooter>

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/permissions/[id]/edit/page.tsx

@@ -3,18 +3,36 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAbility } from "@casl/react";
 import { useParams, useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { startTransition, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-import type { DefinePermissionInput, PermissionSummary } from "@simple-auth-kit/auth-client";
+import type {
+  DefinePermissionInput,
+  PermissionSummary,
+} from "@simple-auth-kit/auth-client";
 import { toast } from "sonner";
 import { Breadcrumb } from "@/components/breadcrumb";
 import { FormErrorAlert } from "@/components/form-error-alert";
 import { PermissionRequired } from "@/components/permission-required";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Combobox, type ComboboxOptions } from "@/components/ui/combobox";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Heading } from "@/components/ui/heading";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
@@ -49,37 +67,48 @@ export default function EditPermissionPage() {
 
   useEffect(() => {
     if (!canDefine) return;
-    setLoading(true);
-    // No single-permission endpoint on the client — load the catalog and find by id.
-    authClient
-      .listPermissions()
-      .then((catalog) => {
-        setPermissions(catalog);
-        const permission = catalog.find((p) => p.id === id) ?? null;
-        setEditing(permission);
-        if (permission) {
-          form.reset({
-            slug: permission.slug,
-            displayName: permission.displayName,
-            description: permission.description ?? "",
-            group: permission.group,
-            groupOrder: permission.groupOrder,
-            order: permission.order,
-            isActive: permission.isActive,
-          });
-        } else {
-          toast.error("Couldn't find this permission.");
-        }
-      })
-      .catch((err) => toast.error(errorMessage(err)))
-      .finally(() => setLoading(false));
+    startTransition(() => {
+      setLoading(true);
+      // No single-permission endpoint on the client — load the catalog and find by id.
+      authClient
+        .listPermissions()
+        .then((catalog) => {
+          setPermissions(catalog);
+          const permission = catalog.find((p) => p.id === id) ?? null;
+          setEditing(permission);
+          if (permission) {
+            form.reset({
+              slug: permission.slug,
+              displayName: permission.displayName,
+              description: permission.description ?? "",
+              group: permission.group,
+              groupOrder: permission.groupOrder,
+              order: permission.order,
+              isActive: permission.isActive,
+            });
+          } else {
+            toast.error("Couldn't find this permission.");
+          }
+        })
+        .catch((err) => toast.error(errorMessage(err)))
+        .finally(() => setLoading(false));
+    });
     // `form` is stable across renders (react-hook-form memoizes it), so it's safe to omit here.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [canDefine, id]);
 
-  const groupOptions = useMemo(() => deriveGroupOptions(permissions), [permissions]);
+  const groupOptions = useMemo(
+    () => deriveGroupOptions(permissions),
+    [permissions],
+  );
 
-  if (!canDefine) return <PermissionRequired permission={PERMISSIONS.permissionsDefine} what="Editing a permission" />;
+  if (!canDefine)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.permissionsDefine}
+        what="Editing a permission"
+      />
+    );
 
   function handleGroupSelect(option: ComboboxOptions) {
     form.setValue("group", option.value, { shouldValidate: true });
@@ -119,11 +148,16 @@ export default function EditPermissionPage() {
         ]}
       />
       <div className="flex items-start justify-between">
-        <Heading title="Edit Permission" description="Update permission details" />
+        <Heading
+          title="Edit Permission"
+          description="Update permission details"
+        />
       </div>
       <Separator />
 
-      {loading && !editing && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !editing && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {editing && (
         <Card>
@@ -131,16 +165,26 @@ export default function EditPermissionPage() {
           <CardContent>
             <FormErrorAlert messages={formError} />
             <Form {...form}>
-              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 w-full"
+              >
                 <Card className="w-full">
                   <CardHeader className="border-b bg-muted/50">
-                    <CardTitle className="text-2xl">Permission Information</CardTitle>
-                    <CardDescription className="text-base">Editing is an upsert keyed on slug — the slug itself can&apos;t change here</CardDescription>
+                    <CardTitle className="text-2xl">
+                      Permission Information
+                    </CardTitle>
+                    <CardDescription className="text-base">
+                      Editing is an upsert keyed on slug — the slug itself
+                      can&apos;t change here
+                    </CardDescription>
                   </CardHeader>
                   <CardContent className="pt-6">
                     <div className="space-y-6">
                       <div className="space-y-4">
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Basic Information</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Basic Information
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -203,7 +247,9 @@ export default function EditPermissionPage() {
                       </div>
 
                       <div className="space-y-4">
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Grouping</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Grouping
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -238,11 +284,20 @@ export default function EditPermissionPage() {
                                     type="number"
                                     disabled={saving}
                                     value={field.value ?? ""}
-                                    onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
+                                    onChange={(e) =>
+                                      field.onChange(
+                                        e.target.value === ""
+                                          ? undefined
+                                          : Number(e.target.value),
+                                      )
+                                    }
                                     className="bg-background border-2 focus:border-purple-500 transition-colors"
                                   />
                                 </FormControl>
-                                <FormDescription>Derived from the group — override to reorder groups.</FormDescription>
+                                <FormDescription>
+                                  Derived from the group — override to reorder
+                                  groups.
+                                </FormDescription>
                                 <FormMessage />
                               </FormItem>
                             )}
@@ -258,11 +313,20 @@ export default function EditPermissionPage() {
                                     type="number"
                                     disabled={saving}
                                     value={field.value ?? ""}
-                                    onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
+                                    onChange={(e) =>
+                                      field.onChange(
+                                        e.target.value === ""
+                                          ? undefined
+                                          : Number(e.target.value),
+                                      )
+                                    }
                                     className="bg-background border-2 focus:border-purple-500 transition-colors"
                                   />
                                 </FormControl>
-                                <FormDescription>Derived from the group&apos;s existing permissions.</FormDescription>
+                                <FormDescription>
+                                  Derived from the group&apos;s existing
+                                  permissions.
+                                </FormDescription>
                                 <FormMessage />
                               </FormItem>
                             )}
@@ -279,11 +343,21 @@ export default function EditPermissionPage() {
                       render={({ field }) => (
                         <FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
                           <FormControl>
-                            <Checkbox checked={field.value ?? true} onCheckedChange={(checked) => field.onChange(checked === true)} />
+                            <Checkbox
+                              checked={field.value ?? true}
+                              onCheckedChange={(checked) =>
+                                field.onChange(checked === true)
+                              }
+                            />
                           </FormControl>
                           <div className="space-y-1 leading-none">
-                            <FormLabel className="text-base font-medium">Active Status</FormLabel>
-                            <FormDescription className="text-sm">This permission will be active and can be assigned to roles</FormDescription>
+                            <FormLabel className="text-base font-medium">
+                              Active Status
+                            </FormLabel>
+                            <FormDescription className="text-sm">
+                              This permission will be active and can be assigned
+                              to roles
+                            </FormDescription>
                           </div>
                         </FormItem>
                       )}
@@ -291,10 +365,19 @@ export default function EditPermissionPage() {
                   </div>
 
                   <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
-                    <Button type="button" variant="outline" onClick={() => router.push("/permissions")} disabled={saving}>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => router.push("/permissions")}
+                      disabled={saving}
+                    >
                       Cancel
                     </Button>
-                    <Button disabled={saving} className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32" type="submit">
+                    <Button
+                      disabled={saving}
+                      className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32"
+                      type="submit"
+                    >
                       {saving ? "Updating..." : "Update Permission"}
                     </Button>
                   </CardFooter>

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/permissions/[id]/page.tsx

@@ -3,15 +3,24 @@
 import { useAbility } from "@casl/react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { AuthApiError, type PermissionSummary } from "@simple-auth-kit/auth-client";
+import { startTransition, useCallback, useEffect, useState } from "react";
+import {
+  AuthApiError,
+  type PermissionSummary,
+} from "@simple-auth-kit/auth-client";
 import { PencilIcon } from "lucide-react";
 import { toast } from "sonner";
 import { Breadcrumb } from "@/components/breadcrumb";
 import { PermissionRequired } from "@/components/permission-required";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
 import { authClient } from "@/lib/auth-client";
 
@@ -52,27 +61,57 @@ export default function PermissionDetailPage() {
 
   useEffect(() => {
     if (!canRead) return;
-    void load();
+    startTransition(() => void load());
   }, [canRead, load]);
 
-  if (!canRead) return <PermissionRequired permission={PERMISSIONS.permissionsRead} what="Permission details" />;
+  if (!canRead)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.permissionsRead}
+        what="Permission details"
+      />
+    );
 
   async function toggleActive() {
     if (!permission) return;
     try {
-      await authClient.definePermission({ slug: permission.slug, isActive: !permission.isActive });
-      setPermission((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
-      toast.success(permission.isActive ? "Permission deactivated." : "Permission activated.");
+      await authClient.definePermission({
+        slug: permission.slug,
+        isActive: !permission.isActive,
+      });
+      setPermission((prev) =>
+        prev ? { ...prev, isActive: !prev.isActive } : prev,
+      );
+      toast.success(
+        permission.isActive
+          ? "Permission deactivated."
+          : "Permission activated.",
+      );
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't change this permission's status. Try again."));
+      toast.error(
+        apiErrorMessage(
+          err,
+          "Couldn't change this permission's status. Try again.",
+        ),
+      );
     }
   }
 
   return (
     <div className="flex flex-col gap-4">
-      <Breadcrumb items={[{ title: "Permissions", href: "/permissions" }, { title: permission?.displayName ?? "Details", href: `/permissions/${id}` }]} />
+      <Breadcrumb
+        items={[
+          { title: "Permissions", href: "/permissions" },
+          {
+            title: permission?.displayName ?? "Details",
+            href: `/permissions/${id}`,
+          },
+        ]}
+      />
 
-      {loading && !permission && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !permission && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {permission && (
         <>
@@ -85,8 +124,15 @@ export default function PermissionDetailPage() {
                 </CardDescription>
               </div>
               <div className="flex items-center gap-1.5">
-                <Badge variant={permission.isActive ? "success" : "destructive"}>{permission.isActive ? "Active" : "Inactive"}</Badge>
-                <Link href={`/permissions/${id}/edit`} className={buttonVariants({ variant: "outline", size: "sm" })}>
+                <Badge
+                  variant={permission.isActive ? "success" : "destructive"}
+                >
+                  {permission.isActive ? "Active" : "Inactive"}
+                </Badge>
+                <Link
+                  href={`/permissions/${id}/edit`}
+                  className={buttonVariants({ variant: "outline", size: "sm" })}
+                >
                   <PencilIcon />
                   Edit
                 </Link>
@@ -107,7 +153,11 @@ export default function PermissionDetailPage() {
               <CardTitle>Danger zone</CardTitle>
             </CardHeader>
             <CardContent className="flex flex-wrap gap-2">
-              <Button variant={permission.isActive ? "destructive" : "outline"} disabled={!canDefine} onClick={() => void toggleActive()}>
+              <Button
+                variant={permission.isActive ? "destructive" : "outline"}
+                disabled={!canDefine}
+                onClick={() => void toggleActive()}
+              >
                 {permission.isActive ? "Deactivate" : "Activate"}
               </Button>
             </CardContent>