@bitbaum/accountkit 0.0.0-stage → 0.6.3

package/package.json

@@ -1,6 +1,147 @@
 {
   "name": "@bitbaum/accountkit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.6.3",
+  "description": "One account for every bitbaum product: the account menu, accounts themselves (better-auth: password, magic link, passkeys, 2FA, OIDC) and Sign in with OrangeCat. Styled from @bitbaum/design-tokens.",
+  "license": "MIT",
+  "author": "Cato",
+  "homepage": "https://github.com/bitbaum/accountkit#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bitbaum/accountkit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bitbaum/accountkit/issues"
+  },
+  "keywords": [
+    "account-menu",
+    "avatar",
+    "sign-out",
+    "react",
+    "headless-auth",
+    "orangecat",
+    "oidc",
+    "next-auth",
+    "auth.js"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "packageManager": "pnpm@11.25.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./orangecat": {
+      "types": "./dist/orangecat.d.ts",
+      "default": "./dist/orangecat.js"
+    },
+    "./styles.css": "./styles.css",
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "default": "./dist/auth/index.js"
+    },
+    "./auth/schema": {
+      "types": "./dist/auth/schema.d.ts",
+      "default": "./dist/auth/schema.js"
+    },
+    "./auth/server": {
+      "types": "./dist/auth/server.d.ts",
+      "default": "./dist/auth/server.js"
+    },
+    "./auth/next": {
+      "types": "./dist/auth/next.d.ts",
+      "default": "./dist/auth/next.js"
+    },
+    "./auth/client": {
+      "types": "./dist/auth/client.d.ts",
+      "default": "./dist/auth/client.js"
+    },
+    "./auth/react": {
+      "types": "./dist/auth/react.d.ts",
+      "default": "./dist/auth/react.js"
+    },
+    "./auth/mail": {
+      "types": "./dist/auth/mail.d.ts",
+      "default": "./dist/auth/mail.js"
+    }
+  },
+  "peerDependencies": {
+    "@better-auth/passkey": "^1.7.10",
+    "better-auth": "^1.7.10",
+    "drizzle-orm": "^0.45.4",
+    "next": "^16.4.0",
+    "react": ">=18",
+    "@bitbaum/mail-kit": "^0.2.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.json",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.types.json",
+    "test": "node --test test/*.test.js",
+    "check:dist": "git diff --exit-code --stat -- dist",
+    "verify": "pnpm run format:check && pnpm run lint && pnpm run typecheck && pnpm run build && pnpm test && pnpm run test:browser",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "demo": "esbuild demo/demo.tsx --bundle --jsx=automatic --format=iife --define:process.env.NODE_ENV='\"production\"' --outfile=demo/dist/demo.js --log-level=warning",
+    "test:browser": "pnpm run demo && node test/browser.mjs"
+  },
+  "devDependencies": {
+    "@auth/core": "0.41.3",
+    "@better-auth/passkey": "^1.7.10",
+    "@bitbaum/design-tokens": "github:bitbaum/design-tokens#5c31f48743dabf9294bf9380a15862b4efbc68a0",
+    "@bitbaum/mail-kit": "0.2.0",
+    "@electric-sql/pglite": "^0.5.10",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^26.4.0",
+    "@types/pg": "^8.23.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.3",
+    "better-auth": "^1.7.10",
+    "drizzle-kit": "^0.31.11",
+    "drizzle-orm": "^0.45.4",
+    "esbuild": "^0.28.2",
+    "eslint": "^10.9.1",
+    "globals": "^17.11.0",
+    "next": "16.4.0",
+    "pg": "^8.23.1",
+    "playwright": "1.63.0",
+    "prettier": "^3.9.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.68.0"
+  },
+  "peerDependenciesMeta": {
+    "better-auth": {
+      "optional": true
+    },
+    "@better-auth/passkey": {
+      "optional": true
+    },
+    "drizzle-orm": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "@bitbaum/mail-kit": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "limitkit": "^0.2.0"
+  }
+}

package/styles.css

