@xenosystem/blocks 0.12.9 → 0.13.0
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-OCEZTO2D.js +228 -0
- package/dist/edit/index.d.ts +4 -4
- package/dist/edit/index.js +457 -665
- package/dist/icons/index.d.ts +23 -0
- package/dist/icons/index.js +79 -0
- package/dist/time/index.d.ts +2 -1
- package/dist/time/index.js +109 -186
- package/package.json +5 -1
package/dist/edit/index.js
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DiamondIcon,
|
|
3
|
+
EntryIcon,
|
|
4
|
+
EyedropperIcon,
|
|
5
|
+
KindGlyph,
|
|
6
|
+
LinkIcon,
|
|
7
|
+
LockStateIcon,
|
|
8
|
+
NextIcon,
|
|
9
|
+
PendingGlyph,
|
|
10
|
+
PrevIcon,
|
|
11
|
+
RedoIcon,
|
|
12
|
+
ResetIcon,
|
|
13
|
+
StopwatchIcon,
|
|
14
|
+
SwapIcon,
|
|
15
|
+
TrashIcon,
|
|
16
|
+
UndoIcon,
|
|
17
|
+
VisibilityIcon,
|
|
18
|
+
XIcon,
|
|
19
|
+
XIcon2
|
|
20
|
+
} from "../chunk-OCEZTO2D.js";
|
|
1
21
|
import "../chunk-2KG3PWR4.js";
|
|
2
22
|
|
|
3
23
|
// src/edit/layers/panel.ts
|
|
@@ -1338,7 +1358,7 @@ var LAYERS_DECLARATION = {
|
|
|
1338
1358
|
component: "fragment",
|
|
1339
1359
|
children: [
|
|
1340
1360
|
{ component: "layers/Thumbnail", when: { item: "hasThumbnail" }, props: { thumbnailKey: { item: "thumbnailKey" }, size: { input: "view.thumbnailSize" } } },
|
|
1341
|
-
{ component: "
|
|
1361
|
+
{ component: "icons/Kind", when: { item: "noThumbnail" } }
|
|
1342
1362
|
]
|
|
1343
1363
|
}
|
|
1344
1364
|
},
|
|
@@ -1346,8 +1366,8 @@ var LAYERS_DECLARATION = {
|
|
|
1346
1366
|
node: {
|
|
1347
1367
|
component: "fragment",
|
|
1348
1368
|
children: [
|
|
1349
|
-
{ component: "chrome/IconButton", when: { item: "showVisibility" }, props: { size: { value: "sm" }, icon: { node: { component: "
|
|
1350
|
-
{ component: "chrome/IconButton", when: { item: "showLock" }, props: { size: { value: "sm" }, icon: { node: { component: "
|
|
1369
|
+
{ component: "chrome/IconButton", when: { item: "showVisibility" }, props: { size: { value: "sm" }, icon: { node: { component: "icons/Visibility", props: { open: { item: "visible" } } } }, label: { item: "visibilityLabel" }, active: { item: "visible" } }, on: { onClick: toggle("visible") } },
|
|
1370
|
+
{ component: "chrome/IconButton", when: { item: "showLock" }, props: { size: { value: "sm" }, icon: { node: { component: "icons/LockState", props: { locked: { item: "locked" } } } }, label: { item: "lockLabel" }, active: { item: "locked" } }, on: { onClick: toggle("locked") } },
|
|
1351
1371
|
{ component: "chrome/ChipToggle", when: { item: "showSolo" }, props: { glyph: { value: "S" }, label: { value: "Solo" }, on: { item: "solo" } }, on: { onChange: toggle("solo") } },
|
|
1352
1372
|
{ component: "chrome/ChipToggle", when: { item: "showMute" }, props: { glyph: { value: "M" }, label: { value: "Mute" }, on: { item: "muted" } }, on: { onChange: toggle("muted") } },
|
|
1353
1373
|
{ component: "chrome/ChipToggle", when: { item: "showArm" }, props: { glyph: { value: "R" }, label: { value: "Arm" }, on: { item: "armed" } }, on: { onChange: toggle("armed") } },
|
|
@@ -1401,57 +1421,9 @@ var LAYERS_DECLARATION = {
|
|
|
1401
1421
|
// src/edit/layers/react/LayersPanelView.tsx
|
|
1402
1422
|
import { Badge, ChipToggle, ColorTag, Column, EmptyState, IconButton, Input, RowList, Row, ScrollArea, SearchField, StatusBar, Text, Toolbar, VirtualWindow } from "@xenosystem/components/chrome";
|
|
1403
1423
|
|
|
1404
|
-
// src/edit/layers/react/icons.tsx
|
|
1405
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1406
|
-
var base = (size) => ({
|
|
1407
|
-
width: size,
|
|
1408
|
-
height: size,
|
|
1409
|
-
viewBox: "0 0 24 24",
|
|
1410
|
-
fill: "none",
|
|
1411
|
-
stroke: "currentColor",
|
|
1412
|
-
strokeWidth: 1.5,
|
|
1413
|
-
strokeLinecap: "round",
|
|
1414
|
-
strokeLinejoin: "round",
|
|
1415
|
-
"aria-hidden": true
|
|
1416
|
-
});
|
|
1417
|
-
function EyeIcon({ size = 12, className }) {
|
|
1418
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), className, children: [
|
|
1419
|
-
/* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
|
|
1420
|
-
/* @__PURE__ */ jsx("path", { d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" })
|
|
1421
|
-
] });
|
|
1422
|
-
}
|
|
1423
|
-
function EyeOffIcon({ size = 12, className }) {
|
|
1424
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), className, children: [
|
|
1425
|
-
/* @__PURE__ */ jsx("path", { d: "M10.7 5.1A11 11 0 0 1 12 5c6.5 0 10 7 10 7a18 18 0 0 1-2.4 3.4M6.6 6.6A18 18 0 0 0 2 12s3.5 7 10 7a10.9 10.9 0 0 0 5.4-1.4" }),
|
|
1426
|
-
/* @__PURE__ */ jsx("path", { d: "M14.1 14.1a3 3 0 1 1-4.2-4.2" }),
|
|
1427
|
-
/* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
|
|
1428
|
-
] });
|
|
1429
|
-
}
|
|
1430
|
-
function LockIcon({ size = 12, className }) {
|
|
1431
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), className, children: [
|
|
1432
|
-
/* @__PURE__ */ jsx("rect", { width: "14", height: "10", x: "5", y: "11", rx: "2" }),
|
|
1433
|
-
/* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
|
|
1434
|
-
] });
|
|
1435
|
-
}
|
|
1436
|
-
function UnlockIcon({ size = 12, className }) {
|
|
1437
|
-
return /* @__PURE__ */ jsxs("svg", { ...base(size), className, children: [
|
|
1438
|
-
/* @__PURE__ */ jsx("rect", { width: "14", height: "10", x: "5", y: "11", rx: "2" }),
|
|
1439
|
-
/* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 7.5-2" })
|
|
1440
|
-
] });
|
|
1441
|
-
}
|
|
1442
|
-
function KindGlyph({ size = 10 }) {
|
|
1443
|
-
return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }) });
|
|
1444
|
-
}
|
|
1445
|
-
function VisibilityIcon({ open, size }) {
|
|
1446
|
-
return open ? /* @__PURE__ */ jsx(EyeIcon, { size }) : /* @__PURE__ */ jsx(EyeOffIcon, { size });
|
|
1447
|
-
}
|
|
1448
|
-
function LockStateIcon({ locked, size }) {
|
|
1449
|
-
return locked ? /* @__PURE__ */ jsx(LockIcon, { size }) : /* @__PURE__ */ jsx(UnlockIcon, { size });
|
|
1450
|
-
}
|
|
1451
|
-
|
|
1452
1424
|
// src/edit/layers/react/Thumbnail.tsx
|
|
1453
1425
|
import { useEffect, useRef } from "react";
|
|
1454
|
-
import { jsx
|
|
1426
|
+
import { jsx } from "react/jsx-runtime";
|
|
1455
1427
|
function Thumbnail({ size, data }) {
|
|
1456
1428
|
const ref = useRef(null);
|
|
1457
1429
|
useEffect(() => {
|
|
@@ -1486,7 +1458,7 @@ function Thumbnail({ size, data }) {
|
|
|
1486
1458
|
img.src = data.dataURL;
|
|
1487
1459
|
}
|
|
1488
1460
|
}, [data, size]);
|
|
1489
|
-
return /* @__PURE__ */
|
|
1461
|
+
return /* @__PURE__ */ jsx(
|
|
1490
1462
|
"canvas",
|
|
1491
1463
|
{
|
|
1492
1464
|
ref,
|
|
@@ -1506,7 +1478,7 @@ function Thumbnail({ size, data }) {
|
|
|
1506
1478
|
}
|
|
1507
1479
|
|
|
1508
1480
|
// src/edit/layers/react/LayersPanelView.tsx
|
|
1509
|
-
import { Fragment, jsx as
|
|
1481
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
1510
1482
|
var DRAG_THRESHOLD = 4;
|
|
1511
1483
|
function LayersPanelView({ controller }) {
|
|
1512
1484
|
const subscribe = useCallback((cb) => controller.subscribe(cb), [controller]);
|
|
@@ -1514,13 +1486,13 @@ function LayersPanelView({ controller }) {
|
|
|
1514
1486
|
useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
1515
1487
|
const view = layersViewState(controller);
|
|
1516
1488
|
const ui5 = (intent) => applyLayersUi(controller, intent);
|
|
1517
|
-
return /* @__PURE__ */
|
|
1518
|
-
view.searchShown ? /* @__PURE__ */
|
|
1519
|
-
/* @__PURE__ */
|
|
1520
|
-
/* @__PURE__ */
|
|
1521
|
-
view.empty ? /* @__PURE__ */
|
|
1489
|
+
return /* @__PURE__ */ jsxs(Column, { className: "xeno-layers-panel", children: [
|
|
1490
|
+
view.searchShown ? /* @__PURE__ */ jsx2(Toolbar, { children: /* @__PURE__ */ jsx2(SearchField, { value: view.filter, onChange: (v) => ui5({ kind: "filter", value: v }), placeholder: "Search layers", label: "Search layers" }) }) : null,
|
|
1491
|
+
/* @__PURE__ */ jsxs(LayersScroller, { controller, children: [
|
|
1492
|
+
/* @__PURE__ */ jsx2(RowList, { role: "tree", "aria-label": "Layers", children: /* @__PURE__ */ jsx2(VirtualWindow, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((row2) => /* @__PURE__ */ jsx2(LayerRow, { row: row2, thumbnailSize: view.thumbnailSize, controller }, row2.id)) }) }),
|
|
1493
|
+
view.empty ? /* @__PURE__ */ jsx2(EmptyState, { title: "No layers" }) : null
|
|
1522
1494
|
] }),
|
|
1523
|
-
/* @__PURE__ */
|
|
1495
|
+
/* @__PURE__ */ jsx2(StatusBar, { left: /* @__PURE__ */ jsx2(Text, { role: "number", children: view.count }), right: view.orderLabel ? /* @__PURE__ */ jsx2(Text, { role: "meta", children: view.orderLabel }) : null })
|
|
1524
1496
|
] });
|
|
1525
1497
|
}
|
|
1526
1498
|
function LayersScroller({ controller, children }) {
|
|
@@ -1604,11 +1576,11 @@ function LayersScroller({ controller, children }) {
|
|
|
1604
1576
|
},
|
|
1605
1577
|
[controller]
|
|
1606
1578
|
);
|
|
1607
|
-
return /* @__PURE__ */
|
|
1579
|
+
return /* @__PURE__ */ jsx2(ScrollArea, { ref: scrollRef, onScroll, onKeyDown, onPointerDown, onPointerMove, onPointerUp, tabIndex: 0, children });
|
|
1608
1580
|
}
|
|
1609
1581
|
function LayersRenameField({ id, controller }) {
|
|
1610
1582
|
const [draft, setDraft] = useState(() => controller.getTree().nodes[id]?.name ?? "");
|
|
1611
|
-
return /* @__PURE__ */
|
|
1583
|
+
return /* @__PURE__ */ jsx2(
|
|
1612
1584
|
Input,
|
|
1613
1585
|
{
|
|
1614
1586
|
autoFocus: true,
|
|
@@ -1625,11 +1597,11 @@ function LayersRenameField({ id, controller }) {
|
|
|
1625
1597
|
);
|
|
1626
1598
|
}
|
|
1627
1599
|
function LayersThumbnail({ thumbnailKey, size, controller }) {
|
|
1628
|
-
return /* @__PURE__ */
|
|
1600
|
+
return /* @__PURE__ */ jsx2(Thumbnail, { size, data: controller.getThumbnail(thumbnailKey) });
|
|
1629
1601
|
}
|
|
1630
1602
|
function LayerRow({ row: row2, thumbnailSize, controller }) {
|
|
1631
1603
|
const ui5 = (intent) => applyLayersUi(controller, intent);
|
|
1632
|
-
return /* @__PURE__ */
|
|
1604
|
+
return /* @__PURE__ */ jsx2(
|
|
1633
1605
|
Row,
|
|
1634
1606
|
{
|
|
1635
1607
|
"data-layer-row": row2.id,
|
|
@@ -1641,19 +1613,19 @@ function LayerRow({ row: row2, thumbnailSize, controller }) {
|
|
|
1641
1613
|
dropHint: row2.dropHint,
|
|
1642
1614
|
expanded: row2.expanded,
|
|
1643
1615
|
title: row2.title,
|
|
1644
|
-
icon: row2.hasThumbnail ? /* @__PURE__ */
|
|
1645
|
-
leading: /* @__PURE__ */
|
|
1646
|
-
row2.showVisibility ? /* @__PURE__ */
|
|
1647
|
-
row2.showLock ? /* @__PURE__ */
|
|
1648
|
-
row2.showSolo ? /* @__PURE__ */
|
|
1649
|
-
row2.showMute ? /* @__PURE__ */
|
|
1650
|
-
row2.showArm ? /* @__PURE__ */
|
|
1651
|
-
row2.showColor ? /* @__PURE__ */
|
|
1616
|
+
icon: row2.hasThumbnail ? /* @__PURE__ */ jsx2(LayersThumbnail, { thumbnailKey: row2.thumbnailKey, size: thumbnailSize, controller }) : /* @__PURE__ */ jsx2(KindGlyph, {}),
|
|
1617
|
+
leading: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1618
|
+
row2.showVisibility ? /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(VisibilityIcon, { open: row2.visible }), label: row2.visibilityLabel, active: row2.visible, onClick: () => ui5({ kind: "toggleProp", id: row2.id, prop: "visible" }) }) : null,
|
|
1619
|
+
row2.showLock ? /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LockStateIcon, { locked: row2.locked }), label: row2.lockLabel, active: row2.locked, onClick: () => ui5({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
|
|
1620
|
+
row2.showSolo ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
|
|
1621
|
+
row2.showMute ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
|
|
1622
|
+
row2.showArm ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "armed" }) }) : null,
|
|
1623
|
+
row2.showColor ? /* @__PURE__ */ jsx2(ColorTag, { color: row2.colorLabel }) : null
|
|
1652
1624
|
] }),
|
|
1653
|
-
label: row2.renaming ? /* @__PURE__ */
|
|
1654
|
-
trailing: /* @__PURE__ */
|
|
1655
|
-
row2.adornments.map((a) => /* @__PURE__ */
|
|
1656
|
-
row2.showOpacity ? /* @__PURE__ */
|
|
1625
|
+
label: row2.renaming ? /* @__PURE__ */ jsx2(LayersRenameField, { id: row2.id, controller }) : row2.name,
|
|
1626
|
+
trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1627
|
+
row2.adornments.map((a) => /* @__PURE__ */ jsx2(Badge, { size: "sm", title: a.title, children: a.text }, a.key)),
|
|
1628
|
+
row2.showOpacity ? /* @__PURE__ */ jsx2(Text, { role: "number", children: row2.opacity }) : null
|
|
1657
1629
|
] }),
|
|
1658
1630
|
onExpandedChange: () => ui5({ kind: "toggleExpanded", id: row2.id }),
|
|
1659
1631
|
onDoubleClick: () => ui5({ kind: "beginRename", id: row2.id }),
|
|
@@ -1661,15 +1633,12 @@ function LayerRow({ row: row2, thumbnailSize, controller }) {
|
|
|
1661
1633
|
}
|
|
1662
1634
|
);
|
|
1663
1635
|
}
|
|
1664
|
-
var LAYERS_RUNTIME_UNITS = ["layers/Scroller", "layers/RenameField", "layers/Thumbnail"
|
|
1636
|
+
var LAYERS_RUNTIME_UNITS = ["layers/Scroller", "layers/RenameField", "layers/Thumbnail"];
|
|
1665
1637
|
function layersRuntimeComponents(controller) {
|
|
1666
1638
|
return {
|
|
1667
|
-
"layers/Scroller": ({ children }) => /* @__PURE__ */
|
|
1668
|
-
"layers/RenameField": ({ id }) => /* @__PURE__ */
|
|
1669
|
-
"layers/Thumbnail": ({ thumbnailKey, size }) => /* @__PURE__ */
|
|
1670
|
-
"layers/KindGlyph": KindGlyph,
|
|
1671
|
-
"layers/VisibilityIcon": VisibilityIcon,
|
|
1672
|
-
"layers/LockStateIcon": LockStateIcon
|
|
1639
|
+
"layers/Scroller": ({ children }) => /* @__PURE__ */ jsx2(LayersScroller, { controller, children }),
|
|
1640
|
+
"layers/RenameField": ({ id }) => /* @__PURE__ */ jsx2(LayersRenameField, { id, controller }),
|
|
1641
|
+
"layers/Thumbnail": ({ thumbnailKey, size }) => /* @__PURE__ */ jsx2(LayersThumbnail, { thumbnailKey, size, controller })
|
|
1673
1642
|
};
|
|
1674
1643
|
}
|
|
1675
1644
|
|
|
@@ -2574,9 +2543,9 @@ var InspectorPanelController = class {
|
|
|
2574
2543
|
composeValue(fieldId, numeric, component) {
|
|
2575
2544
|
if (component === void 0) return numeric;
|
|
2576
2545
|
const current = this.getFieldValue(fieldId);
|
|
2577
|
-
const
|
|
2578
|
-
|
|
2579
|
-
return
|
|
2546
|
+
const base = Array.isArray(current) ? [...current] : [];
|
|
2547
|
+
base[component] = numeric;
|
|
2548
|
+
return base;
|
|
2580
2549
|
}
|
|
2581
2550
|
// ── Vector expander (scalar ⇔ per-element) ────────────────────────────────
|
|
2582
2551
|
/** Whether a vector field is showing per-element rows. */
|
|
@@ -3128,7 +3097,7 @@ var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value
|
|
|
3128
3097
|
var iconButton = (glyph, label, emit, extra = {}) => ({
|
|
3129
3098
|
component: "chrome/IconButton",
|
|
3130
3099
|
...extra.when ? { when: extra.when } : {},
|
|
3131
|
-
props: { size: { value: "sm" }, icon: { node: { component: `
|
|
3100
|
+
props: { size: { value: "sm" }, icon: { node: { component: `icons/${glyph}` } }, label, ...extra.props ?? {} },
|
|
3132
3101
|
on: { onClick: emit }
|
|
3133
3102
|
});
|
|
3134
3103
|
var INSPECTOR_DECLARATION = {
|
|
@@ -3211,10 +3180,10 @@ var INSPECTOR_DECLARATION = {
|
|
|
3211
3180
|
component: "fragment",
|
|
3212
3181
|
when: { item: "showKeyframes" },
|
|
3213
3182
|
children: [
|
|
3214
|
-
iconButton("
|
|
3215
|
-
iconButton("
|
|
3216
|
-
{ component: "chrome/IconButton", when: { item: "animated" }, props: { size: { value: "sm" }, icon: { node: { component: "
|
|
3217
|
-
iconButton("
|
|
3183
|
+
iconButton("Stopwatch", { value: "Toggle animation" }, ui2("keyframe", { fieldId: { item: "id" }, op: { value: "toggleAnim" } }), { props: { active: { item: "animated" } } }),
|
|
3184
|
+
iconButton("Prev", { value: "Previous keyframe" }, ui2("keyframe", { fieldId: { item: "id" }, op: { value: "prev" } }), { when: { item: "animated" }, props: { disabled: { item: "prevDisabled" } } }),
|
|
3185
|
+
{ component: "chrome/IconButton", when: { item: "animated" }, props: { size: { value: "sm" }, icon: { node: { component: "icons/Diamond", props: { filled: { item: "onKeyframe" } } } }, label: { item: "keyframeLabel" } }, on: { onClick: ui2("keyframe", { fieldId: { item: "id" }, op: { item: "keyframeOp" } }) } },
|
|
3186
|
+
iconButton("Next", { value: "Next keyframe" }, ui2("keyframe", { fieldId: { item: "id" }, op: { value: "next" } }), { when: { item: "animated" }, props: { disabled: { item: "nextDisabled" } } })
|
|
3218
3187
|
]
|
|
3219
3188
|
}
|
|
3220
3189
|
},
|
|
@@ -3224,8 +3193,8 @@ var INSPECTOR_DECLARATION = {
|
|
|
3224
3193
|
children: [
|
|
3225
3194
|
{ component: "chrome/Select", when: { item: "showEasing" }, props: { size: { value: "sm" }, options: { item: "easingOptions" }, value: { item: "easing" }, label: { value: "Easing" } }, on: { onChange: ui2("setEasing", { fieldId: { item: "id" }, easing: { arg: "" } }) } },
|
|
3226
3195
|
{ component: "chrome/Badge", when: { item: "showKeyframes" }, props: { size: { value: "sm" } }, children: [text2({ item: "keyframeChip" })] },
|
|
3227
|
-
iconButton("
|
|
3228
|
-
iconButton("
|
|
3196
|
+
iconButton("Link", { item: "tokenActionLabel" }, ui2("bindToken", { fieldId: { item: "id" } }), { when: { item: "showToken" }, props: { active: { item: "bound" } } }),
|
|
3197
|
+
iconButton("Reset", { value: "Reset to default" }, ui2("resetField", { fieldId: { item: "id" } }), { when: { item: "showReset" } })
|
|
3229
3198
|
]
|
|
3230
3199
|
}
|
|
3231
3200
|
}
|
|
@@ -3258,54 +3227,6 @@ var INSPECTOR_DECLARATION = {
|
|
|
3258
3227
|
// src/edit/inspector/react/InspectorPanelView.tsx
|
|
3259
3228
|
import { Badge as Badge2, Column as Column2, EmptyState as EmptyState2, Field, FieldGroup, IconButton as IconButton3, Menu, ScrollArea as ScrollArea2, SearchField as SearchField2, Section, Select as Select2, Stack as Stack2, Text as Text3 } from "@xenosystem/components/chrome";
|
|
3260
3229
|
|
|
3261
|
-
// src/edit/inspector/react/icons.tsx
|
|
3262
|
-
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
3263
|
-
var base2 = (size) => ({
|
|
3264
|
-
width: size,
|
|
3265
|
-
height: size,
|
|
3266
|
-
viewBox: "0 0 24 24",
|
|
3267
|
-
fill: "none",
|
|
3268
|
-
stroke: "currentColor",
|
|
3269
|
-
strokeWidth: 1.5,
|
|
3270
|
-
strokeLinecap: "round",
|
|
3271
|
-
strokeLinejoin: "round",
|
|
3272
|
-
"aria-hidden": true
|
|
3273
|
-
});
|
|
3274
|
-
function StopwatchIcon({ size = 11 }) {
|
|
3275
|
-
return /* @__PURE__ */ jsxs3("svg", { ...base2(size), children: [
|
|
3276
|
-
/* @__PURE__ */ jsx4("path", { d: "M10 2h4" }),
|
|
3277
|
-
/* @__PURE__ */ jsx4("path", { d: "M12 14v-4" }),
|
|
3278
|
-
/* @__PURE__ */ jsx4("path", { d: "M20 14a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" })
|
|
3279
|
-
] });
|
|
3280
|
-
}
|
|
3281
|
-
function DiamondIcon({ size = 9, filled = false }) {
|
|
3282
|
-
return /* @__PURE__ */ jsx4("svg", { ...base2(size), fill: filled ? "currentColor" : "none", children: /* @__PURE__ */ jsx4("path", { d: "m12 3 7 9-7 9-7-9z" }) });
|
|
3283
|
-
}
|
|
3284
|
-
function PrevIcon({ size = 9 }) {
|
|
3285
|
-
return /* @__PURE__ */ jsx4("svg", { ...base2(size), children: /* @__PURE__ */ jsx4("path", { d: "m15 18-6-6 6-6" }) });
|
|
3286
|
-
}
|
|
3287
|
-
function NextIcon({ size = 9 }) {
|
|
3288
|
-
return /* @__PURE__ */ jsx4("svg", { ...base2(size), children: /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" }) });
|
|
3289
|
-
}
|
|
3290
|
-
function LinkIcon({ size = 10 }) {
|
|
3291
|
-
return /* @__PURE__ */ jsxs3("svg", { ...base2(size), children: [
|
|
3292
|
-
/* @__PURE__ */ jsx4("path", { d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.8 1.7" }),
|
|
3293
|
-
/* @__PURE__ */ jsx4("path", { d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.8-1.7" })
|
|
3294
|
-
] });
|
|
3295
|
-
}
|
|
3296
|
-
function ResetIcon({ size = 10 }) {
|
|
3297
|
-
return /* @__PURE__ */ jsxs3("svg", { ...base2(size), children: [
|
|
3298
|
-
/* @__PURE__ */ jsx4("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
|
|
3299
|
-
/* @__PURE__ */ jsx4("path", { d: "M3 3v5h5" })
|
|
3300
|
-
] });
|
|
3301
|
-
}
|
|
3302
|
-
function XIcon({ size = 10 }) {
|
|
3303
|
-
return /* @__PURE__ */ jsxs3("svg", { ...base2(size), children: [
|
|
3304
|
-
/* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
|
|
3305
|
-
/* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
|
|
3306
|
-
] });
|
|
3307
|
-
}
|
|
3308
|
-
|
|
3309
3230
|
// src/edit/inspector/react/widgets.tsx
|
|
3310
3231
|
import { useCallback as useCallback2, useRef as useRef3 } from "react";
|
|
3311
3232
|
import {
|
|
@@ -3322,7 +3243,7 @@ import {
|
|
|
3322
3243
|
TextButton,
|
|
3323
3244
|
Toggle
|
|
3324
3245
|
} from "@xenosystem/components/chrome";
|
|
3325
|
-
import { Fragment as Fragment2, jsx as
|
|
3246
|
+
import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
3326
3247
|
function displayText(field, controller) {
|
|
3327
3248
|
const draft = controller.getDraft(field.id);
|
|
3328
3249
|
if (draft !== void 0) return draft;
|
|
@@ -3431,9 +3352,9 @@ function NumberWidget({ field, controller, component }) {
|
|
|
3431
3352
|
return typeof v === "number" ? formatNumeric(v, field) : "";
|
|
3432
3353
|
})() : displayText(field, controller);
|
|
3433
3354
|
const position = numericValue === null ? null : valueToPosition(numericValue, field);
|
|
3434
|
-
return /* @__PURE__ */
|
|
3435
|
-
component !== void 0 && field.components?.[component] ? /* @__PURE__ */
|
|
3436
|
-
/* @__PURE__ */
|
|
3355
|
+
return /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 2, pad: "none", children: [
|
|
3356
|
+
component !== void 0 && field.components?.[component] ? /* @__PURE__ */ jsx3(AxisLabel, { scrubbable: editable, onPointerDown, onPointerMove, onPointerUp, children: field.components[component] }) : null,
|
|
3357
|
+
/* @__PURE__ */ jsx3(
|
|
3437
3358
|
Input2,
|
|
3438
3359
|
{
|
|
3439
3360
|
inputMode: "decimal",
|
|
@@ -3451,22 +3372,22 @@ function NumberWidget({ field, controller, component }) {
|
|
|
3451
3372
|
...ariaSliderProps(field, numericValue)
|
|
3452
3373
|
}
|
|
3453
3374
|
),
|
|
3454
|
-
controller.getNumericMode() === "slider" && position !== null && Number.isFinite(position) ? /* @__PURE__ */
|
|
3375
|
+
controller.getNumericMode() === "slider" && position !== null && Number.isFinite(position) ? /* @__PURE__ */ jsx3(ProportionBar, { segments: [{ value: position, opacity: 0.9 }, { value: 1 - position, opacity: 0.08 }] }) : null
|
|
3455
3376
|
] });
|
|
3456
3377
|
}
|
|
3457
3378
|
function VectorWidget({ field, controller }) {
|
|
3458
3379
|
const expanded = controller.isExpanded(field.id) || !controller.isUniformVector(field.id);
|
|
3459
3380
|
const value = controller.getFieldValue(field.id);
|
|
3460
3381
|
const count = Array.isArray(value) ? value.length : field.components?.length ?? 0;
|
|
3461
|
-
const toggle2 = (label, title) => /* @__PURE__ */
|
|
3382
|
+
const toggle2 = (label, title) => /* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3("span", { "aria-hidden": true, children: "\u22EF" }), label, onClick: () => controller.toggleExpanded(field.id) });
|
|
3462
3383
|
if (!expanded && field.expandable) {
|
|
3463
|
-
return /* @__PURE__ */
|
|
3464
|
-
/* @__PURE__ */
|
|
3384
|
+
return /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 3, pad: "none", children: [
|
|
3385
|
+
/* @__PURE__ */ jsx3(NumberWidget, { field, controller, component: 0 }),
|
|
3465
3386
|
toggle2("Expand", "Edit each axis separately")
|
|
3466
3387
|
] });
|
|
3467
3388
|
}
|
|
3468
|
-
return /* @__PURE__ */
|
|
3469
|
-
Array.from({ length: count }, (_, i) => /* @__PURE__ */
|
|
3389
|
+
return /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 3, pad: "none", children: [
|
|
3390
|
+
Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx3(NumberWidget, { field, controller, component: i }, i)),
|
|
3470
3391
|
field.expandable && controller.isUniformVector(field.id) ? toggle2("Collapse", "Link axes") : null
|
|
3471
3392
|
] });
|
|
3472
3393
|
}
|
|
@@ -3486,15 +3407,15 @@ function TextWidget({ field, controller }) {
|
|
|
3486
3407
|
onBlur: handlers.onBlur,
|
|
3487
3408
|
onKeyDown: handlers.onKeyDown
|
|
3488
3409
|
};
|
|
3489
|
-
if (field.type === "textarea") return /* @__PURE__ */
|
|
3490
|
-
return /* @__PURE__ */
|
|
3410
|
+
if (field.type === "textarea") return /* @__PURE__ */ jsx3(TextArea, { ...shared, rows: field.rows ?? 3 });
|
|
3411
|
+
return /* @__PURE__ */ jsx3(Input2, { ...shared });
|
|
3491
3412
|
}
|
|
3492
3413
|
function CodeWidget({ field, controller }) {
|
|
3493
3414
|
const editable = isFieldEditable(field);
|
|
3494
3415
|
const mixed = isFieldMixed(field);
|
|
3495
3416
|
const handlers = useEditingHandlers(field, controller);
|
|
3496
3417
|
const expression = field.type === "expression";
|
|
3497
|
-
return /* @__PURE__ */
|
|
3418
|
+
return /* @__PURE__ */ jsx3(
|
|
3498
3419
|
TextArea,
|
|
3499
3420
|
{
|
|
3500
3421
|
variant: "mono",
|
|
@@ -3528,7 +3449,7 @@ function BooleanWidget({ field, controller }) {
|
|
|
3528
3449
|
const editable = isFieldEditable(field);
|
|
3529
3450
|
const mixed = isFieldMixed(field);
|
|
3530
3451
|
const on = controller.getFieldValue(field.id) === true;
|
|
3531
|
-
return /* @__PURE__ */
|
|
3452
|
+
return /* @__PURE__ */ jsx3(Toggle, { size: "sm", checked: on, mixed, label: field.label, disabled: !editable, onChange: (next) => controller.setValue(field.id, next) });
|
|
3532
3453
|
}
|
|
3533
3454
|
function SelectWidget({ field, controller }) {
|
|
3534
3455
|
const editable = isFieldEditable(field);
|
|
@@ -3538,12 +3459,12 @@ function SelectWidget({ field, controller }) {
|
|
|
3538
3459
|
const value = mixed ? "" : String(current ?? "");
|
|
3539
3460
|
const hasCurrent = mixed || value === "" || options.some((o) => o.value === value);
|
|
3540
3461
|
const all = hasCurrent ? options : [{ value, label: value }, ...options];
|
|
3541
|
-
return /* @__PURE__ */
|
|
3462
|
+
return /* @__PURE__ */ jsx3(Select, { options: all, value, mixed, disabled: !editable, label: field.label, onChange: (next) => controller.setValue(field.id, next) });
|
|
3542
3463
|
}
|
|
3543
3464
|
function SegmentedWidget({ field, controller }) {
|
|
3544
3465
|
const editable = isFieldEditable(field);
|
|
3545
3466
|
const current = String(controller.getFieldValue(field.id) ?? "");
|
|
3546
|
-
return /* @__PURE__ */
|
|
3467
|
+
return /* @__PURE__ */ jsx3(
|
|
3547
3468
|
SegmentedControl,
|
|
3548
3469
|
{
|
|
3549
3470
|
size: "sm",
|
|
@@ -3561,7 +3482,7 @@ function ColorWidget({ field, controller }) {
|
|
|
3561
3482
|
const raw = controller.getFieldValue(field.id);
|
|
3562
3483
|
const hex = typeof raw === "string" ? raw : typeof raw?.hex === "string" ? raw.hex : "";
|
|
3563
3484
|
const editable = isFieldEditable(field);
|
|
3564
|
-
return /* @__PURE__ */
|
|
3485
|
+
return /* @__PURE__ */ jsx3(
|
|
3565
3486
|
Swatch,
|
|
3566
3487
|
{
|
|
3567
3488
|
color: hex || void 0,
|
|
@@ -3585,26 +3506,26 @@ function ListWidget({ field, controller }) {
|
|
|
3585
3506
|
next.splice(to, 0, moved);
|
|
3586
3507
|
write(next);
|
|
3587
3508
|
};
|
|
3588
|
-
return /* @__PURE__ */
|
|
3589
|
-
items.map((item, i) => /* @__PURE__ */
|
|
3590
|
-
/* @__PURE__ */
|
|
3591
|
-
editable ? /* @__PURE__ */
|
|
3592
|
-
/* @__PURE__ */
|
|
3593
|
-
/* @__PURE__ */
|
|
3594
|
-
/* @__PURE__ */
|
|
3509
|
+
return /* @__PURE__ */ jsxs2(Stack, { gap: 2, pad: "none", children: [
|
|
3510
|
+
items.map((item, i) => /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 2, pad: "none", children: [
|
|
3511
|
+
/* @__PURE__ */ jsx3(Text2, { role: "meta", children: typeof item === "string" ? item : JSON.stringify(item) }),
|
|
3512
|
+
editable ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
|
|
3513
|
+
/* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3("span", { "aria-hidden": true, children: "\u2191" }), label: "Move up", disabled: i === 0, onClick: () => move(i, i - 1) }),
|
|
3514
|
+
/* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3("span", { "aria-hidden": true, children: "\u2193" }), label: "Move down", disabled: i === items.length - 1, onClick: () => move(i, i + 1) }),
|
|
3515
|
+
/* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3(XIcon, {}), label: "Remove", onClick: () => write(items.filter((_, j) => j !== i)) })
|
|
3595
3516
|
] }) : null
|
|
3596
3517
|
] }, i)),
|
|
3597
|
-
editable ? /* @__PURE__ */
|
|
3518
|
+
editable ? /* @__PURE__ */ jsx3(TextButton, { onClick: () => write([...items, ""]), children: "+ Add" }) : null
|
|
3598
3519
|
] });
|
|
3599
3520
|
}
|
|
3600
3521
|
function InfoWidget({ field, controller }) {
|
|
3601
3522
|
const value = controller.getFieldValue(field.id);
|
|
3602
|
-
return /* @__PURE__ */
|
|
3523
|
+
return /* @__PURE__ */ jsx3(Text2, { role: "meta", children: value === void 0 || value === null ? "\u2014" : String(value) });
|
|
3603
3524
|
}
|
|
3604
3525
|
function JsonWidget({ field, controller }) {
|
|
3605
3526
|
const editable = isFieldEditable(field);
|
|
3606
3527
|
const handlers = useEditingHandlers(field, controller);
|
|
3607
|
-
return /* @__PURE__ */
|
|
3528
|
+
return /* @__PURE__ */ jsx3(
|
|
3608
3529
|
TextArea,
|
|
3609
3530
|
{
|
|
3610
3531
|
variant: "mono",
|
|
@@ -3621,21 +3542,21 @@ function JsonWidget({ field, controller }) {
|
|
|
3621
3542
|
}
|
|
3622
3543
|
|
|
3623
3544
|
// src/edit/inspector/react/InspectorPanelView.tsx
|
|
3624
|
-
import { Fragment as Fragment3, jsx as
|
|
3545
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
3625
3546
|
function InspectorPanelView({ controller }) {
|
|
3626
3547
|
const subscribe = useCallback3((cb) => controller.subscribe(cb), [controller]);
|
|
3627
3548
|
const getSnapshot = useCallback3(() => controller.getRevision(), [controller]);
|
|
3628
3549
|
useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
|
|
3629
3550
|
const view = inspectorViewState(controller);
|
|
3630
|
-
return /* @__PURE__ */
|
|
3631
|
-
view.searchShown ? /* @__PURE__ */
|
|
3632
|
-
/* @__PURE__ */
|
|
3633
|
-
view.hasTarget ? /* @__PURE__ */
|
|
3551
|
+
return /* @__PURE__ */ jsxs3(Column2, { className: "xeno-inspector-panel", children: [
|
|
3552
|
+
view.searchShown ? /* @__PURE__ */ jsxs3(Stack2, { direction: "row", gap: 6, children: [
|
|
3553
|
+
/* @__PURE__ */ jsx4(SearchField2, { value: view.filter, onChange: (v) => controller.setFilter(v), placeholder: "Search properties", label: "Search properties" }),
|
|
3554
|
+
view.hasTarget ? /* @__PURE__ */ jsx4(Badge2, { children: view.targetLabel }) : null
|
|
3634
3555
|
] }) : null,
|
|
3635
|
-
view.multi ? /* @__PURE__ */
|
|
3636
|
-
/* @__PURE__ */
|
|
3637
|
-
view.sections.map((section) => /* @__PURE__ */
|
|
3638
|
-
view.empty ? /* @__PURE__ */
|
|
3556
|
+
view.multi ? /* @__PURE__ */ jsx4(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx4(Text3, { role: "caption", children: view.banner }) }) : null,
|
|
3557
|
+
/* @__PURE__ */ jsx4(ScrollArea2, { children: /* @__PURE__ */ jsxs3(InspectorProperties, { controller, children: [
|
|
3558
|
+
view.sections.map((section) => /* @__PURE__ */ jsx4(SectionView, { section, controller }, section.id)),
|
|
3559
|
+
view.empty ? /* @__PURE__ */ jsx4(EmptyState2, { title: view.emptyTitle }) : null
|
|
3639
3560
|
] }) })
|
|
3640
3561
|
] });
|
|
3641
3562
|
}
|
|
@@ -3649,15 +3570,15 @@ function InspectorProperties({ controller, children }) {
|
|
|
3649
3570
|
},
|
|
3650
3571
|
[controller]
|
|
3651
3572
|
);
|
|
3652
|
-
return /* @__PURE__ */
|
|
3573
|
+
return /* @__PURE__ */ jsx4("div", { onKeyDown, tabIndex: 0, role: "group", "aria-label": "Properties", className: "xeno-inspector-properties", children });
|
|
3653
3574
|
}
|
|
3654
3575
|
function ActionGlyph({ glyph }) {
|
|
3655
|
-
return /* @__PURE__ */
|
|
3576
|
+
return /* @__PURE__ */ jsx4("span", { "aria-hidden": true, children: glyph });
|
|
3656
3577
|
}
|
|
3657
3578
|
function SectionView({ section, controller }) {
|
|
3658
3579
|
const ui5 = (intent) => applyInspectorUi(controller, intent);
|
|
3659
3580
|
const hasActions = section.actions.length > 0 || section.hasAddMenu;
|
|
3660
|
-
return /* @__PURE__ */
|
|
3581
|
+
return /* @__PURE__ */ jsxs3(
|
|
3661
3582
|
Section,
|
|
3662
3583
|
{
|
|
3663
3584
|
title: section.title,
|
|
@@ -3667,22 +3588,22 @@ function SectionView({ section, controller }) {
|
|
|
3667
3588
|
onCollapsedChange: () => ui5({ kind: "toggleSectionCollapsed", sectionId: section.id }),
|
|
3668
3589
|
enabled: section.enabled,
|
|
3669
3590
|
onEnabledChange: () => ui5({ kind: "toggleSectionEnabled", sectionId: section.id }),
|
|
3670
|
-
badge: section.badge ? /* @__PURE__ */
|
|
3671
|
-
actions: hasActions ? /* @__PURE__ */
|
|
3672
|
-
section.actions.map((action) => /* @__PURE__ */
|
|
3673
|
-
section.hasAddMenu ? /* @__PURE__ */
|
|
3591
|
+
badge: section.badge ? /* @__PURE__ */ jsx4(Badge2, { children: section.badge }) : null,
|
|
3592
|
+
actions: hasActions ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
|
|
3593
|
+
section.actions.map((action) => /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ActionGlyph, { glyph: action.glyph }), label: action.label, disabled: action.disabled, onClick: () => ui5({ kind: "runAction", sectionId: section.id, actionId: action.id }) }, action.id)),
|
|
3594
|
+
section.hasAddMenu ? /* @__PURE__ */ jsx4(Menu, { size: "sm", trigger: "\uFF0B", items: section.addItems, label: section.addLabel, align: "end", onSelect: (id) => ui5({ kind: "addItem", sectionId: section.id, itemId: id }) }) : null
|
|
3674
3595
|
] }) : null,
|
|
3675
3596
|
children: [
|
|
3676
|
-
section.showEmptyHint ? /* @__PURE__ */
|
|
3677
|
-
/* @__PURE__ */
|
|
3597
|
+
section.showEmptyHint ? /* @__PURE__ */ jsx4(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx4(Text3, { role: "caption", children: section.emptyHint }) }) : null,
|
|
3598
|
+
/* @__PURE__ */ jsx4(FieldGroup, { labelWidth: section.labelWidth, children: section.fields.map((row2) => /* @__PURE__ */ jsx4(FieldRow, { row: row2, controller }, row2.id)) })
|
|
3678
3599
|
]
|
|
3679
3600
|
}
|
|
3680
3601
|
);
|
|
3681
3602
|
}
|
|
3682
3603
|
function FieldRow({ row: row2, controller }) {
|
|
3683
3604
|
const ui5 = (intent) => applyInspectorUi(controller, intent);
|
|
3684
|
-
return /* @__PURE__ */
|
|
3685
|
-
/* @__PURE__ */
|
|
3605
|
+
return /* @__PURE__ */ jsxs3(Fragment3, { children: [
|
|
3606
|
+
/* @__PURE__ */ jsxs3(
|
|
3686
3607
|
Field,
|
|
3687
3608
|
{
|
|
3688
3609
|
label: row2.label,
|
|
@@ -3690,25 +3611,25 @@ function FieldRow({ row: row2, controller }) {
|
|
|
3690
3611
|
focused: row2.focused,
|
|
3691
3612
|
onLabelClick: () => ui5({ kind: "focusField", fieldId: row2.id }),
|
|
3692
3613
|
onContextMenu: (x, y) => ui5({ kind: "contextMenu", fieldId: row2.id, x, y }),
|
|
3693
|
-
leading: row2.showKeyframes ? /* @__PURE__ */
|
|
3694
|
-
/* @__PURE__ */
|
|
3695
|
-
row2.animated ? /* @__PURE__ */
|
|
3696
|
-
row2.animated ? /* @__PURE__ */
|
|
3697
|
-
row2.animated ? /* @__PURE__ */
|
|
3614
|
+
leading: row2.showKeyframes ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
|
|
3615
|
+
/* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(StopwatchIcon, {}), label: "Toggle animation", active: row2.animated, onClick: () => ui5({ kind: "keyframe", fieldId: row2.id, op: "toggleAnim" }) }),
|
|
3616
|
+
row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PrevIcon, {}), label: "Previous keyframe", disabled: row2.prevDisabled, onClick: () => ui5({ kind: "keyframe", fieldId: row2.id, op: "prev" }) }) : null,
|
|
3617
|
+
row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(DiamondIcon, { filled: row2.onKeyframe }), label: row2.keyframeLabel, onClick: () => ui5({ kind: "keyframe", fieldId: row2.id, op: row2.keyframeOp }) }) : null,
|
|
3618
|
+
row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(NextIcon, {}), label: "Next keyframe", disabled: row2.nextDisabled, onClick: () => ui5({ kind: "keyframe", fieldId: row2.id, op: "next" }) }) : null
|
|
3698
3619
|
] }) : null,
|
|
3699
|
-
trailing: /* @__PURE__ */
|
|
3700
|
-
row2.showEasing ? /* @__PURE__ */
|
|
3701
|
-
row2.showKeyframes ? /* @__PURE__ */
|
|
3702
|
-
row2.showToken ? /* @__PURE__ */
|
|
3703
|
-
row2.showReset ? /* @__PURE__ */
|
|
3620
|
+
trailing: /* @__PURE__ */ jsxs3(Fragment3, { children: [
|
|
3621
|
+
row2.showEasing ? /* @__PURE__ */ jsx4(Select2, { size: "sm", options: row2.easingOptions, value: row2.easing, label: "Easing", onChange: (v) => ui5({ kind: "setEasing", fieldId: row2.id, easing: v }) }) : null,
|
|
3622
|
+
row2.showKeyframes ? /* @__PURE__ */ jsx4(Badge2, { size: "sm", children: row2.keyframeChip }) : null,
|
|
3623
|
+
row2.showToken ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(LinkIcon, {}), label: row2.tokenActionLabel, active: row2.bound, onClick: () => ui5({ kind: "bindToken", fieldId: row2.id }) }) : null,
|
|
3624
|
+
row2.showReset ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ResetIcon, {}), label: "Reset to default", onClick: () => ui5({ kind: "resetField", fieldId: row2.id }) }) : null
|
|
3704
3625
|
] }),
|
|
3705
3626
|
children: [
|
|
3706
|
-
row2.bound ? /* @__PURE__ */
|
|
3707
|
-
row2.unbound ? /* @__PURE__ */
|
|
3627
|
+
row2.bound ? /* @__PURE__ */ jsx4(Badge2, { title: row2.tokenTitle, children: row2.tokenLabel }) : null,
|
|
3628
|
+
row2.unbound ? /* @__PURE__ */ jsx4(FieldWidget, { field: row2.field, controller }) : null
|
|
3708
3629
|
]
|
|
3709
3630
|
}
|
|
3710
3631
|
),
|
|
3711
|
-
row2.showInfoNote ? /* @__PURE__ */
|
|
3632
|
+
row2.showInfoNote ? /* @__PURE__ */ jsx4(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx4(Text3, { role: "caption", children: row2.infoNote }) }) : null
|
|
3712
3633
|
] });
|
|
3713
3634
|
}
|
|
3714
3635
|
function FieldWidget({
|
|
@@ -3717,50 +3638,44 @@ function FieldWidget({
|
|
|
3717
3638
|
}) {
|
|
3718
3639
|
switch (field.type) {
|
|
3719
3640
|
case "number":
|
|
3720
|
-
return /* @__PURE__ */
|
|
3641
|
+
return /* @__PURE__ */ jsx4(NumberWidget, { field, controller });
|
|
3721
3642
|
case "vector":
|
|
3722
|
-
return /* @__PURE__ */
|
|
3643
|
+
return /* @__PURE__ */ jsx4(VectorWidget, { field, controller });
|
|
3723
3644
|
case "boolean":
|
|
3724
|
-
return /* @__PURE__ */
|
|
3645
|
+
return /* @__PURE__ */ jsx4(BooleanWidget, { field, controller });
|
|
3725
3646
|
case "select":
|
|
3726
|
-
return /* @__PURE__ */
|
|
3647
|
+
return /* @__PURE__ */ jsx4(SelectWidget, { field, controller });
|
|
3727
3648
|
case "segmented":
|
|
3728
|
-
return /* @__PURE__ */
|
|
3649
|
+
return /* @__PURE__ */ jsx4(SegmentedWidget, { field, controller });
|
|
3729
3650
|
case "color":
|
|
3730
|
-
return /* @__PURE__ */
|
|
3651
|
+
return /* @__PURE__ */ jsx4(ColorWidget, { field, controller });
|
|
3731
3652
|
case "list":
|
|
3732
|
-
return /* @__PURE__ */
|
|
3653
|
+
return /* @__PURE__ */ jsx4(ListWidget, { field, controller });
|
|
3733
3654
|
case "info":
|
|
3734
|
-
return /* @__PURE__ */
|
|
3655
|
+
return /* @__PURE__ */ jsx4(InfoWidget, { field, controller });
|
|
3735
3656
|
case "text":
|
|
3736
3657
|
case "textarea":
|
|
3737
3658
|
case "file":
|
|
3738
|
-
return /* @__PURE__ */
|
|
3659
|
+
return /* @__PURE__ */ jsx4(TextWidget, { field, controller });
|
|
3739
3660
|
case "code":
|
|
3740
3661
|
case "expression":
|
|
3741
|
-
return /* @__PURE__ */
|
|
3662
|
+
return /* @__PURE__ */ jsx4(CodeWidget, { field, controller });
|
|
3742
3663
|
case "custom": {
|
|
3743
3664
|
const Renderer = controller.getRenderer(field);
|
|
3744
|
-
if (!Renderer) return /* @__PURE__ */
|
|
3745
|
-
return /* @__PURE__ */
|
|
3665
|
+
if (!Renderer) return /* @__PURE__ */ jsx4(JsonWidget, { field, controller });
|
|
3666
|
+
return /* @__PURE__ */ jsx4(Renderer, { field, controller });
|
|
3746
3667
|
}
|
|
3747
3668
|
case "json":
|
|
3748
3669
|
default:
|
|
3749
|
-
return /* @__PURE__ */
|
|
3670
|
+
return /* @__PURE__ */ jsx4(JsonWidget, { field, controller });
|
|
3750
3671
|
}
|
|
3751
3672
|
}
|
|
3752
|
-
var INSPECTOR_RUNTIME_UNITS = ["inspector/FieldWidget", "inspector/Properties", "inspector/ActionGlyph"
|
|
3673
|
+
var INSPECTOR_RUNTIME_UNITS = ["inspector/FieldWidget", "inspector/Properties", "inspector/ActionGlyph"];
|
|
3753
3674
|
function inspectorRuntimeComponents(controller) {
|
|
3754
3675
|
return {
|
|
3755
|
-
"inspector/FieldWidget": ({ field }) => /* @__PURE__ */
|
|
3756
|
-
"inspector/Properties": ({ children }) => /* @__PURE__ */
|
|
3757
|
-
"inspector/ActionGlyph": ActionGlyph
|
|
3758
|
-
"inspector/StopwatchIcon": StopwatchIcon,
|
|
3759
|
-
"inspector/DiamondIcon": DiamondIcon,
|
|
3760
|
-
"inspector/PrevIcon": PrevIcon,
|
|
3761
|
-
"inspector/NextIcon": NextIcon,
|
|
3762
|
-
"inspector/LinkIcon": LinkIcon,
|
|
3763
|
-
"inspector/ResetIcon": ResetIcon
|
|
3676
|
+
"inspector/FieldWidget": ({ field }) => /* @__PURE__ */ jsx4(FieldWidget, { field, controller }),
|
|
3677
|
+
"inspector/Properties": ({ children }) => /* @__PURE__ */ jsx4(InspectorProperties, { controller, children }),
|
|
3678
|
+
"inspector/ActionGlyph": ActionGlyph
|
|
3764
3679
|
};
|
|
3765
3680
|
}
|
|
3766
3681
|
|
|
@@ -4854,8 +4769,8 @@ var HISTORY_DECLARATION = {
|
|
|
4854
4769
|
node: {
|
|
4855
4770
|
component: "fragment",
|
|
4856
4771
|
children: [
|
|
4857
|
-
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "
|
|
4858
|
-
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "
|
|
4772
|
+
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "icons/Undo" } }, label: { value: "Undo" }, disabled: { input: "view.cannotUndo" } }, on: { onClick: ui3("undo") } },
|
|
4773
|
+
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "icons/Redo" } }, label: { value: "Redo" }, disabled: { input: "view.cannotRedo" } }, on: { onClick: ui3("redo") } }
|
|
4859
4774
|
]
|
|
4860
4775
|
}
|
|
4861
4776
|
},
|
|
@@ -4864,7 +4779,7 @@ var HISTORY_DECLARATION = {
|
|
|
4864
4779
|
component: "fragment",
|
|
4865
4780
|
children: [
|
|
4866
4781
|
{ component: "chrome/Text", props: { role: { value: "number" } }, children: [text3({ input: "view.counter" })] },
|
|
4867
|
-
{ component: "chrome/IconButton", when: { input: "view.clearAllowed" }, props: { size: { value: "sm" }, icon: { node: { component: "
|
|
4782
|
+
{ component: "chrome/IconButton", when: { input: "view.clearAllowed" }, props: { size: { value: "sm" }, icon: { node: { component: "icons/Trash" } }, label: { value: "Clear history" } }, on: { onClick: ui3("requestClear") } }
|
|
4868
4783
|
]
|
|
4869
4784
|
}
|
|
4870
4785
|
}
|
|
@@ -4901,7 +4816,7 @@ var HISTORY_DECLARATION = {
|
|
|
4901
4816
|
struck: { item: "future" },
|
|
4902
4817
|
noIcon: { item: "hideIcon" },
|
|
4903
4818
|
interactive: { item: "jumpable" },
|
|
4904
|
-
icon: { node: { component: "
|
|
4819
|
+
icon: { node: { component: "icons/HistoryEntry", props: { name: { item: "iconName" } } } },
|
|
4905
4820
|
label: { item: "label" },
|
|
4906
4821
|
meta: { item: "meta" },
|
|
4907
4822
|
"data-history-row": { item: "key" },
|
|
@@ -4910,7 +4825,7 @@ var HISTORY_DECLARATION = {
|
|
|
4910
4825
|
node: {
|
|
4911
4826
|
component: "fragment",
|
|
4912
4827
|
children: [
|
|
4913
|
-
{ component: "
|
|
4828
|
+
{ component: "icons/Pending", when: { item: "pending" } },
|
|
4914
4829
|
{ component: "chrome/Badge", when: { item: "failed" }, props: { size: { value: "sm" }, tone: { value: "error" } }, children: [text3({ value: "failed" })] },
|
|
4915
4830
|
{ component: "chrome/Badge", when: { item: "showSource" }, props: { size: { value: "sm" }, title: { item: "sourceTitle" } }, children: [text3({ item: "sourceGlyph" })] },
|
|
4916
4831
|
{ component: "chrome/Badge", when: { item: "showCoalesced" }, props: { size: { value: "sm" }, title: { item: "coalescedTitle" } }, children: [text3({ item: "coalescedText" })] },
|
|
@@ -4947,130 +4862,35 @@ var HISTORY_DECLARATION = {
|
|
|
4947
4862
|
|
|
4948
4863
|
// src/edit/history/react/HistoryPanelView.tsx
|
|
4949
4864
|
import { Badge as Badge3, Column as Column3, EmptyState as EmptyState3, IconButton as IconButton4, InlineConfirm, RowList as RowList2, Row as Row2, ScrollArea as ScrollArea3, SearchField as SearchField3, StatusBar as StatusBar2, Text as Text4, Toolbar as Toolbar2, VirtualWindow as VirtualWindow2 } from "@xenosystem/components/chrome";
|
|
4950
|
-
|
|
4951
|
-
// src/edit/history/react/icons.tsx
|
|
4952
|
-
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
4953
|
-
var svgBase = (size) => ({
|
|
4954
|
-
width: size,
|
|
4955
|
-
height: size,
|
|
4956
|
-
viewBox: "0 0 24 24",
|
|
4957
|
-
fill: "none",
|
|
4958
|
-
stroke: "currentColor",
|
|
4959
|
-
strokeWidth: 1.5,
|
|
4960
|
-
strokeLinecap: "round",
|
|
4961
|
-
strokeLinejoin: "round",
|
|
4962
|
-
"aria-hidden": true
|
|
4963
|
-
});
|
|
4964
|
-
var ENTRY_PATHS = {
|
|
4965
|
-
// painting
|
|
4966
|
-
brush: ["M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08", "M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"],
|
|
4967
|
-
eraser: ["m7 21-4.3-4.3a1 1 0 0 1 0-1.4l10-10a1 1 0 0 1 1.4 0l5.6 5.6a1 1 0 0 1 0 1.4L13 21", "M22 21H7"],
|
|
4968
|
-
fill: ["m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2a2 2 0 0 0 2.8 0L19 11Z", "m5 2 5 5", "M2 13h15"],
|
|
4969
|
-
// adjustment / effects
|
|
4970
|
-
filter: ["M4 6h16", "M7 12h10", "M10 18h4"],
|
|
4971
|
-
// geometry
|
|
4972
|
-
transform: ["M5 9 2 12l3 3", "M9 5l3-3 3 3", "M15 19l-3 3-3-3", "M19 9l3 3-3 3", "M2 12h20", "M12 2v20"],
|
|
4973
|
-
crop: ["M6 2v14a2 2 0 0 0 2 2h14", "M18 22V8a2 2 0 0 0-2-2H2"],
|
|
4974
|
-
// layers
|
|
4975
|
-
addLayer: ["M3 3h18v18H3z", "M12 8v8", "M8 12h8"],
|
|
4976
|
-
deleteLayer: ["M3 6h18", "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"],
|
|
4977
|
-
merge: ["m12 2 4 4-4 4", "M4 6h12", "m12 14 4 4-4 4", "M4 18h12"],
|
|
4978
|
-
// clipboard / text / selection
|
|
4979
|
-
paste: ["M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2", "M9 2h6v4H9z"],
|
|
4980
|
-
text: ["M4 7V4h16v3", "M9 20h6", "M12 4v16"],
|
|
4981
|
-
selection: ["M4 8V6a2 2 0 0 1 2-2h2", "M16 4h2a2 2 0 0 1 2 2v2", "M20 16v2a2 2 0 0 1-2 2h-2", "M8 20H6a2 2 0 0 1-2-2v-2"],
|
|
4982
|
-
// ai + snapshots
|
|
4983
|
-
ai: ["m12 3 1.9 5.8L20 10l-5.2 2.9L13 19l-2.9-5.2L4 12l6.1-1.9z"],
|
|
4984
|
-
snapshot: ["M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3Z", "M15 13a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"],
|
|
4985
|
-
// timeline / audio
|
|
4986
|
-
keyframe: ["m12 3 6 9-6 9-6-9z"],
|
|
4987
|
-
clip: ["M3 5h18v14H3z", "M8 5v14", "M16 5v14"],
|
|
4988
|
-
volume: ["M11 5 6 9H2v6h4l5 4V5Z", "M16 9a4 4 0 0 1 0 6"],
|
|
4989
|
-
document: ["M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", "M14 2v5h6"],
|
|
4990
|
-
// fallbacks / chrome
|
|
4991
|
-
generic: ["M5 5h14v14H5z"],
|
|
4992
|
-
original: ["M3 12a9 9 0 1 0 9-9", "M3 4v5h5"],
|
|
4993
|
-
rotateCcw: ["M3 12a9 9 0 1 0 3-6.7L3 8", "M3 3v5h5"]
|
|
4994
|
-
};
|
|
4995
|
-
function EntryIcon({ name, size = 11 }) {
|
|
4996
|
-
const paths = ENTRY_PATHS[name] ?? ENTRY_PATHS.generic;
|
|
4997
|
-
return /* @__PURE__ */ jsx7("svg", { ...svgBase(size), children: paths.map((d, i) => /* @__PURE__ */ jsx7("path", { d }, i)) });
|
|
4998
|
-
}
|
|
4999
|
-
function XIcon2({ size = 10 }) {
|
|
5000
|
-
return /* @__PURE__ */ jsxs6("svg", { ...svgBase(size), children: [
|
|
5001
|
-
/* @__PURE__ */ jsx7("path", { d: "M18 6 6 18" }),
|
|
5002
|
-
/* @__PURE__ */ jsx7("path", { d: "m6 6 12 12" })
|
|
5003
|
-
] });
|
|
5004
|
-
}
|
|
5005
|
-
function TrashIcon({ size = 11 }) {
|
|
5006
|
-
return /* @__PURE__ */ jsxs6("svg", { ...svgBase(size), children: [
|
|
5007
|
-
/* @__PURE__ */ jsx7("path", { d: "M3 6h18" }),
|
|
5008
|
-
/* @__PURE__ */ jsx7("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
|
|
5009
|
-
/* @__PURE__ */ jsx7("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
|
|
5010
|
-
] });
|
|
5011
|
-
}
|
|
5012
|
-
function UndoIcon({ size = 11 }) {
|
|
5013
|
-
return /* @__PURE__ */ jsxs6("svg", { ...svgBase(size), children: [
|
|
5014
|
-
/* @__PURE__ */ jsx7("path", { d: "M9 14 4 9l5-5" }),
|
|
5015
|
-
/* @__PURE__ */ jsx7("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
|
|
5016
|
-
] });
|
|
5017
|
-
}
|
|
5018
|
-
function RedoIcon({ size = 11 }) {
|
|
5019
|
-
return /* @__PURE__ */ jsxs6("svg", { ...svgBase(size), children: [
|
|
5020
|
-
/* @__PURE__ */ jsx7("path", { d: "m15 14 5-5-5-5" }),
|
|
5021
|
-
/* @__PURE__ */ jsx7("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
|
|
5022
|
-
] });
|
|
5023
|
-
}
|
|
5024
|
-
function PendingGlyph({ size = 9 }) {
|
|
5025
|
-
return /* @__PURE__ */ jsx7(
|
|
5026
|
-
"span",
|
|
5027
|
-
{
|
|
5028
|
-
className: "xeno-history-spinner",
|
|
5029
|
-
"aria-label": "Pending",
|
|
5030
|
-
style: {
|
|
5031
|
-
width: size,
|
|
5032
|
-
height: size,
|
|
5033
|
-
borderRadius: 2,
|
|
5034
|
-
border: "1px solid currentColor",
|
|
5035
|
-
borderRightColor: "transparent",
|
|
5036
|
-
opacity: 0.8,
|
|
5037
|
-
display: "inline-block",
|
|
5038
|
-
flex: "0 0 auto"
|
|
5039
|
-
}
|
|
5040
|
-
}
|
|
5041
|
-
);
|
|
5042
|
-
}
|
|
5043
|
-
|
|
5044
|
-
// src/edit/history/react/HistoryPanelView.tsx
|
|
5045
|
-
import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4865
|
+
import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
5046
4866
|
function HistoryPanelView({ controller }) {
|
|
5047
4867
|
const subscribe = useCallback4((cb) => controller.subscribe(cb), [controller]);
|
|
5048
4868
|
const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
|
|
5049
4869
|
useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
|
|
5050
4870
|
const view = historyViewState(controller);
|
|
5051
4871
|
const ui5 = (intent) => applyHistoryUi(controller, intent);
|
|
5052
|
-
return /* @__PURE__ */
|
|
5053
|
-
/* @__PURE__ */
|
|
4872
|
+
return /* @__PURE__ */ jsxs4(Column3, { className: "xeno-history-panel", children: [
|
|
4873
|
+
/* @__PURE__ */ jsx5(
|
|
5054
4874
|
Toolbar2,
|
|
5055
4875
|
{
|
|
5056
|
-
left: /* @__PURE__ */
|
|
5057
|
-
/* @__PURE__ */
|
|
5058
|
-
/* @__PURE__ */
|
|
4876
|
+
left: /* @__PURE__ */ jsxs4(Fragment4, { children: [
|
|
4877
|
+
/* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(UndoIcon, {}), label: "Undo", disabled: view.cannotUndo, onClick: () => ui5({ kind: "undo" }) }),
|
|
4878
|
+
/* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(RedoIcon, {}), label: "Redo", disabled: view.cannotRedo, onClick: () => ui5({ kind: "redo" }) })
|
|
5059
4879
|
] }),
|
|
5060
|
-
right: /* @__PURE__ */
|
|
5061
|
-
/* @__PURE__ */
|
|
5062
|
-
view.clearAllowed ? /* @__PURE__ */
|
|
4880
|
+
right: /* @__PURE__ */ jsxs4(Fragment4, { children: [
|
|
4881
|
+
/* @__PURE__ */ jsx5(Text4, { role: "number", children: view.counter }),
|
|
4882
|
+
view.clearAllowed ? /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(TrashIcon, {}), label: "Clear history", onClick: () => ui5({ kind: "requestClear" }) }) : null
|
|
5063
4883
|
] }),
|
|
5064
|
-
children: view.searchShown ? /* @__PURE__ */
|
|
4884
|
+
children: view.searchShown ? /* @__PURE__ */ jsx5(SearchField3, { value: view.filter, onChange: (v) => ui5({ kind: "filter", value: v }), placeholder: "Search history", label: "Search history" }) : null
|
|
5065
4885
|
}
|
|
5066
4886
|
),
|
|
5067
|
-
view.confirmingClear ? /* @__PURE__ */
|
|
5068
|
-
view.pruned ? /* @__PURE__ */
|
|
5069
|
-
/* @__PURE__ */
|
|
5070
|
-
/* @__PURE__ */
|
|
5071
|
-
view.empty ? /* @__PURE__ */
|
|
4887
|
+
view.confirmingClear ? /* @__PURE__ */ jsx5(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => ui5({ kind: "confirmClear" }), onCancel: () => ui5({ kind: "cancelClear" }) }) : null,
|
|
4888
|
+
view.pruned ? /* @__PURE__ */ jsx5(Text4, { role: "caption", children: "Earlier history discarded (limit reached)" }) : null,
|
|
4889
|
+
/* @__PURE__ */ jsxs4(HistoryScroller, { controller, children: [
|
|
4890
|
+
/* @__PURE__ */ jsx5(RowList2, { role: "listbox", "aria-label": "History", children: /* @__PURE__ */ jsx5(VirtualWindow2, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((row2) => /* @__PURE__ */ jsx5(HistoryRowView, { row: row2, controller }, row2.key)) }) }),
|
|
4891
|
+
view.empty ? /* @__PURE__ */ jsx5(EmptyState3, { title: "No history" }) : null
|
|
5072
4892
|
] }),
|
|
5073
|
-
view.hasMemory ? /* @__PURE__ */
|
|
4893
|
+
view.hasMemory ? /* @__PURE__ */ jsx5(StatusBar2, { left: /* @__PURE__ */ jsx5(Text4, { role: "number", children: view.memoryText }), right: view.memoryDisk ? /* @__PURE__ */ jsx5(Text4, { role: "meta", children: view.memoryDisk }) : null }) : null
|
|
5074
4894
|
] });
|
|
5075
4895
|
}
|
|
5076
4896
|
function HistoryScroller({ controller, children }) {
|
|
@@ -5105,14 +4925,14 @@ function HistoryScroller({ controller, children }) {
|
|
|
5105
4925
|
},
|
|
5106
4926
|
[controller]
|
|
5107
4927
|
);
|
|
5108
|
-
return /* @__PURE__ */
|
|
4928
|
+
return /* @__PURE__ */ jsx5(ScrollArea3, { ref: scrollRef, onScroll, onKeyDown, onMouseLeave: () => controller.setHovered(null), tabIndex: 0, children });
|
|
5109
4929
|
}
|
|
5110
4930
|
function HistoryCancelButton({ entryId, controller }) {
|
|
5111
|
-
return /* @__PURE__ */
|
|
4931
|
+
return /* @__PURE__ */ jsx5(
|
|
5112
4932
|
IconButton4,
|
|
5113
4933
|
{
|
|
5114
4934
|
size: "sm",
|
|
5115
|
-
icon: /* @__PURE__ */
|
|
4935
|
+
icon: /* @__PURE__ */ jsx5(XIcon2, {}),
|
|
5116
4936
|
label: "Cancel operation",
|
|
5117
4937
|
onClick: (e) => {
|
|
5118
4938
|
e.stopPropagation();
|
|
@@ -5123,7 +4943,7 @@ function HistoryCancelButton({ entryId, controller }) {
|
|
|
5123
4943
|
}
|
|
5124
4944
|
function HistoryRowView({ row: row2, controller }) {
|
|
5125
4945
|
const ui5 = (intent) => applyHistoryUi(controller, intent);
|
|
5126
|
-
return /* @__PURE__ */
|
|
4946
|
+
return /* @__PURE__ */ jsx5(
|
|
5127
4947
|
Row2,
|
|
5128
4948
|
{
|
|
5129
4949
|
height: row2.height,
|
|
@@ -5132,18 +4952,18 @@ function HistoryRowView({ row: row2, controller }) {
|
|
|
5132
4952
|
struck: row2.future,
|
|
5133
4953
|
noIcon: row2.hideIcon,
|
|
5134
4954
|
interactive: row2.jumpable,
|
|
5135
|
-
icon: /* @__PURE__ */
|
|
4955
|
+
icon: /* @__PURE__ */ jsx5(EntryIcon, { name: row2.iconName }),
|
|
5136
4956
|
label: row2.label,
|
|
5137
4957
|
meta: row2.meta,
|
|
5138
4958
|
"data-history-row": row2.key,
|
|
5139
4959
|
title: row2.label,
|
|
5140
|
-
trailing: /* @__PURE__ */
|
|
5141
|
-
row2.pending ? /* @__PURE__ */
|
|
5142
|
-
row2.failed ? /* @__PURE__ */
|
|
5143
|
-
row2.showSource ? /* @__PURE__ */
|
|
5144
|
-
row2.showCoalesced ? /* @__PURE__ */
|
|
5145
|
-
row2.showTime ? /* @__PURE__ */
|
|
5146
|
-
row2.pending ? /* @__PURE__ */
|
|
4960
|
+
trailing: /* @__PURE__ */ jsxs4(Fragment4, { children: [
|
|
4961
|
+
row2.pending ? /* @__PURE__ */ jsx5(PendingGlyph, {}) : null,
|
|
4962
|
+
row2.failed ? /* @__PURE__ */ jsx5(Badge3, { size: "sm", tone: "error", children: "failed" }) : null,
|
|
4963
|
+
row2.showSource ? /* @__PURE__ */ jsx5(Badge3, { size: "sm", title: row2.sourceTitle, children: row2.sourceGlyph }) : null,
|
|
4964
|
+
row2.showCoalesced ? /* @__PURE__ */ jsx5(Badge3, { size: "sm", title: row2.coalescedTitle, children: row2.coalescedText }) : null,
|
|
4965
|
+
row2.showTime ? /* @__PURE__ */ jsx5(Text4, { role: "meta", children: row2.time }) : null,
|
|
4966
|
+
row2.pending ? /* @__PURE__ */ jsx5(HistoryCancelButton, { entryId: row2.cancelId, controller }) : null
|
|
5147
4967
|
] }),
|
|
5148
4968
|
onClick: () => ui5({ kind: "jump", entryId: row2.entryId }),
|
|
5149
4969
|
onMouseEnter: () => ui5({ kind: "hover", entryId: row2.entryId }),
|
|
@@ -5151,16 +4971,11 @@ function HistoryRowView({ row: row2, controller }) {
|
|
|
5151
4971
|
}
|
|
5152
4972
|
);
|
|
5153
4973
|
}
|
|
5154
|
-
var HISTORY_RUNTIME_UNITS = ["history/Scroller", "history/CancelButton"
|
|
4974
|
+
var HISTORY_RUNTIME_UNITS = ["history/Scroller", "history/CancelButton"];
|
|
5155
4975
|
function historyRuntimeComponents(controller) {
|
|
5156
4976
|
return {
|
|
5157
|
-
"history/Scroller": ({ children }) => /* @__PURE__ */
|
|
5158
|
-
"history/CancelButton": ({ entryId }) => /* @__PURE__ */
|
|
5159
|
-
"history/EntryIcon": EntryIcon,
|
|
5160
|
-
"history/PendingGlyph": PendingGlyph,
|
|
5161
|
-
"history/UndoIcon": UndoIcon,
|
|
5162
|
-
"history/RedoIcon": RedoIcon,
|
|
5163
|
-
"history/TrashIcon": TrashIcon
|
|
4977
|
+
"history/Scroller": ({ children }) => /* @__PURE__ */ jsx5(HistoryScroller, { controller, children }),
|
|
4978
|
+
"history/CancelButton": ({ entryId }) => /* @__PURE__ */ jsx5(HistoryCancelButton, { entryId, controller })
|
|
5164
4979
|
};
|
|
5165
4980
|
}
|
|
5166
4981
|
|
|
@@ -5299,10 +5114,10 @@ function rgbToHex(r, g, b) {
|
|
|
5299
5114
|
return `#${enc(r)}${enc(g)}${enc(b)}`;
|
|
5300
5115
|
}
|
|
5301
5116
|
function rgbaToCssHex(c) {
|
|
5302
|
-
const
|
|
5303
|
-
if (finite(c.a, 1) >= 1) return
|
|
5117
|
+
const base = rgbToHex(c.r, c.g, c.b);
|
|
5118
|
+
if (finite(c.a, 1) >= 1) return base;
|
|
5304
5119
|
const a = clamp2(Math.round(clamp2(finite(c.a, 1), 0, 1) * 255), 0, 255).toString(16).padStart(2, "0");
|
|
5305
|
-
return `${
|
|
5120
|
+
return `${base}${a}`;
|
|
5306
5121
|
}
|
|
5307
5122
|
function rgbToHsv(r, g, b) {
|
|
5308
5123
|
const rn = clamp2(finite(r), 0, 255) / 255;
|
|
@@ -6301,7 +6116,7 @@ var COLOR_DECLARATION = {
|
|
|
6301
6116
|
row(
|
|
6302
6117
|
[
|
|
6303
6118
|
{ component: "chrome/ColorChip", props: { color: { input: "view.hex" }, label: { value: "Foreground" }, pressed: { input: "view.fgActive" } }, on: { onClick: ui4("setChannel", { channel: { value: "fg" } }) } },
|
|
6304
|
-
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "
|
|
6119
|
+
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "icons/Swap" } }, label: { value: "Swap FG/BG (X)" } }, on: { onClick: ui4("swapChannels") } },
|
|
6305
6120
|
{ component: "chrome/ColorChip", props: { color: { value: null }, label: { value: "Background" }, pressed: { input: "view.bgActive" } }, on: { onClick: ui4("setChannel", { channel: { value: "bg" } }) } }
|
|
6306
6121
|
],
|
|
6307
6122
|
{},
|
|
@@ -6314,7 +6129,7 @@ var COLOR_DECLARATION = {
|
|
|
6314
6129
|
{ component: "chrome/Input", when: { input: "view.isHex" }, props: { variant: { value: "mono" }, label: { value: "Hex" }, value: { input: "view.hex" }, disabled: { input: "view.bound" } }, on: { onChange: ui4("setHex", { value: { arg: "" } }) } },
|
|
6315
6130
|
{ component: "chrome/NumberInput", each: { input: "view.components", key: "key" }, props: { caption: { item: "label" }, value: { item: "value" }, disabled: { input: "view.bound" } }, on: { onChange: ui4("setComponent", { index: { item: "index" }, value: { arg: "" } }) } },
|
|
6316
6131
|
{ component: "chrome/NumberInput", when: { input: "view.alphaShown" }, props: { caption: { value: "A" }, label: { value: "Alpha" }, min: { value: 0 }, max: { value: 100 }, value: { input: "view.alphaPercent" }, disabled: { input: "view.bound" } }, on: { onChange: ui4("setAlpha", { percent: { arg: "" } }) } },
|
|
6317
|
-
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "
|
|
6132
|
+
{ component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "icons/Eyedropper" } }, label: { value: "Pick from screen" } }, on: { onClick: ui4("eyedropper") } }
|
|
6318
6133
|
],
|
|
6319
6134
|
{ gap: { value: 4 } }
|
|
6320
6135
|
),
|
|
@@ -6432,54 +6247,33 @@ function drawAlphaStrip(ctx, w, h, hsv) {
|
|
|
6432
6247
|
|
|
6433
6248
|
// src/edit/color/react/ColorPanelView.tsx
|
|
6434
6249
|
import { CanvasSurface, ColorChip, Column as Column4, Field as Field2, IconButton as IconButton5, Input as Input3, NumberInput, Section as Section2, Select as Select3, Stack as Stack3, SwatchGrid, TextButton as TextButton2 } from "@xenosystem/components/chrome";
|
|
6435
|
-
|
|
6436
|
-
// src/edit/color/react/icons.tsx
|
|
6437
|
-
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
6438
|
-
var svg = { width: 11, height: 11, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
|
|
6439
|
-
function EyedropperIcon() {
|
|
6440
|
-
return /* @__PURE__ */ jsxs8("svg", { ...svg, children: [
|
|
6441
|
-
/* @__PURE__ */ jsx9("path", { d: "m2 22 1-1h3l9-9" }),
|
|
6442
|
-
/* @__PURE__ */ jsx9("path", { d: "M3 21v-3l9-9" }),
|
|
6443
|
-
/* @__PURE__ */ jsx9("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
|
|
6444
|
-
] });
|
|
6445
|
-
}
|
|
6446
|
-
function SwapIcon() {
|
|
6447
|
-
return /* @__PURE__ */ jsxs8("svg", { ...svg, children: [
|
|
6448
|
-
/* @__PURE__ */ jsx9("path", { d: "m16 3 4 4-4 4" }),
|
|
6449
|
-
/* @__PURE__ */ jsx9("path", { d: "M20 7H4" }),
|
|
6450
|
-
/* @__PURE__ */ jsx9("path", { d: "m8 21-4-4 4-4" }),
|
|
6451
|
-
/* @__PURE__ */ jsx9("path", { d: "M4 17h16" })
|
|
6452
|
-
] });
|
|
6453
|
-
}
|
|
6454
|
-
|
|
6455
|
-
// src/edit/color/react/ColorPanelView.tsx
|
|
6456
|
-
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
6250
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
6457
6251
|
function ColorPanelView({ controller }) {
|
|
6458
6252
|
const subscribe = useCallback5((cb) => controller.subscribe(cb), [controller]);
|
|
6459
6253
|
const getSnapshot = useCallback5(() => controller.getRevision(), [controller]);
|
|
6460
6254
|
useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
|
|
6461
6255
|
const view = colorViewState(controller);
|
|
6462
6256
|
const ui5 = (intent) => applyColorUi(controller, intent);
|
|
6463
|
-
return /* @__PURE__ */
|
|
6464
|
-
view.fgBg ? /* @__PURE__ */
|
|
6465
|
-
/* @__PURE__ */
|
|
6466
|
-
/* @__PURE__ */
|
|
6467
|
-
/* @__PURE__ */
|
|
6257
|
+
return /* @__PURE__ */ jsx6(Column4, { className: "xeno-color-panel", children: /* @__PURE__ */ jsxs5(Stack3, { gap: 8, children: [
|
|
6258
|
+
view.fgBg ? /* @__PURE__ */ jsxs5(Stack3, { direction: "row", pad: "none", children: [
|
|
6259
|
+
/* @__PURE__ */ jsx6(ColorChip, { color: view.hex, label: "Foreground", pressed: view.fgActive, onClick: () => ui5({ kind: "setChannel", channel: "fg" }) }),
|
|
6260
|
+
/* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui5({ kind: "swapChannels" }) }),
|
|
6261
|
+
/* @__PURE__ */ jsx6(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui5({ kind: "setChannel", channel: "bg" }) })
|
|
6468
6262
|
] }) : null,
|
|
6469
|
-
/* @__PURE__ */
|
|
6470
|
-
/* @__PURE__ */
|
|
6471
|
-
/* @__PURE__ */
|
|
6472
|
-
view.isHex ? /* @__PURE__ */
|
|
6473
|
-
view.components.map((comp) => /* @__PURE__ */
|
|
6474
|
-
view.alphaShown ? /* @__PURE__ */
|
|
6475
|
-
/* @__PURE__ */
|
|
6263
|
+
/* @__PURE__ */ jsx6(ColorPicker, { controller }),
|
|
6264
|
+
/* @__PURE__ */ jsxs5(Stack3, { direction: "row", pad: "none", gap: 4, children: [
|
|
6265
|
+
/* @__PURE__ */ jsx6(Select3, { size: "sm", label: "Color model", value: view.space, options: view.spaceOptions, onChange: (v) => ui5({ kind: "setSpace", space: v }) }),
|
|
6266
|
+
view.isHex ? /* @__PURE__ */ jsx6(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui5({ kind: "setHex", value: v }), disabled: view.bound }) : null,
|
|
6267
|
+
view.components.map((comp) => /* @__PURE__ */ jsx6(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui5({ kind: "setComponent", index: comp.index, value: n }), disabled: view.bound }, comp.key)),
|
|
6268
|
+
view.alphaShown ? /* @__PURE__ */ jsx6(NumberInput, { caption: "A", label: "Alpha", min: 0, max: 100, value: view.alphaPercent, onChange: (n) => ui5({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
|
|
6269
|
+
/* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui5({ kind: "eyedropper" }) })
|
|
6476
6270
|
] }),
|
|
6477
|
-
view.hasTokens ? /* @__PURE__ */
|
|
6478
|
-
/* @__PURE__ */
|
|
6479
|
-
view.bound ? /* @__PURE__ */
|
|
6271
|
+
view.hasTokens ? /* @__PURE__ */ jsx6(Field2, { label: "Token", htmlFor: "xeno-color-token", children: /* @__PURE__ */ jsxs5(Stack3, { direction: "row", pad: "none", gap: 4, children: [
|
|
6272
|
+
/* @__PURE__ */ jsx6(Select3, { size: "sm", label: "Bind token", value: view.boundTokenId, placeholder: "\u2014 raw \u2014", options: view.tokenOptions, onChange: (id) => ui5({ kind: "bindToken", tokenId: id }) }),
|
|
6273
|
+
view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui5({ kind: "unbindToken" }), children: "Unbind" }) : null
|
|
6480
6274
|
] }) }) : null,
|
|
6481
|
-
/* @__PURE__ */
|
|
6482
|
-
view.hasRecent ? /* @__PURE__ */
|
|
6275
|
+
/* @__PURE__ */ jsx6(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui5({ kind: "addSwatch" }), children: "+ Save" }), children: /* @__PURE__ */ jsx6(SwatchGrid, { label: "Swatches", children: view.swatches.map((sw) => /* @__PURE__ */ jsx6(ColorChip, { size: "grid", color: sw.hex, label: sw.hex, onClick: () => ui5({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui5({ kind: "removeSwatch", hex: sw.hex }) }, sw.key)) }) }),
|
|
6276
|
+
view.hasRecent ? /* @__PURE__ */ jsx6(Section2, { title: "Recent", flush: true, children: /* @__PURE__ */ jsx6(SwatchGrid, { label: "Recent", children: view.recent.map((r) => /* @__PURE__ */ jsx6(ColorChip, { size: "grid", color: r.hex, label: r.hex, onClick: () => ui5({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : null
|
|
6483
6277
|
] }) });
|
|
6484
6278
|
}
|
|
6485
6279
|
function ColorPicker({ controller }) {
|
|
@@ -6557,8 +6351,8 @@ function ColorPicker({ controller }) {
|
|
|
6557
6351
|
controller.endDrag();
|
|
6558
6352
|
}
|
|
6559
6353
|
}, [controller]);
|
|
6560
|
-
return /* @__PURE__ */
|
|
6561
|
-
/* @__PURE__ */
|
|
6354
|
+
return /* @__PURE__ */ jsxs5(Stack3, { direction: "row", pad: "none", children: [
|
|
6355
|
+
/* @__PURE__ */ jsx6(
|
|
6562
6356
|
CanvasSurface,
|
|
6563
6357
|
{
|
|
6564
6358
|
ref: spectrumRef,
|
|
@@ -6573,7 +6367,7 @@ function ColorPicker({ controller }) {
|
|
|
6573
6367
|
onPointerUp: endDrag
|
|
6574
6368
|
}
|
|
6575
6369
|
),
|
|
6576
|
-
/* @__PURE__ */
|
|
6370
|
+
/* @__PURE__ */ jsx6(
|
|
6577
6371
|
CanvasSurface,
|
|
6578
6372
|
{
|
|
6579
6373
|
ref: hueRef,
|
|
@@ -6587,7 +6381,7 @@ function ColorPicker({ controller }) {
|
|
|
6587
6381
|
onPointerUp: endDrag
|
|
6588
6382
|
}
|
|
6589
6383
|
),
|
|
6590
|
-
controller.isAlphaShown() ? /* @__PURE__ */
|
|
6384
|
+
controller.isAlphaShown() ? /* @__PURE__ */ jsx6(
|
|
6591
6385
|
CanvasSurface,
|
|
6592
6386
|
{
|
|
6593
6387
|
ref: alphaRef,
|
|
@@ -6603,12 +6397,10 @@ function ColorPicker({ controller }) {
|
|
|
6603
6397
|
) : null
|
|
6604
6398
|
] });
|
|
6605
6399
|
}
|
|
6606
|
-
var COLOR_RUNTIME_UNITS = ["color/Picker"
|
|
6400
|
+
var COLOR_RUNTIME_UNITS = ["color/Picker"];
|
|
6607
6401
|
function colorRuntimeComponents(controller) {
|
|
6608
6402
|
return {
|
|
6609
|
-
"color/Picker": () => /* @__PURE__ */
|
|
6610
|
-
"color/SwapIcon": SwapIcon,
|
|
6611
|
-
"color/EyedropperIcon": EyedropperIcon
|
|
6403
|
+
"color/Picker": () => /* @__PURE__ */ jsx6(ColorPicker, { controller })
|
|
6612
6404
|
};
|
|
6613
6405
|
}
|
|
6614
6406
|
function clamp01(n) {
|
|
@@ -7355,7 +7147,7 @@ var CurveController = class {
|
|
|
7355
7147
|
const hit = modifiers.pan ? { kind: "plot" } : this.hitTest(x, y);
|
|
7356
7148
|
const tick = this.scale.xToTick(x);
|
|
7357
7149
|
const value = this.scale.yToValue(y);
|
|
7358
|
-
const
|
|
7150
|
+
const base = {
|
|
7359
7151
|
startX: x,
|
|
7360
7152
|
startY: y,
|
|
7361
7153
|
startTick: tick,
|
|
@@ -7368,13 +7160,13 @@ var CurveController = class {
|
|
|
7368
7160
|
additive: modifiers.additive === true
|
|
7369
7161
|
};
|
|
7370
7162
|
if (modifiers.pan) {
|
|
7371
|
-
this.drag = { ...
|
|
7163
|
+
this.drag = { ...base, kind: "pan" };
|
|
7372
7164
|
this.notify();
|
|
7373
7165
|
return true;
|
|
7374
7166
|
}
|
|
7375
7167
|
if (hit.kind === "tangent") {
|
|
7376
7168
|
this.drag = {
|
|
7377
|
-
...
|
|
7169
|
+
...base,
|
|
7378
7170
|
kind: "tangent",
|
|
7379
7171
|
tangent: { channelId: hit.channelId, keyId: hit.keyId, side: hit.side }
|
|
7380
7172
|
};
|
|
@@ -7393,12 +7185,12 @@ var CurveController = class {
|
|
|
7393
7185
|
origin[keyRefId(candidate)] = { tick: found.key.tick, value: found.key.value };
|
|
7394
7186
|
editable.push(candidate);
|
|
7395
7187
|
}
|
|
7396
|
-
this.drag = { ...
|
|
7188
|
+
this.drag = { ...base, kind: "moveKeys", keys: editable, origin };
|
|
7397
7189
|
this.notify();
|
|
7398
7190
|
return true;
|
|
7399
7191
|
}
|
|
7400
7192
|
this.drag = {
|
|
7401
|
-
...
|
|
7193
|
+
...base,
|
|
7402
7194
|
kind: "marquee",
|
|
7403
7195
|
marquee: { fromTick: tick, toTick: tick, fromValue: value, toValue: value }
|
|
7404
7196
|
};
|
|
@@ -7898,7 +7690,7 @@ var curveManifest = {
|
|
|
7898
7690
|
import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
|
|
7899
7691
|
import { EmptyState as EmptyState4, StatusBar as StatusBar3, Toolbar as Toolbar3, ToolbarGroup } from "@xenosystem/components/chrome";
|
|
7900
7692
|
import { formatTick } from "@xenosystem/time-core";
|
|
7901
|
-
import { Fragment as Fragment5, jsx as
|
|
7693
|
+
import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
7902
7694
|
var DASHES = ["none", "4 2", "1 2", "6 2 1 2"];
|
|
7903
7695
|
function CurvePanelView({ controller, showPresets = true }) {
|
|
7904
7696
|
const state = useSyncExternalStore5(controller.subscribe, controller.getState, controller.getState);
|
|
@@ -7977,21 +7769,21 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
7977
7769
|
const preview = state.preview;
|
|
7978
7770
|
const selected = new Set(state.selection.keys.map(keyRefId));
|
|
7979
7771
|
const channels = state.curves?.channels ?? [];
|
|
7980
|
-
return /* @__PURE__ */
|
|
7981
|
-
/* @__PURE__ */
|
|
7772
|
+
return /* @__PURE__ */ jsxs6("div", { style: SHELL, children: [
|
|
7773
|
+
/* @__PURE__ */ jsx7(
|
|
7982
7774
|
Toolbar3,
|
|
7983
7775
|
{
|
|
7984
|
-
left: /* @__PURE__ */
|
|
7985
|
-
right: /* @__PURE__ */
|
|
7986
|
-
["aligned", "broken", "flat"].map((mode) => /* @__PURE__ */
|
|
7987
|
-
/* @__PURE__ */
|
|
7776
|
+
left: /* @__PURE__ */ jsx7(ToolbarGroup, { children: ["linear", "bezier", "hold", "step"].map((mode) => /* @__PURE__ */ jsx7("button", { type: "button", style: button(), onClick: () => controller.setInterpolation(mode), children: mode }, mode)) }),
|
|
7777
|
+
right: /* @__PURE__ */ jsxs6(ToolbarGroup, { end: true, children: [
|
|
7778
|
+
["aligned", "broken", "flat"].map((mode) => /* @__PURE__ */ jsx7("button", { type: "button", style: button(), onClick: () => controller.setTangentMode(mode), children: mode }, mode)),
|
|
7779
|
+
/* @__PURE__ */ jsx7("button", { type: "button", style: button(), onClick: () => controller.fitAll(), children: "Fit" })
|
|
7988
7780
|
] })
|
|
7989
7781
|
}
|
|
7990
7782
|
),
|
|
7991
|
-
showPresets ? /* @__PURE__ */
|
|
7783
|
+
showPresets ? /* @__PURE__ */ jsx7(
|
|
7992
7784
|
Toolbar3,
|
|
7993
7785
|
{
|
|
7994
|
-
left: /* @__PURE__ */
|
|
7786
|
+
left: /* @__PURE__ */ jsx7(ToolbarGroup, { children: EASING_PRESETS.slice(0, 6).map((preset) => /* @__PURE__ */ jsx7(
|
|
7995
7787
|
"button",
|
|
7996
7788
|
{
|
|
7997
7789
|
type: "button",
|
|
@@ -8004,7 +7796,7 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8004
7796
|
)) })
|
|
8005
7797
|
}
|
|
8006
7798
|
) : null,
|
|
8007
|
-
channels.length === 0 ? /* @__PURE__ */
|
|
7799
|
+
channels.length === 0 ? /* @__PURE__ */ jsx7(EmptyState4, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx7(
|
|
8008
7800
|
"div",
|
|
8009
7801
|
{
|
|
8010
7802
|
ref: containerRef,
|
|
@@ -8018,7 +7810,7 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8018
7810
|
onPointerUp,
|
|
8019
7811
|
onPointerCancel: onPointerUp,
|
|
8020
7812
|
onKeyDown,
|
|
8021
|
-
children: /* @__PURE__ */
|
|
7813
|
+
children: /* @__PURE__ */ jsxs6(
|
|
8022
7814
|
"svg",
|
|
8023
7815
|
{
|
|
8024
7816
|
"data-canvas": "curve-plot",
|
|
@@ -8026,7 +7818,7 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8026
7818
|
height: "100%",
|
|
8027
7819
|
style: { position: "absolute", inset: 0, display: "block" },
|
|
8028
7820
|
children: [
|
|
8029
|
-
/* @__PURE__ */
|
|
7821
|
+
/* @__PURE__ */ jsx7(
|
|
8030
7822
|
"line",
|
|
8031
7823
|
{
|
|
8032
7824
|
x1: scale.gutterPx,
|
|
@@ -8036,7 +7828,7 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8036
7828
|
stroke: "var(--xeno-control)"
|
|
8037
7829
|
}
|
|
8038
7830
|
),
|
|
8039
|
-
scale.minValue < 0 && scale.maxValue > 0 ? /* @__PURE__ */
|
|
7831
|
+
scale.minValue < 0 && scale.maxValue > 0 ? /* @__PURE__ */ jsx7(
|
|
8040
7832
|
"line",
|
|
8041
7833
|
{
|
|
8042
7834
|
x1: scale.gutterPx,
|
|
@@ -8051,7 +7843,7 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8051
7843
|
const channel = channels.find((c) => c.id === series.channelId);
|
|
8052
7844
|
if (!channel || series.points.length === 0) return null;
|
|
8053
7845
|
const d = series.points.map((p, i) => `${i === 0 ? "M" : "L"}${scale.tickToX(p.tick).toFixed(2)},${scale.valueToY(p.value).toFixed(2)}`).join(" ");
|
|
8054
|
-
return /* @__PURE__ */
|
|
7846
|
+
return /* @__PURE__ */ jsx7(
|
|
8055
7847
|
"path",
|
|
8056
7848
|
{
|
|
8057
7849
|
d,
|
|
@@ -8071,9 +7863,9 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8071
7863
|
const x = scale.tickToX(shown.tick);
|
|
8072
7864
|
const y = scale.valueToY(shown.value);
|
|
8073
7865
|
const isSelected = selected.has(id);
|
|
8074
|
-
return /* @__PURE__ */
|
|
8075
|
-
isSelected ? /* @__PURE__ */
|
|
8076
|
-
/* @__PURE__ */
|
|
7866
|
+
return /* @__PURE__ */ jsxs6("g", { children: [
|
|
7867
|
+
isSelected ? /* @__PURE__ */ jsx7(Handles, { keyframe: key, x, y, scale }) : null,
|
|
7868
|
+
/* @__PURE__ */ jsx7(
|
|
8077
7869
|
"rect",
|
|
8078
7870
|
{
|
|
8079
7871
|
x: x - 3,
|
|
@@ -8089,7 +7881,7 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8089
7881
|
] }, id);
|
|
8090
7882
|
})
|
|
8091
7883
|
),
|
|
8092
|
-
preview?.marquee ? /* @__PURE__ */
|
|
7884
|
+
preview?.marquee ? /* @__PURE__ */ jsx7(
|
|
8093
7885
|
"rect",
|
|
8094
7886
|
{
|
|
8095
7887
|
x: Math.min(scale.tickToX(preview.marquee.fromTick), scale.tickToX(preview.marquee.toTick)),
|
|
@@ -8102,7 +7894,7 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8102
7894
|
stroke: "var(--xeno-active)"
|
|
8103
7895
|
}
|
|
8104
7896
|
) : null,
|
|
8105
|
-
state.playheadTick !== null ? /* @__PURE__ */
|
|
7897
|
+
state.playheadTick !== null ? /* @__PURE__ */ jsx7(
|
|
8106
7898
|
"line",
|
|
8107
7899
|
{
|
|
8108
7900
|
x1: scale.tickToX(state.playheadTick),
|
|
@@ -8117,11 +7909,11 @@ function CurvePanelView({ controller, showPresets = true }) {
|
|
|
8117
7909
|
)
|
|
8118
7910
|
}
|
|
8119
7911
|
),
|
|
8120
|
-
/* @__PURE__ */
|
|
7912
|
+
/* @__PURE__ */ jsx7(
|
|
8121
7913
|
StatusBar3,
|
|
8122
7914
|
{
|
|
8123
7915
|
left: `${channels.length} channel${channels.length === 1 ? "" : "s"}`,
|
|
8124
|
-
right: /* @__PURE__ */
|
|
7916
|
+
right: /* @__PURE__ */ jsx7("span", { className: "tabular-nums", children: state.playheadTick !== null ? formatTick(state.playheadTick, state.timebase) : "" })
|
|
8125
7917
|
}
|
|
8126
7918
|
)
|
|
8127
7919
|
] });
|
|
@@ -8133,14 +7925,14 @@ function Handles({
|
|
|
8133
7925
|
scale
|
|
8134
7926
|
}) {
|
|
8135
7927
|
const sides = ["in", "out"];
|
|
8136
|
-
return /* @__PURE__ */
|
|
7928
|
+
return /* @__PURE__ */ jsx7(Fragment5, { children: sides.map((side) => {
|
|
8137
7929
|
const tangent = side === "in" ? keyframe.tangentIn : keyframe.tangentOut;
|
|
8138
7930
|
if (!tangent) return null;
|
|
8139
7931
|
const hx = scale.tickToX(keyframe.tick + tangent.x);
|
|
8140
7932
|
const hy = scale.valueToY(keyframe.value + tangent.y);
|
|
8141
|
-
return /* @__PURE__ */
|
|
8142
|
-
/* @__PURE__ */
|
|
8143
|
-
/* @__PURE__ */
|
|
7933
|
+
return /* @__PURE__ */ jsxs6("g", { children: [
|
|
7934
|
+
/* @__PURE__ */ jsx7("line", { x1: x, y1: y, x2: hx, y2: hy, stroke: "var(--xeno-active)", strokeWidth: 1 }),
|
|
7935
|
+
/* @__PURE__ */ jsx7("rect", { x: hx - 2, y: hy - 2, width: 4, height: 4, fill: "var(--xeno-text)" })
|
|
8144
7936
|
] }, side);
|
|
8145
7937
|
}) });
|
|
8146
7938
|
}
|
|
@@ -8774,7 +8566,7 @@ var viewportManifest = {
|
|
|
8774
8566
|
// src/edit/viewport/react/ViewportPanelView.tsx
|
|
8775
8567
|
import { useEffect as useEffect6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
|
|
8776
8568
|
import { Badge as Badge4, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
|
|
8777
|
-
import { jsx as
|
|
8569
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
8778
8570
|
var SLOT_STYLE = {
|
|
8779
8571
|
"top-left": { top: 8, left: 8 },
|
|
8780
8572
|
"top-center": { top: 8, left: "50%", transform: "translateX(-50%)" },
|
|
@@ -8802,7 +8594,7 @@ function ViewportPanelView({
|
|
|
8802
8594
|
return controller.mount(canvas, container);
|
|
8803
8595
|
}, [controller]);
|
|
8804
8596
|
const hidden = new Set(state.hiddenSlots);
|
|
8805
|
-
return /* @__PURE__ */
|
|
8597
|
+
return /* @__PURE__ */ jsxs7(
|
|
8806
8598
|
"div",
|
|
8807
8599
|
{
|
|
8808
8600
|
ref: containerRef,
|
|
@@ -8841,7 +8633,7 @@ function ViewportPanelView({
|
|
|
8841
8633
|
touchAction: "none"
|
|
8842
8634
|
},
|
|
8843
8635
|
children: [
|
|
8844
|
-
/* @__PURE__ */
|
|
8636
|
+
/* @__PURE__ */ jsx8(
|
|
8845
8637
|
"canvas",
|
|
8846
8638
|
{
|
|
8847
8639
|
ref: canvasRef,
|
|
@@ -8852,7 +8644,7 @@ function ViewportPanelView({
|
|
|
8852
8644
|
VIEWPORT_SLOTS.map((slot) => {
|
|
8853
8645
|
const content = overlays?.[slot];
|
|
8854
8646
|
if (!content || hidden.has(slot)) return null;
|
|
8855
|
-
return /* @__PURE__ */
|
|
8647
|
+
return /* @__PURE__ */ jsx8(
|
|
8856
8648
|
"div",
|
|
8857
8649
|
{
|
|
8858
8650
|
"data-viewport-slot": slot,
|
|
@@ -8870,7 +8662,7 @@ function ViewportPanelView({
|
|
|
8870
8662
|
slot
|
|
8871
8663
|
);
|
|
8872
8664
|
}),
|
|
8873
|
-
state.contextLost ? /* @__PURE__ */
|
|
8665
|
+
state.contextLost ? /* @__PURE__ */ jsx8(
|
|
8874
8666
|
"div",
|
|
8875
8667
|
{
|
|
8876
8668
|
style: {
|
|
@@ -8883,10 +8675,10 @@ function ViewportPanelView({
|
|
|
8883
8675
|
fontSize: 11,
|
|
8884
8676
|
zIndex: 20
|
|
8885
8677
|
},
|
|
8886
|
-
children: /* @__PURE__ */
|
|
8678
|
+
children: /* @__PURE__ */ jsx8(Badge4, { tone: "error", children: "graphics context lost \u2014 restoring" })
|
|
8887
8679
|
}
|
|
8888
8680
|
) : null,
|
|
8889
|
-
showStats && state.stats ? /* @__PURE__ */
|
|
8681
|
+
showStats && state.stats ? /* @__PURE__ */ jsx8("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 10 }, children: /* @__PURE__ */ jsx8(
|
|
8890
8682
|
StatusBar4,
|
|
8891
8683
|
{
|
|
8892
8684
|
left: state.stats.fps !== void 0 ? `${Math.round(state.stats.fps)} fps` : void 0,
|
|
@@ -9553,35 +9345,35 @@ import {
|
|
|
9553
9345
|
Toolbar as Toolbar4,
|
|
9554
9346
|
ToolbarGroup as ToolbarGroup2
|
|
9555
9347
|
} from "@xenosystem/components/chrome";
|
|
9556
|
-
import { jsx as
|
|
9348
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
9557
9349
|
function CaseIcon() {
|
|
9558
|
-
return /* @__PURE__ */
|
|
9559
|
-
/* @__PURE__ */
|
|
9560
|
-
/* @__PURE__ */
|
|
9561
|
-
/* @__PURE__ */
|
|
9562
|
-
/* @__PURE__ */
|
|
9350
|
+
return /* @__PURE__ */ jsxs8("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
9351
|
+
/* @__PURE__ */ jsx9("path", { d: "m3 15 4-8 4 8" }),
|
|
9352
|
+
/* @__PURE__ */ jsx9("path", { d: "M4 13h6" }),
|
|
9353
|
+
/* @__PURE__ */ jsx9("circle", { cx: "18", cy: "12", r: "3" }),
|
|
9354
|
+
/* @__PURE__ */ jsx9("path", { d: "M21 9v6" })
|
|
9563
9355
|
] });
|
|
9564
9356
|
}
|
|
9565
9357
|
function WordIcon() {
|
|
9566
|
-
return /* @__PURE__ */
|
|
9567
|
-
/* @__PURE__ */
|
|
9568
|
-
/* @__PURE__ */
|
|
9569
|
-
/* @__PURE__ */
|
|
9358
|
+
return /* @__PURE__ */ jsxs8("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
9359
|
+
/* @__PURE__ */ jsx9("path", { d: "M7 12h10" }),
|
|
9360
|
+
/* @__PURE__ */ jsx9("path", { d: "M3 7v10" }),
|
|
9361
|
+
/* @__PURE__ */ jsx9("path", { d: "M21 7v10" })
|
|
9570
9362
|
] });
|
|
9571
9363
|
}
|
|
9572
9364
|
function RegexIcon() {
|
|
9573
|
-
return /* @__PURE__ */
|
|
9574
|
-
/* @__PURE__ */
|
|
9575
|
-
/* @__PURE__ */
|
|
9576
|
-
/* @__PURE__ */
|
|
9577
|
-
/* @__PURE__ */
|
|
9365
|
+
return /* @__PURE__ */ jsxs8("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
9366
|
+
/* @__PURE__ */ jsx9("path", { d: "M12 4v8" }),
|
|
9367
|
+
/* @__PURE__ */ jsx9("path", { d: "m8.5 6 7 4" }),
|
|
9368
|
+
/* @__PURE__ */ jsx9("path", { d: "m8.5 10 7-4" }),
|
|
9369
|
+
/* @__PURE__ */ jsx9("path", { d: "M5 18h2" })
|
|
9578
9370
|
] });
|
|
9579
9371
|
}
|
|
9580
9372
|
function UpIcon() {
|
|
9581
|
-
return /* @__PURE__ */
|
|
9373
|
+
return /* @__PURE__ */ jsx9("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx9("path", { d: "m18 15-6-6-6 6" }) });
|
|
9582
9374
|
}
|
|
9583
9375
|
function DownIcon() {
|
|
9584
|
-
return /* @__PURE__ */
|
|
9376
|
+
return /* @__PURE__ */ jsx9("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx9("path", { d: "m6 9 6 6 6-6" }) });
|
|
9585
9377
|
}
|
|
9586
9378
|
function StatusLine({
|
|
9587
9379
|
status,
|
|
@@ -9592,14 +9384,14 @@ function StatusLine({
|
|
|
9592
9384
|
hasText
|
|
9593
9385
|
}) {
|
|
9594
9386
|
if (status === "invalidPattern") {
|
|
9595
|
-
return /* @__PURE__ */
|
|
9387
|
+
return /* @__PURE__ */ jsx9(Badge5, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
|
|
9596
9388
|
}
|
|
9597
9389
|
if (status === "failed") {
|
|
9598
|
-
return /* @__PURE__ */
|
|
9390
|
+
return /* @__PURE__ */ jsx9(Badge5, { tone: "error", title: message ?? void 0, children: "search failed" });
|
|
9599
9391
|
}
|
|
9600
|
-
if (status === "searching") return /* @__PURE__ */
|
|
9392
|
+
if (status === "searching") return /* @__PURE__ */ jsx9(Badge5, { children: "searching\u2026" });
|
|
9601
9393
|
if (!hasText || status === "idle") return null;
|
|
9602
|
-
return /* @__PURE__ */
|
|
9394
|
+
return /* @__PURE__ */ jsxs8("span", { style: { fontVariantNumeric: "tabular-nums", fontSize: 10, opacity: 0.55 }, children: [
|
|
9603
9395
|
displayIndex,
|
|
9604
9396
|
"/",
|
|
9605
9397
|
count,
|
|
@@ -9622,7 +9414,7 @@ function FindPanelView({
|
|
|
9622
9414
|
controller.clear();
|
|
9623
9415
|
}
|
|
9624
9416
|
};
|
|
9625
|
-
const renderMatch = (match, index) => /* @__PURE__ */
|
|
9417
|
+
const renderMatch = (match, index) => /* @__PURE__ */ jsx9(
|
|
9626
9418
|
Row3,
|
|
9627
9419
|
{
|
|
9628
9420
|
noIcon: true,
|
|
@@ -9632,7 +9424,7 @@ function FindPanelView({
|
|
|
9632
9424
|
event.preventDefault();
|
|
9633
9425
|
controller.requestContextMenu?.(match.id, event.clientX, event.clientY);
|
|
9634
9426
|
},
|
|
9635
|
-
label: /* @__PURE__ */
|
|
9427
|
+
label: /* @__PURE__ */ jsx9("span", { children: highlightSegments(match.snippet ?? "", match.ranges).map((segment, i) => /* @__PURE__ */ jsx9(
|
|
9636
9428
|
"span",
|
|
9637
9429
|
{
|
|
9638
9430
|
style: segment.hit ? { background: "var(--xeno-control)", borderRadius: 2 } : void 0,
|
|
@@ -9645,11 +9437,11 @@ function FindPanelView({
|
|
|
9645
9437
|
match.id
|
|
9646
9438
|
);
|
|
9647
9439
|
let flatIndex = -1;
|
|
9648
|
-
return /* @__PURE__ */
|
|
9649
|
-
/* @__PURE__ */
|
|
9440
|
+
return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, onKeyDown, children: [
|
|
9441
|
+
/* @__PURE__ */ jsx9(
|
|
9650
9442
|
Toolbar4,
|
|
9651
9443
|
{
|
|
9652
|
-
left: /* @__PURE__ */
|
|
9444
|
+
left: /* @__PURE__ */ jsx9(
|
|
9653
9445
|
SearchField4,
|
|
9654
9446
|
{
|
|
9655
9447
|
value: state.text,
|
|
@@ -9657,42 +9449,42 @@ function FindPanelView({
|
|
|
9657
9449
|
placeholder
|
|
9658
9450
|
}
|
|
9659
9451
|
),
|
|
9660
|
-
right: /* @__PURE__ */
|
|
9661
|
-
/* @__PURE__ */
|
|
9452
|
+
right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
|
|
9453
|
+
/* @__PURE__ */ jsx9(
|
|
9662
9454
|
IconButton6,
|
|
9663
9455
|
{
|
|
9664
9456
|
label: "Match case",
|
|
9665
9457
|
active: state.options.caseSensitive,
|
|
9666
9458
|
onClick: () => controller.setOptions({ caseSensitive: !state.options.caseSensitive }),
|
|
9667
|
-
icon: /* @__PURE__ */
|
|
9459
|
+
icon: /* @__PURE__ */ jsx9(CaseIcon, {})
|
|
9668
9460
|
}
|
|
9669
9461
|
),
|
|
9670
|
-
/* @__PURE__ */
|
|
9462
|
+
/* @__PURE__ */ jsx9(
|
|
9671
9463
|
IconButton6,
|
|
9672
9464
|
{
|
|
9673
9465
|
label: "Whole word",
|
|
9674
9466
|
active: state.options.wholeWord,
|
|
9675
9467
|
onClick: () => controller.setOptions({ wholeWord: !state.options.wholeWord }),
|
|
9676
|
-
icon: /* @__PURE__ */
|
|
9468
|
+
icon: /* @__PURE__ */ jsx9(WordIcon, {})
|
|
9677
9469
|
}
|
|
9678
9470
|
),
|
|
9679
|
-
/* @__PURE__ */
|
|
9471
|
+
/* @__PURE__ */ jsx9(
|
|
9680
9472
|
IconButton6,
|
|
9681
9473
|
{
|
|
9682
9474
|
label: "Regular expression",
|
|
9683
9475
|
active: state.options.regex,
|
|
9684
9476
|
onClick: () => controller.setOptions({ regex: !state.options.regex }),
|
|
9685
|
-
icon: /* @__PURE__ */
|
|
9477
|
+
icon: /* @__PURE__ */ jsx9(RegexIcon, {})
|
|
9686
9478
|
}
|
|
9687
9479
|
)
|
|
9688
9480
|
] })
|
|
9689
9481
|
}
|
|
9690
9482
|
),
|
|
9691
|
-
/* @__PURE__ */
|
|
9483
|
+
/* @__PURE__ */ jsx9(
|
|
9692
9484
|
Toolbar4,
|
|
9693
9485
|
{
|
|
9694
9486
|
divided: false,
|
|
9695
|
-
left: /* @__PURE__ */
|
|
9487
|
+
left: /* @__PURE__ */ jsx9(
|
|
9696
9488
|
StatusLine,
|
|
9697
9489
|
{
|
|
9698
9490
|
status: state.status,
|
|
@@ -9703,34 +9495,34 @@ function FindPanelView({
|
|
|
9703
9495
|
hasText: state.text !== ""
|
|
9704
9496
|
}
|
|
9705
9497
|
),
|
|
9706
|
-
right: /* @__PURE__ */
|
|
9707
|
-
/* @__PURE__ */
|
|
9498
|
+
right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
|
|
9499
|
+
/* @__PURE__ */ jsx9(
|
|
9708
9500
|
IconButton6,
|
|
9709
9501
|
{
|
|
9710
9502
|
label: "Previous match",
|
|
9711
9503
|
disabled: state.matches.length === 0,
|
|
9712
9504
|
onClick: () => controller.previous(),
|
|
9713
|
-
icon: /* @__PURE__ */
|
|
9505
|
+
icon: /* @__PURE__ */ jsx9(UpIcon, {})
|
|
9714
9506
|
}
|
|
9715
9507
|
),
|
|
9716
|
-
/* @__PURE__ */
|
|
9508
|
+
/* @__PURE__ */ jsx9(
|
|
9717
9509
|
IconButton6,
|
|
9718
9510
|
{
|
|
9719
9511
|
label: "Next match",
|
|
9720
9512
|
disabled: state.matches.length === 0,
|
|
9721
9513
|
onClick: () => controller.next(),
|
|
9722
|
-
icon: /* @__PURE__ */
|
|
9514
|
+
icon: /* @__PURE__ */ jsx9(DownIcon, {})
|
|
9723
9515
|
}
|
|
9724
9516
|
),
|
|
9725
|
-
/* @__PURE__ */
|
|
9517
|
+
/* @__PURE__ */ jsx9(TextButton3, { onClick: () => controller.setReplaceVisible(!state.replaceVisible), children: state.replaceVisible ? "Hide replace" : "Replace" })
|
|
9726
9518
|
] })
|
|
9727
9519
|
}
|
|
9728
9520
|
),
|
|
9729
|
-
state.message && state.status === "invalidPattern" ? /* @__PURE__ */
|
|
9730
|
-
state.replaceVisible ? /* @__PURE__ */
|
|
9521
|
+
state.message && state.status === "invalidPattern" ? /* @__PURE__ */ jsx9("div", { style: { padding: "2px 8px 4px", fontSize: 9, opacity: 0.6 }, children: state.message }) : null,
|
|
9522
|
+
state.replaceVisible ? /* @__PURE__ */ jsx9(
|
|
9731
9523
|
Toolbar4,
|
|
9732
9524
|
{
|
|
9733
|
-
left: /* @__PURE__ */
|
|
9525
|
+
left: /* @__PURE__ */ jsx9(
|
|
9734
9526
|
SearchField4,
|
|
9735
9527
|
{
|
|
9736
9528
|
value: state.replaceText,
|
|
@@ -9738,9 +9530,9 @@ function FindPanelView({
|
|
|
9738
9530
|
placeholder: "Replace with"
|
|
9739
9531
|
}
|
|
9740
9532
|
),
|
|
9741
|
-
right: /* @__PURE__ */
|
|
9742
|
-
/* @__PURE__ */
|
|
9743
|
-
/* @__PURE__ */
|
|
9533
|
+
right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
|
|
9534
|
+
/* @__PURE__ */ jsx9(TextButton3, { disabled: !state.canReplace, onClick: () => controller.replaceCurrent(), children: "Replace" }),
|
|
9535
|
+
/* @__PURE__ */ jsxs8(TextButton3, { disabled: !state.canReplace, onClick: () => controller.replaceAll(), children: [
|
|
9744
9536
|
"All (",
|
|
9745
9537
|
state.matches.length,
|
|
9746
9538
|
")"
|
|
@@ -9748,23 +9540,23 @@ function FindPanelView({
|
|
|
9748
9540
|
] })
|
|
9749
9541
|
}
|
|
9750
9542
|
) : null,
|
|
9751
|
-
showResults ? /* @__PURE__ */
|
|
9543
|
+
showResults ? /* @__PURE__ */ jsx9(ScrollArea4, { children: state.status === "idle" ? /* @__PURE__ */ jsx9(EmptyState5, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx9(
|
|
9752
9544
|
EmptyState5,
|
|
9753
9545
|
{
|
|
9754
9546
|
title: "Invalid pattern",
|
|
9755
9547
|
hint: state.message ?? "The expression could not be read. Fix it to search."
|
|
9756
9548
|
}
|
|
9757
|
-
) : state.status === "failed" ? /* @__PURE__ */
|
|
9549
|
+
) : state.status === "failed" ? /* @__PURE__ */ jsx9(EmptyState5, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx9(EmptyState5, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx9(RowList3, { children: state.matches.map((m) => renderMatch(m, ++flatIndex)) }) : state.groups.map((group) => /* @__PURE__ */ jsx9(
|
|
9758
9550
|
Section3,
|
|
9759
9551
|
{
|
|
9760
9552
|
title: group.label || "Results",
|
|
9761
9553
|
flush: true,
|
|
9762
|
-
badge: /* @__PURE__ */
|
|
9763
|
-
children: /* @__PURE__ */
|
|
9554
|
+
badge: /* @__PURE__ */ jsx9(Badge5, { children: group.matches.length }),
|
|
9555
|
+
children: /* @__PURE__ */ jsx9(RowList3, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
|
|
9764
9556
|
},
|
|
9765
9557
|
group.id
|
|
9766
9558
|
)) }) : null,
|
|
9767
|
-
/* @__PURE__ */
|
|
9559
|
+
/* @__PURE__ */ jsx9(
|
|
9768
9560
|
StatusBar5,
|
|
9769
9561
|
{
|
|
9770
9562
|
left: state.truncated ? `showing first ${state.matches.length}` : void 0,
|
|
@@ -10425,7 +10217,7 @@ import {
|
|
|
10425
10217
|
Toolbar as Toolbar5,
|
|
10426
10218
|
ToolbarGroup as ToolbarGroup3
|
|
10427
10219
|
} from "@xenosystem/components/chrome";
|
|
10428
|
-
import { Fragment as Fragment6, jsx as
|
|
10220
|
+
import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
10429
10221
|
var ANCHOR_BADGE = {
|
|
10430
10222
|
live: null,
|
|
10431
10223
|
stale: {
|
|
@@ -10449,7 +10241,7 @@ function ThreadCard({
|
|
|
10449
10241
|
const badge = ANCHOR_BADGE[anchorState];
|
|
10450
10242
|
const replying = controller.getState().replyingTo === thread.id;
|
|
10451
10243
|
const orphaned = anchorState === "orphaned";
|
|
10452
|
-
return /* @__PURE__ */
|
|
10244
|
+
return /* @__PURE__ */ jsx10(
|
|
10453
10245
|
"div",
|
|
10454
10246
|
{
|
|
10455
10247
|
style: {
|
|
@@ -10463,13 +10255,13 @@ function ThreadCard({
|
|
|
10463
10255
|
event.preventDefault();
|
|
10464
10256
|
controller.requestContextMenu(thread.id, event.clientX, event.clientY);
|
|
10465
10257
|
},
|
|
10466
|
-
children: /* @__PURE__ */
|
|
10467
|
-
/* @__PURE__ */
|
|
10468
|
-
badge ? /* @__PURE__ */
|
|
10469
|
-
thread.resolved ? /* @__PURE__ */
|
|
10470
|
-
/* @__PURE__ */
|
|
10258
|
+
children: /* @__PURE__ */ jsxs9("div", { style: { padding: "6px 8px", display: "flex", flexDirection: "column", gap: 4 }, children: [
|
|
10259
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
|
|
10260
|
+
badge ? /* @__PURE__ */ jsx10(Badge6, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
|
|
10261
|
+
thread.resolved ? /* @__PURE__ */ jsx10(Badge6, { children: "resolved" }) : null,
|
|
10262
|
+
/* @__PURE__ */ jsx10("span", { style: { marginLeft: "auto", fontSize: 9, opacity: 0.4 }, children: formatAge(thread.createdAt, now) })
|
|
10471
10263
|
] }),
|
|
10472
|
-
thread.anchorLabel ? /* @__PURE__ */
|
|
10264
|
+
thread.anchorLabel ? /* @__PURE__ */ jsx10(
|
|
10473
10265
|
"button",
|
|
10474
10266
|
{
|
|
10475
10267
|
type: "button",
|
|
@@ -10492,15 +10284,15 @@ function ThreadCard({
|
|
|
10492
10284
|
children: thread.anchorLabel
|
|
10493
10285
|
}
|
|
10494
10286
|
) : null,
|
|
10495
|
-
view.messages.map((message) => /* @__PURE__ */
|
|
10496
|
-
/* @__PURE__ */
|
|
10497
|
-
/* @__PURE__ */
|
|
10498
|
-
/* @__PURE__ */
|
|
10499
|
-
message.editedAt ? /* @__PURE__ */
|
|
10287
|
+
view.messages.map((message) => /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
|
|
10288
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "baseline", gap: 4 }, children: [
|
|
10289
|
+
/* @__PURE__ */ jsx10("span", { style: { fontSize: 10, fontWeight: 600 }, children: message.authorName ?? message.authorId }),
|
|
10290
|
+
/* @__PURE__ */ jsx10("span", { style: { fontSize: 9, opacity: 0.35 }, children: formatAge(message.createdAt, now) }),
|
|
10291
|
+
message.editedAt ? /* @__PURE__ */ jsx10("span", { style: { fontSize: 9, opacity: 0.3 }, children: "edited" }) : null
|
|
10500
10292
|
] }),
|
|
10501
|
-
/* @__PURE__ */
|
|
10293
|
+
/* @__PURE__ */ jsx10("p", { style: { fontSize: 11, opacity: 0.75, margin: 0, whiteSpace: "pre-wrap" }, children: message.body })
|
|
10502
10294
|
] }, message.id)),
|
|
10503
|
-
allowReactions && thread.reactions?.length ? /* @__PURE__ */
|
|
10295
|
+
allowReactions && thread.reactions?.length ? /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap: 4 }, children: thread.reactions.map((reaction) => /* @__PURE__ */ jsxs9(
|
|
10504
10296
|
TextButton4,
|
|
10505
10297
|
{
|
|
10506
10298
|
onClick: () => controller.react(
|
|
@@ -10516,8 +10308,8 @@ function ThreadCard({
|
|
|
10516
10308
|
},
|
|
10517
10309
|
reaction.emoji
|
|
10518
10310
|
)) }) : null,
|
|
10519
|
-
replying ? /* @__PURE__ */
|
|
10520
|
-
/* @__PURE__ */
|
|
10311
|
+
replying ? /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 4 }, children: [
|
|
10312
|
+
/* @__PURE__ */ jsx10(
|
|
10521
10313
|
"input",
|
|
10522
10314
|
{
|
|
10523
10315
|
value: controller.getState().replyDraft,
|
|
@@ -10544,11 +10336,11 @@ function ThreadCard({
|
|
|
10544
10336
|
}
|
|
10545
10337
|
}
|
|
10546
10338
|
),
|
|
10547
|
-
/* @__PURE__ */
|
|
10548
|
-
] }) : /* @__PURE__ */
|
|
10549
|
-
/* @__PURE__ */
|
|
10550
|
-
/* @__PURE__ */
|
|
10551
|
-
/* @__PURE__ */
|
|
10339
|
+
/* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.reply(thread.id), children: "Send" })
|
|
10340
|
+
] }) : /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 6 }, children: [
|
|
10341
|
+
/* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.setReplyingTo(thread.id), children: "Reply" }),
|
|
10342
|
+
/* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.resolve(thread.id, !thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
|
|
10343
|
+
/* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.remove(thread.id), children: "Delete" })
|
|
10552
10344
|
] })
|
|
10553
10345
|
] })
|
|
10554
10346
|
}
|
|
@@ -10564,11 +10356,11 @@ function CommentsPanelView({
|
|
|
10564
10356
|
const now = controller.clock();
|
|
10565
10357
|
const open = state.threads.filter((t) => !t.thread.resolved);
|
|
10566
10358
|
const resolved = state.threads.filter((t) => t.thread.resolved);
|
|
10567
|
-
return /* @__PURE__ */
|
|
10568
|
-
/* @__PURE__ */
|
|
10359
|
+
return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
|
|
10360
|
+
/* @__PURE__ */ jsx10(
|
|
10569
10361
|
Toolbar5,
|
|
10570
10362
|
{
|
|
10571
|
-
left: /* @__PURE__ */
|
|
10363
|
+
left: /* @__PURE__ */ jsx10(
|
|
10572
10364
|
SegmentedControl2,
|
|
10573
10365
|
{
|
|
10574
10366
|
label: "Show",
|
|
@@ -10581,7 +10373,7 @@ function CommentsPanelView({
|
|
|
10581
10373
|
]
|
|
10582
10374
|
}
|
|
10583
10375
|
),
|
|
10584
|
-
right: /* @__PURE__ */
|
|
10376
|
+
right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(
|
|
10585
10377
|
SegmentedControl2,
|
|
10586
10378
|
{
|
|
10587
10379
|
label: "Sort",
|
|
@@ -10596,33 +10388,33 @@ function CommentsPanelView({
|
|
|
10596
10388
|
) })
|
|
10597
10389
|
}
|
|
10598
10390
|
),
|
|
10599
|
-
state.totals.orphaned > 0 ? /* @__PURE__ */
|
|
10391
|
+
state.totals.orphaned > 0 ? /* @__PURE__ */ jsxs9("div", { style: { padding: "2px 8px", fontSize: 9, opacity: 0.6 }, children: [
|
|
10600
10392
|
state.totals.orphaned,
|
|
10601
10393
|
" comment",
|
|
10602
10394
|
state.totals.orphaned === 1 ? "" : "s",
|
|
10603
10395
|
" lost the content",
|
|
10604
10396
|
state.totals.orphaned === 1 ? " it was" : " they were",
|
|
10605
10397
|
" about.",
|
|
10606
|
-
state.filter.includeOrphaned === false ? /* @__PURE__ */
|
|
10398
|
+
state.filter.includeOrphaned === false ? /* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.setFilter({ includeOrphaned: true }), children: "Show" }) : null
|
|
10607
10399
|
] }) : null,
|
|
10608
|
-
/* @__PURE__ */
|
|
10400
|
+
/* @__PURE__ */ jsx10(ScrollArea5, { children: state.threads.length === 0 ? state.filteredEmpty ? (
|
|
10609
10401
|
// NOT "no comments". There are comments; this filter hides them, and telling a
|
|
10610
10402
|
// reviewer their feedback is gone is worse than telling them nothing.
|
|
10611
|
-
/* @__PURE__ */
|
|
10403
|
+
/* @__PURE__ */ jsx10(
|
|
10612
10404
|
EmptyState6,
|
|
10613
10405
|
{
|
|
10614
10406
|
title: "Nothing matches this filter",
|
|
10615
10407
|
hint: `${state.totals.all} comment${state.totals.all === 1 ? "" : "s"} on this document.`
|
|
10616
10408
|
}
|
|
10617
10409
|
)
|
|
10618
|
-
) : /* @__PURE__ */
|
|
10410
|
+
) : /* @__PURE__ */ jsx10(
|
|
10619
10411
|
EmptyState6,
|
|
10620
10412
|
{
|
|
10621
10413
|
title: "No comments",
|
|
10622
10414
|
hint: emptyHint ?? "Select something and add a comment."
|
|
10623
10415
|
}
|
|
10624
|
-
) : /* @__PURE__ */
|
|
10625
|
-
open.map((view) => /* @__PURE__ */
|
|
10416
|
+
) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
|
|
10417
|
+
open.map((view) => /* @__PURE__ */ jsx10(
|
|
10626
10418
|
ThreadCard,
|
|
10627
10419
|
{
|
|
10628
10420
|
view,
|
|
@@ -10632,7 +10424,7 @@ function CommentsPanelView({
|
|
|
10632
10424
|
},
|
|
10633
10425
|
view.thread.id
|
|
10634
10426
|
)),
|
|
10635
|
-
showResolved && resolved.length > 0 ? /* @__PURE__ */
|
|
10427
|
+
showResolved && resolved.length > 0 ? /* @__PURE__ */ jsx10(Section4, { title: `Resolved (${resolved.length})`, flush: true, children: resolved.map((view) => /* @__PURE__ */ jsx10(
|
|
10636
10428
|
ThreadCard,
|
|
10637
10429
|
{
|
|
10638
10430
|
view,
|
|
@@ -10643,8 +10435,8 @@ function CommentsPanelView({
|
|
|
10643
10435
|
view.thread.id
|
|
10644
10436
|
)) }) : null
|
|
10645
10437
|
] }) }),
|
|
10646
|
-
/* @__PURE__ */
|
|
10647
|
-
/* @__PURE__ */
|
|
10438
|
+
/* @__PURE__ */ jsxs9("div", { style: { borderTop: "1px solid var(--xeno-border-subtle)", padding: 6 }, children: [
|
|
10439
|
+
/* @__PURE__ */ jsx10(
|
|
10648
10440
|
"textarea",
|
|
10649
10441
|
{
|
|
10650
10442
|
value: state.draft,
|
|
@@ -10672,7 +10464,7 @@ function CommentsPanelView({
|
|
|
10672
10464
|
}
|
|
10673
10465
|
}
|
|
10674
10466
|
),
|
|
10675
|
-
/* @__PURE__ */
|
|
10467
|
+
/* @__PURE__ */ jsx10("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 2 }, children: /* @__PURE__ */ jsx10(
|
|
10676
10468
|
TextButton4,
|
|
10677
10469
|
{
|
|
10678
10470
|
strong: true,
|
|
@@ -10682,7 +10474,7 @@ function CommentsPanelView({
|
|
|
10682
10474
|
}
|
|
10683
10475
|
) })
|
|
10684
10476
|
] }),
|
|
10685
|
-
/* @__PURE__ */
|
|
10477
|
+
/* @__PURE__ */ jsx10(
|
|
10686
10478
|
StatusBar6,
|
|
10687
10479
|
{
|
|
10688
10480
|
left: `${state.totals.open} open`,
|
|
@@ -11399,7 +11191,7 @@ var GraphController = class {
|
|
|
11399
11191
|
*/
|
|
11400
11192
|
pointerDown(px, py, modifiers = {}) {
|
|
11401
11193
|
const point = this.scale.screenToGraph(px, py);
|
|
11402
|
-
const
|
|
11194
|
+
const base = {
|
|
11403
11195
|
startPx: { x: px, y: py },
|
|
11404
11196
|
startGraph: point,
|
|
11405
11197
|
nodeIds: [],
|
|
@@ -11410,13 +11202,13 @@ var GraphController = class {
|
|
|
11410
11202
|
additive: modifiers.additive === true
|
|
11411
11203
|
};
|
|
11412
11204
|
if (modifiers.pan) {
|
|
11413
|
-
this.drag = { ...
|
|
11205
|
+
this.drag = { ...base, kind: "pan" };
|
|
11414
11206
|
this.notify();
|
|
11415
11207
|
return true;
|
|
11416
11208
|
}
|
|
11417
11209
|
const hit = this.hitTest(px, py);
|
|
11418
11210
|
if (hit.kind === "port") {
|
|
11419
|
-
this.drag = { ...
|
|
11211
|
+
this.drag = { ...base, kind: "connect", source: hit.ref };
|
|
11420
11212
|
this.notify();
|
|
11421
11213
|
return true;
|
|
11422
11214
|
}
|
|
@@ -11433,7 +11225,7 @@ var GraphController = class {
|
|
|
11433
11225
|
movable.push(id);
|
|
11434
11226
|
}
|
|
11435
11227
|
void node;
|
|
11436
|
-
this.drag = { ...
|
|
11228
|
+
this.drag = { ...base, kind: "moveNodes", nodeIds: movable, origin };
|
|
11437
11229
|
this.notify();
|
|
11438
11230
|
return true;
|
|
11439
11231
|
}
|
|
@@ -11442,7 +11234,7 @@ var GraphController = class {
|
|
|
11442
11234
|
this.notify();
|
|
11443
11235
|
return false;
|
|
11444
11236
|
}
|
|
11445
|
-
this.drag = { ...
|
|
11237
|
+
this.drag = { ...base, kind: "marquee", marquee: { x: point.x, y: point.y, width: 0, height: 0 } };
|
|
11446
11238
|
this.notify();
|
|
11447
11239
|
return true;
|
|
11448
11240
|
}
|
|
@@ -11856,7 +11648,7 @@ var nodegraphManifest = {
|
|
|
11856
11648
|
// src/edit/nodegraph/react/NodeGraphPanelView.tsx
|
|
11857
11649
|
import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useSyncExternalStore as useSyncExternalStore9 } from "react";
|
|
11858
11650
|
import { EmptyState as EmptyState7, StatusBar as StatusBar7, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
|
|
11859
|
-
import { Fragment as Fragment7, jsx as
|
|
11651
|
+
import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
11860
11652
|
var HEADER_H2 = 24;
|
|
11861
11653
|
var PORT_ROW_H2 = 18;
|
|
11862
11654
|
function NodeGraphPanelView({ controller }) {
|
|
@@ -11935,17 +11727,17 @@ function NodeGraphPanelView({ controller }) {
|
|
|
11935
11727
|
const selectedNodes = new Set(state.selection.nodeIds);
|
|
11936
11728
|
const selectedEdges = new Set(state.selection.edgeIds);
|
|
11937
11729
|
const total = state.graph?.nodes.length ?? 0;
|
|
11938
|
-
return /* @__PURE__ */
|
|
11939
|
-
/* @__PURE__ */
|
|
11730
|
+
return /* @__PURE__ */ jsxs10("div", { style: SHELL2, children: [
|
|
11731
|
+
/* @__PURE__ */ jsx11(
|
|
11940
11732
|
Toolbar6,
|
|
11941
11733
|
{
|
|
11942
|
-
right: /* @__PURE__ */
|
|
11943
|
-
/* @__PURE__ */
|
|
11944
|
-
/* @__PURE__ */
|
|
11734
|
+
right: /* @__PURE__ */ jsxs10(ToolbarGroup4, { end: true, children: [
|
|
11735
|
+
/* @__PURE__ */ jsx11("button", { type: "button", style: button2(), onClick: () => controller.fit(false), children: "Fit" }),
|
|
11736
|
+
/* @__PURE__ */ jsx11("button", { type: "button", style: button2(), onClick: () => controller.fit(true), children: "Fit selection" })
|
|
11945
11737
|
] })
|
|
11946
11738
|
}
|
|
11947
11739
|
),
|
|
11948
|
-
total === 0 ? /* @__PURE__ */
|
|
11740
|
+
total === 0 ? /* @__PURE__ */ jsx11(EmptyState7, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs10(
|
|
11949
11741
|
"div",
|
|
11950
11742
|
{
|
|
11951
11743
|
ref: containerRef,
|
|
@@ -11960,15 +11752,15 @@ function NodeGraphPanelView({ controller }) {
|
|
|
11960
11752
|
onPointerCancel: onPointerUp,
|
|
11961
11753
|
onKeyDown,
|
|
11962
11754
|
children: [
|
|
11963
|
-
/* @__PURE__ */
|
|
11755
|
+
/* @__PURE__ */ jsx11(
|
|
11964
11756
|
"svg",
|
|
11965
11757
|
{
|
|
11966
11758
|
"data-canvas": "nodegraph-surface",
|
|
11967
11759
|
width: "100%",
|
|
11968
11760
|
height: "100%",
|
|
11969
11761
|
style: { position: "absolute", inset: 0, display: "block" },
|
|
11970
|
-
children: /* @__PURE__ */
|
|
11971
|
-
state.edges.map(({ edge, from, to }) => /* @__PURE__ */
|
|
11762
|
+
children: /* @__PURE__ */ jsxs10("g", { transform: `translate(${-scale.x * scale.zoom} ${-scale.y * scale.zoom}) scale(${scale.zoom})`, children: [
|
|
11763
|
+
state.edges.map(({ edge, from, to }) => /* @__PURE__ */ jsx11(
|
|
11972
11764
|
"path",
|
|
11973
11765
|
{
|
|
11974
11766
|
d: edgePath(from, to),
|
|
@@ -11979,8 +11771,8 @@ function NodeGraphPanelView({ controller }) {
|
|
|
11979
11771
|
},
|
|
11980
11772
|
edge.id
|
|
11981
11773
|
)),
|
|
11982
|
-
preview?.connection ? /* @__PURE__ */
|
|
11983
|
-
state.nodes.map((node) => /* @__PURE__ */
|
|
11774
|
+
preview?.connection ? /* @__PURE__ */ jsx11(PendingWire, { controller, preview, zoom: scale.zoom }) : null,
|
|
11775
|
+
state.nodes.map((node) => /* @__PURE__ */ jsx11(
|
|
11984
11776
|
NodeRect,
|
|
11985
11777
|
{
|
|
11986
11778
|
node,
|
|
@@ -11989,7 +11781,7 @@ function NodeGraphPanelView({ controller }) {
|
|
|
11989
11781
|
},
|
|
11990
11782
|
node.id
|
|
11991
11783
|
)),
|
|
11992
|
-
preview?.marquee ? /* @__PURE__ */
|
|
11784
|
+
preview?.marquee ? /* @__PURE__ */ jsx11(
|
|
11993
11785
|
"rect",
|
|
11994
11786
|
{
|
|
11995
11787
|
x: preview.marquee.x,
|
|
@@ -12004,15 +11796,15 @@ function NodeGraphPanelView({ controller }) {
|
|
|
12004
11796
|
] })
|
|
12005
11797
|
}
|
|
12006
11798
|
),
|
|
12007
|
-
preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */
|
|
11799
|
+
preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx11("div", { style: REASON, children: preview.connection.verdict.reason }) : null
|
|
12008
11800
|
]
|
|
12009
11801
|
}
|
|
12010
11802
|
),
|
|
12011
|
-
/* @__PURE__ */
|
|
11803
|
+
/* @__PURE__ */ jsx11(
|
|
12012
11804
|
StatusBar7,
|
|
12013
11805
|
{
|
|
12014
11806
|
left: `${total} node${total === 1 ? "" : "s"}`,
|
|
12015
|
-
right: /* @__PURE__ */
|
|
11807
|
+
right: /* @__PURE__ */ jsxs10("span", { className: "tabular-nums", children: [
|
|
12016
11808
|
Math.round(scale.zoom * 100),
|
|
12017
11809
|
"%"
|
|
12018
11810
|
] })
|
|
@@ -12030,7 +11822,7 @@ function PendingWire({
|
|
|
12030
11822
|
const from = controller.portPosition(connection.source.nodeId, connection.source.portId);
|
|
12031
11823
|
if (!from) return null;
|
|
12032
11824
|
const ok = connection.verdict.ok;
|
|
12033
|
-
return /* @__PURE__ */
|
|
11825
|
+
return /* @__PURE__ */ jsx11(
|
|
12034
11826
|
"path",
|
|
12035
11827
|
{
|
|
12036
11828
|
d: edgePath(from, connection.to),
|
|
@@ -12043,8 +11835,8 @@ function PendingWire({
|
|
|
12043
11835
|
}
|
|
12044
11836
|
function NodeRect({ node, selected, zoom }) {
|
|
12045
11837
|
const height = node.collapsed ? HEADER_H2 : node.height;
|
|
12046
|
-
return /* @__PURE__ */
|
|
12047
|
-
/* @__PURE__ */
|
|
11838
|
+
return /* @__PURE__ */ jsxs10("g", { opacity: node.disabled ? 0.45 : 1, children: [
|
|
11839
|
+
/* @__PURE__ */ jsx11(
|
|
12048
11840
|
"rect",
|
|
12049
11841
|
{
|
|
12050
11842
|
x: node.x,
|
|
@@ -12057,7 +11849,7 @@ function NodeRect({ node, selected, zoom }) {
|
|
|
12057
11849
|
strokeWidth: (selected ? 1.5 : 1) / zoom
|
|
12058
11850
|
}
|
|
12059
11851
|
),
|
|
12060
|
-
/* @__PURE__ */
|
|
11852
|
+
/* @__PURE__ */ jsx11(
|
|
12061
11853
|
"rect",
|
|
12062
11854
|
{
|
|
12063
11855
|
x: node.x,
|
|
@@ -12068,7 +11860,7 @@ function NodeRect({ node, selected, zoom }) {
|
|
|
12068
11860
|
fill: node.color ?? "var(--xeno-border)"
|
|
12069
11861
|
}
|
|
12070
11862
|
),
|
|
12071
|
-
/* @__PURE__ */
|
|
11863
|
+
/* @__PURE__ */ jsx11(
|
|
12072
11864
|
"text",
|
|
12073
11865
|
{
|
|
12074
11866
|
x: node.x + 8,
|
|
@@ -12079,8 +11871,8 @@ function NodeRect({ node, selected, zoom }) {
|
|
|
12079
11871
|
children: node.title
|
|
12080
11872
|
}
|
|
12081
11873
|
),
|
|
12082
|
-
node.collapsed ? null : /* @__PURE__ */
|
|
12083
|
-
node.inputs.map((port, i) => /* @__PURE__ */
|
|
11874
|
+
node.collapsed ? null : /* @__PURE__ */ jsxs10(Fragment7, { children: [
|
|
11875
|
+
node.inputs.map((port, i) => /* @__PURE__ */ jsx11(
|
|
12084
11876
|
Port,
|
|
12085
11877
|
{
|
|
12086
11878
|
x: node.x,
|
|
@@ -12091,7 +11883,7 @@ function NodeRect({ node, selected, zoom }) {
|
|
|
12091
11883
|
},
|
|
12092
11884
|
port.id
|
|
12093
11885
|
)),
|
|
12094
|
-
node.outputs.map((port, i) => /* @__PURE__ */
|
|
11886
|
+
node.outputs.map((port, i) => /* @__PURE__ */ jsx11(
|
|
12095
11887
|
Port,
|
|
12096
11888
|
{
|
|
12097
11889
|
x: node.x + node.width,
|
|
@@ -12112,8 +11904,8 @@ function Port({
|
|
|
12112
11904
|
align,
|
|
12113
11905
|
disabled
|
|
12114
11906
|
}) {
|
|
12115
|
-
return /* @__PURE__ */
|
|
12116
|
-
/* @__PURE__ */
|
|
11907
|
+
return /* @__PURE__ */ jsxs10("g", { opacity: disabled ? 0.4 : 1, children: [
|
|
11908
|
+
/* @__PURE__ */ jsx11(
|
|
12117
11909
|
"rect",
|
|
12118
11910
|
{
|
|
12119
11911
|
x: x - 3,
|
|
@@ -12125,7 +11917,7 @@ function Port({
|
|
|
12125
11917
|
strokeWidth: 0.5
|
|
12126
11918
|
}
|
|
12127
11919
|
),
|
|
12128
|
-
/* @__PURE__ */
|
|
11920
|
+
/* @__PURE__ */ jsx11(
|
|
12129
11921
|
"text",
|
|
12130
11922
|
{
|
|
12131
11923
|
x: align === "left" ? x + 8 : x - 8,
|
|
@@ -13399,9 +13191,9 @@ import {
|
|
|
13399
13191
|
import { computeWindow as computeWindow3 } from "@xenosystem/tree-core";
|
|
13400
13192
|
|
|
13401
13193
|
// src/edit/tree/react/icons.tsx
|
|
13402
|
-
import { Fragment as Fragment8, jsx as
|
|
13194
|
+
import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
13403
13195
|
function Svg({ children, size = 11 }) {
|
|
13404
|
-
return /* @__PURE__ */
|
|
13196
|
+
return /* @__PURE__ */ jsx12(
|
|
13405
13197
|
"svg",
|
|
13406
13198
|
{
|
|
13407
13199
|
width: size,
|
|
@@ -13418,84 +13210,84 @@ function Svg({ children, size = 11 }) {
|
|
|
13418
13210
|
);
|
|
13419
13211
|
}
|
|
13420
13212
|
function ChevronGlyph() {
|
|
13421
|
-
return /* @__PURE__ */
|
|
13213
|
+
return /* @__PURE__ */ jsx12(Svg, { size: 9, children: /* @__PURE__ */ jsx12("path", { d: "m9 18 6-6-6-6" }) });
|
|
13422
13214
|
}
|
|
13423
13215
|
function ExpandGlyph() {
|
|
13424
|
-
return /* @__PURE__ */
|
|
13425
|
-
/* @__PURE__ */
|
|
13426
|
-
/* @__PURE__ */
|
|
13427
|
-
/* @__PURE__ */
|
|
13428
|
-
/* @__PURE__ */
|
|
13429
|
-
/* @__PURE__ */
|
|
13430
|
-
/* @__PURE__ */
|
|
13431
|
-
/* @__PURE__ */
|
|
13432
|
-
/* @__PURE__ */
|
|
13216
|
+
return /* @__PURE__ */ jsxs11(Svg, { children: [
|
|
13217
|
+
/* @__PURE__ */ jsx12("path", { d: "M12 22v-6" }),
|
|
13218
|
+
/* @__PURE__ */ jsx12("path", { d: "M12 8V2" }),
|
|
13219
|
+
/* @__PURE__ */ jsx12("path", { d: "m9 5 3-3 3 3" }),
|
|
13220
|
+
/* @__PURE__ */ jsx12("path", { d: "m9 19 3 3 3-3" }),
|
|
13221
|
+
/* @__PURE__ */ jsx12("path", { d: "M4 12H2" }),
|
|
13222
|
+
/* @__PURE__ */ jsx12("path", { d: "M10 12H8" }),
|
|
13223
|
+
/* @__PURE__ */ jsx12("path", { d: "M16 12h-2" }),
|
|
13224
|
+
/* @__PURE__ */ jsx12("path", { d: "M22 12h-2" })
|
|
13433
13225
|
] });
|
|
13434
13226
|
}
|
|
13435
13227
|
function CollapseGlyph() {
|
|
13436
|
-
return /* @__PURE__ */
|
|
13437
|
-
/* @__PURE__ */
|
|
13438
|
-
/* @__PURE__ */
|
|
13439
|
-
/* @__PURE__ */
|
|
13440
|
-
/* @__PURE__ */
|
|
13441
|
-
/* @__PURE__ */
|
|
13442
|
-
/* @__PURE__ */
|
|
13228
|
+
return /* @__PURE__ */ jsxs11(Svg, { children: [
|
|
13229
|
+
/* @__PURE__ */ jsx12("path", { d: "M12 22v-6" }),
|
|
13230
|
+
/* @__PURE__ */ jsx12("path", { d: "M12 8V2" }),
|
|
13231
|
+
/* @__PURE__ */ jsx12("path", { d: "m9 13 3 3 3-3" }),
|
|
13232
|
+
/* @__PURE__ */ jsx12("path", { d: "m9 11 3-3 3 3" }),
|
|
13233
|
+
/* @__PURE__ */ jsx12("path", { d: "M4 12H2" }),
|
|
13234
|
+
/* @__PURE__ */ jsx12("path", { d: "M22 12h-2" })
|
|
13443
13235
|
] });
|
|
13444
13236
|
}
|
|
13445
13237
|
function RefreshGlyph() {
|
|
13446
|
-
return /* @__PURE__ */
|
|
13447
|
-
/* @__PURE__ */
|
|
13448
|
-
/* @__PURE__ */
|
|
13449
|
-
/* @__PURE__ */
|
|
13450
|
-
/* @__PURE__ */
|
|
13238
|
+
return /* @__PURE__ */ jsxs11(Svg, { children: [
|
|
13239
|
+
/* @__PURE__ */ jsx12("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
|
|
13240
|
+
/* @__PURE__ */ jsx12("path", { d: "M3 3v5h5" }),
|
|
13241
|
+
/* @__PURE__ */ jsx12("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
|
|
13242
|
+
/* @__PURE__ */ jsx12("path", { d: "M16 16h5v5" })
|
|
13451
13243
|
] });
|
|
13452
13244
|
}
|
|
13453
13245
|
var PATHS = {
|
|
13454
|
-
folder: /* @__PURE__ */
|
|
13455
|
-
file: /* @__PURE__ */
|
|
13456
|
-
/* @__PURE__ */
|
|
13457
|
-
/* @__PURE__ */
|
|
13246
|
+
folder: /* @__PURE__ */ jsx12("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }),
|
|
13247
|
+
file: /* @__PURE__ */ jsxs11(Fragment8, { children: [
|
|
13248
|
+
/* @__PURE__ */ jsx12("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
|
|
13249
|
+
/* @__PURE__ */ jsx12("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
|
|
13458
13250
|
] }),
|
|
13459
|
-
"folder-tree": /* @__PURE__ */
|
|
13460
|
-
/* @__PURE__ */
|
|
13461
|
-
/* @__PURE__ */
|
|
13462
|
-
/* @__PURE__ */
|
|
13463
|
-
/* @__PURE__ */
|
|
13251
|
+
"folder-tree": /* @__PURE__ */ jsxs11(Fragment8, { children: [
|
|
13252
|
+
/* @__PURE__ */ jsx12("path", { d: "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" }),
|
|
13253
|
+
/* @__PURE__ */ jsx12("path", { d: "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" }),
|
|
13254
|
+
/* @__PURE__ */ jsx12("path", { d: "M3 5a2 2 0 0 0 2 2h3" }),
|
|
13255
|
+
/* @__PURE__ */ jsx12("path", { d: "M3 3v13a2 2 0 0 0 2 2h3" })
|
|
13464
13256
|
] }),
|
|
13465
|
-
box: /* @__PURE__ */
|
|
13466
|
-
/* @__PURE__ */
|
|
13467
|
-
/* @__PURE__ */
|
|
13468
|
-
/* @__PURE__ */
|
|
13257
|
+
box: /* @__PURE__ */ jsxs11(Fragment8, { children: [
|
|
13258
|
+
/* @__PURE__ */ jsx12("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
|
|
13259
|
+
/* @__PURE__ */ jsx12("path", { d: "m3.3 7 8.7 5 8.7-5" }),
|
|
13260
|
+
/* @__PURE__ */ jsx12("path", { d: "M12 22V12" })
|
|
13469
13261
|
] }),
|
|
13470
|
-
component: /* @__PURE__ */
|
|
13471
|
-
"file-text": /* @__PURE__ */
|
|
13472
|
-
/* @__PURE__ */
|
|
13473
|
-
/* @__PURE__ */
|
|
13474
|
-
/* @__PURE__ */
|
|
13262
|
+
component: /* @__PURE__ */ jsx12("path", { d: "m12 2 4 4-4 4-4-4Zm0 12 4 4-4 4-4-4ZM2 12l4-4 4 4-4 4Zm12 0 4-4 4 4-4 4Z" }),
|
|
13263
|
+
"file-text": /* @__PURE__ */ jsxs11(Fragment8, { children: [
|
|
13264
|
+
/* @__PURE__ */ jsx12("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
|
|
13265
|
+
/* @__PURE__ */ jsx12("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
|
|
13266
|
+
/* @__PURE__ */ jsx12("path", { d: "M8 13h8M8 17h5" })
|
|
13475
13267
|
] }),
|
|
13476
|
-
heading: /* @__PURE__ */
|
|
13477
|
-
bot: /* @__PURE__ */
|
|
13478
|
-
/* @__PURE__ */
|
|
13479
|
-
/* @__PURE__ */
|
|
13268
|
+
heading: /* @__PURE__ */ jsx12(Fragment8, { children: /* @__PURE__ */ jsx12("path", { d: "M6 4v16M18 4v16M6 12h12" }) }),
|
|
13269
|
+
bot: /* @__PURE__ */ jsxs11(Fragment8, { children: [
|
|
13270
|
+
/* @__PURE__ */ jsx12("rect", { x: "3", y: "8", width: "18", height: "12", rx: "2" }),
|
|
13271
|
+
/* @__PURE__ */ jsx12("path", { d: "M12 4v4M8 14h.01M16 14h.01" })
|
|
13480
13272
|
] }),
|
|
13481
|
-
link: /* @__PURE__ */
|
|
13482
|
-
/* @__PURE__ */
|
|
13483
|
-
/* @__PURE__ */
|
|
13273
|
+
link: /* @__PURE__ */ jsxs11(Fragment8, { children: [
|
|
13274
|
+
/* @__PURE__ */ jsx12("path", { d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.8 1.7" }),
|
|
13275
|
+
/* @__PURE__ */ jsx12("path", { d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.8-1.7" })
|
|
13484
13276
|
] }),
|
|
13485
|
-
"link-2-off": /* @__PURE__ */
|
|
13486
|
-
/* @__PURE__ */
|
|
13487
|
-
/* @__PURE__ */
|
|
13488
|
-
/* @__PURE__ */
|
|
13489
|
-
/* @__PURE__ */
|
|
13277
|
+
"link-2-off": /* @__PURE__ */ jsxs11(Fragment8, { children: [
|
|
13278
|
+
/* @__PURE__ */ jsx12("path", { d: "M9 17H7A5 5 0 0 1 7 7" }),
|
|
13279
|
+
/* @__PURE__ */ jsx12("path", { d: "M15 7h2a5 5 0 0 1 4 8" }),
|
|
13280
|
+
/* @__PURE__ */ jsx12("path", { d: "M8 12h4" }),
|
|
13281
|
+
/* @__PURE__ */ jsx12("path", { d: "m2 2 20 20" })
|
|
13490
13282
|
] }),
|
|
13491
|
-
"circle-dot": /* @__PURE__ */
|
|
13283
|
+
"circle-dot": /* @__PURE__ */ jsx12("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" })
|
|
13492
13284
|
};
|
|
13493
13285
|
function TreeIcon({ name, size = 11 }) {
|
|
13494
|
-
return /* @__PURE__ */
|
|
13286
|
+
return /* @__PURE__ */ jsx12(Svg, { size, children: PATHS[name] ?? PATHS["circle-dot"] });
|
|
13495
13287
|
}
|
|
13496
13288
|
|
|
13497
13289
|
// src/edit/tree/react/TreePanelView.tsx
|
|
13498
|
-
import { Fragment as Fragment9, jsx as
|
|
13290
|
+
import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
13499
13291
|
function TreePanelView({
|
|
13500
13292
|
controller,
|
|
13501
13293
|
rowHeight = 24,
|
|
@@ -13527,13 +13319,13 @@ function TreePanelView({
|
|
|
13527
13319
|
const sourceState = source?.sourceState ?? "idle";
|
|
13528
13320
|
const body = (() => {
|
|
13529
13321
|
if (!source || sourceState === "idle") {
|
|
13530
|
-
return /* @__PURE__ */
|
|
13322
|
+
return /* @__PURE__ */ jsx13(EmptyState8, { title: "No source", hint: emptyHint ?? "Connect a source to browse it." });
|
|
13531
13323
|
}
|
|
13532
13324
|
if (sourceState === "loading" && state.rows.length === 0) {
|
|
13533
|
-
return /* @__PURE__ */
|
|
13325
|
+
return /* @__PURE__ */ jsx13(LoadingState, { label: source.sourceMessage ?? "Loading\u2026" });
|
|
13534
13326
|
}
|
|
13535
13327
|
if (sourceState === "error" || sourceState === "denied") {
|
|
13536
|
-
return /* @__PURE__ */
|
|
13328
|
+
return /* @__PURE__ */ jsx13(
|
|
13537
13329
|
ErrorState,
|
|
13538
13330
|
{
|
|
13539
13331
|
title: sourceState === "denied" ? "Access not granted" : "Could not read this source",
|
|
@@ -13544,7 +13336,7 @@ function TreePanelView({
|
|
|
13544
13336
|
);
|
|
13545
13337
|
}
|
|
13546
13338
|
if (state.rows.length === 0) {
|
|
13547
|
-
return state.filter ? /* @__PURE__ */
|
|
13339
|
+
return state.filter ? /* @__PURE__ */ jsx13(EmptyState8, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx13(
|
|
13548
13340
|
EmptyState8,
|
|
13549
13341
|
{
|
|
13550
13342
|
title: "Nothing here",
|
|
@@ -13560,7 +13352,7 @@ function TreePanelView({
|
|
|
13560
13352
|
overscan
|
|
13561
13353
|
});
|
|
13562
13354
|
const slice = state.rows.slice(window2.startIndex, window2.endIndex);
|
|
13563
|
-
return /* @__PURE__ */
|
|
13355
|
+
return /* @__PURE__ */ jsx13(ScrollArea6, { children: /* @__PURE__ */ jsx13(
|
|
13564
13356
|
"div",
|
|
13565
13357
|
{
|
|
13566
13358
|
ref: scrollRef,
|
|
@@ -13574,7 +13366,7 @@ function TreePanelView({
|
|
|
13574
13366
|
e.preventDefault();
|
|
13575
13367
|
}
|
|
13576
13368
|
},
|
|
13577
|
-
children: /* @__PURE__ */
|
|
13369
|
+
children: /* @__PURE__ */ jsx13("div", { style: { height: window2.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx13("div", { style: { transform: `translateY(${window2.offsetTop}px)` }, children: slice.map((row2) => /* @__PURE__ */ jsx13(
|
|
13578
13370
|
TreeRowView,
|
|
13579
13371
|
{
|
|
13580
13372
|
row: row2,
|
|
@@ -13590,11 +13382,11 @@ function TreePanelView({
|
|
|
13590
13382
|
}
|
|
13591
13383
|
) });
|
|
13592
13384
|
})();
|
|
13593
|
-
return /* @__PURE__ */
|
|
13594
|
-
/* @__PURE__ */
|
|
13385
|
+
return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
|
|
13386
|
+
/* @__PURE__ */ jsx13(
|
|
13595
13387
|
Toolbar7,
|
|
13596
13388
|
{
|
|
13597
|
-
left: showSearch ? /* @__PURE__ */
|
|
13389
|
+
left: showSearch ? /* @__PURE__ */ jsx13(
|
|
13598
13390
|
SearchField5,
|
|
13599
13391
|
{
|
|
13600
13392
|
value: state.filter,
|
|
@@ -13602,22 +13394,22 @@ function TreePanelView({
|
|
|
13602
13394
|
placeholder: "Filter\u2026"
|
|
13603
13395
|
}
|
|
13604
13396
|
) : void 0,
|
|
13605
|
-
right: /* @__PURE__ */
|
|
13606
|
-
/* @__PURE__ */
|
|
13607
|
-
/* @__PURE__ */
|
|
13397
|
+
right: /* @__PURE__ */ jsxs12(ToolbarGroup5, { end: true, children: [
|
|
13398
|
+
/* @__PURE__ */ jsx13(IconButton7, { icon: /* @__PURE__ */ jsx13(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
|
|
13399
|
+
/* @__PURE__ */ jsx13(
|
|
13608
13400
|
IconButton7,
|
|
13609
13401
|
{
|
|
13610
|
-
icon: /* @__PURE__ */
|
|
13402
|
+
icon: /* @__PURE__ */ jsx13(CollapseGlyph, {}),
|
|
13611
13403
|
label: "Collapse all",
|
|
13612
13404
|
onClick: () => controller.collapseAll()
|
|
13613
13405
|
}
|
|
13614
13406
|
),
|
|
13615
|
-
/* @__PURE__ */
|
|
13407
|
+
/* @__PURE__ */ jsx13(IconButton7, { icon: /* @__PURE__ */ jsx13(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
|
|
13616
13408
|
] })
|
|
13617
13409
|
}
|
|
13618
13410
|
),
|
|
13619
13411
|
body,
|
|
13620
|
-
/* @__PURE__ */
|
|
13412
|
+
/* @__PURE__ */ jsx13(
|
|
13621
13413
|
StatusBar8,
|
|
13622
13414
|
{
|
|
13623
13415
|
left: `${state.rows.length} item${state.rows.length === 1 ? "" : "s"}`,
|
|
@@ -13639,7 +13431,7 @@ function TreeRowView({
|
|
|
13639
13431
|
const selected = state.selection.includes(row2.id);
|
|
13640
13432
|
const renaming = state.renaming?.id === row2.id ? state.renaming : null;
|
|
13641
13433
|
const drop = state.drag?.targetId === row2.id ? state.drag : null;
|
|
13642
|
-
const twisty = row2.container ? /* @__PURE__ */
|
|
13434
|
+
const twisty = row2.container ? /* @__PURE__ */ jsx13(
|
|
13643
13435
|
"span",
|
|
13644
13436
|
{
|
|
13645
13437
|
role: "button",
|
|
@@ -13659,13 +13451,13 @@ function TreeRowView({
|
|
|
13659
13451
|
transition: "transform 80ms ease",
|
|
13660
13452
|
opacity: 0.7
|
|
13661
13453
|
},
|
|
13662
|
-
children: /* @__PURE__ */
|
|
13454
|
+
children: /* @__PURE__ */ jsx13(ChevronGlyph, {})
|
|
13663
13455
|
}
|
|
13664
13456
|
) : (
|
|
13665
13457
|
// A leaf still reserves the twisty column, so labels stay in ONE column across mixed rows.
|
|
13666
|
-
/* @__PURE__ */
|
|
13458
|
+
/* @__PURE__ */ jsx13("span", { style: { width: 12, flex: "0 0 auto" } })
|
|
13667
13459
|
);
|
|
13668
|
-
return /* @__PURE__ */
|
|
13460
|
+
return /* @__PURE__ */ jsx13(
|
|
13669
13461
|
"div",
|
|
13670
13462
|
{
|
|
13671
13463
|
style: {
|
|
@@ -13676,7 +13468,7 @@ function TreeRowView({
|
|
|
13676
13468
|
boxShadow: drop?.position === "into" ? "inset 0 0 0 1px var(--xeno-active)" : drop?.position === "before" ? "inset 0 1px 0 0 var(--xeno-active)" : drop?.position === "after" ? "inset 0 -1px 0 0 var(--xeno-active)" : void 0
|
|
13677
13469
|
},
|
|
13678
13470
|
title: drop?.reason,
|
|
13679
|
-
children: /* @__PURE__ */
|
|
13471
|
+
children: /* @__PURE__ */ jsx13(
|
|
13680
13472
|
Row4,
|
|
13681
13473
|
{
|
|
13682
13474
|
role: "treeitem",
|
|
@@ -13712,11 +13504,11 @@ function TreeRowView({
|
|
|
13712
13504
|
onPointerUp: () => {
|
|
13713
13505
|
if (state.drag) controller.endDrag();
|
|
13714
13506
|
},
|
|
13715
|
-
icon: /* @__PURE__ */
|
|
13507
|
+
icon: /* @__PURE__ */ jsxs12(Fragment9, { children: [
|
|
13716
13508
|
twisty,
|
|
13717
|
-
/* @__PURE__ */
|
|
13509
|
+
/* @__PURE__ */ jsx13(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
|
|
13718
13510
|
] }),
|
|
13719
|
-
label: renaming ? /* @__PURE__ */
|
|
13511
|
+
label: renaming ? /* @__PURE__ */ jsx13(
|
|
13720
13512
|
"input",
|
|
13721
13513
|
{
|
|
13722
13514
|
autoFocus: true,
|
|
@@ -13741,19 +13533,19 @@ function TreeRowView({
|
|
|
13741
13533
|
}
|
|
13742
13534
|
}
|
|
13743
13535
|
) : node.label,
|
|
13744
|
-
meta: /* @__PURE__ */
|
|
13745
|
-
trailing: /* @__PURE__ */
|
|
13746
|
-
columns?.map((columnId) => /* @__PURE__ */
|
|
13747
|
-
node.glyphs?.map((glyph) => /* @__PURE__ */
|
|
13536
|
+
meta: /* @__PURE__ */ jsx13(ChildStateChip, { row: row2, controller }),
|
|
13537
|
+
trailing: /* @__PURE__ */ jsxs12(Fragment9, { children: [
|
|
13538
|
+
columns?.map((columnId) => /* @__PURE__ */ jsx13("span", { style: { opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: node.columns?.[columnId] ?? "" }, columnId)),
|
|
13539
|
+
node.glyphs?.map((glyph) => /* @__PURE__ */ jsx13("span", { title: glyph.title, style: { display: "flex", opacity: 0.7 }, children: /* @__PURE__ */ jsx13(NodeIcon, { icon: glyph.icon }) }, glyph.id)),
|
|
13748
13540
|
node.badges?.map((badge) => (
|
|
13749
13541
|
// Opaque: the host formatted the text, the panel only places it.
|
|
13750
|
-
/* @__PURE__ */
|
|
13542
|
+
/* @__PURE__ */ jsx13(Badge7, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
|
|
13751
13543
|
)),
|
|
13752
|
-
node.actions?.map((action) => /* @__PURE__ */
|
|
13544
|
+
node.actions?.map((action) => /* @__PURE__ */ jsx13(
|
|
13753
13545
|
IconButton7,
|
|
13754
13546
|
{
|
|
13755
13547
|
size: "sm",
|
|
13756
|
-
icon: /* @__PURE__ */
|
|
13548
|
+
icon: /* @__PURE__ */ jsx13(NodeIcon, { icon: action.icon }),
|
|
13757
13549
|
label: action.label,
|
|
13758
13550
|
disabled: action.disabled,
|
|
13759
13551
|
onClick: () => controller.runAction(row2.id, action.id)
|
|
@@ -13772,14 +13564,14 @@ function ChildStateChip({
|
|
|
13772
13564
|
}) {
|
|
13773
13565
|
if (!row2.container) return null;
|
|
13774
13566
|
if (row2.childState === "loading") {
|
|
13775
|
-
return /* @__PURE__ */
|
|
13567
|
+
return /* @__PURE__ */ jsx13("span", { style: { opacity: 0.5, fontSize: 9 }, children: "loading\u2026" });
|
|
13776
13568
|
}
|
|
13777
13569
|
if (row2.childState === "error") {
|
|
13778
13570
|
const error = row2.node.error;
|
|
13779
|
-
return /* @__PURE__ */
|
|
13571
|
+
return /* @__PURE__ */ jsx13(Badge7, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
|
|
13780
13572
|
}
|
|
13781
13573
|
if (row2.node.hasMore && row2.expanded) {
|
|
13782
|
-
return /* @__PURE__ */
|
|
13574
|
+
return /* @__PURE__ */ jsx13(
|
|
13783
13575
|
"span",
|
|
13784
13576
|
{
|
|
13785
13577
|
role: "button",
|
|
@@ -13793,18 +13585,18 @@ function ChildStateChip({
|
|
|
13793
13585
|
);
|
|
13794
13586
|
}
|
|
13795
13587
|
if (row2.node.truncatedAt !== void 0) {
|
|
13796
|
-
return /* @__PURE__ */
|
|
13588
|
+
return /* @__PURE__ */ jsx13(Badge7, { tone: "warning", children: `first ${row2.node.truncatedAt}` });
|
|
13797
13589
|
}
|
|
13798
13590
|
if (row2.expanded && isEmptyContainer(row2.node)) {
|
|
13799
|
-
return /* @__PURE__ */
|
|
13591
|
+
return /* @__PURE__ */ jsx13("span", { style: { opacity: 0.4, fontSize: 9 }, children: "empty" });
|
|
13800
13592
|
}
|
|
13801
13593
|
return null;
|
|
13802
13594
|
}
|
|
13803
13595
|
function NodeIcon({ icon }) {
|
|
13804
13596
|
if (icon.kind === "text") {
|
|
13805
|
-
return /* @__PURE__ */
|
|
13597
|
+
return /* @__PURE__ */ jsx13("span", { style: { fontSize: 11, lineHeight: 1, display: "flex", alignItems: "center" }, children: icon.value });
|
|
13806
13598
|
}
|
|
13807
|
-
return /* @__PURE__ */
|
|
13599
|
+
return /* @__PURE__ */ jsx13(TreeIcon, { name: icon.name });
|
|
13808
13600
|
}
|
|
13809
13601
|
|
|
13810
13602
|
// src/edit/tree/panel.ts
|