@cosxai/ui 1.0.0-alpha.1 → 1.0.0-alpha.11

package/src/components/AppRail.tsx

@@ -0,0 +1,141 @@
+import type { LucideIcon } from 'lucide-react';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { formatCount } from './Button';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+
+export type AppRailItem = {
+  key: string;
+  icon: LucideIcon;
+  /** The module's name: accessible name and tooltip. */
+  label: string;
+  /** A count on the corner; hidden at zero (and on a disabled item), 99+ above 99. */
+  count?: number | undefined;
+  /** A dot on the corner — something new, no number. A count wins. */
+  dot?: boolean | undefined;
+  /** Not available yet: 40% opacity, aria-disabled (still focusable); a press calls `onDisabledSelect`. */
+  disabled?: boolean | undefined;
+  /** The tooltip while disabled ("My tasks · Coming soon"); the caller words it. @default label */
+  disabledHint?: string | undefined;
+};
+
+export type AppRailProps = Omit<ComponentProps<'nav'>, 'onChange' | 'children'> & {
+  items: AppRailItem[];
+  /** The current module's key. */
+  value: string;
+  onChange: (key: string) => void;
+  /** A disabled item was pressed — say why (a toast: "Coming soon"). */
+  onDisabledSelect?: ((key: string) => void) | undefined;
+  /** The landmark's accessible name ("Modules"). */
+  label: string;
+  /** Top slot: the workspace, usually an AppRailSlot holding a 36px WorkspaceMark. */
+  workspace?: ReactNode;
+  /** Bottom slot: the account, usually an AppRailSlot shape="round" holding a 32px Avatar. */
+  account?: ReactNode;
+};
+
+/**
+ * AppRail — the 60px desktop module rail (Metaroom Agent): the workspace at
+ * the top, one 40×38 icon button per module, a flexible gap, the account at
+ * the bottom. The current module takes the workspace's field colour
+ * (--brand-field); modules not built yet stay visible at 40% with a tooltip
+ * that says so. Counts and dots use --brand-mark.
+ *
+ * Compose with: AppRailSlot + WorkspaceMark / Avatar for the slots, each
+ * usually a PopoverTrigger (workspace switcher, account card); BottomTabs is
+ * the same navigation on phones.
+ *
+ * A nav landmark of buttons; the current one has aria-current="page".
+ * Forwards ref to the <nav>; spreads `...rest` onto it.
+ */
+export const AppRail = forwardRef<HTMLElement, AppRailProps>(function AppRail(
+  { items, value, onChange, onDisabledSelect, label, workspace, account, className, ...rest },
+  ref,
+) {
+  return (
+    <nav
+      ref={ref}
+      aria-label={label}
+      className={cn('flex w-[60px] shrink-0 flex-col items-center gap-1 border-r border-rule bg-sunk py-3.5 font-sans text-fg', className)}
+      {...rest}
+    >
+      {workspace && <div className="mb-3 flex">{workspace}</div>}
+      {items.map((it) => {
+        const on = it.key === value;
+        const count = it.disabled || it.count === undefined ? null : formatCount(it.count);
+        return (
+          <Tooltip key={it.key} side="right" content={it.disabled ? (it.disabledHint ?? it.label) : it.label}>
+            <button
+              type="button"
+              aria-label={count ? `${it.label} (${count})` : it.label}
+              aria-current={on ? 'page' : undefined}
+              aria-disabled={it.disabled || undefined}
+              onClick={() => (it.disabled ? onDisabledSelect?.(it.key) : onChange(it.key))}
+              className={cn(
+                'relative grid h-[38px] w-10 shrink-0 cursor-pointer place-items-center rounded-md border-0 p-0 outline-none',
+                'transition-colors duration-[120ms] ease-standard focus-visible:shadow-(--focus-ring)',
+                on ? 'bg-brand-field text-ink' : 'bg-transparent text-fg',
+                !on && !it.disabled && 'hover:bg-hover',
+                it.disabled && 'cursor-not-allowed opacity-40',
+              )}
+            >
+              <Icon icon={it.icon} size={17} />
+              {count ? (
+                <span
+                  aria-hidden
+                  className="absolute top-1 right-[5px] h-3.5 min-w-3.5 rounded-pill bg-brand-mark px-[3px] text-center text-[9px] leading-[14px] font-bold text-ink tabular-nums"
+                >
+                  {count}
+                </span>
+              ) : (
+                it.dot && !it.disabled && <span aria-hidden data-dot="" className="absolute top-[7px] right-[9px] size-[7px] rounded-pill bg-brand-mark" />
+              )}
+            </button>
+          </Tooltip>
+        );
+      })}
+      <div className="flex-1" />
+      {account && <div className="flex">{account}</div>}
+    </nav>
+  );
+});
+
+export type AppRailSlotProps = Omit<ComponentProps<'button'>, 'aria-label'> & {
+  /** Accessible name ("Switch workspace", "Account"). */
+  label: string;
+  /** tile (the workspace, 9px corners) · round (the account). @default "tile" */
+  shape?: 'tile' | 'round' | undefined;
+  /** Its popover is open: an ink ring with a gap. Set from the popover's open state. */
+  active?: boolean | undefined;
+};
+
+/**
+ * AppRailSlot — the bare button around the rail's workspace mark or account
+ * avatar: no fill of its own, the focus ring, and the ink ring while its
+ * popover is open. Works as `PopoverTrigger asChild` (forwards ref and
+ * props).
+ */
+export const AppRailSlot = forwardRef<HTMLButtonElement, AppRailSlotProps>(function AppRailSlot(
+  { label, shape = 'tile', active = false, className, children, ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-label={label}
+      title={label}
+      className={cn(
+        'inline-flex shrink-0 cursor-pointer border-0 bg-transparent p-0 outline-none focus-visible:shadow-(--focus-ring) disabled:cursor-default',
+        shape === 'round' ? 'rounded-pill' : 'rounded-[9px]',
+        active && 'shadow-[0_0_0_2px_var(--bg-sunk),0_0_0_4px_var(--text-primary)]',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});

package/src/components/AsyncSelect.tsx

@@ -0,0 +1,205 @@
+import * as Popover from '@radix-ui/react-popover';
+import { Search, X } from 'lucide-react';
+import { useId, useRef, useState, type KeyboardEvent } from 'react';
+
+import { cn } from '../lib/cn';
+import { useField } from './Field';
+import { controlFrame, controlInner } from './forms-control';
+import { Avatar, DEFAULT_LABELS, ListboxBody, type ListboxLabels, type ListItem } from './inputs-listbox';
+import { useDebouncedSearch } from './inputs-search';
+import { Spinner } from './Spinner';
+
+export type AsyncSelectProps = {
+  /** Look up matches; the signal aborts when newer input arrives. */
+  search: (query: string, signal: AbortSignal) => Promise<ListItem[]>;
+  value?: ListItem | null | undefined;
+  onChange?: ((item: ListItem | null) => void) | undefined;
+  /** Offer “Create …” for text that matches nothing exactly. */
+  onCreate?: ((query: string) => void | ListItem | Promise<ListItem | void>) | undefined;
+  /** @default "Search" */
+  placeholder?: string | undefined;
+  /** ms. @default 250 */
+  debounce?: number | undefined;
+  labels?: Partial<ListboxLabels> & { clear?: string | undefined };
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Start with this search typed and its results open. */
+  defaultQuery?: string | undefined;
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  id?: string | undefined;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * AsyncSelect — choose one from a large or remote set (a customer, a
+ * project). Typing searches after a short pause and drops stale answers;
+ * a spinner shows until the answer comes, then results with their meta, a
+ * Create row, “nothing matches”, or an error with Retry. The choice
+ * becomes a card that clears with ×.
+ */
+export function AsyncSelect({
+  search,
+  value,
+  onChange,
+  onCreate,
+  placeholder = 'Search',
+  debounce = 250,
+  labels: labelsIn,
+  invalid,
+  disabled,
+  defaultQuery = '',
+  size,
+  id,
+  className,
+  ...aria
+}: AsyncSelectProps) {
+  const field = useField();
+  const auto = useId();
+  const listId = `as${auto}-list`;
+  const optionId = (i: number) => `as${auto}-o${i}`;
+  const labels = { ...DEFAULT_LABELS, ...labelsIn };
+  const [own, setOwn] = useState<ListItem | null>(null);
+  const chosen = value === undefined ? own : value;
+  const [query, setQuery] = useState(defaultQuery);
+  const [open, setOpen] = useState(defaultQuery !== '');
+  const [active, setActive] = useState(0);
+  const input = useRef<HTMLInputElement | null>(null);
+  const { status, result, retry } = useDebouncedSearch(query, search, { delay: debounce });
+  const items = status === 'done' ? (result ?? []) : [];
+  const q = query.trim();
+  const canCreate = Boolean(onCreate) && q.length > 0 && !items.some((i) => i.label.toLowerCase() === q.toLowerCase());
+  const count = items.length + (canCreate ? 1 : 0);
+  const bad = Boolean(invalid || field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+
+  const pick = (item: ListItem | null) => {
+    if (value === undefined) setOwn(item);
+    onChange?.(item);
+    setQuery('');
+    setOpen(false);
+  };
+  const choose = async (i: number) => {
+    if (i < items.length) return pick(items[i]!);
+    if (i === items.length && canCreate) {
+      const made = await onCreate!(q);
+      if (made && typeof made === 'object') pick(made);
+      else {
+        setQuery('');
+        setOpen(false);
+      }
+    }
+  };
+  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setOpen(true);
+      setActive((a) => Math.min(count - 1, a + 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActive((a) => Math.max(0, a - 1));
+    } else if (e.key === 'Enter' && open && count > 0) {
+      e.preventDefault();
+      void choose(active);
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  };
+
+  if (chosen) {
+    return (
+      <div
+        className={cn(
+          'flex min-h-[38px] items-center gap-2.5 rounded-md border bg-sunk px-2 py-1.5 font-sans text-ui text-fg',
+          bad ? 'border-error' : 'border-rule-soft',
+          off && 'bg-well text-fg-secondary',
+          className,
+        )}
+      >
+        <Avatar item={chosen} className="size-8 rounded-sm bg-ink text-linen ink:bg-yellow-accent ink:text-ink" />
+        <span className="flex min-w-0 flex-1 flex-col">
+          <span id={id ?? field?.id} className="truncate font-medium">
+            {chosen.label}
+          </span>
+          {chosen.meta && <span className="truncate text-meta text-fg-secondary">{chosen.meta}</span>}
+        </span>
+        {!off && (
+          <button
+            type="button"
+            aria-label={`${labelsIn?.clear ?? 'Clear'} ${chosen.label}`}
+            onClick={() => {
+              pick(null);
+              requestAnimationFrame(() => input.current?.focus());
+            }}
+            className="inline-grid shrink-0 cursor-pointer place-items-center rounded-xs p-0.5 text-fg-secondary outline-none hover:text-fg focus-visible:shadow-(--focus-ring)"
+          >
+            <X size={13} aria-hidden />
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  const showList = open && q.length > 0;
+  return (
+    <Popover.Root open={showList} onOpenChange={setOpen}>
+      <Popover.Anchor asChild>
+        <div className={cn(controlFrame({ size, invalid: bad, disabled: off }), className)}>
+          <Search size={14} aria-hidden className="shrink-0 text-fg-secondary" />
+          <input
+            ref={input}
+            id={id ?? field?.id}
+            role="combobox"
+            aria-expanded={showList}
+            aria-controls={showList ? listId : undefined}
+            aria-autocomplete="list"
+            aria-activedescendant={showList && status === 'done' && count > 0 ? optionId(active) : undefined}
+            aria-invalid={bad || undefined}
+            aria-describedby={field?.describedBy}
+            aria-label={aria['aria-label']}
+            disabled={off}
+            value={query}
+            placeholder={placeholder}
+            autoComplete="off"
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActive(0);
+              setOpen(true);
+            }}
+            onFocus={() => q && setOpen(true)}
+            onKeyDown={onKey}
+            className={controlInner}
+          />
+          {status === 'searching' && <Spinner size={12} className="text-fg-secondary" />}
+        </div>
+      </Popover.Anchor>
+      <Popover.Portal>
+        <Popover.Content
+          align="start"
+          sideOffset={6}
+          collisionPadding={12}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            if (e.target instanceof Node && input.current?.parentElement?.contains(e.target)) e.preventDefault();
+          }}
+          className="rise z-60 rounded-lg border border-rule bg-page p-1 font-sans [--motion-reveal:200ms]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <ListboxBody
+            id={listId}
+            optionId={optionId}
+            items={items}
+            active={active}
+            status={status}
+            query={q}
+            canCreate={canCreate}
+            labels={labels}
+            onActive={setActive}
+            onChoose={(i) => void choose(i)}
+            onRetry={retry}
+          />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/components/AuthLayout.tsx

@@ -0,0 +1,127 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Logo } from './Logo';
+
+export type AuthLayoutProps = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Top left: the product lockup (a Logo tile and the product name). */
+  brand: ReactNode;
+  /** Top right: usually a ThemeSwitch. */
+  headerEnd?: ReactNode;
+  /** The step, centred in a 400px column. */
+  children: ReactNode;
+  /** One line under the step: who to ask when stuck. */
+  help?: ReactNode;
+  /** The foot: links on the left, the language on the right. */
+  footer?: ReactNode;
+  /** The yellow panel's text (an AuthPanel). Dropped below 900px. */
+  panel?: ReactNode;
+};
+
+/**
+ * AuthLayout — the sign-in page (Metaroom sign-in, design.cosx.co): the step
+ * on the left under the product lockup, the yellow panel on the right saying
+ * what this step is for. The panel drops when the layout is narrower than
+ * 900px (a container query, so a narrow window or pane works too).
+ */
+export function AuthLayout({ brand, headerEnd, children, help, footer, panel, className, ...rest }: AuthLayoutProps) {
+  return (
+    <div className={cn('@container flex h-full w-full font-sans text-fg', className)} {...rest}>
+      <div className="flex min-w-0 flex-1 flex-col px-12 pt-12 pb-8">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3 text-[15px] font-medium">{brand}</div>
+          {headerEnd}
+        </div>
+        <main className="flex flex-1 items-center py-8">
+          <div className="mx-auto flex w-full max-w-[400px] flex-col gap-8">
+            {children}
+            {help && <p className="m-0 text-[12px] leading-[1.6] text-fg-secondary">{help}</p>}
+          </div>
+        </main>
+        {footer && <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 text-[12px] text-fg-secondary">{footer}</div>}
+      </div>
+      {panel && (
+        <aside className="hidden w-[min(560px,45%)] shrink-0 p-6 @min-[900px]:flex">
+          <div className="flex flex-1 flex-col justify-between gap-8 overflow-hidden rounded-[24px] bg-brand-field p-14 text-ink">{panel}</div>
+        </aside>
+      )}
+    </div>
+  );
+}
+
+export type AuthPanelProps = {
+  /** Small line above: "Your workspaces", "Security". */
+  eyebrow: ReactNode;
+  /** The statement's plain start: "Every workspace you belong to, ". */
+  lead: ReactNode;
+  /** Its highlighted end: "under one sign-in." */
+  mark: ReactNode;
+  /** One sentence under it. */
+  sub?: ReactNode;
+  /** Top of the panel. @default the COSX wordmark */
+  logo?: ReactNode;
+};
+
+/** AuthPanel — the yellow panel's text: wordmark on top, the statement at the foot. */
+export function AuthPanel({ eyebrow, lead, mark, sub, logo }: AuthPanelProps) {
+  return (
+    <>
+      {logo ?? <Logo height={22} tone="ink" />}
+      <div className="flex flex-col gap-4">
+        <span className="text-[13px] font-medium text-[rgba(17,17,17,.7)]">{eyebrow}</span>
+        {/* Chinese sets at 1.35, untracked, its band starting lower (design: Patterns · Sign-in).
+            Important: typography-cjk.css sets every :lang(zh) line-height outside the layers. */}
+        <p className="m-0 text-[34px] leading-[1.22] font-medium tracking-[-.02em] text-pretty [&:lang(zh)]:leading-[1.35]! [&:lang(zh)]:tracking-normal!">
+          {lead}
+          <span className="mx-[-.08em] box-decoration-clone px-[.08em] bg-[linear-gradient(transparent_40%,var(--brand-mark)_40%,var(--brand-mark)_94%,transparent_94%)] [&:lang(zh)]:bg-[linear-gradient(transparent_50%,var(--brand-mark)_50%,var(--brand-mark)_94%,transparent_94%)]">
+            {mark}
+          </span>
+        </p>
+        {sub && <p className="m-0 text-[15px] leading-[1.6] text-[rgba(17,17,17,.7)]">{sub}</p>}
+      </div>
+    </>
+  );
+}
+
+export type AuthStepHeadProps = {
+  /** An AuthIconTile, a Spinner, a workspace mark. */
+  icon?: ReactNode;
+  title: ReactNode;
+  children?: ReactNode;
+};
+
+/** AuthStepHead — a step's icon, title and one explanation. */
+export function AuthStepHead({ icon, title, children }: AuthStepHeadProps) {
+  return (
+    <div className="flex flex-col gap-5">
+      {icon}
+      <div className="flex flex-col gap-2">
+        <h1 className="m-0 text-[30px] leading-[1.2] font-medium tracking-[-.015em]">{title}</h1>
+        {children && <p className="m-0 text-[15px] leading-[1.6] text-fg-secondary">{children}</p>}
+      </div>
+    </div>
+  );
+}
+
+export type AuthIconTileProps = {
+  children: ReactNode;
+  /** plain: a step; yellow: done; error: it didn't work. @default "plain" */
+  tone?: 'plain' | 'yellow' | 'error' | undefined;
+};
+
+/** AuthIconTile — the 56px tile holding a step's icon. */
+export function AuthIconTile({ children, tone = 'plain' }: AuthIconTileProps) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        'grid size-14 place-items-center rounded-[14px]',
+        tone === 'plain' && 'bg-sunk text-fg',
+        tone === 'yellow' && 'bg-brand-field text-ink',
+        tone === 'error' && 'bg-error-wash text-error-text',
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, useEffect, useRef, useState, type ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { initialsOf } from './ActivityTimeline';
+
+export type AvatarSize = 20 | 24 | 28 | 32 | 36 | 40 | 52;
+
+// Initials size per avatar size (Metaroom Agent / Account: 22→9, 28→10,
+// 32→11, 40→13, 52→16).
+const TYPE: Record<AvatarSize, number> = { 20: 9, 24: 9, 28: 10, 32: 11, 36: 12, 40: 13, 52: 16 };
+
+export type AvatarProps = Omit<ComponentProps<'span'>, 'children'> & {
+  /** The person's name: gives the initials (two Latin initials, or the first hanzi). */
+  name: string;
+  /** Their photo; the initials show while it is unset or when it fails to load. */
+  src?: string | undefined;
+  /** Initials to use instead of ones taken from `name`. */
+  initials?: string | undefined;
+  /** px. @default 32 */
+  size?: AvatarSize | undefined;
+  /** chrome (a grey disc) · brand (the workspace's field colour, for "you"). @default "chrome" */
+  tone?: 'chrome' | 'brand' | undefined;
+  /** An ink ring with a gap — the avatar's menu is open, or it is the current tab.
+   *  The gap takes `--avatar-ring-gap` (default the page colour); set it to the ground behind. */
+  ring?: boolean | undefined;
+  /** Accessible name. Without it the avatar is decorative: the name sits beside it. */
+  label?: string | undefined;
+};
+
+/**
+ * Avatar — a person: their photo, or their initials on a round disc. Sizes
+ * 20–52 as the Metaroom app uses them (rail account 32, phone tab 24, lists
+ * 28–40, profile 52). For the Agent use MetaAvatar (@cosxai/chat); for a
+ * workspace, WorkspaceMark.
+ *
+ * Compose with: AppRail `account` slot (inside a button), BottomTabs item
+ * `avatar`, list rows beside the person's name (decorative there).
+ *
+ * Forwards ref to the root <span>; spreads `...rest` onto it.
+ */
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
+  { name, src, initials, size = 32, tone = 'chrome', ring = false, label, className, style, ...rest },
+  ref,
+) {
+  const [failed, setFailed] = useState(false);
+  const img = useRef<HTMLImageElement>(null);
+  useEffect(() => setFailed(false), [src]);
+  // A server-rendered page can fail the image before React is listening.
+  useEffect(() => {
+    const el = img.current;
+    if (el?.complete && el.naturalWidth === 0) setFailed(true);
+  }, [src]);
+  const photo = Boolean(src) && !failed;
+  return (
+    <span
+      ref={ref}
+      {...(label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true })}
+      data-tone={tone}
+      className={cn(
+        'inline-grid shrink-0 place-items-center overflow-hidden rounded-pill font-sans leading-none font-semibold select-none',
+        tone === 'brand' ? 'bg-brand-field text-ink' : 'bg-chrome text-fg',
+        ring && 'shadow-[0_0_0_2px_var(--avatar-ring-gap,var(--bg-page)),0_0_0_4px_var(--text-primary)]',
+        className,
+      )}
+      style={{ width: size, height: size, fontSize: TYPE[size] ?? Math.round(size * 0.32), ...style }}
+      {...rest}
+    >
+      {photo ? (
+        <img ref={img} src={src} alt="" className="size-full object-cover" onError={() => setFailed(true)} />
+      ) : (
+        (initials ?? initialsOf(name))
+      )}
+    </span>
+  );
+});