@stnd/account 0.1.1

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@stnd/account",
+  "version": "0.1.1",
+  "type": "module",
+  "svelte": "./ui/UserMenu.svelte",
+  "main": "./index.module.js",
+  "exports": {
+    ".": "./index.module.js",
+    "./auth": "./auth.js",
+    "./client": "./client.svelte.js",
+    "./models": "./models",
+    "./ui": "./ui",
+    "./views": "./views",
+    "./*": "./*"
+  },
+  "dependencies": {
+    "@better-auth/kysely-adapter": "1.6.22",
+    "@better-auth/passkey": "^1.6.22",
+    "better-auth": "^1.6.22",
+    "kysely": "^0.29.2",
+    "kysely-d1": "^0.4.0",
+    "nanostores": "^1.4.0",
+    "wrangler": "^4.105.0",
+    "@stnd/art": "0.1.0",
+    "@stnd/icon": "0.2.0",
+    "@stnd/log": "0.5.0",
+    "@stnd/styles": "0.5.2",
+    "@stnd/utils": "0.5.0"
+  },
+  "peerDependencies": {
+    "astro": ">=5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/route.js

@@ -0,0 +1,25 @@
+import { initAuth } from "./auth.js";
+
+/**
+ * BetterAuth API Route Handler
+ * 
+ * Mounts the BetterAuth catch-all handler to /api/auth/*
+ */
+export const ALL = async (context) => {
+    const { request, locals } = context;
+
+    let env = locals?.cfContext?.env ?? locals?.env ?? {};
+    if (Object.keys(env).length === 0) {
+        try {
+            const cf = await import("cloudflare:workers");
+            if (cf?.env) env = cf.env;
+        } catch { } // Ignore
+    }
+    try {
+        const auth = initAuth(env);
+        return await auth.handler(request);
+    } catch (e) {
+        console.error("[Account Route Error]", e);
+        return new Response(JSON.stringify({ error: e.message }), { status: 500 });
+    }
+};

package/schema.sql

@@ -0,0 +1,70 @@
+-- BetterAuth Standard Schema for Cloudflare D1
+-- Save this file in your app's migrations folder or run directly via wrangler d1 execute
+
+CREATE TABLE "user" (
+	"id" TEXT NOT NULL PRIMARY KEY,
+	"name" TEXT NOT NULL,
+	"email" TEXT NOT NULL UNIQUE,
+	"emailVerified" INTEGER NOT NULL,
+	"image" TEXT,
+	"createdAt" INTEGER NOT NULL,
+	"updatedAt" INTEGER NOT NULL,
+	"access_rights" TEXT,
+	"settings" TEXT,
+	"role" TEXT,
+	"banned" INTEGER,
+	"banReason" TEXT,
+	"banExpires" INTEGER
+);
+
+CREATE TABLE "session" (
+	"id" TEXT NOT NULL PRIMARY KEY,
+	"expiresAt" INTEGER NOT NULL,
+	"token" TEXT NOT NULL UNIQUE,
+	"createdAt" INTEGER NOT NULL,
+	"updatedAt" INTEGER NOT NULL,
+	"ipAddress" TEXT,
+	"userAgent" TEXT,
+	"userId" TEXT NOT NULL,
+	FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE
+);
+
+CREATE TABLE "account" (
+	"id" TEXT NOT NULL PRIMARY KEY,
+	"accountId" TEXT NOT NULL,
+	"providerId" TEXT NOT NULL,
+	"userId" TEXT NOT NULL,
+	"accessToken" TEXT,
+	"refreshToken" TEXT,
+	"idToken" TEXT,
+	"accessTokenExpiresAt" INTEGER,
+	"refreshTokenExpiresAt" INTEGER,
+	"scope" TEXT,
+	"password" TEXT,
+	"createdAt" INTEGER NOT NULL,
+	"updatedAt" INTEGER NOT NULL,
+	FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE
+);
+
+CREATE TABLE "verification" (
+	"id" TEXT NOT NULL PRIMARY KEY,
+	"identifier" TEXT NOT NULL,
+	"value" TEXT NOT NULL,
+	"expiresAt" INTEGER NOT NULL,
+	"createdAt" INTEGER,
+	"updatedAt" INTEGER
+);
+
+CREATE TABLE "passkey" (
+	"id" TEXT NOT NULL PRIMARY KEY,
+	"name" TEXT,
+	"publicKey" TEXT NOT NULL,
+	"userId" TEXT NOT NULL,
+	"webauthnUserID" TEXT NOT NULL,
+	"counter" INTEGER NOT NULL,
+	"deviceType" TEXT NOT NULL,
+	"backedUp" INTEGER NOT NULL,
+	"transports" TEXT,
+	"createdAt" INTEGER,
+	FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE
+);

package/ui/Avatar.svelte

@@ -0,0 +1,115 @@
+<script>
+  /**
+   * Standard Avatar — A premium, reusable avatar component.
+   * Handles:
+   * 1. Profile Image (src)
+   * 2. Generative Art Fallback (via @stnd/art)
+   * 3. Initials overlay
+   *
+   * When used inside an <IdentityProvider>, it auto-reads
+   * the user's visual identity. Otherwise, falls back to
+   * name/email props as the seed.
+   */
+  import { getContext } from "svelte";
+  import GenerativeArt from "@stnd/art/components/GenerativeArt.svelte";
+  import { hashCode } from "@stnd/art/lib/seed.js";
+  import { all as allStyles } from "@stnd/art/lib/styles/index.js";
+
+  let {
+    src = null,
+    name = "",
+    email = "",
+    size = "var(--space-12)",
+    border = false,
+    shadow = false,
+  } = $props();
+
+  // Try to read identity from context (IdentityProvider)
+  // Falls back to local seed derivation if not wrapped
+  const getIdentity = getContext("identity") ?? null;
+
+  const localSeed = $derived(name || email || "guest");
+  const localHash = $derived(hashCode(localSeed));
+  const localStyle = $derived(allStyles[localHash % allStyles.length].name);
+
+  // Use identity context if available, otherwise derive locally
+  const seed = $derived(
+    getIdentity ? getIdentity().seed("avatar") : localSeed,
+  );
+  const style = $derived(
+    getIdentity ? getIdentity().signatureStyle : localStyle,
+  );
+
+  const initial = $derived(
+    (name || (getIdentity ? getIdentity().username : "") || email || "?")
+      .split(/[ @._-]/)
+      .filter(Boolean)
+      .map((part) => part[0])
+      .join("")
+      .slice(0, 2)
+      .toUpperCase(),
+  );
+</script>
+
+<div
+  class="stnd-avatar"
+  style:--avatar-size={size}
+  class:has-border={border}
+  class:has-shadow={shadow}
+>
+  {#if src}
+    <img {src} alt={name || "User Avatar"} loading="lazy" />
+  {:else}
+    <GenerativeArt {seed} variant={style} resolution={200}>
+      <span class="initials">{initial}</span>
+    </GenerativeArt>
+  {/if}
+</div>
+
+<style>
+  .stnd-avatar {
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    border-radius: 50%;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-background);
+    flex-shrink: 0;
+  }
+
+  .has-border {
+    outline: 2px solid var(--identity-primary, oklch(100% 0 0 / 0.3));
+    outline-offset: -2px;
+  }
+
+  .has-shadow {
+    box-shadow: 0 2px 12px var(--identity-glow, oklch(0% 0 0 / 0.25));
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: saturate(0.9);
+    display: block;
+  }
+
+  img:hover {
+    filter: saturate(1);
+  }
+
+  .initials {
+    font-size: calc(var(--avatar-size) * 0.35);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--color-on-accent, white);
+    text-shadow:
+      0 1px 4px rgba(0, 0, 0, 0.4),
+      0 0 12px rgba(0, 0, 0, 0.15);
+    font-family: var(--font-interface);
+    pointer-events: none;
+  }
+</style>

