@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.101

package/src/ui/components/PromptDialog.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { PromptDialog } from "./PromptDialog";
+
+export const meta: StoryMeta = { title: "Overlays/PromptDialog" };
+
+export const RenameAuthor: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Rename author "
+      label="Display name for this collaborator:"
+      value="Robin"
+      placeholder="their name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.elevated, DARK.accent],
+  size: { width: 64, height: 16 },
+};
+
+export const NameYourself: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Welcome "
+      label="Your name (optional) - it attributes the notes you leave:"
+      value=""
+      placeholder="your name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.elevated],
+  size: { width: 64, height: 16 },
+};

package/src/ui/components/PromptDialog.test.tsx

@@ -0,0 +1,65 @@
+/** The prompt dialog's footer actions are mouse-clickable: clicking "save" commits and "cancel"
+ * dismisses, the same as pressing enter or esc. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { PromptDialog } from "./PromptDialog";
+import { locateText, settle, typeText } from "../../testing/test-support";
+import { DARK } from "../../appearance/theme";
+
+test("the input is focused on open, so typing lands in the dialog", async () => {
+  const inputs: string[] = [];
+  const setup = await testRender(
+    <PromptDialog
+      isOpen
+      title=" rename thread "
+      label="new title for this thread:"
+      value="hi"
+      onInput={(text) => inputs.push(text)}
+      theme={DARK}
+    />,
+    { width: 60, height: 12 },
+  );
+
+  await settle(setup);
+
+  await typeText(setup, "!");
+  expect(inputs.at(-1)).toBe("hi!");
+
+  setup.renderer.destroy();
+});
+
+test("clicking save fires onSave and clicking cancel fires onCancel", async () => {
+  let saved = 0;
+  let cancelled = 0;
+  const setup = await testRender(
+    <PromptDialog
+      isOpen
+      title=" rename thread "
+      label="new title for this thread:"
+      value="a title"
+      onInput={() => {}}
+      onSave={() => (saved += 1)}
+      onCancel={() => (cancelled += 1)}
+      theme={DARK}
+    />,
+    { width: 60, height: 12 },
+  );
+
+  await settle(setup);
+
+  const save = locateText(setup, "save");
+
+  await setup.mockMouse.click(save.column, save.row);
+  expect(saved).toBe(1);
+  expect(cancelled).toBe(0);
+
+  const cancel = locateText(setup, "cancel");
+
+  await setup.mockMouse.click(cancel.column, cancel.row);
+  expect(cancelled).toBe(1);
+  expect(saved).toBe(1);
+
+  setup.renderer.destroy();
+});

package/src/ui/components/PromptDialog.tsx

@@ -0,0 +1,99 @@
+/**
+ * A centered single-field text prompt on the shared Dialog overlay. The focused
+ * input owns typing/cursor natively; the reducer's `prompt` overlay drives ⏎
+ * save / esc cancel (like the composer). Used to rename an author and to ask a
+ * collaborator for their name.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { Dialog } from "./primitives/Dialog";
+import { DialogActions } from "./primitives/DialogActions";
+
+// ⏎ submits (suppresses the textarea's default newline); the grammar owns save.
+const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface PromptDialogProps {
+  isOpen: boolean;
+  title?: string;
+  label?: string;
+  value: string;
+  placeholder?: string;
+  onInput: (text: string) => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  theme?: Theme;
+}
+
+export function PromptDialog({
+  isOpen,
+  title,
+  label,
+  value,
+  placeholder,
+  onInput,
+  onSave,
+  onCancel,
+  theme,
+}: PromptDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable | null>(null);
+
+  useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.focus();
+    inputRef.current.cursorOffset = value.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title={title}
+      width={Math.min(54, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      onDismiss={onCancel}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        {label ? <text fg={tokens.textDim}>{label}</text> : null}
+        <textarea
+          ref={inputRef}
+          focused
+          initialValue={value}
+          placeholder={placeholder}
+          keyBindings={PROMPT_KEY_BINDINGS}
+          onContentChange={() => onInput(inputRef.current?.plainText ?? "")}
+          style={{
+            height: 1,
+            backgroundColor: tokens.elevated,
+            focusedBackgroundColor: tokens.elevated,
+            textColor: tokens.text,
+            focusedTextColor: tokens.text,
+          }}
+        />
+        <box style={{ flexGrow: 1 }} />
+        <DialogActions
+          confirmLabel="save"
+          onConfirm={() => onSave?.()}
+          onCancel={() => onCancel?.()}
+          theme={theme}
+        />
+      </box>
+    </Dialog>
+  );
+}

package/src/ui/components/RootOverlay.stories.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { RootOverlayProvider, useRootOverlay } from "./RootOverlay";
+
+export const meta: StoryMeta = { title: "Layout/RootOverlay" };
+
+// The provider renders whatever a descendant pushes after the rest of the tree, so it draws on top.
+function OverlayDemo(): React.ReactNode {
+  const { setOverlay } = useRootOverlay();
+
+  useEffect(() => {
+    setOverlay(
+      "demo",
+      <box
+        style={{
+          position: "absolute",
+          top: 2,
+          left: 6,
+          borderStyle: "single",
+          borderColor: DARK.border,
+          backgroundColor: DARK.elevated,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <text fg={DARK.text}>floating overlay</text>
+      </box>,
+    );
+  }, [setOverlay]);
+
+  return <text fg={DARK.textDim}>base content under the overlay</text>;
+}
+
+export const FloatingNode: Story = {
+  render: () => (
+    <RootOverlayProvider>
+      <box style={{ padding: 1, backgroundColor: DARK.panel }}>
+        <OverlayDemo />
+      </box>
+    </RootOverlayProvider>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 40, height: 6 },
+};

package/src/ui/components/RootOverlay.tsx

@@ -0,0 +1,49 @@
+// A root overlay slot: OpenTUI has no z-index, so an overlay drawn inside a pane is sliced by the
+// next pane's border. Anything pushed here renders after every pane (last in draw order), so it sits
+// on top of the whole shell - the same trick the tooltip uses. Callers position their node with
+// absolute screen coordinates and hold a stable key, so several overlays (a menu, a hover preview)
+// coexist instead of clobbering one shared slot.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+
+interface RootOverlayApi {
+  setOverlay: (key: string, node: React.ReactNode) => void;
+  clearOverlay: (key: string) => void;
+}
+
+const RootOverlayContext = createContext<RootOverlayApi>({
+  setOverlay: () => {},
+  clearOverlay: () => {},
+});
+
+export function useRootOverlay(): RootOverlayApi {
+  return useContext(RootOverlayContext);
+}
+
+export function RootOverlayProvider({ children }: { children: React.ReactNode }): React.ReactNode {
+  const [overlays, setOverlays] = useState<Map<string, React.ReactNode>>(new Map());
+  const api = useMemo<RootOverlayApi>(
+    () => ({
+      setOverlay: (key, node) => setOverlays((current) => new Map(current).set(key, node)),
+      clearOverlay: (key) =>
+        setOverlays((current) => {
+          if (!current.has(key)) return current;
+          const next = new Map(current);
+
+          next.delete(key);
+
+          return next;
+        }),
+    }),
+    [],
+  );
+
+  return (
+    <RootOverlayContext.Provider value={api}>
+      {children}
+      {[...overlays].map(([key, node]) => (
+        <React.Fragment key={key}>{node}</React.Fragment>
+      ))}
+    </RootOverlayContext.Provider>
+  );
+}

package/src/ui/components/ScrollArea.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import { ScrollArea } from "./ScrollArea";
+import type { Story, StoryMeta } from "../../stories/story";
+
+export const meta: StoryMeta = { title: "Chrome/ScrollArea" };
+
+// Taller-than-viewport content; the overlay bar stays hidden until the surface scrolls.
+export const AtRest: Story = {
+  render: () => (
+    <box style={{ width: 24, height: 8, backgroundColor: DARK.background }}>
+      <ScrollArea>
+        {Array.from({ length: 24 }, (_unused, index) => (
+          <text key={index} fg={DARK.textMuted}>{`row ${index + 1}`}</text>
+        ))}
+      </ScrollArea>
+    </box>
+  ),
+  size: { width: 24, height: 8 },
+};

package/src/ui/components/ScrollArea.tsx

@@ -0,0 +1,61 @@
+/**
+ * A scrollbox whose bar follows the global rule: no always-on scrollbar. The built-in bar is
+ * hidden and an OverlayScrollbar rides the rightmost column, appearing only while scrolling.
+ * Pass scrollRef to keep scrollTo / scrollChildIntoView on the underlying ScrollBox.
+ */
+
+import React, { useLayoutEffect, useMemo, useRef, type ReactNode, type RefObject } from "react";
+import { MacOSScrollAccel, type ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../../appearance/theme";
+import { OverlayScrollbar } from "./OverlayScrollbar";
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  focused?: boolean;
+  theme?: Theme;
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
+  id?: string;
+  revealId?: string;
+  gestureWheel?: boolean;
+}
+
+export function ScrollArea({
+  children,
+  focused = false,
+  theme,
+  scrollRef,
+  id,
+  revealId,
+  gestureWheel = false,
+}: ScrollAreaProps): React.ReactNode {
+  const innerRef = useRef<ScrollBoxRenderable | null>(null);
+  const wheelAcceleration = useMemo(
+    () => (gestureWheel ? new MacOSScrollAccel({ A: 0.4, tau: 4, maxMultiplier: 3 }) : undefined),
+    [gestureWheel],
+  );
+  const attach = (node: ScrollBoxRenderable | null): void => {
+    innerRef.current = node;
+    if (scrollRef) scrollRef.current = node;
+  };
+
+  useLayoutEffect(() => {
+    if (revealId === undefined) return;
+    innerRef.current?.scrollChildIntoView(`tree-row-${revealId}`);
+  }, [revealId]);
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "row" }}>
+      <scrollbox
+        id={id}
+        ref={attach}
+        style={{ flexGrow: 1 }}
+        focused={focused}
+        scrollAcceleration={wheelAcceleration}
+        verticalScrollbarOptions={{ visible: false }}
+      >
+        {children}
+      </scrollbox>
+      <OverlayScrollbar scrollbox={innerRef} theme={theme} />
+    </box>
+  );
+}

