@cueloop/client 0.1.0-alpha.56 → 0.1.0-alpha.59

package/src/components/PrototypeSheet.tsx

@@ -50,6 +50,9 @@ export interface PrototypeSheetProps {
 type SheetStatus = "loading" | "ready" | "unsupported" | "error";
 
 const POPOVER_ROWS = 3;
+/** Compose-card width, so the floating composer reads like the plan/diff one
+ *  instead of shrinking to its content. */
+const COMPOSE_COLS = 46;
 const PROTOTYPE_IMAGE_ID = 811;
 /** Page pixels scrolled per wheel notch. */
 const SCROLL_STEP = 240;
@@ -143,7 +146,11 @@ function PrototypeSheetImpl({
   const [status, setStatus] = useState<SheetStatus>("loading");
   const [errorMessage, setErrorMessage] = useState<string>("");
   const [selected, setSelected] = useState<PrototypeElement | null>(null);
-  const [overlayCell, setOverlayCell] = useState<{ left: number; top: number } | null>(null);
+  const [overlayCell, setOverlayCell] = useState<{
+    left: number;
+    top: number;
+    regionColumns: number;
+  } | null>(null);
   const [actionsOpen, setActionsOpen] = useState(false);
   const [composing, setComposing] = useState(false);
   const [draftText, setDraftText] = useState("");
@@ -289,6 +296,7 @@ function PrototypeSheetImpl({
       setOverlayCell({
         left: Math.max(0, cell.column - geometry.x),
         top: Math.max(0, topRaw < POPOVER_ROWS ? topRaw + 1 : topRaw - POPOVER_ROWS),
+        regionColumns: geometry.width,
       });
       setActionsOpen(false);
       setComposing(false);
@@ -325,6 +333,15 @@ function PrototypeSheetImpl({
     flexDirection: "column" as const,
     backgroundColor: tokens.elevated,
   };
+  // keep the composer inside the region: never wider than the region, and
+  // clamped so it cannot run off either edge on a narrow preview
+  const regionColumns = overlayCell?.regionColumns ?? 0;
+  const composeWidth = regionColumns > 0 ? Math.min(COMPOSE_COLS, regionColumns) : COMPOSE_COLS;
+  const composeStyle = {
+    ...overlayStyle,
+    left: Math.max(0, Math.min(overlayStyle.left, regionColumns - composeWidth)),
+    width: composeWidth,
+  };
 
   return (
     <box
@@ -372,7 +389,7 @@ function PrototypeSheetImpl({
         </box>
       ) : null}
       {selected && composing ? (
-        <box style={overlayStyle}>
+        <box style={composeStyle}>
           <AnnotationCard
             kind="comment"
             quote={selected.quote}

package/src/components/plan-sheet-run-style.ts

@@ -0,0 +1,86 @@
+import { createTextAttributes } from "@opentui/core";
+import type { DisplayBlock, StyleRun } from "../view-plan";
+import type { Theme } from "../theme";
+
+/** A cut block reads as removed: struck through and grayed, never red. */
+const CUT_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
+
+/** Inline-emphasis attributes, reused per run so the render loop allocates none. */
+const STRONG_ATTRIBUTES = createTextAttributes({ bold: true });
+const EM_ATTRIBUTES = createTextAttributes({ italic: true });
+const STRIKE_ATTRIBUTES = createTextAttributes({ strikethrough: true });
+const LINK_ATTRIBUTES = createTextAttributes({ underline: true });
+/** Block-level base attributes: headings read bold, blockquotes read italic. */
+const HEADING_ATTRIBUTES = createTextAttributes({ bold: true });
+const QUOTE_ATTRIBUTES = createTextAttributes({ italic: true });
+
+interface BlockBaseStyle {
+  baseFg: string;
+  baseAttributes: number;
+}
+
+function isHeadingBlock(block: DisplayBlock): boolean {
+  return block.kind === "h1" || block.kind === "h2" || block.kind === "h3";
+}
+
+// headings are all bold; level reads from descending brightness alone (a
+// terminal cannot scale font size), leaving the salmon accent to annotations
+function headingForeground(block: DisplayBlock, tokens: Theme): string | undefined {
+  if (block.kind === "h1") return tokens.text;
+  if (block.kind === "h2") return tokens.textMuted;
+  if (block.kind === "h3") return tokens.textDim;
+  return undefined;
+}
+
+function blockBaseStyle(block: DisplayBlock, tokens: Theme): BlockBaseStyle {
+  const isHeading = isHeadingBlock(block);
+  const isQuote = block.kind === "quote";
+  const headingFg = headingForeground(block, tokens);
+  // block-level base: headings bold, quotes muted italic; inline roles compose on top
+  const baseFg = headingFg ?? (isQuote ? tokens.textMuted : tokens.text);
+  const baseAttributes = (isHeading ? HEADING_ATTRIBUTES : 0) | (isQuote ? QUOTE_ATTRIBUTES : 0);
+  return { baseFg, baseAttributes };
+}
+
+function inlineRoleStyle(
+  run: StyleRun,
+  base: BlockBaseStyle,
+  tokens: Theme,
+): { fg?: string; bg?: string; attributes?: number } {
+  const { baseFg, baseAttributes } = base;
+  const withBase = (roleAttributes: number): number => baseAttributes | roleAttributes;
+  switch (run.role) {
+    case "ins":
+      return { fg: tokens.insertedForeground, attributes: baseAttributes || undefined };
+    case "del":
+      return { fg: tokens.deletedForeground };
+    case "mark-comment":
+      return { fg: tokens.text, bg: tokens.markCommentBackground };
+    case "mark-focus":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    case "kspan":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    case "strong":
+      return { fg: baseFg, attributes: withBase(STRONG_ATTRIBUTES) };
+    case "em":
+      return { fg: baseFg, attributes: withBase(EM_ATTRIBUTES) };
+    case "code":
+      return { fg: tokens.text, bg: tokens.elevated };
+    case "strike":
+      return { fg: tokens.textMuted, attributes: withBase(STRIKE_ATTRIBUTES) };
+    case "link":
+      return { fg: tokens.blue, attributes: withBase(LINK_ATTRIBUTES) };
+    default:
+      return { fg: baseFg, attributes: baseAttributes || undefined };
+  }
+}
+
+export function runStyle(
+  run: StyleRun,
+  block: DisplayBlock,
+  tokens: Theme,
+): { fg?: string; bg?: string; attributes?: number } {
+  // a cut block reads as removed: every run struck through and grayed, never red
+  if (block.type === "del") return { fg: tokens.textDim, attributes: CUT_ATTRIBUTES };
+  return inlineRoleStyle(run, blockBaseStyle(block, tokens), tokens);
+}

package/src/config.ts

@@ -160,6 +160,63 @@ function parseActions(raw: unknown): QuickAction[] | undefined {
   return actions.length ? actions : undefined;
 }
 
+function mergeAuthors(target: Record<string, string>, raw: unknown): void {
+  const authors = raw as Record<string, unknown> | undefined;
+  if (!authors) return;
+  for (const [id, value] of Object.entries(authors)) {
+    if (typeof value === "string") target[id] = value;
+  }
+}
+
+function mergeKeys(target: Record<string, string[]>, raw: unknown): void {
+  const keys = raw as KeymapConfig | undefined;
+  if (!keys) return;
+  for (const [action, combo] of Object.entries(keys)) {
+    target[action] = Array.isArray(combo) ? combo : [combo];
+  }
+}
+
+function mergeAutoClose(target: CueloopConfig["ui"], value: unknown): void {
+  if (value === undefined) return;
+  if (value === "off") target.autoClose = "off";
+  else if (typeof value === "number" && value >= 0) target.autoClose = value;
+}
+
+function mergeUi(target: CueloopConfig["ui"], raw: unknown): void {
+  const ui = raw as
+    | { auto_close?: unknown; editor?: unknown; review_width?: unknown; review_state?: unknown }
+    | undefined;
+  if (!ui) return;
+  mergeAutoClose(target, ui.auto_close);
+  if (typeof ui.editor === "string" && ui.editor.trim()) target.editor = ui.editor.trim();
+  if (typeof ui.review_width === "number" && Number.isFinite(ui.review_width)) {
+    target.reviewWidth = clampWidth(ui.review_width);
+  }
+  if (
+    ui.review_state === "expanded" ||
+    ui.review_state === "compact" ||
+    ui.review_state === "hidden"
+  ) {
+    target.reviewState = ui.review_state;
+  }
+}
+
+function mergeObsidian(target: ObsidianConfig, raw: unknown): void {
+  const integrations = raw as Record<string, unknown> | undefined;
+  const obsidian = integrations?.["obsidian"] as Record<string, unknown> | undefined;
+  if (!obsidian) return;
+  if (typeof obsidian["vault"] === "string") target.vault = obsidian["vault"];
+  if (typeof obsidian["folder"] === "string") target.folder = obsidian["folder"];
+  if (typeof obsidian["filenameFormat"] === "string")
+    target.filenameFormat = obsidian["filenameFormat"];
+  const separator = obsidian["separator"];
+  if (separator === "space" || separator === "dash" || separator === "underscore")
+    target.separator = separator;
+  const exportOn = obsidian["exportOn"];
+  if (exportOn === "approve" || exportOn === "resolve" || exportOn === "manual")
+    target.exportOn = exportOn;
+}
+
 function layer(base: CueloopConfig, raw: Record<string, unknown>): CueloopConfig {
   const out: CueloopConfig = {
     keys: { ...base.keys },
@@ -172,53 +229,10 @@ function layer(base: CueloopConfig, raw: Record<string, unknown>): CueloopConfig
   };
   const actions = parseActions(raw["actions"]);
   if (actions) out.actions = actions;
-  const authors = raw["authors"] as Record<string, unknown> | undefined;
-  if (authors) {
-    for (const [id, value] of Object.entries(authors)) {
-      if (typeof value === "string") out.authors[id] = value;
-    }
-  }
-  const keys = raw["keys"] as KeymapConfig | undefined;
-  if (keys) {
-    for (const [action, combo] of Object.entries(keys)) {
-      out.keys[action] = Array.isArray(combo) ? combo : [combo];
-    }
-  }
-  const ui = raw["ui"] as
-    | { auto_close?: unknown; editor?: unknown; review_width?: unknown; review_state?: unknown }
-    | undefined;
-  if (ui && ui.auto_close !== undefined) {
-    if (ui.auto_close === "off") out.ui.autoClose = "off";
-    else if (typeof ui.auto_close === "number" && ui.auto_close >= 0)
-      out.ui.autoClose = ui.auto_close;
-  }
-  if (ui && typeof ui.editor === "string" && ui.editor.trim()) out.ui.editor = ui.editor.trim();
-  if (ui && typeof ui.review_width === "number" && Number.isFinite(ui.review_width)) {
-    out.ui.reviewWidth = clampWidth(ui.review_width);
-  }
-  if (
-    ui &&
-    (ui.review_state === "expanded" ||
-      ui.review_state === "compact" ||
-      ui.review_state === "hidden")
-  ) {
-    out.ui.reviewState = ui.review_state;
-  }
-  const integrations = raw["integrations"] as Record<string, unknown> | undefined;
-  const obsidian = integrations?.["obsidian"] as Record<string, unknown> | undefined;
-  if (obsidian) {
-    const obsidianConfig = out.integrations.obsidian;
-    if (typeof obsidian["vault"] === "string") obsidianConfig.vault = obsidian["vault"];
-    if (typeof obsidian["folder"] === "string") obsidianConfig.folder = obsidian["folder"];
-    if (typeof obsidian["filenameFormat"] === "string")
-      obsidianConfig.filenameFormat = obsidian["filenameFormat"];
-    const separator = obsidian["separator"];
-    if (separator === "space" || separator === "dash" || separator === "underscore")
-      obsidianConfig.separator = separator;
-    const exportOn = obsidian["exportOn"];
-    if (exportOn === "approve" || exportOn === "resolve" || exportOn === "manual")
-      obsidianConfig.exportOn = exportOn;
-  }
+  mergeAuthors(out.authors, raw["authors"]);
+  mergeKeys(out.keys, raw["keys"]);
+  mergeUi(out.ui, raw["ui"]);
+  mergeObsidian(out.integrations.obsidian, raw["integrations"]);
   return out;
 }