@valentinkolb/cloud 0.4.0 → 0.5.1

package/src/ui/misc/EntitySearch.tsx

@@ -1,95 +1,184 @@
-import { createSignal, For, Show } from "solid-js";
 import { timed } from "@valentinkolb/stdlib/solid";
+import { createSignal, For, Show } from "solid-js";
 import TextInput from "../input/TextInput";
 
-type UserResult = {
+/**
+ * Discriminated principal returned to `onSelect`. Field names match the
+ * platform `Principal` contract (`userId`/`groupId`) so callers can pass
+ * `onSelect={grant}` directly via structural typing — the extra display
+ * fields (uid, displayName, etc.) are silently ignored by `Principal`-
+ * typed callbacks.
+ */
+export type EntitySearchPrincipal =
+  | {
+      type: "user";
+      userId: string;
+      uid: string;
+      displayName: string;
+      mail: string | null;
+      provider: "ipa" | "local";
+    }
+  | {
+      type: "group";
+      groupId: string;
+      provider: "ipa" | "local";
+      name: string;
+      description: string | null;
+    }
+  | {
+      type: "service_account";
+      serviceAccountId: string;
+      name: string;
+      kind: "user_delegated" | "resource_bound";
+      appId: string | null;
+      resourceType: string | null;
+      resourceId: string | null;
+    }
+  | { type: "authenticated" }
+  | { type: "public" };
+
+type EntitySearchProps = {
+  // ── Include flags (one per principal type, all default false) ────────
+  /** Surface real user accounts in the result list. */
+  includeUsers?: boolean;
+  /** Surface real groups in the result list. */
+  includeGroups?: boolean;
+  /** Surface service accounts in the result list. Off by default. */
+  includeServiceAccounts?: boolean;
+  /** Inject a synthetic "All authenticated users" row at the top. */
+  includeAuthenticated?: boolean;
+  /** Inject a synthetic "Public" row at the top. */
+  includePublic?: boolean;
+
+  // ── Exclude filters (apply only when the related kind is included) ──
+  excludeUserIds?: string[];
+  excludeGroupIds?: string[];
+  excludeServiceAccountIds?: string[];
+
+  /** Provider filter — applies uniformly to BOTH users and groups.
+   *  Whitelist semantics: `["local"]` shows only local accounts,
+   *  `["ipa"]` only IPA. Empty / both / undefined → no filter.
+   *  Backend accepts a single provider; this client only sends the
+   *  filter when the array has exactly one entry, since both-allowed
+   *  is identical to no-filter. */
+  providers?: ("ipa" | "local")[];
+
+  /** Restrict users to those who are members of at least one of these
+   *  groups. User-side qualifier — only meaningful when
+   *  `includeUsers` is true. */
+  onlyMembersOf?: string[];
+
+  // ── Output ──────────────────────────────────────────────────────────
+  onSelect: (principal: EntitySearchPrincipal) => void;
+
+  // ── Cosmetics ───────────────────────────────────────────────────────
+  placeholder?: string;
+  /** Override the result-list height. Default `h-48`. */
+  resultsHeightClass?: string;
+  /** Disables every "+" button in the result list while a parent-side
+   *  mutation is in flight. */
+  disabled?: boolean;
+};
+
+// Backend `/api/accounts/entities` shape (subset we consume here).
+type ApiUser = {
   id: string;
   uid: string;
   displayName: string;
   mail: string | null;
+  provider: "ipa" | "local";
 };
-
-type GroupResult = {
+type ApiGroup = {
   id: string;
   provider: "ipa" | "local";
   name: string;
   description: string | null;
 };
-
-export type EntitySearchResult =
-  | { type: "user"; id: string; displayName: string; mail: string | null }
-  | { type: "group"; id: string; provider: "ipa" | "local"; name: string; description: string | null };
-
-type EntitySearchProps = {
-  apiBaseUrl?: string;
-  groupProvider?: "ipa" | "local";
-  searchUsers?: boolean;
-  searchGroups?: boolean;
-  excludeUserIds?: string[];
-  excludeGroupIds?: string[];
-  onSelect: (result: EntitySearchResult) => void;
-  placeholder?: string;
-  adding?: boolean;
-  userMemberOfGroupIds?: string[];
-  resultsHeightClass?: string;
+type ApiServiceAccount = {
+  id: string;
+  name: string;
+  kind: "user_delegated" | "resource_bound";
+  appId: string | null;
+  resourceType: string | null;
+  resourceId: string | null;
 };
 
 const EntitySearch = (props: EntitySearchProps) => {
   const [search, setSearch] = createSignal("");
-  const [users, setUsers] = createSignal<UserResult[]>([]);
-  const [groups, setGroups] = createSignal<GroupResult[]>([]);
+  const [users, setUsers] = createSignal<ApiUser[]>([]);
+  const [groups, setGroups] = createSignal<ApiGroup[]>([]);
+  const [serviceAccounts, setServiceAccounts] = createSignal<ApiServiceAccount[]>([]);
   const [loading, setLoading] = createSignal(false);
-  const [addingId, setAddingId] = createSignal<string | null>(null);
+
+  // Defensive dev-warning: at least one principal kind must be enabled,
+  // otherwise the component is decorative-only and the caller probably
+  // forgot a flag.
+  if (!props.includeUsers && !props.includeGroups && !props.includeServiceAccounts && !props.includeAuthenticated && !props.includePublic) {
+    if (typeof console !== "undefined") {
+      console.warn(
+        "[EntitySearch] No `includeUsers / includeGroups / includeServiceAccounts / includeAuthenticated / includePublic` flag is set — the search will never produce a result.",
+      );
+    }
+  }
 
   const doSearch = async (q: string) => {
     if (q.length < 2) {
       setUsers([]);
       setGroups([]);
+      setServiceAccounts([]);
+      return;
+    }
+
+    const kinds = [
+      ...(props.includeUsers ? ["user"] : []),
+      ...(props.includeGroups ? ["group"] : []),
+      ...(props.includeServiceAccounts ? ["service_account"] : []),
+    ];
+    if (kinds.length === 0) {
+      // Special-principals-only mode (e.g. `includeAuthenticated`).
+      // Nothing to fetch from the backend; the synthetic rows render
+      // unconditionally.
+      setUsers([]);
+      setGroups([]);
+      setServiceAccounts([]);
       return;
     }
 
     setLoading(true);
     try {
-      const url = new URL(`${props.apiBaseUrl ?? "/api/accounts"}/entities`, window.location.origin);
-      const kinds = [
-        ...(props.searchUsers !== false ? ["user"] : []),
-        ...(props.searchGroups ? ["group"] : []),
-      ];
-      if (kinds.length === 0) {
-        setUsers([]);
-        setGroups([]);
-        return;
-      }
-
+      const url = new URL("/api/accounts/entities", window.location.origin);
       url.searchParams.set("search", q);
       url.searchParams.set("kinds", kinds.join(","));
       url.searchParams.set("per_page", "10");
 
-      if (props.excludeUserIds && props.excludeUserIds.length > 0) {
+      if (props.excludeUserIds?.length) {
         url.searchParams.set("exclude_user_ids", props.excludeUserIds.join(","));
       }
-
-      if (props.excludeGroupIds && props.excludeGroupIds.length > 0) {
+      if (props.excludeGroupIds?.length) {
         url.searchParams.set("exclude_group_ids", props.excludeGroupIds.join(","));
       }
-
-      if (props.userMemberOfGroupIds && props.userMemberOfGroupIds.length > 0) {
-        url.searchParams.set("user_member_of_group_ids", props.userMemberOfGroupIds.join(","));
+      if (props.excludeServiceAccountIds?.length) {
+        url.searchParams.set("exclude_service_account_ids", props.excludeServiceAccountIds.join(","));
       }
-
-      if (props.groupProvider) {
-        url.searchParams.set("provider", props.groupProvider);
+      if (props.onlyMembersOf?.length) {
+        url.searchParams.set("user_member_of_group_ids", props.onlyMembersOf.join(","));
+      }
+      // Provider whitelist — only meaningful when restricting to a single
+      // provider (both-allowed = no filter).
+      if (props.providers?.length === 1) {
+        url.searchParams.set("provider", props.providers[0]!);
       }
 
-      const res = await fetch(url.toString(), {
-        credentials: "same-origin",
-      });
-
+      const res = await fetch(url.toString(), { credentials: "same-origin" });
       if (res.ok) {
         const data = await res.json();
-        const items = data.items ?? [];
-        setUsers(items.filter((item: { kind: string }) => item.kind === "user").map((item: { user: UserResult }) => item.user));
-        setGroups(items.filter((item: { kind: string }) => item.kind === "group").map((item: { group: GroupResult }) => item.group));
+        const items: { kind: "user" | "group" | "service_account"; user?: ApiUser; group?: ApiGroup; serviceAccount?: ApiServiceAccount }[] =
+          data.items ?? [];
+        setUsers(items.filter((item) => item.kind === "user" && item.user).map((item) => item.user!));
+        setGroups(items.filter((item) => item.kind === "group" && item.group).map((item) => item.group!));
+        setServiceAccounts(
+          items.filter((item) => item.kind === "service_account" && item.serviceAccount).map((item) => item.serviceAccount!),
+        );
       }
     } finally {
       setLoading(false);
@@ -103,14 +192,15 @@ const EntitySearch = (props: EntitySearchProps) => {
     debouncedSearch(value);
   };
 
-  const handleSelect = (result: EntitySearchResult) => {
-    setAddingId(result.id);
-    props.onSelect(result);
-    setAddingId(null);
-  };
-
   const resultsHeightClass = () => props.resultsHeightClass ?? "h-48";
 
+  // Synthetic principals show whenever the flag is on — they're a
+  // standing offer, not gated on the search query. They render at the
+  // top of the list above real entities.
+  const showSynthetic = () => props.includeAuthenticated || props.includePublic;
+  const hasRealResults = () => users().length > 0 || groups().length > 0 || serviceAccounts().length > 0;
+  const hasAnyResults = () => showSynthetic() || hasRealResults();
+
   return (
     <div class="flex flex-col gap-3">
       <TextInput icon="ti ti-search" placeholder={props.placeholder ?? "Search..."} value={() => search()} onInput={handleInput} />
@@ -122,92 +212,133 @@ const EntitySearch = (props: EntitySearchProps) => {
           </div>
         </Show>
 
-        <Show when={!loading() && search().length >= 2 && users().length === 0 && groups().length === 0}>
-          <p class="flex items-center justify-center gap-1.5 py-8 text-xs text-dimmed">
-            <i class="ti ti-search-off text-sm" />
-            No results found
-          </p>
-        </Show>
-
-        <Show when={!loading() && search().length < 2}>
-          <p class="flex items-center justify-center gap-1.5 py-8 text-xs text-dimmed">
-            <i class="ti ti-search text-sm" />
-            Type at least 2 characters
-          </p>
-        </Show>
-
-        <Show when={!loading() && (users().length > 0 || groups().length > 0)}>
+        <Show when={!loading() && hasAnyResults()}>
           <div class="flex flex-col gap-1">
+            {/* Synthetic principals — always available when their flag
+                is on, irrespective of the search query. */}
+            <Show when={props.includeAuthenticated}>
+              <ResultRow
+                icon="ti-lock-open-2"
+                title="All users (incl. guests)"
+                subtitle="Anyone signed in to the cloud"
+                disabled={props.disabled}
+                onSelect={() => props.onSelect({ type: "authenticated" })}
+              />
+            </Show>
+            <Show when={props.includePublic}>
+              <ResultRow
+                icon="ti-world"
+                title="Public"
+                subtitle="Anyone with the link, even unauthenticated"
+                disabled={props.disabled}
+                onSelect={() => props.onSelect({ type: "public" })}
+              />
+            </Show>
+
+            {/* Real entities — only after a search query. */}
             <For each={users()}>
               {(user) => (
-                <div class="flex items-center gap-3 rounded p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800">
-                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
-                    <i class="ti ti-user text-sm" />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate text-sm font-medium">{user.displayName}</div>
-                    <div class="truncate text-xs text-dimmed">
-                      {user.uid}
-                      {user.mail && ` · ${user.mail}`}
-                    </div>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      handleSelect({
-                        type: "user",
-                        id: user.id,
-                        displayName: user.displayName,
-                        mail: user.mail,
-                      })
-                    }
-                    disabled={addingId() !== null || props.adding}
-                    class="rounded p-2 text-emerald-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:opacity-50 dark:hover:bg-emerald-900/20"
-                    aria-label={`Add ${user.displayName}`}
-                  >
-                    <i class={addingId() === user.id ? "ti ti-loader-2 animate-spin" : "ti ti-plus"} />
-                  </button>
-                </div>
+                <ResultRow
+                  icon="ti-user"
+                  title={user.displayName}
+                  subtitle={user.mail ? `${user.uid} · ${user.mail}` : user.uid}
+                  disabled={props.disabled}
+                  onSelect={() =>
+                    props.onSelect({
+                      type: "user",
+                      userId: user.id,
+                      uid: user.uid,
+                      displayName: user.displayName,
+                      mail: user.mail,
+                      provider: user.provider,
+                    })
+                  }
+                />
               )}
             </For>
-
             <For each={groups()}>
               {(group) => (
-                <div class="flex items-center gap-3 rounded p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800">
-                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
-                    <i class="ti ti-users-group text-sm" />
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <div class="truncate text-sm font-medium">{group.name}</div>
-                    <Show when={group.description}>
-                      <div class="truncate text-xs text-dimmed">{group.description}</div>
-                    </Show>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      handleSelect({
-                        type: "group",
-                        id: group.id,
-                        provider: group.provider,
-                        name: group.name,
-                        description: group.description,
-                      })
-                    }
-                    disabled={addingId() !== null || props.adding}
-                    class="rounded p-2 text-emerald-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:opacity-50 dark:hover:bg-emerald-900/20"
-                    aria-label={`Add ${group.name}`}
-                  >
-                    <i class={addingId() === group.id ? "ti ti-loader-2 animate-spin" : "ti ti-plus"} />
-                  </button>
-                </div>
+                <ResultRow
+                  icon="ti-users-group"
+                  title={group.name}
+                  subtitle={group.description ?? undefined}
+                  disabled={props.disabled}
+                  onSelect={() =>
+                    props.onSelect({
+                      type: "group",
+                      groupId: group.id,
+                      provider: group.provider,
+                      name: group.name,
+                      description: group.description,
+                    })
+                  }
+                />
+              )}
+            </For>
+            <For each={serviceAccounts()}>
+              {(serviceAccount) => (
+                <ResultRow
+                  icon="ti-key"
+                  title={serviceAccount.name}
+                  subtitle={
+                    serviceAccount.kind === "user_delegated"
+                      ? "User-bound service account"
+                      : [serviceAccount.appId, serviceAccount.resourceType, serviceAccount.resourceId].filter(Boolean).join(" · ")
+                  }
+                  disabled={props.disabled}
+                  onSelect={() =>
+                    props.onSelect({
+                      type: "service_account",
+                      serviceAccountId: serviceAccount.id,
+                      name: serviceAccount.name,
+                      kind: serviceAccount.kind,
+                      appId: serviceAccount.appId,
+                      resourceType: serviceAccount.resourceType,
+                      resourceId: serviceAccount.resourceId,
+                    })
+                  }
+                />
               )}
             </For>
           </div>
         </Show>
+
+        <Show when={!loading() && !hasAnyResults() && search().length >= 2}>
+          <p class="flex items-center justify-center gap-1.5 py-8 text-xs text-dimmed">
+            <i class="ti ti-search-off text-sm" />
+            No results found
+          </p>
+        </Show>
+
+        <Show when={!loading() && !hasAnyResults() && search().length < 2}>
+          <p class="flex items-center justify-center gap-1.5 py-8 text-xs text-dimmed">
+            <i class="ti ti-search text-sm" />
+            Type at least 2 characters
+          </p>
+        </Show>
       </div>
     </div>
   );
 };
 
+const ResultRow = (props: { icon: string; title: string; subtitle?: string; disabled?: boolean; onSelect: () => void }) => (
+  <button
+    type="button"
+    onClick={props.onSelect}
+    disabled={props.disabled}
+    class="flex items-center gap-3 rounded p-2 text-left hover:bg-zinc-100 disabled:opacity-50 dark:hover:bg-zinc-800"
+  >
+    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
+      <i class={`ti ${props.icon} text-sm`} />
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="truncate text-sm font-medium">{props.title}</div>
+      <Show when={props.subtitle}>
+        <div class="truncate text-xs text-dimmed">{props.subtitle}</div>
+      </Show>
+    </div>
+    <i class="ti ti-plus text-emerald-500" />
+  </button>
+);
+
 export default EntitySearch;

package/src/ui/misc/LinkCard.tsx

@@ -18,9 +18,21 @@ const colorClasses = {
   rose: "bg-rose-100 dark:bg-rose-900/50 text-rose-600 dark:text-rose-400",
 };
 
+const hoverClasses = {
+  blue: "dark:hover:bg-blue-950/25",
+  emerald: "dark:hover:bg-emerald-950/25",
+  violet: "dark:hover:bg-violet-950/25",
+  orange: "dark:hover:bg-orange-950/25",
+  red: "dark:hover:bg-red-950/25",
+  amber: "dark:hover:bg-amber-950/25",
+  zinc: "dark:hover:bg-zinc-800/40",
+  cyan: "dark:hover:bg-cyan-950/25",
+  rose: "dark:hover:bg-rose-950/25",
+};
+
 export default function LinkCard(props: LinkCardProps) {
   return (
-    <a href={props.href} class="paper p-4 flex items-center gap-4 hover:paper-highlighted transition-all">
+    <a href={props.href} class={`paper group p-4 flex items-center gap-4 transition-all hover:paper-highlighted ${hoverClasses[props.color]}`}>
       <div class={`flex items-center justify-center h-10 w-10 shrink-0 rounded ${colorClasses[props.color]}`}>
         <i class={`${props.icon} text-xl`} />
       </div>
@@ -28,7 +40,7 @@ export default function LinkCard(props: LinkCardProps) {
         <span class="text-sm font-semibold text-primary block">{props.title}</span>
         <p class="text-xs text-dimmed truncate">{props.description}</p>
       </div>
-      <i class="ti ti-chevron-right text-dimmed" />
+      <i class="ti ti-chevron-right text-dimmed transition-transform group-hover:translate-x-0.5 group-hover:text-blue-600 dark:group-hover:text-blue-400" />
     </a>
   );
 }

package/src/ui/misc/LogEntriesTable.tsx

@@ -1,4 +1,7 @@
 import { dates } from "@valentinkolb/stdlib";
+import { Show } from "solid-js";
+import DataTable, { type DataTableColumn } from "./DataTable";
+import Placeholder from "./Placeholder";
 
 export type LogTableEntry = {
   id: number | string;
@@ -22,40 +25,40 @@ const levelIcon: Record<string, { icon: string; color: string; label: string }>
 };
 
 export default function LogEntriesTable(props: Props) {
-  if (props.entries.length === 0) {
-    return <div class="py-8 text-center text-xs text-dimmed">{props.emptyMessage ?? "No log entries found."}</div>;
-  }
+  const columns = (): DataTableColumn<LogTableEntry>[] => [
+    { id: "level", header: "Level", value: (entry) => entry.level },
+    { id: "source", header: `Source (${props.entries.length})`, value: (entry) => entry.source },
+    { id: "message", header: "Message", value: (entry) => entry.message },
+    { id: "time", header: "Time", value: (entry) => entry.createdAt, cellClass: "whitespace-nowrap" },
+  ];
 
   return (
-    <div class="overflow-x-auto">
-      <table class="w-full text-xs">
-        <thead>
-          <tr class="border-b border-zinc-100 dark:border-zinc-800">
-            <th class="px-3 py-2 text-left font-medium text-dimmed">Level</th>
-            <th class="px-3 py-2 text-left font-medium text-dimmed">Source ({props.entries.length})</th>
-            <th class="px-3 py-2 text-left font-medium text-dimmed">Message</th>
-            <th class="px-3 py-2 text-left font-medium text-dimmed">Time</th>
-          </tr>
-        </thead>
-        <tbody>
-          {props.entries.map((entry) => {
-            const level = levelIcon[entry.level] ?? levelIcon.debug!;
+    <Show
+      when={props.entries.length > 0}
+      fallback={<Placeholder surface="paper">{props.emptyMessage ?? "No log entries found."}</Placeholder>}
+    >
+      <DataTable
+        rows={props.entries}
+        columns={columns()}
+        getRowId={(entry) => String(entry.id)}
+        hoverRows
+        class="paper overflow-x-auto"
+        renderCell={({ row, col }) => {
+          if (col.id === "level") {
+            const level = levelIcon[row.level] ?? levelIcon.debug!;
             return (
-              <tr class="border-b border-zinc-50 last:border-0 hover:bg-zinc-50 dark:border-zinc-800/50 dark:hover:bg-zinc-800/30">
-                <td class="px-3 py-1.5 whitespace-nowrap">
-                  <span class={`inline-flex items-center gap-1.5 ${level.color}`}>
-                    <i class={`${level.icon} text-sm`} />
-                    <span>{level.label}</span>
-                  </span>
-                </td>
-                <td class="px-3 py-1.5 whitespace-nowrap text-secondary">{entry.source}</td>
-                <td class="px-3 py-1.5 text-primary truncate max-w-[30rem]" title={entry.message}>{entry.message}</td>
-                <td class="whitespace-nowrap px-3 py-1.5 text-dimmed">{dates.formatDateTime(entry.createdAt)}</td>
-              </tr>
+              <span class={`inline-flex items-center gap-1.5 whitespace-nowrap ${level.color}`}>
+                <i class={`${level.icon} text-sm`} />
+                <span>{level.label}</span>
+              </span>
             );
-          })}
-        </tbody>
-      </table>
-    </div>
+          }
+          if (col.id === "source") return <span class="whitespace-nowrap text-secondary">{row.source}</span>;
+          if (col.id === "message") return <span title={row.message}>{row.message}</span>;
+          if (col.id === "time") return <span class="text-dimmed">{dates.formatDateTime(row.createdAt)}</span>;
+          return "";
+        }}
+      />
+    </Show>
   );
 }

package/src/ui/misc/Pagination.tsx

@@ -1,9 +1,11 @@
 import type { JSX } from "solid-js";
+import { Link, type LinkNavigateEvent } from "@valentinkolb/ssr/nav";
 
 type PaginationProps = {
   currentPage: number;
   totalPages: number;
   baseUrl: string;
+  onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
 };
 
 /**
@@ -31,18 +33,35 @@ export const Pagination = (props: PaginationProps): null | JSX.Element => {
                 ...
               </span>
             )}
-            <a
-              href={`${props.baseUrl}${page}`}
-              class={`flex h-7 w-7 items-center justify-center rounded-lg text-xs tabular-nums transition-colors ${
-                isActive
-                  ? "border-blue-500/35 bg-blue-50 text-blue-700 font-medium dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200"
-                  : "text-dimmed hover:text-primary hover:bg-zinc-100 dark:hover:bg-zinc-800"
-              }`}
-              aria-current={isActive ? "page" : undefined}
-              aria-label={`Page ${page}`}
-            >
-              {page}
-            </a>
+            {props.onNavigate ? (
+              <Link
+                href={`${props.baseUrl}${page}`}
+                scroll="top"
+                onNavigate={props.onNavigate}
+                class={`flex h-7 w-7 items-center justify-center rounded-lg text-xs tabular-nums transition-colors ${
+                  isActive
+                    ? "border-blue-500/35 bg-blue-50 text-blue-700 font-medium dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200"
+                    : "text-dimmed hover:text-primary hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                }`}
+                aria-current={isActive ? "page" : undefined}
+                aria-label={`Page ${page}`}
+              >
+                {page}
+              </Link>
+            ) : (
+              <a
+                href={`${props.baseUrl}${page}`}
+                class={`flex h-7 w-7 items-center justify-center rounded-lg text-xs tabular-nums transition-colors ${
+                  isActive
+                    ? "border-blue-500/35 bg-blue-50 text-blue-700 font-medium dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200"
+                    : "text-dimmed hover:text-primary hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                }`}
+                aria-current={isActive ? "page" : undefined}
+                aria-label={`Page ${page}`}
+              >
+                {page}
+              </a>
+            )}
           </>
         );
       })}