@xenosystem/blocks 0.12.9 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-BP4EYOCQ.js +109 -0
- package/dist/chunk-GQWAIPDF.js +125 -0
- package/dist/chunk-J5XEAON6.js +279 -0
- package/dist/data/index.js +169 -295
- package/dist/edit/index.d.ts +4 -4
- package/dist/edit/index.js +405 -708
- package/dist/icons/index.d.ts +41 -0
- package/dist/icons/index.js +116 -0
- package/dist/ops/index.js +140 -199
- package/dist/time/index.d.ts +2 -1
- package/dist/time/index.js +109 -205
- package/package.json +5 -1
package/dist/time/index.d.ts
CHANGED
|
@@ -320,7 +320,8 @@ declare const TRANSPORT_ICONS: {
|
|
|
320
320
|
'transport/MetronomeIcon': typeof MetronomeIcon;
|
|
321
321
|
};
|
|
322
322
|
/** The registry names above, for a host's registry check. */
|
|
323
|
-
|
|
323
|
+
/** No runtime units: every transport glyph resolves through `@xenosystem/blocks/icons`. Kept so every declared block has the same shape. */
|
|
324
|
+
declare const TRANSPORT_RUNTIME_UNITS: readonly string[];
|
|
324
325
|
|
|
325
326
|
/**
|
|
326
327
|
* The transport strip AS A DECLARATION — the fourth block written the §8d way (auth gate, agent,
|
package/dist/time/index.js
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
import {
|
|
2
|
+
EndIcon,
|
|
3
|
+
LoopIcon,
|
|
4
|
+
MetronomeIcon,
|
|
5
|
+
PlayPauseIcon,
|
|
6
|
+
RecordIcon,
|
|
7
|
+
ShuttleLeftIcon,
|
|
8
|
+
ShuttleRightIcon,
|
|
9
|
+
StartIcon,
|
|
10
|
+
StepBackIcon,
|
|
11
|
+
StepForwardIcon,
|
|
12
|
+
StopIcon,
|
|
13
|
+
TRANSPORT_ICONS,
|
|
14
|
+
TRANSPORT_RUNTIME_UNITS
|
|
15
|
+
} from "../chunk-BP4EYOCQ.js";
|
|
16
|
+
import {
|
|
17
|
+
ChevronGlyph
|
|
18
|
+
} from "../chunk-GQWAIPDF.js";
|
|
1
19
|
import {
|
|
2
20
|
__reExport
|
|
3
21
|
} from "../chunk-2KG3PWR4.js";
|
|
@@ -908,7 +926,7 @@ var text = (b) => ({ component: "text", props: { text: b } });
|
|
|
908
926
|
var button = (icon, label, kind, extra = {}) => ({
|
|
909
927
|
component: "chrome/IconButton",
|
|
910
928
|
...extra.when ? { when: extra.when } : {},
|
|
911
|
-
props: { size: { value: "sm" }, icon: { node: { component: `
|
|
929
|
+
props: { size: { value: "sm" }, icon: { node: { component: `icons/${icon}` } }, label, ...extra.props ?? {} },
|
|
912
930
|
on: { onClick: ui(kind) }
|
|
913
931
|
});
|
|
914
932
|
var TRANSPORT_DECLARATION = {
|
|
@@ -923,27 +941,27 @@ var TRANSPORT_DECLARATION = {
|
|
|
923
941
|
component: "chrome/Stack",
|
|
924
942
|
props: { direction: { value: "row" }, gap: { value: 3 }, pad: { value: "gutter" } },
|
|
925
943
|
children: [
|
|
926
|
-
button("
|
|
927
|
-
button("
|
|
928
|
-
button("
|
|
944
|
+
button("Start", { value: "Go to start" }, "goToStart"),
|
|
945
|
+
button("StepBack", { value: "Step back" }, "stepBack"),
|
|
946
|
+
button("ShuttleLeft", { value: "Shuttle reverse (J)" }, "shuttleBack", { when: { input: "view.show.shuttle" } }),
|
|
929
947
|
{
|
|
930
948
|
component: "chrome/IconButton",
|
|
931
949
|
props: {
|
|
932
950
|
size: { value: "sm" },
|
|
933
951
|
variant: { value: "primary" },
|
|
934
|
-
icon: { node: { component: "
|
|
952
|
+
icon: { node: { component: "icons/PlayPause", props: { playing: { input: "view.playing" } } } },
|
|
935
953
|
label: { input: "view.playLabel" },
|
|
936
954
|
active: { input: "view.playing" }
|
|
937
955
|
},
|
|
938
956
|
on: { onClick: ui("togglePlay") }
|
|
939
957
|
},
|
|
940
|
-
button("
|
|
941
|
-
button("
|
|
942
|
-
button("
|
|
943
|
-
button("
|
|
944
|
-
button("
|
|
945
|
-
button("
|
|
946
|
-
button("
|
|
958
|
+
button("Stop", { value: "Stop" }, "stop"),
|
|
959
|
+
button("ShuttleRight", { value: "Shuttle forward (L)" }, "shuttleForward", { when: { input: "view.show.shuttle" } }),
|
|
960
|
+
button("StepForward", { value: "Step forward" }, "stepForward"),
|
|
961
|
+
button("End", { value: "Go to end" }, "goToEnd"),
|
|
962
|
+
button("Record", { value: "Record" }, "record", { when: { input: "view.show.record" }, props: { variant: { value: "danger" }, active: { input: "view.recording" } } }),
|
|
963
|
+
button("Loop", { value: "Loop" }, "toggleLoop", { when: { input: "view.show.loop" }, props: { active: { input: "view.loopEnabled" } } }),
|
|
964
|
+
button("Metronome", { value: "Metronome" }, "toggleMetronome", { when: { input: "view.show.metronome" }, props: { active: { input: "view.metronome" } } }),
|
|
947
965
|
{ component: "chrome/TextButton", when: { input: "view.show.punch" }, props: { strong: { input: "view.punch" } }, children: [text({ value: "PUNCH" })] },
|
|
948
966
|
{
|
|
949
967
|
component: "chrome/Readout",
|
|
@@ -985,100 +1003,8 @@ var TRANSPORT_DECLARATION = {
|
|
|
985
1003
|
}
|
|
986
1004
|
};
|
|
987
1005
|
|
|
988
|
-
// src/time/transport/react/icons.tsx
|
|
989
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
990
|
-
var base = (size) => ({
|
|
991
|
-
width: size,
|
|
992
|
-
height: size,
|
|
993
|
-
viewBox: "0 0 24 24",
|
|
994
|
-
fill: "none",
|
|
995
|
-
stroke: "currentColor",
|
|
996
|
-
strokeWidth: 1.5,
|
|
997
|
-
strokeLinecap: "round",
|
|
998
|
-
strokeLinejoin: "round",
|
|
999
|
-
"aria-hidden": true
|
|
1000
|
-
});
|
|
1001
|
-
function PlayIcon({ size = 12 }) {
|
|
1002
|
-
return /* @__PURE__ */ jsx("svg", { ...base(size), fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7 4.5v15l13-7.5z" }) });
|
|
1003
|
-
}
|
|
1004
|
-
function PauseIcon({ size = 12 }) {
|
|
1005
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), fill: "currentColor", stroke: "none", children: [
|
|
1006
|
-
/* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
|
|
1007
|
-
/* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
|
|
1008
|
-
] });
|
|
1009
|
-
}
|
|
1010
|
-
function StopIcon({ size = 11 }) {
|
|
1011
|
-
return /* @__PURE__ */ jsx("svg", { ...base(size), fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }) });
|
|
1012
|
-
}
|
|
1013
|
-
function RecordIcon({ size = 11 }) {
|
|
1014
|
-
return /* @__PURE__ */ jsx("svg", { ...base(size), fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "3" }) });
|
|
1015
|
-
}
|
|
1016
|
-
function StartIcon({ size = 11 }) {
|
|
1017
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
|
|
1018
|
-
/* @__PURE__ */ jsx("path", { d: "M19 20 9 12l10-8z" }),
|
|
1019
|
-
/* @__PURE__ */ jsx("path", { d: "M5 19V5" })
|
|
1020
|
-
] });
|
|
1021
|
-
}
|
|
1022
|
-
function EndIcon({ size = 11 }) {
|
|
1023
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
|
|
1024
|
-
/* @__PURE__ */ jsx("path", { d: "m5 4 10 8-10 8z" }),
|
|
1025
|
-
/* @__PURE__ */ jsx("path", { d: "M19 5v14" })
|
|
1026
|
-
] });
|
|
1027
|
-
}
|
|
1028
|
-
function StepBackIcon({ size = 11 }) {
|
|
1029
|
-
return /* @__PURE__ */ jsx("svg", { ...base(size), children: /* @__PURE__ */ jsx("path", { d: "M15 18 9 12l6-6" }) });
|
|
1030
|
-
}
|
|
1031
|
-
function StepForwardIcon({ size = 11 }) {
|
|
1032
|
-
return /* @__PURE__ */ jsx("svg", { ...base(size), children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
|
|
1033
|
-
}
|
|
1034
|
-
function ShuttleLeftIcon({ size = 11 }) {
|
|
1035
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
|
|
1036
|
-
/* @__PURE__ */ jsx("path", { d: "M11 19 2 12l9-7z" }),
|
|
1037
|
-
/* @__PURE__ */ jsx("path", { d: "M22 19l-9-7 9-7z" })
|
|
1038
|
-
] });
|
|
1039
|
-
}
|
|
1040
|
-
function ShuttleRightIcon({ size = 11 }) {
|
|
1041
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
|
|
1042
|
-
/* @__PURE__ */ jsx("path", { d: "m13 19 9-7-9-7z" }),
|
|
1043
|
-
/* @__PURE__ */ jsx("path", { d: "m2 19 9-7-9-7z" })
|
|
1044
|
-
] });
|
|
1045
|
-
}
|
|
1046
|
-
function LoopIcon({ size = 11 }) {
|
|
1047
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
|
|
1048
|
-
/* @__PURE__ */ jsx("path", { d: "m17 2 4 4-4 4" }),
|
|
1049
|
-
/* @__PURE__ */ jsx("path", { d: "M3 11v-1a4 4 0 0 1 4-4h14" }),
|
|
1050
|
-
/* @__PURE__ */ jsx("path", { d: "m7 22-4-4 4-4" }),
|
|
1051
|
-
/* @__PURE__ */ jsx("path", { d: "M21 13v1a4 4 0 0 1-4 4H3" })
|
|
1052
|
-
] });
|
|
1053
|
-
}
|
|
1054
|
-
function MetronomeIcon({ size = 11 }) {
|
|
1055
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), children: [
|
|
1056
|
-
/* @__PURE__ */ jsx("path", { d: "M9 3h6l4 18H5z" }),
|
|
1057
|
-
/* @__PURE__ */ jsx("path", { d: "m12 18 4-11" })
|
|
1058
|
-
] });
|
|
1059
|
-
}
|
|
1060
|
-
function PlayPauseIcon({ playing, size }) {
|
|
1061
|
-
return playing ? /* @__PURE__ */ jsx(PauseIcon, { size }) : /* @__PURE__ */ jsx(PlayIcon, { size });
|
|
1062
|
-
}
|
|
1063
|
-
var TRANSPORT_ICONS = {
|
|
1064
|
-
"transport/PlayIcon": PlayIcon,
|
|
1065
|
-
"transport/PauseIcon": PauseIcon,
|
|
1066
|
-
"transport/PlayPauseIcon": PlayPauseIcon,
|
|
1067
|
-
"transport/StopIcon": StopIcon,
|
|
1068
|
-
"transport/RecordIcon": RecordIcon,
|
|
1069
|
-
"transport/StartIcon": StartIcon,
|
|
1070
|
-
"transport/EndIcon": EndIcon,
|
|
1071
|
-
"transport/StepBackIcon": StepBackIcon,
|
|
1072
|
-
"transport/StepForwardIcon": StepForwardIcon,
|
|
1073
|
-
"transport/ShuttleLeftIcon": ShuttleLeftIcon,
|
|
1074
|
-
"transport/ShuttleRightIcon": ShuttleRightIcon,
|
|
1075
|
-
"transport/LoopIcon": LoopIcon,
|
|
1076
|
-
"transport/MetronomeIcon": MetronomeIcon
|
|
1077
|
-
};
|
|
1078
|
-
var TRANSPORT_RUNTIME_UNITS = Object.keys(TRANSPORT_ICONS);
|
|
1079
|
-
|
|
1080
1006
|
// src/time/transport/react/TransportPanelView.tsx
|
|
1081
|
-
import { jsx
|
|
1007
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1082
1008
|
function TransportPanelView({ controller }) {
|
|
1083
1009
|
const subscribe = useCallback((cb) => controller.subscribe(cb), [controller]);
|
|
1084
1010
|
const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
|
|
@@ -1118,7 +1044,7 @@ function TransportPanelView({ controller }) {
|
|
|
1118
1044
|
},
|
|
1119
1045
|
[controller]
|
|
1120
1046
|
);
|
|
1121
|
-
return /* @__PURE__ */
|
|
1047
|
+
return /* @__PURE__ */ jsxs(
|
|
1122
1048
|
Column,
|
|
1123
1049
|
{
|
|
1124
1050
|
className: "xeno-transport-panel",
|
|
@@ -1128,28 +1054,28 @@ function TransportPanelView({ controller }) {
|
|
|
1128
1054
|
role: "group",
|
|
1129
1055
|
"aria-label": "Transport",
|
|
1130
1056
|
children: [
|
|
1131
|
-
/* @__PURE__ */
|
|
1132
|
-
/* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */
|
|
1134
|
-
view.show.shuttle && /* @__PURE__ */
|
|
1135
|
-
/* @__PURE__ */
|
|
1136
|
-
/* @__PURE__ */
|
|
1137
|
-
view.show.shuttle && /* @__PURE__ */
|
|
1138
|
-
/* @__PURE__ */
|
|
1139
|
-
/* @__PURE__ */
|
|
1140
|
-
view.show.record && /* @__PURE__ */
|
|
1141
|
-
view.show.loop && /* @__PURE__ */
|
|
1142
|
-
view.show.metronome && /* @__PURE__ */
|
|
1143
|
-
view.show.punch && /* @__PURE__ */
|
|
1144
|
-
/* @__PURE__ */
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
view.show.bpm && /* @__PURE__ */
|
|
1147
|
-
view.show.inOut && /* @__PURE__ */
|
|
1148
|
-
/* @__PURE__ */
|
|
1149
|
-
/* @__PURE__ */
|
|
1057
|
+
/* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 3, pad: "gutter", children: [
|
|
1058
|
+
/* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StartIcon, {}), label: "Go to start", onClick: () => controller.goToStart() }),
|
|
1059
|
+
/* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StepBackIcon, {}), label: "Step back", onClick: () => controller.step(-1) }),
|
|
1060
|
+
view.show.shuttle && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(ShuttleLeftIcon, {}), label: "Shuttle reverse (J)", onClick: () => controller.shuttleStep(-1) }),
|
|
1061
|
+
/* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "primary", icon: /* @__PURE__ */ jsx(PlayPauseIcon, { playing: view.playing }), label: view.playLabel, active: view.playing, onClick: () => controller.togglePlay() }),
|
|
1062
|
+
/* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StopIcon, {}), label: "Stop", onClick: () => controller.stop() }),
|
|
1063
|
+
view.show.shuttle && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(ShuttleRightIcon, {}), label: "Shuttle forward (L)", onClick: () => controller.shuttleStep(1) }),
|
|
1064
|
+
/* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(StepForwardIcon, {}), label: "Step forward", onClick: () => controller.step(1) }),
|
|
1065
|
+
/* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(EndIcon, {}), label: "Go to end", onClick: () => controller.goToEnd() }),
|
|
1066
|
+
view.show.record && /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "danger", icon: /* @__PURE__ */ jsx(RecordIcon, {}), label: "Record", active: view.recording, onClick: () => controller.record() }),
|
|
1067
|
+
view.show.loop && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(LoopIcon, {}), label: "Loop", active: view.loopEnabled, onClick: () => controller.toggleLoop() }),
|
|
1068
|
+
view.show.metronome && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(MetronomeIcon, {}), label: "Metronome", active: view.metronome, onClick: () => controller.toggleMetronome() }),
|
|
1069
|
+
view.show.punch && /* @__PURE__ */ jsx(TextButton, { strong: view.punch, children: "PUNCH" }),
|
|
1070
|
+
/* @__PURE__ */ jsx(Readout, { value: view.readout, unit: view.displayLabel, label: view.positionLabel, title: "Click to change time display", onClick: () => controller.cycleDisplay() }),
|
|
1071
|
+
/* @__PURE__ */ jsx(Readout, { size: "sm", value: view.durationReadout }),
|
|
1072
|
+
view.show.bpm && /* @__PURE__ */ jsx(NumberInput, { caption: "BPM", label: "Tempo", value: view.bpm, onChange: (bpm) => controller.setTempo(bpm) }),
|
|
1073
|
+
view.show.inOut && /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, pad: "none", children: [
|
|
1074
|
+
/* @__PURE__ */ jsx(TextButton, { onClick: () => controller.setInPoint(), children: "IN" }),
|
|
1075
|
+
/* @__PURE__ */ jsx(TextButton, { onClick: () => controller.setOutPoint(), children: "OUT" })
|
|
1150
1076
|
] })
|
|
1151
1077
|
] }),
|
|
1152
|
-
view.show.scrubber && /* @__PURE__ */
|
|
1078
|
+
view.show.scrubber && /* @__PURE__ */ jsx(Slider, { progress: view.progress, label: "Playhead", valueMin: 0, valueMax: view.duration, valueNow: view.currentTick, valueText: view.readout, onScrub: scrub })
|
|
1153
1079
|
]
|
|
1154
1080
|
}
|
|
1155
1081
|
);
|
|
@@ -1705,7 +1631,7 @@ function beginDrag(options) {
|
|
|
1705
1631
|
for (const clip of options.clips) {
|
|
1706
1632
|
origin[clip.id] = { startTick: clip.startTick, endTick: clip.endTick, trackId: clip.trackId };
|
|
1707
1633
|
}
|
|
1708
|
-
const
|
|
1634
|
+
const base = {
|
|
1709
1635
|
tool,
|
|
1710
1636
|
startX: options.x,
|
|
1711
1637
|
startY: options.y,
|
|
@@ -1718,24 +1644,24 @@ function beginDrag(options) {
|
|
|
1718
1644
|
deltaTicks: 0,
|
|
1719
1645
|
deltaTracks: 0
|
|
1720
1646
|
};
|
|
1721
|
-
if (tool === "hand") return { ...
|
|
1647
|
+
if (tool === "hand") return { ...base, kind: "pan" };
|
|
1722
1648
|
if (tool === "razor") return null;
|
|
1723
1649
|
switch (target.kind) {
|
|
1724
1650
|
case "ruler":
|
|
1725
|
-
return { ...
|
|
1651
|
+
return { ...base, kind: "scrub" };
|
|
1726
1652
|
case "marker":
|
|
1727
|
-
return { ...
|
|
1653
|
+
return { ...base, kind: "marker", markerId: target.markerId };
|
|
1728
1654
|
case "trackDivider":
|
|
1729
|
-
return { ...
|
|
1655
|
+
return { ...base, kind: "trackHeight", trackId: target.trackId, startHeightPx: options.startHeightPx };
|
|
1730
1656
|
case "clipEdgeStart":
|
|
1731
|
-
return { ...
|
|
1657
|
+
return { ...base, kind: "trimStart", edgeTick: options.tick };
|
|
1732
1658
|
case "clipEdgeEnd":
|
|
1733
|
-
return { ...
|
|
1659
|
+
return { ...base, kind: "trimEnd", edgeTick: options.tick };
|
|
1734
1660
|
case "clip":
|
|
1735
|
-
return { ...
|
|
1661
|
+
return { ...base, kind: "move" };
|
|
1736
1662
|
case "lane":
|
|
1737
1663
|
return {
|
|
1738
|
-
...
|
|
1664
|
+
...base,
|
|
1739
1665
|
kind: "marquee",
|
|
1740
1666
|
clipIds: [],
|
|
1741
1667
|
marquee: { fromTick: options.tick, toTick: options.tick, fromY: options.y, toY: options.y }
|
|
@@ -2930,7 +2856,7 @@ var timelineManifest = {
|
|
|
2930
2856
|
import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
|
|
2931
2857
|
import { EmptyState, StatusBar, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
|
|
2932
2858
|
import { formatTick as formatTick4 } from "@xenosystem/time-core";
|
|
2933
|
-
import { jsx as
|
|
2859
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2934
2860
|
var RULER_PX = 22;
|
|
2935
2861
|
var TOOLS = [
|
|
2936
2862
|
{ id: "select", label: "Select", key: "V" },
|
|
@@ -3038,11 +2964,11 @@ function TimelinePanelView({ controller }) {
|
|
|
3038
2964
|
const ticks = state.arrangement ? rulerTicks(scale, state.timebase) : [];
|
|
3039
2965
|
const selected = new Set(state.selection.clipIds);
|
|
3040
2966
|
const preview = state.preview;
|
|
3041
|
-
return /* @__PURE__ */
|
|
3042
|
-
/* @__PURE__ */
|
|
2967
|
+
return /* @__PURE__ */ jsxs2("div", { style: SHELL, children: [
|
|
2968
|
+
/* @__PURE__ */ jsx2(
|
|
3043
2969
|
Toolbar,
|
|
3044
2970
|
{
|
|
3045
|
-
left: /* @__PURE__ */
|
|
2971
|
+
left: /* @__PURE__ */ jsx2(ToolbarGroup, { children: TOOLS.map((tool) => /* @__PURE__ */ jsx2(
|
|
3046
2972
|
"button",
|
|
3047
2973
|
{
|
|
3048
2974
|
type: "button",
|
|
@@ -3054,8 +2980,8 @@ function TimelinePanelView({ controller }) {
|
|
|
3054
2980
|
},
|
|
3055
2981
|
tool.id
|
|
3056
2982
|
)) }),
|
|
3057
|
-
right: /* @__PURE__ */
|
|
3058
|
-
/* @__PURE__ */
|
|
2983
|
+
right: /* @__PURE__ */ jsxs2(ToolbarGroup, { end: true, children: [
|
|
2984
|
+
/* @__PURE__ */ jsx2(
|
|
3059
2985
|
"button",
|
|
3060
2986
|
{
|
|
3061
2987
|
type: "button",
|
|
@@ -3066,11 +2992,11 @@ function TimelinePanelView({ controller }) {
|
|
|
3066
2992
|
children: "Snap"
|
|
3067
2993
|
}
|
|
3068
2994
|
),
|
|
3069
|
-
/* @__PURE__ */
|
|
2995
|
+
/* @__PURE__ */ jsx2("button", { type: "button", title: "Zoom to fit", onClick: () => controller.zoomToFitRange(), style: toolButton(false), children: "Fit" })
|
|
3070
2996
|
] })
|
|
3071
2997
|
}
|
|
3072
2998
|
),
|
|
3073
|
-
!state.arrangement || state.arrangement.tracks.length === 0 ? /* @__PURE__ */
|
|
2999
|
+
!state.arrangement || state.arrangement.tracks.length === 0 ? /* @__PURE__ */ jsx2(EmptyState, { title: "No arrangement", hint: "Wire a host arrangement into this panel's input." }) : /* @__PURE__ */ jsxs2(
|
|
3074
3000
|
"div",
|
|
3075
3001
|
{
|
|
3076
3002
|
ref: containerRef,
|
|
@@ -3085,7 +3011,7 @@ function TimelinePanelView({ controller }) {
|
|
|
3085
3011
|
onPointerCancel: onPointerUp,
|
|
3086
3012
|
onKeyDown,
|
|
3087
3013
|
children: [
|
|
3088
|
-
/* @__PURE__ */
|
|
3014
|
+
/* @__PURE__ */ jsx2("div", { style: { ...RULER, height: RULER_PX }, children: ticks.map((tick) => /* @__PURE__ */ jsx2(
|
|
3089
3015
|
"div",
|
|
3090
3016
|
{
|
|
3091
3017
|
style: {
|
|
@@ -3096,20 +3022,20 @@ function TimelinePanelView({ controller }) {
|
|
|
3096
3022
|
height: tick.weight === "major" ? 8 : tick.weight === "medium" ? 5 : 3,
|
|
3097
3023
|
background: "var(--xeno-active)"
|
|
3098
3024
|
},
|
|
3099
|
-
children: tick.label ? /* @__PURE__ */
|
|
3025
|
+
children: tick.label ? /* @__PURE__ */ jsx2("span", { style: TICK_LABEL, className: "tabular-nums", children: tick.label }) : null
|
|
3100
3026
|
},
|
|
3101
3027
|
tick.tick
|
|
3102
3028
|
)) }),
|
|
3103
|
-
/* @__PURE__ */
|
|
3029
|
+
/* @__PURE__ */ jsxs2("div", { style: { position: "absolute", inset: `${RULER_PX}px 0 0 0`, overflow: "hidden" }, children: [
|
|
3104
3030
|
state.visible.map((row) => {
|
|
3105
3031
|
const top = row.topPx - scale.scrollTopPx;
|
|
3106
|
-
return /* @__PURE__ */
|
|
3107
|
-
/* @__PURE__ */
|
|
3108
|
-
/* @__PURE__ */
|
|
3032
|
+
return /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", left: 0, right: 0, top, height: row.heightPx }, children: [
|
|
3033
|
+
/* @__PURE__ */ jsx2("div", { style: { ...GUTTER, width: scale.gutterPx }, children: /* @__PURE__ */ jsx2("span", { style: TRACK_NAME, children: row.track.name }) }),
|
|
3034
|
+
/* @__PURE__ */ jsx2("div", { "data-canvas": "timeline-lane", style: { ...LANE, left: scale.gutterPx }, children: row.clips.map((clip) => {
|
|
3109
3035
|
const shown = preview?.clips[clip.id] ?? clip;
|
|
3110
3036
|
const x = scale.tickToX(shown.startTick);
|
|
3111
3037
|
const width = Math.max(1, scale.durationToPx(shown.endTick - shown.startTick));
|
|
3112
|
-
return /* @__PURE__ */
|
|
3038
|
+
return /* @__PURE__ */ jsx2(
|
|
3113
3039
|
ClipRect,
|
|
3114
3040
|
{
|
|
3115
3041
|
clip,
|
|
@@ -3122,7 +3048,7 @@ function TimelinePanelView({ controller }) {
|
|
|
3122
3048
|
}) })
|
|
3123
3049
|
] }, row.track.id);
|
|
3124
3050
|
}),
|
|
3125
|
-
preview?.marquee ? /* @__PURE__ */
|
|
3051
|
+
preview?.marquee ? /* @__PURE__ */ jsx2(
|
|
3126
3052
|
"div",
|
|
3127
3053
|
{
|
|
3128
3054
|
style: {
|
|
@@ -3137,15 +3063,15 @@ function TimelinePanelView({ controller }) {
|
|
|
3137
3063
|
}
|
|
3138
3064
|
) : null
|
|
3139
3065
|
] }),
|
|
3140
|
-
/* @__PURE__ */
|
|
3066
|
+
/* @__PURE__ */ jsx2("div", { style: { ...PLAYHEAD, left: Math.floor(scale.tickToX(state.playheadTick)) } })
|
|
3141
3067
|
]
|
|
3142
3068
|
}
|
|
3143
3069
|
),
|
|
3144
|
-
/* @__PURE__ */
|
|
3070
|
+
/* @__PURE__ */ jsx2(
|
|
3145
3071
|
StatusBar,
|
|
3146
3072
|
{
|
|
3147
3073
|
left: state.arrangement ? `${state.arrangement.tracks.length} tracks` : void 0,
|
|
3148
|
-
right: /* @__PURE__ */
|
|
3074
|
+
right: /* @__PURE__ */ jsx2("span", { className: "tabular-nums", children: formatTick4(state.playheadTick, state.timebase) })
|
|
3149
3075
|
}
|
|
3150
3076
|
)
|
|
3151
3077
|
] });
|
|
@@ -3156,7 +3082,7 @@ function ClipRect({
|
|
|
3156
3082
|
width,
|
|
3157
3083
|
selected
|
|
3158
3084
|
}) {
|
|
3159
|
-
return /* @__PURE__ */
|
|
3085
|
+
return /* @__PURE__ */ jsx2(
|
|
3160
3086
|
"div",
|
|
3161
3087
|
{
|
|
3162
3088
|
"data-clip-id": clip.id,
|
|
@@ -4192,29 +4118,7 @@ import {
|
|
|
4192
4118
|
Toolbar as Toolbar2,
|
|
4193
4119
|
ToolbarGroup as ToolbarGroup2
|
|
4194
4120
|
} from "@xenosystem/components/chrome";
|
|
4195
|
-
|
|
4196
|
-
// src/time/calendar/react/icons.tsx
|
|
4197
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
4198
|
-
function ChevronGlyph({ direction }) {
|
|
4199
|
-
return /* @__PURE__ */ jsx4(
|
|
4200
|
-
"svg",
|
|
4201
|
-
{
|
|
4202
|
-
width: 11,
|
|
4203
|
-
height: 11,
|
|
4204
|
-
viewBox: "0 0 24 24",
|
|
4205
|
-
fill: "none",
|
|
4206
|
-
stroke: "currentColor",
|
|
4207
|
-
strokeWidth: "1.5",
|
|
4208
|
-
strokeLinecap: "round",
|
|
4209
|
-
strokeLinejoin: "round",
|
|
4210
|
-
"aria-hidden": "true",
|
|
4211
|
-
children: direction === "left" ? /* @__PURE__ */ jsx4("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" })
|
|
4212
|
-
}
|
|
4213
|
-
);
|
|
4214
|
-
}
|
|
4215
|
-
|
|
4216
|
-
// src/time/calendar/react/CalendarPanelView.tsx
|
|
4217
|
-
import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
4121
|
+
import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
4218
4122
|
var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
4219
4123
|
function CalendarPanelView({
|
|
4220
4124
|
controller,
|
|
@@ -4222,33 +4126,33 @@ function CalendarPanelView({
|
|
|
4222
4126
|
emptyHint
|
|
4223
4127
|
}) {
|
|
4224
4128
|
const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
|
|
4225
|
-
const toolbar = /* @__PURE__ */
|
|
4129
|
+
const toolbar = /* @__PURE__ */ jsx3(
|
|
4226
4130
|
Toolbar2,
|
|
4227
4131
|
{
|
|
4228
|
-
left: /* @__PURE__ */
|
|
4229
|
-
/* @__PURE__ */
|
|
4132
|
+
left: /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
4133
|
+
/* @__PURE__ */ jsx3(
|
|
4230
4134
|
IconButton2,
|
|
4231
4135
|
{
|
|
4232
|
-
icon: /* @__PURE__ */
|
|
4136
|
+
icon: /* @__PURE__ */ jsx3(ChevronGlyph, { direction: "left" }),
|
|
4233
4137
|
label: "Previous",
|
|
4234
4138
|
onClick: () => controller.navigate(-1)
|
|
4235
4139
|
}
|
|
4236
4140
|
),
|
|
4237
|
-
/* @__PURE__ */
|
|
4141
|
+
/* @__PURE__ */ jsx3(
|
|
4238
4142
|
IconButton2,
|
|
4239
4143
|
{
|
|
4240
|
-
icon: /* @__PURE__ */
|
|
4144
|
+
icon: /* @__PURE__ */ jsx3(ChevronGlyph, { direction: "right" }),
|
|
4241
4145
|
label: "Next",
|
|
4242
4146
|
onClick: () => controller.navigate(1)
|
|
4243
4147
|
}
|
|
4244
4148
|
),
|
|
4245
|
-
/* @__PURE__ */
|
|
4246
|
-
/* @__PURE__ */
|
|
4149
|
+
/* @__PURE__ */ jsx3(TextButton2, { onClick: () => controller.goToToday(), children: "Today" }),
|
|
4150
|
+
/* @__PURE__ */ jsx3("span", { style: { fontSize: 11, opacity: 0.8 }, children: controller.anchorKey().slice(0, 7) })
|
|
4247
4151
|
] }),
|
|
4248
|
-
right: /* @__PURE__ */
|
|
4249
|
-
state.partial ? /* @__PURE__ */
|
|
4250
|
-
/* @__PURE__ */
|
|
4251
|
-
/* @__PURE__ */
|
|
4152
|
+
right: /* @__PURE__ */ jsxs3(ToolbarGroup2, { end: true, children: [
|
|
4153
|
+
state.partial ? /* @__PURE__ */ jsx3(Badge, { tone: "warning", title: "Some measures have not finished syncing.", children: "partial" }) : null,
|
|
4154
|
+
/* @__PURE__ */ jsx3(Badge, { title: "Every date is bucketed in this zone.", children: controller.timeZone() }),
|
|
4155
|
+
/* @__PURE__ */ jsx3(
|
|
4252
4156
|
SegmentedControl,
|
|
4253
4157
|
{
|
|
4254
4158
|
size: "sm",
|
|
@@ -4269,13 +4173,13 @@ function CalendarPanelView({
|
|
|
4269
4173
|
);
|
|
4270
4174
|
const body = (() => {
|
|
4271
4175
|
if (state.configProblem) {
|
|
4272
|
-
return /* @__PURE__ */
|
|
4176
|
+
return /* @__PURE__ */ jsx3(EmptyState2, { title: "Not configured", hint: state.configProblem });
|
|
4273
4177
|
}
|
|
4274
4178
|
if (state.errorMessage) {
|
|
4275
|
-
return /* @__PURE__ */
|
|
4179
|
+
return /* @__PURE__ */ jsx3(ErrorState, { title: "Could not load events", message: state.errorMessage });
|
|
4276
4180
|
}
|
|
4277
4181
|
if (state.empty) {
|
|
4278
|
-
return /* @__PURE__ */
|
|
4182
|
+
return /* @__PURE__ */ jsx3(
|
|
4279
4183
|
EmptyState2,
|
|
4280
4184
|
{
|
|
4281
4185
|
title: "Nothing scheduled",
|
|
@@ -4284,7 +4188,7 @@ function CalendarPanelView({
|
|
|
4284
4188
|
);
|
|
4285
4189
|
}
|
|
4286
4190
|
if (state.viewMode === "agenda" || state.viewMode === "timeline") {
|
|
4287
|
-
return /* @__PURE__ */
|
|
4191
|
+
return /* @__PURE__ */ jsx3(ScrollArea, { children: /* @__PURE__ */ jsx3(RowList, { role: "listbox", "aria-label": "Events", children: state.events.map((event) => /* @__PURE__ */ jsx3(
|
|
4288
4192
|
Row,
|
|
4289
4193
|
{
|
|
4290
4194
|
label: event.title,
|
|
@@ -4292,14 +4196,14 @@ function CalendarPanelView({
|
|
|
4292
4196
|
selected: state.selection.includes(event.id),
|
|
4293
4197
|
onClick: () => controller.select([event.id]),
|
|
4294
4198
|
onDoubleClick: () => controller.activateRow(event.id),
|
|
4295
|
-
trailing: event.status !== void 0 ? /* @__PURE__ */
|
|
4199
|
+
trailing: event.status !== void 0 ? /* @__PURE__ */ jsx3(Badge, { tone: statusTone(event.status), children: String(event.status) }) : null
|
|
4296
4200
|
},
|
|
4297
4201
|
event.id
|
|
4298
4202
|
)) }) });
|
|
4299
4203
|
}
|
|
4300
4204
|
const columns = state.viewMode === "day" ? 1 : 7;
|
|
4301
|
-
return /* @__PURE__ */
|
|
4302
|
-
columns === 7 ? /* @__PURE__ */
|
|
4205
|
+
return /* @__PURE__ */ jsxs3(ScrollArea, { children: [
|
|
4206
|
+
columns === 7 ? /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }, children: WEEKDAYS.map((_, i) => /* @__PURE__ */ jsx3(
|
|
4303
4207
|
"div",
|
|
4304
4208
|
{
|
|
4305
4209
|
style: {
|
|
@@ -4313,7 +4217,7 @@ function CalendarPanelView({
|
|
|
4313
4217
|
},
|
|
4314
4218
|
i
|
|
4315
4219
|
)) }) : null,
|
|
4316
|
-
/* @__PURE__ */
|
|
4220
|
+
/* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 1 }, children: state.cells.map((cell) => /* @__PURE__ */ jsxs3(
|
|
4317
4221
|
"div",
|
|
4318
4222
|
{
|
|
4319
4223
|
onClick: () => controller.activateSlot(cell.key),
|
|
@@ -4326,9 +4230,9 @@ function CalendarPanelView({
|
|
|
4326
4230
|
boxShadow: cell.today ? "inset 0 0 0 1px var(--xeno-control)" : void 0
|
|
4327
4231
|
},
|
|
4328
4232
|
children: [
|
|
4329
|
-
/* @__PURE__ */
|
|
4330
|
-
cell.events.map((event) => /* @__PURE__ */
|
|
4331
|
-
cell.overflow > 0 ? /* @__PURE__ */
|
|
4233
|
+
/* @__PURE__ */ jsx3("div", { style: { fontSize: 9, opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: cell.day }),
|
|
4234
|
+
cell.events.map((event) => /* @__PURE__ */ jsx3(Chip, { event, controller, state }, event.id)),
|
|
4235
|
+
cell.overflow > 0 ? /* @__PURE__ */ jsxs3("div", { style: { fontSize: 9, opacity: 0.5 }, children: [
|
|
4332
4236
|
"+",
|
|
4333
4237
|
cell.overflow,
|
|
4334
4238
|
" more"
|
|
@@ -4339,10 +4243,10 @@ function CalendarPanelView({
|
|
|
4339
4243
|
)) })
|
|
4340
4244
|
] });
|
|
4341
4245
|
})();
|
|
4342
|
-
return /* @__PURE__ */
|
|
4246
|
+
return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
|
|
4343
4247
|
toolbar,
|
|
4344
4248
|
body,
|
|
4345
|
-
/* @__PURE__ */
|
|
4249
|
+
/* @__PURE__ */ jsx3(
|
|
4346
4250
|
StatusBar2,
|
|
4347
4251
|
{
|
|
4348
4252
|
left: `${state.events.length} event${state.events.length === 1 ? "" : "s"}`,
|
|
@@ -4357,7 +4261,7 @@ function Chip({
|
|
|
4357
4261
|
state
|
|
4358
4262
|
}) {
|
|
4359
4263
|
const selected = state.selection.includes(event.id);
|
|
4360
|
-
return /* @__PURE__ */
|
|
4264
|
+
return /* @__PURE__ */ jsxs3(
|
|
4361
4265
|
"div",
|
|
4362
4266
|
{
|
|
4363
4267
|
onClick: (e) => {
|
|
@@ -4386,7 +4290,7 @@ function Chip({
|
|
|
4386
4290
|
cursor: "pointer"
|
|
4387
4291
|
},
|
|
4388
4292
|
children: [
|
|
4389
|
-
event.allDay ? null : /* @__PURE__ */
|
|
4293
|
+
event.allDay ? null : /* @__PURE__ */ jsx3("span", { style: { opacity: 0.6, marginRight: 3, fontVariantNumeric: "tabular-nums" }, children: formatMinutes(event.startMinutes) }),
|
|
4390
4294
|
event.title
|
|
4391
4295
|
]
|
|
4392
4296
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xenosystem/blocks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.1",
|
|
4
4
|
"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.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -34,6 +34,10 @@
|
|
|
34
34
|
"types": "./dist/data/duckdb.d.ts",
|
|
35
35
|
"import": "./dist/data/duckdb.js"
|
|
36
36
|
},
|
|
37
|
+
"./icons": {
|
|
38
|
+
"types": "./dist/icons/index.d.ts",
|
|
39
|
+
"import": "./dist/icons/index.js"
|
|
40
|
+
},
|
|
37
41
|
"./edit": {
|
|
38
42
|
"types": "./dist/edit/index.d.ts",
|
|
39
43
|
"import": "./dist/edit/index.js"
|