@hlang-org/editor-ui 0.4.0 → 0.5.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/README.md +10 -2
- package/lib/index.d.mts +90 -7
- package/lib/index.d.ts +90 -7
- package/lib/index.js +409 -336
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +393 -326
- package/lib/index.mjs.map +1 -1
- package/lib/panels/PanelHead.css +119 -0
- package/lib/panels/ParamForm.css +5 -0
- package/lib/panels/RunLog.css +3 -59
- package/lib/styles.css +2 -0
- package/lib/toolbar/ReadOnlyBadge.css +35 -0
- package/lib/toolbar/Toolbar.css +11 -0
- package/package.json +3 -3
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/** PanelHead — a docked panel's header row; it responds to its own width. */
|
|
2
|
+
|
|
3
|
+
.hl-panel-head {
|
|
4
|
+
container: hl-panel-head / inline-size;
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
gap: 12px;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
min-width: 0;
|
|
10
|
+
padding: 7px 12px 7px 16px;
|
|
11
|
+
border-bottom: 1px solid var(--hl-line);
|
|
12
|
+
flex: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.hl-panel-title {
|
|
16
|
+
font-size: 10px;
|
|
17
|
+
font-weight: 600;
|
|
18
|
+
text-transform: uppercase;
|
|
19
|
+
letter-spacing: 0.14em;
|
|
20
|
+
color: var(--hl-silver);
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.hl-panel-meta {
|
|
25
|
+
min-width: 0;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
font-size: 11px;
|
|
28
|
+
color: var(--hl-ink-3);
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
text-overflow: ellipsis;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.hl-panel-actions {
|
|
34
|
+
display: flex;
|
|
35
|
+
gap: 4px;
|
|
36
|
+
margin-left: auto;
|
|
37
|
+
flex: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.hl-panel-action {
|
|
41
|
+
position: relative;
|
|
42
|
+
display: inline-flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
gap: 6px;
|
|
45
|
+
height: 26px;
|
|
46
|
+
max-width: 180px;
|
|
47
|
+
padding: 0 9px 0 7px;
|
|
48
|
+
border: 1px solid var(--hl-line);
|
|
49
|
+
border-radius: 6px;
|
|
50
|
+
background: transparent;
|
|
51
|
+
color: var(--hl-ink-3);
|
|
52
|
+
font-family: var(--hl-font-ui);
|
|
53
|
+
font-size: 11px;
|
|
54
|
+
font-weight: 550;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease);
|
|
57
|
+
}
|
|
58
|
+
.hl-panel-action:hover:not(:disabled) {
|
|
59
|
+
color: var(--hl-ink-2);
|
|
60
|
+
}
|
|
61
|
+
.hl-panel-action.is-on {
|
|
62
|
+
color: var(--hl-ink);
|
|
63
|
+
background: color-mix(in oklab, var(--hl-silver) 16%, transparent);
|
|
64
|
+
border-color: color-mix(in oklab, var(--hl-silver) 28%, transparent);
|
|
65
|
+
}
|
|
66
|
+
.hl-panel-action:disabled {
|
|
67
|
+
opacity: 0.45;
|
|
68
|
+
cursor: default;
|
|
69
|
+
}
|
|
70
|
+
.hl-panel-action:focus-visible {
|
|
71
|
+
outline: 1px solid var(--hl-silver);
|
|
72
|
+
outline-offset: -1px;
|
|
73
|
+
}
|
|
74
|
+
.hl-panel-action-icon {
|
|
75
|
+
display: grid;
|
|
76
|
+
flex: none;
|
|
77
|
+
place-items: center;
|
|
78
|
+
}
|
|
79
|
+
.hl-panel-action-label {
|
|
80
|
+
min-width: 0;
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
white-space: nowrap;
|
|
83
|
+
text-overflow: ellipsis;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Narrow: icons only. The label stays in the accessibility tree. */
|
|
87
|
+
@container hl-panel-head (max-width: 599px) {
|
|
88
|
+
.hl-panel-action {
|
|
89
|
+
justify-content: center;
|
|
90
|
+
width: 30px;
|
|
91
|
+
padding: 0;
|
|
92
|
+
}
|
|
93
|
+
.hl-panel-action-label {
|
|
94
|
+
position: absolute;
|
|
95
|
+
width: 1px;
|
|
96
|
+
height: 1px;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
clip-path: inset(50%);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Narrower still: the status gives way to what the panel is and its actions. */
|
|
103
|
+
@container hl-panel-head (max-width: 419px) {
|
|
104
|
+
.hl-panel-meta {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* A finger needs a larger target than a pointer. */
|
|
110
|
+
@media (pointer: coarse) {
|
|
111
|
+
.hl-panel-action {
|
|
112
|
+
height: 30px;
|
|
113
|
+
}
|
|
114
|
+
@container hl-panel-head (max-width: 599px) {
|
|
115
|
+
.hl-panel-action {
|
|
116
|
+
width: 34px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
package/lib/panels/ParamForm.css
CHANGED
package/lib/panels/RunLog.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/** RunLog — the live console of a running graph, docked under the canvas. */
|
|
2
2
|
|
|
3
3
|
.hl-runlog {
|
|
4
|
+
container: hl-runlog / inline-size;
|
|
4
5
|
display: flex;
|
|
5
6
|
flex-direction: column;
|
|
6
7
|
min-height: 0;
|
|
@@ -9,64 +10,6 @@
|
|
|
9
10
|
border-top: 1px solid var(--hl-line);
|
|
10
11
|
}
|
|
11
12
|
|
|
12
|
-
.hl-runlog-head {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
gap: 12px;
|
|
16
|
-
padding: 7px 12px 7px 16px;
|
|
17
|
-
border-bottom: 1px solid var(--hl-line);
|
|
18
|
-
flex: none;
|
|
19
|
-
}
|
|
20
|
-
.hl-runlog-title {
|
|
21
|
-
font-size: 10px;
|
|
22
|
-
font-weight: 600;
|
|
23
|
-
text-transform: uppercase;
|
|
24
|
-
letter-spacing: 0.14em;
|
|
25
|
-
color: var(--hl-silver);
|
|
26
|
-
}
|
|
27
|
-
.hl-runlog-count {
|
|
28
|
-
font-size: 11px;
|
|
29
|
-
color: var(--hl-ink-3);
|
|
30
|
-
white-space: nowrap;
|
|
31
|
-
overflow: hidden;
|
|
32
|
-
text-overflow: ellipsis;
|
|
33
|
-
min-width: 0;
|
|
34
|
-
}
|
|
35
|
-
.hl-runlog-actions {
|
|
36
|
-
display: flex;
|
|
37
|
-
gap: 4px;
|
|
38
|
-
margin-left: auto;
|
|
39
|
-
flex: none;
|
|
40
|
-
}
|
|
41
|
-
.hl-runlog-toggle {
|
|
42
|
-
padding: 3px 9px;
|
|
43
|
-
border: 1px solid var(--hl-line);
|
|
44
|
-
border-radius: 6px;
|
|
45
|
-
background: transparent;
|
|
46
|
-
color: var(--hl-ink-3);
|
|
47
|
-
font-family: var(--hl-font-ui);
|
|
48
|
-
font-size: 11px;
|
|
49
|
-
font-weight: 550;
|
|
50
|
-
cursor: pointer;
|
|
51
|
-
max-width: 180px;
|
|
52
|
-
white-space: nowrap;
|
|
53
|
-
overflow: hidden;
|
|
54
|
-
text-overflow: ellipsis;
|
|
55
|
-
transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease);
|
|
56
|
-
}
|
|
57
|
-
.hl-runlog-toggle:hover:not(:disabled) {
|
|
58
|
-
color: var(--hl-ink-2);
|
|
59
|
-
}
|
|
60
|
-
.hl-runlog-toggle.is-on {
|
|
61
|
-
color: var(--hl-ink);
|
|
62
|
-
background: color-mix(in oklab, var(--hl-silver) 16%, transparent);
|
|
63
|
-
border-color: color-mix(in oklab, var(--hl-silver) 28%, transparent);
|
|
64
|
-
}
|
|
65
|
-
.hl-runlog-toggle:disabled {
|
|
66
|
-
opacity: 0.45;
|
|
67
|
-
cursor: default;
|
|
68
|
-
}
|
|
69
|
-
.hl-runlog-toggle:focus-visible,
|
|
70
13
|
.hl-runlog-hit:focus-visible {
|
|
71
14
|
outline: 1px solid var(--hl-silver);
|
|
72
15
|
outline-offset: -1px;
|
|
@@ -160,7 +103,8 @@
|
|
|
160
103
|
color: var(--hl-warning);
|
|
161
104
|
}
|
|
162
105
|
|
|
163
|
-
|
|
106
|
+
/* A narrow log puts the value on its own line. */
|
|
107
|
+
@container hl-runlog (max-width: 720px) {
|
|
164
108
|
.hl-runlog-hit {
|
|
165
109
|
grid-template-columns: 56px minmax(0, 1fr) 56px;
|
|
166
110
|
}
|
package/lib/styles.css
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
@import './shell/EditorShell.css';
|
|
19
19
|
@import './toolbar/Toolbar.css';
|
|
20
20
|
@import './toolbar/ToolCluster.css';
|
|
21
|
+
@import './toolbar/ReadOnlyBadge.css';
|
|
21
22
|
@import './canvas/CanvasChrome.css';
|
|
22
23
|
@import './canvas/CanvasDock.css';
|
|
23
24
|
@import './canvas/EmptyState.css';
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
@import './panels/RailTabs.css';
|
|
29
30
|
@import './panels/AssetGrid.css';
|
|
30
31
|
@import './panels/PositionPanel.css';
|
|
32
|
+
@import './panels/PanelHead.css';
|
|
31
33
|
@import './panels/RunLog.css';
|
|
32
34
|
@import './command-palette/NodeSearch.css';
|
|
33
35
|
@import './context-menu/NodeContextMenu.css';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/** ReadOnlyBadge — a quiet pill in the toolbar: the graph is view only. */
|
|
2
|
+
|
|
3
|
+
.hl-readonly-badge {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: 6px;
|
|
7
|
+
flex: none;
|
|
8
|
+
padding: 4px 10px 4px 8px;
|
|
9
|
+
border: 1px solid var(--hl-line);
|
|
10
|
+
border-radius: var(--hl-r-pill);
|
|
11
|
+
background: rgba(255, 255, 255, 0.04);
|
|
12
|
+
color: var(--hl-ink-2);
|
|
13
|
+
font-family: var(--hl-font-ui);
|
|
14
|
+
font-size: 11.5px;
|
|
15
|
+
font-weight: 550;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
}
|
|
18
|
+
.hl-readonly-badge svg {
|
|
19
|
+
flex: none;
|
|
20
|
+
color: var(--hl-silver);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@container hl-toolbar (max-width: 419px) {
|
|
24
|
+
.hl-readonly-badge {
|
|
25
|
+
padding: 6px;
|
|
26
|
+
}
|
|
27
|
+
.hl-readonly-badge-label {
|
|
28
|
+
position: absolute;
|
|
29
|
+
width: 1px;
|
|
30
|
+
height: 1px;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
clip-path: inset(50%);
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
}
|
|
35
|
+
}
|
package/lib/toolbar/Toolbar.css
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
/** Frosted-glass toolbar with a wordmark and a right-aligned action cluster. */
|
|
2
2
|
|
|
3
3
|
.hl-toolbar {
|
|
4
|
+
/* Its children respond to the toolbar's width (e.g. ReadOnlyBadge). */
|
|
5
|
+
container: hl-toolbar / inline-size;
|
|
4
6
|
position: relative;
|
|
5
7
|
display: flex;
|
|
6
8
|
align-items: center;
|
|
7
9
|
justify-content: space-between;
|
|
10
|
+
gap: 12px;
|
|
8
11
|
height: 54px;
|
|
9
12
|
padding: 0 16px;
|
|
10
13
|
border-bottom: 1px solid var(--hl-line);
|
|
@@ -27,6 +30,9 @@
|
|
|
27
30
|
display: flex;
|
|
28
31
|
align-items: center;
|
|
29
32
|
gap: 10px;
|
|
33
|
+
/* The brand gives way first: the actions are what the toolbar is for. */
|
|
34
|
+
min-width: 0;
|
|
35
|
+
overflow: hidden;
|
|
30
36
|
}
|
|
31
37
|
.hl-toolbar-glyph {
|
|
32
38
|
width: 14px;
|
|
@@ -36,6 +42,10 @@
|
|
|
36
42
|
background: radial-gradient(circle at 30% 25%, var(--hl-silver-hi), var(--hl-silver-lo) 70%);
|
|
37
43
|
box-shadow: 0 0 10px -3px var(--hl-silver), var(--hl-glass-edge-hi);
|
|
38
44
|
}
|
|
45
|
+
.hl-toolbar-glyph,
|
|
46
|
+
.hl-toolbar-wordmark {
|
|
47
|
+
flex: none;
|
|
48
|
+
}
|
|
39
49
|
.hl-toolbar-wordmark {
|
|
40
50
|
font-size: 15px;
|
|
41
51
|
font-weight: 600;
|
|
@@ -47,6 +57,7 @@
|
|
|
47
57
|
display: flex;
|
|
48
58
|
align-items: center;
|
|
49
59
|
gap: 8px;
|
|
60
|
+
flex: none;
|
|
50
61
|
}
|
|
51
62
|
|
|
52
63
|
/* Read-only stat pill (node/vertex count). */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hlang-org/editor-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
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.
|
|
63
|
-
"@hlang-org/editor-react": "^0.
|
|
62
|
+
"@hlang-org/editor-core": "^0.4.0",
|
|
63
|
+
"@hlang-org/editor-react": "^0.3.0",
|
|
64
64
|
"@hlang-org/interpreter": "^2.1.0"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|