konpeki 0.3.0 → 0.3.1

package/slides/introducing-konpeki/PROMPT.md

@@ -1,40 +1,30 @@
 # Public brief excerpt
 
-This file retains the original creation request and its authoring context.
-Implementation debugging and product-development follow-ups are omitted; this
-is not the complete conversation record.
+Public requests and authoring decisions; debugging and product-development
+follow-ups are omitted. This is not the complete conversation.
 
 > build a pre to introduce konpeki
 
-## Authoring record
+## Creation
 
-- Requested mode: unspecified. Resolved mode: default.
-- Explicit visual preferences: none supplied.
-- Interpretation: “pre” means presentation. Build a six-slide English introduction
-  for people and coding-agent users who have not used Konpeki.
-- Direction: white, IBM Plex Sans, dark ink and Konpeki blue; restrained diagrams,
-  clear hierarchy, no invented metrics or unsupported export claims.
-- Sources: the repository's documented capabilities;
-  see SOURCE.md for concrete references and qualifications.
-- Deliverable: composition JSON, browser presentation, reviewed captures.
+- Interpreted “pre” as a six-page English introduction for first-time users.
+- No mode or visual preferences supplied; chose default mode, white, IBM Plex
+  Sans, dark ink and Konpeki blue, with restrained diagrams and clear hierarchy.
+- Use documented capabilities, not invented metrics or export claims.
+  Deliver editable JSON, browser presentation and reviewed captures.
 
-## Public revision request
+## Revision
 
 > review the example composition and revise if needed
 
-### Adaptation record
-
-- Requested mode: unspecified. Resolved mode: retain default.
-- Scope: review the introduction against the current skill-led creation,
-  file-backed revision and browser-only playground workflows.
-- Position Konpeki as a creator of editable visuals, not primarily a slide
-  explainer. Show a creation brief without a mandatory init or canvas-drafting step;
-  keep the canvas-first intent / Build it workflow as an alternative.
-- Distinguish browser-local playground storage from an agent-opened file session.
-  Notes and Build it need the latter; Copy prompt resumes an idle agent.
-- Replace contributor setup commands with skill installation and current user
-  prerequisites. Do not imply that every agent uses the same slash command.
-- Preserve the six pages, existing Precision/Paper appearance, stable IDs and
-  unrelated geometry. Precision uses Noto Sans; the IBM Plex direction above
-  records the original creation, not the current theme.
-- Refresh the editable JSON, authoring source, source notes and reviewed captures.
+- Show creation from a brief, with init optional. Canvas-first intent / Build it
+  remains an alternative; Konpeki is not primarily a slide explainer.
+- Separate browser-local storage from agent-opened files. Notes and Build it
+  require a file session; Copy prompt resumes an idle agent.
+- Use skill installation and user prerequisites, not contributor setup or
+  assumptions that every agent supports the same slash command.
+- Retain default mode, six pages, stable IDs, unrelated geometry and the existing
+  Precision Paper appearance. Its Noto Sans differs from the original font choice.
+- Refresh JSON, authoring source, source notes and captures.
+
+See [SOURCE.md](SOURCE.md) for capability evidence and artwork provenance.

package/slides/introducing-konpeki/README.md

@@ -1,76 +1,44 @@
 # Introducing Konpeki
 
-A six-page English introduction for first-time users. Defaults to Precision on paper
-with theme-linked colors and fonts; deck appearance can switch palettes and
-Paper/Night without repainting vector elements. Uses the default authoring mode.
-
-1. **Meet Konpeki** — create editable visuals with your coding agent.
-2. **Create and revise together** — brief, generate, edit and revise the same file.
-3. **Five semantic components** — Text block, Diagram, Chart, Image and Table.
-4. **Keep the detail editable** — direct editing and targeted agent revision notes.
-5. **Browser or agent editor** — local playground versus file-backed editing.
-6. **Try a real brief** — install the skill and give a one-sentence creation request.
+A six-page introduction covering creation, shared editing, components, revision
+notes, browser/file sessions and a first brief. Uses default authoring mode and
+Precision Paper with theme-linked colors and fonts.
 
 ## Open and revise
 
