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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.56",
+  "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.56",
-    "@cueloop/extension-api": "0.1.0-alpha.56",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.56",
-    "@cueloop/schema": "0.1.0-alpha.56",
+    "@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

@@ -228,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();