@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/blocks/profile/profile-card-atom.ts

@@ -1,247 +0,0 @@
-/**
- * Profile card state — Jotai atom families keyed by a card id.
- *
- * Same layout as the tree (`components/composed/tree/tree-atom.ts`) and the
- * avatar (`components/user-avatar/user-avatar-atom.ts`): in-house `keyed()`
- * families per field, write-only action atoms, a composed read-only state
- * atom, and `removeProfileCardInstance` to drop an id from every family.
- */
-
-import { atom } from "jotai"
-import type { Getter, Setter } from "jotai"
-
-import type {
-  IProfileCardAction,
-  IProfileCardConfig,
-  IProfileCardHandlers,
-  TProfileCardInstanceId,
-  IProfileCardState,
-  TProfileCardVariant,
-} from "./type"
-
-const DEFAULT_CONFIG: IProfileCardConfig = {
-  controlsVariant: false,
-  controlsMenuOpen: false,
-}
-const NO_HANDLERS: IProfileCardHandlers = {}
-
-// ── families ───────────────────────────────────────────────────────────────
-
-type TFamily<AtomType> = ((id: TProfileCardInstanceId) => AtomType) & {
-  remove: (id: TProfileCardInstanceId) => void
-}
-
-const families: { remove: (id: TProfileCardInstanceId) => void }[] = []
-
-function keyed<AtomType>(create: (id: TProfileCardInstanceId) => AtomType) {
-  const cache = new Map<TProfileCardInstanceId, AtomType>()
-  const family = ((id: TProfileCardInstanceId) => {
-    let instance = cache.get(id)
-    if (instance === undefined) {
-      instance = create(id)
-      cache.set(id, instance)
-    }
-    return instance
-  }) as TFamily<AtomType>
-  family.remove = (id: TProfileCardInstanceId) => {
-    cache.delete(id)
-  }
-  families.push(family)
-  return family
-}
-
-function stateFamily<Value>(name: string, initialValue: Value) {
-  return keyed((id) => {
-    const instance = atom(initialValue)
-    instance.debugLabel = `profileCard/${id}/${name}`
-    return instance
-  })
-}
-
-function readFamily<Value>(
-  name: string,
-  read: (get: Getter, id: TProfileCardInstanceId) => Value
-) {
-  return keyed((id) => {
-    const instance = atom((get) => read(get, id))
-    instance.debugLabel = `profileCard/${id}/${name}`
-    return instance
-  })
-}
-
-function actionFamily<Args extends unknown[]>(
-  name: string,
-  write: (
-    get: Getter,
-    set: Setter,
-    id: TProfileCardInstanceId,
-    ...args: Args
-  ) => void
-) {
-  return keyed((id) => {
-    const instance = atom(null, (get, set, ...args: Args) =>
-      write(get, set, id, ...args)
-    )
-    instance.debugLabel = `profileCard/${id}/${name}`
-    return instance
-  })
-}
-
-// ── primitives ─────────────────────────────────────────────────────────────
-
-export const profileCardVariantAtom = stateFamily<TProfileCardVariant>(
-  "variant",
-  "expanded"
-)
-
-export const profileCardMenuOpenAtom = stateFamily<boolean>("menuOpen", false)
-
-export const profileCardPendingActionIdAtom = stateFamily<string | null>(
-  "pendingActionId",
-  null
-)
-
-/** @internal */
-export const profileCardConfigAtom = stateFamily<IProfileCardConfig>(
-  "config",
-  DEFAULT_CONFIG
-)
-
-/** @internal */
-export const profileCardHandlersAtom = stateFamily<IProfileCardHandlers>(
-  "handlers",
-  NO_HANDLERS
-)
-
-// ── derived ────────────────────────────────────────────────────────────────
-
-export const profileCardCollapsedAtom = readFamily(
-  "collapsed",
-  (get, id) => get(profileCardVariantAtom(id)) === "collapsed"
-)
-
-export const profileCardBusyAtom = readFamily(
-  "busy",
-  (get, id) => get(profileCardPendingActionIdAtom(id)) !== null
-)
-
-/** Whole-state read for callers that want the object; the field atoms are
- * cheaper for components that watch one thing. */
-export const profileCardStateAtom = readFamily<IProfileCardState>(
-  "state",
-  (get, id) => ({
-    variant: get(profileCardVariantAtom(id)),
-    menuOpen: get(profileCardMenuOpenAtom(id)),
-    pendingActionId: get(profileCardPendingActionIdAtom(id)),
-    busy: get(profileCardBusyAtom(id)),
-  })
-)
-
-// ── actions: variant ───────────────────────────────────────────────────────
-
-/** Reports through `onVariantChange` always; writes the store only when no
- * `variant` prop controls the card — the prop is truth then. */
-export const setProfileCardVariantAtom = actionFamily<
-  [variant: TProfileCardVariant]
->("setVariant", (get, set, id, variant) => {
-  if (get(profileCardVariantAtom(id)) === variant) return
-  if (!get(profileCardConfigAtom(id)).controlsVariant)
-    set(profileCardVariantAtom(id), variant)
-  get(profileCardHandlersAtom(id)).onVariantChange?.(variant)
-})
-
-export const toggleProfileCardVariantAtom = actionFamily<[]>(
-  "toggleVariant",
-  (get, set, id) => {
-    set(
-      setProfileCardVariantAtom(id),
-      get(profileCardVariantAtom(id)) === "collapsed" ? "expanded" : "collapsed"
-    )
-  }
-)
-
-// ── actions: menu ──────────────────────────────────────────────────────────
-
-/** Inert while an `open` prop controls the menu. */
-export const setProfileCardMenuOpenAtom = actionFamily<[open: boolean]>(
-  "setMenuOpen",
-  (get, set, id, open) => {
-    if (get(profileCardConfigAtom(id)).controlsMenuOpen) return
-    set(profileCardMenuOpenAtom(id), open)
-  }
-)
-
-// ── actions: selection ─────────────────────────────────────────────────────
-
-/**
- * Run an action's `onSelect`. A returned promise marks the card busy until it
- * settles; a rejection goes to `onError` and the card leaves its busy state
- * either way. Because the pending id is a store value, it survives the card
- * unmounting mid-flight (sign-out typically unmounts it) — the settle just
- * writes to an instance nobody renders any more.
- */
-export const selectProfileCardActionAtom = actionFamily<
-  [action: IProfileCardAction]
->("selectAction", (get, set, id, action) => {
-  const result = action.onSelect?.()
-  if (!(result instanceof Promise)) return
-  set(profileCardPendingActionIdAtom(id), action.id)
-  result
-    .catch((cause: unknown) => get(profileCardHandlersAtom(id)).onError?.(cause))
-    .finally(() => {
-      // Only clear our own flight — a later action may have taken over.
-      if (get(profileCardPendingActionIdAtom(id)) === action.id)
-        set(profileCardPendingActionIdAtom(id), null)
-    })
-})
-
-// ── internal projections ───────────────────────────────────────────────────
-
-/** @internal Projection of the mounted component's controlled props. */
-export const projectProfileCardPropsAtom = actionFamily<
-  [
-    config: IProfileCardConfig,
-    variant: TProfileCardVariant | undefined,
-    menuOpen: boolean | undefined,
-  ]
->("projectProps", (_get, set, id, config, variant, menuOpen) => {
-  set(profileCardConfigAtom(id), config)
-  if (config.controlsVariant && variant !== undefined)
-    set(profileCardVariantAtom(id), variant)
-  if (config.controlsMenuOpen && menuOpen !== undefined)
-    set(profileCardMenuOpenAtom(id), menuOpen)
-})
-
-/** @internal */
-export const setProfileCardHandlersAtom = actionFamily<
-  [handlers: IProfileCardHandlers]
->("setHandlers", (_get, set, id, handlers) => {
-  set(profileCardHandlersAtom(id), handlers)
-})
-
-/** @internal Seed the uncontrolled variant on mount without firing
- * `onVariantChange`. */
-export const seedProfileCardVariantAtom = actionFamily<
-  [variant: TProfileCardVariant]
->("seedVariant", (_get, set, id, variant) => {
-  set(profileCardVariantAtom(id), variant)
-})
-
-// ── reset ──────────────────────────────────────────────────────────────────
-
-export const resetProfileCardAtom = actionFamily<[]>(
-  "reset",
-  (_get, set, id) => {
-    set(profileCardVariantAtom(id), "expanded")
-    set(profileCardMenuOpenAtom(id), false)
-    set(profileCardPendingActionIdAtom(id), null)
-    set(profileCardConfigAtom(id), DEFAULT_CONFIG)
-    set(profileCardHandlersAtom(id), NO_HANDLERS)
-  }
-)
-
-/** Forget a card entirely — every family drops the key so the store can
- * release its state. Call on teardown of a named instance. */
-export function removeProfileCardInstance(id: TProfileCardInstanceId): void {
-  for (const family of families) family.remove(id)
-}