-For repository development, run `mise exec -- pnpm dev` from the root and open
-`?example=introducing-konpeki` in the application. A static build serves the same
-example after `mise exec -- pnpm build`. Select **Present** for viewing.
+Open the [playground example](https://vcfgdev.github.io/konpeki/?example=introducing-konpeki)
+and select **Present**. Edits save to a separate browser-local copy; use
+**Browser → Download JSON** to keep them. **Reset example** restores the bundled
+version, so download your work first. Browser storage is not a backup or agent sync.
 
-Edits autosave to this example's separate browser-local working copy when storage
-is available. **Browser → Download JSON** keeps a portable copy; **Import JSON**
-and **Start blank** replace only this working copy. **Reset example** restores
-the bundled version. Download existing work before resetting, including when
-loading an updated example. Browser storage is not a backup and does not sync
-with an agent's file. The playground has no connected agent, Notes or Build it.
+For agent revisions, follow [setup](../../SETUP.md) and open a copy of
+[composition.json](composition.json) in a file-backed preview. Notes, **Build it**
+and **Copy prompt** work there, not in the standalone playground. See the
+[canvas workflow](../../docs/workflow.md) for handoff details.
 
-For agent-backed editing, follow [SETUP.md](../../SETUP.md) to install the complete
-skill, then ask your agent to open a downloaded or copied composition file.
-Browser and agent revisions use that same file in its preview. Continue feedback
-in agent chat, or use Notes / Build it and Copy prompt as described in the
-[canvas workflow](../../docs/workflow.md). A creation brief selects generate;
-init is optional, not a required first step.
+The JSON is the editable source: double-click text to edit it; diagrams contain
+editable vector elements. [author.ts](author.ts) reconstructs the original deck:
 
-[composition.json](composition.json) is the authoritative editable deck. Each
-page contains semantic components. Ordinary text uses native content and typography
-fields; diagrams and custom specimens keep editable vector elements. Double-click
-ordinary text to edit it directly; Content intent remains separate agent guidance.
-This is not a second React deck runtime or a collection of page images.
+```sh
+mise exec -- node slides/introducing-konpeki/author.ts
+```
 
-[author.ts](author.ts) records the reviewed drawing instructions. Running
-`mise exec -- node slides/introducing-konpeki/author.ts` validates and regenerates the JSON;
-it **replaces manual canvas revisions**, so do not rerun it over revised work.
-See [the public brief excerpt](PROMPT.md) and [source facts / provenance](SOURCE.md).
+Run from the repository root. **This overwrites canvas edits.**
+[Brief](PROMPT.md) · [Sources](SOURCE.md) · [Reviewed screenshots](screenshots/)
 
 ## Review
 
-- `mise exec -- pnpm check`, `mise exec -- pnpm test` (106 tests),
-  `mise exec -- pnpm build`, composition validation and `git diff --check`: passed.
-  The build retains its existing large-chunk advisory.
-- Inspected all six canvas pages in Precision Paper, Precision Night and Editorial
-  Paper at 1920×1080 and 1024×768, DPR2 (36 states). No clipped text or overlapping
-  labels. Revised the file/playground wording and kept the revision arrow returning
-  from Revise to Edit, not to a new brief.
-- `review.mjs` checked text bounds after font loading and each authored vector
-  viewport against its component rectangle within 0.5 screen pixels at both sizes.
-  With a dev or preview server and `agent-browser` available, run:
+With a dev/preview server and `agent-browser`, run from the repository root:
 
-  ```sh
-  mise exec -- node slides/introducing-konpeki/review.mjs http://localhost:4318 /tmp/konpeki-intro Precision paper
-  ```
+```sh
+mise exec -- node slides/introducing-konpeki/review.mjs <preview-url> /tmp/konpeki-intro Precision paper
+```
 
-  Repeat with `Precision night` and `Editorial paper`; inspect captures after
-  the assertions pass. The script defaults to Plex if no palette is supplied and
-  explicitly selects its legacy font pairing. An optional final typography ID
-  tests independent combinations, such as `Green paper plex-serif` or
-  `Plex night noto-sans`; both passed all six pages at both sizes after separation.
-- Precision Paper's accessibility tree exposes page copy, visual descriptions
-  and the chart's illustrative values. Home / ArrowRight navigation reached all
-  six pages; Noto Sans weights 400, 500 and 600 loaded. Text on the white canvas
-  measures 15.59:1 (ink), 6.91:1 (muted) and 9.54:1 (accent).
-- Final reviewed presentation captures: [screenshots](screenshots/).
-- Chart values are illustrative; diagrams are explanatory artwork, not screenshots.
-- Native agent-client installation, PDF/PPTX, mobile, reduced motion, focus styling
-  and cross-application fidelity were not verified by this content review.
+The script checks text bounds and vector alignment at 1920×1080 and 1024×768,
+DPR2. Repeat with `Precision night` and `Editorial paper`, then inspect captures.
+An optional final font ID overrides the palette's default, e.g. `Green paper plex-serif`.
+These 36 states passed the original visual review, alongside validation, typecheck,
+tests and build. Browser review does not verify agent-client installation,
+PDF/PPTX, mobile, reduced motion, focus styling or cross-application fidelity.
 
 ![Title slide](screenshots/page-1.png)

package/slides/introducing-konpeki/SOURCE.md

@@ -1,26 +1,19 @@
 # Source facts and provenance
 
-This is a factual introduction to Konpeki, not a fictional customer case study.
+Product claims come from repository documentation, not a customer case study.
 
 | Claim | Repository evidence |
 | --- | --- |
-| Covers, social graphics, charts, diagrams and presentations share an editable canvas | [Product introduction](../../README.md); [authoring guidance](../../AUTHORING.md) |
-| Install the complete skill; a creation brief selects generate, with init optional | [Setup](../../SETUP.md); [canvas workflow](../../docs/workflow.md) |
-| In a file-backed preview, valid browser and agent changes update the same composition JSON | [File-backed workflow](../../docs/workflow.md#file-backed-editing-with-an-agent) |
-| Five top-level kinds: Text block, Diagram, Chart, Image, Table; stable editable vector IDs | [Composition contract](../../composition/README.md); [types](../../composition/types.ts) |
-| Direct text, shape and layout editing with undo/redo | [Product capabilities](../../README.md); [composition operations](../../composition/document.ts) |
-| Diagram, Chart and Table previews are structural drafts; real source data is needed for finished artwork | [Canvas workflow](../../docs/workflow.md#documents-and-exports); [factual-fidelity rules](../../AUTHORING.md#requirements) |
-| Revision notes and Build it belong to file-backed sessions; Copy prompt resumes an idle agent | [Review handoff](../../docs/workflow.md#file-backed-editing-with-an-agent) |
-| Playground examples save independent browser-local copies; import/download JSON, start blank, reset, PNG and Present are available | [Demo hosting](../../docs/development.md#development-server-and-demo-hosting); [storage implementation](../../src/lib/storage.ts); [browser controls](../../src/components/WorkspaceChrome.tsx) |
-| Playground files do not sync with an agent session; there is no connected AI or cloud storage | [Demo hosting](../../docs/development.md#development-server-and-demo-hosting) |
-| Agent workflow requires Node.js 24+, npm, file/command access and a browser; contributor pnpm setup is separate | [User setup](../../SETUP.md); [development setup](../../docs/development.md) |
+| Covers, social graphics, charts, diagrams and presentations share one canvas | [Product](../../README.md); [authoring](../../AUTHORING.md) |
+| Skill-led creation; init optional; Node.js 24+, npm, file/command access and a browser required | [User setup](../../SETUP.md) |
+| Browser and agent edit the same JSON; file sessions support notes, Build it and Copy prompt | [File-backed workflow](../../docs/workflow.md#file-backed-editing-with-an-agent) |
+| Text block, Diagram, Chart, Image and Table; editable vectors with stable IDs | [Contract](../../composition/README.md); [types](../../composition/types.ts) |
+| Direct text, shape and layout editing with undo/redo | [Operations](../../composition/document.ts) |
+| Diagram, Chart and Table defaults are structural drafts; finished artwork needs source data | [Exports](../../docs/workflow.md#documents-and-exports); [fidelity rules](../../AUTHORING.md#requirements) |
+| Playground: independent local copies, JSON import/download, blank/reset, PNG and Present; no agent sync, connected AI or cloud storage | [Hosting](../../docs/development.md#development-server-and-demo-hosting); [storage](../../src/lib/storage.ts); [controls](../../src/components/WorkspaceChrome.tsx) |
 
-The architecture drawings, vector selection example and component specimens are
-original explanatory artwork for this deck, not product screenshots. The tiny
-chart uses explicitly labeled illustrative values, not measured product data.
-The product-announcement prompt is an example brief, not a customer result.
-No third-party image assets or customer claims are used. The retained Precision
-theme uses Noto Sans from the repository's Fontsource dependency; theme-linked
-text follows the selected palette's font roles. No PDF/PPTX or cross-application
-fidelity is claimed. This deck does not establish native agent-client installation
-compatibility or an official hosted playground URL.
+Drawings are original explanatory artwork, not screenshots. Chart values and
+the announcement brief are illustrative, not product measurements or customer
+results. No third-party images are used. Precision defaults to bundled Noto Sans;
+text follows the selected font roles. See the [review scope](README.md#review)
+for verification limits.

package/src/app/App.tsx

@@ -44,6 +44,7 @@ import {
   type RightPanelView,
 } from "../components/RightPanel.tsx";
 import { WorkspaceChrome } from "../components/WorkspaceChrome.tsx";
+import { FeedbackNotice } from "../components/ui.tsx";
 import { exampleDraft } from "../lib/examples.ts";
 import { exportPagePNG } from "../lib/export-png.ts";
 import { fileSessionToken } from "../lib/file-session.ts";
@@ -85,12 +86,13 @@ export function App() {
   const validation = useMemo(() => validateComposition(draft), [draft]);
   const [savedDraft, setSavedDraft] = useState<Draft>();
   const [blocked, setBlocked] = useState(loaded.storageBlocked);
+  const [requiresReset, setRequiresReset] = useState(loaded.storageBlocked);
   const [error, setError] = useState(loaded.error ?? "");
   const [notice, setNotice] = useState<{
     message: string;
     tone: "neutral" | "error";
   }>();
-  const [toastClosing, setToastClosing] = useState(false);
+  const [toastPaused, setToastPaused] = useState(false);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [leftView, setLeftView] = useState<LeftPanelView>("pages");
   const [rightCollapsed, setRightCollapsed] = useState(false);
@@ -125,6 +127,7 @@ export function App() {
     onNotice: showNotice,
     onError: setError,
   });
+  const fileLocked = loaded.fileSession && (!fileSession.ready || fileSession.opening);
   useEffect(() => {
     if (!focusAfterHistory.current) return;
     focusAfterHistory.current = false;
@@ -160,18 +163,10 @@ export function App() {
     return () => clearTimeout(timer);
   }, [draft, validation, blocked, loaded.exampleName, loaded.fileSession]);
   useEffect(() => {
-    if (!notice) return;
-    const timer = window.setTimeout(() => setToastClosing(true), 3000);
+    if (!notice || notice.tone === "error" || toastPaused) return;
+    const timer = window.setTimeout(() => setNotice(undefined), 3000);
     return () => window.clearTimeout(timer);
-  }, [notice]);
-  useEffect(() => {
-    if (!toastClosing) return;
-    const timer = window.setTimeout(() => {
-      setNotice(undefined);
-      setToastClosing(false);
-    }, 280);
-    return () => window.clearTimeout(timer);
-  }, [toastClosing]);
+  }, [notice, toastPaused]);
   useEffect(() => {
     const narrow = window.matchMedia("(max-width: 1200px)");
     const compact = window.matchMedia("(max-width: 900px)");
@@ -189,7 +184,7 @@ export function App() {
   }, []);
   useEffect(() => {
     function keydown(event: KeyboardEvent) {
-      if (presenting || fileSession.building) return;
+      if (presenting || fileLocked || fileSession.building) return;
       const modifier = event.metaKey || event.ctrlKey;
       const target = event.target;
       const editable =
@@ -246,10 +241,18 @@ export function App() {
     }
     window.addEventListener("keydown", keydown);
     return () => window.removeEventListener("keydown", keydown);
-  }, [draft, presenting, selected, vectorSelection, fileSession.building]);
+  }, [draft, presenting, selected, vectorSelection, fileSession.building, fileLocked]);
   function showNotice(message: string, tone: "neutral" | "error" = "neutral") {
-    setToastClosing(false);
-    setNotice({ message: message.replace(/\.$/, ""), tone });
+    if (!message) setToastPaused(false);
+    setNotice(message ? { message: message.replace(/\.$/, ""), tone } : undefined);
+  }
+  function changeLeftPanel(collapsed: boolean) {
+    setLeftCollapsed(collapsed);
+    if (!collapsed && window.matchMedia("(max-width: 900px)").matches) setRightCollapsed(true);
+  }
+  function changeRightPanel(collapsed: boolean) {
+    setRightCollapsed(collapsed);
+    if (!collapsed && window.matchMedia("(max-width: 900px)").matches) setLeftCollapsed(true);
   }
   function updateDraft(
     next: Draft,
@@ -454,7 +457,7 @@ export function App() {
     const page = draft.slides.find(s => s.id === target.slideId);
     if (!page) return;
     selectSlide(page.id);
-    setLeftCollapsed(false);
+    changeLeftPanel(false);
     setLeftView("notes");
     const component = page.components.find(c => c.id === target.componentId);
     if (component) {
@@ -474,7 +477,7 @@ export function App() {
       const requested = await fileSession.build(instruction, slide.id, selected, vectorSelection?.componentId === selected ? vectorSelection?.elementId : undefined);
       if (requested) {
         setNotice(undefined);
-        setToastClosing(false);
+        setToastPaused(false);
       }
     } catch (requestError) {
       showNotice(requestError instanceof Error ? requestError.message : "Could not send the build request.", "error");
@@ -582,6 +585,7 @@ export function App() {
         createHistory({ draft: next, activeSlideId: next.slides[0].id }),
       );
       setBlocked(false);
+      setRequiresReset(false);
       setError("");
       setTitleError(false);
       showNotice(loaded.exampleName ? "Example reset." : "Saved draft reset.");
@@ -597,6 +601,11 @@ export function App() {
       : savedDraft !== draft
         ? "Saving changes in this browser…"
         : "Your editable composition is saved only in this browser.";
+  const recoveryMessage = fileSession.opening
+    ? "Opening the file… Editing is paused."
+    : !validation.ok
+    ? `Changes are not saved: ${validation.issues[0]?.path || "document"} ${validation.issues[0]?.message || "is invalid"}. Undo the edit or correct this value.`
+    : error;
   const selectedComponent = slide.components.find((c) => c.id === selected);
   const buildState = fileSession.building
     ? fileSession.review.request?.status === "working" ? "working" : "ready"
@@ -609,25 +618,36 @@ export function App() {
       <a className="skip-link" href="#canvas-stage">
         Skip to canvas
       </a>
-      {error && (
-        <div className="recovery" role="alert">
-          <span>{error}</span>
-          <button type="button" onClick={reset}>
-            {loaded.exampleName ? "Reset example" : "Reset saved draft"}
-          </button>
-        </div>
-      )}
+      <FeedbackNotice kind="recovery">
+        {recoveryMessage ? <>
+          <span>{recoveryMessage}</span>
+          <div className="recovery-actions">
+            {!validation.ok ? <button type="button" onClick={() => setHistory(current => undoHistory(current))}>Undo edit</button> : <>
+              {(!loaded.fileSession || fileSession.ready) && <button type="button" onClick={downloadJSON}>Download JSON</button>}
+              {loaded.fileSession ? fileSession.status === "conflict" ? (
+                <button type="button" onClick={() => {
+                  if (window.confirm("Replace your browser edits with the current file? Download JSON first to keep a copy.")) void fileSession.reload();
+                }}>Load file version</button>
+              ) : <button type="button" disabled={fileSession.opening} onClick={() => { void fileSession.retry(); }}>{fileSession.opening ? "Opening…" : fileSession.ready ? "Retry save" : "Retry open"}</button> : <>
+                {!requiresReset && <button type="button" onClick={() => { setBlocked(false); setError(""); }}>Retry save</button>}
+                <button type="button" onClick={reset}>{loaded.exampleName ? "Reset example" : "Reset saved draft"}</button>
+              </>}
+            </>}
+          </div>
+        </> : null}
+      </FeedbackNotice>
       <div
         className={`workspace ${fileSession.building ? "is-building" : ""} ${leftCollapsed ? "left-collapsed" : ""} ${rightCollapsed ? "right-collapsed" : ""}`}
         aria-hidden={presenting || undefined}
-        inert={presenting || undefined}
+        inert={presenting || fileLocked || undefined}
+        aria-busy={fileSession.opening || undefined}
         onDragOver={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
           event.preventDefault();
           event.dataTransfer.dropEffect = "copy";
         }}
         onDrop={(event) => {
-          if (fileSession.building) {
+          if (fileLocked || fileSession.building) {
             event.preventDefault();
             return;
           }
@@ -639,7 +659,7 @@ export function App() {
       >
         <WorkspaceChrome
           leftCollapsed={leftCollapsed}
-          onToggleLeftPanel={() => setLeftCollapsed(!leftCollapsed)}
+          onToggleLeftPanel={() => changeLeftPanel(!leftCollapsed)}
           title={draft.title}
           titleRef={title}
           titleError={titleError}
@@ -679,6 +699,7 @@ export function App() {
             onAdd={fileSession.addNote}
             onRemove={fileSession.removeNote}
             onSelect={selectNoteTarget}
+            onNotice={(message) => showNotice(message, "error")}
           />}
           activeSlideId={slide.id}
           collapsed={leftCollapsed}
@@ -703,7 +724,7 @@ export function App() {
               setVectorSelection(selection);
               setRightView("settings");
               if (edit) {
-                setRightCollapsed(false);
+                changeRightPanel(false);
                 setVectorEditRequest((request) => request + 1);
               }
             } else setVectorSelection(undefined);
@@ -752,12 +773,19 @@ export function App() {
           slide={slide}
           draft={draft}
           onView={setRightView}
-          onCollapsedChange={setRightCollapsed}
+          onCollapsedChange={changeRightPanel}
           onSelectSlide={() => selectComponent()}
           onSelectComponent={selectComponent}
           onSelectVectorElement={(elementId) =>
             selected && setVectorSelection({ componentId: selected, elementId })
           }
+          onSelectOverflow={(componentId, elementId) => {
+            selectComponent(componentId);
+            setVectorSelection(elementId ? { componentId, elementId } : undefined);
+            setRightView("settings");
+            changeRightPanel(false);
+            if (elementId) setVectorEditRequest(request => request + 1);
+          }}
           onReorderPaintOrder={updatePaintOrder}
           onComponent={updateComponent}
           onSlide={(nextSlide, mergeKey) =>
@@ -808,13 +836,10 @@ export function App() {
           onExit={() => setPresenting(false)}
         />
       )}
-      <div
-        className={`toast ${notice ? "visible" : ""} ${notice?.tone === "error" ? "error" : ""} ${toastClosing ? "closing" : ""}`}
-      >
-        <span role={notice?.tone === "error" ? "alert" : "status"} aria-live={notice?.tone === "error" ? "assertive" : "polite"}>
-          {notice?.message}
-        </span>
-      </div>
+      <FeedbackNotice kind="toast" tone={notice?.tone} onPauseChange={setToastPaused}
+        onDismiss={() => { setNotice(undefined); setToastPaused(false); }}>
+        {notice?.message}
+      </FeedbackNotice>
     </>
   );
 }

package/src/components/Canvas.tsx

@@ -791,8 +791,10 @@ export function Canvas({
         if (
           event.target instanceof Element &&
           !event.target.closest(".canvas")
-        )
+        ) {
+          event.currentTarget.focus({ preventScroll: true });
           onSelect();
+        }
       }}
     >
       <div className="slide-wrap">
@@ -802,6 +804,7 @@ export function Canvas({
               aria-label="Page name"
               autoFocus
               value={nextSlideName}
+              onPointerDown={(event) => event.stopPropagation()}
               onChange={(event) => setNextSlideName(event.target.value)}
               onBlur={() => {
                 const name = nextSlideName.trim();
@@ -850,7 +853,10 @@ export function Canvas({
           style={canvasStyle}
           aria-label="Page canvas"
           onPointerDown={(e) => {
-            if (interactive && e.target === e.currentTarget) onSelect();
+            if (interactive && e.target === e.currentTarget) {
+              e.currentTarget.closest<HTMLElement>(".stage")?.focus({ preventScroll: true });
+              onSelect();
+            }
           }}
           onPointerMove={interactive ? move : undefined}
           onPointerUp={interactive ? () => end() : undefined}

package/src/components/InspectorPanel.tsx

@@ -34,10 +34,9 @@ import {
 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> = {
@@ -410,7 +409,6 @@ export function InspectorPanel({
             })
           }
         />
-        <VectorOverflowWarning slide={slide} theme={draft.theme} />
         <h2 className="slide-settings-heading">Page numbering</h2>
         <fieldset className="page-number-picker">
           <SegmentedControl
@@ -477,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}`,
@@ -504,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"}>
@@ -555,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>