@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/command/useCommandSource.ts

@@ -1,37 +0,0 @@
-import { useContext, useEffect, useMemo } from "react";
-import { CommandContext } from "./command-context";
-import type { CommandItem } from "./types";
-
-// Register a set of commands. Same lifecycle pattern as
-// useActionBarItems — auto-unregister on unmount / sourceKey change.
-//
-// **Important**: same `ctx`-in-deps caveat as useActionBarItems —
-// depending on the whole ctx object would cause an infinite render
-// loop (register mutates provider state → ctx ref changes → effect
-// re-runs → loop). Destructure register/unregister out so we depend
-// on the stable useCallback'd refs instead.
-
-export function useCommandSource(sourceKey: string, items: CommandItem[]) {
-  const ctx = useContext(CommandContext);
-  if (!ctx) {
-    throw new Error("useCommandSource must be used within <CommandProvider>");
-  }
-  const { register, unregister } = ctx;
-  const memo = useMemo(
-    () => items,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [items.length, items.map((i) => i.key).join("|")],
-  );
-  useEffect(() => {
-    register(sourceKey, memo);
-    return () => unregister(sourceKey);
-  }, [register, unregister, sourceKey, memo]);
-}
-
-export function useCommandPalette() {
-  const ctx = useContext(CommandContext);
-  if (!ctx) {
-    throw new Error("Command palette context not found");
-  }
-  return { open: ctx.open, setOpen: ctx.setOpen };
-}

package/src/dialogs/DialogsProvider.tsx

