@exegia/corpora-ui 0.19.0 → 0.21.0

package/src/components/user-avatar/user-avatar-atom.ts

@@ -0,0 +1,198 @@
+/**
+ * User avatar state — Jotai atom families keyed by an avatar id.
+ *
+ * Follows the tree's layout (`components/composed/tree/tree-atom.ts`): one
+ * in-house `keyed()` family per field, write-only action atoms for every
+ * mutation, a composed read-only state atom, and `removeUserAvatarInstance`
+ * to drop an id from every family. Nothing here touches the DOM — the
+ * pointer maths that feeds `bezelAngle` lives in `use-user-avatar.ts`.
+ */
+
+import { atom } from "jotai"
+import type { Getter, Setter } from "jotai"
+
+import type {
+  ImageStatus,
+  UserAvatarConfig,
+  UserAvatarInstanceId,
+  UserAvatarState,
+  UserPresence,
+} from "./type"
+
+/** Light from the top-left, the classic emboss, until a pointer moves. */
+export const DEFAULT_BEZEL_ANGLE = 315
+
+const DEFAULT_CONFIG: UserAvatarConfig = { controlsPresence: false }
+
+// ── families ───────────────────────────────────────────────────────────────
+
+type Family<AtomType> = ((id: UserAvatarInstanceId) => AtomType) & {
+  remove: (id: UserAvatarInstanceId) => void
+}
+
+const families: { remove: (id: UserAvatarInstanceId) => void }[] = []
+
+function keyed<AtomType>(create: (id: UserAvatarInstanceId) => AtomType) {
+  const cache = new Map<UserAvatarInstanceId, AtomType>()
+  const family = ((id: UserAvatarInstanceId) => {
+    let instance = cache.get(id)
+    if (instance === undefined) {
+      instance = create(id)
+      cache.set(id, instance)
+    }
+    return instance
+  }) as Family<AtomType>
+  family.remove = (id: UserAvatarInstanceId) => {
+    cache.delete(id)
+  }
+  families.push(family)
+  return family
+}
+
+function stateFamily<Value>(name: string, initialValue: Value) {
+  return keyed((id) => {
+    const instance = atom(initialValue)
+    instance.debugLabel = `userAvatar/${id}/${name}`
+    return instance
+  })
+}
+
+function readFamily<Value>(
+  name: string,
+  read: (get: Getter, id: UserAvatarInstanceId) => Value
+) {
+  return keyed((id) => {
+    const instance = atom((get) => read(get, id))
+    instance.debugLabel = `userAvatar/${id}/${name}`
+    return instance
+  })
+}
+
+function actionFamily<Args extends unknown[]>(
+  name: string,
+  write: (
+    get: Getter,
+    set: Setter,
+    id: UserAvatarInstanceId,
+    ...args: Args
+  ) => void
+) {
+  return keyed((id) => {
+    const instance = atom(null, (get, set, ...args: Args) =>
+      write(get, set, id, ...args)
+    )
+    instance.debugLabel = `userAvatar/${id}/${name}`
+    return instance
+  })
+}
+
+// ── primitives ─────────────────────────────────────────────────────────────
+
+/** `null` = no badge. */
+export const userAvatarPresenceAtom = stateFamily<UserPresence | null>(
+  "presence",
+  null
+)
+
+/** Degrees clockwise from 12 o'clock — where the bezel highlight sits. */
+export const userAvatarBezelAngleAtom = stateFamily<number>(
+  "bezelAngle",
+  DEFAULT_BEZEL_ANGLE
+)
+
+export const userAvatarImageStatusAtom = stateFamily<ImageStatus>(
+  "imageStatus",
+  "idle"
+)
+
+/** @internal Which fields the mounted component controls from props. */
+export const userAvatarConfigAtom = stateFamily<UserAvatarConfig>(
+  "config",
+  DEFAULT_CONFIG
+)
+
+// ── derived ────────────────────────────────────────────────────────────────
+
+export const userAvatarIsOnlineAtom = readFamily(
+  "isOnline",
+  (get, id) => get(userAvatarPresenceAtom(id)) === "online"
+)
+
+/** Whole-state read for callers that want the object; field atoms above are
+ * cheaper for components that watch one thing. */
+export const userAvatarStateAtom = readFamily<UserAvatarState>(
+  "state",
+  (get, id) => ({
+    presence: get(userAvatarPresenceAtom(id)),
+    bezelAngle: get(userAvatarBezelAngleAtom(id)),
+    imageStatus: get(userAvatarImageStatusAtom(id)),
+  })
+)
+
+// ── actions ────────────────────────────────────────────────────────────────
+
+/** Inert while a `presence` prop controls the avatar — the prop is truth. */
+export const setUserAvatarPresenceAtom = actionFamily<
+  [presence: UserPresence | null]
+>("setPresence", (get, set, id, presence) => {
+  if (get(userAvatarConfigAtom(id)).controlsPresence) return
+  set(userAvatarPresenceAtom(id), presence)
+})
+
+/** online ⇄ offline; a badge-less avatar comes online. */
+export const toggleUserAvatarPresenceAtom = actionFamily<[]>(
+  "togglePresence",
+  (get, set, id) => {
+    const next = get(userAvatarPresenceAtom(id)) === "online" ? "offline" : "online"
+    set(setUserAvatarPresenceAtom(id), next)
+  }
+)
+
+/** Stored as given — continuous, not wrapped into [0, 360): the rim is
+ * rotated with a CSS transition, and an unwrapped angle is what lets a
+ * 359° → 1° move take the short way round. Written on every pointer frame,
+ * so it stays a bare set — no config gate, no side effects. */
+export const setUserAvatarBezelAngleAtom = actionFamily<[angle: number]>(
+  "setBezelAngle",
+  (_get, set, id, angle) => {
+    if (!Number.isFinite(angle)) return
+    set(userAvatarBezelAngleAtom(id), angle)
+  }
+)
+
+/** @internal Reported by the image element; drives the skeleton. */
+export const setUserAvatarImageStatusAtom = actionFamily<[status: ImageStatus]>(
+  "setImageStatus",
+  (_get, set, id, status) => {
+    set(userAvatarImageStatusAtom(id), status)
+  }
+)
+
+/** @internal Projection of the mounted component's controlled props. */
+export const projectUserAvatarPropsAtom = actionFamily<
+  [config: UserAvatarConfig, presence: UserPresence | null | undefined]
+>("projectProps", (get, set, id, config, presence) => {
+  const wasControlled = get(userAvatarConfigAtom(id)).controlsPresence
+  set(userAvatarConfigAtom(id), config)
+  if (config.controlsPresence) set(userAvatarPresenceAtom(id), presence ?? null)
+  // Releasing control (`presence` prop → undefined) clears the badge rather
+  // than leaving the last projected value stranded in the store — going
+  // from "online" to no presence is a real transition for a user object.
+  else if (wasControlled) set(userAvatarPresenceAtom(id), null)
+})
+
+export const resetUserAvatarAtom = actionFamily<[]>(
+  "reset",
+  (_get, set, id) => {
+    set(userAvatarPresenceAtom(id), null)
+    set(userAvatarBezelAngleAtom(id), DEFAULT_BEZEL_ANGLE)
+    set(userAvatarImageStatusAtom(id), "idle")
+    set(userAvatarConfigAtom(id), DEFAULT_CONFIG)
+  }
+)
+
+/** Forget an avatar entirely — every family drops the key so the store can
+ * release its state. Call on teardown of a named instance. */
+export function removeUserAvatarInstance(id: UserAvatarInstanceId): void {
+  for (const family of families) family.remove(id)
+}

