@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.91

package/src/components/menu-control.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MenuControlProvider, useMenuControl } from "./menu-control";
+
+export const meta: StoryMeta = { title: "Layout/MenuControl" };
+
+// One open menu at a time: with "alpha" open, only its row reads as open.
+function MenuControlDemo(): React.ReactNode {
+  const { openMenuId } = useMenuControl();
+  const row = (id: string): React.ReactNode => (
+    <text fg={openMenuId === id ? DARK.accent : DARK.textDim}>
+      {`${id}: ${openMenuId === id ? "open" : "closed"}`}
+    </text>
+  );
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {row("alpha")}
+      {row("beta")}
+    </box>
+  );
+}
+
+export const OneOpenAtATime: Story = {
+  render: () => (
+    <MenuControlProvider value={{ openMenuId: "alpha", toggleMenu: () => {}, closeMenu: () => {} }}>
+      <box style={{ padding: 1, backgroundColor: DARK.panel }}>
+        <MenuControlDemo />
+      </box>
+    </MenuControlProvider>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 30, height: 5 },
+};

package/src/components/menu-control.tsx

@@ -0,0 +1,43 @@
+// One open menu at a time across a shell: the thread row menu and the editor split menu share this
+// single open id, so opening either closes the other. Owned by App and by the no-thread shell, one each.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+
+export interface MenuControlApi {
+  openMenuId: string | null;
+  toggleMenu: (id: string) => void;
+  closeMenu: () => void;
+}
+
+const MenuControlContext = createContext<MenuControlApi>({
+  openMenuId: null,
+  toggleMenu: () => {},
+  closeMenu: () => {},
+});
+
+export function useMenuControl(): MenuControlApi {
+  return useContext(MenuControlContext);
+}
+
+export function useMenuControlState(): MenuControlApi {
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+
+  return useMemo(
+    () => ({
+      openMenuId,
+      toggleMenu: (id: string) => setOpenMenuId((current) => (current === id ? null : id)),
+      closeMenu: () => setOpenMenuId(null),
+    }),
+    [openMenuId],
+  );
+}
+
+export function MenuControlProvider({
+  value,
+  children,
+}: {
+  value: MenuControlApi;
+  children: React.ReactNode;
+}): React.ReactNode {
+  return <MenuControlContext.Provider value={value}>{children}</MenuControlContext.Provider>;
+}

