@hozu/devtools 0.16.0 → 0.17.1

package/dist/overlay/app.js

@@ -1,11 +1,13 @@
 import { describeFor, friendlyName, questionFor } from '../plain.js';
 import { joinRequests, labelOf, openRequestsLine, requestMarkdown, scopesFor, } from '../prompt.js';
 import { held, hold, node, one, page, remove, save, saved, theme, tree } from './api.js';
+import { assetsBoard } from './assets.js';
 import { h, read, write } from './dom.js';
 import { drawer } from './effects.js';
 import { previewLabel, renderLayers } from './layers.js';
 import { logo } from './logo.js';
 import { lookSection, preview } from './look.js';
+import { distances, sizeOf } from './measure.js';
 import { agentNotes } from './notes.js';
 import { css, outlineCss } from './style.js';
 import { firstText, previewText, restoreText, textSection } from './text.js';
@@ -31,6 +33,9 @@ const state = {
 };
 const persist = () => write(key, state);
 const host = document.createElement('hozu-devtools');
+host.setAttribute('data-lenis-prevent', '');
+for (const type of ['wheel', 'touchstart', 'touchmove', 'keydown'])
+    host.addEventListener(type, (event) => event.stopPropagation(), { passive: true });
 const shadow = host.attachShadow({ mode: 'open' });
 const root = h('div', { class: 'root' });
 const hover = h('div', { class: 'box', hidden: true }, [h('div', { class: 'tag' })]);
@@ -59,7 +64,119 @@ const api = drawer({
     },
     closed: () => { },
 });
