@cueloop/client 0.1.0-alpha.0 → 0.1.0-alpha.100

package/src/ui/components/primitives/Button.tsx

@@ -0,0 +1,57 @@
+/**
+ * Word-button: a pressable label. `onPress` unifies mouse and (future)
+ * keyboard activation; `isDisabled` swallows presses without changing the
+ * rendered label, so read-only affordances keep their place in the layout.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../../../appearance/theme";
+import { useComponentTheme } from "../../../appearance/components/theme-context";
+
+export interface ButtonProps {
+  onPress: () => void;
+  isDisabled?: boolean;
+  variant?: "solid" | "plain" | "accent-text";
+  foreground?: string;
+  marginRight?: number;
+  theme?: Theme;
+  children: string;
+}
+
+export function Button({
+  onPress,
+  isDisabled = false,
+  variant = "plain",
+  foreground: foregroundOverride,
+  marginRight,
+  theme,
+  children,
+}: ButtonProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  // a disabled solid button reads as muted, so it never looks like a live call to action
+  const backgroundColor =
+    variant === "solid" ? (isDisabled ? tokens.border : tokens.accent) : undefined;
+  const foreground =
+    foregroundOverride ??
+    (variant === "solid"
+      ? isDisabled
+        ? tokens.textMuted
+        : tokens.accentInk
+      : variant === "accent-text"
+        ? tokens.accent
+        : tokens.textDim);
+
+  return (
+    <box
+      style={{ backgroundColor, marginRight }}
+      onMouseUp={(event: MouseEvent) => {
+        // Consume the press so it never bubbles to an ancestor's onMouseUp (e.g. a card).
+        event.stopPropagation();
+        if (!isDisabled) onPress();
+      }}
+    >
+      <text fg={foreground}>{children}</text>
+    </box>
+  );
+}

package/src/ui/components/primitives/Card.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { Card } from "./Card";
+
+export const meta: StoryMeta = { title: "Primitives/Card" };
+
+export const Titled: Story = {
+  render: () => (
+    <Card title=" a titled card " contentRows={2}>
+      <text>first content row</text>
+      <text>second content row</text>
+    </Card>
+  ),
+  expectedColors: [DARK.border, DARK.elevated],
+};
+
+export const AccentBorder: Story = {
+  render: () => (
+    <Card title=" accented " contentRows={1} borderColor={DARK.accent}>
+      <text>content</text>
+    </Card>
+  ),
+  expectedColors: [DARK.accent],
+};

package/src/ui/components/primitives/Card.tsx

@@ -0,0 +1,62 @@
+/**
+ * Bordered box with an optional title. The card owns the
+ * height-derivation rule: its height is always the declared content row
+ * count plus the two border rows, so layout math and the mounted box can
+ * never drift apart - border-collapse bugs die here.
+ */
+
+import React from "react";
+import type { Theme } from "../../../appearance/theme";
+import { useComponentTheme } from "../../../appearance/components/theme-context";
+import { FRAME_BORDER_STYLE, frameTitle } from "./frame";
+
+export interface CardProps {
+  title?: string;
+  contentRows: number;
+  width?: number;
+  borderColor?: string;
+  backgroundColor?: string;
+  marginLeft?: number;
+  marginRight?: number;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+/** The one height rule: content rows plus the top and bottom border rows. */
+export function cardHeight(contentRows: number): number {
+  return contentRows + 2;
+}
+
+export function Card({
+  title,
+  contentRows,
+  width,
+  borderColor,
+  backgroundColor,
+  marginLeft,
+  marginRight,
+  theme,
+  children,
+}: CardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      style={{
+        height: cardHeight(contentRows),
+        width,
+        marginLeft,
+        marginRight,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: borderColor ?? tokens.border,
+        backgroundColor: backgroundColor ?? tokens.elevated,
+        flexDirection: "column",
+        paddingLeft: 1,
+      }}
+      title={frameTitle(title)}
+    >
+      {children}
+    </box>
+  );
+}

package/src/ui/components/primitives/Dialog.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { Dialog } from "./Dialog";
+
+export const meta: StoryMeta = { title: "Primitives/Dialog" };
+
+export const Open: Story = {
+  render: () => (
+    <Dialog isOpen title=" a modal " width={40} height={8}>
+      <text>dialog body content</text>
+    </Dialog>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 16 },
+};
+
+export const Closed: Story = {
+  render: () => (
+    <Dialog isOpen={false} title=" hidden " width={40} height={8}>
+      <text>never rendered</text>
+    </Dialog>
+  ),
+};

package/src/ui/components/primitives/Dialog.test.tsx

