@hozu/devtools 0.10.0

package/dist/overlay/style.d.ts

@@ -0,0 +1,3 @@
+export declare const css = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.root {\n  --red: #fb3a0e; --green: #2fa36b; --paper: #f1ede4;\n  --bg: #111010; --bg-2: #1a1918; --bg-3: #0b0a0a; --bench: #0b0a0a; --tint: 241, 237, 228;\n  --text: #ece8df; --mute: #9a948a; --faint: #6f695f; --accent: #ff8a66; --ok: #5fc995;\n  --code: #cfc9be; --code-num: #5f5a53; --line: rgba(241, 237, 228, 0.1); --line-2: rgba(241, 237, 228, 0.16);\n  color-scheme: dark;\n  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font: 13px/1.45 var(--sans); color: var(--text); -webkit-font-smoothing: antialiased;\n  position: fixed; inset: 0; pointer-events: none; z-index: 2147483647;\n}\n.root[data-theme=\"light\"] {\n  --bg: #fbfaf7; --bg-2: #f1ede4; --bg-3: #ffffff; --bench: #e6e1d7; --tint: 17, 16, 16;\n  --text: #111010; --mute: #6b655c; --faint: #9a948a; --accent: #c42d06; --ok: #1f7a4f;\n  --code: #2b2724; --code-num: #a8a196; --line: rgba(17, 16, 16, 0.1); --line-2: rgba(17, 16, 16, 0.16);\n  color-scheme: light;\n}\n.root[data-theme=\"light\"] .dock { box-shadow: 0 8px 24px rgba(17, 16, 16, 0.14), 0 1px 2px rgba(17, 16, 16, 0.1); }\n.root[data-theme=\"light\"] .panel { box-shadow: 0 16px 48px rgba(17, 16, 16, 0.14), 0 2px 6px rgba(17, 16, 16, 0.08); }\n.root[data-theme=\"light\"] .sizer { box-shadow: 0 0 0 1px var(--line-2), 0 20px 60px rgba(17, 16, 16, 0.18); }\n.root[data-theme=\"light\"] .grip { box-shadow: inset 0 0 0 1px rgba(17, 16, 16, 0.12); }\nbutton { font: inherit; color: inherit; cursor: pointer; }\nbutton:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }\n\n.panel[hidden], .dock[hidden], .bench[hidden] { display: none; }\n.bench {\n  position: fixed; inset: 0; pointer-events: auto; display: grid; grid-template-columns: 280px 1fr 400px;\n  background: var(--bench); color: var(--text);\n}\n.bench-left { grid-column: 1; overflow: auto; border-right: 1px solid var(--line); background: var(--bg); }\n.bench-left .head { position: static; }\n.bench-left .close { display: none; }\n.bench-center { grid-column: 2; display: grid; grid-template-rows: auto 1fr; min-width: 0; }\n.bench-bar {\n  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg);\n  white-space: nowrap; min-width: 0; overflow: hidden;\n}\n.bench-bar > * { flex: none; }\n.bench-bar .seg { display: flex; background: rgba(var(--tint), 0.06); border-radius: 999px; padding: 2px; }\n.bench-bar button.mode, .bench-bar button.act {\n  background: none; border: 0; border-radius: 999px; padding: 5px 11px; font: 500 12.5px/1.2 var(--sans); color: var(--mute);\n}\n.bench-bar button.mode[aria-pressed=\"true\"] { background: rgba(var(--tint), 0.14); color: var(--text); }\n.bench-bar button.act:hover, .bench-bar button.mode:hover { color: var(--text); }\n.bench-bar select {\n  height: 28px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-3); color: var(--text);\n  font: 500 12px/1 var(--sans); padding: 0 10px;\n}\n.bench-bar .size { font: 12px/1 var(--mono); color: var(--mute); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.bench-bar .spacer { flex: 1 1 0; min-width: 0; }\n.bench-bar .count:not(:empty) {\n  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;\n  border-radius: 999px; background: var(--red); color: #fff; font: 600 10.5px/1 var(--sans);\n}\n.bench-bar .exit { border: 1px solid var(--line-2) !important; }\n.bench-bar .previewing { border: 0; border-radius: 999px; background: var(--red); color: #fff; padding: 5px 12px; font: 500 12.5px/1.2 var(--sans); }\n.stage { display: grid; place-items: center; overflow: hidden; min-height: 0;\n  background-image: radial-gradient(rgba(var(--tint), 0.07) 1px, transparent 1px); background-size: 16px 16px; }\n.sizer { position: relative; box-shadow: 0 0 0 1px var(--line-2), 0 20px 60px rgba(0, 0, 0, 0.45); border-radius: 6px; background: #fff; }\n.sizer iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; border-radius: 6px; }\n.sizer.dragging iframe { pointer-events: none; }\n.sizer.dragging { user-select: none; }\n.resize {\n  position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; border-radius: 999px; cursor: nwse-resize;\n  background: var(--red); box-shadow: 0 0 0 3px var(--bench); touch-action: none;\n}\n.root.benching .panel {\n  top: 0; right: 0; bottom: 0; width: 400px; max-height: none; border-radius: 0; border-width: 0 0 0 1px;\n  box-shadow: none;\n}\n\n.dock {\n  position: fixed; pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 4px;\n  background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 999px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);\n  user-select: none; touch-action: none;\n}\n.grip {\n  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; cursor: grab; flex: none;\n  background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 16, 16, 0.08); margin-right: 4px;\n}\n.grip img { width: 18px; height: 18px; display: block; pointer-events: none; }\n.dock.folded { padding: 4px; }\n.dock.folded .grip { margin-right: 0; }\n.grip:active { cursor: grabbing; }\n.dock .seg { display: flex; background: rgba(var(--tint), 0.06); border-radius: 999px; padding: 2px; }\n.dock button.mode, .dock button.act {\n  background: none; border: 0; border-radius: 999px; padding: 5px 11px; font: 500 12.5px/1.2 var(--sans); color: var(--mute);\n}\n.dock button.mode[aria-pressed=\"true\"] { background: rgba(var(--tint), 0.14); color: var(--text); }\n.dock button.mode:hover, .dock button.act:hover { color: var(--text); }\n.dock button.act:hover { background: rgba(var(--tint), 0.06); }\n.dock .count:not(:empty) {\n  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;\n  border-radius: 999px; background: var(--red); color: #fff; font: 600 10.5px/1 var(--sans); vertical-align: 1px;\n}\n.dock .hint { padding: 0 10px 0 6px; font: 12px/1 var(--sans); color: var(--mute); white-space: nowrap; }\n\n.panel {\n  position: fixed; pointer-events: auto; top: 16px; right: 16px; width: min(400px, calc(100vw - 32px));\n  max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain;\n  background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px;\n  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);\n  scrollbar-width: thin; scrollbar-color: rgba(var(--tint), 0.2) transparent;\n}\n.root:not(.benching) .head { cursor: move; touch-action: none; }\n.head { position: sticky; top: 0; background: var(--bg); padding: 14px 16px 12px; border-bottom: 1px solid var(--line); z-index: 1; }\n.kicker { font: 500 12px/1.2 var(--sans); color: var(--mute); padding-right: 32px; }\n.title { margin: 4px 0 0; font: 600 16px/1.3 var(--sans); color: var(--text); word-break: break-word; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n.title code { font: 500 11.5px/1 var(--mono); background: rgba(251, 58, 14, 0.14); color: var(--accent); padding: 4px 7px; border-radius: 6px; }\n.close {\n  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 8px;\n  background: none; color: var(--mute); font: 400 18px/1 var(--sans);\n}\n.close:hover { background: rgba(var(--tint), 0.08); color: var(--text); }\n.picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }\n.picks button { border: 1px solid var(--line-2); background: none; border-radius: 6px; padding: 3px 8px; font: 500 11.5px/1.3 var(--mono); color: var(--mute); }\n.picks button[aria-current=\"true\"] { border-color: var(--red); color: var(--text); background: rgba(251, 58, 14, 0.1); }\n\n.sec { padding: 12px 16px; border-bottom: 1px solid var(--line); }\n.sec:last-child { border-bottom: 0; }\n.label { font: 500 12px/1 var(--sans); color: var(--mute); margin-bottom: 8px; }\n.loc { display: flex; gap: 8px; align-items: center; font: 12px/1.4 var(--mono); color: var(--text); }\n.loc > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.loc button {\n  flex: none; border: 1px solid var(--line-2); background: none; border-radius: 6px; padding: 2px 7px;\n  font: 500 11px/1.3 var(--sans); color: var(--mute);\n}\n.loc button:hover { color: var(--text); background: rgba(var(--tint), 0.06); }\n.loc + .loc { margin-top: 6px; }\n.loc .what { color: var(--mute); flex: none; width: 66px; font-family: var(--sans); }\n.warn { color: var(--accent); }\npre {\n  margin: 10px 0 0; padding: 8px 0; overflow: auto; background: var(--bg-3); color: var(--code);\n  border: 1px solid var(--line); border-radius: 8px; font: 11.5px/1.6 var(--mono); tab-size: 2;\n  scrollbar-width: thin; scrollbar-color: rgba(var(--tint), 0.2) transparent;\n}\npre span { display: block; padding: 0 10px; white-space: pre; }\npre span.on { background: rgba(251, 58, 14, 0.14); color: var(--text); box-shadow: inset 2px 0 0 var(--red); }\npre i { font-style: normal; color: var(--code-num); margin-right: 12px; }\n.row { font: 12px/1.5 var(--mono); color: var(--text); }\n.row b { font-weight: 500; color: var(--mute); font-family: var(--sans); }\n.chip {\n  display: inline-block; border-radius: 6px; padding: 2px 7px; margin: 0 4px 4px 0;\n  background: rgba(var(--tint), 0.08); font: 500 11.5px/1.4 var(--mono); color: var(--text);\n}\n.chip.red { background: rgba(251, 58, 14, 0.14); color: var(--accent); }\n.kids { display: grid; gap: 2px; margin-bottom: 8px; }\n.kids button {\n  text-align: left; border: 0; border-radius: 6px; background: none; padding: 4px 8px;\n  font: 12px/1.4 var(--mono); color: var(--text);\n}\n.kids button:hover { background: rgba(var(--tint), 0.06); }\n.nav { display: flex; gap: 6px; }\n.nav button {\n  border: 1px solid var(--line-2); background: none; border-radius: 6px; padding: 4px 10px;\n  font: 500 12px/1.2 var(--sans); color: var(--mute);\n}\n.nav button:hover { color: var(--text); background: rgba(var(--tint), 0.06); }\n\nfieldset { border: 0; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }\nfieldset label { display: flex; gap: 8px; align-items: center; font: 13px/1.3 var(--sans); color: var(--text); cursor: pointer; }\nfieldset input { accent-color: var(--red); width: 14px; height: 14px; margin: 0; }\ntextarea {\n  width: 100%; min-height: 80px; resize: vertical; border: 1px solid var(--line-2); border-radius: 8px;\n  background: var(--bg-3); padding: 8px 10px; font: 13px/1.45 var(--sans); color: var(--text);\n}\ntextarea:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(251, 58, 14, 0.2); }\ntextarea::placeholder { color: var(--faint); }\n.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }\n.actions button {\n  border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 8px; padding: 8px;\n  font: 500 13px/1.2 var(--sans); color: var(--text); transition: background 120ms, border-color 120ms;\n}\n.actions button:hover { background: rgba(var(--tint), 0.1); }\n.actions button.primary { grid-column: 1 / -1; background: var(--red); border-color: var(--red); color: #fff; padding: 9px 8px; }\n.actions button.primary:hover { background: #ff5126; border-color: #ff5126; }\n.status { margin-top: 10px; font: 12.5px/1.45 var(--sans); }\n.status.ok { color: var(--ok); }\n.status.err { color: var(--accent); }\n.status code { font: 12px/1.4 var(--mono); color: var(--text); }\n.empty { padding: 16px; font: 13px/1.5 var(--sans); color: var(--mute); }\n.empty b { color: var(--text); font-weight: 600; }\n.req {\n  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 10px 16px; border: 0;\n  border-bottom: 1px solid var(--line); align-items: baseline; width: 100%; text-align: left; background: none;\n}\n.req:hover { background: rgba(var(--tint), 0.04); }\n.req .open-req { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }\n.req .open-req:hover { text-decoration: underline; text-underline-offset: 2px; }\n.req .done { font-size: 12px; }\n.req .done:hover { color: var(--ok); }\n.req .n { font: 11.5px/1 var(--mono); color: var(--mute); }\n.req .t { font: 500 13px/1.35 var(--sans); color: var(--text); }\n.req .s { font: 500 11px/1 var(--sans); border-radius: 999px; padding: 3px 8px; }\n.req .s.open { background: rgba(251, 58, 14, 0.14); color: var(--accent); }\n.req .s.done { background: rgba(47, 163, 107, 0.16); color: var(--ok); }\n.req .l { grid-column: 2 / -1; font: 11.5px/1.4 var(--mono); color: var(--mute); word-break: break-all; }\n.tip { padding: 12px 16px; background: var(--bg-2); color: var(--mute); font: 12.5px/1.5 var(--sans); }\n.tip q { color: var(--text); font-weight: 500; }\n\n.quote { font-weight: 400; color: var(--mute); font-size: 14px; }\n.plain { font: 13px/1.5 var(--sans); color: var(--text); padding: 2px 0; }\n.plain + .plain { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; }\n.file { margin-top: 10px; font: 11.5px/1.4 var(--mono); color: var(--mute); display: flex; gap: 8px; align-items: center; }\nbutton.link { border: 0; background: none; padding: 0; color: var(--mute); font: 500 12px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 2px; }\nbutton.link:hover { color: var(--text); }\n.row-end { display: flex; justify-content: flex-end; margin-top: 6px; }\ntextarea.draft { margin-top: 8px; min-height: 200px; font: 11.5px/1.5 var(--mono); }\ntextarea[hidden], .draft[hidden] { display: none; }\nlegend { font: 500 13px/1.3 var(--sans); color: var(--text); padding: 0; margin-bottom: 6px; }\n.meta { font: 11px/1.4 var(--mono); color: var(--faint); word-break: break-all; }\n.back { border: 0; background: none; padding: 0 0 6px; color: var(--mute); font: 500 12px/1 var(--sans); }\n.back:hover { color: var(--text); }\npre.md { margin: 0; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; max-height: 46vh; color: var(--code); }\n.finish { display: flex; gap: 8px; margin-top: 10px; }\n.finish button { border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 8px; padding: 0 12px; font: 500 13px/1 var(--sans); color: var(--text); }\n.finish button:hover { background: rgba(47, 163, 107, 0.2); border-color: rgba(47, 163, 107, 0.5); }\ninput.outcome { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text); padding: 0 10px; font: 13px/1 var(--sans); }\ninput.outcome:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(251, 58, 14, 0.2); }\n.actions button.danger:hover { background: rgba(251, 58, 14, 0.16); border-color: rgba(251, 58, 14, 0.5); color: var(--accent); }\n.option { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }\n.option input { margin-top: 3px; accent-color: var(--red); }\n.option > span { display: grid; gap: 2px; }\n.option b { font: 500 13px/1.3 var(--sans); color: var(--text); }\n.option > span > span { font: 12px/1.4 var(--sans); color: var(--mute); }\n.keyrow { display: flex; gap: 10px; align-items: center; font: 12.5px/1.8 var(--sans); color: var(--mute); }\nkbd { font: 500 11px/1 var(--mono); color: var(--text); background: rgba(var(--tint), 0.08); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 6px; min-width: 92px; text-align: center; }\n.dock button.gear { font-size: 14px; padding: 5px 9px; }\n\n.look { display: flex; align-items: center; gap: 8px; min-height: 32px; }\n.look + .look { margin-top: 4px; }\n.look .what { flex: none; width: 128px; color: var(--mute); font: 12.5px/1.3 var(--sans); }\n.look select {\n  flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-3);\n  color: var(--text); font: 12px/1 var(--mono); padding: 0 6px;\n}\n.look select:focus { border-color: var(--red); outline: none; }\n.look .pick { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.look input[type=\"color\"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: none; cursor: pointer; }\n.look code { font: 11.5px/1 var(--mono); color: var(--mute); }\n.swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--line-2); padding: 0; }\n.swatch:hover { transform: scale(1.12); }\n.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }\n.chip-button { border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 999px; padding: 3px 10px; font: 500 12px/1.3 var(--sans); color: var(--text); }\n.chip-button:hover { background: rgba(var(--tint), 0.1); }\n.hint-text { flex: 1; font: 12px/1.4 var(--sans); color: var(--faint); }\n\n.find { margin-top: 10px; }\n.jump {\n  margin-top: 8px; border: 1px solid var(--line-2); background: rgba(251, 58, 14, 0.12); color: var(--accent);\n  border-radius: 999px; padding: 4px 10px; font: 500 12px/1.2 var(--sans);\n}\n.jump:hover { background: rgba(251, 58, 14, 0.2); }\n.find input { width: 100%; }\n.layers { padding: 6px 8px 10px; border-bottom: 1px solid var(--line); }\n.layer { display: flex; align-items: center; min-height: 26px; }\n.layer .indent { flex: none; }\n.layer .fold { flex: none; width: 18px; height: 22px; border: 0; background: none; color: var(--mute); padding: 0; font: 11px/1 var(--sans); }\n.layer .name {\n  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left; border: 0; border-radius: 6px;\n  background: none; padding: 3px 6px; font: 12.5px/1.35 var(--mono); color: var(--text); overflow: hidden; white-space: nowrap;\n}\n.layer .name:hover:not(:disabled) { background: rgba(var(--tint), 0.07); }\n.layer .name:disabled { cursor: default; }\n.layer.off .name { color: var(--faint); }\n.layer.group .name { color: var(--mute); font-family: var(--sans); font-size: 12px; }\n.badge-ref { font: 11px/1 var(--mono); color: var(--accent); }\n.badge-off { font: 11px/1 var(--sans); color: var(--faint); }\n.state { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font: 13px/1.35 var(--sans); }\n.state > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.state > button { flex: none; white-space: nowrap; }\n.state + .state { border-top: 1px solid var(--line); }\n.state.on span { color: var(--accent); }\n.dock .previewing {\n  border: 0; border-radius: 999px; background: var(--red); color: #fff; padding: 5px 12px; margin-left: 4px;\n  font: 500 12.5px/1.2 var(--sans); white-space: nowrap;\n}\n.dock .previewing:hover { background: #ff5126; }\n\n.tabs { display: flex; gap: 4px; margin-top: 10px; }\n.tab { border: 1px solid var(--line-2); background: none; border-radius: 999px; padding: 4px 10px; font: 500 12px/1.2 var(--sans); color: var(--mute); }\n.tab[aria-pressed=\"true\"] { background: rgba(var(--tint), 0.12); color: var(--text); border-color: transparent; }\n.item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: baseline; padding: 8px 0; }\n.item + .item { border-top: 1px solid var(--line); }\n.item .n { font: 11.5px/1 var(--mono); color: var(--mute); }\n.item .what { display: grid; gap: 2px; min-width: 0; }\n.item .what b { font: 500 13px/1.3 var(--sans); color: var(--text); }\n.item .what span { font: 12.5px/1.4 var(--sans); color: var(--mute); overflow-wrap: anywhere; }\n.notice { margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px; background: rgba(47, 163, 107, 0.14); color: var(--ok); font: 12.5px/1.45 var(--sans); }\n.notice code { font: 12px/1.4 var(--mono); color: var(--text); }\n.more { margin-top: 8px; color: var(--mute); font-size: 12.5px; }\n.export { margin-top: 4px; }\n.choice { display: grid; gap: 4px; }\n.choice button { border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 8px; padding: 9px 8px; font: 500 13px/1.2 var(--sans); color: var(--text); }\n.choice button:hover { background: rgba(var(--tint), 0.1); }\n.choice button.primary { background: var(--red); border-color: var(--red); color: #fff; }\n.choice button.primary:hover { background: #ff5126; }\n.choice .why { font: 12px/1.4 var(--sans); color: var(--mute); margin-bottom: 8px; }\n\n@media (max-width: 720px) { .dock .hint { display: none; } }\n@media (max-width: 420px) {\n  .dock button.mode, .dock button.act { padding: 5px 8px; }\n  .panel { top: 8px; right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 80px); }\n}\n@media (prefers-reduced-motion: reduce) { .actions button { transition: none; } }\n";
+export declare const outlineCss = "\n:host { all: initial; }\n.frame {\n  position: fixed; box-sizing: border-box; pointer-events: none; border: 1.5px solid #fb3a0e; border-radius: 3px;\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);\n}\n.frame.selected { border-width: 2px; background: rgba(251, 58, 14, 0.06); }\n.frame[hidden], .box[hidden] { display: none; }\n.box { position: fixed; box-sizing: border-box; pointer-events: none; }\n.tag {\n  position: absolute; left: -1px; bottom: 100%; margin-bottom: 6px; white-space: nowrap;\n  background: #111010; color: #ece8df; font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;\n  padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(241, 237, 228, 0.16);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n}\n.tag b { color: #fb3a0e; font-weight: 600; }\n.box.below .tag { bottom: auto; top: 100%; margin: 6px 0 0; }\n.badge {\n  position: absolute; right: 0; top: 0; transform: translate(50%, -50%);\n  min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px;\n  background: #fb3a0e; color: #fff; font: 600 11px/1 system-ui, -apple-system, sans-serif;\n}\n";
+//# sourceMappingURL=style.d.ts.map

package/dist/overlay/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG,k7oBAqTf,CAAA;AAED,eAAO,MAAM,UAAU,4nCAsBtB,CAAA"}

package/dist/overlay/style.js

@@ -0,0 +1,334 @@
+export const css = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.root {
+  --red: #fb3a0e; --green: #2fa36b; --paper: #f1ede4;
+  --bg: #111010; --bg-2: #1a1918; --bg-3: #0b0a0a; --bench: #0b0a0a; --tint: 241, 237, 228;
+  --text: #ece8df; --mute: #9a948a; --faint: #6f695f; --accent: #ff8a66; --ok: #5fc995;
+  --code: #cfc9be; --code-num: #5f5a53; --line: rgba(241, 237, 228, 0.1); --line-2: rgba(241, 237, 228, 0.16);
+  color-scheme: dark;
+  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font: 13px/1.45 var(--sans); color: var(--text); -webkit-font-smoothing: antialiased;
+  position: fixed; inset: 0; pointer-events: none; z-index: 2147483647;
+}
+.root[data-theme="light"] {
+  --bg: #fbfaf7; --bg-2: #f1ede4; --bg-3: #ffffff; --bench: #e6e1d7; --tint: 17, 16, 16;
+  --text: #111010; --mute: #6b655c; --faint: #9a948a; --accent: #c42d06; --ok: #1f7a4f;
+  --code: #2b2724; --code-num: #a8a196; --line: rgba(17, 16, 16, 0.1); --line-2: rgba(17, 16, 16, 0.16);
+  color-scheme: light;
+}
+.root[data-theme="light"] .dock { box-shadow: 0 8px 24px rgba(17, 16, 16, 0.14), 0 1px 2px rgba(17, 16, 16, 0.1); }
+.root[data-theme="light"] .panel { box-shadow: 0 16px 48px rgba(17, 16, 16, 0.14), 0 2px 6px rgba(17, 16, 16, 0.08); }
+.root[data-theme="light"] .sizer { box-shadow: 0 0 0 1px var(--line-2), 0 20px 60px rgba(17, 16, 16, 0.18); }
+.root[data-theme="light"] .grip { box-shadow: inset 0 0 0 1px rgba(17, 16, 16, 0.12); }
+button { font: inherit; color: inherit; cursor: pointer; }
+button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
+
+.panel[hidden], .dock[hidden], .bench[hidden] { display: none; }
+.bench {
+  position: fixed; inset: 0; pointer-events: auto; display: grid; grid-template-columns: 280px 1fr 400px;
+  background: var(--bench); color: var(--text);
+}
+.bench-left { grid-column: 1; overflow: auto; border-right: 1px solid var(--line); background: var(--bg); }
+.bench-left .head { position: static; }
+.bench-left .close { display: none; }
+.bench-center { grid-column: 2; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
+.bench-bar {
+  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg);
+  white-space: nowrap; min-width: 0; overflow: hidden;
+}
+.bench-bar > * { flex: none; }
+.bench-bar .seg { display: flex; background: rgba(var(--tint), 0.06); border-radius: 999px; padding: 2px; }
+.bench-bar button.mode, .bench-bar button.act {
+  background: none; border: 0; border-radius: 999px; padding: 5px 11px; font: 500 12.5px/1.2 var(--sans); color: var(--mute);
+}
+.bench-bar button.mode[aria-pressed="true"] { background: rgba(var(--tint), 0.14); color: var(--text); }
+.bench-bar button.act:hover, .bench-bar button.mode:hover { color: var(--text); }
+.bench-bar select {
+  height: 28px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-3); color: var(--text);
+  font: 500 12px/1 var(--sans); padding: 0 10px;
+}
+.bench-bar .size { font: 12px/1 var(--mono); color: var(--mute); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.bench-bar .spacer { flex: 1 1 0; min-width: 0; }
+.bench-bar .count:not(:empty) {
+  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;
+  border-radius: 999px; background: var(--red); color: #fff; font: 600 10.5px/1 var(--sans);
+}
+.bench-bar .exit { border: 1px solid var(--line-2) !important; }
+.bench-bar .previewing { border: 0; border-radius: 999px; background: var(--red); color: #fff; padding: 5px 12px; font: 500 12.5px/1.2 var(--sans); }
+.stage { display: grid; place-items: center; overflow: hidden; min-height: 0;
+  background-image: radial-gradient(rgba(var(--tint), 0.07) 1px, transparent 1px); background-size: 16px 16px; }
+.sizer { position: relative; box-shadow: 0 0 0 1px var(--line-2), 0 20px 60px rgba(0, 0, 0, 0.45); border-radius: 6px; background: #fff; }
+.sizer iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; border-radius: 6px; }
+.sizer.dragging iframe { pointer-events: none; }
+.sizer.dragging { user-select: none; }
+.resize {
+  position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; border-radius: 999px; cursor: nwse-resize;
+  background: var(--red); box-shadow: 0 0 0 3px var(--bench); touch-action: none;
+}
+.root.benching .panel {
+  top: 0; right: 0; bottom: 0; width: 400px; max-height: none; border-radius: 0; border-width: 0 0 0 1px;
+  box-shadow: none;
+}
+
+.dock {
+  position: fixed; pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 4px;
+  background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);
+  user-select: none; touch-action: none;
+}
+.grip {
+  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; cursor: grab; flex: none;
+  background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 16, 16, 0.08); margin-right: 4px;
+}
+.grip img { width: 18px; height: 18px; display: block; pointer-events: none; }
+.dock.folded { padding: 4px; }
+.dock.folded .grip { margin-right: 0; }
+.grip:active { cursor: grabbing; }
+.dock .seg { display: flex; background: rgba(var(--tint), 0.06); border-radius: 999px; padding: 2px; }
+.dock button.mode, .dock button.act {
+  background: none; border: 0; border-radius: 999px; padding: 5px 11px; font: 500 12.5px/1.2 var(--sans); color: var(--mute);
+}
+.dock button.mode[aria-pressed="true"] { background: rgba(var(--tint), 0.14); color: var(--text); }
+.dock button.mode:hover, .dock button.act:hover { color: var(--text); }
+.dock button.act:hover { background: rgba(var(--tint), 0.06); }
+.dock .count:not(:empty) {
+  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;
+  border-radius: 999px; background: var(--red); color: #fff; font: 600 10.5px/1 var(--sans); vertical-align: 1px;
+}
+.dock .hint { padding: 0 10px 0 6px; font: 12px/1 var(--sans); color: var(--mute); white-space: nowrap; }
+
+.panel {
+  position: fixed; pointer-events: auto; top: 16px; right: 16px; width: min(400px, calc(100vw - 32px));
+  max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain;
+  background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
+  scrollbar-width: thin; scrollbar-color: rgba(var(--tint), 0.2) transparent;
+}
+.root:not(.benching) .head { cursor: move; touch-action: none; }
+.head { position: sticky; top: 0; background: var(--bg); padding: 14px 16px 12px; border-bottom: 1px solid var(--line); z-index: 1; }
+.kicker { font: 500 12px/1.2 var(--sans); color: var(--mute); padding-right: 32px; }
+.title { margin: 4px 0 0; font: 600 16px/1.3 var(--sans); color: var(--text); word-break: break-word; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.title code { font: 500 11.5px/1 var(--mono); background: rgba(251, 58, 14, 0.14); color: var(--accent); padding: 4px 7px; border-radius: 6px; }
+.close {
+  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 8px;
+  background: none; color: var(--mute); font: 400 18px/1 var(--sans);
+}
+.close:hover { background: rgba(var(--tint), 0.08); color: var(--text); }
+.picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.picks button { border: 1px solid var(--line-2); background: none; border-radius: 6px; padding: 3px 8px; font: 500 11.5px/1.3 var(--mono); color: var(--mute); }
+.picks button[aria-current="true"] { border-color: var(--red); color: var(--text); background: rgba(251, 58, 14, 0.1); }
+
+.sec { padding: 12px 16px; border-bottom: 1px solid var(--line); }
+.sec:last-child { border-bottom: 0; }
+.label { font: 500 12px/1 var(--sans); color: var(--mute); margin-bottom: 8px; }
+.loc { display: flex; gap: 8px; align-items: center; font: 12px/1.4 var(--mono); color: var(--text); }
+.loc > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.loc button {
+  flex: none; border: 1px solid var(--line-2); background: none; border-radius: 6px; padding: 2px 7px;
+  font: 500 11px/1.3 var(--sans); color: var(--mute);
+}
+.loc button:hover { color: var(--text); background: rgba(var(--tint), 0.06); }
+.loc + .loc { margin-top: 6px; }
+.loc .what { color: var(--mute); flex: none; width: 66px; font-family: var(--sans); }
+.warn { color: var(--accent); }
+pre {
+  margin: 10px 0 0; padding: 8px 0; overflow: auto; background: var(--bg-3); color: var(--code);
+  border: 1px solid var(--line); border-radius: 8px; font: 11.5px/1.6 var(--mono); tab-size: 2;
+  scrollbar-width: thin; scrollbar-color: rgba(var(--tint), 0.2) transparent;
+}
+pre span { display: block; padding: 0 10px; white-space: pre; }
+pre span.on { background: rgba(251, 58, 14, 0.14); color: var(--text); box-shadow: inset 2px 0 0 var(--red); }
+pre i { font-style: normal; color: var(--code-num); margin-right: 12px; }
+.row { font: 12px/1.5 var(--mono); color: var(--text); }
+.row b { font-weight: 500; color: var(--mute); font-family: var(--sans); }
+.chip {
+  display: inline-block; border-radius: 6px; padding: 2px 7px; margin: 0 4px 4px 0;
+  background: rgba(var(--tint), 0.08); font: 500 11.5px/1.4 var(--mono); color: var(--text);
+}
+.chip.red { background: rgba(251, 58, 14, 0.14); color: var(--accent); }
+.kids { display: grid; gap: 2px; margin-bottom: 8px; }
+.kids button {
+  text-align: left; border: 0; border-radius: 6px; background: none; padding: 4px 8px;
+  font: 12px/1.4 var(--mono); color: var(--text);
+}
+.kids button:hover { background: rgba(var(--tint), 0.06); }
+.nav { display: flex; gap: 6px; }
+.nav button {
+  border: 1px solid var(--line-2); background: none; border-radius: 6px; padding: 4px 10px;
+  font: 500 12px/1.2 var(--sans); color: var(--mute);
+}
+.nav button:hover { color: var(--text); background: rgba(var(--tint), 0.06); }
+
+fieldset { border: 0; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
+fieldset label { display: flex; gap: 8px; align-items: center; font: 13px/1.3 var(--sans); color: var(--text); cursor: pointer; }
+fieldset input { accent-color: var(--red); width: 14px; height: 14px; margin: 0; }
+textarea {
+  width: 100%; min-height: 80px; resize: vertical; border: 1px solid var(--line-2); border-radius: 8px;
+  background: var(--bg-3); padding: 8px 10px; font: 13px/1.45 var(--sans); color: var(--text);
+}
+textarea:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(251, 58, 14, 0.2); }
+textarea::placeholder { color: var(--faint); }
+.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
+.actions button {
+  border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 8px; padding: 8px;
+  font: 500 13px/1.2 var(--sans); color: var(--text); transition: background 120ms, border-color 120ms;
+}
+.actions button:hover { background: rgba(var(--tint), 0.1); }
+.actions button.primary { grid-column: 1 / -1; background: var(--red); border-color: var(--red); color: #fff; padding: 9px 8px; }
+.actions button.primary:hover { background: #ff5126; border-color: #ff5126; }
+.status { margin-top: 10px; font: 12.5px/1.45 var(--sans); }
+.status.ok { color: var(--ok); }
+.status.err { color: var(--accent); }
+.status code { font: 12px/1.4 var(--mono); color: var(--text); }
+.empty { padding: 16px; font: 13px/1.5 var(--sans); color: var(--mute); }
+.empty b { color: var(--text); font-weight: 600; }
+.req {
+  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 10px 16px; border: 0;
+  border-bottom: 1px solid var(--line); align-items: baseline; width: 100%; text-align: left; background: none;
+}
+.req:hover { background: rgba(var(--tint), 0.04); }
+.req .open-req { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
+.req .open-req:hover { text-decoration: underline; text-underline-offset: 2px; }
+.req .done { font-size: 12px; }
+.req .done:hover { color: var(--ok); }
+.req .n { font: 11.5px/1 var(--mono); color: var(--mute); }
+.req .t { font: 500 13px/1.35 var(--sans); color: var(--text); }
+.req .s { font: 500 11px/1 var(--sans); border-radius: 999px; padding: 3px 8px; }
+.req .s.open { background: rgba(251, 58, 14, 0.14); color: var(--accent); }
+.req .s.done { background: rgba(47, 163, 107, 0.16); color: var(--ok); }
+.req .l { grid-column: 2 / -1; font: 11.5px/1.4 var(--mono); color: var(--mute); word-break: break-all; }
+.tip { padding: 12px 16px; background: var(--bg-2); color: var(--mute); font: 12.5px/1.5 var(--sans); }
+.tip q { color: var(--text); font-weight: 500; }
+
+.quote { font-weight: 400; color: var(--mute); font-size: 14px; }
+.plain { font: 13px/1.5 var(--sans); color: var(--text); padding: 2px 0; }
+.plain + .plain { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; }
+.file { margin-top: 10px; font: 11.5px/1.4 var(--mono); color: var(--mute); display: flex; gap: 8px; align-items: center; }
+button.link { border: 0; background: none; padding: 0; color: var(--mute); font: 500 12px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 2px; }
+button.link:hover { color: var(--text); }
+.row-end { display: flex; justify-content: flex-end; margin-top: 6px; }
+textarea.draft { margin-top: 8px; min-height: 200px; font: 11.5px/1.5 var(--mono); }
+textarea[hidden], .draft[hidden] { display: none; }
+legend { font: 500 13px/1.3 var(--sans); color: var(--text); padding: 0; margin-bottom: 6px; }
+.meta { font: 11px/1.4 var(--mono); color: var(--faint); word-break: break-all; }
+.back { border: 0; background: none; padding: 0 0 6px; color: var(--mute); font: 500 12px/1 var(--sans); }
+.back:hover { color: var(--text); }
+pre.md { margin: 0; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; max-height: 46vh; color: var(--code); }
+.finish { display: flex; gap: 8px; margin-top: 10px; }
+.finish button { border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 8px; padding: 0 12px; font: 500 13px/1 var(--sans); color: var(--text); }
+.finish button:hover { background: rgba(47, 163, 107, 0.2); border-color: rgba(47, 163, 107, 0.5); }
+input.outcome { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--text); padding: 0 10px; font: 13px/1 var(--sans); }
+input.outcome:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(251, 58, 14, 0.2); }
+.actions button.danger:hover { background: rgba(251, 58, 14, 0.16); border-color: rgba(251, 58, 14, 0.5); color: var(--accent); }
+.option { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
+.option input { margin-top: 3px; accent-color: var(--red); }
+.option > span { display: grid; gap: 2px; }
+.option b { font: 500 13px/1.3 var(--sans); color: var(--text); }
+.option > span > span { font: 12px/1.4 var(--sans); color: var(--mute); }
+.keyrow { display: flex; gap: 10px; align-items: center; font: 12.5px/1.8 var(--sans); color: var(--mute); }
+kbd { font: 500 11px/1 var(--mono); color: var(--text); background: rgba(var(--tint), 0.08); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 6px; min-width: 92px; text-align: center; }
+.dock button.gear { font-size: 14px; padding: 5px 9px; }
+
+.look { display: flex; align-items: center; gap: 8px; min-height: 32px; }
+.look + .look { margin-top: 4px; }
+.look .what { flex: none; width: 128px; color: var(--mute); font: 12.5px/1.3 var(--sans); }
+.look select {
+  flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-3);
+  color: var(--text); font: 12px/1 var(--mono); padding: 0 6px;
+}
+.look select:focus { border-color: var(--red); outline: none; }
+.look .pick { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.look input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: none; cursor: pointer; }
+.look code { font: 11.5px/1 var(--mono); color: var(--mute); }
+.swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--line-2); padding: 0; }
+.swatch:hover { transform: scale(1.12); }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.chip-button { border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 999px; padding: 3px 10px; font: 500 12px/1.3 var(--sans); color: var(--text); }
+.chip-button:hover { background: rgba(var(--tint), 0.1); }
+.hint-text { flex: 1; font: 12px/1.4 var(--sans); color: var(--faint); }
+
+.find { margin-top: 10px; }
+.jump {
+  margin-top: 8px; border: 1px solid var(--line-2); background: rgba(251, 58, 14, 0.12); color: var(--accent);
+  border-radius: 999px; padding: 4px 10px; font: 500 12px/1.2 var(--sans);
+}
+.jump:hover { background: rgba(251, 58, 14, 0.2); }
+.find input { width: 100%; }
+.layers { padding: 6px 8px 10px; border-bottom: 1px solid var(--line); }
+.layer { display: flex; align-items: center; min-height: 26px; }
+.layer .indent { flex: none; }
+.layer .fold { flex: none; width: 18px; height: 22px; border: 0; background: none; color: var(--mute); padding: 0; font: 11px/1 var(--sans); }
+.layer .name {
+  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left; border: 0; border-radius: 6px;
+  background: none; padding: 3px 6px; font: 12.5px/1.35 var(--mono); color: var(--text); overflow: hidden; white-space: nowrap;
+}
+.layer .name:hover:not(:disabled) { background: rgba(var(--tint), 0.07); }
+.layer .name:disabled { cursor: default; }
+.layer.off .name { color: var(--faint); }
+.layer.group .name { color: var(--mute); font-family: var(--sans); font-size: 12px; }
+.badge-ref { font: 11px/1 var(--mono); color: var(--accent); }
+.badge-off { font: 11px/1 var(--sans); color: var(--faint); }
+.state { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font: 13px/1.35 var(--sans); }
+.state > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.state > button { flex: none; white-space: nowrap; }
+.state + .state { border-top: 1px solid var(--line); }
+.state.on span { color: var(--accent); }
+.dock .previewing {
+  border: 0; border-radius: 999px; background: var(--red); color: #fff; padding: 5px 12px; margin-left: 4px;
+  font: 500 12.5px/1.2 var(--sans); white-space: nowrap;
+}
+.dock .previewing:hover { background: #ff5126; }
+
+.tabs { display: flex; gap: 4px; margin-top: 10px; }
+.tab { border: 1px solid var(--line-2); background: none; border-radius: 999px; padding: 4px 10px; font: 500 12px/1.2 var(--sans); color: var(--mute); }
+.tab[aria-pressed="true"] { background: rgba(var(--tint), 0.12); color: var(--text); border-color: transparent; }
+.item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: baseline; padding: 8px 0; }
+.item + .item { border-top: 1px solid var(--line); }
+.item .n { font: 11.5px/1 var(--mono); color: var(--mute); }
+.item .what { display: grid; gap: 2px; min-width: 0; }
+.item .what b { font: 500 13px/1.3 var(--sans); color: var(--text); }
+.item .what span { font: 12.5px/1.4 var(--sans); color: var(--mute); overflow-wrap: anywhere; }
+.notice { margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px; background: rgba(47, 163, 107, 0.14); color: var(--ok); font: 12.5px/1.45 var(--sans); }
+.notice code { font: 12px/1.4 var(--mono); color: var(--text); }
+.more { margin-top: 8px; color: var(--mute); font-size: 12.5px; }
+.export { margin-top: 4px; }
+.choice { display: grid; gap: 4px; }
+.choice button { border: 1px solid var(--line-2); background: rgba(var(--tint), 0.04); border-radius: 8px; padding: 9px 8px; font: 500 13px/1.2 var(--sans); color: var(--text); }
+.choice button:hover { background: rgba(var(--tint), 0.1); }
+.choice button.primary { background: var(--red); border-color: var(--red); color: #fff; }
+.choice button.primary:hover { background: #ff5126; }
+.choice .why { font: 12px/1.4 var(--sans); color: var(--mute); margin-bottom: 8px; }
+
+@media (max-width: 720px) { .dock .hint { display: none; } }
+@media (max-width: 420px) {
+  .dock button.mode, .dock button.act { padding: 5px 8px; }
+  .panel { top: 8px; right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 80px); }
+}
+@media (prefers-reduced-motion: reduce) { .actions button { transition: none; } }
+`;
+export const outlineCss = `
+:host { all: initial; }
+.frame {
+  position: fixed; box-sizing: border-box; pointer-events: none; border: 1.5px solid #fb3a0e; border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
+}
+.frame.selected { border-width: 2px; background: rgba(251, 58, 14, 0.06); }
+.frame[hidden], .box[hidden] { display: none; }
+.box { position: fixed; box-sizing: border-box; pointer-events: none; }
+.tag {
+  position: absolute; left: -1px; bottom: 100%; margin-bottom: 6px; white-space: nowrap;
+  background: #111010; color: #ece8df; font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+  padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(241, 237, 228, 0.16);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+}
+.tag b { color: #fb3a0e; font-weight: 600; }
+.box.below .tag { bottom: auto; top: 100%; margin: 6px 0 0; }
+.badge {
+  position: absolute; right: 0; top: 0; transform: translate(50%, -50%);
+  min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px;
+  background: #fb3a0e; color: #fff; font: 600 11px/1 system-ui, -apple-system, sans-serif;
+}
+`;
+//# sourceMappingURL=style.js.map

package/dist/overlay/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqTlB,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;CAsBzB,CAAA"}

package/dist/overlay/text.d.ts

@@ -0,0 +1,9 @@
+export interface TextChange {
+    from: string;
+    to: string;
+}
+export declare function firstText(el: Element | null): string | null;
+export declare function previewText(el: Element | null, change: TextChange | undefined): void;
+export declare function restoreText(el: Element | null, change: TextChange | undefined): void;
+export declare function textSection(from: string, change: TextChange | undefined, plain: boolean, onChange: (change: TextChange | undefined) => void): HTMLElement;
+//# sourceMappingURL=text.d.ts.map

package/dist/overlay/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/overlay/text.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX;AASD,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAE3D;AAYD,wBAAgB,WAAW,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,EAAE,UAAU,GAAG,SAAS,QAE7E;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,EAAE,UAAU,GAAG,SAAS,QAE7E;AAED,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK,IAAI,GACjD,WAAW,CAsBb"}

package/dist/overlay/text.js

@@ -0,0 +1,51 @@
+import { h } from './dom.js';
+const ZH = '這是一段比較長的中文測試文字，用來檢查換行、截斷與對齊';
+const EN = 'A much longer English label to check how the layout wraps and truncates';
+function textNodes(el) {
+    return [...el.childNodes].filter((n) => n.nodeType === 3 && !!n.textContent?.trim());
+}
+export function firstText(el) {
+    return el ? (textNodes(el)[0]?.data.trim() ?? null) : null;
+}
+function put(el, find, value) {
+    if (!el)
+        return;
+    const nodes = textNodes(el);
+    const node = nodes.find((n) => find.includes(n.data.trim())) ?? (nodes.length === 1 ? nodes[0] : undefined);
+    if (!node)
+        return;
+    const lead = /^\s*/.exec(node.data)?.[0] ?? '';
+    const tail = /\s*$/.exec(node.data)?.[0] ?? '';
+    node.data = `${lead}${value}${tail}`;
+}
+export function previewText(el, change) {
+    if (change)
+        put(el, [change.from, change.to], change.to);
+}
+export function restoreText(el, change) {
+    if (change)
+        put(el, [change.to, change.from], change.from);
+}
+export function textSection(from, change, plain, onChange) {
+    const set = (to) => onChange(to === from ? undefined : { from, to });
+    const input = h('input', {
+        type: 'text',
+        class: 'outcome',
+        'aria-label': 'Text on the page',
+        onchange: (e) => set(e.target.value),
+    });
+    input.value = change?.to ?? from;
+    const chip = (label, to) => h('button', { class: 'chip-button', type: 'button', onclick: () => set(to) }, [label]);
+    return h('div', { class: 'sec' }, [
+        h('div', { class: 'label' }, [plain ? 'Text' : 'Text (preview)']),
+        input,
+        h('div', { class: 'chips' }, [
+            chip('Longer', Array.from({ length: 4 }, () => from).join(' ')),
+            chip('中文', ZH),
+            chip('English', EN),
+            change ? chip('Reset', from) : null,
+        ]),
+        h('div', { class: 'hint-text' }, ['Try other words to see how the layout copes. Kept in the request.']),
+    ]);
+}
+//# sourceMappingURL=text.js.map

package/dist/overlay/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/overlay/text.ts"],"names":[],"mappings":"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"}

package/dist/plain.d.ts

@@ -0,0 +1,10 @@
+import type { DevNode } from '@hozu/core/ir';
+import type { Scope } from './prompt.ts';
+export declare function tagName(tag: string): string;
+export declare function friendlyName(node: DevNode): string;
+export declare function describeFor(node: DevNode): string[];
+export declare function questionFor(node: DevNode): {
+    question: string;
+    options: Partial<Record<Scope, string>>;
+} | null;
+//# sourceMappingURL=plain.d.ts.map

package/dist/plain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plain.d.ts","sourceRoot":"","sources":["../src/plain.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AA2BxC,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG3C;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAQlD;AAgBD,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,CAuBnD;AAED,wBAAgB,WAAW,CACzB,IAAI,EAAE,OAAO,GACZ;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,GAAG,IAAI,CAiBtE"}

package/dist/plain.js

@@ -0,0 +1,103 @@
+const tags = {
+    a: 'Link',
+    button: 'Button',
+    form: 'Form',
+    img: 'Image',
+    input: 'Input',
+    textarea: 'Text box',
+    select: 'Dropdown',
+    label: 'Label',
+    p: 'Paragraph',
+    ul: 'List',
+    ol: 'List',
+    li: 'List item',
+    nav: 'Menu',
+    table: 'Table',
+    span: 'Text',
+    strong: 'Text',
+    em: 'Text',
+};
+const words = (name) => {
+    const spaced = name.replace(/([a-z0-9])([A-Z])/g, '$1 $2').toLowerCase();
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+};
+export function tagName(tag) {
+    if (/^h[1-6]$/.test(tag))
+        return 'Heading';
+    return tags[tag] ?? 'Area';
+}
+export function friendlyName(node) {
+    if (node.page)
+        return 'This page';
+    if (node.kind === 'text')
+        return node.source?.kind === 'data' ? 'Text from your data' : 'Text';
+    if (node.component)
+        return node.component.ref.split('.').pop() ?? 'Component';
+    if (node.tag && /^h[1-6]$/.test(node.tag))
+        return 'Heading';
+    if (node.tag && tags[node.tag])
+        return tags[node.tag];
+    if (node.kind === 'list')
+        return 'List';
+    return 'Area';
+}
+function shown(c) {
+    if (c.kind === 'when') {
+        const states = c.detail.replace(/^state in /, '').split(' | ');
+        return `Shown only while ${states.map((s) => words(s).toLowerCase()).join(' or ')}.`;
+    }
+    if (c.kind === 'if')
+        return 'Shown only when a condition holds.';
+    if (c.kind === 'query') {
+        if (c.detail.endsWith(' ready'))
+            return 'Shown once its data has loaded.';
+        if (c.detail.endsWith(' pending'))
+            return 'Shown while its data is loading.';
+        return `Shown when loading its data fails (${c.detail.split('failed.').pop()}).`;
+    }
+    return null;
+}
+export function describeFor(node) {
+    const out = [];
+    const c = node.component;
+    if (c && c.uses > 1)
+        out.push(`A shared ${friendlyName(node)}: the same design is used in ${c.uses} places.`);
+    const sources = node.source ? [node.source] : node.children.flatMap((x) => (x.source ? [x.source] : []));
+    for (const s of sources) {
+        if (s.kind === 'message' && (s.uses ?? 1) > 1)
+            out.push(`Its text is shared with ${s.uses - 1} other ${s.uses - 1 === 1 ? 'place' : 'places'}.`);
+        if (s.kind === 'data')
+            out.push('Its text comes from your data, not from the page design.');
+    }
+    if (node.conditions.some((x) => x.kind === 'each'))
+        out.push('One item of a list: changes apply to every item unless you say which.');
+    for (const x of node.conditions) {
+        const line = shown(x);
+        if (line)
+            out.push(line);
+    }
+    for (const e of node.events)
+        out.push(`When ${e.dom === 'submit' ? 'submitted' : `${e.dom}ed`}, it does “${words(e.event.split('.').pop() ?? e.event)}”.`);
+    if (node.page)
+        out.push('Its title and description are what search engines and shared links show.');
+    return out;
+}
+export function questionFor(node) {
+    const c = node.component;
+    const name = friendlyName(node);
+    const every = c ? { component: `Every ${name} (${c.uses} places)` } : {};
+    if (node.conditions.some((x) => x.kind === 'each'))
+        return {
+            question: c
+                ? `Change every item, only this one, or every ${name}?`
+                : 'Change every item in the list, or only this one?',
+            options: { items: 'Every item', this: 'Only this one', ...every },
+        };
+    if (c)
+        return {
+            question: `Change only this one, or every ${name} like it?`,
+            options: { this: 'Only this one', ...every },
+        };
+    return null;
+}
+//# sourceMappingURL=plain.js.map

package/dist/plain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plain.js","sourceRoot":"","sources":["../src/plain.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAA2B;IACnC,CAAC,EAAE,MAAM;IACT,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,OAAO;IACZ,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,OAAO;IACd,CAAC,EAAE,WAAW;IACd,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,WAAW;IACf,GAAG,EAAE,MAAM;IACX,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,MAAM;IACd,EAAE,EAAE,MAAM;CACX,CAAA;AAED,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,EAAE;IAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;IACxE,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AACzD,CAAC,CAAA;AAED,MAAM,UAAU,OAAO,CAAC,GAAW;IACjC,IAAI,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,SAAS,CAAA;IAC1C,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,MAAM,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAa;IACxC,IAAI,IAAI,CAAC,IAAI;QAAE,OAAO,WAAW,CAAA;IACjC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;QAAE,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAA;IAC9F,IAAI,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,WAAW,CAAA;IAC7E,IAAI,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,SAAS,CAAA;IAC3D,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAE,CAAA;IACtD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;QAAE,OAAO,MAAM,CAAA;IACvC,OAAO,MAAM,CAAA;AACf,CAAC;AAED,SAAS,KAAK,CAAC,CAAe;IAC5B,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QACtB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC9D,OAAO,oBAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAA;IACtF,CAAC;IACD,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI;QAAE,OAAO,oCAAoC,CAAA;IAChE,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACvB,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,OAAO,iCAAiC,CAAA;QACzE,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC;YAAE,OAAO,kCAAkC,CAAA;QAC5E,OAAO,sCAAsC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,IAAI,CAAA;IAClF,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAa;IACvC,MAAM,GAAG,GAAa,EAAE,CAAA;IACxB,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC;QACjB,GAAG,CAAC,IAAI,CAAC,YAAY,YAAY,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAA;IAC1F,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IACxG,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC;YAC3C,GAAG,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,IAAK,GAAG,CAAC,UAAU,CAAC,CAAC,IAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAA;QACrG,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM;YAAE,GAAG,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAA;IAC7F,CAAC;IACD,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC;QAChD,GAAG,CAAC,IAAI,CAAC,uEAAuE,CAAC,CAAA;IACnF,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;QACrB,IAAI,IAAI;YAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1B,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM;QACzB,GAAG,CAAC,IAAI,CACN,QAAQ,CAAC,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,cAAc,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CACpH,CAAA;IACH,IAAI,IAAI,CAAC,IAAI;QAAE,GAAG,CAAC,IAAI,CAAC,0EAA0E,CAAC,CAAA;IACnG,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,MAAM,UAAU,WAAW,CACzB,IAAa;IAEb,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,CAAA;IACxB,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,IAAI,KAAK,CAAC,CAAC,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACxE,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC;QAChD,OAAO;YACL,QAAQ,EAAE,CAAC;gBACT,CAAC,CAAC,8CAA8C,IAAI,GAAG;gBACvD,CAAC,CAAC,kDAAkD;YACtD,OAAO,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE;SAClE,CAAA;IACH,IAAI,CAAC;QACH,OAAO;YACL,QAAQ,EAAE,kCAAkC,IAAI,WAAW;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE;SAC7C,CAAA;IACH,OAAO,IAAI,CAAA;AACb,CAAC"}