@hozu/devtools 0.15.0 → 0.17.0

package/dist/notes.d.ts

@@ -9,6 +9,8 @@ export interface AgentNote {
     at: string | null;
     /** A page path where the target is shown, when one is known. */
     path: string | null;
+    /** Only the instances of the target whose text contains this (one row of a list), like browse's `in "<text>"`. */
+    within: string | null;
     text: string;
     created: string;
 }

package/dist/notes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notes.d.ts","sourceRoot":"","sources":["../src/notes.ts"],"names":[],"mappings":"AAGA,kEAAkE;AAClE,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,mFAAmF;IACnF,EAAE,EAAE,MAAM,CAAA;IACV,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;IACjB,gEAAgE;IAChE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CAChB;AAOD,eAAO,MAAM,SAAS,qBAAqB,CAAA;AAoB3C,eAAO,MAAM,SAAS,SAAU,MAAM,KAAG,SAAS,EAAsB,CAAA;AAExE,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,OAAa,GAAG,SAAS,CAKzG;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAM7D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,yGAAyG;AACzG,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAcpE"}
+{"version":3,"file":"notes.d.ts","sourceRoot":"","sources":["../src/notes.ts"],"names":[],"mappings":"AAGA,kEAAkE;AAClE,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,mFAAmF;IACnF,EAAE,EAAE,MAAM,CAAA;IACV,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;IACjB,gEAAgE;IAChE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,kHAAkH;IAClH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CAChB;AAOD,eAAO,MAAM,SAAS,qBAAqB,CAAA;AAoB3C,eAAO,MAAM,SAAS,SAAU,MAAM,KAAG,SAAS,EAAsB,CAAA;AAExE,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,SAAS,CAAC,EAAE,GAAG,OAAa,GAAG,SAAS,CAKzG;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAM7D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,yGAAyG;AACzG,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAepE"}

package/dist/notes.js

@@ -49,6 +49,7 @@ export function replyMarkdown(note, reply) {
         `- Note: ${note.text}`,
         note.at ? `- Where: \`${note.at}:1\`` : `- Where: ${note.id}`,
         ...(note.path ? [`- Page: ${note.path}`] : []),
+        ...(note.within ? [`- In: "${note.within}"`] : []),
         `- Reply: ${reply}`,
         '',
         `The note stays on the page until \`hozu show --done ${note.n}\` removes it.`,

package/dist/notes.js.map

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

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();
@@ -322,16 +508,19 @@ function setMode(mode) {
     persist();
     renderDock();
 }
+const typingIn = (event) => event.composedPath().some((t) => ['TEXTAREA', 'INPUT', 'SELECT'].includes(t.tagName));
 function onKey(event) {
-    const typing = event
-        .composedPath()
-        .some((t) => ['TEXTAREA', 'INPUT', 'SELECT'].includes(t.tagName));
+    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');
     }
     if (typing)
         return;
+    if (event.key === 'Escape' && bench.classList.contains('layers-open'))
+        return closeLayers();
     if (event.key === 'Escape' && state.mode === 'select')
         return setMode('browse');
     if (event.key === 'Escape' && state.panel) {
@@ -339,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();
@@ -439,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',
@@ -454,7 +664,7 @@ function renderDock() {
                 state.panel = state.picks.length ? 'inspector' : null;
                 openBench();
             },
-        }, ['Workbench']),
+        }, ['Frame']),
         h('button', {
             class: 'act gear',
             type: 'button',
@@ -466,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',
@@ -478,7 +699,8 @@ function renderDock() {
             ? 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,
@@ -978,8 +1200,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';
@@ -1064,7 +1291,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;
@@ -1074,7 +1301,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]),
@@ -1087,7 +1314,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' }, [
@@ -1199,7 +1426,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',
@@ -1298,7 +1525,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'],
@@ -1315,6 +1545,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;
@@ -1375,6 +1609,15 @@ function renderBar() {
     bar.replaceChildren(...present([
         h('div', { class: 'grip' }, [h('img', { src: logo, alt: 'Hozu', width: '18', height: '18' })]),
         h('div', { class: 'seg' }, [mode('Browse', 'browse'), mode('Select', 'select')]),
+        h('button', {
+            class: 'act layers-toggle',
+            type: 'button',
+            'aria-pressed': String(bench.classList.contains('layers-open')),
+            onclick: () => {
+                bench.classList.toggle('layers-open');
+                renderBar();
+            },
+        }, ['Layers']),
         select,
         h('button', {
             class: 'act',
@@ -1408,11 +1651,21 @@ 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() {
-    await renderLayers(left, await tree(win.location.pathname), layersHost(() => { }));
+    await renderLayers(left, await tree(win.location.pathname), layersHost(closeLayers));
+}
+function closeLayers() {
+    bench.classList.remove('layers-open');
+    renderBar();
 }
 function openBench() {
     state.view = 'workbench';
@@ -1421,7 +1674,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', () => {
@@ -1489,6 +1742,10 @@ function closeBench() {
     void renderPanel();
 }
 addEventListener('resize', layout);
+addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !typingIn(event) && bench.classList.contains('layers-open'))
+        closeLayers();
+}, true);
 renderDock();
 drawPicks();
 void renderPanel();