@mosetta/editor 0.0.0-stage → 0.0.29

package/tiles/pageModules/pageModules.component.tsx

@@ -0,0 +1,740 @@
+// THE MODULES OF A PAGE (ADR-0062) — an editor tool: what the document open in the canvas makes a
+// reader's browser fetch, as a TREE by package. It reads the canvas's clean preview (the page as
+// the server serves it, no editor in it). A package first — a distribution (`mosetta-ui 0.0.1`) or
+// a package (`react 19.2.0`) — with what it weighs on the page; opened, its modules (the blocks, the
+// entries) and theirs; a module opened, its dependencies, the ones a rule took over crossed out —
+// and a dependency opens the same way, into its own. Then the page's images and fonts. At the foot,
+// the first visit and the repeat one, each opening into its kinds. Above, the page's version rules.
+// Every level orders by the column clicked (name, size, gzip); behind each row a bar shows the share
+// of the first visit it weighs — green for a crumb, red for a third of the page.
+//
+// Sizes are what the files weigh as fetched (from the browser's cache — the canvas fetched them);
+// gzip is a real gzip made here, for text only: images and fonts are compressed already.
+import { defineComponentSide, markInternalTile, useDiOptional } from '@mosetta/react';
+import type { IEditingState } from '@mosetta/content';
+import { FormEvent, useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { CANVAS_TOOL_TOKEN } from '../canvas/canvasTools';
+import type { ICanvasToolContext } from '../canvas/canvasTools';
+import {
+  addWeights, BUILT_IN_RULES, describeRule, formatBytes, isText, markUnusedFonts, nextOrder, ordered, pageModules, pageRulesOf, shareHue, readFontFaces, readServedPage, readStylesheet, readToolState, versionsOf, weightOf, withRule, writeToolState,
+} from './servedPage';
+import type { ICatalogItem, IDependencyEdge, IFileSize, IFontFace, ILoadedFont, IModuleRow, IOrder, IPackageGroup, IServedFile, IWeight, TFileKind } from './servedPage';
+import './pageModules.css';
+
+interface IMeasured {
+  readonly files: readonly IServedFile[];
+  readonly sizes: ReadonlyMap<string, IFileSize>;
+  readonly html: IFileSize;
+  /** the font faces the page's stylesheets declare */
+  readonly faces: readonly IFontFace[];
+  readonly catalog: readonly ICatalogItem[];
+  readonly at: Date;
+}
+
+/** the catalog of a store, fetched once per window */
+const catalogs = new Map<string, Promise<ICatalogItem[]>>();
+
+function catalogAt(url: string): Promise<ICatalogItem[]> {
+  let known = catalogs.get(url);
+  if (!known) {
+    known = fetch(url)
+      .then((res) => (res.ok ? res.json() as Promise<unknown> : []))
+      .then((raw) => (Array.isArray(raw) ? raw as ICatalogItem[] : []))
+      .catch(() => {
+        catalogs.delete(url);
+        return [];
+      });
+    catalogs.set(url, known);
+  }
+  return known;
+}
+
+/** a real gzip of the bytes, where the browser can make one */
+async function gzipped(bytes: ArrayBuffer): Promise<number | null> {
+  const Compression = (globalThis as { CompressionStream?: typeof CompressionStream }).CompressionStream;
+  const body = new Response(bytes).body;
+  if (!Compression || !body) return null;
+  return (await new Response(body.pipeThrough(new Compression('gzip'))).arrayBuffer()).byteLength;
+}
+
+/** each item through `work`, a few at a time */
+async function inTurns<T>(items: readonly T[], work: (item: T) => Promise<void>, width = 6): Promise<void> {
+  let next = 0;
+  const lane = async () => {
+    while (next < items.length) await work(items[next++]);
+  };
+  await Promise.all(Array.from({ length: Math.min(width, items.length) }, lane));
+}
+
+/** what a file weighs — and a stylesheet's text, read for its fonts and images */
+interface IMeasure {
+  readonly size: IFileSize;
+  readonly text?: string;
+}
+
+/**
+ * Each file measured ONCE per window: an address names one content for good (the version in the
+ * module's name, the content hash in `?v=`), so opening the tool again asks for the page and
+ * nothing else — after an edit, for what the edit brought. A file that could not be read is asked
+ * again next time.
+ */
+const measures = new Map<string, Promise<IMeasure | null>>();
+
+function measureFile(file: IServedFile): Promise<IMeasure | null> {
+  const known = measures.get(file.url);
+  if (known) return known;
+  const made = (async (): Promise<IMeasure | null> => {
+    // a copy the browser kept from a load without CORS (an old one, the loader's <script>) fails a
+    // CORS read: asked again past the cache
+    const got = await fetch(file.url).catch(() => fetch(file.url, { cache: 'no-store' }));
+    if (!got.ok) return null;
+    const bytes = await got.arrayBuffer();
+    return {
+      size: { bytes: bytes.byteLength, gzip: isText(file) ? await gzipped(bytes) : null },
+      ...(file.kind === 'css' ? { text: new TextDecoder().decode(bytes) } : {}),
+    };
+  })().catch(() => null);
+  measures.set(file.url, made);
+  void made.then((measure) => {
+    if (!measure) measures.delete(file.url);
+  });
+  return made;
+}
+
+/**
+ * The page as the server serves it, every file it fetches measured. The fonts its styles declare
+ * are matched with the faces the preview loaded first: one the text does not use is never fetched
+ * here either — it is listed, not weighed.
+ */
+async function measurePage(pageUrl: string, signal: AbortSignal, loadedFonts: () => Promise<readonly ILoadedFont[]>): Promise<IMeasured> {
+  const res = await fetch(pageUrl, { credentials: 'same-origin', signal });
+  if (!res.ok) throw new Error(`the preview answered ${res.status}`);
+  const page = await res.arrayBuffer();
+  const html: IFileSize = { bytes: page.byteLength, gzip: await gzipped(page) };
+  const served = readServedPage(new TextDecoder().decode(page), res.url || pageUrl);
+  const module = served.files.find((file) => file.moduleId);
+  const catalog = module ? await catalogAt(`${module.url.slice(0, module.url.indexOf('/modules/') + 1)}modules.json`) : [];
+  const sizes = new Map<string, IFileSize>();
+  const faces: IFontFace[] = [];
+  const named: IServedFile[] = [];
+  await inTurns(served.files, async (file) => {
+    const measure = await measureFile(file);
+    if (!measure) return;
+    sizes.set(file.url, measure.size);
+    if (measure.text === undefined) return;
+    // a stylesheet fetches in its turn what its url()s name
+    faces.push(...readFontFaces(measure.text, file.url));
+    for (const more of readStylesheet(measure.text, file.url)) {
+      if (!served.files.some((known) => known.url === more.url) && !named.some((known) => known.url === more.url)) named.push(more);
+    }
+  });
+  if (signal.aborted) throw new DOMException('the page is read again', 'AbortError');
+  const files = markUnusedFonts([...served.files, ...named], faces, faces.length ? await loadedFonts() : []);
+  if (signal.aborted) throw new DOMException('the page is read again', 'AbortError');
+  await inTurns(files.slice(served.files.length).filter((file) => !file.unused), async (file) => {
+    const measure = await measureFile(file);
+    if (measure) sizes.set(file.url, measure.size);
+  });
+  return { files, sizes, html, faces, catalog, at: new Date() };
+}
+
+const KIND_LABELS: Readonly<Record<TFileKind, string>> = { js: 'JS', css: 'CSS', image: 'Images', font: 'Fonts', other: 'Other' };
+
+function Weight({ weight, testId, quiet }: { weight: IWeight; testId?: string; quiet?: boolean }) {
+  return (
+    <span className={`page-modules__weight${quiet ? ' page-modules__weight--quiet' : ''}`}
+          data-test-id={testId}
+          data-bytes={weight.bytes}>
+      <span className="page-modules__bytes">{formatBytes(weight.bytes)}</span>
+      <span className="page-modules__gzip">{weight.gzip === null ? '' : `${formatBytes(weight.gzip)} gz`}</span>
+    </span>
+  );
+}
+
+const ChevronIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M6 3.5L10.5 8 6 12.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+/**
+ * One line of the tree — its chevron (when it opens), what it is, what it weighs — and, open, what
+ * is under it. `open` null: nothing to open.
+ */
+function TreeRow({ depth, open, onToggle, name, meta, weight, weightTestId, share, quiet, testId, data, children }: {
+  depth: number;
+  open: boolean | null;
+  onToggle?: () => void;
+  name: ReactNode;
+  meta?: ReactNode;
+  weight?: IWeight;
+  weightTestId?: string;
+  /** the share of the first visit it weighs — the bar behind the row; none: no bar */
+  share?: number;
+  quiet?: boolean;
+  testId?: string;
+  data?: Record<string, string | undefined>;
+  children?: ReactNode;
+}) {
+  return (
+    <div className={`page-modules__node${quiet ? ' page-modules__node--quiet' : ''}`}
+         data-test-id={testId}
+         {...data}>
+      <div className={`page-modules__line${share === undefined ? '' : ' page-modules__line--bar'}`}
+           style={{
+             '--depth': depth,
+             ...(share === undefined ? {} : { '--share': `${Math.min(100, share * 100).toFixed(2)}%`, '--hue': shareHue(share) }),
+           } as CSSProperties}
+           onClick={open === null ? undefined : onToggle}>
+        {open === null ? <span className="page-modules__opener page-modules__opener--none" /> : (
+          <button type="button"
+                  className={`page-modules__opener${open ? ' page-modules__opener--open' : ''}`}
+                  data-test-id="page-modules-toggle"
+                  aria-expanded={open}
+                  aria-label={open ? 'Fold' : 'Unfold'}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onToggle?.();
+                  }}>
+            {ChevronIcon}
+          </button>
+        )}
+        <span className="page-modules__name">{name}</span>
+        <span className="page-modules__meta">{meta}</span>
+        {weight ? <Weight weight={weight}
+                          testId={weightTestId}
+                          quiet={quiet} /> : null}
+      </div>
+      {open ? children : null}
+    </div>
+  );
+}
+
+/** what the rows of the tree share: where an edge leads, the sizes, which rows are open */
+interface ITree {
+  readonly byId: ReadonlyMap<string, IModuleRow>;
+  readonly sizes: ReadonlyMap<string, IFileSize>;
+  readonly order: IOrder | null;
+  isOpen(key: string): boolean;
+  toggle(key: string): void;
+  /** the share of the first visit a weight is */
+  shareOf(weight: IWeight): number;
+}
+
+const NOTHING: IWeight = { count: 0, bytes: 0, gzip: 0 };
+
+const kindsOf = (files: readonly IServedFile[]): string => [...new Set(files.map((file) => KIND_LABELS[file.kind].toLowerCase()))].join(' + ');
+
+function VersionOf({ edge }: { edge: IDependencyEdge }) {
+  if (edge.given === null) return <span className="page-modules__version page-modules__version--absent">{`${edge.asked} · not fetched up front`}</span>;
+  if (!edge.crossed) return <span className="page-modules__version">{edge.asked}</span>;
+  return (
+    <span className={`page-modules__version page-modules__version--crossed${edge.lower ? ' page-modules__version--lower' : ''}`}
+          data-tooltip={edge.lower
+            ? `Asks for ${edge.asked}; the page gives it an older ${edge.given} — a rule pins it lower`
+            : `Asks for ${edge.asked}; the page runs ${edge.given} — one copy for the whole page`}>
+      <s>{edge.asked}</s>
+      {` → ${edge.given}`}
+    </span>
+  );
+}
+
+/** a module's edges in the tree's order — weighed by what loads for each */
+function edgesInOrder(edges: readonly IDependencyEdge[], tree: ITree): IDependencyEdge[] {
+  return ordered(edges, tree.order, (edge) => edge.label, (edge) => {
+    const target = edge.loadedId ? tree.byId.get(edge.loadedId) : undefined;
+    return target ? weightOf(target.files, tree.sizes) : NOTHING;
+  });
+}
+
+/** a dependency: what it asked for and what loads; opened, the dependencies of what loads */
+function DependencyNode({ edge, depth, path, ancestors, tree }: { edge: IDependencyEdge; depth: number; path: string; ancestors: readonly string[]; tree: ITree }) {
+  const target = edge.loadedId ? tree.byId.get(edge.loadedId) : undefined;
+  const key = `${path}>${edge.label}`;
+  // a dependency already open above leads in a circle — it does not open again
+  const openable = Boolean(target && target.dependencies.length && !ancestors.includes(target.id));
+  const open = openable ? tree.isOpen(key) : null;
+  const weight = target ? weightOf(target.files, tree.sizes) : undefined;
+  return (
+    <TreeRow depth={depth}
+             open={open}
+             onToggle={() => tree.toggle(key)}
+             name={edge.label}
+             meta={<VersionOf edge={edge} />}
+             weight={weight}
+             share={weight ? tree.shareOf(weight) : undefined}
+             testId="page-modules-dep"
+             data={{ 'data-dep': edge.label, 'data-crossed': edge.crossed ? '' : undefined, 'data-lower': edge.lower ? '' : undefined }}>
+      {target && open ? edgesInOrder(target.dependencies, tree).map((next) => <DependencyNode key={next.id}
+                                                                                              edge={next}
+                                                                                              depth={depth + 1}
+                                                                                              path={key}
+                                                                                              ancestors={[...ancestors, target.id]}
+                                                                                              tree={tree} />) : null}
+    </TreeRow>
+  );
+}
+
+/** a module of a package: a block, an entry; opened, its dependencies */
+function ModuleNode({ row, group, depth, tree }: { row: IModuleRow; group: string; depth: number; tree: ITree }) {
+  const key = `${group}/${row.title}`;
+  const open = row.dependencies.length ? tree.isOpen(key) : null;
+  const weight = weightOf(row.files, tree.sizes);
+  return (
+    <TreeRow depth={depth}
+             open={open}
+             onToggle={() => tree.toggle(key)}
+             name={row.title}
+             meta={kindsOf(row.files)}
+             weight={weight}
+             share={tree.shareOf(weight)}
+             testId="page-modules-module"
+             data={{ 'data-module': row.id, 'data-kind': row.kind }}>
+      {open ? edgesInOrder(row.dependencies, tree).map((edge) => <DependencyNode key={edge.id}
+                                                                                 edge={edge}
+                                                                                 depth={depth + 1}
+                                                                                 path={key}
+                                                                                 ancestors={[row.id]}
+                                                                                 tree={tree} />) : null}
+    </TreeRow>
+  );
+}
+
+const fileName = (url: string): string => decodeURIComponent(new URL(url).pathname.split('/').pop() ?? url);
+
+/** a package of the page: a tile palette or a package, what it weighs here; opened, its tiles */
+function GroupNode({ group, depth, tree }: { group: IPackageGroup; depth: number; tree: ITree }) {
+  const key = group.key;
+  const weight = weightOf(group.modules.flatMap((row) => row.files), tree.sizes);
+  const noun = group.kind === 'distribution' ? 'block' : 'tile';
+  const open = tree.isOpen(key);
+  return (
+    <TreeRow depth={depth}
+             open={open}
+             onToggle={() => tree.toggle(key)}
+             name={group.name}
+             meta={`${group.version} · ${group.modules.length} ${noun}${group.modules.length === 1 ? '' : 's'}`}
+             weight={weight}
+             share={tree.shareOf(weight)}
+             testId="page-modules-group"
+             data={{ 'data-group': group.key, 'data-kind': group.kind }}>
+      {open ? ordered(group.modules, tree.order, (row) => row.title, (row) => weightOf(row.files, tree.sizes)).map((row) => <ModuleNode key={row.id}
+                                                                                                                                        row={row}
+                                                                                                                                        group={group.key}
+                                                                                                                                        depth={depth + 1}
+                                                                                                                                        tree={tree} />) : null}
+    </TreeRow>
+  );
+}
+
+/** files of no module, by kind — the loader, the page's images, the fonts its styles declare */
+function FilesNode({ name, files, counted, tree, meta }: { name: string; files: readonly IServedFile[]; counted: readonly IServedFile[]; tree: ITree; meta: string }) {
+  const key = `files:${name}`;
+  const weight = weightOf(counted, tree.sizes);
+  return (
+    <TreeRow depth={0}
+             open={tree.isOpen(key)}
+             onToggle={() => tree.toggle(key)}
+             name={name}
+             meta={meta}
+             weight={weight}
+             share={tree.shareOf(weight)}
+             testId="page-modules-files"
+             data={{ 'data-files': name }}>
+      {ordered(files, tree.order, (file) => fileName(file.url), (file) => weightOf([file], tree.sizes)).map((file) => (
+        <TreeRow key={file.url}
+                 depth={1}
+                 open={null}
+                 name={fileName(file.url)}
+                 meta={file.unused ? 'the text does not use it — not fetched' : file.lazy ? 'when it comes into view' : KIND_LABELS[file.kind]}
+                 // a font the text does not use is never fetched — listed, not weighed
+                 weight={tree.sizes.has(file.url) ? weightOf([file], tree.sizes) : undefined}
+                 share={tree.sizes.has(file.url) && !file.unused ? tree.shareOf(weightOf([file], tree.sizes)) : undefined}
+                 quiet={file.unused}
+                 testId="page-modules-asset" />
+      ))}
+    </TreeRow>
+  );
+}
+
+function Rules({ tool, state, catalog, specifiers, tree }: {
+  tool: ICanvasToolContext;
+  state: IEditingState;
+  catalog: readonly ICatalogItem[];
+  specifiers: readonly string[];
+  tree: ITree;
+}) {
+  const doc = state.doc;
+  const own = pageRulesOf(doc?.settings);
+  const editable = state.revision == null && doc !== null;
+  const [key, setKey] = useState('');
+  const [mode, setMode] = useState<'highest' | 'exact'>('highest');
+  const [version, setVersion] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const wildcard = key.trim().endsWith('/*');
+  const versions = useMemo(() => (key.trim() && !wildcard ? versionsOf(catalog, key.trim()) : []), [catalog, key, wildcard]);
+  const set = (name: string, rule: Parameters<typeof withRule>[2]) => {
+    if (!doc) return;
+    tool.session.updateNodeSettings(doc.id, withRule(doc.settings, name, rule));
+  };
+  const add = (event: FormEvent) => {
+    event.preventDefault();
+    const name = key.trim();
+    if (!name) {
+      setError('Name a package — @scope/name, or @scope/* for all of a scope');
+      return;
+    }
+    const exact = mode === 'exact' && !wildcard;
+    if (exact && !(version || versions[0])) {
+      setError(`No tile host holds a version of ${name}`);
+      return;
+    }
+    set(name, { singleton: true, version: exact ? version || versions[0] : 'highest' });
+    setKey('');
+    setVersion('');
+    setError(null);
+  };
+  const count = Object.keys(own).length;
+  return (
+    <section className="page-modules__section"
+             data-test-id="page-modules-rules">
+      <TreeRow depth={0}
+               open={tree.isOpen('rules')}
+               onToggle={() => tree.toggle('rules')}
+               name="Rules"
+               meta={`which version of a package the page runs · built in${count ? ` + ${count} of this page` : ''}`}>
+        <div className="page-modules__rules">
+          {Object.entries(BUILT_IN_RULES).map(([name, rule]) => (
+            <div key={name}
+                 className="page-modules__rule"
+                 data-test-id="page-modules-rule"
+                 data-rule={name}
+                 data-built-in>
+              <code className="page-modules__key">{name}</code>
+              <span className="page-modules__rule-text">{describeRule(rule)}</span>
+              <span className="page-modules__tag">built in</span>
+            </div>
+          ))}
+          {Object.entries(own).map(([name, rule]) => (
+            <div key={name}
+                 className="page-modules__rule"
+                 data-test-id="page-modules-rule"
+                 data-rule={name}>
+              <code className="page-modules__key">{name}</code>
+              <span className="page-modules__rule-text">{describeRule(rule)}</span>
+              {editable ? (
+                <button type="button"
+                        className="page-modules__link"
+                        data-test-id="page-modules-rule-remove"
+                        onClick={() => set(name, null)}>
+                  Remove
+                </button>
+              ) : <span className="page-modules__tag page-modules__tag--quiet">this page</span>}
+            </div>
+          ))}
+          {editable ? (
+            <form className="page-modules__add"
+                  data-test-id="page-modules-rule-add"
+                  onSubmit={add}>
+              <input className="page-modules__input"
+                     data-test-id="page-modules-rule-key"
+                     list="page-modules-specifiers"
+                     placeholder="@mosetta/di or @scope/*"
+                     value={key}
+                     aria-label="Package"
+                     onChange={(event) => {
+                       setKey(event.target.value);
+                       setVersion('');
+                       setError(null);
+                     }} />
+              <datalist id="page-modules-specifiers">
+                {specifiers.map((name) => <option key={name}
+                                                  value={name} />)}
+              </datalist>
+              <select className="page-modules__input"
+                      data-test-id="page-modules-rule-mode"
+                      value={wildcard ? 'highest' : mode}
+                      disabled={wildcard}
+                      aria-label="Which version"
+                      onChange={(event) => setMode(event.target.value === 'exact' ? 'exact' : 'highest')}>
+                <option value="highest">one copy, the newest asked</option>
+                <option value="exact">one copy, exactly</option>
+              </select>
+              {mode === 'exact' && !wildcard ? (
+                <select className="page-modules__input"
+                        data-test-id="page-modules-rule-version"
+                        value={version || versions[0] || ''}
+                        aria-label="Version"
+                        onChange={(event) => setVersion(event.target.value)}>
+                  {versions.length ? versions.map((v) => <option key={v}
+                                                                 value={v}>{v}</option>) : <option value="">no versions known</option>}
+                </select>
+              ) : null}
+              <button type="submit"
+                      className="page-modules__button"
+                      data-test-id="page-modules-rule-submit">
+                Add rule
+              </button>
+              {error ? <span className="page-modules__error"
+                             role="alert">{error}</span> : null}
+            </form>
+          ) : (
+            <p className="page-modules__note">A published revision — make a draft of it to change its rules.</p>
+          )}
+        </div>
+      </TreeRow>
+    </section>
+  );
+}
+
+function Panel({ tool }: { tool: ICanvasToolContext }) {
+  const state = useSyncExternalStore(tool.session.subscribe, tool.session.snapshot, tool.session.snapshot);
+  const [measured, setMeasured] = useState<IMeasured | null>(null);
+  const [failure, setFailure] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [asked, setAsked] = useState(0);
+  // the preview answers the SAVED document: read again on open, after each save, and on demand
+  useEffect(() => {
+    const abort = new AbortController();
+    setBusy(true);
+    measurePage(new URL(tool.previewHref(), window.location.href).href, abort.signal, () => tool.loadedFonts())
+      .then((done) => {
+        setMeasured(done);
+        setFailure(null);
+      })
+      .catch((error: unknown) => {
+        if (!abort.signal.aborted) setFailure(error instanceof Error ? error.message : String(error));
+      })
+      .finally(() => {
+        if (!abort.signal.aborted) setBusy(false);
+      });
+    return () => abort.abort();
+  }, [tool, state.savedCount, asked]);
+
+  const catalogById = useMemo(() => new Map((measured?.catalog ?? []).map((item) => [item.id, item])), [measured]);
+  // the fonts the text never asks for are marked: declared, not fetched
+  const files = useMemo(() => measured?.files ?? [], [measured]);
+  const counted = useMemo(() => files.filter((file) => !file.unused), [files]);
+  const modules = useMemo(() => (measured ? pageModules(files, catalogById) : null), [measured, files, catalogById]);
+  const sizes = useMemo(() => measured?.sizes ?? new Map<string, IFileSize>(), [measured]);
+  const specifiers = useMemo(() => [...new Set([...(modules?.byId.values() ?? [])].filter((row) => row.kind === 'package').map((row) => row.title))].sort(), [modules]);
+  // what was open — the order, the open rows — comes back from the address, and goes there
+  const [said] = useState(() => readToolState(tool.readState()));
+  const [order, setOrder] = useState<IOrder | null>(said.order);
+  // as the page names them — the distributions, then the packages, the heaviest first — until a
+  // column says otherwise
+  const groups = useMemo(() => {
+    const all = modules?.groups ?? [];
+    const weight = (group: IPackageGroup) => weightOf(group.modules.flatMap((row) => row.files), sizes);
+    if (order) return ordered(all, order, (group) => group.name, weight);
+    return [...all.filter((g) => g.kind === 'distribution'), ...all.filter((g) => g.kind === 'package').sort((x, y) => weight(y).bytes - weight(x).bytes)];
+  }, [modules, sizes, order]);
+  const [opened, setOpened] = useState<ReadonlySet<string>>(said.opened);
+  useEffect(() => tool.writeState(writeToolState(order, opened)), [tool, order, opened]);
+  const toggle = useCallback((key: string) => setOpened((was) => {
+    const next = new Set(was);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    return next;
+  }), []);
+  const html: IWeight = measured ? { count: 1, bytes: measured.html.bytes, gzip: measured.html.gzip } : { count: 0, bytes: 0, gzip: 0 };
+  const first = addWeights(html, weightOf(counted, sizes));
+  const tree: ITree = {
+    byId: modules?.byId ?? new Map(),
+    sizes,
+    order,
+    isOpen: (key) => opened.has(key),
+    toggle,
+    shareOf: (weight) => (first.bytes ? weight.bytes / first.bytes : 0),
+  };
+  const byKind = (['js', 'css', 'font', 'image'] as const).map((kind) => ({
+    kind,
+    weight: weightOf(counted.filter((file) => file.kind === kind), sizes),
+    used: counted.filter((file) => file.kind === kind).length,
+    declared: files.filter((file) => file.kind === kind).length,
+  })).filter(({ declared }) => declared > 0);
+  // a file the browser could not read for us (refused, gone) is in no sum — said, not hidden
+  const unread = counted.filter((file) => !sizes.has(file.url)).length;
+  const assets = modules?.assets ?? [];
+  const packagesWeight = weightOf([...(modules?.byId.values() ?? [])].flatMap((row) => row.files), sizes);
+  const assetGroups = [
+    { name: 'Loader', meta: 'loads the tiles', kind: 'js' as const },
+    { name: 'Stylesheets', meta: 'of no tile', kind: 'css' as const },
+    { name: 'Images', meta: 'of the page', kind: 'image' as const },
+    { name: 'Fonts', meta: 'its styles declare', kind: 'font' as const },
+    { name: 'Other files', meta: '', kind: 'other' as const },
+  ].map((group) => ({ ...group, files: assets.filter((file) => file.kind === group.kind) }))
+    .filter((group) => group.files.length);
+
+  return (
+    <div className="page-modules"
+         data-test-id="page-modules"
+         data-busy={busy || undefined}>
+      <header className="page-modules__head">
+        <span className="page-modules__title">Tiles of this page</span>
+        <span className="page-modules__status"
+              data-test-id="page-modules-status">
+          {state.dirty
+            ? 'saving — the numbers follow the saved draft'
+            : busy ? 'reading the page…' : measured
+              ? `as a reader gets it · ${measured.at.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}${unread ? ` · ${unread} file(s) could not be read` : ''}`
+              : ''}
+        </span>
+        <button type="button"
+                className="page-modules__action"
+                data-test-id="page-modules-refresh"
+                data-tooltip="Read the page again"
+                aria-label="Read the page again"
+                onClick={() => {
+                  // the catalog may have grown (a deploy); the files never change
+                  catalogs.clear();
+                  setAsked((n) => n + 1);
+                }}>
+          ↻
+        </button>
+        <button type="button"
+                className="page-modules__action"
+                data-test-id="page-modules-close"
+                data-tooltip="Close"
+                aria-label="Close"
+                onClick={() => tool.close()}>
+          ×
+        </button>
+      </header>
+      <div className="page-modules__body">
+        <Rules tool={tool}
+               state={state}
+               catalog={measured?.catalog ?? []}
+               specifiers={specifiers}
+               tree={tree} />
+        {failure ? <p className="page-modules__error"
+                      role="alert">{`Could not read the page: ${failure}`}</p> : null}
+        <section className="page-modules__section page-modules__section--tree">
+          <div className="page-modules__columns"
+               data-test-id="page-modules-columns">
+            {([['name', 'package · version', ''], ['size', 'size', ' page-modules__bytes'], ['gzip', 'gzip', ' page-modules__gzip']] as const).map(([by, label, cell]) => (
+              <button key={by}
+                      type="button"
+                      className={`page-modules__column${cell}${order?.by === by ? ' page-modules__column--on' : ''}`}
+                      data-test-id="page-modules-order"
+                      data-order={by}
+                      data-direction={order?.by === by ? (order.descending ? 'down' : 'up') : undefined}
+                      data-tooltip={by === 'name' ? 'Order by name' : `Order by ${label}`}
+                      onClick={() => setOrder((was) => nextOrder(was, by))}>
+                {label}
+                {order?.by === by ? (order.descending ? ' ↓' : ' ↑') : ''}
+              </button>
+            ))}
+          </div>
+          {/* the packages under one row: folded, it still says what all of them weigh */}
+          <TreeRow depth={0}
+                   open={tree.isOpen('packages')}
+                   onToggle={() => tree.toggle('packages')}
+                   name="Packages"
+                   meta={`${groups.length} package${groups.length === 1 ? '' : 's'} · ${modules?.byId.size ?? 0} tiles`}
+                   weight={packagesWeight}
+                   weightTestId="page-modules-packages-weight"
+                   share={tree.shareOf(packagesWeight)}
+                   testId="page-modules-packages">
+            {groups.map((group) => <GroupNode key={group.key}
+                                              group={group}
+                                              depth={1}
+                                              tree={tree} />)}
+          </TreeRow>
+          {assetGroups.map((group) => {
+            const used = group.files.filter((file) => !file.unused);
+            return (
+              <FilesNode key={group.name}
+                         name={group.name}
+                         files={group.files}
+                         counted={used}
+                         tree={tree}
+                         meta={`${group.meta}${group.meta ? ' · ' : ''}${used.length === group.files.length ? group.files.length : `${used.length} of ${group.files.length} used`}`} />
+            );
+          })}
+          <TreeRow depth={0}
+                   open={null}
+                   name="Total"
+                   meta="the page's files — the HTML aside"
+                   weight={weightOf(counted, sizes)}
+                   weightTestId="page-modules-total"
+                   testId="page-modules-total-row" />
+        </section>
+      </div>
+      <footer className="page-modules__sum"
+              data-test-id="page-modules-sum">
+        <TreeRow depth={0}
+                 open={tree.isOpen('first-visit')}
+                 onToggle={() => tree.toggle('first-visit')}
+                 name="First visit"
+                 meta="everything a new visitor fetches"
+                 weight={first}
+                 weightTestId="page-modules-first-visit"
+                 testId="page-modules-visit"
+                 data={{ 'data-visit': 'first' }}>
+          {byKind.map(({ kind, weight, used, declared }) => (
+            <TreeRow key={kind}
+                     depth={1}
+                     open={null}
+                     name={KIND_LABELS[kind]}
+                     meta={used === declared ? `${used} file${used === 1 ? '' : 's'}` : `${used} of ${declared} — the rest the text does not use`}
+                     weight={weight}
+                     share={tree.shareOf(weight)}
+                     testId="page-modules-kind"
+                     data={{ 'data-kind': kind }} />
+          ))}
+          <TreeRow depth={1}
+                   open={null}
+                   name="HTML"
+                   meta="the page itself"
+                   weight={html}
+                   share={tree.shareOf(html)}
+                   testId="page-modules-kind"
+                   data={{ 'data-kind': 'html' }} />
+        </TreeRow>
+        <TreeRow depth={0}
+                 open={tree.isOpen('repeat-visit')}
+                 onToggle={() => tree.toggle('repeat-visit')}
+                 name="Repeat visit"
+                 meta="the HTML; the rest comes from the browser's cache"
+                 weight={html}
+                 weightTestId="page-modules-repeat-visit"
+                 testId="page-modules-visit"
+                 data={{ 'data-visit': 'repeat' }}>
+          <TreeRow depth={1}
+                   open={null}
+                   name="HTML"
+                   meta="the page itself"
+                   weight={html} />
+          <TreeRow depth={1}
+                   open={null}
+                   name={byKind.map(({ kind }) => KIND_LABELS[kind]).join(', ')}
+                   meta="never change under their address: kept by the browser"
+                   weight={{ count: 0, bytes: 0, gzip: 0 }} />
+        </TreeRow>
+      </footer>
+    </div>
+  );
+}
+
+function PageModules() {
+  const tool = useDiOptional(CANVAS_TOOL_TOKEN);
+  if (!tool) {
+    return <div className="page-modules page-modules--bare">The tiles of a page show over its canvas: open them from the canvas’s bar.</div>;
+  }
+  return <Panel tool={tool} />;
+}
+
+export default markInternalTile(defineComponentSide({
+  Component: PageModules,
+  defaultSettings() {
+    return { label: 'Tiles of this page' };
+  },
+}));