@xenosystem/blocks 0.13.31 → 0.13.32

package/dist/edit/index.js

@@ -7696,7 +7696,7 @@ var curveManifest = {
 
 // src/edit/curve/react/CurvePanelView.tsx
 import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
-import { Column as Column5, EmptyState as EmptyState4, StatusBar as StatusBar3, Text as Text5, TextButton as TextButton3, Toolbar as Toolbar3, ToolbarGroup } from "@xenosystem/components/chrome";
+import { Column as Column5, DrawnSurface, EmptyState as EmptyState4, StatusBar as StatusBar3, Text as Text5, TextButton as TextButton3, Toolbar as Toolbar3, ToolbarGroup } from "@xenosystem/components/chrome";
 
 // src/edit/curve/declaration.ts
 import { formatTick } from "@xenosystem/time-core";
@@ -7895,13 +7895,10 @@ function CurveSurface({ controller }) {
   const selected = new Set(state.selection.keys.map(keyRefId));
   const channels = state.curves?.channels ?? [];
   return /* @__PURE__ */ jsx7(
-    "div",
+    DrawnSurface,
     {
       ref: containerRef,
-      tabIndex: 0,
-      role: "application",
-      "aria-label": "Curve editor",
-      style: SURFACE,
+      label: "Curve editor",
       onWheel,
       onPointerDown,
       onPointerMove,
@@ -8026,15 +8023,6 @@ function Handles({
     ] }, side);
   }) });
 }
