@opengeni/react 4.0.1-canary.0 → 4.0.1-canary.2

package/dist/components/markdown-table-layout.d.ts

@@ -0,0 +1,9 @@
+export declare function markdownTableWidth({ columnLeft, columnWidth, contentLeft, contentRight, preferredWidth, }: {
+    columnLeft: number;
+    columnWidth: number;
+    contentLeft: number;
+    contentRight: number;
+    preferredWidth: number;
+}): number;
+/** Loaded only for assistant tables. Keep prose and nested scroll owners intact. */
+export declare function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLTableElement): (() => void) | undefined;

package/dist/index.js

@@ -108,7 +108,7 @@ import {
   useWorkspaceModelCatalog,
   userMessageLikelyNeedsDisclosure,
   v4aToGitFileDiff
-} from "./chunk-HO6X4FHG.js";
+} from "./chunk-CQG7YUJB.js";
 import "./chunk-YBM6CQRU.js";
 import "./chunk-5M6VTFJ5.js";
 import "./chunk-ZYRGEKWS.js";

package/dist/interaction.js

@@ -1,9 +1,3 @@
-import {
-  ComputerViewer,
-  useComputerFrameStream,
-  useComputerSession,
-  useComputerSessions
-} from "./chunk-BV5A4OTE.js";
 import {
   BrowserViewer,
   useAttachedBrowsers,
@@ -14,6 +8,12 @@ import {
   useBrowserSessions,
   useSiteAuthConnections
 } from "./chunk-24M4YBCL.js";
+import {
+  ComputerViewer,
+  useComputerFrameStream,
+  useComputerSession,
+  useComputerSessions
+} from "./chunk-BV5A4OTE.js";
 import {
   useInteractionInterventions,
   useInteractionInvalidation

package/dist/markdown-table-layout-3Z3AWBY7.js

@@ -0,0 +1,71 @@
+// src/components/markdown-table-layout.ts
+function markdownTableWidth({
+  columnLeft,
+  columnWidth,
+  contentLeft,
+  contentRight,
+  preferredWidth
+}) {
+  const center = columnLeft + columnWidth / 2;
+  const available = 2 * Math.min(center - contentLeft, contentRight - center);
+  return Math.max(columnWidth, Math.min(preferredWidth, available));
+}
+function observeMarkdownTableLayout(wrapper, table) {
+  const body = wrapper.parentElement;
+  const scroller = body?.closest("[data-og-wide-table-message]")?.closest("[data-og-timeline-scroller]");
+  if (!body?.classList.contains("og-markdown-body") || !scroller) return;
+  let width = null;
+  const reset = () => {
+    width = null;
+    wrapper.style.width = "";
+    wrapper.style.maxWidth = "";
+    wrapper.style.marginInline = "";
+  };
+  const measure = () => {
+    for (let ancestor = body; ancestor && ancestor !== scroller; ancestor = ancestor.parentElement) {
+      if (getComputedStyle(ancestor).overflowX !== "visible") {
+        reset();
+        return;
+      }
+    }
+    const column = body.getBoundingClientRect();
+    const panel = scroller.getBoundingClientRect();
+    const panelStyle = getComputedStyle(scroller);
+    const left = panel.left + scroller.clientLeft + parseFloat(panelStyle.paddingLeft);
+    const right = panel.left + scroller.clientLeft + scroller.clientWidth - parseFloat(panelStyle.paddingRight);
+    const previousWidth = table.style.width;
+    let preferred;
+    try {
+      table.style.width = "max-content";
+      preferred = table.getBoundingClientRect().width;
+    } finally {
+      table.style.width = previousWidth;
+    }
+    const next = markdownTableWidth({
+      columnLeft: column.left,
+      columnWidth: column.width,
+      contentLeft: left,
+      contentRight: right,
+      preferredWidth: preferred
+    });
+    if (width !== null && Math.abs(width - next) < 0.5) return;
+    width = next;
+    wrapper.style.width = `${width}px`;
+    wrapper.style.maxWidth = "none";
+    wrapper.style.marginInline = `calc((100% - ${width}px) / 2)`;
+  };
+  measure();
+  const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+  observer?.observe(scroller);
+  observer?.observe(body);
+  observer?.observe(table);
+  return () => {
+    observer?.disconnect();
+    reset();
+  };
+}
+export {
+  markdownTableWidth,
+  observeMarkdownTableLayout
+};
+//# sourceMappingURL=markdown-table-layout-3Z3AWBY7.js.map

package/dist/markdown-table-layout-3Z3AWBY7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/markdown-table-layout.ts"],"sourcesContent":["export function markdownTableWidth({\n  columnLeft,\n  columnWidth,\n  contentLeft,\n  contentRight,\n  preferredWidth,\n}: {\n  columnLeft: number;\n  columnWidth: number;\n  contentLeft: number;\n  contentRight: number;\n  preferredWidth: number;\n}): number {\n  const center = columnLeft + columnWidth / 2;\n  const available = 2 * Math.min(center - contentLeft, contentRight - center);\n  return Math.max(columnWidth, Math.min(preferredWidth, available));\n}\n\n/** Loaded only for assistant tables. Keep prose and nested scroll owners intact. */\nexport function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLTableElement) {\n  const body = wrapper.parentElement;\n  const scroller = body\n    ?.closest(\"[data-og-wide-table-message]\")\n    ?.closest<HTMLElement>(\"[data-og-timeline-scroller]\");\n  if (!body?.classList.contains(\"og-markdown-body\") || !scroller) return;\n\n  let width: number | null = null;\n  const reset = () => {\n    width = null;\n    wrapper.style.width = \"\";\n    wrapper.style.maxWidth = \"\";\n    wrapper.style.marginInline = \"\";\n  };\n  const measure = () => {\n    // Intermediate clipped/scrollable surfaces own their own content bounds.\n    for (\n      let ancestor: HTMLElement | null = body;\n      ancestor && ancestor !== scroller;\n      ancestor = ancestor.parentElement\n    ) {\n      if (getComputedStyle(ancestor).overflowX !== \"visible\") {\n        reset();\n        return;\n      }\n    }\n    const column = body.getBoundingClientRect();\n    const panel = scroller.getBoundingClientRect();\n    const panelStyle = getComputedStyle(scroller);\n    const left = panel.left + scroller.clientLeft + parseFloat(panelStyle.paddingLeft);\n    const right =\n      panel.left + scroller.clientLeft + scroller.clientWidth - parseFloat(panelStyle.paddingRight);\n\n    // Measure the original table, preserving its wrapping and TSV copy DOM.\n    const previousWidth = table.style.width;\n    let preferred: number;\n    try {\n      table.style.width = \"max-content\";\n      preferred = table.getBoundingClientRect().width;\n    } finally {\n      table.style.width = previousWidth;\n    }\n    const next = markdownTableWidth({\n      columnLeft: column.left,\n      columnWidth: column.width,\n      contentLeft: left,\n      contentRight: right,\n      preferredWidth: preferred,\n    });\n    if (width !== null && Math.abs(width - next) < 0.5) return;\n    width = next;\n    wrapper.style.width = `${width}px`;\n    wrapper.style.maxWidth = \"none\";\n    wrapper.style.marginInline = `calc((100% - ${width}px) / 2)`;\n  };\n\n  measure();\n  const observer = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(measure);\n  observer?.observe(scroller);\n  observer?.observe(body);\n  observer?.observe(table);\n  return () => {\n    observer?.disconnect();\n    reset();\n  };\n}\n"],"mappings":";AAAO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMW;AACT,QAAM,SAAS,aAAa,cAAc;AAC1C,QAAM,YAAY,IAAI,KAAK,IAAI,SAAS,aAAa,eAAe,MAAM;AAC1E,SAAO,KAAK,IAAI,aAAa,KAAK,IAAI,gBAAgB,SAAS,CAAC;AAClE;AAGO,SAAS,2BAA2B,SAAyB,OAAyB;AAC3F,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,MACb,QAAQ,8BAA8B,GACtC,QAAqB,6BAA6B;AACtD,MAAI,CAAC,MAAM,UAAU,SAAS,kBAAkB,KAAK,CAAC,SAAU;AAEhE,MAAI,QAAuB;AAC3B,QAAM,QAAQ,MAAM;AAClB,YAAQ;AACR,YAAQ,MAAM,QAAQ;AACtB,YAAQ,MAAM,WAAW;AACzB,YAAQ,MAAM,eAAe;AAAA,EAC/B;AACA,QAAM,UAAU,MAAM;AAEpB,aACM,WAA+B,MACnC,YAAY,aAAa,UACzB,WAAW,SAAS,eACpB;AACA,UAAI,iBAAiB,QAAQ,EAAE,cAAc,WAAW;AACtD,cAAM;AACN;AAAA,MACF;AAAA,IACF;AACA,UAAM,SAAS,KAAK,sBAAsB;AAC1C,UAAM,QAAQ,SAAS,sBAAsB;AAC7C,UAAM,aAAa,iBAAiB,QAAQ;AAC5C,UAAM,OAAO,MAAM,OAAO,SAAS,aAAa,WAAW,WAAW,WAAW;AACjF,UAAM,QACJ,MAAM,OAAO,SAAS,aAAa,SAAS,cAAc,WAAW,WAAW,YAAY;AAG9F,UAAM,gBAAgB,MAAM,MAAM;AAClC,QAAI;AACJ,QAAI;AACF,YAAM,MAAM,QAAQ;AACpB,kBAAY,MAAM,sBAAsB,EAAE;AAAA,IAC5C,UAAE;AACA,YAAM,MAAM,QAAQ;AAAA,IACtB;AACA,UAAM,OAAO,mBAAmB;AAAA,MAC9B,YAAY,OAAO;AAAA,MACnB,aAAa,OAAO;AAAA,MACpB,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gBAAgB;AAAA,IAClB,CAAC;AACD,QAAI,UAAU,QAAQ,KAAK,IAAI,QAAQ,IAAI,IAAI,IAAK;AACpD,YAAQ;AACR,YAAQ,MAAM,QAAQ,GAAG,KAAK;AAC9B,YAAQ,MAAM,WAAW;AACzB,YAAQ,MAAM,eAAe,gBAAgB,KAAK;AAAA,EACpD;AAEA,UAAQ;AACR,QAAM,WAAW,OAAO,mBAAmB,cAAc,SAAY,IAAI,eAAe,OAAO;AAC/F,YAAU,QAAQ,QAAQ;AAC1B,YAAU,QAAQ,IAAI;AACtB,YAAU,QAAQ,KAAK;AACvB,SAAO,MAAM;AACX,cAAU,WAAW;AACrB,UAAM;AAAA,EACR;AACF;","names":[]}

package/dist/session-ui.js

@@ -13,7 +13,7 @@ import {
   sessionChromeGoalPillLabel,
   sessionChromeGoalPillState,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-HO6X4FHG.js";
+} from "./chunk-CQG7YUJB.js";
 import "./chunk-YBM6CQRU.js";
 import "./chunk-5M6VTFJ5.js";
 import "./chunk-ZYRGEKWS.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "4.0.1-canary.0",
+  "version": "4.0.1-canary.2",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -120,7 +120,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^4.0.1-canary.0",
+    "@opengeni/sdk": "^4.0.1-canary.2",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/markdown-table-layout.ts

@@ -0,0 +1,85 @@
+export function markdownTableWidth({
+  columnLeft,
+  columnWidth,
+  contentLeft,
+  contentRight,
+  preferredWidth,
+}: {
+  columnLeft: number;
+  columnWidth: number;
+  contentLeft: number;
+  contentRight: number;
+  preferredWidth: number;
+}): number {
+  const center = columnLeft + columnWidth / 2;
+  const available = 2 * Math.min(center - contentLeft, contentRight - center);
+  return Math.max(columnWidth, Math.min(preferredWidth, available));
+}
+
+/** Loaded only for assistant tables. Keep prose and nested scroll owners intact. */
+export function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLTableElement) {
+  const body = wrapper.parentElement;
+  const scroller = body
+    ?.closest("[data-og-wide-table-message]")
+    ?.closest<HTMLElement>("[data-og-timeline-scroller]");
+  if (!body?.classList.contains("og-markdown-body") || !scroller) return;
+
+  let width: number | null = null;
+  const reset = () => {
+    width = null;
+    wrapper.style.width = "";
+    wrapper.style.maxWidth = "";
+    wrapper.style.marginInline = "";
+  };
+  const measure = () => {
+    // Intermediate clipped/scrollable surfaces own their own content bounds.
+    for (
+      let ancestor: HTMLElement | null = body;
+      ancestor && ancestor !== scroller;
+      ancestor = ancestor.parentElement
+    ) {
+      if (getComputedStyle(ancestor).overflowX !== "visible") {
+        reset();
+        return;
+      }
+    }
+    const column = body.getBoundingClientRect();
+    const panel = scroller.getBoundingClientRect();
+    const panelStyle = getComputedStyle(scroller);
+    const left = panel.left + scroller.clientLeft + parseFloat(panelStyle.paddingLeft);
+    const right =
+      panel.left + scroller.clientLeft + scroller.clientWidth - parseFloat(panelStyle.paddingRight);
+
+    // Measure the original table, preserving its wrapping and TSV copy DOM.
+    const previousWidth = table.style.width;
+    let preferred: number;
+    try {
+      table.style.width = "max-content";
+      preferred = table.getBoundingClientRect().width;
+    } finally {
+      table.style.width = previousWidth;
+    }
+    const next = markdownTableWidth({
+      columnLeft: column.left,
+      columnWidth: column.width,
+      contentLeft: left,
+      contentRight: right,
+      preferredWidth: preferred,
+    });
+    if (width !== null && Math.abs(width - next) < 0.5) return;
+    width = next;
+    wrapper.style.width = `${width}px`;
+    wrapper.style.maxWidth = "none";
+    wrapper.style.marginInline = `calc((100% - ${width}px) / 2)`;
+  };
+
+  measure();
+  const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(measure);
+  observer?.observe(scroller);
+  observer?.observe(body);
+  observer?.observe(table);
+  return () => {
+    observer?.disconnect();
+    reset();
+  };
+}

