@percepta/create 3.2.0 → 3.4.0

package/templates/webapp/package.json.template

@@ -55,7 +55,7 @@
     "@opentelemetry/exporter-trace-otlp-proto": "^0.203.0",
     "@opentelemetry/sdk-node": "^0.203.0",
     "@__REPO_NAME__/auth": "workspace:*",
-    "@percepta/access-control": "0.3.2",
+    "@percepta/access-control": "0.6.0",
     "@percepta/design": "0.3.2",
     "@percepta/logger": "0.0.6",
     "@percepta/next-utils": "0.1.0",
@@ -102,6 +102,7 @@
     "zod": "^4.1.5"
   },
   "devDependencies": {
+    "@eslint/js": "^9.18.0",
     "@next/eslint-plugin-next": "^15.3.5",
     "@percepta/build": "0.4.0",
     "@tailwindcss/postcss": "^4.1.11",
@@ -121,9 +122,11 @@
     "eslint-plugin-n": "^17.23.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
     "tailwindcss": "^4.0.12",
     "typescript": "^5.7.3",
+    "typescript-eslint": "^8.33.0",
     "vitest": "^3.2.1",
     "yargs": "^17.7.2"
   }

package/templates/webapp/scripts/seed.ts

@@ -8,21 +8,36 @@
  */
 
 import { AsyncLocalStorage } from "node:async_hooks";
+import { execFileSync } from "node:child_process";
 import { loadEnvConfig } from "@next/env";
