@cosxai/ui 1.0.0-alpha.5 → 1.0.0-alpha.6

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.0.0-alpha.6 (2026-09-29)
+
+Sign-in patterns (Metaroom sign-in, design.cosx.co), moved here from the
+COSX app so every product signs in with the same pages:
+
+- AuthLayout: the step under the product lockup, header end (theme switch),
+  help line, footer, and the yellow panel — dropped under 900px (container
+  query, so a narrow window or pane works too). AuthPanel for the panel's
+  text, AuthStepHead and AuthIconTile for a step.
+- ThemeSwitch: match system · light · dark, folded to the current choice;
+  hover or focus opens it, a quick click steps, a settled click picks.
+  Follows the ThemeProvider unless given value / onChange.
+- WorkspaceRow and WorkspaceMark: a workspace in a chooser (logo or
+  initial, name, detail, busy).
+- Every string is a prop with an English default.
+
 ## 1.0.0-alpha.5 (2026-09-29)
 
 - Builds under the consuming app's TypeScript settings without
@@ -19,7 +35,7 @@
 
 ## 1.0.0-alpha.2 (2026-09-29)
 
-MetaRoom product patterns (spec P0), checked light / ink × en / zh.
+Metaroom product patterns (spec P0), checked light / ink × en / zh.
 
 - Surfaces: ActionBar (pages register actions; idle / selection / mode,
   Esc steps back; folds by group and past six; responsive, fold handle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "COSX Design System 3.0 \u2014 tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand.css

@@ -1,4 +1,4 @@
-/* @cosxai/ui — workspace brand injection (MetaRoom spec §01).
+/* @cosxai/ui — workspace brand injection (Metaroom spec §01).
  *
  * A customer's colour replaces the COSX yellow through two variables;
  * everything else stays ink, so any colour keeps text readable:

package/src/components/AuthLayout.tsx

@@ -0,0 +1,123 @@
+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>
+        <p className="m-0 text-[34px] leading-[1.22] font-medium tracking-[-.02em] text-pretty">
+          {lead}
+          <span className="box-decoration-clone bg-[linear-gradient(transparent_45%,var(--brand-mark)_45%,var(--brand-mark)_95%,transparent_95%)]">{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/Dialog.tsx

@@ -13,7 +13,7 @@ export const DialogTrigger = DialogPrimitive.Trigger;
 export const DialogClose = DialogPrimitive.Close;
 
 // sm/md/lg are the site's 400 / 520 / 640; xl (a wizard) and split (a
-// document beside its detail) are the MetaRoom spec's 800 and 1120.
+// document beside its detail) are the Metaroom spec's 800 and 1120.
 const WIDTH = {
   sm: 'sm:max-w-[400px]',
   md: 'sm:max-w-[520px]',

package/src/components/PageState.tsx

@@ -62,7 +62,7 @@ export type PageNoticeProps = Omit<ComponentProps<'div'>, 'children'> & {
 
 /**
  * PageNotice — a full-width line above the content: "This document has
- * 1,240 pages. Only the first 500 were processed…", or "MetaRoom has been
+ * 1,240 pages. Only the first 500 were processed…", or "Metaroom has been
  * updated. Refresh to load this page."
  */
 export function PageNotice({ tone = 'info', children, action, className, ...rest }: PageNoticeProps) {

package/src/components/ThemeSwitch.tsx

@@ -0,0 +1,97 @@
+import { Monitor, Moon, Sun, type LucideIcon } from 'lucide-react';
+import { useRef, useState, type ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { useTheme, type ThemeMode } from './ThemeProvider';
+
+export type ThemeSwitchLabels = {
+  /** @default "Theme" */
+  group?: string | undefined;
+  /** @default "Theme: match system" */
+  system?: string | undefined;
+  /** @default "Theme: light" */
+  light?: string | undefined;
+  /** @default "Theme: dark" */
+  ink?: string | undefined;
+};
+
+export type ThemeSwitchProps = Omit<ComponentProps<'div'>, 'onChange' | 'children'> & {
+  /** The choice. Unset: the ThemeProvider's. */
+  value?: ThemeMode | undefined;
+  /** Unset: the ThemeProvider's setter. */
+  onChange?: ((mode: ThemeMode) => void) | undefined;
+  labels?: ThemeSwitchLabels | undefined;
+};
+
+/** A click on an option only picks it once the switch has been open this long. */
+const PICK_AFTER_MS = 800;
+
+/**
+ * ThemeSwitch — match system · light · dark, folded to the current choice.
+ * Hovering or focusing opens all three. A click anywhere steps to the next;
+ * a click on an option picks it only once the switch has been open a moment,
+ * so the first tap on touch (which opens it) steps instead of landing on
+ * whatever slid under the finger.
+ */
+export function ThemeSwitch({ value, onChange, labels, className, ...rest }: ThemeSwitchProps) {
+  const theme = useTheme();
+  const mode = value ?? theme.mode;
+  const setMode = onChange ?? theme.setMode;
+  const [open, setOpen] = useState(false);
+  const openedAt = useRef(0);
+  const show = () => {
+    if (open) return;
+    openedAt.current = Date.now();
+    setOpen(true);
+  };
+  const options: Array<[ThemeMode, LucideIcon, string]> = [
+    ['system', Monitor, labels?.system ?? 'Theme: match system'],
+    ['light', Sun, labels?.light ?? 'Theme: light'],
+    ['ink', Moon, labels?.ink ?? 'Theme: dark'],
+  ];
+  const cycle = () => {
+    const i = options.findIndex(([v]) => v === mode);
+    setMode(options[(i + 1) % options.length]![0]);
+  };
+  return (
+    <div
+      role="radiogroup"
+      aria-label={labels?.group ?? 'Theme'}
+      className={cn('inline-flex cursor-pointer rounded-[10px] bg-sunk p-[3px] transition-[gap] duration-[180ms] ease-standard', open ? 'gap-0.5' : 'gap-0', className)}
+      onClick={cycle}
+      onMouseEnter={show}
+      onMouseLeave={() => setOpen(false)}
+      onFocus={show}
+      onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && setOpen(false)}
+      {...rest}
+    >
+      {options.map(([v, Glyph, label]) => {
+        const on = mode === v;
+        const shown = open || on;
+        return (
+          <button
+            key={v}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            aria-label={label}
+            title={label}
+            tabIndex={shown ? 0 : -1}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (open && Date.now() - openedAt.current > PICK_AFTER_MS) setMode(v);
+              else cycle();
+            }}
+            className={cn(
+              'grid h-7 cursor-pointer place-items-center overflow-hidden rounded-[8px] border-0 p-0 outline-none transition-[width,opacity] duration-[180ms] ease-standard focus-visible:shadow-(--focus-ring)',
+              shown ? 'w-[30px] opacity-100' : 'w-0 opacity-0',
+              on ? 'bg-page text-fg' : 'bg-transparent text-fg-secondary',
+            )}
+          >
+            <Glyph size={15} strokeWidth={1.75} aria-hidden />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/WorkspaceRow.tsx

@@ -0,0 +1,64 @@
+import { ChevronRight } from 'lucide-react';
+import { forwardRef, useState, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Spinner } from './Spinner';
+
+export type WorkspaceMarkProps = {
+  name: string;
+  /** The workspace's logo; its initial on the yellow when unset or it fails to load. */
+  logoUrl?: string | undefined;
+  /** px. @default 36 */
+  size?: number | undefined;
+};
+
+/** WorkspaceMark — a workspace's logo, or its initial on the brand yellow. */
+export function WorkspaceMark({ name, logoUrl, size = 36 }: WorkspaceMarkProps) {
+  const [failed, setFailed] = useState(false);
+  if (logoUrl && !failed) {
+    return <img src={logoUrl} alt="" aria-hidden style={{ width: size, height: size }} className="shrink-0 rounded-[8px] object-cover" onError={() => setFailed(true)} />;
+  }
+  return (
+    <span aria-hidden style={{ width: size, height: size }} className="grid shrink-0 place-items-center rounded-[8px] bg-brand-field text-[13px] font-semibold text-ink">
+      {name.trim().charAt(0).toUpperCase()}
+    </span>
+  );
+}
+
+export type WorkspaceRowProps = Omit<ComponentProps<'button'>, 'children'> & {
+  name: string;
+  /** The second line: the workspace's short name or address. */
+  detail?: ReactNode;
+  logoUrl?: string | undefined;
+  /** Being opened: a spinner in place of the chevron. */
+  busy?: boolean | undefined;
+};
+
+/**
+ * WorkspaceRow — one workspace in a chooser: mark, name, detail, chevron.
+ * The whole row is the button; `busy` shows it opening (disable the others).
+ */
+export const WorkspaceRow = forwardRef<HTMLButtonElement, WorkspaceRowProps>(function WorkspaceRow(
+  { name, detail, logoUrl, busy = false, className, ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-busy={busy || undefined}
+      className={cn(
+        'flex w-full cursor-pointer items-center gap-3 rounded-[12px] border border-rule bg-transparent px-3.5 py-3 text-left text-fg outline-none transition-colors duration-[120ms] hover:bg-hover focus-visible:shadow-(--focus-ring) disabled:cursor-default',
+        className,
+      )}
+      {...rest}
+    >
+      <WorkspaceMark name={name} logoUrl={logoUrl} />
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-[15px] font-medium">{name}</span>
+        {detail && <span className="truncate text-[12px] text-fg-secondary">{detail}</span>}
+      </span>
+      {busy ? <Spinner size={16} /> : <ChevronRight size={16} aria-hidden className="text-fg-secondary" />}
+    </button>
+  );
+});

package/src/index.ts

@@ -71,3 +71,8 @@ export { UploadFolderRow, UploadList, UploadRow, useBeforeUnloadWhile, type Uplo
 export { useSelection, type Selection, type SelectionOptions } from './components/useSelection';
 export { InfiniteLoader, VirtualList, type InfiniteLoaderProps, type VirtualListProps } from './components/VirtualList';
 export { WindowDrop, useWindowDrop, type WindowDropProps } from './components/WindowDrop';
+
+// Stage 3 — sign-in (Metaroom sign-in, design.cosx.co)
+export { AuthIconTile, AuthLayout, AuthPanel, AuthStepHead, type AuthIconTileProps, type AuthLayoutProps, type AuthPanelProps, type AuthStepHeadProps } from './components/AuthLayout';
+export { ThemeSwitch, type ThemeSwitchLabels, type ThemeSwitchProps } from './components/ThemeSwitch';
+export { WorkspaceMark, WorkspaceRow, type WorkspaceMarkProps, type WorkspaceRowProps } from './components/WorkspaceRow';