@xenosystem/blocks 0.11.0 → 0.11.1

package/dist/time/index.js

@@ -780,6 +780,7 @@ function ticksPerStep(unit, timebase) {
 
 // src/time/transport/react/TransportPanelView.tsx
 import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import { Column, IconButton, NumberInput, Readout, Slider, Stack, TextButton } from "@xenosystem/components/chrome";
 
 // src/time/transport/react/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -928,9 +929,8 @@ function TransportPanelView({ controller }) {
     [controller]
   );
   return /* @__PURE__ */ jsxs2(
-    "div",
+    Column,
     {
-      style: S.root,
       className: "xeno-transport-panel",
       onKeyDown,
       onKeyUp,
@@ -938,228 +938,66 @@ function TransportPanelView({ controller }) {
       role: "group",
       "aria-label": "Transport",
       children: [
-        /* @__PURE__ */ jsxs2("div", { style: S.row, children: [
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToStart(), title: "Go to start", "aria-label": "Go to start", children: /* @__PURE__ */ jsx2(StartIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(-1), title: "Step back", "aria-label": "Step back", children: /* @__PURE__ */ jsx2(StepBackIcon, {}) }),
-          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(-1), title: "Shuttle reverse (J)", "aria-label": "Shuttle reverse", children: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}) }),
+        /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 3, pad: "gutter", children: [
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StartIcon, {}), label: "Go to start", onClick: () => controller.goToStart() }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepBackIcon, {}), label: "Step back", onClick: () => controller.step(-1) }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}), label: "Shuttle reverse (J)", onClick: () => controller.shuttleStep(-1) }),
           /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, ...S.primaryBtn },
-              onClick: () => controller.togglePlay(),
-              title: playing ? "Pause (Space)" : "Play (Space)",
-              "aria-label": playing ? "Pause" : "Play",
-              "aria-pressed": playing,
-              children: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.stop(), title: "Stop", "aria-label": "Stop", children: /* @__PURE__ */ jsx2(StopIcon, {}) }),
-          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(1), title: "Shuttle forward (L)", "aria-label": "Shuttle forward", children: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(1), title: "Step forward", "aria-label": "Step forward", children: /* @__PURE__ */ jsx2(StepForwardIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToEnd(), title: "Go to end", "aria-label": "Go to end", children: /* @__PURE__ */ jsx2(EndIcon, {}) }),
-          controller.showsControl("record") && /* @__PURE__ */ jsx2(
-            "button",
+            IconButton,
             {
-              type: "button",
-              style: { ...S.iconBtn, color: state.recording ? "var(--xeno-danger)" : void 0, opacity: state.recording ? 1 : 0.7 },
-              onClick: () => controller.record(),
-              title: "Record",
-              "aria-label": "Record",
-              "aria-pressed": !!state.recording,
-              children: /* @__PURE__ */ jsx2(RecordIcon, {})
+              size: "sm",
+              variant: "primary",
+              icon: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {}),
+              label: playing ? "Pause (Space)" : "Play (Space)",
+              active: playing,
+              onClick: () => controller.togglePlay()
             }
           ),
