@zerotal/admin 1.0.0

package/src/ui/AdminLayout.tsx

@@ -0,0 +1,355 @@
+/** @jsxImportSource @zerotal/flow */
+// The persistent admin shell: sidebar navigation + sticky top bar + content slot.
+// Pages set `static layout = AdminLayout`; on flow:navigate only the slot swaps,
+// so the sidebar and theme state stay put. Dark/light is a pure-client toggle.
+
+import { Layout } from "@zerotal/flow";
+import type { HtmlNode } from "@zerotal/flow";
+import { DropdownMenu } from "@zerotal/flow-ui";
+import { Panel } from "../Panel.ts";
+import type { PanelInstance } from "../PanelInstance.ts";
+import { adminHead } from "../theme.ts";
+import { resolveRenderHooks } from "../renderHooks.ts";
+import { impersonatedName } from "../impersonation.ts";
+import { Icon } from "./icons.tsx";
+import { Command, Toaster, Sidebar } from "@zerotal/flow-ui";
+import type { CommandItem, SidebarItem, SidebarGroup } from "@zerotal/flow-ui";
+
+export class AdminLayout extends Layout {
+  /**
+   * The panel this shell belongs to. The base class serves whichever panel owns
+   * the request; {@link makeAdminLayout} binds a specific one, which is what
+   * every generated page uses so a WebSocket action can't drift to a sibling.
+   */
+  static panel: PanelInstance | undefined;
+
+  /** The bound panel, or the one owning the current request. */
+  protected panel(): PanelInstance {
+    return (this.constructor as typeof AdminLayout).panel ?? Panel.current();
+  }
+
+  // Dynamic so app config (brand + theme/stylesheet) is reflected — the router
+  // reads `LayoutClass.head` per render, after `Panel.configure(...)` has run.
+  static override get head(): string {
+    const cfg = (this.panel ?? Panel.current()).config();
+    return adminHead(cfg.brand ?? "Admin", cfg.theme);
+  }
+
+  async render(slot: HtmlNode): Promise<HtmlNode> {
+    const panel = this.panel();
+    const cfg = panel.config();
+    const base = panel.base();
+    // Only what this user may reach — the route guard enforces the same verdict,
+    // so a link that isn't drawn is also a URL that won't open.
+    const nav = await panel.visibleNavigation();
+    const topbarSlots = await Promise.all(
+      (await panel.visibleTopbarSlots()).map((s) => s.render()),
+    );
+    // The app's configured menu first, then anything packages added — so a
+    // contributed entry can't push Profile/Logout out of their familiar spot.
+    const menuItems = [
+      ...(cfg.userMenu?.items ?? []),
+      ...(await panel.visibleUserMenuItems()).map((i) => ({
+        label: i.label,
+        href: i.href,
+        icon: i.icon,
+      })),
+    ];
+
+    // Unread notification count for the bell badge (refreshes each navigation).
+    const notifications = panel.notificationProvider();
+    let unread = 0;
+    if (notifications) {
+      try {
+        unread =
+          typeof notifications.unreadCount === "function"
+            ? await notifications.unreadCount()
+            : (await notifications.resolve()).filter((n) => !n.read).length;
+      } catch {
+        unread = 0;
+      }
+    }
+
+    // Flat list of navigable destinations for the command palette. The group
+    // heading rides along as a keyword, so typing a cluster's name finds the
+    // resources inside it.
+    const paletteItems: CommandItem[] = [];
+    for (const g of nav) {
+      for (const item of g.items) {
+        paletteItems.push({
+          label: item.label,
+          href: item.href,
+          ...(g.group ? { group: g.group } : {}),
+        });
+        for (const child of item.children ?? []) {
+          paletteItems.push({
+            label: child.label,
+            href: child.href,
+            ...(g.group ? { group: g.group } : {}),
+            keywords: item.label,
+          });
+        }
+      }
+    }
+
+    // While acting as someone else, say so on every page. A quiet impersonation
+    // is how an operator forgets and does something as the wrong person.
+    const actingAs = await impersonatedName();
+
+    // Contributed chrome: banners, badges, notices. Resolved once per render so
+    // a throwing hook can't take the shell down with it.
+    const hook = (name: Parameters<typeof panel.renderHooks>[0]): (HtmlNode | string)[] =>
+      resolveRenderHooks(panel.renderHooks(name));
+
+    // Sidebar navigation badges (counts), resolved per resource slug.
+    const badges = await panel.navigationBadges();
+    const badgeTone: Record<string, string> = {
+      primary: "bg-primary/10 text-primary ring-1 ring-inset ring-primary/20",
+      success: "bg-success/10 text-success ring-1 ring-inset ring-success/20",
+      muted: "bg-muted text-muted-foreground",
+      destructive: "bg-destructive/10 text-destructive ring-1 ring-inset ring-destructive/20",
+    };
+
+    /** One nav entry, in the shape the sidebar component takes. */
+    const toItem = (item: {
+      href: string;
+      label: string;
+      icon: string;
+      slug?: string;
+      external?: boolean | undefined;
+      children?: Array<{
+        href: string;
+        label: string;
+        icon: string;
+        slug?: string;
+        external?: boolean | undefined;
+      }>;
+    }): SidebarItem => {
+      const badge = item.slug ? badges[item.slug] : undefined;
+      return {
+        label: item.label,
+        href: item.href,
+        icon: <Icon name={item.icon} class="h-[18px] w-[18px] shrink-0" />,
+        external: item.external,
+        ...(badge
+          ? { badge: badge.text, badgeClass: badgeTone[badge.color] ?? badgeTone["primary"] }
+          : {}),
+        ...(item.children?.length ? { children: item.children.map(toItem) } : {}),
+      };
+    };
+
+    const navGroups: SidebarGroup[] = [
+      {
+        items: [
+          {
+            label: "Dashboard",
+            href: base,
+            icon: <Icon name="home" class="h-[18px] w-[18px] shrink-0" />,
+          },
+        ],
+      },
+      ...nav.map((group) => ({
+        ...(group.group ? { label: group.group } : {}),
+        items: group.items.map(toItem),
+      })),
+    ];
+
+    return (
+      // The shell identity: two panels render different sidebars, so a navigation
+      // that crosses from one to the other has to replace the shell, not just the
+      // content slot.
+      <div
+        data-flow-layout={`admin-${panel.id}`}
+        class="min-h-screen bg-background text-foreground lg:grid lg:grid-cols-[16rem_1fr]"
+      >
+        {hook("body.start")}
+
+        {actingAs ? (
+          <div class="flex flex-wrap items-center justify-center gap-3 bg-amber-500 px-4 py-1.5 text-xs font-medium text-black lg:col-span-2">
+            <span>
+              Acting as <strong>{actingAs}</strong>
+            </span>
+            <a
+              href={`${base}/stop-impersonating`}
+              class="rounded bg-black/15 px-2 py-0.5 font-semibold transition hover:bg-black/25"
+            >
+              Stop
+            </a>
+          </div>
+        ) : null}
+        {/* The nav rail. Desktop-only here — the top bar carries the mobile
+            menu, so the component's own drawer is switched off. The active link
+            is marked by the client router rather than passed in, which is what
+            keeps it correct after a soft navigation. */}
+        <Sidebar
+          class="hidden border-r border-border bg-card/40 lg:flex lg:flex-col"
+          collapsible={false}
+          collapsibleGroups
+          brand={cfg.brand}
+          {...(cfg.tagline ? { tagline: cfg.tagline } : {})}
+          brandHref={base}
+          groups={navGroups}
+          beforeNav={hook("sidebar.start")}
+          afterNav={hook("sidebar.end")}
+        />
+
+        {/* ── Main column ─────────────────────────────────────────── */}
+        <div class="flex min-w-0 flex-col">
+          <header class="sticky top-0 z-20 flex h-16 items-center gap-3 border-b border-border bg-background/80 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-6">
+            <a href={base} navigate class="lg:hidden flex items-center gap-2 font-semibold">
+              <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold">
+                {cfg.brand.slice(0, 1).toUpperCase()}
+              </span>
+            </a>
+            {/* Global search — a plain GET form navigates to the search page;
+                the ⌘K hint opens the client-side command palette. */}
+            <form action={`${base}/search`} method="get" class="flex-1 max-w-md">
+              <div class="relative">
+                <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-muted-foreground">
+                  <Icon name="search" class="h-4 w-4" />
+                </span>
+                <input
+                  type="search"
+                  name="q"
+                  placeholder="Search…"
+                  class="h-9 w-full rounded-lg border border-input bg-background pl-9 pr-12 text-sm outline-none transition placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+                />
+                <button
+                  type="button"
+                  onclick="window.__kPaletteOpen&&window.__kPaletteOpen()"
+                  aria-label="Open command palette"
+                  class="absolute inset-y-0 right-2 my-auto hidden h-6 items-center rounded border border-border bg-muted px-1.5 text-[10px] font-medium text-muted-foreground sm:inline-flex"
+                >
+                  ⌘K
+                </button>
+              </div>
+            </form>
+            {/* Contributed top-bar slots — status pills, health indicators, tenant
+                switchers. Rendered before the panel's own controls so the bell and
+                the theme toggle stay where users expect them. */}
+            {hook("topbar.start")}
+            {topbarSlots}
+            {panel.roleProvider() ? (
+              <a
+                href={`${base}/roles`}
+                navigate
+                aria-label="Roles and permissions"
+                class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >
+                <Icon name="shield" class="h-[18px] w-[18px]" />
+              </a>
+            ) : null}
+            {panel.mediaProvider() ? (
+              <a
+                href={`${base}/media`}
+                navigate
+                aria-label="Media library"
+                class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >
+                <Icon name="image" class="h-[18px] w-[18px]" />
+              </a>
+            ) : null}
+            {notifications ? (
+              <a
+                href={`${base}/notifications`}
+                navigate
+                aria-label={unread > 0 ? `Notifications (${unread} unread)` : "Notifications"}
+                class="relative inline-flex h-9 w-9 items-center justify-center rounded-lg border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >
+                <Icon name="bell" class="h-[18px] w-[18px]" />
+                {unread > 0 ? (
+                  <span class="absolute -right-1 -top-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold leading-none text-destructive-foreground">
+                    {unread > 99 ? "99+" : String(unread)}
+                  </span>
+                ) : null}
+              </a>
+            ) : null}
+            <button
+              type="button"
+              onclick="window.__zerotalToggleTheme()"
+              aria-label="Toggle dark mode"
+              class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >
+              <Icon name="sun" class="hidden h-[18px] w-[18px] dark:block" />
+              <Icon name="moon" class="h-[18px] w-[18px] dark:hidden" />
+            </button>
+
+            {menuItems.length > 0 ? (
+              <DropdownMenu
+                align="right"
+                trigger={
+                  <button
+                    type="button"
+                    aria-label="Account menu"
+                    class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-input bg-background text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                  >
+                    <Icon name="users" class="h-[18px] w-[18px]" />
+                  </button>
+                }
+              >
+                {cfg.userMenu?.label ? (
+                  <div class="px-2 py-1.5 text-sm font-semibold text-foreground">
+                    {cfg.userMenu.label}
+                  </div>
+                ) : null}
+                {cfg.userMenu?.label ? <div class="-mx-1 my-1 h-px bg-border" /> : null}
+                {menuItems.map((it) => (
+                  <a
+                    href={it.href}
+                    navigate
+                    class="flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
+                  >
+                    {it.icon ? <Icon name={it.icon} class="h-4 w-4" /> : null}
+                    {it.label}
+                  </a>
+                ))}
+              </DropdownMenu>
+            ) : null}
+            {hook("topbar.end")}
+          </header>
+
+          <main class="flex-1 animate-fade-in px-4 py-6 sm:px-6 lg:px-8">{slot}</main>
+        </div>
+
+        {/* Command palette. The items are the same nav tree the sidebar draws,
+            so a destination can never be reachable from one and not the other. */}
+        <Command
+          items={paletteItems}
+          placeholder="Jump to a resource…"
+          emptyMessage="Nothing matches that."
+        />
+
+        {hook("body.end")}
+
+        {/* Toast host for action flashes (delete, save, …). The themed one, so
+            a toast follows the panel's palette in light and dark alike. */}
+        <Toaster position="bottom-right" />
+      </div>
+    );
+  }
+}
+
+/**
+ * The shell class for one panel, cached so every page of that panel shares it.
+ *
+ * The router keys shell persistence on the layout class name, so each panel needs
+ * a class of its own: without that, navigating from one panel to another would
+ * swap the content while leaving the previous panel's sidebar in place.
+ */
+export function makeAdminLayout(panel: PanelInstance): typeof AdminLayout {
+  const cached = LAYOUTS.get(panel);
+  if (cached) return cached;
+
+  const PanelAdminLayout = class extends AdminLayout {
+    static override panel = panel;
+  };
+  Object.defineProperty(PanelAdminLayout, "name", {
+    value: panel.id === "admin" ? "AdminLayout" : `AdminLayout_${panel.id}`,
+  });
+  LAYOUTS.set(panel, PanelAdminLayout);
+  return PanelAdminLayout;
+}
+
+const LAYOUTS = new WeakMap<PanelInstance, typeof AdminLayout>();
+
+/** Self-contained command-palette controller (open/close, filter, keyboard nav). */