@@ -0,0 +1,383 @@
+/*
+ * @bitbaum/accountkit — the look of the one account menu.
+ *
+ * Every colour, radius and face is an --acct-* variable. By default they read
+ * @bitbaum/design-tokens' HSL-triplet variables, so apps on those tokens match
+ * without doing anything. An app whose variables are full colours (loki's are
+ * OKLCH under the same names) maps them once — `:root { --acct-panel:
+ * var(--surface-overlay); … }` — exactly as it does for chatkit's --ck-*.
+ * The BEHAVIOUR is shared and is not configurable.
+ *
+ * Non-negotiable, and why:
+ *  - 44px touch targets on the trigger and every row (WCAG 2.5.8). Loki's
+ *    trigger was 36px.
+ *  - The panel never runs off a 320–390px screen: its width is capped by the
+ *    viewport, and it aligns to the trigger's inside edge.
+ *  - Sign-out is the last row and is never hidden behind a scroll.
+ */
+
+:where(:root) {
+  /* Zero specificity: an app's own :root rule setting --acct-* always wins. */
+  --acct-panel: hsl(var(--surface-overlay, 0 0% 100%));
+  --acct-hover: hsl(var(--surface-hover, 0 0% 95%));
+  --acct-trigger-bg: hsl(var(--surface-raised, 0 0% 96%));
+  --acct-fg: hsl(var(--text-primary, 0 0% 10%));
+  --acct-fg-2: hsl(var(--text-secondary, 0 0% 30%));
+  --acct-fg-3: hsl(var(--text-tertiary, 0 0% 42%));
+  --acct-line: hsl(var(--border-subtle, 0 0% 90%));
+  --acct-line-2: hsl(var(--border-default, 0 0% 82%));
+  --acct-focus: var(--accent-primary, #ff5c00);
+  --acct-action: var(--accent-primary, #ff5c00);
+  --acct-on-action: hsl(var(--on-accent, 0 0% 100%));
+  --acct-danger: hsl(var(--status-negative, 0 65% 50%));
+  --acct-radius: var(--radius-surface, 0.75rem);
+  --acct-radius-sm: var(--radius-control, 0.5rem);
+  --acct-font: var(
+    --font-sans,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif
+  );
+  --acct-target: 2.75rem;
+  --acct-shadow:
+    0 12px 32px -12px rgb(0 0 0 / 0.28), 0 2px 6px -2px rgb(0 0 0 / 0.12);
+  --acct-z: 50;
+}
+
+.acct {
+  position: relative;
+  display: inline-flex;
+  font-family: var(--acct-font);
+}
+
+.acct-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--acct-target);
+  block-size: var(--acct-target);
+  min-inline-size: var(--acct-target);
+  padding: 0;
+  border: 1px solid var(--acct-line);
+  border-radius: 999px;
+  background: var(--acct-trigger-bg);
+  color: var(--acct-fg-2);
+  cursor: pointer;
+  overflow: hidden;
+}
+.acct-trigger:hover {
+  border-color: var(--acct-line-2);
+  color: var(--acct-fg);
+}
+.acct-trigger:focus-visible,
+.acct-row:focus-visible {
+  outline: 2px solid var(--acct-focus);
+  outline-offset: 2px;
+}
+
+.acct-avatar {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+.acct-initials {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.acct-panel {
+  position: absolute;
+  inset-block-start: calc(100% + 0.5rem);
+  z-index: var(--acct-z);
+  inline-size: min(18rem, calc(100vw - 2rem));
+  padding: 0.375rem;
+  border: 1px solid var(--acct-line);
+  border-radius: var(--acct-radius);
+  background: var(--acct-panel);
+  color: var(--acct-fg);
+  box-shadow: var(--acct-shadow);
+}
+.acct[data-align="end"] .acct-panel {
+  inset-inline-end: 0;
+}
+.acct[data-align="start"] .acct-panel {
+  inset-inline-start: 0;
+}
+
+.acct-identity {
+  padding: 0.625rem 0.75rem 0.75rem;
+  border-block-end: 1px solid var(--acct-line);
+  min-inline-size: 0;
+}
+.acct-name,
+.acct-secondary {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.acct-name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.acct-secondary {
+  margin-block-start: 0.125rem;
+  font-size: 0.8125rem;
+  color: var(--acct-fg-3);
+}
+
+.acct-group {
+  padding-block: 0.25rem;
+}
+.acct-group + .acct-group {
+  border-block-start: 1px solid var(--acct-line);
+}
+
+.acct-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  inline-size: 100%;
+  min-block-size: var(--acct-target);
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: var(--acct-radius-sm);
+  background: transparent;
+  color: var(--acct-fg);
+  font: inherit;
+  font-size: 0.9375rem;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.acct-row:hover,
+.acct-row:focus-visible {
+  background: var(--acct-hover);
+}
+.acct-row[disabled] {
+  cursor: progress;
+  opacity: 0.7;
+}
+.acct-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--acct-fg-2);
+}
+
+.acct-extra {
+  padding-inline: 0.75rem;
+  font-size: 0.9375rem;
+}
+
+.acct-error {
+  margin: 0.25rem 0.75rem 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--acct-danger);
+}
+
+/*
+ * The sign-in error screen. "Try again" is the primary action and restarts
+ * sign-in; "Back to the start" is a plain link. 44px targets, readable at
+ * 320px, no colour of its own beyond the --acct-* variables.
+ */
+.acct-signin-error {
+  max-inline-size: 28rem;
+  margin-inline: auto;
+  padding-block: 4rem;
+  font-family: var(--acct-font);
+  color: var(--acct-fg);
+}
+.acct-signin-kicker {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--acct-fg-3);
+}
+.acct-signin-title {
+  margin: 0.75rem 0 0;
+  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.acct-signin-body {
+  margin: 1rem 0 0;
+  font-size: 1.0625rem;
+  line-height: 1.55;
+  color: var(--acct-fg-2);
+}
+.acct-signin-actions {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 2.5rem;
+}
+.acct-signin-actions > form {
+  display: contents;
+}
+.acct-signin-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  min-block-size: var(--acct-target);
+  padding: 0 1.25rem;
+  border: 1px solid transparent;
+  border-radius: var(--acct-radius-sm);
+  background: var(--acct-action);
+  color: var(--acct-on-action);
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.acct-signin-button:hover {
+  filter: brightness(0.95);
+}
+.acct-signin-button.is-secondary {
+  border-color: var(--acct-line-2);
+  background: transparent;
+  color: var(--acct-fg);
+}
+.acct-signin-home {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: var(--acct-target);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--acct-fg-2);
+  text-underline-offset: 0.25em;
+}
+.acct-signin-home:hover {
+  color: var(--acct-fg);
+}
+.acct-signin-button:focus-visible,
+.acct-signin-home:focus-visible {
+  outline: 2px solid var(--acct-focus);
+  outline-offset: 2px;
+}
+
+/* ── Account screens (@bitbaum/accountkit/auth/react) ─────────────────────
+   Used only when a product passes no `classes` of its own. */
+.acct-auth-stack {
+  display: grid;
+  gap: 1rem;
+}
+.acct-auth-field {
+  display: grid;
+  gap: 0.375rem;
+}
+.acct-auth-label {
+  font: 500 0.875rem/1.4 var(--acct-font);
+  color: var(--acct-fg);
+}
+.acct-auth-hint {
+  font: 400 0.875rem/1.5 var(--acct-font);
+  color: var(--acct-fg-2);
+  margin: 0;
+}
+.acct-auth-input {
+  min-height: var(--acct-target);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 0.75rem;
+  font: 400 1rem/1.4 var(--acct-font);
+  color: var(--acct-fg);
+  background: var(--acct-trigger-bg);
+  border: 1px solid var(--acct-line-2);
+  border-radius: var(--acct-radius-sm);
+}
+.acct-auth-input:focus-visible,
+.acct-auth-button:focus-visible,
+.acct-auth-button-quiet:focus-visible {
+  outline: 2px solid var(--acct-focus);
+  outline-offset: 2px;
+}
+.acct-auth-button,
+.acct-auth-button-quiet {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--acct-target);
+  padding: 0 1.25rem;
+  font: 500 1rem/1.3 var(--acct-font);
+  border-radius: var(--acct-radius-sm);
+  cursor: pointer;
+}
+.acct-auth-button {
+  background: var(--acct-action);
+  color: var(--acct-on-action);
+  border: 0;
+}
+.acct-auth-button-quiet {
+  background: transparent;
+  color: var(--acct-fg);
+  border: 1px solid var(--acct-line-2);
+}
+.acct-auth-button:disabled,
+.acct-auth-button-quiet:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.acct-auth-notice {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  font: 400 0.875rem/1.5 var(--acct-font);
+  color: var(--acct-fg-2);
+  border: 1px solid var(--acct-line);
+  border-radius: var(--acct-radius-sm);
+}
+.acct-auth-error {
+  margin: 0;
+  font: 400 0.875rem/1.5 var(--acct-font);
+  color: var(--acct-danger);
+}
+.acct-auth-section {
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+  border: 1px solid var(--acct-line);
+  border-radius: var(--acct-radius);
+}
+.acct-auth-section-title {
+  margin: 0;
+  font: 600 1.125rem/1.3 var(--acct-font);
+  color: var(--acct-fg);
+}
+.acct-auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font: 500 0.75rem/1 var(--acct-font);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--acct-fg-3);
+}
+.acct-auth-divider::before,
+.acct-auth-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--acct-line);
+}
+.acct-auth-link {
+  color: var(--acct-fg);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  word-break: break-all;
+}
+.acct-auth-check {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: var(--acct-target);
+  font: 400 0.875rem/1.4 var(--acct-font);
+  color: var(--acct-fg-2);
+}