-          controller.showsControl("loop") && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, opacity: state.loopEnabled ? 1 : 0.4 },
-              onClick: () => controller.toggleLoop(),
-              title: "Loop",
-              "aria-label": "Loop",
-              "aria-pressed": !!state.loopEnabled,
-              children: /* @__PURE__ */ jsx2(LoopIcon, {})
-            }
-          ),
-          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, opacity: state.metronome ? 1 : 0.4 },
-              onClick: () => controller.toggleMetronome(),
-              title: "Metronome",
-              "aria-label": "Metronome",
-              "aria-pressed": !!state.metronome,
-              children: /* @__PURE__ */ jsx2(MetronomeIcon, {})
-            }
-          ),
-          controller.showsControl("punch") && /* @__PURE__ */ jsx2("button", { type: "button", style: { ...S.chipBtn, opacity: state.punch ? 1 : 0.4 }, "aria-pressed": !!state.punch, title: "Punch", children: "PUNCH" }),
-          /* @__PURE__ */ jsxs2(
-            "button",
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StopIcon, {}), label: "Stop", onClick: () => controller.stop() }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}), label: "Shuttle forward (L)", onClick: () => controller.shuttleStep(1) }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepForwardIcon, {}), label: "Step forward", onClick: () => controller.step(1) }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(EndIcon, {}), label: "Go to end", onClick: () => controller.goToEnd() }),
+          controller.showsControl("record") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", variant: "danger", icon: /* @__PURE__ */ jsx2(RecordIcon, {}), label: "Record", active: !!state.recording, onClick: () => controller.record() }),
+          controller.showsControl("loop") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LoopIcon, {}), label: "Loop", active: !!state.loopEnabled, onClick: () => controller.toggleLoop() }),
+          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(MetronomeIcon, {}), label: "Metronome", active: !!state.metronome, onClick: () => controller.toggleMetronome() }),
+          controller.showsControl("punch") && /* @__PURE__ */ jsx2(TextButton, { strong: !!state.punch, children: "PUNCH" }),
+          /* @__PURE__ */ jsx2(
+            Readout,
             {
-              type: "button",
-              style: S.readout,
-              onClick: () => controller.cycleDisplay(),
+              value: controller.getReadout(),
+              unit: (0, format_exports.displayLabel)(controller.getDisplay()),
+              label: `Position ${controller.getReadout()}`,
               title: "Click to change time display",
-              "aria-label": `Position ${controller.getReadout()}`,
-              children: [
-                /* @__PURE__ */ jsx2("span", { style: S.readoutValue, children: controller.getReadout() }),
-                /* @__PURE__ */ jsx2("span", { style: S.readoutUnit, children: (0, format_exports.displayLabel)(controller.getDisplay()) })
-              ]
+              onClick: () => controller.cycleDisplay()
             }
           ),
-          /* @__PURE__ */ jsx2("span", { style: S.duration, children: controller.getDurationReadout() }),
-          controller.showsControl("bpm") && /* @__PURE__ */ jsxs2("label", { style: S.bpm, children: [
-            /* @__PURE__ */ jsx2("span", { style: S.bpmLabel, children: "BPM" }),
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "number",
-                value: state.bpm ?? 120,
-                onChange: (e) => controller.setTempo(Number(e.target.value)),
-                style: S.bpmInput,
-                "aria-label": "Tempo"
-              }
-            )
-          ] }),
-          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2("span", { style: S.inOut, children: [
-            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setInPoint(), title: "Set in point", children: "IN" }),
-            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setOutPoint(), title: "Set out point", children: "OUT" })
+          /* @__PURE__ */ jsx2(Readout, { size: "sm", value: controller.getDurationReadout() }),
+          controller.showsControl("bpm") && /* @__PURE__ */ jsx2(NumberInput, { caption: "BPM", label: "Tempo", value: state.bpm ?? 120, onChange: (bpm) => controller.setTempo(bpm) }),
+          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 2, pad: "none", children: [
+            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setInPoint(), children: "IN" }),
+            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setOutPoint(), children: "OUT" })
           ] })
         ] }),
-        controller.showsControl("scrubber") && /* @__PURE__ */ jsxs2(
-          "div",
+        controller.showsControl("scrubber") && /* @__PURE__ */ jsx2(
+          Slider,
           {
-            ref: scrubRef,
-            style: S.scrubTrack,
+            trackRef: scrubRef,
+            progress: controller.getProgress(),
+            label: "Playhead",
+            valueMin: 0,
+            valueMax: controller.getDuration(),
+            valueNow: controller.getCurrentTick(),
+            valueText: controller.getReadout(),
             onPointerDown: onScrubDown,
             onPointerMove: onScrubMove,
             onPointerUp: onScrubUp,
-            onPointerCancel: () => controller.cancelScrub(),
-            role: "slider",
-            "aria-label": "Playhead",
-            "aria-valuemin": 0,
-            "aria-valuemax": controller.getDuration(),
-            "aria-valuenow": controller.getCurrentTick(),
-            "aria-valuetext": controller.getReadout(),
-            tabIndex: 0,
-            children: [
-              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubFill, width: `${controller.getProgress() * 100}%` } }),
-              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubKnob, left: `${controller.getProgress() * 100}%` } })
-            ]
+            onPointerCancel: () => controller.cancelScrub()
           }
         )
       ]
     }
   );
 }