@@ -1,216 +0,0 @@
-import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
-import { DialogsContext } from "./dialogs-context";
-import { Modal, ModalHeader, ModalBody, ModalFooter } from "./Modal";
-import { Button } from "../primitives/Button";
-import { Input } from "../primitives/Input";
-import { ToastStack, type ToastItem } from "./Toast";
-import type {
-  ConfirmOptions,
-  PromptOptions,
-  ToastOptions,
-  DialogsApi,
-} from "./types";
-
-// Single mount point. Hosts the imperative confirm/prompt/toast
-// API used by useDialogs(). Promise-based so call sites flow
-// naturally:
-//
-//   const ok = await dialogs.confirm({ title: "Delete?", danger: true });
-//   if (!ok) return;
-//   await api.deleteThing();
-//
-// Toast queue handles its own dismiss timer (see Toast.tsx).
-
-interface ConfirmState extends ConfirmOptions {
-  resolve: (value: boolean) => void;
-}
-interface PromptState extends PromptOptions {
-  resolve: (value: string | null) => void;
-}
-
-export function DialogsProvider({ children }: { children: ReactNode }) {
-  const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
-  const [promptState, setPromptState] = useState<PromptState | null>(null);
-  const [toasts, setToasts] = useState<ToastItem[]>([]);
-  const toastIdRef = useRef(0);
-
-  const confirm = useCallback(
-    (opts: ConfirmOptions) =>
-      new Promise<boolean>((resolve) => {
-        setConfirmState({ ...opts, resolve });
-      }),
-    [],
-  );
-
-  const prompt = useCallback(
-    (opts: PromptOptions) =>
-      new Promise<string | null>((resolve) => {
-        setPromptState({ ...opts, resolve });
-      }),
-    [],
-  );
-
-  const toast = useCallback((opts: ToastOptions) => {
-    const id = ++toastIdRef.current;
-    setToasts((t) => [...t, { ...opts, id }]);
-  }, []);
-
-  const dismissToast = useCallback((id: number) => {
-    setToasts((t) => t.filter((x) => x.id !== id));
-  }, []);
-
-  const api = useMemo<DialogsApi>(
-    () => ({ confirm, prompt, toast }),
-    [confirm, prompt, toast],
-  );
-
-  return (
-    <DialogsContext.Provider value={api}>
-      {children}
-      {confirmState && (
-        <ConfirmDialog
-          state={confirmState}
-          onDone={(v) => {
-            confirmState.resolve(v);
-            setConfirmState(null);
-          }}
-        />
-      )}
-      {promptState && (
-        <PromptDialog
-          state={promptState}
-          onDone={(v) => {
-            promptState.resolve(v);
-            setPromptState(null);
-          }}
-        />
-      )}
-      <ToastStack toasts={toasts} onDismiss={dismissToast} />
-    </DialogsContext.Provider>
-  );
-}
-
-// ---------- Confirm dialog ----------
-
-function ConfirmDialog({
-  state,
-  onDone,
-}: {
-  state: ConfirmState;
-  onDone: (value: boolean) => void;
-}) {
-  const [typed, setTyped] = useState("");
-  const needsTyped = !!state.confirmationText;
-  const canConfirm =
-    !needsTyped ||
-    typed.trim().toLowerCase() === state.confirmationText!.trim().toLowerCase();
-  return (
-    <Modal open onClose={() => onDone(false)}>
-      <ModalHeader title={state.title} onClose={() => onDone(false)} />
-      {(state.message || needsTyped) && (
-        <ModalBody>
-          {state.message && (
-            <div
-              style={{
-                font: "400 14px/1.5 var(--ck-font-sans)",
-                color: "var(--ck-text-secondary)",
-              }}
-            >
-              {state.message}
-            </div>
-          )}
-          {needsTyped && (
-            <div style={{ marginTop: 16 }}>
-              <Input
-                value={typed}
-                onChange={(e) => setTyped(e.target.value)}
-                placeholder={state.confirmationText}
-                helper={`Type "${state.confirmationText}" to confirm.`}
-              />
-            </div>
-          )}
-        </ModalBody>
-      )}
-      <ModalFooter>
-        <Button variant="ghost" onClick={() => onDone(false)}>
-          {state.cancelLabel ?? "Cancel"}
-        </Button>
-        <Button
-          variant="primary"
-          onClick={() => onDone(true)}
-          disabled={!canConfirm}
-          style={
-            state.danger
-              ? {
-                  background: "var(--ck-critical)",
-                  color: "var(--ck-text-inverse)",
-                }
-              : undefined
-          }
-        >
-          {state.confirmLabel ?? "Confirm"}
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
-
-// ---------- Prompt dialog ----------
-
-function PromptDialog({
-  state,
-  onDone,
-}: {
-  state: PromptState;
-  onDone: (value: string | null) => void;
-}) {
-  const [value, setValue] = useState(state.defaultValue ?? "");
-  const [error, setError] = useState<string | null>(null);
-  const submit = () => {
-    const err = state.validate?.(value);
-    if (err) {
-      setError(err);
-      return;
-    }
-    onDone(value);
-  };
-  return (
-    <Modal open onClose={() => onDone(null)}>
-      <ModalHeader title={state.title} onClose={() => onDone(null)} />
-      <ModalBody>
-        {state.message && (
-          <div
-            style={{
-              font: "400 14px/1.5 var(--ck-font-sans)",
-              color: "var(--ck-text-secondary)",
-              marginBottom: 12,
-            }}
-          >
-            {state.message}
-          </div>
-        )}
-        <Input
-          value={value}
-          onChange={(e) => {
-            setValue(e.target.value);
-            if (error) setError(null);
-          }}
-          placeholder={state.placeholder}
-          error={error}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") submit();
-          }}
-          autoFocus
-        />
-      </ModalBody>
-      <ModalFooter>
-        <Button variant="ghost" onClick={() => onDone(null)}>
-          {state.cancelLabel ?? "Cancel"}
-        </Button>
-        <Button variant="primary" onClick={submit}>
-          {state.confirmLabel ?? "OK"}
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}

package/src/dialogs/Modal.tsx

@@ -1,260 +0,0 @@
-import { useEffect, type ReactNode, type CSSProperties } from "react";
-import { createPortal } from "react-dom";
-
-import { useViewport } from "../hooks/useViewport";
-
-// Modal base. Portals to document.body so it escapes ancestor
-// stacking contexts. Closes on Esc + backdrop click (both opt-out).
-// Caller owns open state and slots in the header/body/footer.
-//
-// Provides three sub-components for compositional layout:
-//   - <Modal>          — the host (backdrop + card + close binding)
-//   - <ModalHeader>    — sticky-ish top with title + optional close X
-//   - <ModalBody>      — scrollable middle region
-//   - <ModalFooter>    — sticky-ish bottom (buttons)
-
-export interface ModalProps {
-  open: boolean;
-  onClose: () => void;
-  // Disables close on backdrop click + Escape. Useful for blocking
-  // dialogs that must be resolved via an explicit button.
-  dismissable?: boolean;
-  // Width preset OR raw px. Default "md" (440 px).
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | number;
-  // Inline style override for the card.
-  cardStyle?: CSSProperties;
-  children: ReactNode;
-  // Optional aria-labelled-by for screen readers (point at the
-  // ModalHeader title's id).
-  labelledBy?: string;
-  // How the modal presents on PHONE viewports (no effect elsewhere):
-  //   "center" (default) — the desktop card, scaled to fit
-  //   "page"             — full-screen, slides in from the right like
-  //                        a pushed native page. For content dialogs
-  //                        the user enters to work in.
-  //   "sheet"            — bottom sheet rising from the lower edge.
-  //                        For light pickers / short forms.
-  // Confirm-style dialogs should stay "center" — native alerts are
-  // centered cards too.
-  phonePresentation?: "center" | "page" | "sheet";
-}
-
-const WIDTHS = { sm: 340, md: 440, lg: 560, xl: 720, "2xl": 880, "3xl": 1024, "4xl": 1200, "5xl": 1440 };
-
-export function Modal({
-  open,
-  onClose,
-  dismissable = true,
-  maxWidth = "md",
-  cardStyle,
-  children,
-  labelledBy,
-  phonePresentation = "center",
-}: ModalProps) {
-  const vp = useViewport();
-  const mode = vp.isPhone ? phonePresentation : "center";
-  useEffect(() => {
-    if (!open || !dismissable) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, dismissable, onClose]);
-
-  // Lock body scroll while open so the backdrop doesn't reveal
-  // a scrolling page underneath.
-  useEffect(() => {
-    if (!open) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [open]);
-
-  if (!open) return null;
-  const width = typeof maxWidth === "number" ? maxWidth : WIDTHS[maxWidth];
-  return createPortal(
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={labelledBy}
-      style={{
-        position: "fixed",
-        inset: 0,
-        background: "rgba(10, 14, 26, 0.6)",
-        // Pull the page surface noticeably out of focus behind the
-        // modal — agent-dataroom's `backdrop-blur-sm` (4px) reads as
-        // a hint; 8px reads as a clear "the world stopped". The card
-        // sits above the blurred layer, so the content stays crisp.
-        backdropFilter: "blur(8px)",
-        WebkitBackdropFilter: "blur(8px)",
-        display: "flex",
-        alignItems: mode === "sheet" ? "flex-end" : "center",
-        justifyContent: "center",
-        padding: mode === "center" ? 16 : 0,
-        zIndex: 100,
-      }}
-      onMouseDown={(e) => {
-        // Backdrop click closes; clicks inside the card stopPropagation.
-        if (dismissable && e.target === e.currentTarget) onClose();
-      }}
-      className="ck-anim-fade"
-    >
-      <div
-        style={{
-          width: "100%",
-          maxWidth: mode === "center" ? width : "100%",
-          maxHeight:
-            mode === "page" ? "100dvh" : mode === "sheet" ? "92dvh" : "calc(100vh - 32px)",
-          ...(mode === "page" ? { height: "100dvh" } : {}),
-          background: "var(--ck-bg-surface)",
-          border: "1px solid var(--ck-border-subtle)",
-          // Modal cards lift on the `-lg` radius rather than the
-          // page's default `-md` so the corners read as softer than
-          // the cards underneath them — supports the "this took
-          // over" cue alongside the deeper overlay shadow.
-          borderRadius:
-            mode === "page"
-              ? 0
-              : mode === "sheet"
-                ? "var(--ck-radius-lg) var(--ck-radius-lg) 0 0"
-                : "var(--ck-radius-lg)",
-          ...(mode === "page" ? { border: "none" } : {}),
-          // Overlay shadow > shadow-3. shadow-3 was tuned for cards
-          // sitting on a page; a modal needs to read as physically
-          // lifted off the page, not as another tier of card.
-          boxShadow: "var(--ck-shadow-overlay)",
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-          fontFamily: "var(--ck-font-sans)",
-          color: "var(--ck-text-primary)",
-          ...cardStyle,
-        }}
-        className={
-          mode === "page"
-            ? "ck-anim-page-push"
-            : mode === "sheet"
-              ? "ck-anim-sheet-up"
-              : "ck-anim-popover"
-        }
-      >
-        {children}
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
-// ---------- Slot components ----------
-
-export interface ModalHeaderProps {
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  onClose?: () => void;
-  titleId?: string;
-}
-
-export function ModalHeader({ title, subtitle, onClose, titleId }: ModalHeaderProps) {
-  if (!title && !subtitle && !onClose) return null;
-  return (
-    <header
-      style={{
-        // Editorial-modal breathing room: matches the 24-px gutter
-        // ModalBody / ModalFooter ship so a Modal renders as one
-        // coherent column of 24-px insets rather than three slots
-        // with different paddings.
-        padding: "20px 24px",
-        borderBottom: "1px solid var(--ck-border-subtle)",
-        display: "flex",
-        alignItems: "flex-start",
-        gap: 12,
-      }}
-    >
-      <div style={{ flex: 1, minWidth: 0 }}>
-        {title && (
-          <h2
-            id={titleId}
-            style={{
-              font: "500 16px/1.3 var(--ck-font-sans)",
-              margin: 0,
-              color: "var(--ck-text-primary)",
-            }}
-          >
-            {title}
-          </h2>
-        )}
-        {subtitle && (
-          <p
-            style={{
-              font: "400 12px/1.4 var(--ck-font-sans)",
-              color: "var(--ck-text-tertiary)",
-              margin: "4px 0 0",
-            }}
-          >
-            {subtitle}
-          </p>
-        )}
-      </div>
-      {onClose && (
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close"
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              "var(--ck-bg-muted)";
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              "transparent";
-          }}
-          style={{
-            border: "none",
-            background: "transparent",
-            color: "var(--ck-text-tertiary)",
-            cursor: "pointer",
-            fontSize: 18,
-            lineHeight: 1,
-            padding: 4,
-            borderRadius: "var(--ck-radius-sm, 4px)",
-            transition:
-              "background var(--ck-dur-fast) var(--ck-ease)",
-          }}
-        >
-          ×
-        </button>
-      )}
-    </header>
-  );
-}
-
-export function ModalBody({ children }: { children: ReactNode }) {
-  return (
-    <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: "20px 24px 24px" }}>
-      {children}
-    </div>
-  );
-}
-
-export function ModalFooter({ children }: { children: ReactNode }) {
-  return (
-    <footer
-      style={{
-        padding: "16px 24px",
-        borderTop: "1px solid var(--ck-border-subtle)",
-        display: "flex",
-        justifyContent: "flex-end",
-        gap: 8,
-        background: "var(--ck-bg-surface-2)",
-      }}
-    >
-      {children}
-    </footer>
-  );
-}