@@ -0,0 +1,38 @@
+/** The dialog dismisses on a backdrop click (outside the panel) but never on a click inside it. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { Dialog } from "./Dialog";
+import { settle } from "../../../testing/test-support";
+import { DARK } from "../../../appearance/theme";
+
+test("clicking the backdrop dismisses; clicking inside the panel does not", async () => {
+  let dismissed = 0;
+  const setup = await testRender(
+    <Dialog
+      isOpen
+      title=" test "
+      width={20}
+      height={5}
+      background={DARK.elevated}
+      onDismiss={() => (dismissed += 1)}
+      theme={DARK}
+    >
+      <text>body</text>
+    </Dialog>,
+    { width: 60, height: 20 },
+  );
+
+  await settle(setup);
+
+  // the top-left corner is backdrop, outside the centered panel
+  await setup.mockMouse.click(0, 0);
+  expect(dismissed).toBe(1);
+
+  // the screen centre lands inside the panel, so it must not dismiss
+  await setup.mockMouse.click(30, 10);
+  expect(dismissed).toBe(1);
+
+  setup.renderer.destroy();
+});

package/src/ui/components/primitives/Dialog.tsx

@@ -0,0 +1,69 @@
+/**
+ * Centered modal: a full-screen layer (backdrop token, transparent by
+ * default) centers a bordered, unpainted panel over the session - the frame
+ * delineates the dialog, the content behind stays visible.
+ * `isOpen` keeps the mount decision with the caller-visible prop vocabulary.
+ */
+
+import React from "react";
+import type { Theme } from "../../../appearance/theme";
+import { useComponentTheme } from "../../../appearance/components/theme-context";
+import { FRAME_BORDER_STYLE, frameTitle } from "./frame";
+
+export interface DialogProps {
+  isOpen: boolean;
+  title?: string;
+  width: number;
+  height: number;
+  background?: string;
+  onDismiss?: () => void;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function Dialog({
+  isOpen,
+  title,
+  width,
+  height,
+  background,
+  onDismiss,
+  theme,
+  children,
+}: DialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  if (!isOpen) return null;
+
+  return (
+    <box
+      onMouseUp={onDismiss}
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.backdrop,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <box
+        onMouseUp={(event) => event.stopPropagation()}
+        style={{
+          width,
+          height,
+          border: true,
+          borderStyle: FRAME_BORDER_STYLE,
+          borderColor: tokens.accent,
+          backgroundColor: background,
+          flexDirection: "column",
+        }}
+        title={frameTitle(title)}
+      >
+        {children}
+      </box>
+    </box>
+  );
+}

package/src/ui/components/primitives/DialogActions.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { DialogActions } from "./DialogActions";
+
+export const meta: StoryMeta = { title: "Primitives/DialogActions" };
+
+const noop = () => {};
+
+export const SaveCancel: Story = {
+  render: () => <DialogActions confirmLabel="save" onConfirm={noop} onCancel={noop} />,
+  expectedColors: [DARK.accent],
+  size: { width: 40, height: 3 },
+};
+
+export const DeleteCancel: Story = {
+  render: () => <DialogActions confirmLabel="delete" onConfirm={noop} onCancel={noop} />,
+  expectedColors: [DARK.accent],
+  size: { width: 40, height: 3 },
+};

package/src/ui/components/primitives/DialogActions.tsx

@@ -0,0 +1,39 @@
+/** The one action row every overlay uses: a solid confirm word-button and a plain cancel, lowercased. */
+
+import React from "react";
+import type { Theme } from "../../../appearance/theme";
+import { Toolbar } from "./Toolbar";
+import { Button } from "./Button";
+
+export interface DialogActionsProps {
+  confirmLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  cancelLabel?: string;
+  confirmDisabled?: boolean;
+  theme?: Theme;
+}
+
+export function DialogActions({
+  confirmLabel,
+  onConfirm,
+  onCancel,
+  cancelLabel = "cancel",
+  confirmDisabled = false,
+  theme,
+}: DialogActionsProps): React.ReactNode {
+  return (
+    <Toolbar>
+      <Button
+        variant="solid"
+        marginRight={2}
+        onPress={onConfirm}
+        isDisabled={confirmDisabled}
+        theme={theme}
+      >
+        {` ${confirmLabel} `}
+      </Button>
+      <Button onPress={onCancel} theme={theme}>{` ${cancelLabel} `}</Button>
+    </Toolbar>
+  );
+}

package/src/ui/components/primitives/IconButton.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { IconButton } from "./IconButton";
+import { NERD } from "./icons";
+
+export const meta: StoryMeta = { title: "Primitives/IconButton" };
+
+function Row({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", padding: 1, backgroundColor: DARK.panel }}>{children}</box>
+  );
+}
+
+export const States: Story = {
+  render: () => (
+    <Row>
+      <IconButton glyph={NERD.settings} onPress={() => {}} marginRight={3} />
+      <IconButton glyph={NERD.listTree} active onPress={() => {}} marginRight={3} />
+      <IconButton glyph={NERD.diff} disabled marginRight={3} />
+      <IconButton glyph={NERD.submit} onPress={() => {}} />
+    </Row>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted, DARK.textDim],
+  size: { width: 40, height: 3 },
+};
+
+export const Submit: Story = {
+  render: () => (
+    <Row>
+      <IconButton glyph={NERD.submit} active onPress={() => {}} />
+    </Row>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 20, height: 3 },
+};

package/src/ui/components/primitives/IconButton.tsx

@@ -0,0 +1,58 @@
+// A clickable single-glyph button for header and footer controls: an icon in a
+// box that calls onPress, painted in the brand accent when active. alignSelf
+// center keeps it on the same row as sibling text or icons.
+
+import React from "react";
+import type { MouseEvent as TerminalMouseEvent } from "@opentui/core";
+import { DARK, type Theme } from "../../../appearance/theme";
+import { useTooltip } from "../Tooltip";
+
+export interface IconButtonProps {
+  glyph: string;
+  onPress?: () => void;
+  active?: boolean;
+  disabled?: boolean;
+  color?: string;
+  tip?: string;
+  marginLeft?: number;
+  marginRight?: number;
+  theme?: Theme;
+}
+
+export function IconButton({
+  glyph,
+  onPress,
+  active,
+  disabled,
+  color,
+  tip,
+  marginLeft,
+  marginRight,
+  theme,
+}: IconButtonProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const resolved = color ?? (disabled ? tokens.textDim : active ? tokens.accent : tokens.textMuted);
+  const { showTooltip, hideTooltip } = useTooltip();
+  // a button press is its own action - never let it bubble to a clickable row behind it
+  const handleMouseUp = (event: TerminalMouseEvent): void => {
+    event.stopPropagation();
+    hideTooltip();
+    onPress?.();
+  };
+
+  return (
+    <box
+      onMouseUp={disabled ? undefined : handleMouseUp}
+      onMouseOver={tip ? (event) => showTooltip(tip, event.x, event.y) : undefined}
+      onMouseOut={tip ? hideTooltip : undefined}
+      style={{
+        flexShrink: 0,
+        alignSelf: "center",
+        marginLeft,
+        marginRight,
+      }}
+    >
+      <text fg={resolved}>{glyph}</text>
+    </box>
+  );
+}

package/src/ui/components/primitives/StatusBar.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { StatusBar } from "./StatusBar";
+
+export const meta: StoryMeta = { title: "Primitives/StatusBar" };
+
+export const HintLine: Story = {
+  render: () => <StatusBar>j/k move · v span · c comment · q quit</StatusBar>,
+  expectedColors: [DARK.textDim],
+};

package/src/ui/components/primitives/StatusBar.tsx

@@ -0,0 +1,23 @@
+/**
+ * One-row panel bar for the status/hint line. Content renders as dim text;
+ * callers pass richer spans as children when a segment needs another tone.
+ */
+
+import React from "react";
+import type { Theme } from "../../../appearance/theme";
+import { useComponentTheme } from "../../../appearance/components/theme-context";
+
+export interface StatusBarProps {
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function StatusBar({ theme, children }: StatusBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1 }}>
+      <text fg={tokens.textDim}>{children}</text>
+    </box>
+  );
+}