package/src/components/markdown.tsx

@@ -411,9 +411,27 @@ function MarkdownCodeBlock({ children }: { children?: ReactNode }) {
 }
 
 function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutRef<"table">) {
-  const tableRef = useRef<HTMLTableElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const table = tableRef.current;
+    if (!wrapper?.closest("[data-og-wide-table-message]") || !table) return;
+    let disposed = false;
+    let cleanup: (() => void) | undefined;
+    // Ordinary tables remain usable even if this optional layout chunk fails.
+    void import("./markdown-table-layout")
+      .then(({ observeMarkdownTableLayout }) => {
+        if (!disposed) cleanup = observeMarkdownTableLayout(wrapper, table);
+      })
+      .catch(() => {});
+    return () => {
+      disposed = true;
+      cleanup?.();
+    };
+  }, [children]);
   return (
-    <div className="group/copy relative mt-3 max-w-full first:mt-0">
+    <div ref={wrapperRef} className="group/copy relative mt-3 max-w-full first:mt-0">
       <div className="pointer-events-none absolute top-0 right-0 z-10">
         <div className="pointer-events-auto">
           <CopyButton

package/src/components/message-timeline.tsx

@@ -3273,7 +3273,12 @@ function AgentMessageRow({
         )
       }
     >
-      <div data-og-annotation-source-key={item.annotationSource?.eventId}>{body}</div>
+      <div
+        data-og-wide-table-message=""
+        data-og-annotation-source-key={item.annotationSource?.eventId}
+      >
+        {body}
+      </div>
     </CopyHoverFrame>
   );
 }