-root.append(bench, panel, dock, api.el);
+const screenCookie = 'hozu-dev-preview';
+const screenOf = () => {
+    const raw = new RegExp(`(?:^|;\\s*)${screenCookie}=([^;]+)`).exec(document.cookie)?.[1];
+    try {
+        return raw ? decodeURIComponent(raw) : null;
+    }
+    catch {
+        return null;
+    }
+};
+const setScreen = (value) => {
+    document.cookie = value
+        ? `${screenCookie}=${encodeURIComponent(value)}; path=/; SameSite=Lax`
+        : `${screenCookie}=; path=/; max-age=0; SameSite=Lax`;
+};
+const showKey = 'hozu-devtools:assets-show';
+function showInstances(c) {
+    const here = c.uses.flatMap((u) => [...doc.querySelectorAll(`[data-hz="${CSS.escape(u.node)}"]`)]);
+    if (!here.length) {
+        const page = c.uses.flatMap((u) => u.pages).find((p) => !p.params);
+        if (!page)
+            return;
+        try {
+            sessionStorage.setItem(showKey, c.id);
+        }
+        catch { }
+        win.location.href = page.path;
+        return;
+    }
+    assets.close();
+    state.mode = 'select';
+    state.picks = [
+        ...state.picks.filter(hasContent),
+        ...here.map((el) => ({
+            id: el.getAttribute('data-hz') ?? '',
+            index: indexOf(el),
+            note: '',
+            scope: 'component',
+            visible: visibleOf(el),
+        })),
+    ];
+    state.active = state.picks.length - 1;
+    state.panel = 'inspector';
+    persist();
+    renderDock();
+    drawPicks();
+    void renderPanel();
+}
+const assets = assetsBoard({
+    plain: state.audience === 'builder',
+    theme: () => theme(),
+    stylesheets: () => [...doc.querySelectorAll('link[rel="stylesheet"]')].map((l) => l.href).filter(Boolean),
+    show: (c) => showInstances(c),
+    change: (c, note) => {
+        const first = c.uses[0];
+        if (!first)
+            return;
+        state.picks.push({ id: first.node, index: 0, note, scope: 'component', visible: '' });
+        state.active = state.picks.length - 1;
+        persist();
+        assets.close();
+        renderDock();
+        open('changes', null, 'draft');
+    },
+    screen: (route, path, name) => {
+        setScreen(`${route}:${name}`);
+        if (win.location.pathname === path)
+            win.location.reload();
+        else
+            win.location.href = path;
+    },
+});
+async function screensSection() {
+    const res = await fetch(`/_hozu/dev/previews?path=${encodeURIComponent(win.location.pathname)}`, {
+        cache: 'no-store',
+    }).catch(() => null);
+    const out = res?.ok
+        ? (await res.json())
+        : null;
+    if (!out?.route || !out.previews.length)
+        return null;
+    return h('div', { class: 'sec' }, [
+        h('div', { class: 'label' }, ['Previews (previews.ts)']),
+        ...out.previews.map((p) => {
+            const value = `${out.route}:${p.name}`;
+            const on = out.current === value;
+            return h('div', { class: 'look' }, [
+                h('span', { class: 'what' }, [p.name]),
+                h('button', {
+                    class: on ? 'link done' : 'link',
+                    type: 'button',
+                    onclick: () => {
+                        setScreen(on ? null : value);
+                        win.location.reload();
+                    },
+                }, [on ? 'Exit' : 'Preview']),
+            ]);
+        }),
+    ]);
+}
+root.append(bench, panel, dock, api.el, assets.board);
+try {
+    const pending = sessionStorage.getItem(showKey);
+    if (pending) {
+        sessionStorage.removeItem(showKey);
+        void assets.catalog().then((list) => {
+            const c = list?.find((x) => x.id === pending);
+            if (c)
+                setTimeout(() => showInstances(c), 300);
+        });
+    }
+}
+catch { }
 document.documentElement.append(host);
 const darkScheme = matchMedia('(prefers-color-scheme: dark)');
 function applyTheme() {
@@ -72,6 +189,8 @@ let win = window;
 let frameEl = null;
 const frames = h('div');
 let outline = null;
+let measuring = false;
+const measure = h('div', { class: 'measure', hidden: true });
 const agent = agentNotes({
     doc: () => doc,
     win: () => win,
@@ -89,7 +208,7 @@ function mountOutline(target) {
     outline?.remove();
     const el = target.createElement('hozu-devtools-outline');
     el.style.cssText = 'all:initial;position:fixed;inset:0;pointer-events:none;z-index:2147483646';
-    el.attachShadow({ mode: 'open' }).append(h('style', {}, [outlineCss]), frames, boxes, agent.layer, hover);
+    el.attachShadow({ mode: 'open' }).append(h('style', {}, [outlineCss]), frames, boxes, agent.layer, hover, measure);
     target.documentElement.append(el);
     outline = el;
 }
@@ -131,6 +250,9 @@ function place(box, el) {
         target.style.width = `${r.width + 4}px`;
         target.style.height = `${r.height + 4}px`;
     }
+    const size = box.querySelector(':scope > .size');
+    if (size)
+        size.textContent = sizeOf(r);
     const tag = box.firstElementChild;
     if (!tag?.classList.contains('tag'))
         return;
@@ -175,6 +297,37 @@ async function showHover(el, force = false) {
     if (hovered === el)
         tag.replaceChildren(...tagText(n, el));
 }
+function drawMeasure() {
+    const active = state.picks[state.active];
+    const from = active ? elementOf(active) : hovered;
+    const to = active ? hovered : (hovered?.parentElement?.closest('[data-hz]') ?? null);
+    if (!measuring || state.mode !== 'select' || !from || !to || from === to) {
+        measure.hidden = true;
+        return;
+    }
+    const a = from.getBoundingClientRect();
+    const b = to.getBoundingClientRect();
+    const px = (n) => `${n}px`;
+    const target = h('div', { class: 'm-target' });
+    Object.assign(target.style, { left: px(b.left), top: px(b.top), width: px(b.width), height: px(b.height) });
+    const parts = [target];
+    for (const l of distances(a, b)) {
+        const line = h('div', { class: `m-line ${l.axis}` });
+        const label = h('div', { class: 'm-label' }, [String(Math.round(l.to - l.from))]);
+        const mid = (l.from + l.to) / 2;
+        if (l.axis === 'h') {
+            Object.assign(line.style, { left: px(l.from), top: px(l.at), width: px(l.to - l.from) });
+            Object.assign(label.style, { left: px(mid), top: px(l.at) });
+        }
+        else {
+            Object.assign(line.style, { left: px(l.at), top: px(l.from), height: px(l.to - l.from) });
+            Object.assign(label.style, { left: px(l.at), top: px(mid) });
+        }
+        parts.push(line, label);
+    }
+    measure.replaceChildren(...parts);
+    measure.hidden = false;
+}
 function drawPicks() {
     for (const p of state.picks) {
         preview(elementOf(p), p.style ?? []);
@@ -185,6 +338,7 @@ function drawPicks() {
     boxes.replaceChildren(...state.picks.map((p, i) => {
         const box = framed(h('div', { class: 'box selected' }, [
             state.picks.length > 1 ? h('div', { class: 'badge' }, [String(i + 1)]) : null,
+            h('div', { class: 'size' }),
         ]), true);
         place(box, state.mode === 'select' ? elementOf(p) : null);
         return box;
@@ -203,6 +357,7 @@ function frame() {
     }
     if (hovered && (state.mode === 'select' || forced))
         place(hover, hovered);
+    drawMeasure();
     agent.frame();
     requestAnimationFrame(frame);
 }
@@ -272,12 +427,13 @@ function listen(target) {
                 return;
             const mouse = event;
             const clicked = markedFrom(event);
-            const el = mouse.altKey ? (clicked?.parentElement?.closest('[data-hz]') ?? clicked) : clicked;
+            const el = clicked;
             if (!el)
                 return;
             select({ id: el.getAttribute('data-hz') ?? '', index: indexOf(el), visible: visibleOf(el) }, mouse.shiftKey);
         }, { capture: true, signal });
     target.addEventListener('pointermove', (event) => {
+        measuring = event.altKey;
         if (state.mode !== 'select')
             return;
         const el = ours(event) ? null : markedFrom(event);
@@ -285,30 +441,60 @@ function listen(target) {
             void showHover(el);
     }, { capture: true, passive: true, signal });
     target.addEventListener('keydown', onKey, { capture: true, signal });
+    target.addEventListener('keyup', (event) => {
+        measuring = event.altKey;
+    }, { capture: true, signal });
+    target.addEventListener('blur', () => {
+        measuring = false;
+    }, { signal });
     return stop;
 }
+/** The marked parts directly inside `parent` (or the page), in document order. */
+function partsIn(parent) {
+    const all = [...(parent ?? doc).querySelectorAll('[data-hz]')];
+    return all.filter((e) => (e.parentElement?.closest('[data-hz]') ?? null) === parent);
+}
 function walk(direction) {
     const active = state.picks[state.active];
     if (!active)
         return;
     const el = elementOf(active);
     const own = el?.getAttribute('data-hz') === active.id;
+    const beside = () => {
+        if (!el || !own)
+            return null;
+        const list = partsIn(el.parentElement?.closest('[data-hz]') ?? null).filter((e) => {
+            const b = e.getBoundingClientRect();
+            return e === el || (b.width > 0 && b.height > 0);
+        });
+        const at = list.indexOf(el);
+        return list[(at + (direction === 'next' ? 1 : -1) + list.length) % list.length] ?? null;
+    };
     const next = direction === 'up'
         ? own
             ? el?.parentElement?.closest('[data-hz]')
             : el
-        : own
-            ? el?.querySelector('[data-hz]')
-            : null;
-    if (!next)
+        : direction === 'down'
+            ? own
+                ? el?.querySelector('[data-hz]')
+                : null
+            : beside();
+    if (!next || ((direction === 'next' || direction === 'previous') && next === el))
         return;
-    state.picks[state.active] = {
-        ...active,
-        id: next.getAttribute('data-hz') ?? '',
-        index: indexOf(next),
-        visible: visibleOf(next),
-        scope: null,
-    };
+    const moved = { id: next.getAttribute('data-hz') ?? '', index: indexOf(next), visible: visibleOf(next) };
+    if (hasContent(active)) {
+        const existing = state.picks.findIndex((p) => p.id === moved.id && p.index === moved.index);
+        if (existing >= 0)
+            state.active = existing;
+        else {
+            state.picks.push({ ...moved, note: '', scope: null });
+            state.active = state.picks.length - 1;
+        }
+    }
+    else {
+        preview(el, []);
+        state.picks[state.active] = { ...moved, note: '', scope: null };
+    }
     persist();
     drawPicks();
     void renderPanel();
@@ -325,6 +511,8 @@ function setMode(mode) {
 const typingIn = (event) => event.composedPath().some((t) => ['TEXTAREA', 'INPUT', 'SELECT'].includes(t.tagName));
 function onKey(event) {
     const typing = typingIn(event);
+    if (event.key === 'Escape' && assets.isOpen())
+        return assets.close();
     if (event.altKey && event.shiftKey && event.code === 'KeyS') {
         event.preventDefault();
         return setMode(state.mode === 'select' ? 'browse' : 'select');
@@ -340,12 +528,27 @@ function onKey(event) {
         persist();
         return void renderPanel();
     }
-    if (state.mode === 'select' &&
-        (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
-        state.picks.length) {
-        event.preventDefault();
-        walk(event.key === 'ArrowUp' ? 'up' : 'down');
+    if (event.key === 'Alt') {
+        measuring = true;
+        if (state.mode === 'select')
+            event.preventDefault();
+        return;
     }
+    if (state.mode !== 'select' || !state.picks.length || event.composedPath().includes(host))
+        return;
+    const step = event.key === 'ArrowUp' || (event.key === 'Enter' && event.shiftKey)
+        ? 'up'
+        : event.key === 'ArrowDown' || event.key === 'Enter'
+            ? 'down'
+            : event.key === 'Tab'
+                ? event.shiftKey
+                    ? 'previous'
+                    : 'next'
+                : null;
+    if (!step)
+        return;
+    event.preventDefault();
+    walk(step);
 }
 let listening = listen(window);
 const reload = () => win.location.reload();
@@ -440,6 +643,12 @@ function renderDock() {
                 void renderPanel();
             },
         }, ['Layers']),
+        h('button', {
+            class: 'act',
+            type: 'button',
+            title: 'Every component of the app, its variants, previews and uses; and the design tokens',
+            onclick: () => void assets.open(),
+        }, ['Assets']),
         h('button', {
             class: 'act',
             type: 'button',
@@ -455,7 +664,7 @@ function renderDock() {
                 state.panel = state.picks.length ? 'inspector' : null;
                 openBench();
             },
-        }, ['Workbench']),
+        }, ['Frame']),
         h('button', {
             class: 'act gear',
             type: 'button',
@@ -467,6 +676,17 @@ function renderDock() {
                 void renderPanel();
             },
         }, ['⚙']),
+        screenOf()
+            ? h('button', {
+                class: 'previewing',
+                type: 'button',
+                title: 'Exit the preview from previews.ts',
+                onclick: () => {
+                    setScreen(null);
+                    win.location.reload();
+                },
+            }, [`Screen: ${screenOf().slice(screenOf().indexOf(':') + 1)}`, ' · Exit'])
+            : null,
         held()
             ? h('button', {
                 class: 'previewing',
@@ -475,11 +695,12 @@ function renderDock() {
                 onclick: () => hold(null, reload),
             }, [h('span', { 'data-preview': true }, ['Preview']), ' · Exit'])
             : null,
-        state.mode === 'select' && !held()
+        state.mode === 'select' && !held() && !state.panel
             ? h('div', { class: 'tip', role: 'note' }, [
                 h('span', {}, [h('kbd', {}, ['Click']), ' a part to select it']),
                 h('span', {}, [h('kbd', {}, ['Shift']), '+click adds another']),
-                h('span', {}, [h('kbd', {}, ['Alt']), '+click picks its parent']),
+                h('span', {}, [h('kbd', {}, ['⇧ Enter']), ' picks its parent']),
+                h('span', {}, [h('kbd', {}, ['Alt']), ' measures']),
                 h('span', {}, [h('kbd', {}, ['Esc']), ' stops']),
             ])
             : null,
@@ -972,6 +1193,7 @@ function developerSections(n, active) {
     ];
 }
 async function renderPanel() {
+    dock.querySelector('.tip')?.toggleAttribute('hidden', !!state.panel);
     placePanel();
     if (state.panel === 'changes')
         return state.opened ? renderRequest(state.opened) : renderChanges();
@@ -979,8 +1201,13 @@ async function renderPanel() {
         return renderSettings();
     if (state.panel === 'notes')
         return agent.render(panel);
-    if (state.panel === 'layers')
-        return renderLayers(panel, await tree(win.location.pathname), layersHost(() => open(state.picks.length ? 'inspector' : null)));
+    if (state.panel === 'layers') {
+        await renderLayers(panel, await tree(win.location.pathname), layersHost(() => open(state.picks.length ? 'inspector' : null)));
+        const screens = await screensSection();
+        if (screens)
+            panel.append(screens);
+        return;
+    }
     const active = state.picks[state.active];
     if (state.panel !== 'inspector' || !active) {
         panel.hidden = state.view !== 'workbench';
@@ -1065,7 +1292,7 @@ async function renderChanges() {
             const done = h('button', {
                 class: 'link done',
                 type: 'button',
-                title: 'Done or not needed: remove it',
+                title: 'Resolved or not needed: remove it',
                 onclick: async () => {
                     if (!armed) {
                         armed = true;
@@ -1075,7 +1302,7 @@ async function renderChanges() {
                     await remove(r.number);
                     void renderPanel();
                 },
-            }, ['Done']);
+            }, ['Resolve']);
             return h('div', { class: 'req' }, [
                 h('span', { class: 'n' }, [r.number]),
                 h('button', { class: 't open-req', type: 'button', onclick: () => open('changes', r.number, 'saved') }, [r.title]),
@@ -1088,7 +1315,7 @@ async function renderChanges() {
             message ? h('div', { class: 'notice' }, message) : null,
             ...(list.length
                 ? [...list].reverse().map(row)
-                : [h('div', { class: 'empty' }, ['No open requests. Done ones are removed.'])]),
+                : [h('div', { class: 'empty' }, ['No open requests. Resolved ones are removed.'])]),
             list.length
                 ? h('div', { class: 'sec' }, [
                     h('div', { class: 'choice' }, [
@@ -1200,7 +1427,7 @@ async function renderRequest(number) {
             renderDock();
             open('changes', null, 'saved');
         },
-    }, ['Done · remove']);
+    }, ['Resolve · remove']);
     panel.replaceChildren(h('div', { class: 'head' }, [
         h('button', { class: 'back', type: 'button', onclick: () => open('changes', null, 'saved') }, [
             '← Saved',
@@ -1299,7 +1526,10 @@ function renderSettings() {
             ['Alt+Shift+S', 'Select on or off'],
             ['Click', 'Select'],
             ['Shift+click', 'Add to the request'],
-            ['Alt+click', 'Select the area around it'],
+            ['Shift+Enter', 'Select the area around it'],
+            ['Enter', 'Select inside it'],
+            ['Tab / Shift+Tab', 'Next / previous part beside it'],
+            ['Alt (hold)', 'Measure: W × H and the distance to the part under the pointer'],
             ['Double-click', 'Select a text'],
             ['↑ ↓', 'Around it / inside it'],
             ['Esc', 'Back to Browse'],
@@ -1316,6 +1546,10 @@ const left = h('div', { class: 'bench-left' });
 const stage = h('div', { class: 'stage' });
 const sizer = h('div', { class: 'sizer' });
 const bar = h('div', { class: 'bench-bar' });
+addEventListener('keydown', (event) => {
+    if (state.view === 'workbench' && win !== window)
+        onKey(event);
+}, true);
 function retarget(frame) {
     listening.abort();
     const w = frame?.contentWindow ?? null;
@@ -1418,7 +1652,13 @@ function renderBar() {
             'aria-pressed': api.isOpen() ? 'true' : 'false',
             onclick: () => api.toggle(),
         }, ['API']),
-        h('button', { class: 'act exit', type: 'button', onclick: () => closeBench() }, ['Exit workbench']),
+        h('button', {
+            class: 'act',
+            type: 'button',
+            title: 'Every component of the app, its variants, previews and uses; and the design tokens',
+            onclick: () => void assets.open(),
+        }, ['Assets']),
+        h('button', { class: 'act exit', type: 'button', onclick: () => closeBench() }, ['Exit frame']),
     ]));
 }
 async function renderLeft() {
@@ -1435,7 +1675,7 @@ function openBench() {
     bench.hidden = false;
     const frame = h('iframe', {
         src: location.href,
-        title: 'The page in Workbench',
+        title: 'The page in Frame',
         'data-hozu-bench': true,
     });
     frame.addEventListener('load', () => {
@@ -1506,7 +1746,7 @@ addEventListener('resize', layout);
 addEventListener('keydown', (event) => {
     if (event.key === 'Escape' && !typingIn(event) && bench.classList.contains('layers-open'))
         closeLayers();
-});
+}, true);
 renderDock();
 drawPicks();
 void renderPanel();