package/src/ui/Breadcrumbs.tsx

@@ -0,0 +1,84 @@
+/** @jsxImportSource @zerotal/flow */
+// Where a panel page sits, and every step back out.
+//
+// The trail matters most once resources stop being flat. A record three levels
+// down — panel → cluster → parent record → nested resource → record — has no
+// other affordance for climbing back to the middle of that path.
+//
+// The rendering is `@zerotal/flow-ui`'s; what lives here is `resourceTrail`,
+// which knows how a panel's URLs are built.
+
+import type { HtmlNode } from "@zerotal/flow";
+import { Breadcrumb } from "@zerotal/flow-ui";
+import type { PanelInstance } from "../PanelInstance.ts";
+import type { ResourceClass } from "../Panel.ts";
+
+/** One step in the trail. The last one is where you are, so it has no link. */
+export interface Crumb {
+  label: string;
+  href?: string;
+}
+
+export function Breadcrumbs({ trail }: { trail: Crumb[] }): HtmlNode {
+  // Collapsed past five steps: a deeply nested record produces a trail that
+  // wraps onto two lines otherwise, and the middle is the part nobody clicks.
+  return <Breadcrumb items={trail} maxItems={5} class="mb-1" />;
+}
+
+export interface TrailOptions {
+  panel: PanelInstance;
+  resource: ResourceClass;
+  /** The parent record's id, for a nested resource. */
+  parentId?: string | undefined;
+  /** Title of the parent record, when it has been loaded. */
+  parentTitle?: string | undefined;
+  /** The final step — a record title, "New", "Edit". Omit on an index page. */
+  leaf?: string | undefined;
+  /** Link the resource step even when it is the last one (used on edit pages). */
+  recordId?: string | undefined;
+  recordTitle?: string | undefined;
+}
+
+/**
+ * Build the trail for a resource page.
+ *
+ * Each step is derived from the resource's own URL builders, so a resource that
+ * moves into a cluster or under a parent gets a correct trail with no extra
+ * declaration.
+ */
+export function resourceTrail(options: TrailOptions): Crumb[] {
+  const { panel, resource, parentId, parentTitle, leaf, recordId, recordTitle } = options;
+  const base = panel.base();
+  const trail: Crumb[] = [{ label: "Dashboard", href: base }];
+
+  if (resource.cluster) {
+    // A cluster is a grouping rather than a page, so it points at its own first
+    // member — which for a member's own trail is this resource's index.
+    trail.push({ label: resource.cluster.title, href: resource.indexUrl(base, parentId) });
+  }
+
+  const parent = resource.parentResource();
+  if (parent && parentId) {
+    trail.push({ label: parent.getPluralLabel(), href: parent.indexUrl(base) });
+    trail.push({
+      label: parentTitle ?? `#${parentId}`,
+      href: parent.recordUrl(base, parentId),
+    });
+  }
+
+  const needsResourceLink = Boolean(leaf || recordId);
+  trail.push({
+    label: resource.getPluralLabel(),
+    ...(needsResourceLink ? { href: resource.indexUrl(base, parentId) } : {}),
+  });
+
+  if (recordId) {
+    trail.push({
+      label: recordTitle ?? `#${recordId}`,
+      ...(leaf ? { href: resource.recordUrl(base, recordId, parentId) } : {}),
+    });
+  }
+  if (leaf) trail.push({ label: leaf });
+
+  return trail;
+}

