konpeki 0.2.0 → 0.3.1

package/src/components/InspectorPanel.tsx

@@ -1,5 +1,6 @@
 import {
   themeIds,
+  typographyIds,
   type CompositionComponent,
   type CompositionSlide,
   type ChartTemplate,
@@ -7,6 +8,7 @@ import {
   type Rect,
   type TextColor,
   type ThemeId,
+  type TypographyId,
   type VectorElement,
 } from "../../composition/types.ts";
 import {
@@ -30,11 +32,11 @@ import {
   type Draft,
 } from "../lib/model.ts";
 import { composerPalette, themeLabel } from "../lib/theme.ts";
+import { getTheme, typographyLabels } from "../../design/themes/index.ts";
 import { DiagramTypeIcon } from "./DiagramTypeIcon.tsx";
-import { Field, Select, humanize } from "./ui.tsx";
+import { Field, NumberField, Select, humanize } from "./ui.tsx";
 import { moveVectorElement, removeVectorElement } from "../../composition/vector.ts";
 import { tokensForAttribute } from "../../composition/theme-tokens.ts";
-import { VectorOverflowWarning } from "./VectorOverflowWarning.tsx";
 import { PageSizePicker } from "./PageSizePicker.tsx";
 
 const appearanceLabels: Record<string, string> = {
@@ -141,7 +143,7 @@ function AppearancePicker({
   );
 }
 
-function ThemePicker({
+function PalettePicker({
   value,
   mode,
   onChange,
@@ -152,7 +154,7 @@ function ThemePicker({
 }) {
   return (
     <fieldset className="theme-picker">
-      <legend>Theme</legend>
+      <legend>Color palette</legend>
       <div className="theme-options">
         {themeIds.map((id) => {
           const palette = composerPalette(id, mode);
@@ -203,6 +205,22 @@ function SegmentedControl({ label, value, options, onChange }: {
   );
 }
 
+function AutoTemplateButton({ selected, onClick }: { selected: boolean; onClick: () => void }) {
+  return (
+    <button type="button" className={selected ? "selected" : ""} aria-pressed={selected} onClick={onClick}>
+      <svg className="diagram-type-icon" viewBox="0 0 48 32" aria-hidden="true">
+        <rect x="13" y="5" width="22" height="22" rx="4" />
+        <circle className="filled" cx="19" cy="11" r="1.5" />
+        <circle className="filled" cx="29" cy="11" r="1.5" />
+        <circle className="filled" cx="24" cy="16" r="1.5" />
+        <circle className="filled" cx="19" cy="21" r="1.5" />
+        <circle className="filled" cx="29" cy="21" r="1.5" />
+      </svg>
+      <span>YOLO</span>
+    </button>
+  );
+}
+
 function DiagramTypePicker({
   value,
   selection,
@@ -218,22 +236,7 @@ function DiagramTypePicker({
       <div className="diagram-type-options" aria-labelledby="diagram-type-label">
         <div className="diagram-type-category">
           <div>
-            <button
-              type="button"
-              className={selection === "auto" ? "selected" : ""}
-              aria-pressed={selection === "auto"}
-              onClick={() => onChange(value, "auto")}
-            >
-              <svg className="diagram-type-icon" viewBox="0 0 48 32" aria-hidden="true">
-                <rect x="13" y="5" width="22" height="22" rx="4" />
-                <circle className="filled" cx="19" cy="11" r="1.5" />
-                <circle className="filled" cx="29" cy="11" r="1.5" />
-                <circle className="filled" cx="24" cy="16" r="1.5" />
-                <circle className="filled" cx="19" cy="21" r="1.5" />
-                <circle className="filled" cx="29" cy="21" r="1.5" />
-              </svg>
-              <span>YOLO</span>
-            </button>
+            <AutoTemplateButton selected={selection === "auto"} onClick={() => onChange(value, "auto")} />
           </div>
         </div>
         {diagramCategories.map((category) => (
@@ -270,21 +273,60 @@ function ChartTypePicker({ value, selection, hasTopology, onChange }: {
 }) {
   return (
     <details className="field chart-type-field diagram-type-field">
-      <summary>{selection === "auto" ? "YOLO" : `Required form: ${chartDefinitions[value].label}`}</summary>
-      <button type="button" aria-pressed={selection === "auto"} onClick={() => onChange(value, "auto")}>YOLO</button>
-      <AppearancePicker
-        label="Chart form"
-        name="template"
-        value={selection === "explicit" ? value : ""}
-        options={chartTemplates}
-        labels={Object.fromEntries(Object.entries(chartDefinitions).map(([type, definition]) => [type, definition.label]))}
-        description={`${chartDefinitions[value].expression}${hasTopology ? " Recorded Sankey topology is preserved; remove it before changing chart type, even in YOLO." : ""}`}
-        disabledOptions={hasTopology ? new Set(chartTemplates.filter(type => type !== "sankey")) : undefined}
-        onChange={(value) => {
-          const template = chartTemplates.find(type => type === value);
-          if (template) onChange(template, "explicit");
-        }}
-      />
+      <summary id="chart-type-label">Template</summary>
+      <div className="diagram-type-options chart-type-options" aria-labelledby="chart-type-label">
+        <div className="diagram-type-category">
+          <div>
+            <AutoTemplateButton selected={selection === "auto"} onClick={() => onChange(value, "auto")} />
+          </div>
+        </div>
+        <div className="diagram-type-category" role="group" aria-label="Chart templates">
+          <div>
+            {chartTemplates.map((template) => (
+              <button
+                key={template}
+                type="button"
+                className={selection === "explicit" && value === template ? "selected" : ""}
+                aria-pressed={selection === "explicit" && value === template}
+                disabled={hasTopology && template !== "sankey"}
+                title={hasTopology && template !== "sankey"
+                  ? "Remove the recorded Sankey topology before changing chart type."
+                  : chartDefinitions[template].expression}
+                onClick={() => onChange(template, "explicit")}
+              >
+                <span className="appearance-preview" data-property="template" data-value={template} aria-hidden="true">
+                  {template === "scatter" ? (
+                    <svg viewBox="0 0 36 24">
+                      <path d="M3 2v20h31" fill="none" stroke="var(--preview-muted)" strokeWidth="1.2" />
+                      {[[7, 6], [10, 11], [14, 9], [17, 13], [20, 16], [24, 15], [28, 18], [29, 7], [32, 19]].map(([cx, cy], index) => (
+                        <circle key={index} cx={cx} cy={cy} r="1.35" fill="var(--preview-accent)" />
+                      ))}
+                    </svg>
+                  ) : template === "sankey" ? (
+                    <svg viewBox="0 0 36 24" fill="var(--preview-accent)">
+                      <g fillOpacity="0.3">
+                        <path d="M4 4C10.5 4 10.5 2 17 2V12.5C10.5 12.5 10.5 14.5 4 14.5Z" />
+                        <path d="M4 14.5C10.5 14.5 10.5 17.5 17 17.5V22C10.5 22 10.5 19 4 19Z" />
+                        <path d="M19 8C25.5 8 25.5 10 32 10V14.5C25.5 14.5 25.5 12.5 19 12.5Z" />
+                        <path d="M19 17.5C25.5 17.5 25.5 18 32 18V22.5C25.5 22.5 25.5 22 19 22Z" />
+                      </g>
+                      <path d="M19 2C25.5 2 25.5 1 32 1V7C25.5 7 25.5 8 19 8Z" fillOpacity="0.65" />
+                      <rect x="2" y="4" width="2" height="15" />
+                      <rect x="17" y="2" width="2" height="10.5" />
+                      <rect x="17" y="17.5" width="2" height="4.5" />
+                      <rect x="32" y="1" width="2" height="6" />
+                      <rect x="32" y="10" width="2" height="4.5" />
+                      <rect x="32" y="18" width="2" height="4.5" />
+                    </svg>
+                  ) : Array.from({ length: 4 }, (_, index) => <i key={index} />)}
+                </span>
+                <span>{chartDefinitions[template].label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+      {hasTopology && <small className="visualization-description">Recorded Sankey topology is preserved; remove it before changing chart type, even in YOLO.</small>}
     </details>
   );
 }
@@ -326,38 +368,47 @@ export function InspectorPanel({
     target?.scrollIntoView({ block: "nearest" });
     control?.select();
   }, [vectorEditRequest]);
+  const theme = draft.theme ?? { id: "plex", mode: "paper" };
+  const typography = getTheme(themeLabel(theme.id), theme.mode, theme.typography);
   if (!component)
     return (
       <section className="inspector-content" aria-labelledby="inspector-heading">
         <h2 id="inspector-heading">Page</h2>
         <PageSizePicker key={slide.id} slide={slide} onChange={onSlide} />
         <h2>Document appearance</h2>
-        <ThemePicker
-          value={draft.theme?.id ?? "plex"}
-          mode={draft.theme?.mode ?? "paper"}
+        <Select
+          label="Font"
+          value={typography.typographyId}
+          options={typographyIds}
+          optionLabels={typographyLabels}
+          onChange={(value) => onDraft({ theme: { ...theme, typography: value as TypographyId } })}
+        />
+        <PalettePicker
+          value={theme.id}
+          mode={theme.mode}
           onChange={(value) =>
             onDraft({
               theme: {
+                ...theme,
                 id: value,
-                mode: draft.theme?.mode ?? "paper",
+                typography: typography.typographyId,
               },
             })
           }
         />
         <SegmentedControl
-          label="Theme mode"
-          value={draft.theme?.mode ?? "paper"}
+          label="Background"
+          value={theme.mode}
           options={["paper", "night"]}
           onChange={(value) =>
             onDraft({
               theme: {
-                id: draft.theme?.id ?? "plex",
+                ...theme,
                 mode: value as "paper" | "night",
               },
             })
           }
         />
-        <VectorOverflowWarning slide={slide} theme={draft.theme} />
         <h2 className="slide-settings-heading">Page numbering</h2>
         <fieldset className="page-number-picker">
           <SegmentedControl
@@ -424,9 +475,9 @@ export function InspectorPanel({
     if (key === "x") next.x = clamp(value, 0, slide.canvas.width - rect.width);
     if (key === "y") next.y = clamp(value, 0, slide.canvas.height - rect.height);
     if (key === "width")
-      next.width = clamp(value, Math.min(180, slide.canvas.width - rect.x), slide.canvas.width - rect.x);
+      next.width = clamp(value, Math.min(180, rect.width, slide.canvas.width - rect.x), slide.canvas.width - rect.x);
     if (key === "height")
-      next.height = clamp(value, Math.min(72, slide.canvas.height - rect.y), slide.canvas.height - rect.y);
+      next.height = clamp(value, Math.min(72, rect.height, slide.canvas.height - rect.y), slide.canvas.height - rect.y);
     onComponent(
       { ...component!, preferredRect: next },
       `geometry:${component!.id}`,
@@ -451,18 +502,17 @@ export function InspectorPanel({
         <span>{componentLabel ?? componentLabels[component.kind]}</span>
       </h2>
       {component.kind === "text-block" && !component.customVisual && <>
-        <VectorOverflowWarning slide={slide} theme={draft.theme} />
         <Field label="Text"><textarea name="text-content" value={component.content ?? ""}
           onChange={(event) => onComponent({ ...component, content: event.target.value }, `content:${component.id}`)} onBlur={onEditEnd} /></Field>
         <div className="text-typography-fields">
-        <Field label="Font size"><input type="number" min={8} max={240} value={component.textStyle?.size ?? 36}
-          onChange={(event) => { const size = event.target.valueAsNumber; if (size >= 8 && size <= 240) onComponent({ ...component, textStyle: { ...component.textStyle, size } }, `font:${component.id}`); }} onBlur={onEditEnd} /></Field>
+        <NumberField label="Font size" min={8} max={240} value={component.textStyle?.size ?? 36}
+          onCommit={size => onComponent({ ...component, textStyle: { ...component.textStyle, size } }, `font:${component.id}`)} onEditEnd={onEditEnd} />
         <Select label="Text color" value={component.textStyle?.color ?? "ink"} options={["ink", "muted", "accent"]}
           onChange={(color) => onComponent({ ...component, textStyle: { ...component.textStyle, color: color as "ink" | "muted" | "accent" } })} />
         <Select label="Font weight" value={String(component.textStyle?.weight ?? 400)} options={["400", "500", "600"]}
           onChange={(weight) => onComponent({ ...component, textStyle: { ...component.textStyle, weight: Number(weight) as 400 | 500 | 600 } })} />
-        <Field label="Line height"><input type="number" min={1} max={3} step={0.1} value={component.textStyle?.lineHeight ?? 1.4}
-          onChange={(event) => { const lineHeight = event.target.valueAsNumber; if (lineHeight >= 1 && lineHeight <= 3) onComponent({ ...component, textStyle: { ...component.textStyle, lineHeight } }, `leading:${component.id}`); }} onBlur={onEditEnd} /></Field>
+        <NumberField label="Line height" min={1} max={3} step={0.1} value={component.textStyle?.lineHeight ?? 1.4}
+          onCommit={lineHeight => onComponent({ ...component, textStyle: { ...component.textStyle, lineHeight } }, `leading:${component.id}`)} onEditEnd={onEditEnd} />
         </div>
       </>}
       <Field label={component.kind === "diagram" || component.kind === "chart" ? "What should this explain?" : "Content intent"}>
@@ -502,23 +552,10 @@ export function InspectorPanel({
         <legend>Position & size</legend>
         <div className="geometry">
           {(["x", "y", "width", "height"] as const).map((key) => (
-            <Field key={key} label={humanize(key)}>
-              <span className="parameter-input">
-                <input
-                  name={key}
-                  autoComplete="off"
-                  type="number"
-                  step="1"
-                  value={Math.round(rect[key])}
-                  onChange={(e) => {
-                    if (e.target.value !== "")
-                      geometry(key, e.target.valueAsNumber);
-                  }}
-                  onBlur={onEditEnd}
-                />
-                <span className="parameter-unit" aria-hidden="true">px</span>
-              </span>
-            </Field>
+            <NumberField key={key} name={key} label={humanize(key)} unit="px" value={rect[key]}
+              min={key === "width" ? Math.min(180, rect.width, slide.canvas.width - rect.x) : key === "height" ? Math.min(72, rect.height, slide.canvas.height - rect.y) : 0}
+              max={key === "x" ? slide.canvas.width - rect.width : key === "y" ? slide.canvas.height - rect.height : key === "width" ? slide.canvas.width - rect.x : slide.canvas.height - rect.y}
+              onCommit={value => geometry(key, value)} onEditEnd={onEditEnd} />
           ))}
         </div>
       </fieldset>

package/src/components/RevisionNotes.tsx

@@ -3,7 +3,7 @@ import type { CompositionDocument } from "../../composition/types.ts";
 import { componentInstanceLabel } from "../lib/model.ts";
 import { activeRequest, type ReviewState, type ReviewTarget } from "../lib/review.ts";
 
-export function RevisionNotes({ document, target, review, disabled, onAdd, onRemove, onSelect }: {
+export function RevisionNotes({ document, target, review, disabled, onAdd, onRemove, onSelect, onNotice }: {
   document: CompositionDocument;
   target: ReviewTarget;
   review: ReviewState;
@@ -11,10 +11,10 @@ export function RevisionNotes({ document, target, review, disabled, onAdd, onRem
   onAdd: (target: ReviewTarget, text: string) => Promise<void>;
   onRemove: (id: string) => Promise<void>;
   onSelect: (target: ReviewTarget) => void;
+  onNotice: (message: string) => void;
 }) {
   const [drafts, setDrafts] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
-  const [error, setError] = useState("");
   const key = JSON.stringify(target);
   const text = drafts[key] ?? "";
   function label(value: ReviewTarget) {
@@ -28,16 +28,16 @@ export function RevisionNotes({ document, target, review, disabled, onAdd, onRem
     return `${slide.name} · ${name}${value.elementId ? ` · ${element ? value.elementId : "Deleted element"}` : ""}`;
   }
   async function run(action: () => Promise<void>) {
-    setSaving(true); setError("");
-    try { await action(); }
-    catch (error) { setError(error instanceof Error ? error.message : "Could not save revision note"); }
+    setSaving(true);
+    try { await action(); onNotice(""); }
+    catch (error) { onNotice(error instanceof Error ? error.message : "Could not save revision note"); }
     finally { setSaving(false); }
   }
   const pending = review.notes.filter(n => !n.resolved);
   return <section className="revision-notes" aria-label="Revision notes">
     <form onSubmit={event => { event.preventDefault(); void run(async () => {
       await onAdd(target, text);
-      setDrafts(current => ({ ...current, [key]: "" }));
+      setDrafts(current => ({ ...current, [key]: current[key] === text ? "" : current[key] }));
     }); }}>
       <label htmlFor="revision-note">Request a change</label>
       <p className="revision-note-scope">{label(target)}</p>
@@ -45,7 +45,6 @@ export function RevisionNotes({ document, target, review, disabled, onAdd, onRem
         onChange={event => setDrafts(current => ({ ...current, [key]: event.target.value }))} />
       <div className="revision-note-submit"><button type="submit" disabled={disabled || saving || !text.trim()}>{saving ? "Saving…" : "Add note"}</button></div>
     </form>
-    {error && <p role="alert" className="revision-note-error">{error}</p>}
     <p className="revision-note-count">{pending.length} pending</p>
     {pending.length > 0 && <ol className="revision-note-list">{pending.map((note, i) => <li key={note.id} id={`note-${note.id}`}>
       <button type="button" className="revision-note-target" onClick={() => onSelect(note)}><span>{i + 1}</span>{label(note)}</button>

package/src/components/RightPanel.tsx

@@ -5,6 +5,7 @@ import type {
 } from "../../composition/types.ts";
 import { componentInstanceLabel, type Draft } from "../lib/model.ts";
 import { InspectorPanel } from "./InspectorPanel.tsx";
+import { VectorOverflowWarning } from "./VectorOverflowWarning.tsx";
 
 export type RightPanelView = "settings" | "layers";
 
@@ -20,6 +21,7 @@ function LayersPanel({
   onReorderPaintOrder: (ids: string[]) => void;
 }) {
   const [dragging, setDragging] = useState<string>();
+  const [dropIndex, setDropIndex] = useState<number>();
   const layers = [...slide.paintOrder].reverse();
   function moveLayer(id: string, toIndex: number) {
     const next = layers.filter((item) => item !== id);
@@ -33,7 +35,36 @@ function LayersPanel({
         <span>Front to back</span>
       </div>
       {layers.length ? (
-        <div className="layer-list">
+        <div className="layer-list"
+          onDragOver={(event) => {
+            if (!dragging) return;
+            event.preventDefault();
+            const rows = [...event.currentTarget.querySelectorAll<HTMLElement>(".layer-row")];
+            const next = rows.findIndex((row) => {
+              const rect = row.getBoundingClientRect();
+              return event.clientY < rect.top + rect.height / 2;
+            });
+            const boundary = next < 0 ? layers.length : next;
+            const sourceIndex = layers.indexOf(dragging);
+            const unchanged = boundary === sourceIndex || boundary === sourceIndex + 1;
+            event.dataTransfer.dropEffect = unchanged ? "none" : "move";
+            setDropIndex(unchanged ? undefined : boundary);
+          }}
+          onDragLeave={(event) => {
+            if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+              setDropIndex(undefined);
+            }
+          }}
+          onDrop={(event) => {
+            if (!dragging) return;
+            event.preventDefault();
+            if (dropIndex !== undefined) {
+              moveLayer(dragging, dropIndex > layers.indexOf(dragging) ? dropIndex - 1 : dropIndex);
+            }
+            setDragging(undefined);
+            setDropIndex(undefined);
+          }}
+        >
           {layers.map((id, index) => {
             const component = slide.components.find((item) => item.id === id)!;
             const groups = slide.groups
@@ -44,23 +75,18 @@ function LayersPanel({
               <div
                 key={id}
                 data-layer={id}
+                data-drop-edge={dropIndex === index ? "before" : dropIndex === layers.length && index === layers.length - 1 ? "after" : undefined}
                 className={`layer-row ${selectedComponentId === id ? "selected" : ""} ${dragging === id ? "dragging" : ""}`}
                 draggable
                 onDragStart={(event) => {
                   setDragging(id);
+                  setDropIndex(undefined);
                   event.dataTransfer.effectAllowed = "move";
                   event.dataTransfer.setData("text/plain", id);
                 }}
-                onDragEnd={() => setDragging(undefined)}
-                onDragOver={(event) => {
-                  event.preventDefault();
-                  event.dataTransfer.dropEffect = "move";
-                }}
-                onDrop={(event) => {
-                  event.preventDefault();
-                  const source = dragging || event.dataTransfer.getData("text/plain");
-                  if (source && source !== id) moveLayer(source, index);
+                onDragEnd={() => {
                   setDragging(undefined);
+                  setDropIndex(undefined);
                 }}
               >
                 <span className="layer-drag" aria-hidden="true">⠿</span>
@@ -112,6 +138,7 @@ export function RightPanel({
   onSelectSlide,
   onSelectComponent,
   onSelectVectorElement,
+  onSelectOverflow,
   onReorderPaintOrder,
   onComponent,
   onSlide,
@@ -132,6 +159,7 @@ export function RightPanel({
   onSelectSlide: () => void;
   onSelectComponent: (id: string) => void;
   onSelectVectorElement: (id?: string) => void;
+  onSelectOverflow: (componentId: string, elementId?: string) => void;
   onReorderPaintOrder: (ids: string[]) => void;
   onComponent: (component: CompositionComponent, mergeKey?: string) => void;
   onSlide: (slide: CompositionSlide, mergeKey?: string) => void;
@@ -154,6 +182,9 @@ export function RightPanel({
             </button>
           ))}
         </div>
+        <div className="overflow-control" inert={collapsed}>
+          <VectorOverflowWarning slide={slide} theme={draft.theme} onSelect={onSelectOverflow} />
+        </div>
         <button
           type="button"
           className="panel-toggle"
@@ -174,6 +205,7 @@ export function RightPanel({
       <div className="right-panel-body" inert={collapsed}>
       {view === "settings" ? (
         <InspectorPanel
+          key={component?.id ?? slide.id}
           component={component}
           componentLabel={componentLabel}
           slide={slide}

package/src/components/VectorOverflowWarning.tsx

@@ -1,22 +1,31 @@
-import { useEffect, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import type { CompositionSlide, CompositionDocument } from "../../composition/types.ts";
+import { componentInstanceLabel } from "../lib/model.ts";
 
 /** Measure rendered text, including nested SVG transforms, after fonts settle. */
-export function VectorOverflowWarning({ slide, theme }: {
+export function VectorOverflowWarning({ slide, theme, onSelect }: {
   slide: CompositionSlide;
   theme: CompositionDocument["theme"];
+  onSelect: (componentId: string, elementId?: string) => void;
 }) {
-  const [count, setCount] = useState(0);
+  const [issues, setIssues] = useState<{ componentId: string; elementId?: string; text: string }[]>([]);
+  const id = useId();
+  const popover = useRef<HTMLDivElement>(null);
+  useEffect(() => { popover.current?.hidePopover(); }, [slide.id]);
   useEffect(() => {
     let cancelled = false;
     let frame = 0;
     function measure() {
       frame = requestAnimationFrame(() => {
         if (cancelled) return;
-        let overflow = 0;
+        const overflow: typeof issues = [];
+        function add(text: Element) {
+          const componentId = text.closest<HTMLElement>("[data-component]")?.dataset.component;
+          if (componentId) overflow.push({ componentId, elementId: text.getAttribute("data-vector-element") ?? undefined, text: text.textContent?.trim().slice(0, 80) ?? "Text" });
+        }
         document.querySelectorAll<HTMLElement>(".stage .text-block-content").forEach((text) => {
           const surface = text.parentElement;
-          if (surface && (text.scrollHeight > surface.clientHeight + 1 || text.scrollWidth > surface.clientWidth + 1)) overflow++;
+          if (surface && (text.scrollHeight > surface.clientHeight + 1 || text.scrollWidth > surface.clientWidth + 1)) add(text);
         });
         document.querySelectorAll<SVGSVGElement>(".stage .custom-vector-art").forEach((svg) => {
           const root = svg.getScreenCTM();
@@ -32,15 +41,33 @@ export function VectorOverflowWarning({ slide, theme }: {
             if (corners.some(([x, y]) => {
               const p = new DOMPoint(x, y).matrixTransform(transform);
               return p.x < view.x - 1 || p.y < view.y - 1 || p.x > view.x + view.width + 1 || p.y > view.y + view.height + 1;
-            })) overflow++;
+            })) add(text);
           });
         });
-        setCount(overflow);
+        setIssues(overflow);
+        if (!overflow.length) popover.current?.hidePopover();
       });
     }
     void document.fonts.ready.then(measure);
     document.fonts.addEventListener("loadingdone", measure);
     return () => { cancelled = true; cancelAnimationFrame(frame); document.fonts.removeEventListener("loadingdone", measure); };
   }, [slide, theme]);
-  return count ? <p role="status" className="field-error">{count} text {count === 1 ? "element exceeds" : "elements exceed"} its component viewport on this slide. Revise the text or geometry; nothing was resized.</p> : null;
+  return <>
+    <span className="sr-only" role="status">{issues.length ? `${issues.length} text overflow ${issues.length === 1 ? "warning" : "warnings"} on this page` : ""}</span>
+    <button type="button" className="overflow-trigger" popoverTarget={id} disabled={!issues.length}
+      aria-label={`${issues.length} text overflow warnings`} title="Text overflow warnings">
+      <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3 18 17H2ZM10 8v4m0 2v.5" /></svg>
+      <span>{issues.length}</span>
+    </button>
+    <div id={id} ref={popover} popover="auto" className="overflow-popover">
+      <strong>Text outside its frame</strong>
+      <p>Select an item to revise its text or size. Nothing was resized automatically.</p>
+      <ul>{issues.map(issue => <li key={`${issue.componentId}:${issue.elementId ?? "native"}`}>
+        <button type="button" onClick={() => { popover.current?.hidePopover(); onSelect(issue.componentId, issue.elementId); }}>
+          <strong>{componentInstanceLabel(slide.components, issue.componentId)}{issue.elementId ? ` · ${issue.elementId}` : ""}</strong>
+          <span>{issue.text}</span>
+        </button>
+      </li>)}</ul>
+    </div>
+  </>;
 }