@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.70

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../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/components/primitives/Card.tsx

@@ -0,0 +1,60 @@
+/**
+ * Bordered rounded 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 "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+export interface CardProps {
+  title?: string;
+  /** Number of content rows inside the border; the box adds the two border rows. */
+  contentRows: 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,
+  borderColor,
+  backgroundColor,
+  marginLeft,
+  marginRight,
+  theme,
+  children,
+}: CardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      style={{
+        height: cardHeight(contentRows),
+        marginLeft,
+        marginRight,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: borderColor ?? tokens.border,
+        backgroundColor: backgroundColor ?? tokens.elevated,
+        flexDirection: "column",
+        paddingLeft: 1,
+      }}
+      title={title}
+    >
+      {children}
+    </box>
+  );
+}

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../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/components/primitives/Dialog.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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 "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+export interface DialogProps {
+  isOpen: boolean;
+  title?: string;
+  width: number;
+  height: number;
+  /** Solid panel fill for content-heavy dialogs; default transparent. */
+  background?: string;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function Dialog({
+  isOpen,
+  title,
+  width,
+  height,
+  background,
+  theme,
+  children,
+}: DialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  if (!isOpen) return null;
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.backdrop,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <box
+        style={{
+          width,
+          height,
+          border: true,
+          borderStyle: FRAME_BORDER_STYLE,
+          borderColor: tokens.accent,
+          backgroundColor: background,
+          flexDirection: "column",
+        }}
+        title={title}
+      >
+        {children}
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../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/components/primitives/IconButton.tsx

@@ -0,0 +1,62 @@
+// 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 "../../theme";
+import { useTooltip } from "../Tooltip";
+
+export interface IconButtonProps {
+  glyph: string;
+  onPress?: () => void;
+  /** Paint the glyph in the brand accent to mark the current mode or view. */
+  active?: boolean;
+  /** Dim the glyph and ignore presses. */
+  disabled?: boolean;
+  /** Override the resolved foreground (wins over active/disabled colouring). */
+  color?: string;
+  /** Label shown on hover, surfaced at the screen root so a tiny header cell cannot clip it. */
+  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/components/primitives/StatusBar.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../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/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 "../../theme";
+import { useComponentTheme } from "../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/components/primitives/Tabs.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../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/components/primitives/Tabs.tsx

@@ -0,0 +1,102 @@
+/**
+ * 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 "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+interface TabsContextValue {
+  selectedKey: string;
+  onSelectionChange: (key: string) => void;
+  /** Text color of the selected tab; defaults to the accent token. */
+  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/components/primitives/Toolbar.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { Story, StoryMeta } from "../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/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>;
+}

package/src/components/primitives/Tree.stories.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Tree } from "./Tree";
+import type { TreeNode } from "./tree-model";
+
+export const meta: StoryMeta = { title: "Primitives/Tree" };
+
+const FILES: TreeNode[] = [
+  {
+    id: "packages",
+    label: "packages",
+    children: [
+      {
+        id: "schema",
+        label: "schema",
+        children: [
+          { id: "schema/types.ts", label: "types.ts", status: "modified" },
+          { id: "schema/tree-model.ts", label: "tree-model.ts", status: "added" },
+        ],
+      },
+      {
+        id: "daemon",
+        label: "daemon",
+        children: [{ id: "daemon/api.ts", label: "api.ts", status: "modified" }],
+      },
+    ],
+  },
+  { id: "README.md", label: "README.md" },
+  { id: "old.ts", label: "old.ts", status: "deleted" },
+];
+
+const DEEP: TreeNode[] = [
+  {
+    id: "src",
+    label: "src",
+    children: [
+      {
+        id: "src/components",
+        label: "components",
+        children: [
+          {
+            id: "src/components/primitives",
+            label: "primitives",
+            children: [
+              { id: "src/components/primitives/Tree.tsx", label: "Tree.tsx", status: "added" },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const PROJECTS: TreeNode[] = [
+  {
+    id: "projects",
+    label: "Projects",
+    children: [
+      {
+        id: "cueloop",
+        label: "cueloop",
+        children: [{ id: "cueloop/read", label: "Read Cueloop Repository" }],
+      },
+    ],
+  },
+  {
+    id: "threads",
+    label: "Threads",
+    children: [{ id: "threads/welcome", label: "Welcome to cueloop" }],
+  },
+];
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 40, height: "100%", backgroundColor: DARK.panel, paddingTop: 1 }}>
+      {children}
+    </box>
+  );
+}
+
+export const FileTree: Story = {
+  render: () => (
+    <Frame>
+      <Tree
+        nodes={FILES}
+        expandedIds={new Set(["packages", "schema", "daemon"])}
+        selectedId="schema/tree-model.ts"
+        showStatus
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.green, DARK.red],
+  size: { width: 44, height: 16 },
+};
+
+export const FlattenedChain: Story = {
+  render: () => (
+    <Frame>
+      <Tree
+        nodes={DEEP}
+        expandedIds={new Set(["src", "src/components/primitives"])}
+        flattenEmptyDirectories
+        showStatus
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.green],
+  size: { width: 44, height: 10 },
+};
+
+export const ProjectsThreads: Story = {
+  render: () => (
+    <Frame>
+      <Tree
+        nodes={PROJECTS}
+        expandedIds={new Set(["projects", "cueloop", "threads"])}
+        selectedId="cueloop/read"
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 44, height: 12 },
+};