package/src/ui/environmentIndicator.tsx

@@ -0,0 +1,63 @@
+/** @jsxImportSource @zerotal/flow */
+// A visible answer to "which environment am I about to change data in?"
+//
+// The expensive mistake is editing production believing it is staging. A border
+// and a badge cost nothing and remove the ambiguity entirely, which is why every
+// admin panel ecosystem grows a plugin for exactly this.
+
+import type { HtmlNode } from "@zerotal/flow";
+import type { RenderHook } from "../renderHooks.ts";
+
+export interface EnvironmentIndicatorOptions {
+  /** Environment name. Defaults to `APP_ENV`. */
+  environment?: string;
+  /**
+   * Environments to stay silent in. Local development needs no reminder that it
+   * is local — the point is to mark the ones where a mistake costs something.
+   */
+  quiet?: string[];
+  /** Tone per environment; anything unlisted falls back to a warning amber. */
+  tones?: Record<string, string>;
+}
+
+const DEFAULT_TONES: Record<string, string> = {
+  production: "bg-destructive text-destructive-foreground",
+  prod: "bg-destructive text-destructive-foreground",
+  staging: "bg-amber-500 text-black",
+  test: "bg-primary text-primary-foreground",
+};
+
+/**
+ * A render hook drawing a strip across the top of the panel naming the
+ * environment.
+ *
+ *   Panel.renderHook("body.start", environmentIndicator());
+ *
+ * Returns `null` in the quiet environments, so registering it unconditionally is
+ * the intended usage — there is nothing to switch off per environment.
+ */
+export function environmentIndicator(options: EnvironmentIndicatorOptions = {}): RenderHook {
+  const quiet = new Set(options.quiet ?? ["local", "development", "dev"]);
+  const tones = { ...DEFAULT_TONES, ...(options.tones ?? {}) };
+
+  return (): HtmlNode | null => {
+    const env = (options.environment ?? Bun.env["APP_ENV"] ?? "").trim();
+    if (!env || quiet.has(env.toLowerCase())) return null;
+
+    const tone = tones[env.toLowerCase()] ?? "bg-amber-500 text-black";
+    return (
+      <div
+        // Fixed rather than in flow: a strip that pushes the layout down would
+        // shift every page by a few pixels between environments, which is its
+        // own kind of confusing.
+        class={`pointer-events-none fixed inset-x-0 top-0 z-50 flex h-1.5 items-center justify-center ${tone}`}
+      >
+        <span
+          class={`absolute top-1.5 rounded-b px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider ${tone}`}
+        >
+          {env}
+        </span>
+      </div>
+    );
+  };
+}

