@tangle-network/sandbox-ui 7.0.4 → 7.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -127,6 +127,7 @@
     "./globals.css": "./dist/globals.css",
     "./tokens.css": "./dist/tokens.css",
     "./tailwind.css": "./dist/tailwind.css",
+    "./content-share": "./tests/visual/content-share.mjs",
     "./tailwind": "./tailwind.config.cjs",
     "./run/record": {
       "import": "./dist/run/record.js",
@@ -149,7 +150,8 @@
   },
   "files": [
     "dist",
-    "tailwind.config.cjs"
+    "tailwind.config.cjs",
+    "tests/visual/content-share.mjs"
   ],
   "peerDependencies": {
     "@drewstone/agent-record": "^2.0.0 || ^3.0.0",
@@ -157,7 +159,7 @@
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^5.2.0",
     "@tangle-network/brand": "^1.31.3",
-    "@tangle-network/charts": "^4.0.15",
+    "@tangle-network/charts": "^4.0.21",
     "@tangle-network/ui": "^11.51.12",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
@@ -266,7 +268,7 @@
     "@tangle-network/agent-interface": "5.10.2",
     "@tangle-network/agent-runtime": "3.0.32",
     "@tangle-network/brand": "^1.31.3",
-    "@tangle-network/charts": "^4.0.15",
+    "@tangle-network/charts": "^4.0.21",
     "@tangle-network/ui": "^11.51.12",
     "@tanstack/react-query": "^5.104.5",
     "@testing-library/dom": "^10.4.2",

package/tests/visual/content-share.mjs

@@ -0,0 +1,35 @@
+/** Primary content owns the screen (Drew 11-04, 11-06): the open panel sits under one bar of at most 48 px, fills at
+ * least 85 % of the viewport, and above its first chart, table, canvas, grid, code or conversation sits at most one title
+ * and that chart's legend (112 px), never stacked page, section or filter headers. One measure for every app's proof;
+ * moved here from the Lab viewer (tangle-network/disco #3159) so the Lab page and disco.tangle.tools read the same rule. */
+export const BAR_MAX = 48, SHARE_MIN = 0.85, INSET_MAX = 112
+
+/** The open panel: a shown tab panel, or whatever the host marks `data-content-panel`. */
+export const PANEL = '[role="tabpanel"]:not([hidden]), [data-content-panel]'
+/** What counts as content: a drawing, a table, a log, an agent graph or grid, code, or a conversation (`data-primary-content`). */
+export const CONTENT = 'svg, canvas, table, [role="log"], [role="tree"], .react-flow, .ag-grid, .sandbox-code-view, [data-primary-content]'
+
+export const measureContentShare = (page, panel = PANEL, content = CONTENT) => page.evaluate(([panelSelector, contentSelector]) => {
+  const vh = innerHeight, vw = innerWidth
+  const panel = document.querySelector(panelSelector)
+  if (!panel) return { panel: null }
+  const box = panel.getBoundingClientRect()
+  const top = Math.max(0, box.top), bottom = Math.min(vh, box.bottom)
+  let first = null
+  for (const element of panel.querySelectorAll(contentSelector)) {
+    const rect = element.getBoundingClientRect()
+    if (rect.width < vw * 0.25 || rect.height < 40 || rect.bottom <= 0 || rect.top >= vh) continue
+    first = Math.min(first ?? Infinity, Math.max(0, rect.top))
+  }
+  return { panel: { top: Math.round(top), bottom: Math.round(bottom) }, share: +((bottom - top) / vh).toFixed(3), contentTop: first === null ? null : Math.round(first), viewport: [vw, vh] }
+}, [panel, content])
+
+export const contentShareFailures = (where, m) => {
+  if (!m.panel) return [`${where}: no open content panel`]
+  const failures = []
+  if (m.panel.top > BAR_MAX) failures.push(`${where}: ${m.panel.top} px of chrome above the panel (at most ${BAR_MAX})`)
+  if (m.share < SHARE_MIN) failures.push(`${where}: panel fills ${(m.share * 100).toFixed(1)}% of the viewport (at least ${SHARE_MIN * 100}%)`)
+  if (m.contentTop === null) failures.push(`${where}: no chart, table, canvas, grid, code or conversation at least a quarter of the viewport wide`)
+  else if (m.contentTop - m.panel.top > INSET_MAX) failures.push(`${where}: first content starts ${m.contentTop - m.panel.top} px into the panel (at most ${INSET_MAX})`)
+  return failures
+}

package/dist/run-CpJ_COuz.js

@@ -1,5 +0,0 @@
-import "./trace-workspace-EArXc0uP.js";
-import "./record-Cc_WNtG8.js";
-import { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon as RunStatusIcon$1, TaskList, ToolCallFeed, isOpen, parseToolEvent, runStatus as runStatus$1, showsTaskPriority, statusMeta as statusMeta$1, taskProgress, taskStatus } from "@tangle-network/ui/run";
-import { LatestEvents } from "@tangle-network/charts/react/agent-graph";
-export { showsTaskPriority as _, InlineToolItem as a, taskStatus as b, RunPhaseList as c, RunStatusIcon$1 as d, TaskList as f, runStatus$1 as g, parseToolEvent as h, InlineThinkingItem as i, RunRowShell as l, isOpen as m, ApprovalDiffSummary as n, LiveDuration as o, ToolCallFeed as p, ExpandedToolDetail as r, RunGroup as s, ApprovalCard as t, RunRowStatusDot as u, statusMeta$1 as v, LatestEvents as x, taskProgress as y };