package/src/dialogs/Toast.tsx

@@ -1,85 +0,0 @@
-import { useEffect } from "react";
-import { createPortal } from "react-dom";
-import type { ToastOptions } from "./types";
-
-interface ToastItem extends ToastOptions {
-  id: number;
-}
-
-// Toast stack — fixed bottom-right corner. Each toast auto-dismisses
-// after durationMs (default 4000). Stack grows upward.
-
-const KIND_BG = {
-  info: "var(--ck-bg-surface)",
-  success: "var(--ck-success-muted)",
-  error: "var(--ck-critical-muted)",
-};
-const KIND_BORDER = {
-  info: "var(--ck-border-strong)",
-  success: "var(--ck-success)",
-  error: "var(--ck-critical)",
-};
-const KIND_TEXT = {
-  info: "var(--ck-text-primary)",
-  success: "var(--ck-success)",
-  error: "var(--ck-critical)",
-};
-
-export function ToastStack({
-  toasts,
-  onDismiss,
-}: {
-  toasts: ToastItem[];
-  onDismiss: (id: number) => void;
-}) {
-  return createPortal(
-    <div
-      style={{
-        position: "fixed",
-        bottom: 16,
-        right: 16,
-        zIndex: 110,
-        display: "flex",
-        flexDirection: "column",
-        gap: 8,
-        maxWidth: 360,
-        pointerEvents: "none",
-      }}
-    >
-      {toasts.map((t) => (
-        <ToastRow key={t.id} item={t} onDismiss={() => onDismiss(t.id)} />
-      ))}
-    </div>,
-    document.body,
-  );
-}
-
-function ToastRow({ item, onDismiss }: { item: ToastItem; onDismiss: () => void }) {
-  const kind = item.kind ?? "info";
-  const duration = item.durationMs ?? 4000;
-  useEffect(() => {
-    const timer = setTimeout(onDismiss, duration);
-    return () => clearTimeout(timer);
-  }, [duration, onDismiss]);
-  return (
-    <div
-      className="ck-anim-slide-left"
-      style={{
-        pointerEvents: "auto",
-        padding: "12px 14px",
-        background: KIND_BG[kind],
-        border: `1px solid ${KIND_BORDER[kind]}`,
-        borderRadius: "var(--ck-radius-md)",
-        boxShadow: "var(--ck-shadow-2)",
-        color: KIND_TEXT[kind],
-        font: "400 13px/1.4 var(--ck-font-sans)",
-        cursor: "pointer",
-      }}
-      onClick={onDismiss}
-    >
-      {item.message}
-    </div>
-  );
-}
-
-export type { ToastItem };