package/src/ui/icons.tsx

@@ -0,0 +1,124 @@
+/** @jsxImportSource @zerotal/flow */
+// Inline outline icons (Heroicons-style, 24×24, stroke=currentColor) so the admin
+// has zero icon-font/runtime dependency. Add a key here to expose a new icon.
+
+import type { HtmlNode } from "@zerotal/flow";
+
+/** Path `d` data per icon name. */
+const PATHS: Record<string, string[]> = {
+  home: [
+    "M2.25 12l8.954-8.955a1.5 1.5 0 012.122 0L22.5 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75",
+  ],
+  collection: ["M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"],
+  "layout-grid": [
+    "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z",
+  ],
+  users: [
+    "M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z",
+  ],
+  shield: [
+    "M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z",
+  ],
+  database: [
+    "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125",
+  ],
+  document: [
+    "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z",
+  ],
+  search: ["M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"],
+  menu: ["M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"],
+  sun: [
+    "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z",
+  ],
+  moon: [
+    "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z",
+  ],
+  "chevron-left": ["M15.75 19.5L8.25 12l7.5-7.5"],
+  "chevron-right": ["M8.25 4.5l7.5 7.5-7.5 7.5"],
+  logout: [
+    "M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75",
+  ],
+  eye: [
+    "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z",
+    "M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+  ],
+  trash: [
+    "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0",
+  ],
+  "check-circle": ["M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"],
+  "x-circle": ["M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"],
+  copy: [
+    "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75",
+  ],
+  "chevron-down": ["M19.5 8.25l-7.5 7.5-7.5-7.5"],
+  "chevron-up": ["M4.5 15.75l7.5-7.5 7.5 7.5"],
+  mail: [
+    "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75",
+  ],
+  calendar: [
+    "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008z",
+  ],
+  key: [
+    "M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z",
+  ],
+  plus: ["M12 4.5v15m7.5-7.5h-15"],
+  pencil: [
+    "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125",
+  ],
+  undo: ["M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"],
+  bell: [
+    "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0",
+  ],
+  chat: [
+    "M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z",
+  ],
+  folder: [
+    "M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z",
+  ],
+  download: [
+    "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3",
+  ],
+  upload: [
+    "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M7.5 7.5L12 3m0 0l4.5 4.5M12 3v13.5",
+  ],
+  filter: [
+    "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z",
+  ],
+  duplicate: [
+    "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75",
+  ],
+  "dots-horizontal": [
+    "M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z",
+  ],
+  inbox: [
+    "M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H6.911a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661z",
+  ],
+  image: [
+    "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z",
+  ],
+  x: ["M6 18L18 6M6 6l12 12"],
+  check: ["M4.5 12.75l6 6 9-13.5"],
+};
+
+export interface IconProps {
+  name: string;
+  class?: string;
+}
+
+export function Icon({ name, class: cls }: IconProps): HtmlNode {
+  const paths = PATHS[name] ?? PATHS["collection"]!;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.6"
+      class={cls ?? "h-5 w-5"}
+      aria-hidden="true"
+    >
+      {paths.map((d) => (
+        <path d={d} stroke-linecap="round" stroke-linejoin="round" />
+      ))}
+    </svg>
+  );
+}