@vibe-x/dsh-html-workbench 0.1.1 → 0.2.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/lib/client.js +531 -123
- package/package.json +1 -1
- package/scripts/workbench.py +76 -21
- package/src/client.js +521 -120
- package/src/host.js +25 -0
package/src/client.js
CHANGED
|
@@ -8,10 +8,17 @@
|
|
|
8
8
|
*
|
|
9
9
|
* Responsibilities (runs in the browser):
|
|
10
10
|
* - Register a right-side panel + corner trigger in `shell.overlay`.
|
|
11
|
-
* -
|
|
12
|
-
*
|
|
11
|
+
* - Layout is browser-like: a two-row chrome at the TOP (identity row +
|
|
12
|
+
* address/toolbar row) and the preview filling everything below. Nothing
|
|
13
|
+
* sits at the bottom, so the panel never visually competes with the chat
|
|
14
|
+
* composer on the left.
|
|
13
15
|
* - Open a file by calling Host `open`, then embed the workbench URL in an
|
|
14
|
-
* iframe. Left edge is draggable to resize the panel width.
|
|
16
|
+
* iframe. Left edge is draggable to resize the panel width (persisted).
|
|
17
|
+
*
|
|
18
|
+
* Styling contract: every colour/shadow comes from the host's `--dsw-alias-*`
|
|
19
|
+
* design tokens (see the DSH first-party plugins) so light/dark themes and
|
|
20
|
+
* future re-skins are inherited for free. No hard-coded palette, no magic
|
|
21
|
+
* offsets — all overlays are laid out with flex/grid.
|
|
15
22
|
*/
|
|
16
23
|
|
|
17
24
|
return {
|
|
@@ -20,63 +27,213 @@ return {
|
|
|
20
27
|
const slots = ctx.get('slots')
|
|
21
28
|
if (slots === undefined) return
|
|
22
29
|
|
|
23
|
-
|
|
24
|
-
|
|
30
|
+
// ── Styles ───────────────────────────────────────────────────────────────
|
|
31
|
+
// NOTE: both style shims (dynamic runner + static bundle) de-duplicate by a
|
|
32
|
+
// fixed element id and BAIL OUT when it already exists. During iterative
|
|
33
|
+
// development that silently keeps a STALE stylesheet alive — the symptom is
|
|
34
|
+
// "functionality works but the layout is broken" (e.g. an absolutely
|
|
35
|
+
// positioned chevron collapsing into a block below the input). So manage the
|
|
36
|
+
// <style> element here: drop every previous generation, then insert fresh.
|
|
37
|
+
const STYLE_MARK = 'data-hwb-styles'
|
|
38
|
+
const STYLE_VERSION = '2'
|
|
39
|
+
|
|
40
|
+
const CSS = `
|
|
41
|
+
html #root {
|
|
42
|
+
margin-right: calc(var(--dsh-sidebar-width, 0px) + var(--hwb-panel-width, 0px));
|
|
43
|
+
transition: margin-right var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease);
|
|
44
|
+
}
|
|
25
45
|
body[data-hwb-dragging] #root { transition: none; }
|
|
26
|
-
body[data-hwb-dragging] { user-select: none; }
|
|
46
|
+
body[data-hwb-dragging] { user-select: none; cursor: col-resize; }
|
|
47
|
+
|
|
48
|
+
/* Reserve right-side clearance in the session header so the corner trigger
|
|
49
|
+
never overlaps its right-aligned utilities (e.g. "Session log"). The
|
|
50
|
+
clearance relaxes as the panel opens, because the trigger then hides. */
|
|
51
|
+
header:has([data-slot="conversation.session.header.utilities"]) {
|
|
52
|
+
padding-right: max(28px, calc(60px - var(--hwb-panel-width, 0px)));
|
|
53
|
+
transition: padding-right var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease);
|
|
54
|
+
}
|
|
55
|
+
|
|
27
56
|
.hwb-panel, .hwb-panel * { box-sizing: border-box; }
|
|
28
|
-
.hwb-panel {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
.hwb-
|
|
43
|
-
.hwb-
|
|
44
|
-
.hwb-
|
|
45
|
-
.hwb-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
.hwb-
|
|
49
|
-
.hwb-
|
|
50
|
-
.hwb-
|
|
51
|
-
.hwb-
|
|
52
|
-
.hwb-
|
|
53
|
-
.hwb-
|
|
54
|
-
.hwb-
|
|
55
|
-
.hwb-
|
|
56
|
-
.hwb-
|
|
57
|
-
.hwb-
|
|
58
|
-
.hwb-
|
|
59
|
-
.hwb-
|
|
60
|
-
.hwb-
|
|
61
|
-
|
|
62
|
-
.hwb-
|
|
63
|
-
|
|
57
|
+
.hwb-panel {
|
|
58
|
+
position: fixed; top: 0; right: var(--dsh-sidebar-width, 0px); bottom: 0;
|
|
59
|
+
display: flex; flex-direction: column; min-width: 0;
|
|
60
|
+
background: var(--dsw-alias-bg-base);
|
|
61
|
+
color: var(--dsw-alias-label-primary);
|
|
62
|
+
border-left: 1px solid var(--dsw-alias-border-l1);
|
|
63
|
+
box-shadow: var(--dsw-shadow-lv2);
|
|
64
|
+
z-index: 9999; pointer-events: auto;
|
|
65
|
+
font-family: var(--dsw-font-family, ui-sans-serif, system-ui, sans-serif);
|
|
66
|
+
font-size: 13px; line-height: 1.5;
|
|
67
|
+
--hwb-mono: var(--dsh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Resize handle — a wide invisible hit area with a thin visible rail. */
|
|
71
|
+
.hwb-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 9px; z-index: 5; cursor: col-resize; touch-action: none; border: none; padding: 0; background: transparent; }
|
|
72
|
+
.hwb-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: transparent; transition: background 150ms ease; }
|
|
73
|
+
.hwb-resize:hover::after, .hwb-resize:focus-visible::after, .hwb-resize[data-active]::after { background: var(--dsw-alias-interactive-bg-hover-accent); }
|
|
74
|
+
.hwb-resize:focus-visible { outline: none; }
|
|
75
|
+
|
|
76
|
+
/* ── Chrome: identity row + toolbar row ───────────────────────────────────── */
|
|
77
|
+
.hwb-chrome { flex: none; display: flex; flex-direction: column; background: var(--dsw-alias-bg-layer-1); border-bottom: 1px solid var(--dsw-alias-border-l2); }
|
|
78
|
+
.hwb-idrow { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 14px; }
|
|
79
|
+
.hwb-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
80
|
+
.hwb-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dsw-alias-label-dimmed, var(--dsw-alias-label-tertiary)); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
|
|
81
|
+
.hwb-dot[data-on] { background: var(--dsw-alias-state-success-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-state-success-primary) 16%, transparent); }
|
|
82
|
+
.hwb-dot[data-off] { background: var(--dsw-alias-state-error-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-state-error-primary) 16%, transparent); }
|
|
83
|
+
.hwb-name { font-weight: 600; font-size: 13px; white-space: nowrap; }
|
|
84
|
+
.hwb-sep { width: 1px; height: 14px; flex: none; background: var(--dsw-alias-border-l1); }
|
|
85
|
+
.hwb-filechip { display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-interactive-bg-hover)); color: var(--dsw-alias-label-secondary); font-size: 11.5px; }
|
|
86
|
+
.hwb-filechip > svg { flex: none; opacity: .7; }
|
|
87
|
+
.hwb-filechip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--hwb-mono); }
|
|
88
|
+
.hwb-spacer { flex: 1 1 auto; min-width: 8px; }
|
|
89
|
+
.hwb-actions { display: flex; align-items: center; gap: 2px; flex: none; }
|
|
90
|
+
|
|
91
|
+
.hwb-icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; flex: none; border: none; border-radius: 7px; background: transparent; color: var(--dsw-alias-label-secondary); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
|
|
92
|
+
.hwb-icon:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
|
|
93
|
+
.hwb-icon:disabled { opacity: .4; cursor: default; }
|
|
94
|
+
.hwb-icon:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #4d6bfe); outline-offset: 1px; }
|
|
95
|
+
.hwb-icon[data-spin] > svg { animation: hwb-spin 800ms linear infinite; }
|
|
96
|
+
|
|
97
|
+
.hwb-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 10px 10px; }
|
|
98
|
+
|
|
99
|
+
/* Combobox field: input + status + chevron composed with flex — no absolute
|
|
100
|
+
positioning, so nothing can escape the field box. */
|
|
101
|
+
.hwb-fieldwrap { position: relative; flex: 1 1 auto; min-width: 0; }
|
|
102
|
+
.hwb-field { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 2px 0 10px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 9px; background: var(--dsw-alias-bg-base); transition: border-color 150ms ease, box-shadow 150ms ease; }
|
|
103
|
+
.hwb-field:hover { border-color: var(--dsw-alias-border-l1); }
|
|
104
|
+
.hwb-field[data-focus] { border-color: var(--dsw-alias-state-business-primary, #4d6bfe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-state-business-primary, #4d6bfe) 16%, transparent); }
|
|
105
|
+
.hwb-input { flex: 1 1 auto; min-width: 0; height: 100%; border: none; outline: none; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 12.5px; font-family: var(--hwb-mono); }
|
|
106
|
+
.hwb-input::placeholder { color: var(--dsw-alias-label-tertiary); font-family: var(--dsw-font-family, ui-sans-serif, system-ui, sans-serif); }
|
|
107
|
+
.hwb-state { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
|
|
108
|
+
.hwb-state[data-state="exists"] { color: var(--dsw-alias-state-success-primary); }
|
|
109
|
+
.hwb-state[data-state="missing"] { color: var(--dsw-alias-state-error-primary); }
|
|
110
|
+
.hwb-state[data-state="invalid"] { color: var(--dsw-alias-state-warning-primary, var(--dsw-alias-state-warn-label)); }
|
|
111
|
+
.hwb-state[data-state="checking"] { color: var(--dsw-alias-label-tertiary); }
|
|
112
|
+
.hwb-state[data-state="checking"] > svg { animation: hwb-spin 800ms linear infinite; }
|
|
113
|
+
.hwb-caret { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: none; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-tertiary); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
|
|
114
|
+
.hwb-caret:hover { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
|
|
115
|
+
.hwb-caret > svg { transition: transform 180ms ease; }
|
|
116
|
+
.hwb-caret[aria-expanded="true"] > svg { transform: rotate(180deg); }
|
|
117
|
+
|
|
118
|
+
.hwb-btn { flex: none; height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 120ms ease, opacity 120ms ease; }
|
|
119
|
+
.hwb-btn-primary { background: var(--dsw-alias-button-primary-fill, #4d6bfe); color: var(--dsw-alias-button-primary-label, #fff); }
|
|
120
|
+
.hwb-btn-primary:hover:not(:disabled) { opacity: .88; }
|
|
121
|
+
.hwb-btn:disabled { opacity: .45; cursor: default; }
|
|
122
|
+
.hwb-btn:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #4d6bfe); outline-offset: 2px; }
|
|
123
|
+
|
|
124
|
+
/* Dropdown opens DOWNWARD (the field lives at the top of the panel). */
|
|
125
|
+
.hwb-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; max-height: min(340px, 50vh); overflow: hidden; border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px; background: var(--dsw-alias-bg-layer-1); box-shadow: var(--dsw-shadow-lv2); animation: hwb-pop 140ms var(--ds-ease-in-out, ease); }
|
|
126
|
+
.hwb-menu-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--dsw-alias-border-l2); color: var(--dsw-alias-label-tertiary); font-size: 11px; }
|
|
127
|
+
.hwb-menu-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
|
|
128
|
+
.hwb-menu-empty { padding: 22px 16px; color: var(--dsw-alias-label-tertiary); text-align: center; font-size: 12px; line-height: 1.7; }
|
|
129
|
+
|
|
130
|
+
.hwb-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: none; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
|
|
131
|
+
.hwb-item:hover, .hwb-item:focus-visible { background: var(--dsw-alias-interactive-bg-hover); outline: none; }
|
|
132
|
+
.hwb-item[data-active] { background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-interactive-bg-hover)); }
|
|
133
|
+
.hwb-item > svg { flex: none; color: var(--dsw-alias-label-tertiary); }
|
|
134
|
+
.hwb-item-main { flex: 1 1 auto; min-width: 0; display: block; }
|
|
135
|
+
.hwb-item-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
|
|
136
|
+
.hwb-item-path { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-tertiary); font-size: 11px; font-family: var(--hwb-mono); }
|
|
137
|
+
.hwb-tag { flex: none; padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 600; }
|
|
138
|
+
.hwb-tag[data-kind="create"] { background: var(--dsw-alias-state-success-tertiary, color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent)); color: var(--dsw-alias-state-success-primary); }
|
|
139
|
+
.hwb-tag[data-kind="edit"] { background: var(--dsw-alias-state-warn-tertiary, color-mix(in srgb, var(--dsw-alias-state-warning-primary, #b7791f) 14%, transparent)); color: var(--dsw-alias-state-warn-label, var(--dsw-alias-state-warning-primary, #b7791f)); }
|
|
140
|
+
|
|
141
|
+
/* ── Banner ───────────────────────────────────────────────────────────────── */
|
|
142
|
+
.hwb-banner { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--dsw-alias-border-l2); background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent); color: var(--dsw-alias-state-error-primary); font-size: 12px; }
|
|
143
|
+
.hwb-banner > svg { flex: none; margin-top: 1px; }
|
|
144
|
+
.hwb-banner-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
|
|
145
|
+
|
|
146
|
+
/* ── Body ─────────────────────────────────────────────────────────────────── */
|
|
147
|
+
.hwb-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--dsw-alias-bg-base); }
|
|
148
|
+
.hwb-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
|
|
149
|
+
|
|
150
|
+
.hwb-center { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; overflow-y: auto; text-align: center; }
|
|
151
|
+
.hwb-blank { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-tertiary); }
|
|
152
|
+
.hwb-blank-title { font-size: 13.5px; font-weight: 600; color: var(--dsw-alias-label-primary); }
|
|
153
|
+
.hwb-blank-desc { max-width: 320px; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 1.7; }
|
|
154
|
+
.hwb-recent { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; text-align: left; }
|
|
155
|
+
.hwb-recent-label { padding: 0 8px 2px; color: var(--dsw-alias-label-tertiary); font-size: 11px; }
|
|
156
|
+
.hwb-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dsw-alias-border-l1); border-top-color: var(--dsw-alias-state-business-primary, #4d6bfe); animation: hwb-spin 700ms linear infinite; }
|
|
64
157
|
|
|
158
|
+
/* ── Corner trigger ───────────────────────────────────────────────────────── */
|
|
159
|
+
.hwb-trigger {
|
|
160
|
+
position: fixed; top: 8px;
|
|
161
|
+
right: calc(var(--dsh-sidebar-width, 0px) + var(--hwb-panel-width, 0px) + 12px);
|
|
162
|
+
z-index: 10000; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
|
|
163
|
+
border: none; border-radius: 8px; background: transparent;
|
|
164
|
+
color: var(--dsw-alias-label-secondary); cursor: pointer; pointer-events: auto;
|
|
165
|
+
transition: right var(--ds-transition-duration-slow, 200ms) var(--ds-ease-in-out, ease), background 120ms ease, color 120ms ease;
|
|
166
|
+
}
|
|
167
|
+
.hwb-trigger:hover { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
|
|
168
|
+
.hwb-trigger:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #4d6bfe); outline-offset: 1px; }
|
|
169
|
+
|
|
170
|
+
@keyframes hwb-spin { to { transform: rotate(360deg); } }
|
|
171
|
+
@keyframes hwb-pop { from { opacity: 0; transform: translateY(-4px); } }
|
|
172
|
+
@media (prefers-reduced-motion: reduce) {
|
|
173
|
+
html #root, .hwb-trigger, header:has([data-slot="conversation.session.header.utilities"]) { transition: none; }
|
|
174
|
+
.hwb-menu { animation: none; }
|
|
175
|
+
}
|
|
176
|
+
`
|
|
177
|
+
|
|
178
|
+
const applyStyles = () => {
|
|
179
|
+
if (typeof document === 'undefined') { try { styles.insert(CSS) } catch (e) {} return () => {} }
|
|
180
|
+
const stale = document.querySelectorAll('style[' + STYLE_MARK + '], style#html-workbench-dsh-plugin-styles')
|
|
181
|
+
for (let i = 0; i < stale.length; i += 1) {
|
|
182
|
+
const node = stale[i]
|
|
183
|
+
if (node.parentNode) node.parentNode.removeChild(node)
|
|
184
|
+
}
|
|
185
|
+
const el = document.createElement('style')
|
|
186
|
+
el.setAttribute(STYLE_MARK, STYLE_VERSION)
|
|
187
|
+
el.textContent = CSS
|
|
188
|
+
document.head.appendChild(el)
|
|
189
|
+
return () => { if (el.parentNode) el.parentNode.removeChild(el) }
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
if (typeof ctx.effect === 'function') ctx.effect(applyStyles, 'html-workbench: styles')
|
|
193
|
+
else applyStyles()
|
|
194
|
+
|
|
195
|
+
// ── Store ────────────────────────────────────────────────────────────────
|
|
65
196
|
const DEFAULT_WIDTH = 820
|
|
66
|
-
const MIN_WIDTH =
|
|
197
|
+
const MIN_WIDTH = 460
|
|
198
|
+
const WIDTH_KEY = 'hwb:panel-width'
|
|
199
|
+
|
|
200
|
+
const readWidth = () => {
|
|
201
|
+
try {
|
|
202
|
+
const raw = window.localStorage.getItem(WIDTH_KEY)
|
|
203
|
+
const n = raw == null ? NaN : parseInt(raw, 10)
|
|
204
|
+
return Number.isFinite(n) && n >= MIN_WIDTH ? n : DEFAULT_WIDTH
|
|
205
|
+
} catch (e) { return DEFAULT_WIDTH }
|
|
206
|
+
}
|
|
207
|
+
const writeWidth = (w) => { try { window.localStorage.setItem(WIDTH_KEY, String(w)) } catch (e) {} }
|
|
208
|
+
|
|
209
|
+
let resolveTimer = null
|
|
67
210
|
|
|
68
211
|
const store = {
|
|
69
212
|
open: false,
|
|
70
|
-
panelWidth:
|
|
71
|
-
expanded: false,
|
|
213
|
+
panelWidth: readWidth(),
|
|
72
214
|
assets: [],
|
|
73
215
|
running: false,
|
|
74
216
|
current: null,
|
|
217
|
+
nonce: 0,
|
|
75
218
|
loading: false,
|
|
219
|
+
refreshing: false,
|
|
76
220
|
error: null,
|
|
221
|
+
pathInput: '',
|
|
222
|
+
resolveState: 'idle',
|
|
77
223
|
listeners: [],
|
|
78
224
|
subscribe(fn) { this.listeners.push(fn); return () => { this.listeners = this.listeners.filter((f) => f !== fn) } },
|
|
79
|
-
set(
|
|
225
|
+
set(patch) {
|
|
226
|
+
// Only notify when something actually changed: the panel polls `list`
|
|
227
|
+
// every few seconds, and blindly re-rendering on every tick makes the
|
|
228
|
+
// input feel laggy and needlessly churns the preview subtree.
|
|
229
|
+
let dirty = false
|
|
230
|
+
const keys = Object.keys(patch)
|
|
231
|
+
for (let i = 0; i < keys.length; i += 1) {
|
|
232
|
+
const k = keys[i]
|
|
233
|
+
if (this[k] !== patch[k]) { this[k] = patch[k]; dirty = true }
|
|
234
|
+
}
|
|
235
|
+
if (dirty) this.listeners.forEach((fn) => { try { fn() } catch (e) {} })
|
|
236
|
+
},
|
|
80
237
|
}
|
|
81
238
|
|
|
82
239
|
const useStore = () => {
|
|
@@ -86,117 +243,364 @@ body[data-hwb-dragging] { user-select: none; }
|
|
|
86
243
|
}
|
|
87
244
|
|
|
88
245
|
const basename = (p) => {
|
|
89
|
-
const parts = String(p).split('/')
|
|
90
|
-
return parts[parts.length - 1] || p
|
|
246
|
+
const parts = String(p || '').split('/')
|
|
247
|
+
return parts[parts.length - 1] || String(p || '')
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
const dirname = (p) => {
|
|
251
|
+
const s = String(p || '')
|
|
252
|
+
const i = s.lastIndexOf('/')
|
|
253
|
+
return i <= 0 ? '/' : s.slice(0, i)
|
|
91
254
|
}
|
|
92
255
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
256
|
+
// Paths are long and their INFORMATIVE half is the tail, so clip the head
|
|
257
|
+
// (CSS ellipsis would eat the tail). The CSS ellipsis stays as a backstop
|
|
258
|
+
// for narrow panels.
|
|
259
|
+
const clipHead = (s, max) => {
|
|
260
|
+
const str = String(s || '')
|
|
261
|
+
return str.length <= max ? str : '…' + str.slice(str.length - max + 1)
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
const sameAssets = (a, b) => {
|
|
265
|
+
if (a === b) return true
|
|
266
|
+
if (!a || !b || a.length !== b.length) return false
|
|
267
|
+
for (let i = 0; i < a.length; i += 1) {
|
|
268
|
+
if (a[i].path !== b[i].path || a[i].kind !== b[i].kind || a[i].seq !== b[i].seq) return false
|
|
269
|
+
}
|
|
270
|
+
return true
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
const refresh = (explicit) => {
|
|
274
|
+
if (explicit) store.set({ refreshing: true })
|
|
275
|
+
return host.call('list').then((res) => {
|
|
276
|
+
if (res && res.ok) {
|
|
277
|
+
const next = res.assets || []
|
|
278
|
+
store.set({
|
|
279
|
+
assets: sameAssets(store.assets, next) ? store.assets : next,
|
|
280
|
+
running: !!res.running,
|
|
281
|
+
})
|
|
282
|
+
} else {
|
|
283
|
+
store.set({ error: (res && res.error) || 'list failed' })
|
|
284
|
+
}
|
|
97
285
|
}).catch((e) => store.set({ error: String(e && e.message ? e.message : e) }))
|
|
286
|
+
.then(() => { if (explicit) store.set({ refreshing: false }) })
|
|
98
287
|
}
|
|
99
288
|
|
|
100
289
|
const openFile = (path) => {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
290
|
+
const file = String(path || '').trim()
|
|
291
|
+
if (!file) return
|
|
292
|
+
store.set({ loading: true, error: null, pathInput: file })
|
|
293
|
+
host.call('open', { file: file }).then((res) => {
|
|
294
|
+
if (res && res.ok) {
|
|
295
|
+
// Bump the nonce so re-opening the SAME file remounts the iframe:
|
|
296
|
+
// with an unchanged `src` the browser would otherwise keep the old
|
|
297
|
+
// document and "打开" would look like a no-op.
|
|
298
|
+
store.set({
|
|
299
|
+
loading: false,
|
|
300
|
+
running: true,
|
|
301
|
+
resolveState: 'exists',
|
|
302
|
+
current: { path: file, url: res.url },
|
|
303
|
+
nonce: store.nonce + 1,
|
|
304
|
+
})
|
|
305
|
+
} else {
|
|
306
|
+
store.set({ loading: false, error: (res && res.error) || 'open failed' })
|
|
307
|
+
}
|
|
105
308
|
}).catch((e) => store.set({ loading: false, error: String(e && e.message ? e.message : e) }))
|
|
106
309
|
}
|
|
107
310
|
|
|
311
|
+
const STATE_TITLE = {
|
|
312
|
+
exists: '文件存在',
|
|
313
|
+
missing: '未找到该文件',
|
|
314
|
+
invalid: '仅支持 .html / .htm 文件',
|
|
315
|
+
checking: '检测中…',
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
const checkPath = (value) => {
|
|
319
|
+
const trimmed = (value || '').trim()
|
|
320
|
+
if (resolveTimer) { clearTimeout(resolveTimer); resolveTimer = null }
|
|
321
|
+
if (!trimmed) { store.set({ resolveState: 'idle' }); return }
|
|
322
|
+
store.set({ resolveState: 'checking' })
|
|
323
|
+
resolveTimer = setTimeout(() => {
|
|
324
|
+
resolveTimer = null
|
|
325
|
+
host.call('resolve', { file: trimmed }).then((res) => {
|
|
326
|
+
if (!res || res.ok === false) { store.set({ resolveState: 'idle' }); return }
|
|
327
|
+
if (!res.isHtml) store.set({ resolveState: 'invalid' })
|
|
328
|
+
else if (res.exists === true) store.set({ resolveState: 'exists' })
|
|
329
|
+
else if (res.exists === false) store.set({ resolveState: 'missing' })
|
|
330
|
+
else store.set({ resolveState: 'idle' })
|
|
331
|
+
}).catch(() => store.set({ resolveState: 'idle' }))
|
|
332
|
+
}, 300)
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// ── Icons ────────────────────────────────────────────────────────────────
|
|
336
|
+
const icon = (size, children, extra) => {
|
|
337
|
+
const props = {
|
|
338
|
+
width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
|
|
339
|
+
stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round',
|
|
340
|
+
strokeLinejoin: 'round', 'aria-hidden': true,
|
|
341
|
+
}
|
|
342
|
+
if (extra) Object.assign(props, extra)
|
|
343
|
+
return React.createElement('svg', props, children)
|
|
344
|
+
}
|
|
345
|
+
const path = (d, key) => React.createElement('path', { d: d, key: key })
|
|
346
|
+
|
|
347
|
+
const I_CLOSE = icon(15, [path('M18 6 6 18', 'a'), path('m6 6 12 12', 'b')])
|
|
348
|
+
const I_REFRESH = icon(15, [path('M21 12a9 9 0 1 1-3.2-6.9', 'a'), path('M21 4v5h-5', 'b')])
|
|
349
|
+
const I_EXTERNAL = icon(15, [path('M15 3h6v6', 'a'), path('M10 14 21 3', 'b'), path('M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5', 'c')])
|
|
350
|
+
const I_CARET = icon(14, [path('m6 9 6 6 6-6', 'a')])
|
|
351
|
+
const I_CHECK = icon(14, [path('M20 6 9 17l-5-5', 'a')], { strokeWidth: 2.2 })
|
|
352
|
+
const I_MISSING = icon(14, [path('M18 6 6 18', 'a'), path('m6 6 12 12', 'b')], { strokeWidth: 2.2 })
|
|
353
|
+
const I_WARN = icon(14, [path('M12 9v4', 'a'), path('M12 17h.01', 'b'), path('M10.3 3.9 2.4 17.5A1.8 1.8 0 0 0 4 20.2h16a1.8 1.8 0 0 0 1.6-2.7L13.7 3.9a1.8 1.8 0 0 0-3.4 0Z', 'c')])
|
|
354
|
+
const I_LOADING = icon(14, [React.createElement('circle', { cx: 12, cy: 12, r: 9, strokeOpacity: .25, key: 'a' }), path('M21 12a9 9 0 0 0-9-9', 'b')], { strokeWidth: 2.2 })
|
|
355
|
+
const I_FILE = icon(14, [path('M14 3v5h5', 'a'), path('M15 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z', 'b')])
|
|
356
|
+
const I_ALERT = icon(14, [React.createElement('circle', { cx: 12, cy: 12, r: 9, key: 'a' }), path('M12 8v4', 'b'), path('M12 16h.01', 'c')])
|
|
357
|
+
const I_BLANK = icon(22, [path('M14 3v5h5', 'a'), path('M15 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z', 'b'), path('m9 15 1.8-2.2L12.4 15l1.4-1.8', 'c')])
|
|
358
|
+
const I_TRIGGER = icon(17, [
|
|
359
|
+
React.createElement('rect', { x: 2.5, y: 4, width: 19, height: 14, rx: 2.4, key: 'a' }),
|
|
360
|
+
path('M2.5 8.4h19', 'b'),
|
|
361
|
+
path('M8 21h8', 'c'),
|
|
362
|
+
path('M12 18v3', 'd'),
|
|
363
|
+
])
|
|
364
|
+
|
|
365
|
+
const STATE_ICON = { exists: I_CHECK, missing: I_MISSING, invalid: I_WARN, checking: I_LOADING }
|
|
366
|
+
|
|
367
|
+
// ── Resize ───────────────────────────────────────────────────────────────
|
|
108
368
|
const startResize = (e) => {
|
|
369
|
+
if (e.button !== undefined && e.button !== 0) return
|
|
109
370
|
e.preventDefault()
|
|
371
|
+
const handle = e.currentTarget
|
|
372
|
+
handle.setAttribute('data-active', '')
|
|
110
373
|
document.body.setAttribute('data-hwb-dragging', '')
|
|
111
|
-
const maxW = Math.max(MIN_WIDTH, window.innerWidth -
|
|
374
|
+
const maxW = () => Math.max(MIN_WIDTH, window.innerWidth - 80)
|
|
112
375
|
const onMove = (ev) => {
|
|
113
|
-
const w = window.innerWidth - ev.clientX
|
|
114
|
-
store.set({ panelWidth: Math.max(MIN_WIDTH, Math.min(w, maxW)) })
|
|
376
|
+
const w = Math.round(window.innerWidth - ev.clientX)
|
|
377
|
+
store.set({ panelWidth: Math.max(MIN_WIDTH, Math.min(w, maxW())) })
|
|
115
378
|
}
|
|
116
379
|
const onUp = () => {
|
|
380
|
+
handle.removeAttribute('data-active')
|
|
117
381
|
document.body.removeAttribute('data-hwb-dragging')
|
|
118
382
|
document.removeEventListener('mousemove', onMove)
|
|
119
383
|
document.removeEventListener('mouseup', onUp)
|
|
384
|
+
writeWidth(store.panelWidth)
|
|
120
385
|
}
|
|
121
386
|
document.addEventListener('mousemove', onMove)
|
|
122
387
|
document.addEventListener('mouseup', onUp)
|
|
123
388
|
}
|
|
124
389
|
|
|
125
|
-
const
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
390
|
+
const nudgeWidth = (delta) => {
|
|
391
|
+
const maxW = Math.max(MIN_WIDTH, window.innerWidth - 80)
|
|
392
|
+
const w = Math.max(MIN_WIDTH, Math.min(store.panelWidth + delta, maxW))
|
|
393
|
+
store.set({ panelWidth: w })
|
|
394
|
+
writeWidth(w)
|
|
395
|
+
}
|
|
129
396
|
|
|
397
|
+
// ── Panel ────────────────────────────────────────────────────────────────
|
|
130
398
|
const Panel = () => {
|
|
131
399
|
const s = useStore()
|
|
400
|
+
const [menuOpen, setMenuOpen] = React.useState(false)
|
|
401
|
+
const [focused, setFocused] = React.useState(false)
|
|
402
|
+
const fieldRef = React.useRef(null)
|
|
403
|
+
const inputRef = React.useRef(null)
|
|
404
|
+
|
|
132
405
|
React.useEffect(() => {
|
|
133
406
|
const root = document.documentElement
|
|
134
|
-
root.style.setProperty('--hwb-panel-width', s.open ?
|
|
407
|
+
root.style.setProperty('--hwb-panel-width', s.open ? s.panelWidth + 'px' : '0px')
|
|
135
408
|
return () => { root.style.setProperty('--hwb-panel-width', '0px') }
|
|
136
409
|
}, [s.open, s.panelWidth])
|
|
410
|
+
|
|
137
411
|
React.useEffect(() => {
|
|
138
|
-
if (!s.open) return
|
|
412
|
+
if (!s.open) return undefined
|
|
139
413
|
refresh()
|
|
140
|
-
const dispose = ctx.interval(refresh,
|
|
414
|
+
const dispose = ctx.interval(refresh, 4000)
|
|
141
415
|
return () => { if (dispose) dispose() }
|
|
142
416
|
}, [s.open])
|
|
417
|
+
|
|
418
|
+
// Drop any in-flight path check when the panel closes.
|
|
419
|
+
React.useEffect(() => () => { if (resolveTimer) { clearTimeout(resolveTimer); resolveTimer = null } }, [])
|
|
420
|
+
|
|
421
|
+
React.useEffect(() => {
|
|
422
|
+
if (!menuOpen) return undefined
|
|
423
|
+
const onDown = (e) => { if (fieldRef.current && !fieldRef.current.contains(e.target)) setMenuOpen(false) }
|
|
424
|
+
const onKey = (e) => { if (e.key === 'Escape') { setMenuOpen(false); if (inputRef.current) inputRef.current.focus() } }
|
|
425
|
+
document.addEventListener('mousedown', onDown)
|
|
426
|
+
document.addEventListener('keydown', onKey)
|
|
427
|
+
return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey) }
|
|
428
|
+
}, [menuOpen])
|
|
429
|
+
|
|
143
430
|
if (!s.open) return null
|
|
144
431
|
|
|
145
432
|
const assets = s.assets || []
|
|
146
|
-
const
|
|
147
|
-
const
|
|
148
|
-
const
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
433
|
+
const trimmed = (s.pathInput || '').trim()
|
|
434
|
+
const currentPath = s.current ? s.current.path : null
|
|
435
|
+
const submit = () => { if (trimmed) { setMenuOpen(false); openFile(trimmed) } }
|
|
436
|
+
const pick = (p) => { setMenuOpen(false); store.set({ pathInput: p }); openFile(p) }
|
|
437
|
+
|
|
438
|
+
const assetRow = (a, inMenu) => React.createElement('button', {
|
|
439
|
+
key: a.id || a.path,
|
|
440
|
+
type: 'button',
|
|
441
|
+
className: 'hwb-item',
|
|
442
|
+
'data-active': a.path === currentPath ? '' : undefined,
|
|
443
|
+
title: a.path,
|
|
444
|
+
onClick: () => pick(a.path),
|
|
445
|
+
},
|
|
446
|
+
I_FILE,
|
|
447
|
+
React.createElement('span', { className: 'hwb-item-main' },
|
|
448
|
+
React.createElement('span', { className: 'hwb-item-name' }, basename(a.path)),
|
|
449
|
+
React.createElement('span', { className: 'hwb-item-path' }, clipHead(dirname(a.path), 52)),
|
|
450
|
+
),
|
|
451
|
+
inMenu && a.kind ? React.createElement('span', { className: 'hwb-tag', 'data-kind': a.kind }, a.kind === 'create' ? '新建' : '编辑') : null,
|
|
452
|
+
)
|
|
453
|
+
|
|
454
|
+
const body = s.loading
|
|
455
|
+
? React.createElement('div', { className: 'hwb-center' },
|
|
456
|
+
React.createElement('div', { className: 'hwb-spinner' }),
|
|
457
|
+
React.createElement('div', { className: 'hwb-blank-desc' }, '正在启动 Workbench 服务…'),
|
|
156
458
|
)
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
React.createElement('div', { className: 'hwb-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
React.createElement('path', { d: 'M6 6l12 12' }),
|
|
459
|
+
: s.current && s.current.url
|
|
460
|
+
? React.createElement('iframe', {
|
|
461
|
+
key: 'frame-' + s.nonce,
|
|
462
|
+
className: 'hwb-frame',
|
|
463
|
+
src: s.current.url,
|
|
464
|
+
title: 'HTML Workbench — ' + basename(s.current.path),
|
|
465
|
+
})
|
|
466
|
+
: React.createElement('div', { className: 'hwb-center' },
|
|
467
|
+
React.createElement('div', { className: 'hwb-blank' }, I_BLANK),
|
|
468
|
+
React.createElement('div', null,
|
|
469
|
+
React.createElement('div', { className: 'hwb-blank-title' }, '还没有打开文件'),
|
|
470
|
+
React.createElement('div', { className: 'hwb-blank-desc' }, assets.length
|
|
471
|
+
? '在上方地址栏填入 .html 的绝对路径，或从下面的产物里挑一个开始可视化编辑。'
|
|
472
|
+
: '在上方地址栏填入 .html 的绝对路径开始可视化编辑。代理 write / edit 过的 .html 之后也会自动出现在这里。'),
|
|
172
473
|
),
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
:
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
474
|
+
assets.length
|
|
475
|
+
? React.createElement('div', { className: 'hwb-recent' },
|
|
476
|
+
React.createElement('div', { className: 'hwb-recent-label' }, '最近的 HTML 产物'),
|
|
477
|
+
assets.slice(0, 6).map((a) => assetRow(a, false)),
|
|
478
|
+
)
|
|
479
|
+
: null,
|
|
480
|
+
)
|
|
481
|
+
|
|
482
|
+
return React.createElement('div', {
|
|
483
|
+
className: 'hwb-panel',
|
|
484
|
+
style: { width: s.panelWidth + 'px', maxWidth: 'calc(100vw - 24px)' },
|
|
485
|
+
role: 'complementary',
|
|
486
|
+
'aria-label': 'HTML Workbench',
|
|
487
|
+
},
|
|
488
|
+
React.createElement('div', {
|
|
489
|
+
className: 'hwb-resize',
|
|
490
|
+
role: 'separator',
|
|
491
|
+
'aria-orientation': 'vertical',
|
|
492
|
+
'aria-label': '调整面板宽度',
|
|
493
|
+
tabIndex: 0,
|
|
494
|
+
title: '拖动调整宽度（双击复位）',
|
|
495
|
+
onMouseDown: startResize,
|
|
496
|
+
onDoubleClick: () => { store.set({ panelWidth: DEFAULT_WIDTH }); writeWidth(DEFAULT_WIDTH) },
|
|
497
|
+
onKeyDown: (e) => {
|
|
498
|
+
if (e.key === 'ArrowLeft') { e.preventDefault(); nudgeWidth(32) }
|
|
499
|
+
else if (e.key === 'ArrowRight') { e.preventDefault(); nudgeWidth(-32) }
|
|
500
|
+
},
|
|
501
|
+
}),
|
|
502
|
+
|
|
503
|
+
React.createElement('div', { className: 'hwb-chrome' },
|
|
504
|
+
React.createElement('div', { className: 'hwb-idrow' },
|
|
505
|
+
React.createElement('div', { className: 'hwb-brand' },
|
|
506
|
+
React.createElement('span', {
|
|
507
|
+
className: 'hwb-dot',
|
|
508
|
+
'data-on': s.running ? '' : undefined,
|
|
509
|
+
'data-off': !s.running ? '' : undefined,
|
|
510
|
+
title: s.running ? '本地服务运行中' : '本地服务未就绪',
|
|
511
|
+
}),
|
|
512
|
+
React.createElement('span', { className: 'hwb-name' }, 'HTML Workbench'),
|
|
513
|
+
),
|
|
514
|
+
currentPath ? React.createElement('span', { className: 'hwb-sep' }) : null,
|
|
515
|
+
currentPath
|
|
516
|
+
? React.createElement('span', { className: 'hwb-filechip', title: currentPath }, I_FILE, React.createElement('span', null, basename(currentPath)))
|
|
517
|
+
: null,
|
|
518
|
+
React.createElement('span', { className: 'hwb-spacer' }),
|
|
519
|
+
React.createElement('div', { className: 'hwb-actions' },
|
|
520
|
+
React.createElement('button', {
|
|
521
|
+
type: 'button', className: 'hwb-icon', title: '刷新产物列表',
|
|
522
|
+
'aria-label': '刷新产物列表', 'data-spin': s.refreshing ? '' : undefined,
|
|
523
|
+
onClick: () => refresh(true),
|
|
524
|
+
}, I_REFRESH),
|
|
525
|
+
React.createElement('button', {
|
|
526
|
+
type: 'button', className: 'hwb-icon', title: '在浏览器标签页中打开',
|
|
527
|
+
'aria-label': '在浏览器标签页中打开', disabled: !(s.current && s.current.url),
|
|
528
|
+
onClick: () => { if (s.current && s.current.url) window.open(s.current.url, '_blank', 'noopener') },
|
|
529
|
+
}, I_EXTERNAL),
|
|
530
|
+
React.createElement('button', {
|
|
531
|
+
type: 'button', className: 'hwb-icon', title: '关闭面板',
|
|
532
|
+
'aria-label': '关闭面板', onClick: () => store.set({ open: false }),
|
|
533
|
+
}, I_CLOSE),
|
|
189
534
|
),
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
535
|
+
),
|
|
536
|
+
|
|
537
|
+
React.createElement('div', { className: 'hwb-toolbar' },
|
|
538
|
+
React.createElement('div', { className: 'hwb-fieldwrap', ref: fieldRef },
|
|
539
|
+
React.createElement('div', { className: 'hwb-field', 'data-focus': focused ? '' : undefined },
|
|
540
|
+
React.createElement('input', {
|
|
541
|
+
ref: inputRef,
|
|
542
|
+
className: 'hwb-input',
|
|
543
|
+
type: 'text',
|
|
544
|
+
placeholder: '/absolute/path/page.html',
|
|
545
|
+
value: s.pathInput,
|
|
546
|
+
spellCheck: false,
|
|
547
|
+
autoComplete: 'off',
|
|
548
|
+
'aria-label': 'HTML 文件绝对路径',
|
|
549
|
+
onChange: (e) => { const v = e.target.value; store.set({ pathInput: v }); checkPath(v) },
|
|
550
|
+
onKeyDown: (e) => {
|
|
551
|
+
if (e.key === 'Enter') submit()
|
|
552
|
+
else if (e.key === 'ArrowDown' && assets.length) { e.preventDefault(); setMenuOpen(true) }
|
|
553
|
+
},
|
|
554
|
+
onFocus: () => { setFocused(true); if (assets.length && !trimmed) setMenuOpen(true) },
|
|
555
|
+
onBlur: () => setFocused(false),
|
|
556
|
+
}),
|
|
557
|
+
s.resolveState !== 'idle'
|
|
558
|
+
? React.createElement('span', {
|
|
559
|
+
className: 'hwb-state',
|
|
560
|
+
'data-state': s.resolveState,
|
|
561
|
+
title: STATE_TITLE[s.resolveState] || '',
|
|
562
|
+
}, STATE_ICON[s.resolveState] || null)
|
|
563
|
+
: null,
|
|
564
|
+
React.createElement('button', {
|
|
565
|
+
type: 'button',
|
|
566
|
+
className: 'hwb-caret',
|
|
567
|
+
'aria-expanded': menuOpen,
|
|
568
|
+
'aria-haspopup': 'listbox',
|
|
569
|
+
title: '历史 HTML 产物' + (assets.length ? '（' + assets.length + '）' : ''),
|
|
570
|
+
onClick: () => setMenuOpen((v) => !v),
|
|
571
|
+
}, I_CARET),
|
|
572
|
+
),
|
|
573
|
+
menuOpen
|
|
574
|
+
? React.createElement('div', { className: 'hwb-menu', role: 'listbox' },
|
|
575
|
+
React.createElement('div', { className: 'hwb-menu-head' },
|
|
576
|
+
React.createElement('span', null, 'HTML 产物'),
|
|
577
|
+
React.createElement('span', null, assets.length ? assets.length + ' 个' : '空'),
|
|
578
|
+
),
|
|
579
|
+
assets.length
|
|
580
|
+
? React.createElement('div', { className: 'hwb-menu-body' }, assets.map((a) => assetRow(a, true)))
|
|
581
|
+
: React.createElement('div', { className: 'hwb-menu-empty' }, '暂无产物', React.createElement('br'), '代理 write / edit 过的 .html 会出现在这里'),
|
|
582
|
+
)
|
|
583
|
+
: null,
|
|
193
584
|
),
|
|
585
|
+
React.createElement('button', {
|
|
586
|
+
type: 'button', className: 'hwb-btn hwb-btn-primary',
|
|
587
|
+
disabled: !trimmed || s.loading, onClick: submit,
|
|
588
|
+
}, '打开'),
|
|
194
589
|
),
|
|
195
|
-
s.expanded ? React.createElement('div', { className: 'hwb-docklist' },
|
|
196
|
-
items.length ? items : React.createElement('div', { className: 'hwb-dockempty' }, '暂无 HTML 产物 — 代理 write/edit 的 .html 文件会出现在这里。'),
|
|
197
|
-
s.error ? React.createElement('div', { className: 'hwb-error' }, s.error) : null,
|
|
198
|
-
) : null,
|
|
199
590
|
),
|
|
591
|
+
|
|
592
|
+
s.error
|
|
593
|
+
? React.createElement('div', { className: 'hwb-banner', role: 'alert' },
|
|
594
|
+
I_ALERT,
|
|
595
|
+
React.createElement('span', { className: 'hwb-banner-text' }, s.error),
|
|
596
|
+
React.createElement('button', {
|
|
597
|
+
type: 'button', className: 'hwb-icon', title: '忽略', 'aria-label': '忽略',
|
|
598
|
+
onClick: () => store.set({ error: null }),
|
|
599
|
+
}, I_CLOSE),
|
|
600
|
+
)
|
|
601
|
+
: null,
|
|
602
|
+
|
|
603
|
+
React.createElement('div', { className: 'hwb-body' }, body),
|
|
200
604
|
)
|
|
201
605
|
}
|
|
202
606
|
|
|
@@ -207,13 +611,10 @@ body[data-hwb-dragging] { user-select: none; }
|
|
|
207
611
|
type: 'button',
|
|
208
612
|
className: 'hwb-trigger',
|
|
209
613
|
title: 'HTML Workbench',
|
|
210
|
-
'aria-
|
|
614
|
+
'aria-label': '打开 HTML Workbench',
|
|
615
|
+
'aria-expanded': false,
|
|
211
616
|
onClick: () => { store.set({ open: true }); refresh() },
|
|
212
|
-
},
|
|
213
|
-
React.createElement('rect', { x: 2, y: 4, width: 20, height: 14, rx: 2 }),
|
|
214
|
-
React.createElement('path', { d: 'M8 21h8' }),
|
|
215
|
-
React.createElement('path', { d: 'M12 18v3' }),
|
|
216
|
-
))
|
|
617
|
+
}, I_TRIGGER)
|
|
217
618
|
}
|
|
218
619
|
|
|
219
620
|
slots.inject('shell.overlay', () => slots.register(
|