-var SURFACE = {
-  position: "relative",
-  flex: 1,
-  minHeight: 0,
-  overflow: "hidden",
-  outline: "none",
-  userSelect: "none",
-  touchAction: "none"
-};
 var CURVE_RUNTIME_UNITS = ["curve/Surface"];
 function curveRuntimeComponents(controller) {
   return { "curve/Surface": () => /* @__PURE__ */ jsx7(CurveSurface, { controller }) };
@@ -8646,7 +8634,7 @@ var viewportManifest = {
 
 // src/edit/viewport/react/ViewportPanelView.tsx
 import { useEffect as useEffect6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
-import { Badge as Badge4, Overlay, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
+import { Badge as Badge4, DrawnSurface as DrawnSurface2, Overlay, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
 
 // src/edit/viewport/declaration.ts
 function viewportViewState(c, options = {}) {
@@ -8730,12 +8718,11 @@ function ViewportSurface({ controller, overlays, background, children }) {
   }, [controller]);
   const hidden = new Set(state.hiddenSlots);
   return /* @__PURE__ */ jsxs7(
-    "div",
+    DrawnSurface2,
     {
       ref: containerRef,
-      tabIndex: 0,
-      role: "application",
-      "aria-label": "Viewport",
+      label: "Viewport",
+      focused: state.focused,
       onFocus: () => controller.setFocused(true),
       onBlur: () => controller.setFocused(false),
       onKeyDown: (event) => controller.routeKey("down", event.nativeEvent),
@@ -8756,19 +8743,7 @@ function ViewportSurface({ controller, overlays, background, children }) {
       onPointerLeave: (event) => controller.routePointer("leave", event.nativeEvent),
       onWheel: (event) => controller.routePointer("wheel", event.nativeEvent),
       onContextMenu: (event) => event.preventDefault(),
-      style: {
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        minHeight: 0,
-        overflow: "hidden",
-        outline: "none",
-        background: background ?? "transparent",
-        // A focused viewport must be visibly focused, or the element-scoped keyboard model is
-        // invisible to the person using it.
-        boxShadow: state.focused ? "inset 0 0 0 1px var(--xeno-control)" : void 0,
-        touchAction: "none"
-      },
+      style: { width: "100%", height: "100%", background: background ?? "transparent" },
       children: [
         /* @__PURE__ */ jsx8(
           "canvas",
@@ -11893,7 +11868,7 @@ var nodegraphManifest = {
 
 // src/edit/nodegraph/react/NodeGraphPanelView.tsx
 import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useSyncExternalStore as useSyncExternalStore9 } from "react";
-import { Column as Column8, EmptyState as EmptyState7, StatusBar as StatusBar7, Text as Text8, TextButton as TextButton6, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+import { Badge as Badge7, Column as Column8, DrawnSurface as DrawnSurface3, EmptyState as EmptyState7, Overlay as Overlay2, StatusBar as StatusBar7, Text as Text8, TextButton as TextButton6, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
 
 // src/edit/nodegraph/declaration.ts
 function nodegraphViewState(c, _options = {}) {
@@ -12066,13 +12041,10 @@ function NodeGraphSurface({ controller }) {
   const selectedNodes = new Set(state.selection.nodeIds);
   const selectedEdges = new Set(state.selection.edgeIds);
   return /* @__PURE__ */ jsxs10(
-    "div",
+    DrawnSurface3,
     {
       ref: containerRef,
-      tabIndex: 0,
-      role: "application",
-      "aria-label": "Node graph",
-      style: SURFACE2,
+      label: "Node graph",
       onWheel,
       onPointerDown,
       onPointerMove,
@@ -12124,7 +12096,7 @@ function NodeGraphSurface({ controller }) {
             ] })
           }
         ),
-        preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx11("div", { style: REASON, children: preview.connection.verdict.reason }) : null
+        preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx11(Overlay2, { anchor: "bottom-left", children: /* @__PURE__ */ jsx11(Badge7, { children: preview.connection.verdict.reason }) }) : null
       ]
     }
   );
@@ -12248,27 +12220,6 @@ function Port({
     )
   ] });
 }
-var SURFACE2 = {
-  position: "relative",
-  flex: 1,
-  minHeight: 0,
-  overflow: "hidden",
-  outline: "none",
-  userSelect: "none",
-  touchAction: "none"
-};
-var REASON = {
-  position: "absolute",
-  left: 8,
-  bottom: 8,
-  padding: "2px 6px",
-  fontSize: 10,
-  borderRadius: 2,
-  border: "1px solid var(--xeno-control)",
-  background: "var(--xeno-elevated)",
-  color: "var(--xeno-text)",
-  pointerEvents: "none"
-};
 var NODEGRAPH_RUNTIME_UNITS = ["nodegraph/Surface"];
 function nodegraphRuntimeComponents(controller) {
   return { "nodegraph/Surface": () => /* @__PURE__ */ jsx11(NodeGraphSurface, { controller }) };
@@ -13500,7 +13451,7 @@ var treeManifest = {
 // src/edit/tree/react/TreePanelView.tsx
 import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef9, useSyncExternalStore as useSyncExternalStore10 } from "react";
 import {
-  Badge as Badge7,
+  Badge as Badge8,
   Column as Column9,
   EmptyState as EmptyState8,
   ErrorState,
@@ -13850,15 +13801,15 @@ function TreePanelView({ controller, ...options }) {
       ] }),
       meta: /* @__PURE__ */ jsxs11(Fragment8, { children: [
         r.chipLoading ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: "loading\u2026" }) : null,
-        r.chipError ? /* @__PURE__ */ jsx12(Badge7, { tone: "error", children: r.chipErrorText }) : null,
+        r.chipError ? /* @__PURE__ */ jsx12(Badge8, { tone: "error", children: r.chipErrorText }) : null,
         r.chipLoadMore ? /* @__PURE__ */ jsx12(TextButton7, { onClick: () => ui10({ kind: "loadMore", id: r.id }), children: "load more\u2026" }) : null,
-        r.chipTruncated ? /* @__PURE__ */ jsx12(Badge7, { tone: "warning", children: r.chipTruncatedText }) : null,
+        r.chipTruncated ? /* @__PURE__ */ jsx12(Badge8, { tone: "warning", children: r.chipTruncatedText }) : null,
         r.chipEmpty ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: "empty" }) : null
       ] }),
       trailing: /* @__PURE__ */ jsxs11(Fragment8, { children: [
         r.columns.map((c) => /* @__PURE__ */ jsx12(Text9, { role: "number", children: c.text }, c.key)),
         r.glyphs.map((g) => /* @__PURE__ */ jsx12(Text9, { role: "meta", title: g.title, children: icon(g.iconName, g.iconText) }, g.key)),
-        r.badges.map((b) => /* @__PURE__ */ jsx12(Badge7, { tone: b.tone, children: b.text }, b.key)),
+        r.badges.map((b) => /* @__PURE__ */ jsx12(Badge8, { tone: b.tone, children: b.text }, b.key)),
         r.actions.map((a) => /* @__PURE__ */ jsx12(IconButton7, { size: "sm", icon: icon(a.iconName, a.iconText), label: a.label, disabled: a.disabled, onClick: () => ui10({ kind: "action", id: a.rowId, actionId: a.actionId }) }, a.key))
       ] }),
       onExpandedChange: () => ui10({ kind: "toggleExpanded", id: r.id }),

package/dist/time/index.js

@@ -2857,7 +2857,7 @@ var timelineManifest = {
 
 // src/time/timeline/react/TimelinePanelView.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { Column as Column2, EmptyState, FilterChip, SegmentedControl, StatusBar, Text, TextButton as TextButton2, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
+import { Column as Column2, DrawnSurface, EmptyState, FilterChip, SegmentedControl, StatusBar, Text, TextButton as TextButton2, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
 
 // src/time/timeline/declaration.ts
 import { formatTick as formatTick4 } from "@xenosystem/time-core";
@@ -3069,13 +3069,10 @@ function TimelineSurface({ controller }) {
   const selected = new Set(state.selection.clipIds);
   const preview = state.preview;
   return /* @__PURE__ */ jsxs2(
-    "div",
+    DrawnSurface,
     {
       ref: containerRef,
-      tabIndex: 0,
-      role: "application",
-      "aria-label": "Timeline",
-      style: SURFACE,
+      label: "Timeline",
       onWheel,
       onPointerDown,
       onPointerMove,
@@ -3197,15 +3194,6 @@ function hitTest(state, x, y) {
   }
   return { target: { kind: "lane" }, trackIndex: -1 };
 }
-var SURFACE = {
-  position: "relative",
-  flex: 1,
-  minHeight: 0,
-  overflow: "hidden",
-  outline: "none",
-  userSelect: "none",
-  touchAction: "none"
-};
 var RULER = {
   position: "absolute",
   top: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.13.31",
+  "version": "0.13.32",
   "description": "XENO Blocks — rung 3 of the front ladder: components composed into a contract-bearing unit (manifest: ports, intents, commands, agent surface), rendered by @xenosystem/workbench. ONE package, one subpath per family (/auth, /edit, /data, /time, /ops, /trust, /agent), one named export per block — XENO PACKAGE NAMING - STANDARD.md.",
   "license": "UNLICENSED",
   "type": "module",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": ">=0.3.4 <1",
-    "@xenosystem/components": ">=0.31.0 <1",
+    "@xenosystem/components": ">=0.32.0 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": ">=0.0.1",
     "@xenosystem/elements-react": ">=0.0.1",
@@ -81,7 +81,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.4",
-    "@xenosystem/components": "^0.31.0",
+    "@xenosystem/components": "^0.32.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",