package/ui/UserMenu.svelte

@@ -0,0 +1,225 @@
+<script>
+  import Avatar from "./Avatar.svelte";
+  import Icon from "@stnd/icon/Icon.svelte";
+  import { onMount } from "svelte";
+  import { signOut } from "../client.svelte.js";
+
+  let {
+    user,
+    children,
+    onLogoutCallback = () => window.location.reload(),
+    avatarHref,
+    avatarLauncherView,
+  } = $props();
+
+  let isOpen = $state(false);
+  let container = $state(null);
+  let hoverTimer;
+
+  function handleMouseEnter() {
+    clearTimeout(hoverTimer);
+    isOpen = true;
+  }
+
+  function handleMouseLeave() {
+    hoverTimer = setTimeout(() => {
+      isOpen = false;
+    }, 300);
+  }
+
+  onMount(() => {
+    const handleOutside = (e) => {
+      if (isOpen && container && !container.contains(e.target)) {
+        isOpen = false;
+      }
+    };
+    window.addEventListener("click", handleOutside);
+
+    return () => {
+      window.removeEventListener("click", handleOutside);
+    };
+  });
+
+  function toggleMenu(e) {
+    e.stopPropagation();
+    isOpen = !isOpen;
+  }
+
+  async function handleLogout() {
+    isOpen = false;
+    await signOut({
+      fetchOptions: {
+        onSuccess: onLogoutCallback,
+      },
+    });
+  }
+</script>
+
+{#if user}
+  <div
+    class="user-avatar-wrapper no-rhytm"
+    bind:this={container}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    role="none"
+  >
+    {#if avatarLauncherView}
+      <button
+        data-launcher-view={avatarLauncherView}
+        class="user-avatar-trigger no-shadow no-decoration"
+        title={user.name || user.username || user.email}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+        style="background: transparent; border: none; padding: 0;"
+      >
+        <Avatar
+          src={user.image}
+          name={user.username || user.name}
+          email={user.email}
+          size="100%"
+          border={false}
+          shadow={false}
+        />
+      </button>
+    {:else}
+      <a
+        href={avatarHref || `/@${user.username}`}
+        class="user-avatar-trigger no-shadow no-decoration"
+        title={user.name || user.username || user.email}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <Avatar
+          src={user.image}
+          name={user.username || user.name}
+          email={user.email}
+          size="100%"
+          border={false}
+          shadow={false}
+        />
+      </a>
+    {/if}
+
+    {#if isOpen}
+      <div class="user-dropdown">
+        <div class="dropdown-header">
+          <h6 class="name">{user.name || user.username || "User"}</h6>
+          <span class="text-2xs mt-trim text-subtle">{user.email}</span>
+        </div>
+
+        <div class="dropdown-divider"></div>
+
+        {@render children?.()}
+
+        <button
+          class="ghost"
+          data-launcher-view="::account-settings"
+          onclick={() => (isOpen = false)}
+        >
+          <Icon icon="settings" />
+          <span>Settings</span>
+        </button>
+
+        <button class="ghost logout" onclick={handleLogout}>
+          <Icon icon="logout" />
+          <span>Log Out</span>
+        </button>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .user-avatar-wrapper {
+    position: relative;
+    display: flex;
+  }
+
+  .user-avatar-trigger {
+    width: var(--space);
+    height: var(--space);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition);
+
+    box-shadow: var(--shadow-lg), var(--shadow), var(--shadow-ring);
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    padding: 0 !important;
+    margin: 0;
+  }
+
+  .user-avatar-trigger:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-glow);
+    border-color: var(--color-accent);
+  }
+
+  .user-dropdown {
+    position: absolute;
+    top: calc(100% + var(--space-d2));
+    font-family: var(--font-interface);
+    font-size: var(--size-sm);
+    right: 0;
+    width: 200px;
+    background: var(--color-surface-high);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lift), var(--shadow-raised);
+    z-index: 1000;
+    padding: var(--space-d2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-d8);
+    animation: all var(--transition);
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .dropdown-header {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  :global(.dropdown-header) {
+    font-size: var(--size-2xs);
+    margin-top: var(--space-d3);
+  }
+  :global(.dropdown-header h6) {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--size-sm);
+    color: var(--color-foreground);
+    margin-top: 0;
+    margin-bottom: var(--space-d8);
+    text-align: center;
+  }
+
+  /*:global(.section-title) {
+    font-size: var(--size-xs);
+    letter-spacing: 0.05em;
+    font-weight: 800;
+    color: var(--color-muted);
+    margin-inline: auto;
+    text-align: center;
+    margin-bottom: var(--space-d2);
+  }*/
+
+  .dropdown-divider,
+  :global(.dropdown-divider) {
+    height: 1px;
+    background: var(--color-border);
+    margin: var(--space-d2) calc(var(--space-d2) * -1);
+  }
+</style>