package/src/components/pages/Workspace.stories.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { PaneGrid } from "../PaneGrid";
+import { Tree } from "../primitives/Tree";
+import type { TreeNode } from "../primitives/tree-model";
+
+export const meta: StoryMeta = { title: "Pages/Workspace" };
+
+const NAVIGATION: TreeNode[] = [
+  {
+    id: "projects",
+    label: "Projects",
+    children: [
+      {
+        id: "cueloop",
+        label: "cueloop",
+        children: [
+          { id: "cueloop/review", label: "Review the app shell" },
+          { id: "cueloop/read", label: "Read Cueloop Repository" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "threads",
+    label: "Threads",
+    children: [{ id: "threads/welcome", label: "Welcome to cueloop" }],
+  },
+];
+
+const CHANGED_FILES: TreeNode[] = [
+  {
+    id: "packages",
+    label: "packages",
+    children: [
+      {
+        id: "client",
+        label: "client",
+        children: [
+          { id: "client/AppShell.tsx", label: "AppShell.tsx", status: "modified" },
+          { id: "client/Workspace.stories.tsx", label: "Workspace.stories.tsx", status: "added" },
+        ],
+      },
+    ],
+  },
+  { id: "README.md", label: "README.md", status: "modified" },
+];
+
+interface CodeSampleLine {
+  number: number;
+  code: string;
+}
+
+const CODE_SAMPLE: readonly CodeSampleLine[] = [
+  { number: 17, code: "export function AppShell({" },
+  { number: 18, code: "  header," },
+  { number: 19, code: "  sidebar," },
+  { number: 20, code: "  main," },
+  { number: 21, code: "  inspector," },
+  { number: 22, code: "}: AppShellProps) {" },
+  { number: 23, code: "  const tokens = theme ?? DARK;" },
+  { number: 24, code: "  return <box>{main}</box>;" },
+];
+
+function Sidebar(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingTop: 1 }}>
+      <Tree
+        nodes={NAVIGATION}
+        expandedIds={new Set(["projects", "cueloop", "threads"])}
+        selectedId="cueloop/review"
+      />
+    </box>
+  );
+}
+
+function TranscriptLine({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <text fg={DARK.textMuted}>{children}</text>;
+}
+
+function CommentRow(): React.ReactNode {
+  return (
+    <box
+      style={{
+        border: ["left"],
+        borderStyle: "single",
+        borderColor: DARK.accent,
+        flexDirection: "column",
+        paddingLeft: 1,
+        marginTop: 1,
+        marginBottom: 1,
+      }}
+    >
+      <text fg={DARK.textDim}>markus commented on AppShell.tsx</text>
+      <text fg={DARK.text}>The single rules read cleaner than an enclosing frame here.</text>
+    </box>
+  );
+}
+
+function Main(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>Review the app shell</text>
+      <text> </text>
+      <TranscriptLine>
+        The three-pane layout divides regions with straight rules only.
+      </TranscriptLine>
+      <TranscriptLine>
+        Sidebar navigates, the transcript reads, the inspector shows code.
+      </TranscriptLine>
+      <CommentRow />
+      <TranscriptLine>Header and footer are thin label rows the shell rules itself.</TranscriptLine>
+    </box>
+  );
+}
+
+function CodePane(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <text fg={DARK.textMuted}>AppShell.tsx</text>
+      <text> </text>
+      {CODE_SAMPLE.map((line) => (
+        <box key={line.number} style={{ flexDirection: "row" }}>
+          <text fg={DARK.textDim}>{String(line.number).padStart(3, " ")} </text>
+          <text fg={DARK.text}>{line.code}</text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+function Inspector(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <CodePane />
+      <text> </text>
+      <text fg={DARK.textDim}>Changed files</text>
+      <Tree
+        nodes={CHANGED_FILES}
+        expandedIds={new Set(["packages", "client"])}
+        selectedId="client/AppShell.tsx"
+        showStatus
+      />
+    </box>
+  );
+}
+
+function Header(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textMuted}>Review the app shell</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>cueloop / main</text>
+    </box>
+  );
+}
+
+function Footer(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textDim}>2 files changed</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>Fable 5</text>
+    </box>
+  );
+}
+
+export const ThreePane: Story = {
+  render: () => (
+    <PaneGrid
+      sidebar={<Sidebar />}
+      main={<Main />}
+      mainHeader={<Header />}
+      inspector={<Inspector />}
+      footer={<Footer />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 160, height: 42 },
+};

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Button } from "./Button";
+import { Toolbar } from "./Toolbar";
+
+export const meta: StoryMeta = { title: "Primitives/Button" };
+
+export const Variants: Story = {
+  render: () => (
+    <Toolbar>
+      <Button variant="solid" marginRight={2} onPress={() => {}}>
+        {" Save "}
+      </Button>
+      <Button marginRight={2} onPress={() => {}}>
+        {" Cancel esc "}
+      </Button>
+      <Button variant="accent-text" onPress={() => {}}>
+        {"Submit review"}
+      </Button>
+    </Toolbar>
+  ),
+  expectedColors: [DARK.accent, DARK.accentInk, DARK.textDim],
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Button isDisabled onPress={() => {}}>
+      {" Edit "}
+    </Button>
+  ),
+};

package/src/components/primitives/Button.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface ButtonProps {
+  /** Unified activation: mouse release today, keyboard activation tomorrow. */
+  onPress: () => void;
+  isDisabled?: boolean;
+  /** solid = accent-filled call to action; plain = quiet word-button. */
+  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/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,63 @@
+/**
+ * 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 "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE, frameTitle } from "./frame";
+
+export interface CardProps {
+  title?: string;
+  /** Number of content rows inside the border; the box adds the two border rows. */
+  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/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.test.tsx

@@ -0,0 +1,37 @@
+/** 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 "../../test-support";
+import { DARK } from "../../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/components/primitives/Dialog.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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, frameTitle } from "./frame";
+
+export interface DialogProps {
+  isOpen: boolean;
+  title?: string;
+  width: number;
+  height: number;
+  /** Solid panel fill for content-heavy dialogs; default transparent. */
+  background?: string;
+  /** Dismiss on a click outside the panel. */
+  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/components/primitives/DialogActions.stories.tsx

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