package/src/components/user-avatar/utils.ts

@@ -0,0 +1,8 @@
+/** "Jenny Hamilton" → "JH", "luna" → "L". */
+export function initialsFrom(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return ""
+  const first = parts[0]?.[0] ?? ""
+  const last = parts.length > 1 ? (parts.at(-1)?.[0] ?? "") : ""
+  return (first + last).toUpperCase()
+}

package/src/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
-@import "tw-animate-css";
+@import "tailwindcss";
+@import "tailwind-animations";
 @import "shadcn/tailwind.css";
 @import "@fontsource-variable/inter";
 @import "@fontsource-variable/figtree";
@@ -8,149 +9,169 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-    /* Let width/height tween between auto and fixed values (e.g. a button
+  /* Let width/height tween between auto and fixed values (e.g. a button
        toggling to an icon-only size). Progressive enhancement: browsers
        without support keep the instant jump. */
-    interpolate-size: allow-keywords;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.457 0.24 277.023);
-    --primary-foreground: oklch(0.962 0.018 272.314);
-    --secondary: oklch(0.967 0.001 286.375);
-    --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.811 0.111 293.571);
-    --chart-2: oklch(0.606 0.25 292.717);
-    --chart-3: oklch(0.541 0.281 293.009);
-    --chart-4: oklch(0.491 0.27 292.581);
-    --chart-5: oklch(0.432 0.232 292.759);
-    --radius: 0.875rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.511 0.262 276.966);
-    --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-    --destructive-foreground: var(--color-red-700);
-    --info: var(--color-blue-500);
-    --info-foreground: var(--color-blue-700);
-    --success: var(--color-emerald-500);
-    --success-foreground: var(--color-emerald-700);
-    --warning: var(--color-amber-500);
-    --warning-foreground: var(--color-amber-700);
+  interpolate-size: allow-keywords;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.457 0.24 277.023);
+  --primary-foreground: oklch(0.962 0.018 272.314);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.811 0.111 293.571);
+  --chart-2: oklch(0.606 0.25 292.717);
+  --chart-3: oklch(0.541 0.281 293.009);
+  --chart-4: oklch(0.491 0.27 292.581);
+  --chart-5: oklch(0.432 0.232 292.759);
+  --radius: 0.875rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.511 0.262 276.966);
+  --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --destructive-foreground: var(--color-red-700);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-700);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-700);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-700);
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.398 0.195 277.366);
-    --primary-foreground: oklch(0.962 0.018 272.314);
-    --secondary: oklch(0.274 0.006 286.033);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.811 0.111 293.571);
-    --chart-2: oklch(0.606 0.25 292.717);
-    --chart-3: oklch(0.541 0.281 293.009);
-    --chart-4: oklch(0.491 0.27 292.581);
-    --chart-5: oklch(0.432 0.232 292.759);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.585 0.233 277.117);
-    --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-    --destructive-foreground: var(--color-red-400);
-    --info: var(--color-blue-500);
-    --info-foreground: var(--color-blue-400);
-    --success: var(--color-emerald-500);
-    --success-foreground: var(--color-emerald-400);
-    --warning: var(--color-amber-500);
-    --warning-foreground: var(--color-amber-400);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.398 0.195 277.366);
+  --primary-foreground: oklch(0.962 0.018 272.314);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.811 0.111 293.571);
+  --chart-2: oklch(0.606 0.25 292.717);
+  --chart-3: oklch(0.541 0.281 293.009);
+  --chart-4: oklch(0.491 0.27 292.581);
+  --chart-5: oklch(0.432 0.232 292.759);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.585 0.233 277.117);
+  --sidebar-primary-foreground: oklch(0.962 0.018 272.314);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+  --destructive-foreground: var(--color-red-400);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-400);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-400);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-400);
+
+  .shadow-bezel {
+    box-shadow:
+      inset 1px 1px 2px rgb(255 255 255 / 0.15),
+      inset -2px -2px 4px rgb(0 0 0 / 0.6);
+  }
+
+  .shadow-debossed {
+    box-shadow:
+      inset 2px 2px 4px rgb(0 0 0 / 0.6),
+      inset -1px -1px 2px rgb(255 255 255 / 0.15);
+  }
 }
 
 @theme inline {
-    /* motion tokens (transitions.dev scale) */
-    --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
-    --font-sans: 'Inter Variable', sans-serif;
-    --font-heading: 'Figtree Variable', sans-serif;
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) * 0.6);
-    --radius-md: calc(var(--radius) * 0.8);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.4);
-    --radius-2xl: calc(var(--radius) * 1.8);
-    --radius-3xl: calc(var(--radius) * 2.2);
-    --radius-4xl: calc(var(--radius) * 2.6);
-    --color-destructive-foreground: var(--destructive-foreground);
+  /* motion tokens (transitions.dev scale) */
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --font-sans: "Inter Variable", sans-serif;
+  --font-heading: "Figtree Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-destructive-foreground: var(--destructive-foreground);
   @keyframes liquid-drift {
-  0% {
-    background-position: 0% 0%, 100% 100%, 0% 0%;
-        }
-  50% {
-    background-position: 30% 20%, 70% 80%, 0% 0%;
-        }
-  100% {
-    background-position: 0% 0%, 100% 100%, 0% 0%;
-        }
+    0% {
+      background-position:
+        0% 0%,
+        100% 100%,
+        0% 0%;
     }
-  --animate-caret-blink: 1s ease-out infinite caret-blink
-;
+    50% {
+      background-position:
+        30% 20%,
+        70% 80%,
+        0% 0%;
+    }
+    100% {
+      background-position:
+        0% 0%,
+        100% 100%,
+        0% 0%;
+    }
+  }
+  --animate-caret-blink: 1s ease-out infinite caret-blink;
   --animate-input-shake: input-shake 0.4s ease-in-out;
   --animate-skeleton: skeleton 2s -1s infinite linear;
   --color-warning-foreground: var(--warning-foreground);
