@xenosystem/blocks 0.13.34 → 0.13.35

package/dist/time/index.js

@@ -2855,7 +2855,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, DrawnSurface, EmptyState, FilterChip, SegmentedControl, StatusBar, Text, TextButton as TextButton2, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
+import { Clip, Column as Column2, DrawnSurface, EmptyState, FilterChip, Lane, Marquee, Playhead, Ruler, SegmentedControl, StatusBar, Text, TextButton as TextButton2, Tick, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
 
 // src/time/timeline/declaration.ts
 import { formatTick as formatTick4 } from "@xenosystem/time-core";
@@ -3076,96 +3076,29 @@ function TimelineSurface({ controller }) {
       onPointerCancel: onPointerUp,
       onKeyDown,
       children: [
-        /* @__PURE__ */ jsx2("div", { style: { ...RULER, height: RULER_PX }, children: ticks.map((tick) => /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: Math.floor(tick.x),
-              bottom: 0,
-              width: 1,
-              height: tick.weight === "major" ? 8 : tick.weight === "medium" ? 5 : 3,
-              background: "var(--xeno-active)"
-            },
-            children: tick.label ? /* @__PURE__ */ jsx2("span", { style: TICK_LABEL, className: "tabular-nums", children: tick.label }) : null
-          },
-          tick.tick
-        )) }),
+        /* @__PURE__ */ jsx2(Ruler, { height: RULER_PX, children: ticks.map((tick) => /* @__PURE__ */ jsx2(Tick, { x: tick.x, weight: tick.weight, label: tick.label ?? void 0 }, tick.tick)) }),
         /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", inset: `${RULER_PX}px 0 0 0`, overflow: "hidden" }, children: [
-          state.visible.map((row) => {
-            const top = row.topPx - scale.scrollTopPx;
-            return /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", left: 0, right: 0, top, height: row.heightPx }, children: [
-              /* @__PURE__ */ jsx2("div", { style: { ...GUTTER, width: scale.gutterPx }, children: /* @__PURE__ */ jsx2("span", { style: TRACK_NAME, children: row.track.name }) }),
-              /* @__PURE__ */ jsx2("div", { "data-canvas": "timeline-lane", style: { ...LANE, left: scale.gutterPx }, children: row.clips.map((clip) => {
-                const shown = preview?.clips[clip.id] ?? clip;
-                const x = scale.tickToX(shown.startTick);
-                const width = Math.max(1, scale.durationToPx(shown.endTick - shown.startTick));
-                return /* @__PURE__ */ jsx2(
-                  ClipRect,
-                  {
-                    clip,
-                    left: x - scale.gutterPx,
-                    width,
-                    selected: selected.has(clip.id)
-                  },
-                  clip.id
-                );
-              }) })
-            ] }, row.track.id);
-          }),
+          state.visible.map((row) => /* @__PURE__ */ jsx2(Lane, { top: row.topPx - scale.scrollTopPx, height: row.heightPx, gutterWidth: scale.gutterPx, name: row.track.name, children: row.clips.map((clip) => {
+            const shown = preview?.clips[clip.id] ?? clip;
+            const x = scale.tickToX(shown.startTick);
+            const width = Math.max(1, scale.durationToPx(shown.endTick - shown.startTick));
+            return /* @__PURE__ */ jsx2(Clip, { id: clip.id, left: x - scale.gutterPx, width, selected: selected.has(clip.id), name: clip.name ?? clip.id, color: clip.color }, clip.id);
+          }) }, row.track.id)),
           preview?.marquee ? /* @__PURE__ */ jsx2(
-            "div",
+            Marquee,
             {
-              style: {
-                ...MARQUEE,
-                left: Math.min(scale.tickToX(preview.marquee.fromTick), scale.tickToX(preview.marquee.toTick)),
-                width: Math.abs(
-                  scale.tickToX(preview.marquee.toTick) - scale.tickToX(preview.marquee.fromTick)
-                ),
-                top: Math.min(preview.marquee.fromY, preview.marquee.toY) - scale.scrollTopPx,
-                height: Math.abs(preview.marquee.toY - preview.marquee.fromY)
-              }
+              left: Math.min(scale.tickToX(preview.marquee.fromTick), scale.tickToX(preview.marquee.toTick)),
+              width: Math.abs(scale.tickToX(preview.marquee.toTick) - scale.tickToX(preview.marquee.fromTick)),
+              top: Math.min(preview.marquee.fromY, preview.marquee.toY) - scale.scrollTopPx,
+              height: Math.abs(preview.marquee.toY - preview.marquee.fromY)
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx2("div", { style: { ...PLAYHEAD, left: Math.floor(scale.tickToX(state.playheadTick)) } })
+        /* @__PURE__ */ jsx2(Playhead, { x: scale.tickToX(state.playheadTick) })
       ]
     }
   );
 }
