@cueloop/client 0.1.0-alpha.5 → 0.1.0-alpha.51

package/src/components/MarkerPopover.tsx

@@ -0,0 +1,108 @@
+/**
+ * The marker-actions popover: the visible form of plan span mode, floated as a
+ * bordered card above the marked block. The toolbar card is always shown -
+ * `comment · cut · actions · [x]`, each label keyboard-shortcut-backed and
+ * clickable. Pressing `actions` drops a second card below it listing the
+ * quick-actions; picking one inserts its preset comment. Plan-only: the diff
+ * review has no span.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { useComponentTheme } from "./theme-context";
+import { cardHeight } from "./primitives/Card";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface MarkerPopoverProps {
+  /** "toolbar" is the bar alone; "actions" also drops the quick-actions card. */
+  view: "toolbar" | "actions";
+  actions: QuickAction[];
+  /** Highlighted action in the dropdown (accent); ignored in toolbar view. */
+  actionIndex: number;
+  /** Show the cut affordance: owner-only, like every other plan-edit control. */
+  canCut: boolean;
+  onComment: () => void;
+  onCut: () => void;
+  onOpenActions: () => void;
+  onClose: () => void;
+  onPickAction: (index: number) => void;
+  onBack: () => void;
+  theme?: Theme;
+}
+
+export function MarkerPopover({
+  view,
+  actions,
+  actionIndex,
+  canCut,
+  onComment,
+  onCut,
+  onOpenActions,
+  onClose,
+  onPickAction,
+  onBack,
+  theme,
+}: MarkerPopoverProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const cardStyle = {
+    border: true,
+    borderStyle: FRAME_BORDER_STYLE,
+    borderColor: tokens.border,
+    backgroundColor: tokens.elevated,
+    flexDirection: "column" as const,
+    paddingLeft: 1,
+    paddingRight: 1,
+  };
+  const open = view === "actions";
+  return (
+    <box
+      style={{ flexDirection: "column", alignItems: "flex-start" }}
+      // a release on the popover is the popover's own click; it must never
+      // bubble to the sheet's selection-release fallback and re-enter span mode
+      onMouseUp={(event: MouseEvent) => event.stopPropagation()}
+    >
+      <box style={{ ...cardStyle, height: cardHeight(1) }}>
+        <box style={{ flexDirection: "row" }}>
+          <text fg={tokens.accent} onMouseUp={onComment}>
+            comment
+          </text>
+          <text fg={tokens.textDim}> · </text>
+          {canCut ? (
+            <>
+              <text fg={tokens.red} onMouseUp={onCut}>
+                cut
+              </text>
+              <text fg={tokens.textDim}> · </text>
+            </>
+          ) : null}
+          <text fg={open ? tokens.accent : tokens.textMuted} onMouseUp={onOpenActions}>
+            actions
+          </text>
+          <text fg={tokens.textDim}> · </text>
+          <text fg={tokens.textDim} onMouseUp={onClose}>
+            [x]
+          </text>
+        </box>
+      </box>
+      {open ? (
+        <box style={{ ...cardStyle, height: cardHeight(actions.length + 1) }}>
+          {actions.map((action, index) => (
+            <text
+              key={index}
+              fg={index === actionIndex ? tokens.accent : tokens.textMuted}
+              onMouseUp={() => onPickAction(index)}
+            >
+              {index === actionIndex ? "› " : "  "}
+              {action.prompt}
+            </text>
+          ))}
+          <text fg={tokens.textDim} onMouseUp={onBack}>
+            {"  "}‹ back
+          </text>
+        </box>
+      ) : null}
+    </box>
+  );
+}