package/src/ui/components/Toast.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { Toast } from "./Toast";
+
+export const meta: StoryMeta = { title: "Overlays/Toast" };
+
+export const ShareLink: Story = {
+  render: () => <Toast title="share link copied" body="ssh review-4f2a@cueloop.dev" />,
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 12 },
+};
+
+export const LongMessage: Story = {
+  render: () => (
+    <Toast body="could not stop sharing: gateway revoke failed - the share may already be gone, try again in a moment" />
+  ),
+  size: { width: 90, height: 14 },
+};

package/src/ui/components/Toast.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+export interface ToastProps {
+  title?: string;
+  body: string;
+  onDismiss?: () => void;
+  theme?: Theme;
+}
+
+/** A toast never spans the screen: a long message wraps inside this, like the settings dialog. */
+const TOAST_MAX_WIDTH = 64;
+
+export function Toast({ title, body, onDismiss, theme }: ToastProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const width = Math.min(
+    terminalWidth - 6,
+    Math.max(28, Math.min(TOAST_MAX_WIDTH, body.length + 4)),
+  );
+  // the message wraps at the content width, so grow the box to fit the wrapped lines
+  const contentWidth = Math.max(1, width - 4);
+  const lines = body
+    .split("\n")
+    .reduce((total, line) => total + Math.max(1, Math.ceil(line.length / contentWidth)), 0);
+  const height = Math.min(terminalHeight - 4, Math.max(6, lines + 4));
+
+  return (
+    <Dialog
+      isOpen
+      title={title ? ` ${title} ` : undefined}
+      width={width}
+      height={height}
+      background={tokens.elevated}
+      onDismiss={onDismiss}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.text}>{body}</text>
+      </box>
+    </Dialog>
+  );
+}