-function ClipRect({
-  clip,
-  left,
-  width,
-  selected
-}) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-clip-id": clip.id,
-      title: clip.name ?? clip.id,
-      style: {
-        position: "absolute",
-        left,
-        width,
-        top: 2,
-        bottom: 2,
-        // Rectangles with a corner radius. Never a circle.
-        borderRadius: 2,
-        background: selected ? "var(--xeno-control)" : "var(--xeno-border)",
-        border: `1px solid ${selected ? "var(--xeno-active)" : "var(--xeno-control)"}`,
-        overflow: "hidden",
-        fontSize: 10,
-        lineHeight: "14px",
-        padding: width >= 40 ? "0 4px" : 0,
-        whiteSpace: "nowrap",
-        color: "var(--xeno-text)",
-        boxSizing: "border-box"
-      },
-      children: width >= 40 ? clip.name ?? "" : null
-    }
-  );
-}
 function hitTest(state, x, y) {
   const scale = state.scale;
   if (x < scale.gutterPx) return { target: { kind: "lane" }, trackIndex: -1 };
@@ -3190,61 +3123,6 @@ function hitTest(state, x, y) {
   }
   return { target: { kind: "lane" }, trackIndex: -1 };
 }
-var RULER = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  borderBottom: "1px solid var(--xeno-border)"
-};
-var TICK_LABEL = {
-  position: "absolute",
-  left: 3,
-  top: -12,
-  fontSize: 9,
-  color: "var(--xeno-active)",
-  whiteSpace: "nowrap"
-};
-var GUTTER = {
-  position: "absolute",
-  left: 0,
-  top: 0,
-  bottom: 0,
-  borderRight: "1px solid var(--xeno-border)",
-  borderBottom: "1px solid var(--xeno-border-subtle)",
-  display: "flex",
-  alignItems: "center",
-  padding: "0 6px",
-  boxSizing: "border-box"
-};
-var TRACK_NAME = {
-  fontSize: 10,
-  color: "var(--xeno-text)",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-var LANE = {
-  position: "absolute",
-  right: 0,
-  top: 0,
-  bottom: 0,
-  borderBottom: "1px solid var(--xeno-border-subtle)"
-};
-var MARQUEE = {
-  position: "absolute",
-  border: "1px solid var(--xeno-active)",
-  background: "var(--xeno-border-subtle)",
-  pointerEvents: "none"
-};
-var PLAYHEAD = {
-  position: "absolute",
-  top: 0,
-  bottom: 0,
-  width: 1,
-  background: "var(--xeno-text)",
-  pointerEvents: "none"
-};
 var TIMELINE_RUNTIME_UNITS = ["timeline/Surface"];
 function timelineRuntimeComponents(controller) {
   return { "timeline/Surface": () => /* @__PURE__ */ jsx2(TimelineSurface, { controller }) };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.13.34",
+  "version": "0.13.35",
   "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.32.0 <1",
+    "@xenosystem/components": ">=0.33.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.32.0",
+    "@xenosystem/components": "^0.33.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",