@hlang-org/editor-ui 0.2.0 → 0.2.2
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/lib/index.js +8 -4
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +8 -4
- package/lib/index.mjs.map +1 -1
- package/lib/overlays/Cheatsheet.css +13 -6
- package/lib/overlays/Toast.css +9 -2
- package/lib/shell/EditorShell.css +4 -0
- package/package.json +3 -3
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Cheatsheet — a centered black/silver glass reference card. It belongs to the
|
|
3
|
+
* editor, not the page: scrim and card are positioned against the canvas
|
|
4
|
+
* region (`.hl-region-canvas`, the nearest positioned ancestor), so an editor
|
|
5
|
+
* embedded in a larger page covers only itself.
|
|
6
|
+
*/
|
|
2
7
|
|
|
3
8
|
.hl-cheat-scrim {
|
|
4
|
-
position:
|
|
9
|
+
position: absolute;
|
|
5
10
|
inset: 0;
|
|
6
11
|
z-index: 60;
|
|
7
12
|
background: rgba(6, 7, 9, 0.5);
|
|
@@ -10,16 +15,18 @@
|
|
|
10
15
|
}
|
|
11
16
|
|
|
12
17
|
.hl-cheat {
|
|
13
|
-
position:
|
|
18
|
+
position: absolute;
|
|
14
19
|
z-index: 61;
|
|
15
20
|
top: 50%;
|
|
16
21
|
left: 50%;
|
|
17
22
|
transform: translate(-50%, -50%);
|
|
18
|
-
width: min(680px, calc(
|
|
19
|
-
max-height: calc(
|
|
23
|
+
width: min(680px, calc(100% - 32px));
|
|
24
|
+
max-height: calc(100% - 32px);
|
|
20
25
|
overflow: auto;
|
|
21
26
|
padding: 20px 22px 24px;
|
|
22
|
-
|
|
27
|
+
/* Nearly opaque, like the node search panel: the card sits over nodes and
|
|
28
|
+
wires, and rows of text over a busy graph would not read. */
|
|
29
|
+
background: color-mix(in oklab, var(--hl-surface) 98%, transparent);
|
|
23
30
|
backdrop-filter: blur(var(--hl-glass-blur)) saturate(var(--hl-glass-sat));
|
|
24
31
|
-webkit-backdrop-filter: blur(var(--hl-glass-blur)) saturate(var(--hl-glass-sat));
|
|
25
32
|
border: 1px solid var(--hl-line-strong);
|
package/lib/overlays/Toast.css
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Toast — transient glass confirmations, stacked bottom-center of the editor.
|
|
3
|
+
* The stack is positioned against the nearest positioned ancestor of the
|
|
4
|
+
* `ToastProvider`, so an editor embedded in a larger page shows its toasts in
|
|
5
|
+
* itself; a full-window editor needs nothing extra. An embedding host should
|
|
6
|
+
* also isolate that ancestor (`isolation: isolate`) so the stack's z-index stays
|
|
7
|
+
* below the page's own layers.
|
|
8
|
+
*/
|
|
2
9
|
|
|
3
10
|
.hl-toast-stack {
|
|
4
|
-
position:
|
|
11
|
+
position: absolute;
|
|
5
12
|
z-index: 70;
|
|
6
13
|
left: 50%;
|
|
7
14
|
bottom: 28px;
|
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
.hl-shell {
|
|
7
|
+
/* The editor is embeddable: its layers (panels, dock, overlays) stack among
|
|
8
|
+
themselves and never above the host page's own layers, such as a sticky
|
|
9
|
+
header the editor scrolls under. */
|
|
10
|
+
isolation: isolate;
|
|
7
11
|
display: flex;
|
|
8
12
|
flex-direction: column;
|
|
9
13
|
width: 100%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hlang-org/editor-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Lumen design system for hlang: node, edge, panel, and shell components for a React Flow node editor, built on @hlang-org/editor-react.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"hlang",
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@hlang-org/editor-core": "^0.1.1",
|
|
63
62
|
"@hlang-org/editor-react": "^0.1.1",
|
|
63
|
+
"@hlang-org/editor-core": "^0.1.1",
|
|
64
64
|
"@hlang-org/interpreter": "^1.0.1"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"react-dom": "^19.2.0",
|
|
85
85
|
"ts-jest": "^29.4.11",
|
|
86
86
|
"tsup": "^9.0.0",
|
|
87
|
-
"typescript": "^
|
|
87
|
+
"typescript": "^6.0.3",
|
|
88
88
|
"typescript-eslint": "^8.62.1"
|
|
89
89
|
},
|
|
90
90
|
"scripts": {
|