package/ui/preferences.js

@@ -0,0 +1,120 @@
+import Log from "@stnd/log";
+
+const log = Log({ scope: "AccountPreferences" });
+
+/**
+ * Create a simple, per-app preference helper.
+ *
+ * - Local-first (localStorage) for instant UX.
+ * - Syncs to a given API endpoint which is responsible for writing to KV and/or D1.
+ *
+ * This helper is intentionally app-agnostic: each app passes its own endpoint.
+ */
+export function createPreferenceHelper({ storageNamespace, endpoint }) {
+  if (!storageNamespace) {
+    throw new Error("storageNamespace is required for createPreferenceHelper");
+  }
+  if (!endpoint) {
+    throw new Error("endpoint is required for createPreferenceHelper");
+  }
+
+  const STORAGE_KEY = `stnd:prefs:${storageNamespace}`;
+
+  function readLocal() {
+    if (typeof window === "undefined") return null;
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (!raw) return null;
+      return JSON.parse(raw);
+    } catch (e) {
+      log.warn("Failed to parse local preferences", e);
+      return null;
+    }
+  }
+
+  function writeLocal(prefs) {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs || {}));
+    } catch (e) {
+      log.warn("Failed to write local preferences", e);
+    }
+  }
+
+  async function fetchRemote() {
+    try {
+      const res = await fetch(endpoint, {
+        credentials: "include",
+      });
+      if (!res.ok) return null;
+      const json = await res.json();
+      return (json && json.preferences) || null;
+    } catch (e) {
+      log.warn("Failed to fetch remote preferences", e);
+      return null;
+    }
+  }
+
+  async function pushRemote(patch) {
+    try {
+      await fetch(endpoint, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ patch }),
+      });
+    } catch (e) {
+      log.warn("Failed to push remote preferences", e);
+    }
+  }
+
+  return {
+    /**
+     * Local-first read. Returns immediately with local value if present,
+     * and in the background hydrates from remote.
+     */
+    async get(key, fallback = null) {
+      const local = readLocal();
+      if (local && Object.prototype.hasOwnProperty.call(local, key)) {
+        return local[key];
+      }
+
+      // Background hydrate
+      fetchRemote().then((remote) => {
+        if (!remote) return;
+        writeLocal(remote);
+      });
+
+      return fallback;
+    },
+
+    /**
+     * Optimistic write:
+     * - Updates localStorage synchronously
+     * - Sends a patch to the API (KV/D1 sync is app responsibility)
+     */
+    set(key, value) {
+      const current = readLocal() || {};
+      const next = { ...current, [key]: value };
+      writeLocal(next);
+      void pushRemote({ [key]: value });
+    },
+
+    /**
+     * Load all preferences for this namespace into localStorage.
+     */
+    async hydrate() {
+      const local = readLocal();
+      if (local) return local;
+
+      const remote = await fetchRemote();
+      if (remote) {
+        writeLocal(remote);
+        return remote;
+      }
+
+      return {};
+    },
+  };
+}
+