@@ -160,35 +181,72 @@
   --color-info-foreground: var(--info-foreground);
   --color-info: var(--info);
   @keyframes skeleton {
-    to { background-position: -200% 0; }
+    to {
+      background-position: -200% 0;
+    }
   }
   @keyframes input-shake {
-    0%, 100% { translate: 0; }
-    20% { translate: -6px 0; }
-    40% { translate: 6px 0; }
-    60% { translate: -4px 0; }
-    80% { translate: 4px 0; }
+    0%,
+    100% {
+      translate: 0;
+    }
+    20% {
+      translate: -6px 0;
+    }
+    40% {
+      translate: 6px 0;
+    }
+    60% {
+      translate: -4px 0;
+    }
+    80% {
+      translate: 4px 0;
+    }
   }
   @keyframes caret-blink {
-  0%, 70%, to {
-    opacity: 1;
-        }
-  20%, 50% {
-    opacity: 0;
-        }
-    }}
+    0%,
+    70%,
+    to {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    }
+  }
   body {
     @apply bg-background text-foreground;
-    }
-  button:not(:disabled), [role="button"]:not(:disabled) {
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
     cursor: pointer;
-    }
+  }
   html {
     @apply font-sans;
-    }
-}
+  }
+}
+
+@utility shadow-bezel {
+  /* Inherits light/dark ambient highlights automatically */
+  box-shadow:
+    inset 1px 1px 2px rgb(255 255 255 / 0.7),
+    inset -2px -2px 4px rgb(0 0 0 / 0.25);
+}
+
+@utility shadow-debossed {
+  box-shadow:
+    inset 2px 2px 4px rgb(0 0 0 / 0.25),
+    inset -1px -1px 2px rgb(255 255 255 / 0.7);
+}
+
+@utility shadow-bezel-dynamic {
+  box-shadow:
+    inset 1px 1px 2px color-mix(in srgb, currentColor 40%, white),
+    inset -2px -2px 4px color-mix(in srgb, currentColor 60%, black);
+}