package/src/ui/components/Tooltip.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { TooltipProvider } from "./Tooltip";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+
+export const meta: StoryMeta = { title: "Layout/Tooltip" };
+
+// The tooltip surfaces only on hover, so a static story shows the provider wrapping a labelled control.
+export const HoverControl: Story = {
+  render: () => (
+    <TooltipProvider theme={DARK}>
+      <box style={{ flexDirection: "row", padding: 1, backgroundColor: DARK.panel }}>
+        <IconButton
+          glyph={NERD.sidebarRight}
+          tip="Toggle Right Sidebar"
+          onPress={() => {}}
+          theme={DARK}
+        />
+      </box>
+    </TooltipProvider>
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 40, height: 4 },
+};

package/src/ui/components/Tooltip.tsx

@@ -0,0 +1,72 @@
+// Hover tooltips for the header controls. A tiny header cell clips its own children, so the label is
+// surfaced at the screen root instead: controls report the hovered label and cursor cell, and this layer
+// paints it one row below, nudged left when it would run past the right edge.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { DARK, type Theme } from "../../appearance/theme";
+
+interface TooltipTarget {
+  label: string;
+  x: number;
+  y: number;
+}
+
+interface TooltipApi {
+  showTooltip: (label: string, x: number, y: number) => void;
+  hideTooltip: () => void;
+}
+
+const TooltipContext = createContext<TooltipApi>({
+  showTooltip: () => {},
+  hideTooltip: () => {},
+});
+
+/** Report or clear the hovered control's tooltip; a no-op outside a TooltipProvider. */
+export function useTooltip(): TooltipApi {
+  return useContext(TooltipContext);
+}
+
+/** Wrap a shell so its header controls can surface hover tooltips at the screen root. */
+export function TooltipProvider({
+  theme,
+  children,
+}: {
+  theme?: Theme;
+  children: React.ReactNode;
+}): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const { width, height } = useTerminalDimensions();
+  const [target, setTarget] = useState<TooltipTarget | null>(null);
+  const api = useMemo<TooltipApi>(
+    () => ({
+      showTooltip: (label, x, y) => setTarget({ label, x, y }),
+      hideTooltip: () => setTarget(null),
+    }),
+    [],
+  );
+
+  const boxWidth = target ? target.label.length + 2 : 0;
+  const left = target ? Math.max(0, Math.min(target.x, width - boxWidth)) : 0;
+  const top = target ? (target.y + 1 <= height - 1 ? target.y + 1 : Math.max(0, target.y - 1)) : 0;
+
+  return (
+    <TooltipContext.Provider value={api}>
+      {children}
+      {target ? (
+        <box
+          style={{
+            position: "absolute",
+            left,
+            top,
+            paddingLeft: 1,
+            paddingRight: 1,
+            backgroundColor: tokens.elevated,
+          }}
+        >
+          <text fg={tokens.text}>{target.label}</text>
+        </box>
+      ) : null}
+    </TooltipContext.Provider>
+  );
+}

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

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

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