package/src/components/MenuBar.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MenuBar } from "./MenuBar";
+
+export const meta: StoryMeta = { title: "MenuBar" };
+
+const callbacks = { onToggle: () => {}, onSettings: () => {}, onKeybinds: () => {} };
+
+function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box
+      style={{ flexDirection: "column", width: "100%", height: "100%", justifyContent: "flex-end" }}
+    >
+      {children}
+    </box>
+  );
+}
+
+export const Closed: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open={false} version="0.1.0-alpha.32" {...callbacks} />
+    </BottomFrame>
+  ),
+  size: { width: 60, height: 8 },
+};
+
+export const Open: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open version="0.1.0-alpha.32" {...callbacks} />
+    </BottomFrame>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 8 },
+};

package/src/components/MenuBar.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface MenuBarProps {
+  open: boolean;
+  version: string;
+  /** The transient status line, shown between the menu and the version. */
+  status?: string;
+  onToggle: () => void;
+  onSettings: () => void;
+  onKeybinds: () => void;
+  theme?: Theme;
+}
+
+const DROPUP_OPTION_ROWS = 2;
+
+export function MenuBar({
+  open,
+  version,
+  status,
+  onToggle,
+  onSettings,
+  onKeybinds,
+  theme,
+}: MenuBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { height: terminalHeight } = useTerminalDimensions();
+  const dropupHeight = DROPUP_OPTION_ROWS + 2;
+  return (
+    <>
+      {open ? (
+        <box
+          style={{
+            position: "absolute",
+            left: 1,
+            top: Math.max(0, terminalHeight - 1 - dropupHeight),
+            width: 16,
+            height: dropupHeight,
+            border: true,
+            borderStyle: FRAME_BORDER_STYLE,
+            borderColor: tokens.text,
+            flexDirection: "column",
+          }}
+        >
+          <box onMouseUp={onSettings}>
+            <text fg={tokens.text}> Settings</text>
+          </box>
+          <box onMouseUp={onKeybinds}>
+            <text fg={tokens.text}> Keybinds</text>
+          </box>
+        </box>
+      ) : null}
+      <box
+        style={{
+          flexDirection: "row",
+          height: 1,
+          backgroundColor: tokens.panel,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <box onMouseUp={onToggle}>
+          <text fg={tokens.textDim}>menu</text>
+        </box>
+        {status ? <text fg={tokens.accent}>{`  ${status}`}</text> : null}
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>v{version}</text>
+      </box>
+    </>
+  );
+}

package/src/components/PlanSheet.stories.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { buildDisplay } from "../view-plan";
+import { PlanSheet } from "./PlanSheet";
+import { FIXTURE_PLAN, fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "PlanSheet" };
+
+const callbacks = { onLineActivate: () => {} };
+
+// a working copy with the context paragraph cut, so it renders as a del block
+const CUT_WORKING = FIXTURE_PLAN.replace("The daemon persists sessions to disk atomically.\n", "");
+
+export const AnnotatedPlan: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={fixtureMarks()}
+      cursor={2}
+      activeSpan={null}
+      compose={null}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.markCommentBackground, DARK.cursorBackground],
+  size: { width: 90, height: 28 },
+};
+
+export const SpanSelection: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={null}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 90, height: 28 },
+};
+
+export const InlineCompose: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={{
+        kind: "comment",
+        displayIndex: 2,
+        quote: "The daemon",
+        draft: { text: "Which daemon?", onInput: () => {}, onSave: () => {}, onCancel: () => {} },
+      }}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  size: { width: 90, height: 30 },
+};
+
+/** Span mode shows the marker-actions toolbar inline below the marked block. */
+// The marker popover floats as an absolute overlay; the virtual terminal used
+// for story snapshots cannot composite it, so it is covered by the standalone
+// MarkerPopover stories and a functional App test rather than a PlanSheet snapshot.
+
+/** A cut block renders struck-through and grayed inline - no red, no [cut] tag. */
+export const WithCutBlock: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={buildDisplay(FIXTURE_PLAN, CUT_WORKING)}
+      marks={new Map()}
+      cursor={0}
+      activeSpan={null}
+      compose={null}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 90, height: 28 },
+};
+
+export const OrphanBanner: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={0}
+      activeSpan={null}
+      compose={null}
+      popover={null}
+      editOrphanCount={1}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 90, height: 28 },
+};