@cosxai/ui 0.25.0 → 1.0.0-alpha.0

package/src/ambient/SuperbarStrip.tsx

@@ -1,36 +0,0 @@
-import type { CSSProperties } from "react";
-
-// Thin gradient strip — the Superbar pattern reusable as a
-// horizontal divider, a tab underline, or a progress bar fill.
-// 1-2 px tall by default; override via `thickness`.
-
-export interface SuperbarStripProps {
-  // px height. Default 1 (hairline divider).
-  thickness?: number;
-  // CSS width — defaults to 100%.
-  width?: string | number;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function SuperbarStrip({
-  thickness = 1,
-  width = "100%",
-  className,
-  style,
-}: SuperbarStripProps) {
-  return (
-    <div
-      aria-hidden
-      className={className}
-      style={{
-        width,
-        height: thickness,
-        background: "var(--ck-superbar)",
-        borderRadius: thickness >= 2 ? thickness / 2 : 0,
-        opacity: 0.85,
-        ...style,
-      }}
-    />
-  );
-}

package/src/ambient/index.ts

@@ -1,6 +0,0 @@
-export { CommandInput } from "./CommandInput";
-export type { CommandInputProps } from "./CommandInput";
-export { SuperbarStrip } from "./SuperbarStrip";
-export type { SuperbarStripProps } from "./SuperbarStrip";
-export { AmbientBackdrop } from "./AmbientBackdrop";
-export type { AmbientBackdropProps } from "./AmbientBackdrop";

package/src/bento/BentoCell.tsx

@@ -1,66 +0,0 @@
-import type { CSSProperties, MouseEventHandler, ReactNode } from "react";
-
-// One cell inside a <BentoGrid>. Spans configurable column + row
-// counts; surface styling matches the chrome (22px radius +
-// soft multi-layer shadow under bento). `interactive` enables the
-// hover-lift signature animation defined in chrome-bento.css.
-
-export interface BentoCellProps {
-  children?: ReactNode;
-  colSpan?: number;
-  rowSpan?: number;
-  // Override the cell's background. Useful for media + gradient
-  // cells. Defaults to var(--ck-bg-surface).
-  background?: string;
-  // Override text color (for high-contrast gradient cells).
-  color?: string;
-  // Padding inside the cell. Defaults to 20px.
-  padding?: number | string;
-  // Apply the hover-lift effect. Defaults to false.
-  interactive?: boolean;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function BentoCell({
-  children,
-  colSpan = 1,
-  rowSpan = 1,
-  background,
-  color,
-  padding = 20,
-  interactive = false,
-  onClick,
-  className,
-  style,
-}: BentoCellProps) {
-  return (
-    <div
-      data-ck-bento-cell=""
-      data-interactive={interactive ? "true" : undefined}
-      onClick={onClick}
-      className={className}
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      style={{
-        gridColumn: `span ${colSpan} / span ${colSpan}`,
-        gridRow: `span ${rowSpan} / span ${rowSpan}`,
-        background: background ?? "var(--ck-bg-surface)",
-        color,
-        border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "var(--ck-radius-lg, 22px)",
-        boxShadow: "var(--ck-shadow-2)",
-        padding,
-        overflow: "hidden",
-        position: "relative",
-        cursor: onClick ? "pointer" : undefined,
-        display: "flex",
-        flexDirection: "column",
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}

package/src/bento/BentoGrid.tsx

@@ -1,42 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// 12-column CSS grid wrapper. Cells set their own colSpan/rowSpan
-// via <BentoCell>. The grid clamps span values to the column count
-// so a 4-wide cell inside an 8-col grid won't overflow.
-
-export interface BentoGridProps {
-  children?: ReactNode;
-  // Column count. Defaults to 12. Pass 6 / 8 for tighter sections.
-  cols?: number;
-  // Gap between cells. Defaults to 16px.
-  gap?: number;
-  // Minimum row height. Cells span discrete rows of this height.
-  rowMinHeight?: number;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function BentoGrid({
-  children,
-  cols = 12,
-  gap = 16,
-  rowMinHeight = 120,
-  className,
-  style,
-}: BentoGridProps) {
-  return (
-    <div
-      data-ck-bento-grid=""
-      className={className}
-      style={{
-        display: "grid",
-        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-        gridAutoRows: `minmax(${rowMinHeight}px, auto)`,
-        gap,
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}

package/src/bento/index.ts

@@ -1,2 +0,0 @@
-export * from "./BentoGrid";
-export * from "./BentoCell";

package/src/command/CommandPalette.tsx

@@ -1,329 +0,0 @@
-import {
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-} from "react";
-import { createPortal } from "react-dom";
-import { CommandContext } from "./command-context";
-import { rankItems } from "./rank";
-import { Kbd } from "../primitives/Kbd";
-import type { CommandItem } from "./types";
-
-// The palette UI. Mounts inside <CommandProvider>; reads items from
-// the registry, filters, groups, navigates. Arrow keys + Enter +
-// Esc bound while open. Cmd+K toggle lives in the provider.
-
-export interface CommandPaletteProps {
-  // Order in which groups appear. Items in groups not listed
-  // here come last in registration order.
-  groupOrder?: string[];
-  placeholder?: string;
-  // Fires whenever the query changes — on every keystroke and on the
-  // reset-to-empty when the palette opens. Lets a consumer drive an
-  // ASYNC command source (debounce → fetch → register the results as
-  // items via useCommandSource) that the built-in client-side filter
-  // can't provide on its own. Optional + backward compatible: omit it
-  // and the palette behaves exactly as before (static items only).
-  onQueryChange?: ((query: string) => void) | undefined;
-}
-
-export function CommandPalette({
-  groupOrder = [],
-  placeholder = "Type a command or search…",
-  onQueryChange,
-}: CommandPaletteProps) {
-  const ctx = useContext(CommandContext);
-  if (!ctx) throw new Error("<CommandPalette> must be inside <CommandProvider>");
-  const { open, setOpen, items } = ctx;
-  const [q, setQ] = useState("");
-  const [selectedIdx, setSelectedIdx] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  // Latest onQueryChange held in a ref so the open-reset effect can
-  // notify it WITHOUT taking it as a dep — an inline callback changes
-  // identity every render, which would otherwise re-run the effect and
-  // clear the query on every keystroke.
-  const onQueryChangeRef = useRef(onQueryChange);
-  onQueryChangeRef.current = onQueryChange;
-
-  // Reset query + focus on every open.
-  useEffect(() => {
-    if (open) {
-      setQ("");
-      setSelectedIdx(0);
-      // Tell the consumer the query cleared, so an async source drops
-      // its stale results when the palette reopens.
-      onQueryChangeRef.current?.("");
-      // RAF so the modal element exists before focus.
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [open]);
-
-  // Filter + flat-group ordering.
-  const filtered = useMemo(() => rankItems(items, q), [items, q]);
-  const grouped = useMemo(() => {
-    const byGroup: Record<string, CommandItem[]> = {};
-    for (const it of filtered) {
-      (byGroup[it.group] ??= []).push(it);
-    }
-    const seen = new Set<string>();
-    const ordered: { group: string; items: CommandItem[] }[] = [];
-    for (const g of groupOrder) {
-      if (byGroup[g]) {
-        ordered.push({ group: g, items: byGroup[g] });
-        seen.add(g);
-      }
-    }
-    for (const g of Object.keys(byGroup)) {
-      if (seen.has(g)) continue;
-      ordered.push({ group: g, items: byGroup[g]! });
-    }
-    return ordered;
-  }, [filtered, groupOrder]);
-
-  // Flat array for keyboard navigation (sequential across groups).
-  const flat = useMemo(() => grouped.flatMap((g) => g.items), [grouped]);
-
-  // Effective selection: `selectedIdx` is the raw state the keyboard/mouse
-  // set, but disabled rows and a shrunk list can leave it pointing at a
-  // non-interactive or out-of-range item. Derive the index actually shown
-  // as selected — the first enabled row when the raw one isn't usable — so
-  // a disabled item (e.g. a "coming soon" teaser) is never highlighted and
-  // the default lands on the first real result.
-  const selIdx = useMemo(() => {
-    if (flat.length === 0) return 0;
-    if (selectedIdx < flat.length && !flat[selectedIdx]?.disabled) return selectedIdx;
-    return firstEnabled(flat);
-  }, [flat, selectedIdx]);
-
-  const close = () => setOpen(false);
-
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        close();
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setSelectedIdx(stepEnabled(flat, selIdx, 1));
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setSelectedIdx(stepEnabled(flat, selIdx, -1));
-        return;
-      }
-      if (e.key === "Enter") {
-        e.preventDefault();
-        const pick = flat[selIdx];
-        if (pick && !pick.disabled) pick.run({ close });
-        return;
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-    // close + flat + selIdx are stable enough; intentionally omit close
-    // from deps so we don't re-bind every render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, flat, selIdx]);
-
-  // Scroll selected row into view.
-  useEffect(() => {
-    if (!open) return;
-    const node = listRef.current?.querySelector(`[data-row-idx="${selIdx}"]`);
-    (node as HTMLElement | null)?.scrollIntoView({ block: "nearest" });
-  }, [open, selIdx]);
-
-  if (!open) return null;
-
-  return createPortal(
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-label="Command palette"
-      style={{
-        position: "fixed",
-        inset: 0,
-        background: "rgba(10, 14, 26, 0.5)",
-        backdropFilter: "blur(2px)",
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        padding: "10vh 16px 16px",
-        zIndex: 110,
-      }}
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) close();
-      }}
-      className="ck-anim-fade"
-    >
-      <div
-        className="ck-anim-popover"
-        style={
-          {
-            width: "100%",
-            maxWidth: 560,
-            background: "var(--ck-bg-surface)",
-            border: "1px solid var(--ck-border-subtle)",
-            borderRadius: "var(--ck-radius-md)",
-            boxShadow: "var(--ck-shadow-3)",
-            overflow: "hidden",
-            display: "flex",
-            flexDirection: "column",
-            maxHeight: "70vh",
-            fontFamily: "var(--ck-font-sans)",
-            color: "var(--ck-text-primary)",
-          } as CSSProperties
-        }
-      >
-        <input
-          ref={inputRef}
-          value={q}
-          onChange={(e) => {
-            setQ(e.target.value);
-            setSelectedIdx(0);
-            onQueryChange?.(e.target.value);
-          }}
-          placeholder={placeholder}
-          style={{
-            height: 44,
-            padding: "0 16px",
-            border: "none",
-            borderBottom: "1px solid var(--ck-border-subtle)",
-            background: "transparent",
-            color: "var(--ck-text-primary)",
-            font: "400 14px/1 var(--ck-font-sans)",
-            outline: "none",
-          }}
-        />
-        <div ref={listRef} style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 4 }}>
-          {flat.length === 0 ? (
-            <div
-              style={{
-                padding: "24px 16px",
-                color: "var(--ck-text-tertiary)",
-                fontSize: 13,
-                textAlign: "center",
-              }}
-            >
-              No matches.
-            </div>
-          ) : (
-            grouped.map((g) => (
-              <div key={g.group} style={{ marginBottom: 6 }}>
-                <div
-                  className="ck-eyebrow"
-                  style={{ padding: "8px 12px 4px", color: "var(--ck-text-tertiary)" }}
-                >
-                  {g.group}
-                </div>
-                {g.items.map((it) => {
-                  const idx = flat.indexOf(it);
-                  const disabled = !!it.disabled;
-                  const selected = idx === selIdx && !disabled;
-                  return (
-                    <div
-                      key={it.key}
-                      data-row-idx={idx}
-                      aria-disabled={disabled || undefined}
-                      onMouseEnter={disabled ? undefined : () => setSelectedIdx(idx)}
-                      onClick={disabled ? undefined : () => it.run({ close })}
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 10,
-                        padding: "8px 12px",
-                        borderRadius: "var(--ck-radius-sm)",
-                        background: selected ? "var(--ck-accent-muted)" : "transparent",
-                        color: disabled
-                          ? "var(--ck-text-tertiary)"
-                          : selected
-                            ? "var(--ck-accent)"
-                            : "var(--ck-text-primary)",
-                        opacity: disabled ? 0.6 : 1,
-                        cursor: disabled ? "default" : "pointer",
-                        font: "400 13px/1.3 var(--ck-font-sans)",
-                      }}
-                    >
-                      {it.icon && (
-                        <span style={{ display: "inline-flex", color: "var(--ck-text-tertiary)" }}>
-                          {it.icon}
-                        </span>
-                      )}
-                      <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                        {it.label}
-                        {it.sublabel && (
-                          <span style={{ color: "var(--ck-text-tertiary)", marginLeft: 6, fontSize: 12 }}>
-                            {it.sublabel}
-                          </span>
-                        )}
-                      </span>
-                      {it.hint && (
-                        <span style={{ color: "var(--ck-text-tertiary)", fontSize: 12 }}>
-                          {it.hint}
-                        </span>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            ))
-          )}
-        </div>
-        <div
-          style={{
-            padding: "8px 12px",
-            borderTop: "1px solid var(--ck-border-subtle)",
-            display: "flex",
-            alignItems: "center",
-            gap: 12,
-            color: "var(--ck-text-tertiary)",
-            font: "400 11px/1 var(--ck-font-mono)",
-            background: "var(--ck-bg-surface-2)",
-          }}
-        >
-          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
-            <Kbd>↑</Kbd>
-            <Kbd>↓</Kbd>
-            navigate
-          </span>
-          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
-            <Kbd>Enter</Kbd>
-            run
-          </span>
-          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
-            <Kbd>Esc</Kbd>
-            close
-          </span>
-        </div>
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
-// First index whose item isn't disabled, or 0 if every item is (or the
-// list is empty) — the palette has to point somewhere.
-function firstEnabled(list: CommandItem[]): number {
-  const i = list.findIndex((it) => !it.disabled);
-  return i === -1 ? 0 : i;
-}
-
-// Step from `from` in `dir` (+1 down / -1 up), wrapping, skipping disabled
-// rows. Returns `from` when there's no other enabled row to land on.
-function stepEnabled(list: CommandItem[], from: number, dir: 1 | -1): number {
-  const n = list.length;
-  if (n === 0) return 0;
-  let i = from;
-  for (let step = 0; step < n; step++) {
-    i = (i + dir + n) % n;
-    if (!list[i]?.disabled) return i;
-  }
-  return from;
-}

package/src/command/CommandProvider.tsx

@@ -1,57 +0,0 @@
-import { useCallback, useMemo, useState, type ReactNode } from "react";
-import { CommandContext } from "./command-context";
-import { useKeyboardHotkey } from "../hooks/useKeyboardHotkey";
-import type { CommandItem } from "./types";
-
-// Hosts the command-source registry + the palette's open state.
-// Binds Cmd+K globally so any consumer page can trigger the palette
-// without wiring its own listener.
-
-export function CommandProvider({
-  children,
-  hotkey = "k",
-}: {
-  children: ReactNode;
-  // Letter for the Mod+_ shortcut. Default "k".
-  hotkey?: string;
-}) {
-  const [sources, setSources] = useState<Record<string, CommandItem[]>>({});
-  const [open, setOpen] = useState(false);
-
-  const register = useCallback((sourceKey: string, items: CommandItem[]) => {
-    setSources((prev) => {
-      const cur = prev[sourceKey];
-      if (cur && cur.length === items.length && cur.every((it, i) => it === items[i])) {
-        return prev;
-      }
-      return { ...prev, [sourceKey]: items };
-    });
-  }, []);
-
-  const unregister = useCallback((sourceKey: string) => {
-    setSources((prev) => {
-      if (!(sourceKey in prev)) return prev;
-      const next = { ...prev };
-      delete next[sourceKey];
-      return next;
-    });
-  }, []);
-
-  const items = useMemo(() => Object.values(sources).flat(), [sources]);
-
-  useKeyboardHotkey(
-    hotkey,
-    (e) => {
-      e.preventDefault();
-      setOpen((v) => !v);
-    },
-    { mod: true, skipWhenModalOpen: false },
-  );
-
-  const value = useMemo(
-    () => ({ register, unregister, items, open, setOpen }),
-    [register, unregister, items, open],
-  );
-
-  return <CommandContext.Provider value={value}>{children}</CommandContext.Provider>;
-}

package/src/command/command-context.ts

@@ -1,12 +0,0 @@
-import { createContext } from "react";
-import type { CommandItem } from "./types";
-
-export interface CommandContextValue {
-  register: (sourceKey: string, items: CommandItem[]) => void;
-  unregister: (sourceKey: string) => void;
-  items: CommandItem[];
-  open: boolean;
-  setOpen: (next: boolean) => void;
-}
-
-export const CommandContext = createContext<CommandContextValue | null>(null);

package/src/command/index.ts

@@ -1,6 +0,0 @@
-export { CommandProvider } from "./CommandProvider";
-export { CommandPalette } from "./CommandPalette";
-export type { CommandPaletteProps } from "./CommandPalette";
-export { useCommandSource, useCommandPalette } from "./useCommandSource";
-export { rankItems } from "./rank";
-export type { CommandItem } from "./types";

package/src/command/rank.ts

@@ -1,50 +0,0 @@
-import type { CommandItem } from "./types";
-
-// Tiny fuzzy ranker. Three signals:
-//   - label substring match  → score 100
-//   - label prefix match     → score +20
-//   - keyword substring match → score 60 (lower than label)
-// Anything that doesn't match returns null.
-//
-// Not as fancy as fzf — good enough for command palettes with
-// dozens to low hundreds of items. Swap in a fancier library if
-// you outgrow it; the call site (`useFilteredCommands`) is small.
-
-interface Ranked {
-  item: CommandItem;
-  score: number;
-}
-
-function scoreOne(item: CommandItem, q: string): number | null {
-  // Secret items exist only for their exact phrase — never in empty
-  // listings, never via partial/label matches.
-  if (item.secret) {
-    return q.trim().toLowerCase() === item.secret.toLowerCase() ? 200 : null;
-  }
-  if (!q) return 1; // empty query — everyone passes, sorted by registration order
-  const ql = q.toLowerCase();
-  const lab = item.label.toLowerCase();
-  let s = 0;
-  if (lab.includes(ql)) {
-    s = 100;
-    if (lab.startsWith(ql)) s += 20;
-  } else if (item.keywords?.some((k) => k.toLowerCase().includes(ql))) {
-    s = 60;
-  } else if (item.sublabel?.toLowerCase().includes(ql)) {
-    s = 40;
-  } else {
-    return null;
-  }
-  return s;
-}
-
-export function rankItems(items: CommandItem[], query: string): CommandItem[] {
-  const ranked: Ranked[] = [];
-  for (const item of items) {
-    const sc = scoreOne(item, query);
-    if (sc !== null) ranked.push({ item, score: sc });
-  }
-  // Stable sort by score descending.
-  ranked.sort((a, b) => b.score - a.score);
-  return ranked.map((r) => r.item);
-}

package/src/command/types.ts

@@ -1,37 +0,0 @@
-import type { ReactNode } from "react";
-
-// Single executable command. Sources register sets of these; the
-// palette flattens, filters by the user's query, groups by `group`,
-// and runs `run()` when the user picks.
-
-export interface CommandItem {
-  key: string;
-  // Visual category — items sharing a group render under a single
-  // labelled header in the palette. Use anything; the kit pins
-  // ordering via the palette's `groupOrder` prop.
-  group: string;
-  label: string;
-  // Dimmed secondary text — usually a path or short context.
-  sublabel?: string;
-  // Right-aligned hint (kbd shortcut, "→", etc.).
-  hint?: ReactNode;
-  icon?: ReactNode;
-  // Extra strings to score against (filenames, aliases). Lower
-  // weight than label so they don't drown the primary match.
-  keywords?: string[];
-  // Called when the user picks this command. `close()` shuts the
-  // palette — useful when the command opens a sub-flow that wants
-  // to keep the palette open.
-  run: (api: { close: () => void }) => void;
-  // Cheat-code gating: when set, the item is INVISIBLE to every
-  // query except an exact (case-insensitive, trimmed) match of this
-  // phrase — it never appears in empty-query listings or partial
-  // matches. Use for hidden debug/test menus; pair with a "Debug"
-  // group so the reveal is self-describing.
-  secret?: string;
-  // Non-interactive placeholder: the row still renders (dimmed) but is
-  // skipped by keyboard nav, never auto-selected, and `run` never fires
-  // on it. Use for "coming soon" teasers. Distinct from `secret`, which
-  // HIDES the row; `disabled` SHOWS it as unavailable.
-  disabled?: boolean | undefined;
-}