@arcanewizards/sigil 0.1.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-4PMRDURG.js +66 -0
- package/dist/chunk-5DRI7C4U.cjs +66 -0
- package/dist/chunk-A5LYYZER.cjs +103 -0
- package/dist/chunk-BIY5HAXP.js +125 -0
- package/dist/chunk-CAYKPJIX.cjs +10 -0
- package/dist/chunk-EJNNLQ2S.js +72 -0
- package/dist/chunk-FHXT3DAL.js +103 -0
- package/dist/chunk-H4U4Z4GM.js +66 -0
- package/dist/chunk-LSHKAVON.js +10 -0
- package/dist/chunk-MXDDIFIO.cjs +767 -0
- package/dist/chunk-PEARNJ5G.cjs +125 -0
- package/dist/chunk-RI33QVOD.cjs +66 -0
- package/dist/chunk-VZ4A6RRT.cjs +72 -0
- package/dist/chunk-XAK7WC3D.js +767 -0
- package/dist/frontend/appearance.cjs +88 -0
- package/dist/frontend/appearance.d.cts +11 -0
- package/dist/frontend/appearance.d.ts +11 -0
- package/dist/frontend/appearance.js +88 -0
- package/dist/frontend/context.cjs +16 -0
- package/dist/frontend/context.d.cts +32 -0
- package/dist/frontend/context.d.ts +32 -0
- package/dist/frontend/context.js +16 -0
- package/dist/frontend/controls/index.cjs +49 -0
- package/dist/frontend/controls/index.d.cts +168 -0
- package/dist/frontend/controls/index.d.ts +168 -0
- package/dist/frontend/controls/index.js +49 -0
- package/dist/frontend/dialogs.cjs +17 -0
- package/dist/frontend/dialogs.d.cts +36 -0
- package/dist/frontend/dialogs.d.ts +36 -0
- package/dist/frontend/dialogs.js +17 -0
- package/dist/frontend/input.cjs +8 -0
- package/dist/frontend/input.d.cts +33 -0
- package/dist/frontend/input.d.ts +33 -0
- package/dist/frontend/input.js +8 -0
- package/dist/frontend/preferences.cjs +54 -0
- package/dist/frontend/preferences.d.cts +14 -0
- package/dist/frontend/preferences.d.ts +14 -0
- package/dist/frontend/preferences.js +54 -0
- package/dist/frontend/styles/base.css +321 -0
- package/dist/frontend/styles/sigil.css +785 -0
- package/dist/frontend/styles/theme.css +625 -0
- package/dist/frontend/styling.cjs +18 -0
- package/dist/frontend/styling.d.cts +32 -0
- package/dist/frontend/styling.d.ts +32 -0
- package/dist/frontend/styling.js +18 -0
- package/dist/frontend/toolbars.cjs +18 -0
- package/dist/frontend/toolbars.d.cts +11 -0
- package/dist/frontend/toolbars.d.ts +11 -0
- package/dist/frontend/toolbars.js +18 -0
- package/dist/frontend/tooltip.cjs +10 -0
- package/dist/frontend/tooltip.d.cts +16 -0
- package/dist/frontend/tooltip.d.ts +16 -0
- package/dist/frontend/tooltip.js +10 -0
- package/dist/frontend.cjs +359 -0
- package/dist/frontend.d.cts +90 -0
- package/dist/frontend.d.ts +90 -0
- package/dist/frontend.js +359 -0
- package/dist/index.cjs +492 -0
- package/dist/index.d.cts +134 -0
- package/dist/index.d.ts +134 -0
- package/dist/index.js +492 -0
- package/dist/proto-B-WcMUOE.d.cts +33 -0
- package/dist/proto-kGDF-yWB.d.ts +33 -0
- package/dist/types-X8O95zmC.d.cts +23 -0
- package/dist/types-X8O95zmC.d.ts +23 -0
- package/package.json +123 -0
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
// src/frontend/input.ts
|
|
2
|
+
import { useMemo, useState } from "react";
|
|
3
|
+
var usePressable = (click) => {
|
|
4
|
+
const [touching, setTouching] = useState(false);
|
|
5
|
+
return {
|
|
6
|
+
touching,
|
|
7
|
+
handlers: {
|
|
8
|
+
onClick: click,
|
|
9
|
+
onTouchStart: () => {
|
|
10
|
+
setTouching(true);
|
|
11
|
+
},
|
|
12
|
+
onTouchMove: () => {
|
|
13
|
+
setTouching(false);
|
|
14
|
+
},
|
|
15
|
+
onTouchEnd: (event) => {
|
|
16
|
+
if (touching) {
|
|
17
|
+
event.preventDefault();
|
|
18
|
+
setTouching(false);
|
|
19
|
+
click(event);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
var useLongPressable = ({
|
|
26
|
+
onPress,
|
|
27
|
+
onRelease
|
|
28
|
+
}) => {
|
|
29
|
+
const [touching, setTouching] = useState(false);
|
|
30
|
+
return useMemo(
|
|
31
|
+
() => ({
|
|
32
|
+
touching,
|
|
33
|
+
handlers: {
|
|
34
|
+
onTouchStart: () => {
|
|
35
|
+
setTouching(true);
|
|
36
|
+
onPress();
|
|
37
|
+
},
|
|
38
|
+
onMouseDown: () => {
|
|
39
|
+
setTouching(true);
|
|
40
|
+
onPress();
|
|
41
|
+
},
|
|
42
|
+
onMouseUp: () => {
|
|
43
|
+
setTouching(false);
|
|
44
|
+
onRelease();
|
|
45
|
+
},
|
|
46
|
+
onTouchMove: () => {
|
|
47
|
+
setTouching(false);
|
|
48
|
+
onRelease();
|
|
49
|
+
},
|
|
50
|
+
onTouchEnd: (event) => {
|
|
51
|
+
if (touching) {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
setTouching(false);
|
|
54
|
+
onRelease();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}),
|
|
59
|
+
[touching, onRelease, onPress]
|
|
60
|
+
);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export {
|
|
64
|
+
usePressable,
|
|
65
|
+
useLongPressable
|
|
66
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/frontend/styling.ts
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
var _zod = require('zod');
|
|
4
|
+
var SIGIL_COLOR = _zod.z.enum([
|
|
5
|
+
"purple",
|
|
6
|
+
"blue",
|
|
7
|
+
"teal",
|
|
8
|
+
"red",
|
|
9
|
+
"green",
|
|
10
|
+
"yellow",
|
|
11
|
+
"brown",
|
|
12
|
+
"orange",
|
|
13
|
+
"gray"
|
|
14
|
+
]);
|
|
15
|
+
var sigilColorUsage = (color) => ({
|
|
16
|
+
text: `var(--sigil-usage-${color}-text)`,
|
|
17
|
+
foreground: `var(--sigil-usage-${color}-foreground)`,
|
|
18
|
+
background: `var(--sigil-usage-${color}-background)`,
|
|
19
|
+
border: `var(--sigil-usage-${color}-border)`,
|
|
20
|
+
dragBorder: `var(--sigil-usage-${color}-drag-border)`,
|
|
21
|
+
selectedBackground: `var(--sigil-usage-${color}-selected-background)`,
|
|
22
|
+
selectedBorder: `var(--sigil-usage-${color}-selected-border)`,
|
|
23
|
+
selectedText: `var(--sigil-usage-${color}-selected-text)`,
|
|
24
|
+
dimmedBackground: `var(--sigil-usage-${color}-dimmed-background)`,
|
|
25
|
+
dimmedBorder: `var(--sigil-usage-${color}-dimmed-border)`,
|
|
26
|
+
gradientLight: `var(--sigil-usage-${color}-gradient-light)`,
|
|
27
|
+
gradientDark: `var(--sigil-usage-${color}-gradient-dark)`
|
|
28
|
+
});
|
|
29
|
+
var cssSigilColorUsageVariables = (prefix, usage) => cssVariables({
|
|
30
|
+
[`--${prefix}-text`]: usage.text,
|
|
31
|
+
[`--${prefix}-foreground`]: usage.foreground,
|
|
32
|
+
[`--${prefix}-background`]: usage.background,
|
|
33
|
+
[`--${prefix}-border`]: usage.border,
|
|
34
|
+
[`--${prefix}-drag-border`]: usage.dragBorder,
|
|
35
|
+
[`--${prefix}-selected-background`]: usage.selectedBackground,
|
|
36
|
+
[`--${prefix}-selected-border`]: usage.selectedBorder,
|
|
37
|
+
[`--${prefix}-selected-text`]: usage.selectedText,
|
|
38
|
+
[`--${prefix}-dimmed-background`]: usage.dimmedBackground,
|
|
39
|
+
[`--${prefix}-dimmed-border`]: usage.dimmedBorder,
|
|
40
|
+
[`--${prefix}-gradient-light`]: usage.gradientLight,
|
|
41
|
+
[`--${prefix}-gradient-dark`]: usage.gradientDark
|
|
42
|
+
});
|
|
43
|
+
var cssHintColorVariables = (color) => cssSigilColorUsageVariables(`sigil-usage-hint`, sigilColorUsage(color));
|
|
44
|
+
var useRootHintVariables = (color) => {
|
|
45
|
+
_react.useEffect.call(void 0, () => {
|
|
46
|
+
const root = document.querySelector(".arcane-theme-root");
|
|
47
|
+
if (!root) return;
|
|
48
|
+
Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
|
|
49
|
+
root.style.setProperty(key, value);
|
|
50
|
+
});
|
|
51
|
+
}, [color]);
|
|
52
|
+
};
|
|
53
|
+
var cssVariables = (variables) => variables;
|
|
54
|
+
function cnd(condition, truthyClassName, falseyClassName) {
|
|
55
|
+
return condition ? truthyClassName : falseyClassName;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
exports.SIGIL_COLOR = SIGIL_COLOR; exports.sigilColorUsage = sigilColorUsage; exports.cssSigilColorUsageVariables = cssSigilColorUsageVariables; exports.cssHintColorVariables = cssHintColorVariables; exports.useRootHintVariables = useRootHintVariables; exports.cssVariables = cssVariables; exports.cnd = cnd;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/frontend/toolbars.tsx
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
var _util = require('@arcanejs/toolkit-frontend/util');
|
|
4
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
5
|
+
var ToolbarWrapper = _react.forwardRef.call(void 0,
|
|
6
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
7
|
+
"div",
|
|
8
|
+
{
|
|
9
|
+
...props,
|
|
10
|
+
ref,
|
|
11
|
+
className: _util.cn.call(void 0,
|
|
12
|
+
"z-sigil-toolbar w-full bg-sigil-bg-dark shadow-sigil-box",
|
|
13
|
+
className
|
|
14
|
+
)
|
|
15
|
+
}
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
ToolbarWrapper.displayName = "ToolbarWrapper";
|
|
19
|
+
var ToolbarRow = _react.forwardRef.call(void 0,
|
|
20
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
...props,
|
|
24
|
+
ref,
|
|
25
|
+
className: _util.cn.call(void 0,
|
|
26
|
+
`
|
|
27
|
+
flex items-center gap-sigil-toolbar-gap border-b border-sigil-border
|
|
28
|
+
p-sigil-toolbar-gap
|
|
29
|
+
`,
|
|
30
|
+
className
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
)
|
|
34
|
+
);
|
|
35
|
+
ToolbarRow.displayName = "ToolbarRow";
|
|
36
|
+
var ToolbarRowTall = _react.forwardRef.call(void 0,
|
|
37
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
38
|
+
ToolbarRow,
|
|
39
|
+
{
|
|
40
|
+
...props,
|
|
41
|
+
ref,
|
|
42
|
+
className: _util.cn.call(void 0, "px-sigil-toolbar-gap py-sigil-toolbar-padding", className)
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
);
|
|
46
|
+
ToolbarRowTall.displayName = "ToolbarRowTall";
|
|
47
|
+
var ToolbarSegment = _react.forwardRef.call(void 0,
|
|
48
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
49
|
+
"div",
|
|
50
|
+
{
|
|
51
|
+
...props,
|
|
52
|
+
ref,
|
|
53
|
+
className: _util.cn.call(void 0, "flex grow basis-0 items-center", className)
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
);
|
|
57
|
+
ToolbarSegment.displayName = "ToolbarSegment";
|
|
58
|
+
var ToolbarDivider = _react.forwardRef.call(void 0,
|
|
59
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
...props,
|
|
63
|
+
ref,
|
|
64
|
+
className: _util.cn.call(void 0,
|
|
65
|
+
"relative h-sigil-toolbar-divider w-px bg-sigil-border",
|
|
66
|
+
className
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
);
|
|
71
|
+
ToolbarDivider.displayName = "ToolbarDivider";
|
|
72
|
+
var ToolbarSpacer = _react.forwardRef.call(void 0,
|
|
73
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
74
|
+
ToolbarDivider,
|
|
75
|
+
{
|
|
76
|
+
...props,
|
|
77
|
+
ref,
|
|
78
|
+
className: _util.cn.call(void 0, "mx-sigil-toolbar-gap", className)
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
);
|
|
82
|
+
ToolbarSpacer.displayName = "ToolbarSpacer";
|
|
83
|
+
var ToolbarGrow = _react.forwardRef.call(void 0,
|
|
84
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
...props,
|
|
88
|
+
ref,
|
|
89
|
+
className: _util.cn.call(void 0, "flex grow items-center gap-sigil-toolbar-gap", className)
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
);
|
|
93
|
+
ToolbarGrow.displayName = "ToolbarGrow";
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
exports.ToolbarWrapper = ToolbarWrapper; exports.ToolbarRow = ToolbarRow; exports.ToolbarRowTall = ToolbarRowTall; exports.ToolbarSegment = ToolbarSegment; exports.ToolbarDivider = ToolbarDivider; exports.ToolbarSpacer = ToolbarSpacer; exports.ToolbarGrow = ToolbarGrow;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
// src/frontend/tooltip.tsx
|
|
2
|
+
import { Tooltip } from "radix-ui";
|
|
3
|
+
import {
|
|
4
|
+
createContext,
|
|
5
|
+
forwardRef,
|
|
6
|
+
useContext,
|
|
7
|
+
useState
|
|
8
|
+
} from "react";
|
|
9
|
+
import { cn } from "@arcanejs/toolkit-frontend/util";
|
|
10
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
12
|
+
Tooltip.Content,
|
|
13
|
+
{
|
|
14
|
+
...props,
|
|
15
|
+
ref,
|
|
16
|
+
className: cn(
|
|
17
|
+
`
|
|
18
|
+
relative z-sigil-tooltip rounded-sigil-control
|
|
19
|
+
bg-sigil-usage-hint-background px-1 py-0.5 leading-[1.5]
|
|
20
|
+
text-sigil-usage-hint-text shadow-sigil-box
|
|
21
|
+
`,
|
|
22
|
+
className
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
));
|
|
26
|
+
Content.displayName = "Content";
|
|
27
|
+
var Arrow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
28
|
+
Tooltip.Arrow,
|
|
29
|
+
{
|
|
30
|
+
...props,
|
|
31
|
+
ref,
|
|
32
|
+
className: cn(
|
|
33
|
+
"fill-sigil-usage-hint-background drop-shadow-sigil-tooltip-arrow",
|
|
34
|
+
className
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
));
|
|
38
|
+
Arrow.displayName = "Arrow";
|
|
39
|
+
var TooltipBoundaryContext = createContext(null);
|
|
40
|
+
var TooltipBoundary = ({
|
|
41
|
+
children,
|
|
42
|
+
...props
|
|
43
|
+
}) => {
|
|
44
|
+
const [ref, setRef] = useState(null);
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
TooltipBoundaryContext.Provider,
|
|
47
|
+
{
|
|
48
|
+
value: ref ? ref : null,
|
|
49
|
+
children: /* @__PURE__ */ jsx("div", { ref: setRef, ...props, children })
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
};
|
|
53
|
+
var TooltipWrapper = ({
|
|
54
|
+
tooltip,
|
|
55
|
+
children,
|
|
56
|
+
side = "top"
|
|
57
|
+
}) => {
|
|
58
|
+
const boundary = useContext(TooltipBoundaryContext);
|
|
59
|
+
if (!tooltip) {
|
|
60
|
+
return children;
|
|
61
|
+
}
|
|
62
|
+
return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
|
|
63
|
+
/* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
|
|
64
|
+
/* @__PURE__ */ jsxs(
|
|
65
|
+
Content,
|
|
66
|
+
{
|
|
67
|
+
side,
|
|
68
|
+
align: "center",
|
|
69
|
+
sideOffset: 5,
|
|
70
|
+
alignOffset: 0,
|
|
71
|
+
collisionBoundary: boundary ? [boundary] : [],
|
|
72
|
+
collisionPadding: 10,
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ jsx(Arrow, {}),
|
|
75
|
+
tooltip
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
] });
|
|
80
|
+
};
|
|
81
|
+
var keyboardShortcutText = (binding) => {
|
|
82
|
+
const parts = [];
|
|
83
|
+
if (binding.modifiers?.ctrlOrMetaKey) {
|
|
84
|
+
parts.push(navigator.platform.includes("Mac") ? "\u2318" : "Ctrl");
|
|
85
|
+
}
|
|
86
|
+
if (binding.modifiers?.shiftKey) {
|
|
87
|
+
parts.push("Shift");
|
|
88
|
+
}
|
|
89
|
+
if (binding.key === "ArrowLeft") {
|
|
90
|
+
parts.push("Left Arrow");
|
|
91
|
+
} else if (binding.key === "ArrowRight") {
|
|
92
|
+
parts.push("Right Arrow");
|
|
93
|
+
} else if (binding.key === " ") {
|
|
94
|
+
parts.push("Space");
|
|
95
|
+
} else {
|
|
96
|
+
parts.push(binding.key.toUpperCase());
|
|
97
|
+
}
|
|
98
|
+
return parts.join(" + ");
|
|
99
|
+
};
|
|
100
|
+
var keyboardShortcutTooltip = (label, keyboardBinding, extraBindings) => {
|
|
101
|
+
const bindings = [
|
|
102
|
+
...keyboardBinding ? [keyboardBinding[0]] : [],
|
|
103
|
+
...extraBindings ?? []
|
|
104
|
+
];
|
|
105
|
+
if (bindings.length === 0) {
|
|
106
|
+
return label;
|
|
107
|
+
}
|
|
108
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
109
|
+
label,
|
|
110
|
+
/* @__PURE__ */ jsx(
|
|
111
|
+
"kbd",
|
|
112
|
+
{
|
|
113
|
+
className: "text-[0.8rem] opacity-60",
|
|
114
|
+
style: { fontFamily: "sans-serif" },
|
|
115
|
+
children: ` (${bindings.map(keyboardShortcutText).join(" / ")})`
|
|
116
|
+
}
|
|
117
|
+
)
|
|
118
|
+
] });
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export {
|
|
122
|
+
TooltipBoundary,
|
|
123
|
+
TooltipWrapper,
|
|
124
|
+
keyboardShortcutTooltip
|
|
125
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/backend/proto.ts
|
|
2
|
+
var SIGIL_NAMESPACE = "sigil";
|
|
3
|
+
var isSigilComponent = (component) => component.namespace === SIGIL_NAMESPACE;
|
|
4
|
+
var isSigilComponentCall = (call, action) => call.namespace === SIGIL_NAMESPACE && call.action === action;
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.SIGIL_NAMESPACE = SIGIL_NAMESPACE; exports.isSigilComponent = isSigilComponent; exports.isSigilComponentCall = isSigilComponentCall;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
// src/frontend/context.tsx
|
|
2
|
+
import {
|
|
3
|
+
createContext,
|
|
4
|
+
useCallback,
|
|
5
|
+
useContext,
|
|
6
|
+
useEffect,
|
|
7
|
+
useRef
|
|
8
|
+
} from "react";
|
|
9
|
+
var SystemInformationContext = createContext(
|
|
10
|
+
new Proxy({}, {
|
|
11
|
+
get: () => {
|
|
12
|
+
throw new Error("Missing SystemInformationContext");
|
|
13
|
+
}
|
|
14
|
+
})
|
|
15
|
+
);
|
|
16
|
+
var DebuggerContext = createContext(
|
|
17
|
+
new Proxy({}, {
|
|
18
|
+
get: () => {
|
|
19
|
+
throw new Error("Missing DebuggerContext");
|
|
20
|
+
}
|
|
21
|
+
})
|
|
22
|
+
);
|
|
23
|
+
var useSystemInformation = () => {
|
|
24
|
+
return useContext(SystemInformationContext);
|
|
25
|
+
};
|
|
26
|
+
var useDebuggerContext = () => {
|
|
27
|
+
return useContext(DebuggerContext);
|
|
28
|
+
};
|
|
29
|
+
var ChangeCommitContext = createContext({
|
|
30
|
+
commitChanges: () => {
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
var useChangeCommitBoundary = (dataRef, onCommit) => {
|
|
34
|
+
const shouldCommit = useRef(false);
|
|
35
|
+
const commitTimeout = useRef(null);
|
|
36
|
+
const doClearTimeout = () => {
|
|
37
|
+
if (commitTimeout.current) {
|
|
38
|
+
clearTimeout(commitTimeout.current);
|
|
39
|
+
commitTimeout.current = null;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const commitChanges = useCallback(() => {
|
|
43
|
+
shouldCommit.current = true;
|
|
44
|
+
commitTimeout.current = setTimeout(() => {
|
|
45
|
+
onCommit();
|
|
46
|
+
shouldCommit.current = false;
|
|
47
|
+
commitTimeout.current = null;
|
|
48
|
+
}, 1e3);
|
|
49
|
+
}, [onCommit]);
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
if (shouldCommit.current) {
|
|
52
|
+
onCommit();
|
|
53
|
+
shouldCommit.current = false;
|
|
54
|
+
}
|
|
55
|
+
doClearTimeout();
|
|
56
|
+
return () => {
|
|
57
|
+
doClearTimeout();
|
|
58
|
+
};
|
|
59
|
+
}, [dataRef, onCommit]);
|
|
60
|
+
return {
|
|
61
|
+
commitChanges
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export {
|
|
66
|
+
SystemInformationContext,
|
|
67
|
+
DebuggerContext,
|
|
68
|
+
useSystemInformation,
|
|
69
|
+
useDebuggerContext,
|
|
70
|
+
ChangeCommitContext,
|
|
71
|
+
useChangeCommitBoundary
|
|
72
|
+
};
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
// src/frontend/toolbars.tsx
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { cn } from "@arcanejs/toolkit-frontend/util";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var ToolbarWrapper = forwardRef(
|
|
6
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
7
|
+
"div",
|
|
8
|
+
{
|
|
9
|
+
...props,
|
|
10
|
+
ref,
|
|
11
|
+
className: cn(
|
|
12
|
+
"z-sigil-toolbar w-full bg-sigil-bg-dark shadow-sigil-box",
|
|
13
|
+
className
|
|
14
|
+
)
|
|
15
|
+
}
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
ToolbarWrapper.displayName = "ToolbarWrapper";
|
|
19
|
+
var ToolbarRow = forwardRef(
|
|
20
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
...props,
|
|
24
|
+
ref,
|
|
25
|
+
className: cn(
|
|
26
|
+
`
|
|
27
|
+
flex items-center gap-sigil-toolbar-gap border-b border-sigil-border
|
|
28
|
+
p-sigil-toolbar-gap
|
|
29
|
+
`,
|
|
30
|
+
className
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
)
|
|
34
|
+
);
|
|
35
|
+
ToolbarRow.displayName = "ToolbarRow";
|
|
36
|
+
var ToolbarRowTall = forwardRef(
|
|
37
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
38
|
+
ToolbarRow,
|
|
39
|
+
{
|
|
40
|
+
...props,
|
|
41
|
+
ref,
|
|
42
|
+
className: cn("px-sigil-toolbar-gap py-sigil-toolbar-padding", className)
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
);
|
|
46
|
+
ToolbarRowTall.displayName = "ToolbarRowTall";
|
|
47
|
+
var ToolbarSegment = forwardRef(
|
|
48
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
49
|
+
"div",
|
|
50
|
+
{
|
|
51
|
+
...props,
|
|
52
|
+
ref,
|
|
53
|
+
className: cn("flex grow basis-0 items-center", className)
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
);
|
|
57
|
+
ToolbarSegment.displayName = "ToolbarSegment";
|
|
58
|
+
var ToolbarDivider = forwardRef(
|
|
59
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
...props,
|
|
63
|
+
ref,
|
|
64
|
+
className: cn(
|
|
65
|
+
"relative h-sigil-toolbar-divider w-px bg-sigil-border",
|
|
66
|
+
className
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
);
|
|
71
|
+
ToolbarDivider.displayName = "ToolbarDivider";
|
|
72
|
+
var ToolbarSpacer = forwardRef(
|
|
73
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
74
|
+
ToolbarDivider,
|
|
75
|
+
{
|
|
76
|
+
...props,
|
|
77
|
+
ref,
|
|
78
|
+
className: cn("mx-sigil-toolbar-gap", className)
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
);
|
|
82
|
+
ToolbarSpacer.displayName = "ToolbarSpacer";
|
|
83
|
+
var ToolbarGrow = forwardRef(
|
|
84
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
...props,
|
|
88
|
+
ref,
|
|
89
|
+
className: cn("flex grow items-center gap-sigil-toolbar-gap", className)
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
);
|
|
93
|
+
ToolbarGrow.displayName = "ToolbarGrow";
|
|
94
|
+
|
|
95
|
+
export {
|
|
96
|
+
ToolbarWrapper,
|
|
97
|
+
ToolbarRow,
|
|
98
|
+
ToolbarRowTall,
|
|
99
|
+
ToolbarSegment,
|
|
100
|
+
ToolbarDivider,
|
|
101
|
+
ToolbarSpacer,
|
|
102
|
+
ToolbarGrow
|
|
103
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
// src/frontend/styling.ts
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
import { z } from "zod";
|
|
4
|
+
var SIGIL_COLOR = z.enum([
|
|
5
|
+
"purple",
|
|
6
|
+
"blue",
|
|
7
|
+
"teal",
|
|
8
|
+
"red",
|
|
9
|
+
"green",
|
|
10
|
+
"yellow",
|
|
11
|
+
"brown",
|
|
12
|
+
"orange",
|
|
13
|
+
"gray"
|
|
14
|
+
]);
|
|
15
|
+
var sigilColorUsage = (color) => ({
|
|
16
|
+
text: `var(--sigil-usage-${color}-text)`,
|
|
17
|
+
foreground: `var(--sigil-usage-${color}-foreground)`,
|
|
18
|
+
background: `var(--sigil-usage-${color}-background)`,
|
|
19
|
+
border: `var(--sigil-usage-${color}-border)`,
|
|
20
|
+
dragBorder: `var(--sigil-usage-${color}-drag-border)`,
|
|
21
|
+
selectedBackground: `var(--sigil-usage-${color}-selected-background)`,
|
|
22
|
+
selectedBorder: `var(--sigil-usage-${color}-selected-border)`,
|
|
23
|
+
selectedText: `var(--sigil-usage-${color}-selected-text)`,
|
|
24
|
+
dimmedBackground: `var(--sigil-usage-${color}-dimmed-background)`,
|
|
25
|
+
dimmedBorder: `var(--sigil-usage-${color}-dimmed-border)`,
|
|
26
|
+
gradientLight: `var(--sigil-usage-${color}-gradient-light)`,
|
|
27
|
+
gradientDark: `var(--sigil-usage-${color}-gradient-dark)`
|
|
28
|
+
});
|
|
29
|
+
var cssSigilColorUsageVariables = (prefix, usage) => cssVariables({
|
|
30
|
+
[`--${prefix}-text`]: usage.text,
|
|
31
|
+
[`--${prefix}-foreground`]: usage.foreground,
|
|
32
|
+
[`--${prefix}-background`]: usage.background,
|
|
33
|
+
[`--${prefix}-border`]: usage.border,
|
|
34
|
+
[`--${prefix}-drag-border`]: usage.dragBorder,
|
|
35
|
+
[`--${prefix}-selected-background`]: usage.selectedBackground,
|
|
36
|
+
[`--${prefix}-selected-border`]: usage.selectedBorder,
|
|
37
|
+
[`--${prefix}-selected-text`]: usage.selectedText,
|
|
38
|
+
[`--${prefix}-dimmed-background`]: usage.dimmedBackground,
|
|
39
|
+
[`--${prefix}-dimmed-border`]: usage.dimmedBorder,
|
|
40
|
+
[`--${prefix}-gradient-light`]: usage.gradientLight,
|
|
41
|
+
[`--${prefix}-gradient-dark`]: usage.gradientDark
|
|
42
|
+
});
|
|
43
|
+
var cssHintColorVariables = (color) => cssSigilColorUsageVariables(`sigil-usage-hint`, sigilColorUsage(color));
|
|
44
|
+
var useRootHintVariables = (color) => {
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
const root = document.querySelector(".arcane-theme-root");
|
|
47
|
+
if (!root) return;
|
|
48
|
+
Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
|
|
49
|
+
root.style.setProperty(key, value);
|
|
50
|
+
});
|
|
51
|
+
}, [color]);
|
|
52
|
+
};
|
|
53
|
+
var cssVariables = (variables) => variables;
|
|
54
|
+
function cnd(condition, truthyClassName, falseyClassName) {
|
|
55
|
+
return condition ? truthyClassName : falseyClassName;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export {
|
|
59
|
+
SIGIL_COLOR,
|
|
60
|
+
sigilColorUsage,
|
|
61
|
+
cssSigilColorUsageVariables,
|
|
62
|
+
cssHintColorVariables,
|
|
63
|
+
useRootHintVariables,
|
|
64
|
+
cssVariables,
|
|
65
|
+
cnd
|
|
66
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// src/backend/proto.ts
|
|
2
|
+
var SIGIL_NAMESPACE = "sigil";
|
|
3
|
+
var isSigilComponent = (component) => component.namespace === SIGIL_NAMESPACE;
|
|
4
|
+
var isSigilComponentCall = (call, action) => call.namespace === SIGIL_NAMESPACE && call.action === action;
|
|
5
|
+
|
|
6
|
+
export {
|
|
7
|
+
SIGIL_NAMESPACE,
|
|
8
|
+
isSigilComponent,
|
|
9
|
+
isSigilComponentCall
|
|
10
|
+
};
|