-var S = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 3,
-    padding: "4px 6px",
-    fontSize: 11,
-    color: "var(--xeno-text)",
-    background: "var(--xeno-canvas)",
-    userSelect: "none",
-    outline: "none"
-  },
-  row: { display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap" },
-  iconBtn: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 20,
-    height: 18,
-    padding: 0,
-    border: "none",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  primaryBtn: { background: "var(--xeno-control)", width: 26 },
-  chipBtn: {
-    height: 18,
-    padding: "0 5px",
-    border: "none",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    cursor: "pointer",
-    fontSize: 9,
-    letterSpacing: "0.05em",
-    flex: "0 0 auto"
-  },
-  readout: {
-    display: "flex",
-    alignItems: "baseline",
-    gap: 4,
-    height: 18,
-    padding: "0 6px",
-    marginLeft: 4,
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  readoutValue: { fontVariantNumeric: "tabular-nums", fontSize: 12, letterSpacing: "0.02em" },
-  readoutUnit: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
-  duration: {
-    fontVariantNumeric: "tabular-nums",
-    fontSize: 10,
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  bpm: { display: "flex", alignItems: "center", gap: 3, flex: "0 0 auto" },
-  bpmLabel: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
-  bpmInput: {
-    width: 42,
-    height: 18,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    fontSize: 11,
-    padding: "0 4px",
-    outline: "none",
-    fontVariantNumeric: "tabular-nums"
-  },
-  inOut: { display: "flex", gap: 2, flex: "0 0 auto" },
-  scrubTrack: {
-    position: "relative",
-    height: 8,
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    cursor: "pointer",
-    touchAction: "none",
-    outline: "none"
-  },
-  scrubFill: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    background: "var(--xeno-control)",
-    borderRadius: 2,
-    pointerEvents: "none"
-  },
-  scrubKnob: {
-    position: "absolute",
-    top: -1,
-    width: 3,
-    height: 10,
-    marginLeft: -1,
-    background: "var(--xeno-text)",
-    borderRadius: 1,
-    pointerEvents: "none"
-  }
-};
 
 // src/time/transport/panel.ts
 function createTransportPanel(options = {}) {
@@ -4177,13 +4015,13 @@ import {
   Badge,
   EmptyState as EmptyState2,
   ErrorState,
-  IconButton,
+  IconButton as IconButton2,
   Row,
   RowList,
   ScrollArea,
   SegmentedControl,
   StatusBar as StatusBar2,
-  TextButton,
+  TextButton as TextButton2,
   Toolbar as Toolbar2,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
@@ -4222,7 +4060,7 @@ function CalendarPanelView({
     {
       left: /* @__PURE__ */ jsxs4(Fragment, { children: [
         /* @__PURE__ */ jsx5(
-          IconButton,
+          IconButton2,
           {
             icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "left" }),
             label: "Previous",
@@ -4230,14 +4068,14 @@ function CalendarPanelView({
           }
         ),
         /* @__PURE__ */ jsx5(
-          IconButton,
+          IconButton2,
           {
             icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "right" }),
             label: "Next",
             onClick: () => controller.navigate(1)
           }
         ),
-        /* @__PURE__ */ jsx5(TextButton, { onClick: () => controller.goToToday(), children: "Today" }),
+        /* @__PURE__ */ jsx5(TextButton2, { onClick: () => controller.goToToday(), children: "Today" }),
         /* @__PURE__ */ jsx5("span", { style: { fontSize: 11, opacity: 0.8 }, children: controller.anchorKey().slice(0, 7) })
       ] }),
       right: /* @__PURE__ */ jsxs4(ToolbarGroup2, { end: true, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "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",
@@ -60,7 +60,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": "^0.3.0",
-    "@xenosystem/components": ">=0.9.3 <1",
+    "@xenosystem/components": ">=0.10.2 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": ">=0.0.1",
     "@xenosystem/time-core": "^0.1.0",
@@ -76,7 +76,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.1",
-    "@xenosystem/components": "^0.9.3",
+    "@xenosystem/components": "^0.10.2",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": "0.0.1",
     "@xenosystem/time-core": "^0.1.0",