package/src/index.ts

@@ -26,10 +26,40 @@ export * from "./components/ui/textarea"
 // components
 export * from "./components/composed/password-input"
 export * from "./components/composed/social-providers"
-export * from "./components/composed/user-avatar"
+export * from "./components/composed/tree"
+// user-avatar: named, not `export *` — its barrel also exports an `Avatar`
+// namespace object that would collide with ui/avatar's component above.
+export {
+  DEFAULT_BEZEL_ANGLE,
+  PresenceBadge,
+  UserAvatar,
+  initialsFrom,
+  removeUserAvatarInstance,
+  resetUserAvatarAtom,
+  setUserAvatarBezelAngleAtom,
+  setUserAvatarPresenceAtom,
+  toggleUserAvatarPresenceAtom,
+  useUserAvatar,
+  useUserAvatarActions,
+  useUserAvatarState,
+  userAvatarBezelAngleAtom,
+  userAvatarIsOnlineAtom,
+  userAvatarPresenceAtom,
+  userAvatarStateAtom,
+} from "./components/user-avatar"
+export type {
+  UseUserAvatarOptions,
+  UserAvatarActions,
+  UserAvatarBinding,
+  UserAvatarInstanceId,
+  UserAvatarProps,
+  UserAvatarState,
+  UserPresence,
+} from "./components/user-avatar"
 
 // blocks
 export * from "./components/blocks/auth/auth-shell"
+export * from "./components/blocks/auth/auth-state"
 export * from "./components/blocks/auth/code-auth-block"
 export * from "./components/blocks/auth/forgot-password-block"
 export * from "./components/blocks/auth/linked-accounts-block"
@@ -45,11 +75,14 @@ export * from "./components/blocks/shell"
 export { default as ShellLayout } from "./components/blocks/shell"
 export * from "./components/blocks/scaffold"
 export { default as Layout } from "./components/blocks/layout"
-export * from "./components/blocks/profile/profile-card-block"
+export * from "./components/blocks/profile"
 
 // motion primitives
 export * from "./components/motion/shared-layout-bg"
 
+// state
+export * from "./state"
+
 // The v0.17 sidebar monolith became the shell block's AnimatedPanel parts.
 // `blocks/shell` above already exports every part under its new name; these
 // aliases keep the published AnimatedSidebar* names working for consumers.