package/src/components/blocks/profile/profile-card-block.tsx

@@ -1,369 +0,0 @@
-"use client"
-
-import {
-  ChevronsUpDownIcon,
-  LogOutIcon,
-  SettingsIcon,
-  UserIcon,
-  UserPlusIcon,
-  UsersIcon,
-} from "lucide-react"
-import { motion, useReducedMotion } from "motion/react"
-import * as React from "react"
-
-import {
-  AnimatedSidebarPanelContext,
-  LABEL_ENTER_TRANSITION,
-  LABEL_EXIT_TRANSITION,
-  REDUCED_TRANSITION,
-} from "@/components/blocks/shell/utils"
-import { Avatar } from "@/components/atoms/avatar"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-  type MenuPrimitive,
-} from "@/components/ui/menu"
-import { playCue } from "@/lib/sound"
-import { cn } from "@/lib/utils"
-
-import { useProfileCard } from "./use-profile-card"
-import type {
-  IProfileCardAction,
-  TProfileCardItem,
-  IProfileCardUser,
-  TProfileCardVariant,
-} from "./type"
-
-export type {
-  IProfileCardAction,
-  IProfileCardActions,
-  TProfileCardInstanceId,
-  TProfileCardItem,
-  IProfileCardLabel,
-  IProfileCardSeparator,
-  IProfileCardState,
-  IProfileCardUser,
-  TProfileCardVariant,
-} from "./type"
-
-/**
- * The menu the card ships with. Spread it to keep the shape and attach your
- * own handlers, or ignore it and pass `items` of your own.
- */
-export const defaultProfileCardItems: TProfileCardItem[] = [
-  { type: "label", label: "Management" },
-  { id: "profile", label: "Profile", icon: <UserIcon aria-hidden="true" /> },
-  {
-    id: "settings",
-    label: "Settings",
-    icon: <SettingsIcon aria-hidden="true" />,
-  },
-  { type: "separator" },
-  { id: "teams", label: "Teams", icon: <UsersIcon aria-hidden="true" /> },
-  { id: "invite", label: "Invite", icon: <UserPlusIcon aria-hidden="true" /> },
-  { type: "separator" },
-  {
-    id: "sign-out",
-    label: "Log out",
-    icon: <LogOutIcon aria-hidden="true" />,
-    variant: "destructive",
-  },
-]
-
-type TPopupProps = React.ComponentProps<typeof DropdownMenuContent>
-
-export interface IProfileCardBlockProps {
-  user: IProfileCardUser
-  /**
-   * The menu, flat: actions plus `{ type: "separator" }` / `{ type: "label" }`
-   * entries. Defaults to `defaultProfileCardItems` (no handlers attached).
-   */
-  items?: TProfileCardItem[]
-  /** Menu placement relative to the card. */
-  align?: TPopupProps["align"]
-  side?: TPopupProps["side"]
-  sideOffset?: TPopupProps["sideOffset"]
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: MenuPrimitive.Root.Props["onOpenChange"]
-  /**
-   * "content" sizes the menu to its items; "card" locks it to the trigger's
-   * width, so `align` stops mattering horizontally.
-   */
-  menuWidth?: "content" | "card"
-  /**
-   * `expanded` shows avatar, name and handle; `collapsed` folds the card to
-   * its avatar — for an icon-collapsed sidebar rail. The fold animates: the
-   * identity lines and chevron slide to zero width, the avatar stays put.
-   * Controlled when passed. Left unset, the card follows the `AnimatedPanel`
-   * it sits in (a panel footer folds with the rail on its own), and
-   * outside a panel starts from `defaultVariant`.
-   */
-  variant?: TProfileCardVariant
-  defaultVariant?: TProfileCardVariant
-  onVariantChange?: (variant: TProfileCardVariant) => void
-  /**
-   * Name this card's slice of the store so `useProfileCardState(id)` /
-   * `useProfileCardActions(id)` can read or drive it (fold it, open its
-   * menu) from anywhere under `ExegiaProvider`. Unnamed cards key off
-   * `useId` and are dropped on unmount.
-   */
-  profileCardId?: string
-  /** Presence badge on the avatar — overrides `user.presence`. */
-  presence?: IProfileCardUser["presence"]
-  /**
-   * Emit cuelume press/release on the card and play the open/close cues.
-   * Inert unless the app opts into interaction sound via `bindSounds()`.
-   */
-  sound?: boolean
-  /** Called when an action's promise rejects — the card leaves its loading state either way. */
-  onError?: (error: unknown) => void
-  className?: string
-}
-
-/** Split a flat item list into the groups the menu renders. */
-function toGroups(
-  items: TProfileCardItem[]
-): { label?: string; actions: IProfileCardAction[] }[] {
-  const groups: { label?: string; actions: IProfileCardAction[] }[] = []
-  let current: { label?: string; actions: IProfileCardAction[] } = {
-    actions: [],
-  }
-
-  for (const item of items) {
-    if (item.type === "separator") {
-      groups.push(current)
-      current = { actions: [] }
-    } else if (item.type === "label") {
-      current.label = item.label
-    } else {
-      current.actions.push(item)
-    }
-  }
-  groups.push(current)
-
-  return groups.filter(
-    (group) => group.actions.length > 0 || group.label !== undefined
-  )
-}
-
-/**
- * Avatar card that opens an account menu.
- *
- * The trigger is the rich identity chip (avatar + name over handle) and the
- * popup is a plain action menu. `items` is the whole menu — a flat list of
- * actions, separators and labels — defaulting to `defaultProfileCardItems`.
- */
-export function ProfileCardBlock({
-  user,
-  items = defaultProfileCardItems,
-  align = "center",
-  side = "bottom",
-  sideOffset = 8,
-  menuWidth = "content",
-  variant: variantProp,
-  defaultVariant,
-  onVariantChange,
-  profileCardId,
-  presence,
-  open,
-  defaultOpen,
-  onOpenChange,
-  sound = true,
-  onError,
-  className,
-}: IProfileCardBlockProps): React.ReactElement {
-  const groups = React.useMemo(() => toGroups(items), [items])
-
-  // Optional, not required: the card is a standalone block that also lands
-  // in sidebar footers, so it reads the panel context when there is one and
-  // does not throw when there is not. Inside a panel the rail is the truth
-  // for the fold, so it is projected as a controlled variant.
-  const panel = React.useContext(AnimatedSidebarPanelContext)
-  const card = useProfileCard({
-    profileCardId,
-    variant:
-      variantProp ??
-      (panel ? (panel.collapsed ? "collapsed" : "expanded") : undefined),
-    defaultVariant,
-    onVariantChange,
-    open,
-    defaultOpen,
-    onError,
-  })
-  const { collapsed, busy, menuOpen, setMenuOpen, select } = card
-  const reduce = useReducedMotion()
-  const identity = `${user.name}${user.username ? ` ${user.username}` : ""}`
-
-  const handleOpenChange: MenuPrimitive.Root.Props["onOpenChange"] = (
-    nextOpen,
-    details
-  ) => {
-    if (sound) playCue(nextOpen ? "bloom" : "droplet")
-    setMenuOpen(nextOpen)
-    onOpenChange?.(nextOpen, details)
-  }
-
-  return (
-    // The store mirrors the menu: `open` (when passed) is projected into it,
-    // and this always renders from it, so `useProfileCardActions(id).openMenu()`
-    // works the same whether or not the consumer controls the prop.
-    <DropdownMenu onOpenChange={handleOpenChange} open={menuOpen}>
-      <DropdownMenuTrigger
-        disabled={busy}
-        render={
-          <Button
-            // Spelled out rather than left to the name-from-contents rule: the
-            // avatar sits inside the button and the handle is a second line.
-            aria-label={`${identity}, account menu`}
-            className={cn(
-              // Quiet at rest — the background only surfaces on hover or
-              // while the menu is open.
-              "h-auto w-full justify-between py-1.5 pl-1.5 data-popup-open:bg-accent sm:h-auto",
-              // Folded: a full-width h-10 row matching the tree rail's tiles,
-              // avatar centred — a fixed-width tile drifted off the rail's
-              // centre line whenever the collapsed panel was wider than it.
-              // The label spans below fold to zero width rather than
-              // unmounting so the change animates. Button's own gap-2 stays:
-              // its always-mounted loading slot carries a -ms-2 that cancels
-              // it, so zeroing the gap would pull the avatar 8px left; the
-              // folded chevron cancels its own gap instead (see below).
-              // `sm:h-10` because the base carries an `sm:h-auto` that an
-              // unprefixed height would not beat.
-              collapsed &&
-                "h-10 w-full shrink-0 justify-center rounded-md p-0 sm:h-10",
-              className
-            )}
-            data-collapsed={collapsed ? "" : undefined}
-            data-slot="profile-card"
-            data-variant={collapsed ? "collapsed" : "expanded"}
-            loading={busy}
-            sound={sound}
-            // The visible name is gone while folded — name the tile on hover
-            // the way the rail's menu buttons do.
-            title={collapsed ? identity : undefined}
-            variant="ghost"
-          >
-            <span
-              className={cn(
-                "flex min-w-0 items-center justify-start",
-                collapsed ? "w-auto gap-0" : "w-full gap-2"
-              )}
-            >
-              <Avatar
-                size="default"
-                user={{
-                  // The atoms avatar derives initials from first + last name;
-                  // explicit `user.initials` win by standing in for the pair.
-                  firstName: user.initials?.[0] ?? user.name.split(/\s+/)[0],
-                  lastName:
-                    user.initials?.[1] ??
-                    user.name.split(/\s+/).slice(1).at(-1),
-                  avatarUrl: user.avatar,
-                  status: presence ?? user.presence,
-                }}
-              />
-              <motion.span
-                animate={{
-                  width: collapsed ? 0 : "auto",
-                  opacity: collapsed ? 0 : 1,
-                  x: collapsed ? -4 : 0,
-                }}
-                aria-hidden={collapsed || undefined}
-                className={cn(
-                  "flex min-w-0 flex-col overflow-hidden text-left whitespace-nowrap",
-                  collapsed && "pointer-events-none"
-                )}
-                data-slot="profile-card-identity"
-                initial={false}
-                transition={
-                  reduce
-                    ? REDUCED_TRANSITION
-                    : collapsed
-                      ? LABEL_EXIT_TRANSITION
-                      : LABEL_ENTER_TRANSITION
-                }
-              >
-                <span className="truncate font-medium">{user.name}</span>
-                {user.username ? (
-                  <span className="truncate text-xs font-normal text-muted-foreground">
-                    {user.username}
-                  </span>
-                ) : null}
-              </motion.span>
-            </span>
-            <motion.span
-              animate={{
-                width: collapsed ? 0 : "auto",
-                opacity: collapsed ? 0 : 1,
-                x: collapsed ? 4 : 0,
-              }}
-              aria-hidden="true"
-              className={cn(
-                "flex shrink-0 items-center overflow-hidden",
-                // 0px wide while folded, but the flex gap before it would
-                // still offset the avatar — pull it back by that gap.
-                collapsed && "-ml-2"
-              )}
-              initial={false}
-              transition={
-                reduce
-                  ? REDUCED_TRANSITION
-                  : collapsed
-                    ? LABEL_EXIT_TRANSITION
-                    : LABEL_ENTER_TRANSITION
-              }
-            >
-              <ChevronsUpDownIcon aria-hidden="true" className="size-3.5" />
-            </motion.span>
-          </Button>
-        }
-      />
-      <DropdownMenuContent
-        align={align}
-        // Content-width by default so `align` reads: a popup locked to
-        // `--anchor-width` lands in the same place for every value. `!`
-        // because the popup's own `not-[class*='w-']:min-w-32` compiles to
-        // a higher-specificity `:not(:is())` that would otherwise win.
-        className={cn(
-          menuWidth === "card" ? "w-(--anchor-width)" : "min-w-44!",
-          "origin-(--transform-origin) transition-[opacity,scale,translate] duration-150 ease-smooth-out data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-100 data-starting-style:scale-98 data-starting-style:opacity-0 data-[side=bottom]:data-ending-style:-translate-y-1 data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=top]:data-ending-style:translate-y-1 data-[side=top]:data-starting-style:translate-y-1 motion-reduce:transition-none"
-        )}
-        side={side}
-        sideOffset={sideOffset}
-      >
-        {groups.map((group, index) => (
-          <React.Fragment key={group.label ?? `group-${group.actions[0]?.id}`}>
-            {index > 0 ? <DropdownMenuSeparator /> : null}
-            <DropdownMenuGroup>
-              {group.label ? (
-                <DropdownMenuLabel>{group.label}</DropdownMenuLabel>
-              ) : null}
-              {group.actions.map((item) => (
-                <DropdownMenuItem
-                  disabled={item.disabled}
-                  key={item.id}
-                  onClick={() => select(item)}
-                  variant={item.variant}
-                >
-                  {item.icon}
-                  <span>{item.label}</span>
-                  {item.shortcut ? (
-                    <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>
-                  ) : null}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuGroup>
-          </React.Fragment>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}