package/src/dialogs/dialogs-context.ts

@@ -1,6 +0,0 @@
-import { createContext } from "react";
-import type { DialogsApi } from "./types";
-
-// React Fast Refresh requires component modules to export only
-// components — same reason ThemeContext lives in its own file.
-export const DialogsContext = createContext<DialogsApi | null>(null);

package/src/dialogs/index.ts

@@ -1,10 +0,0 @@
-export { Modal, ModalHeader, ModalBody, ModalFooter } from "./Modal";
-export type { ModalProps, ModalHeaderProps } from "./Modal";
-export { DialogsProvider } from "./DialogsProvider";
-export { useDialogs } from "./useDialogs";
-export type {
-  ConfirmOptions,
-  PromptOptions,
-  ToastOptions,
-  DialogsApi,
-} from "./types";

package/src/dialogs/types.ts

@@ -1,37 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface ConfirmOptions {
-  title: string;
-  message?: ReactNode;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  // Renders the confirm button as the critical tone.
-  danger?: boolean;
-  // When set, the user must type this string into a confirmation
-  // field before confirm is enabled. Case-insensitive.
-  confirmationText?: string;
-}
-
-export interface PromptOptions {
-  title: string;
-  message?: ReactNode;
-  defaultValue?: string;
-  placeholder?: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  // Returning a string treats it as a validation error message;
-  // returning null/undefined accepts the input.
-  validate?: (value: string) => string | null | undefined;
-}
-
-export interface ToastOptions {
-  kind?: "info" | "success" | "error";
-  message: ReactNode;
-  durationMs?: number;
-}
-
-export interface DialogsApi {
-  confirm: (opts: ConfirmOptions) => Promise<boolean>;
-  prompt: (opts: PromptOptions) => Promise<string | null>;
-  toast: (opts: ToastOptions) => void;
-}

package/src/dialogs/useDialogs.ts

@@ -1,8 +0,0 @@
-import { useContext } from "react";
-import { DialogsContext } from "./dialogs-context";
-
-export function useDialogs() {
-  const ctx = useContext(DialogsContext);
-  if (!ctx) throw new Error("useDialogs must be used within <DialogsProvider>");
-  return ctx;
-}