package/src/ui/components/primitives/Switch.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { Switch } from "./Switch";
+
+export const meta: StoryMeta = { title: "Primitives/Switch" };
+
+export const On: Story = {
+  render: () => <Switch on onToggle={() => {}} theme={DARK} />,
+  expectedColors: [DARK.accent],
+  size: { width: 8, height: 1 },
+};
+
+export const Off: Story = {
+  render: () => <Switch on={false} onToggle={() => {}} theme={DARK} />,
+  size: { width: 8, height: 1 },
+};

package/src/ui/components/primitives/Switch.tsx

@@ -0,0 +1,32 @@
+/**
+ * On/off switch: a pill with a knob that sits right (accent) when on and left
+ * (dim) when off. `onToggle` unifies a mouse click and keyboard activation, so
+ * the dialog grammar and a pointer both flip it.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../../../appearance/theme";
+import { useComponentTheme } from "../../../appearance/components/theme-context";
+
+export interface SwitchProps {
+  on: boolean;
+  onToggle: () => void;
+  theme?: Theme;
+}
+
+export function Switch({ on, onToggle, theme }: SwitchProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      onMouseUp={(event: MouseEvent) => {
+        event.stopPropagation();
+        onToggle();
+      }}
+      style={{ flexShrink: 0 }}
+    >
+      <text fg={on ? tokens.accent : tokens.textDim}>{on ? "(  ●)" : "(●  )"}</text>
+    </box>
+  );
+}

package/src/ui/components/primitives/Tabs.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { DARK } from "../../../appearance/theme";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { Tab, TabList, Tabs } from "./Tabs";
+
+export const meta: StoryMeta = { title: "Primitives/Tabs" };
+
+export const TwoTabs: Story = {
+  render: () => (
+    <Tabs selectedKey="review" onSelectionChange={() => {}}>
+      <TabList>
+        <Tab id="review">Review (2)</Tab>
+        <Tab id="agent">Agent</Tab>
+      </TabList>
+    </Tabs>
+  ),
+  expectedColors: [DARK.accent, DARK.textDim],
+};
+
+export const SecondSelected: Story = {
+  render: () => (
+    <Tabs selectedKey="agent" onSelectionChange={() => {}}>
+      <TabList>
+        <Tab id="review">Review (0)</Tab>
+        <Tab id="agent">Agent</Tab>
+      </TabList>
+    </Tabs>
+  ),
+};

package/src/ui/components/primitives/Tabs.tsx

@@ -0,0 +1,101 @@
+/**
+ * Tabs / TabList / Tab: a transparent, full-width rounded strip of clickable
+ * text tabs. The composition follows the ARIA tabs pattern: Tabs owns the
+ * controlled selection (`selectedKey` + `onSelectionChange`), TabList renders
+ * the strip, Tab declares one item. Selection stays controlled from outside so
+ * the keyboard grammar remains the key owner; each tab click sets the key.
+ */
+
+import React, { createContext, useContext } from "react";
+import type { Theme } from "../../../appearance/theme";
+import { useComponentTheme } from "../../../appearance/components/theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+interface TabsContextValue {
+  selectedKey: string;
+  onSelectionChange: (key: string) => void;
+  selectedColor?: string;
+  theme?: Theme;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+export interface TabsProps {
+  selectedKey: string;
+  onSelectionChange: (key: string) => void;
+  selectedColor?: string;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function Tabs({
+  selectedKey,
+  onSelectionChange,
+  selectedColor,
+  theme,
+  children,
+}: TabsProps): React.ReactNode {
+  return (
+    <TabsContext.Provider value={{ selectedKey, onSelectionChange, selectedColor, theme }}>
+      {children}
+    </TabsContext.Provider>
+  );
+}
+
+export interface TabProps {
+  id: string;
+  children: string;
+}
+
+/** Declarative item: TabList collects Tab children into the native strip. */
+export function Tab(_props: TabProps): React.ReactNode {
+  return null;
+}
+
+export interface TabListProps {
+  children: React.ReactNode;
+}
+
+export function TabList({ children }: TabListProps): React.ReactNode {
+  const tabs = useContext(TabsContext);
+
+  if (!tabs) throw new Error("TabList must render inside Tabs");
+  const tokens = useComponentTheme(tabs.theme);
+  const items: { id: string; label: string }[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement<TabProps>(child)) {
+      items.push({ id: child.props.id, label: child.props.children });
+    }
+  });
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: 3,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        flexDirection: "row",
+        paddingLeft: 1,
+      }}
+    >
+      {items.map((item) => {
+        const selected = item.id === tabs.selectedKey;
+
+        return (
+          <box
+            key={item.id}
+            style={{ marginRight: 2 }}
+            onMouseUp={() => tabs.onSelectionChange(item.id)}
+          >
+            <text fg={selected ? (tabs.selectedColor ?? tokens.accent) : tokens.textDim}>
+              {item.label}
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/ui/components/primitives/Toolbar.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { Story, StoryMeta } from "../../../stories/story";
+import { Button } from "./Button";
+import { Toolbar } from "./Toolbar";
+
+export const meta: StoryMeta = { title: "Primitives/Toolbar" };
+
+export const ActionRow: Story = {
+  render: () => (
+    <Toolbar>
+      <Button variant="solid" marginRight={2} onPress={() => {}}>
+        {" Submit "}
+      </Button>
+      <Button onPress={() => {}}>{" Cancel "}</Button>
+    </Toolbar>
+  ),
+};

package/src/ui/components/primitives/Toolbar.tsx

@@ -0,0 +1,14 @@
+/**
+ * Horizontal action row: children flow left to right on one row. The classic
+ * home of Button groups (Save/Cancel, Submit/Cancel).
+ */
+
+import React from "react";
+
+export interface ToolbarProps {
+  children: React.ReactNode;
+}
+
+export function Toolbar({ children }: ToolbarProps): React.ReactNode {
+  return <box style={{ flexDirection: "row", height: 1 }}>{children}</box>;
+}