+import type { SubjectRef } from "@percepta/access-control";
 
 const SEEDED_USERS = [
   {
-    access: "owner",
-    appRole: "admin",
-    email: "admin@example.com",
-    name: "Admin User",
+    access: "customer_admin",
+    email: "customer-admin@example.com",
+    name: "Customer Admin",
     password: "password",
     role: "admin",
   },
   {
-    access: "member",
-    email: "user@example.com",
-    name: "Regular User",
+    access: "app_admin",
+    email: "app-admin@example.com",
+    name: "App Admin",
+    password: "password",
+    role: "admin",
+  },
+  {
+    access: "app_user",
+    email: "app-user@example.com",
+    name: "App User",
+    password: "password",
+    role: "user",
+  },
+  {
+    access: "none",
+    email: "non-user@example.com",
+    name: "App Non User",
     password: "password",
     role: "user",
   },
@@ -30,7 +45,7 @@ const SEEDED_USERS = [
 
 async function main(): Promise<void> {
   loadEnvConfig(process.cwd());
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (globalThis as any).AsyncLocalStorage = AsyncLocalStorage;
 
   const { auth } = await import("@__REPO_NAME__/auth");
@@ -38,13 +53,16 @@ async function main(): Promise<void> {
   const { users } = await import("@__REPO_NAME__/auth/schema");
   const { getAccessControl, toUserSubject } =
     await import("../src/services/access/AppAccessControl");
+  const { getEnvConfig } = await import("../src/config/getEnvConfig");
   const { createCustomerAccessControl } =
     await import("@percepta/access-control");
   const { eq, sql } = await import("drizzle-orm");
 
+  const envConfig = getEnvConfig();
   const access = getAccessControl();
+  const appNamespace = access.manifest.appNamespace;
   const customerAccess = createCustomerAccessControl({
-    applications: [{ appNamespace: access.manifest.appNamespace }],
+    applications: [{ appNamespace }],
     client: access.client,
   });
 
@@ -89,25 +107,54 @@ async function main(): Promise<void> {
     }
 
     const subject = toUserSubject(userId);
-    if (seededUser.access === "owner") {
-      await customerAccess.assignApplicationOwner(
-        access.manifest.appNamespace,
-        subject,
-      );
-    } else {
-      await customerAccess.assignApplicationMember(
-        access.manifest.appNamespace,
-        subject,
-      );
-    }
-
-    if ("appRole" in seededUser) {
-      await access.app.assignAppRole(seededUser.appRole, subject);
+    switch (seededUser.access) {
+      case "customer_admin":
+        bootstrapCustomerAdmin(subject, envConfig);
+        await customerAccess.revokeApplicationAdmin(appNamespace, subject);
+        await customerAccess.revokeApplicationUser(appNamespace, subject);
+        break;
+      case "app_admin":
+        await customerAccess.assignApplicationAdmin(appNamespace, subject);
+        await customerAccess.revokeApplicationUser(appNamespace, subject);
+        break;
+      case "app_user":
+        await customerAccess.assignApplicationUser(appNamespace, subject);
+        await customerAccess.revokeApplicationAdmin(appNamespace, subject);
+        break;
+      case "none":
+        await customerAccess.revokeApplicationAdmin(appNamespace, subject);
+        await customerAccess.revokeApplicationUser(appNamespace, subject);
+        break;
     }
   }
 
-  console.log("Ensured local app access grants.");
+  console.log("Ensured local customer and app access grants.");
   process.exit(0);
 }
 
 void main();
+
+function bootstrapCustomerAdmin(
+  subject: SubjectRef,
+  envConfig: {
+    readonly SPICEDB_ENDPOINT: string;
+    readonly SPICEDB_INSECURE: boolean;
+    readonly SPICEDB_PRESHARED_KEY: string;
+  },
+): void {
+  const args = [
+    "bootstrap-customer-admin",
+    "--subject",
+    subject,
+    "--endpoint",
+    envConfig.SPICEDB_ENDPOINT,
+    "--key",
+    envConfig.SPICEDB_PRESHARED_KEY,
+  ];
+
+  if (envConfig.SPICEDB_INSECURE) {
+    args.push("--insecure");
+  }
+
+  execFileSync("percepta-access-control", args, { stdio: "inherit" });
+}

package/templates/webapp/src/access/access.manifest.ts

@@ -1,5 +1,18 @@
 import { defineAccessManifest } from "@percepta/access-control";
 
+const appRoles = [] as const;
+
+export const accessRoleDefinitions = [] as const satisfies ReadonlyArray<{
+  readonly description: string;
+  readonly editableBy: "app_admin" | "customer_admin";
+  readonly label: string;
+  readonly permissions: ReadonlyArray<{
+    readonly description: string;
+    readonly permission: string;
+  }>;
+  readonly role: (typeof appRoles)[number];
+}>;
+
 export const accessManifest = defineAccessManifest({
   adminUI: {
     enabled: true,
@@ -10,6 +23,6 @@ export const accessManifest = defineAccessManifest({
     urlEnv: "APP_BASE_URL",
   },
   system: {
-    assignableRoles: ["admin"],
+    assignableRoles: appRoles,
   },
 } as const);

package/templates/webapp/src/access/schema.zed

@@ -1,7 +1,3 @@
 definition __APP_NAME_SNAKE__/system {
-  relation application: core/application
-  relation admin: core/user | core/group#member
-
-  permission access_app = application->access
-  permission manage_roles = access_app & (application->owner + admin)
+  // Add application-specific roles and permissions here.
 }

package/templates/webapp/src/app/(admin)/admin/_components/AdminTabs.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger } from "@percepta/design";
+import Link from "next/link";
+
+export type AdminTab = "assignments" | "roles";
+
+const tabs = [
+  { href: "/admin?tab=roles", label: "Roles", tab: "roles" },
+  {
+    href: "/admin?tab=assignments",
+    label: "Assignments",
+    tab: "assignments",
+  },
+] as const satisfies ReadonlyArray<{
+  readonly href: string;
+  readonly label: string;
+  readonly tab: AdminTab;
+}>;
+
+export function AdminTabs({ activeTab }: { readonly activeTab: AdminTab }) {
+  return (
+    <Tabs value={activeTab}>
+      <TabsList aria-label="RBAC views">
+        {tabs.map((tab) => (
+          <TabsTrigger asChild={true} key={tab.tab} value={tab.tab}>
+            <Link href={tab.href}>{tab.label}</Link>
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}

package/templates/webapp/src/app/(admin)/admin/_components/PrincipalMultiInput.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import {
+  Badge,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@percepta/design";
+import { useCallback, useMemo, useState, useTransition } from "react";
+
+export interface PrincipalOption {
+  readonly detail: string;
+  readonly disabled?: boolean;
+  readonly disabledReason?: string;
+  readonly label: string;
+  readonly subject: string;
+  readonly type: "Group" | "Principal" | "User";
+}
+
+interface HiddenField {
+  readonly name: string;
+  readonly value: string;
+}
+
+interface PrincipalMultiInputProps {
+  readonly action: (formData: FormData) => Promise<void>;
+  readonly disabled: boolean;
+  readonly hiddenFields?: readonly HiddenField[];
+  readonly options: readonly PrincipalOption[];
+  readonly selectedSubjects: readonly string[];
+}
+
+export function PrincipalMultiInput({
+  action,
+  disabled,
+  hiddenFields = [],
+  options,
+  selectedSubjects,
+}: PrincipalMultiInputProps) {
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState<readonly string[]>(
+    selectedSubjects,
+  );
+  const optionBySubject = useMemo(
+    () => new Map(options.map((option) => [option.subject, option])),
+    [options],
+  );
+  const selectedSet = useMemo(() => new Set(selected), [selected]);
+  const normalizedQuery = query.trim().toLowerCase();
+
+  const selectedOptions = useMemo(
+    () =>
+      selected.map(
+        (subject): PrincipalOption =>
+          optionBySubject.get(subject) ?? {
+            detail: "Unknown principal",
+            label: subject,
+            subject,
+            type: "Principal",
+          },
+      ),
+    [optionBySubject, selected],
+  );
+
+  const filteredOptions = useMemo(
+    () =>
+      options.filter((option) => {
+        if (selectedSet.has(option.subject)) {
+          return false;
+        }
+
+        if (normalizedQuery.length === 0) {
+          return true;
+        }
+
+        return `${option.label} ${option.detail} ${option.type}`
+          .toLowerCase()
+          .includes(normalizedQuery);
+      }),
+    [normalizedQuery, options, selectedSet],
+  );
+
+  const submitSelection = useCallback(
+    (nextSelected: readonly string[]) => {
+      const formData = new FormData();
+      for (const field of hiddenFields) {
+        formData.append(field.name, field.value);
+      }
+      for (const subject of nextSelected) {
+        formData.append("subjects", subject);
+      }
+
+      startTransition(async () => {
+        await action(formData);
+      });
+    },
+    [action, hiddenFields],
+  );
+
+  const isDisabled = disabled || isPending;
+
+  const handleAddOption = useCallback(
+    (subject: string) => {
+      const option = optionBySubject.get(subject);
+      if (
+        isDisabled ||
+        option?.disabled === true ||
+        selected.includes(subject)
+      ) {
+        return;
+      }
+
+      const nextSelected = [...selected, subject];
+      setSelected(nextSelected);
+      submitSelection(nextSelected);
+      setQuery("");
+      setIsPickerOpen(false);
+    },
+    [isDisabled, optionBySubject, selected, submitSelection],
+  );
+
+  const handleRemoveOption = useCallback(
+    (subject: string) => {
+      if (isDisabled) {
+        return;
+      }
+
+      const nextSelected = selected.filter(
+        (currentSubject) => currentSubject !== subject,
+      );
+      setSelected(nextSelected);
+      submitSelection(nextSelected);
+    },
+    [isDisabled, selected, submitSelection],
+  );
+
+  return (
+    <Popover
+      open={isPickerOpen}
+      onOpenChange={(open) => {
+        if (!isDisabled) {
+          setIsPickerOpen(open);
+        }
+      }}
+    >
+      <PopoverTrigger asChild={true}>
+        <div
+          aria-busy={isPending}
+          aria-disabled={isDisabled}
+          className="flex min-h-12 cursor-text flex-wrap items-center gap-2 rounded-md border border-border bg-background p-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60"
+          data-disabled={isDisabled}
+          role="button"
+          tabIndex={isDisabled ? -1 : 0}
+        >
+          {selectedOptions.map((option) => (
+            <SelectedPrincipalBadge
+              disabled={isDisabled}
+              key={option.subject}
+              onRemove={handleRemoveOption}
+              option={option}
+            />
+          ))}
+          {selectedOptions.length === 0 ? (
+            <span className="min-w-40 flex-1 text-sm text-muted-foreground">
+              {isDisabled ? "No users or groups assigned" : "Search users or groups"}
+            </span>
+          ) : (
+            <span aria-hidden={true} className="min-w-8 flex-1" />
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-96 p-0">
+        <Command shouldFilter={false}>
+          <CommandInput
+            onValueChange={setQuery}
+            placeholder="Search users or groups"
+            value={query}
+          />
+          <CommandList>
+            <CommandEmpty>No matches</CommandEmpty>
+            <CommandGroup>
+              {filteredOptions.map((option) => (
+                <CommandItem
+                  disabled={isDisabled || option.disabled === true}
+                  key={option.subject}
+                  onSelect={handleAddOption}
+                  title={option.disabledReason}
+                  value={option.subject}
+                >
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate font-medium text-foreground">
+                      {option.label}
+                    </span>
+                    <span className="block truncate text-xs text-muted-foreground">
+                      {option.detail} / {option.type}
+                    </span>
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function SelectedPrincipalBadge({
+  disabled,
+  onRemove,
+  option,
+}: {
+  readonly disabled: boolean;
+  readonly onRemove: (subject: string) => void;
+  readonly option: PrincipalOption;
+}) {
+  const handleRemove = useCallback(() => {
+    onRemove(option.subject);
+  }, [onRemove, option.subject]);
+
+  return (
+    <span
+      className="max-w-full"
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <Badge
+        className="max-w-full gap-2 py-1 text-sm"
+        disabled={disabled}
+        onRemove={handleRemove}
+        variant="secondary"
+      >
+        <span className="truncate">{option.label}</span>
+        <span className="text-xs font-normal text-muted-foreground">
+          {option.type}
+        </span>
+      </Badge>
+    </span>
+  );
+}

package/templates/webapp/src/app/(admin)/admin/_lib/accessAdmin.ts

@@ -0,0 +1,62 @@
+import type { AppRole } from "@percepta/access-control";
+import { notFound, redirect } from "next/navigation";
+import { accessManifest } from "../../../../access/access.manifest";
+import { getServerSession } from "../../../../lib/auth";
+import {
+  canManageAppRolesStrong as checkCanManageAppRoles,
+  canManageDefaultRolesStrong as checkCanManageDefaultRoles,
+} from "../../../../services/access/AppAccessControl";
+
+export type AccessAppRole = AppRole<typeof accessManifest>;
+
+export const assignableRoles: readonly AccessAppRole[] =
+  accessManifest.system.assignableRoles ?? [];
+
+export interface AdminPermissions {
+  readonly canManageAppRoles: boolean;
+  readonly canManageDefaultRoles: boolean;
+}
+
+export async function requireAnyAdminPermission(): Promise<AdminPermissions> {
+  if (!isAdminUiEnabled()) {
+    notFound();
+  }
+
+  const session = await getServerSession();
+
+  if (session?.user == null) {
+    redirect("/auth/signin");
+  }
+
+  const [canManageDefaultRoles, canManageAppRoles] = await Promise.all([
+    checkCanManageDefaultRoles(session.user.id),
+    checkCanManageAppRoles(session.user.id),
+  ]);
+
+  if (!canManageDefaultRoles && !canManageAppRoles) {
+    notFound();
+  }
+
+  return {
+    canManageAppRoles,
+    canManageDefaultRoles,
+  };
+}
+
+export function readAssignableRole(formData: FormData): AccessAppRole {
+  const role = formData.get("role");
+  if (
+    typeof role !== "string" ||
+    !assignableRoles.includes(role as AccessAppRole)
+  ) {
+    throw new Error("Invalid app role.");
+  }
+
+  return role as AccessAppRole;
+}
+
+function isAdminUiEnabled(): boolean {
+  const adminUI: { readonly enabled?: boolean } | undefined =
+    accessManifest.adminUI;
+  return adminUI?.enabled !== false;
+}