@cueloop/client 0.1.0-alpha.54 → 0.1.0-alpha.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.54",
+  "version": "0.1.0-alpha.58",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -26,10 +26,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.54",
-    "@cueloop/extension-api": "0.1.0-alpha.54",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.54",
-    "@cueloop/schema": "0.1.0-alpha.54",
+    "@cueloop/daemon": "0.1.0-alpha.58",
+    "@cueloop/extension-api": "0.1.0-alpha.58",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.58",
+    "@cueloop/schema": "0.1.0-alpha.58",
     "@opentui/core": "^0.5.8",
     "@opentui/keymap": "0.5.8",
     "@opentui/react": "^0.5.8",

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/prototype-browser.ts

@@ -140,6 +140,16 @@ export async function launchPrototypeRenderer(options: LaunchOptions): Promise<P
     // `load` waits for images and styles but skips networkidle0's fixed 500ms
     // idle window, which a static local file would otherwise always pay
     await page.goto(pathToFileURL(options.filePath).href, { waitUntil: "load" });
+    // Render the mockup on the terminal's own surface rather than on an opaque
+    // page: strip the root background so it never paints a square box, and the
+    // capture (taken with alpha, below) lets the active terminal theme show
+    // through around the mockup's own components - the prototype emerges into
+    // whatever theme is running instead of sitting in a grey card.
+    await page.evaluate(() => {
+      for (const element of [document.documentElement, document.body]) {
+        element?.style.setProperty("background", "transparent", "important");
+      }
+    });
   } catch (error) {
     await page.close().catch(() => undefined);
     throw error;
@@ -148,7 +158,13 @@ export async function launchPrototypeRenderer(options: LaunchOptions): Promise<P
   return {
     viewport: options.viewport,
     async screenshot() {
-      const buffer = await page.screenshot({ type: "png", encoding: "binary" });
+      // omitBackground keeps the alpha from the stripped page background, so the
+      // terminal composites the mockup over its own theme surface.
+      const buffer = await page.screenshot({
+        type: "png",
+        encoding: "binary",
+        omitBackground: true,
+      });
       return new Uint8Array(buffer as Buffer);
     },
     async elementAt(cssX, cssY) {
@@ -212,7 +228,12 @@ function elementAtScript(x: number, y: number): unknown {
   };
   const hit = document.elementFromPoint(x, y);
   if (!(hit instanceof Element)) return null;
-  const node = componentRoot(hit);
+  // A click on an interactive control anchors to that control - a button in a
+  // grid is the target, not the grid. Everything else climbs to its component.
+  const control = hit.closest(
+    "button, a, [role='button'], input, select, textarea, label, summary",
+  );
+  const node = control ?? componentRoot(hit);
   const selector = selectorFor(node);
   if (!selector) return null;
   const text = (node.textContent || "").replace(/\s+/g, " ").trim();