inklet 4.0.0.dev11__tar.gz → 4.0.0.dev12__tar.gz

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/.github/workflows/publish.yml

@@ -6,7 +6,7 @@ on:
       tag:
         description: Published GitHub release tag
         required: true
-        default: v4.0.0.dev11
+        default: v4.0.0.dev12
         type: string
       dry_run:
         description: Validate release files without uploading to PyPI
@@ -43,7 +43,7 @@ jobs:
           RELEASE_TAG: ${{ inputs.tag }}
         run: |
           [[ "$RELEASE_TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+(\.dev[0-9]+)?$ ]] || {
-            echo 'Expected a stable or development tag such as v3.1.0 or v4.0.0.dev11' >&2
+            echo 'Expected a stable or development tag such as v3.1.0 or v4.0.0.dev12' >&2
             exit 1
           }
           gh release view "$RELEASE_TAG" --json isDraft,isPrerelease > "$RUNNER_TEMP/release.json"

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 4.0.0.dev12 — 2026-09-13
+
+Twelfth development preview: a redesigned local figure workspace.
+3.1.0 remains the stable release.
+
+- Add searchable object navigation, a large canvas, focused inspector tabs,
+  fixed apply/discard controls, header exports and revision feedback.
+- Add fitted zoom, wheel zoom, pan tools and Space/middle-button dragging without
+  changing authored geometry. Preserve object gesture coordinates across zooms.
+- Add native colour pickers, exact-value fields, keyboard shortcuts and a help
+  dialog; retain native text undo and adapt the workspace to smaller screens.
+- Protect unapplied fields during selection and file/source actions; highlight
+  pending changes and offer explicit discard. Keep schema 0.4 and Python exports.
+- Review real pointer capture and mobile overflow, extend browser regressions,
+  and update the illustrated editor guide.
+
 ## 4.0.0.dev11 — 2026-09-12
 
 Eleventh development preview: unified composition layout, labels and appearance.

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: inklet
-Version: 4.0.0.dev11
+Version: 4.0.0.dev12
 Summary: Scientific figures with live data, measured layout, and consistent vector exports.
 Project-URL: Repository, https://github.com/Mapika/inklet
 Project-URL: Documentation, https://inklet.readthedocs.io/en/latest/
@@ -81,16 +81,16 @@ their signatures and report schemas may change.
 
 ## 4.0 development preview
 
-**4.0.0.dev11** connects layout, label and appearance editing in the local
-composition editor. Adjust supported plot, text and module styles alongside
-layout, undo changes together, and save choices that reproduce through Python.
+**4.0.0.dev12** redesigns the local editor as a figure workspace with object
+navigation, a larger canvas, focused inspector tabs, zoom/pan, colour pickers,
+keyboard shortcuts and protection for unapplied changes.
 ```sh
-python -m pip install "inklet==4.0.0.dev11"
+python -m pip install "inklet==4.0.0.dev12"
 ```
 
 [Preview guide and examples](https://inklet.readthedocs.io/en/latest/development-preview/) ·
 [4.0 roadmap](https://inklet.readthedocs.io/en/latest/roadmap/) ·
-[Release notes](https://github.com/Mapika/inklet/releases/tag/v4.0.0.dev11)
+[Release notes](https://github.com/Mapika/inklet/releases/tag/v4.0.0.dev12)
 
 This is an opt-in development release. Experimental APIs and saved-state schemas
 may change; 3.1.0 remains the stable release. General browser editing,

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/README.md

@@ -31,16 +31,16 @@ their signatures and report schemas may change.
 
 ## 4.0 development preview
 
-**4.0.0.dev11** connects layout, label and appearance editing in the local
-composition editor. Adjust supported plot, text and module styles alongside
-layout, undo changes together, and save choices that reproduce through Python.
+**4.0.0.dev12** redesigns the local editor as a figure workspace with object
+navigation, a larger canvas, focused inspector tabs, zoom/pan, colour pickers,
+keyboard shortcuts and protection for unapplied changes.
 ```sh
-python -m pip install "inklet==4.0.0.dev11"
+python -m pip install "inklet==4.0.0.dev12"
 ```
 
 [Preview guide and examples](https://inklet.readthedocs.io/en/latest/development-preview/) ·
 [4.0 roadmap](https://inklet.readthedocs.io/en/latest/roadmap/) ·
-[Release notes](https://github.com/Mapika/inklet/releases/tag/v4.0.0.dev11)
+[Release notes](https://github.com/Mapika/inklet/releases/tag/v4.0.0.dev12)
 
 This is an opt-in development release. Experimental APIs and saved-state schemas
 may change; 3.1.0 remains the stable release. General browser editing,

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/docs/development-preview.md

@@ -1,6 +1,6 @@
-# Inklet 4.0.0.dev11
+# Inklet 4.0.0.dev12
 
-The eleventh 4.0 development release includes the linked plotting, mapping,
+The twelfth 4.0 development release includes the linked plotting, mapping,
 engineering and scientific workflows developed since 3.1.0. It is an installable
 snapshot for trying real examples and reporting problems. **3.1.0 remains the
 stable release.** The [4.0 roadmap](roadmap.md) still has open work.
@@ -8,7 +8,7 @@ stable release.** The [4.0 roadmap](roadmap.md) still has open work.
 ```sh
 python -m venv .venv
 source .venv/bin/activate
-python -m pip install "inklet==4.0.0.dev11"
+python -m pip install "inklet==4.0.0.dev12"
 ```
 
 On Windows PowerShell, activate with `.venv\Scripts\Activate.ps1` instead.
@@ -19,9 +19,9 @@ stable releases; see its [installation documentation](https://pip.pypa.io/en/sta
 Optional extras can be installed with the same pin:
 
 ```sh
-python -m pip install "inklet[render,pandas,polars]==4.0.0.dev11"
+python -m pip install "inklet[render,pandas,polars]==4.0.0.dev12"
 # Add calibrated volumes and TIFF workflows when needed:
-python -m pip install "inklet[volume,render]==4.0.0.dev11"
+python -m pip install "inklet[volume,render]==4.0.0.dev12"
 ```
 
 The core preview needs no browser server, NumPy, pandas, Polars or Blender.
@@ -29,7 +29,25 @@ Opening the generated HTML requires a browser. PNG/PDF exports from browser
 figures use separate Chrome/Chromium and Pillow; native Diagram exports retain
 their existing requirements. See [installation](installation.md).
 
-## Unified composition authoring in dev11
+## Studio workspace in dev12
+
+The [composition editor](layout-editor.md) now has a searchable object navigator,
+a central figure canvas and a focused inspector. Layout, Labels and Styles use
+compact tabs, colour swatches and visible pending-change feedback. Apply/discard
+controls stay accessible; save/export and undo/redo move to the header.
+
+![Inklet studio workspace](assets/guides/editor-studio.png)
+
+Zoom, Fit and pan explore the canvas without changing the authored figure.
+Object gestures retain their figure coordinates at different zoom levels.
+Keyboard shortcuts cover apply, save and undo/redo; the help dialog lists the
+full set. Pending edits are protected during selection, source refresh and
+file actions. The layout adapts to tablet and phone screens.
+
+This is a UI change: existing schema 0.4 files and the Python compiler remain
+the source of saved choices and SVG/PDF exports.
+
+## Unified composition authoring retained from dev11
 
 The [composition editor](layout-editor.md#edit-appearance-alongside-layout) now
 combines Layout, Labels and Styles sections. Pending changes across sections
@@ -220,7 +238,7 @@ The wheel contains the library. To obtain recipes and fixtures, use the matching
 release checkout or source archive:
 
 ```sh
-git clone --branch v4.0.0.dev11 https://github.com/Mapika/inklet.git
+git clone --branch v4.0.0.dev12 https://github.com/Mapika/inklet.git
 cd inklet
 python -m pip install -e '.[render]'
 python examples/v4/regional_report.py --renderer compiled --editor --output out/regional

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/docs/layout-editor.md

@@ -1,11 +1,11 @@
 # Local layout editor
 
-Available since **4.0.0.dev8**, with mouse gestures in **4.0.0.dev9**, named label editing in **4.0.0.dev10**, and unified style controls in **4.0.0.dev11**, under `inklet.experimental.layout_editor`. Adjust
-named placements and dimensions in a browser while Python recompiles the
-actual composition. The preview and downloaded SVG/PDF come from the same
-compiled figure, including plots, nested diagrams and native 3D content.
+Available since **4.0.0.dev8**, with the redesigned studio workspace in
+**4.0.0.dev12**, under `inklet.experimental.layout_editor`. Arrange named
+content, edit labels and appearance, and review the actual Python-compiled
+figure. Downloaded SVG/PDF files use that same successful preview.
 
-![Mouse selection and proportional scaling handles on a native 3D object](assets/guides/layout-editor-gestures.png)
+![Inklet studio with object navigation, a large figure canvas and focused style controls](assets/guides/editor-studio.png)
 
 The [complete example](../examples/layout_editor.py) opens the reusable report
 from [composition recipes](composition-recipes.md). From the checkout, run:
@@ -19,6 +19,37 @@ press Ctrl+C to stop it. This is a local editor, not a standalone HTML editing
 file. Ordinary [figure viewers](compiled-viewer.md) remain available for
 sharing a finished document without a Python process.
 
+## A workspace for your figure
+
+The desktop workspace has a searchable object navigator, a central canvas and
+an inspector with **Layout**, **Labels** and **Styles** tabs. Select an object
+from the navigator or directly on the figure. Nested objects retain their
+hierarchy, and the inspector shows the exact source path. On smaller screens,
+a **Content** selector replaces the navigator; on phones the inspector sits
+below the canvas.
+
+Use **+**, **−** and **Fit** to explore the figure. The zoom percentage is
+relative to the fitted view, not a physical-size preview. Ctrl/Cmd + wheel also
+zooms. Use the pan tool, middle-button dragging, or hold Space and drag to move
+the viewport. View changes never resize the authored figure or enter its undo
+history. Object movements and corner scaling still use figure coordinates at
+any zoom level.
+
+Changed fields are highlighted and counted. Switch inspector tabs to combine
+edits, then **Apply changes** as one undo step. **Discard** clears unapplied
+fields. Selecting another object, refreshing, undoing, opening a file, saving
+or exporting asks you to apply or discard pending changes first; browser
+navigation also warns about pending edits. Applied changes still need **Save
+choices** to download a portable file.
+
+Colour swatches open the native picker, while the adjacent field accepts exact
+colour values. Automatic/transparent values use a muted swatch. Undo/redo and
+file actions stay in the header; **Export** offers SVG and PDF. The footer shows
+compile feedback and the current revision. The **Shortcuts** dialog documents
+all controls, including Ctrl/Cmd + Enter to apply, Ctrl/Cmd + Z to undo,
+Ctrl/Cmd + Shift + Z to redo and Ctrl/Cmd + S to save applied choices. Text inputs
+retain native text undo.
+
 ## Start with your composition
 
 ```python
@@ -79,7 +110,7 @@ top-fitting behavior; dependent content can reflow when the compiler rebuilds.
 
 ![Editing a named plot callout with text, side, clearance and leader controls](assets/guides/layout-editor-labels.png)
 
-Select a composition child, choose **Labels** in **Edit**, then change its fields and choose **Apply
+Select a composition child, choose the **Labels** tab, then change its fields and choose **Apply
 changes**. The editor supports text components created with `component(i.text,
 ...)`, string module captions, and plot `title`, `text` and `annotate`
 instructions with an explicit string `key`. For composition callouts, supply a
@@ -119,9 +150,9 @@ Undo/redo, reset, saved JSON and SVG/PDF exports include the label edits.
 
 ![Named line and marker styles edited in the composition inspector](assets/guides/layout-editor-styles.png)
 
-Choose **Styles** in **Edit**. Layout, Labels and Styles retain their pending
+Choose the **Styles** tab. Layout, Labels and Styles retain their pending
 changes when switching sections; **Apply changes** compiles them together as
-one undo step. Selecting another content target discards unapplied fields.
+one undo step. Apply or discard pending fields before selecting another content target.
 
 | Named content | Available appearance controls |
 | --- | --- |
@@ -168,7 +199,7 @@ are outside this style-control subset.
 
 ## Edit and review
 
-Choose a named path in **Content** and a section in **Edit**, enter the fields you want to change, then
+Choose a named path in **Content** and an inspector tab, enter the fields you want to change, then
 select **Apply changes**. Other fields retain their definitions.
 
 - Child placement fields are X, Y, anchor, width, height and uniform scale. Numbers use the
@@ -196,12 +227,12 @@ appears. Distinct placements of that shared content remain independently editabl
 
 ## Save, reopen and export
 
-**Save layout** downloads the versioned JSON described in
-[saved layout choices](layout-overrides.md). **Open layout choices** loads that
+**Save choices** downloads the versioned JSON described in
+[saved layout choices](layout-overrides.md). **Open** loads that
 same format. The file contains changed layout, label and supported style fields.
 Other source content, assets and undo history stay outside the file. Keep it alongside the recipe.
 
-**Download SVG** and **Download PDF** export the successful preview revision.
+**Export → SVG** and **Export → PDF** export the successful preview revision.
 If another editor tab changes the session first, stale commands and export
 links are rejected. Use **Reload editor** to obtain the current shared state.
 

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/docs/roadmap.md

@@ -64,7 +64,9 @@ choices. Dev10 adds saved named text and callout editing across modules, text
 components, keyed plot instructions and composition annotations, including typed
 identity reconciliation. Dev11 connects supported plot, text and module styles
 to that same layout/label history, saved state and reconciliation workflow,
-with data-driven marker fields protected from constant overrides.
+with data-driven marker fields protected from constant overrides. Dev12 adds
+the studio workspace: object navigation, focused controls, zoom/pan, shortcuts
+and protection for pending edits.
 Serialized project templates, asset manifests, shared selection
 relationships, axis-label/camera editing and finer-grained manipulation remain open. Subsequent work
 should extend authoring and cross-content identity beyond this bounded inspector.

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "inklet"
-version = "4.0.0.dev11"
+version = "4.0.0.dev12"
 description = "Scientific figures with live data, measured layout, and consistent vector exports."
 readme = "README.md"
 authors = [{name = "Mark Marosi"}]

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/src/inklet/__init__.py

@@ -470,4 +470,4 @@ __all__ = [
     "mm", "pt", "COLUMN_SINGLE", "COLUMN_DOUBLE",
 ]
 
-__version__ = "4.0.0.dev11"
+__version__ = "4.0.0.dev12"

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/src/inklet/experimental/layout_editor/__init__.py

@@ -207,8 +207,10 @@ class LayoutEditor:
             return self.snapshot()
 
     def _html(self):
-        return (Path(__file__).with_name('page.html').read_text().replace('__TOKEN__',self._token)
-                .replace('<!--GESTURES-->',Path(__file__).with_name('gestures.js').read_text()))
+        return (Path(__file__).with_name('page.html').read_text(encoding='utf-8').replace('__TOKEN__',self._token)
+                .replace('/*WORKSPACE_CSS*/',Path(__file__).with_name('workspace.css').read_text(encoding='utf-8'))
+                .replace('<!--WORKSPACE-->',Path(__file__).with_name('workspace.js').read_text(encoding='utf-8'))
+                .replace('<!--GESTURES-->',Path(__file__).with_name('gestures.js').read_text(encoding='utf-8')))
 
     def start(self, *, port=0):
         """Start a loopback-only editor server; port=0 chooses a free local port."""

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/src/inklet/experimental/layout_editor/gestures.js

@@ -23,11 +23,11 @@ function pointerPoint(event){const point=overlay.createSVGPoint();point.x=event.
 function cancelGesture(){if(!gesture)return;const id=gesture.pointerId;gesture=null;if(overlay.hasPointerCapture(id))overlay.releasePointerCapture(id);lock(false);drawOverlay();status('Drag cancelled.');}
 overlay.addEventListener('pointerdown',event=>{
   if(busy||gesture||!previewReady||event.button!==0||event.isPrimary===false)return;
-  const hit=event.target.closest('[data-path]');if(!hit)return;
+  const hit=event.target.closest('[data-path]');if(!hit){selectTarget('/');return;}
   let path=hit.dataset.path,corner=hit.dataset.corner;
   if(event.altKey){const parent=path.slice(0,path.lastIndexOf('/'));if(state.geometry[parent]){path=parent;corner=null;}}
   const box=state.geometry[path]?.box;if(!box||box[2]<=0||box[3]<=0)return;
-  event.preventDefault();byId('target').value=path;fields();overlay.focus();
+  event.preventDefault();if(!selectTarget(path))return;overlay.focus({preventScroll:true});
   const point=pointerPoint(event);gesture={path,corner,box:[...box],start:point,client:[event.clientX,event.clientY],pointerId:event.pointerId,dx:0,dy:0,factor:1,moved:false};
   overlay.setPointerCapture(event.pointerId);lock(true);status(corner?'Scale artwork; release to apply. Escape cancels.':'Move content; release to apply. Escape cancels.');
 });
@@ -56,7 +56,7 @@ overlay.addEventListener('pointercancel',cancelGesture);
 overlay.addEventListener('lostpointercapture',()=>{if(gesture)cancelGesture();});
 document.addEventListener('keydown',event=>{if(event.key==='Escape'&&gesture){event.preventDefault();cancelGesture();}});
 overlay.addEventListener('keydown',event=>{
-  if(busy||gesture||!previewReady)return;const path=byId('target').value;if(!state.geometry[path])return;
+  if(busy||gesture||!previewReady||dirty.size)return;const path=byId('target').value;if(!state.geometry[path])return;
   const step=event.shiftKey?10:1,keys={ArrowLeft:[-step,0],ArrowRight:[step,0],ArrowUp:[0,-step],ArrowDown:[0,step]};
   if(keys[event.key]){event.preventDefault();request('gesture',{path,dx:keys[event.key][0],dy:keys[event.key][1]});}
 });

{inklet-4.0.0.dev11 → inklet-4.0.0.dev12}/src/inklet/experimental/layout_editor/page.html

@@ -1,24 +1,27 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Inklet layout editor</title><style>
-*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui;color:#20312f;background:#f5f7f6}header{padding:20px 28px;border-bottom:1px solid #d2dcda;background:white}h1{font-size:23px;margin:0}header p{margin:4px 0 0;color:#52635f}main{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;padding:24px}aside{background:white;border:1px solid #d2dcda;border-radius:8px;padding:18px;align-self:start}label{display:block;margin:8px 0}input,textarea,select,button,.download{font:inherit;padding:7px;border:1px solid #9cafa9;border-radius:4px;background:white;color:inherit}input:not([type=checkbox]),textarea,select{width:100%}button,.download{cursor:pointer}button:hover,.download:hover{background:#e8efec}button:disabled{cursor:default;opacity:.5}.primary{background:#246b59;color:white}.primary:hover{background:#195440}fieldset{margin:16px 0;padding:8px 12px;border:1px solid #d2dcda}legend{font-weight:600}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.download{text-decoration:none;display:inline-block}#stage{position:relative;border:1px solid #d2dcda}#overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:none}#overlay .hit{fill:transparent;cursor:move}#overlay .hit:hover{stroke:#568e80;stroke-width:1;vector-effect:non-scaling-stroke}#overlay .selection{fill:none;stroke:#246b59;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:move}#overlay .handle{fill:white;stroke:#246b59;stroke-width:2;vector-effect:non-scaling-stroke;cursor:nwse-resize}#overlay .ghost{stroke-dasharray:5 3}#preview{display:block;width:100%;height:auto;background:white;border:0}#status{min-height:24px;white-space:pre-wrap}.error{color:#a12626}.note{font-size:13px;color:#52635f}.upload{display:inline-block}input[type=file]{font-size:12px}section{min-width:0}@media(max-width:760px){main{grid-template-columns:1fr;padding:12px;gap:16px}header{padding:16px}aside{width:100%}}
-</style></head><body><header><h1>Layout editor</h1><p>Adjust named content and review the compiled figure.</p></header><main><aside>
-<label>Content<select id="target"></select></label><label>Edit<select id="inspector"><option value="layout">Layout</option><option value="labels">Labels</option><option value="styles">Styles</option></select></label><div id="fields"></div><p id="empty" class="note" hidden>No editable fields in this section for the selected content.</p>
-<p id="status" role="status" aria-live="polite"></p>
-<div class="actions"><button id="apply" class="primary">Apply changes</button><button id="reset">Reset target</button></div>
-<div class="actions"><button id="undo">Undo</button><button id="redo">Redo</button></div>
-<div class="actions"><button id="refresh">Refresh source</button><button id="reload">Reload editor</button></div>
-<p class="note">Measured fields follow the recipe until you enter a fixed value. Reset target restores its source layout, labels and styles. Refresh source rebuilds from Python and clears undo history.</p>
-<label>Open layout choices<input id="load" type="file" accept=".json,application/json"></label>
-<div class="actions"><a class="download" id="save" href="/layout.json">Save layout</a></div>
-<button id="drop" hidden>Refresh and discard removed targets</button>
-</aside><section><div class="actions"><a class="download" id="svg" href="/figure.svg">Download SVG</a><a class="download" id="pdf" href="/figure.pdf">Download PDF</a></div>
-<p class="note">Drag objects to move them. Drag corner handles to scale artwork. Alt-click selects a containing group. Escape cancels a drag.</p><div id="stage"><img id="preview" alt="Compiled composition preview"><svg id="overlay" tabindex="0" role="application" aria-label="Figure layout canvas. Select content, drag to move, or use arrow keys. Corner handles scale artwork."></svg></div><p class="note">This editor needs its local Python session. Saved layout JSON can be reopened here or applied in Python.</p></section></main>
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Inklet · Layout editor</title><style>/*WORKSPACE_CSS*/</style></head>
+<body><header class="topbar">
+<div class="brand"><svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" fill="currentColor"/><path d="M8 7h4v12H8zm7 0h3v3h-3zm0 5h3v7h-3z" fill="white"/></svg><strong>inklet<span>studio</span></strong></div>
+<div class="project"><span class="project-name">Figure workspace</span><span class="connection"><i></i>Local session</span></div>
+<div class="top-actions"><button id="undo" class="icon-button" title="Undo · Ctrl/Cmd Z" aria-label="Undo">↶</button><button id="redo" class="icon-button" title="Redo · Ctrl/Cmd Shift Z" aria-label="Redo">↷</button><span class="divider"></span><button id="open-file" class="open-button">Open</button><input id="load" type="file" accept=".json,application/json" hidden><a id="save" class="button" href="/layout.json">Save choices</a><details class="export-menu"><summary class="button primary">Export <span>↗</span></summary><div class="popover"><a id="svg" href="/figure.svg">SVG <small>Editable vector</small></a><a id="pdf" href="/figure.pdf">PDF <small>Ready for print</small></a></div></details></div>
+</header>
+<main class="workspace">
+<aside class="navigator"><div class="panel-heading"><h2>Objects</h2><span id="object-count" class="count"></span></div><label class="search"><span aria-hidden="true">⌕</span><input id="search" type="search" placeholder="Find an object…" aria-label="Find an object"></label><nav id="object-tree" aria-label="Composition objects"></nav><div class="navigator-bottom"><span class="eyebrow">SOURCE CONNECTION</span><p>Your Python recipe stays in control.</p><button id="refresh">↻ Refresh source</button><button id="reload" class="quiet">Reload editor</button><small>Refresh rebuilds the figure and clears undo history.</small></div></aside>
+<section class="canvas-panel" aria-label="Figure workspace"><div class="canvas-bar"><div><span class="eyebrow">COMPOSITION</span><span id="page-size"></span></div><button id="help-button" class="quiet" aria-label="Keyboard shortcuts" title="Keyboard shortcuts">? <span>Shortcuts</span></button></div>
+<div id="viewport"><div id="canvas-space"><div id="stage"><img id="preview" alt="Compiled composition preview"><svg id="overlay" tabindex="0" role="application" aria-label="Figure layout canvas. Select content, drag to move, or use arrow keys. Corner handles scale artwork."></svg></div></div></div>
+<div class="canvas-tools"><div class="tool-group"><button id="select-tool" class="active" aria-pressed="true" title="Select and move objects" aria-label="Select tool">↖</button><button id="pan-tool" aria-pressed="false" title="Pan canvas · hold Space" aria-label="Pan tool">✥</button></div><span class="divider"></span><button id="zoom-out" aria-label="Zoom out">−</button><output id="zoom-label">100%</output><button id="zoom-in" aria-label="Zoom in">+</button><span class="divider"></span><button id="fit" title="Fit figure to workspace">Fit</button></div>
+<div class="canvas-caption"><span id="selection-size">Whole composition</span><span>Drag to move · corners to scale</span></div></section>
+<aside class="inspector-panel"><div class="inspector-title"><span class="eyebrow">INSPECTOR</span><h1 id="selection-name">Composition</h1><span id="selection-path">/</span></div><label class="target-picker">Content<select id="target"></select></label><label class="sr-only" aria-hidden="true">Edit<select id="inspector" tabindex="-1"><option value="layout">Layout</option><option value="labels">Labels</option><option value="styles">Styles</option></select></label><div class="inspector-tabs" role="group" aria-label="Inspector section"><button data-tab="layout" aria-pressed="true">Layout</button><button data-tab="labels" aria-pressed="false">Labels</button><button data-tab="styles" aria-pressed="false">Styles</button></div><div class="inspector-scroll"><div id="fields"></div><div id="empty" hidden><span>◇</span><h3>Nothing to edit here</h3><p>Choose another section or object.</p></div><p class="inspector-hint" id="inspector-hint">Measured positions follow your recipe. Enter a value to place them explicitly.</p><button id="reset" class="quiet reset">Reset object to source</button><button id="drop" class="danger" hidden>Discard removed targets and refresh</button></div><div class="apply-bar"><div><span id="pending-label">Up to date</span><button id="discard" class="quiet" hidden>Discard</button></div><button id="apply" class="primary">Apply changes <kbd>⌘ ↵</kbd></button></div></aside>
+</main>
+<footer class="statusbar"><span id="status" role="status" aria-live="polite">Connecting to your figure…</span><span>Python-backed preview <span class="status-dot">●</span> <span id="revision-label">Revision 0</span></span></footer>
+<dialog id="help"><div class="panel-heading"><h2>Make room for your ideas.</h2><button id="close-help" aria-label="Close shortcuts">×</button></div><p>Every applied edit rebuilds the actual figure.</p><dl><dt>Move an object</dt><dd>Drag / arrow keys</dd><dt>Move 10 mm</dt><dd>Shift + arrow</dd><dt>Select a containing group</dt><dd>Alt + click</dd><dt>Pan the workspace</dt><dd>Space + drag / pan tool</dd><dt>Zoom</dt><dd>Ctrl/Cmd + wheel</dd><dt>Apply pending changes</dt><dd>Ctrl/Cmd + Enter</dd><dt>Undo / redo</dt><dd>Ctrl/Cmd + Z / Shift + Z</dd><dt>Save applied choices</dt><dd>Ctrl/Cmd + S</dd><dt>Cancel a drag</dt><dd>Escape</dd></dl><p class="note">Keep the local Python session running. Saved choices accompany your recipe; exports contain the applied figure.</p></dialog>
 <script>
 'use strict';
 const token='__TOKEN__',byId=id=>document.getElementById(id);
 let state=null,busy=false,previewURL=null,previewReady=false;const dirty=new Map();
 function status(text,error=false){byId('status').textContent=text;byId('status').classList.toggle('error',error);}
-function lock(value){busy=value;document.querySelectorAll('button,input,textarea,select').forEach(el=>el.disabled=value);if(!value&&state){byId('undo').disabled=!state.undo;byId('redo').disabled=!state.redo;}}
+function lock(value){busy=value;document.querySelectorAll('button,input,textarea,select').forEach(el=>el.disabled=value);syncUI();}
 function fields(){dirty.clear();const container=byId('fields');container.replaceChildren();const target=state.targets[byId('target').value];
   for(const [group,values] of Object.entries(target)){
     if(group==='styles'){
@@ -30,7 +33,7 @@ function fields(){dirty.clear();const container=byId('fields');container.replace
           label.append(document.createTextNode(({fill:'Fill colour',stroke:'Line colour',color:'Marker colour',stroke_width:'Line width (mm)',size:styleValues.kind==='plot-scatter'?'Marker diameter (mm)':'Text size (mm)',opacity:'Opacity'})[field]));
           input.type=['fill','stroke','color'].includes(field)?'text':'number';input.step='any';input.value=typeof value==='number'?Number(value.toPrecision(6)):value??'';input.placeholder=input.type==='text'?'Automatic / #RRGGBB':'Automatic';
           input.dataset.group=group;input.dataset.label=key;input.dataset.key=field;input.dataset.kind=styleValues.kind;
-          const changed=()=>dirty.set(JSON.stringify([group,key,field]),input);input.addEventListener('input',changed);input.addEventListener('change',changed);label.append(input);box.append(label);
+          const changed=()=>markDirty(JSON.stringify([group,key,field]),input);input.addEventListener('input',changed);input.addEventListener('change',changed);label.append(input);box.append(label);
         }container.append(box);
       }continue;
     }
@@ -46,7 +49,7 @@ function fields(){dirty.clear();const container=byId('fields');container.replace
           else if(field==='clear'){input.type='number';input.min=0;input.step='any';input.value=value??'';input.placeholder='Automatic';}
           else{input.rows=3;input.value=value;}
           input.dataset.group=group;input.dataset.label=key;input.dataset.key=field;input.dataset.kind=labelValues.kind;
-          const changed=()=>dirty.set(JSON.stringify([group,key,field]),input);input.addEventListener('input',changed);input.addEventListener('change',changed);label.append(input);box.append(label);
+          const changed=()=>markDirty(JSON.stringify([group,key,field]),input);input.addEventListener('input',changed);input.addEventListener('change',changed);label.append(input);box.append(label);
         }container.append(box);
       }continue;
     }
@@ -55,26 +58,27 @@ function fields(){dirty.clear();const container=byId('fields');container.replace
       if(key==='fit_top'){input.type='checkbox';input.checked=value;}
       else if(key==='anchor'){input.type='text';input.value=value??'';input.placeholder='Local origin';}
       else{input.type='number';input.step='any';if(typeof value==='number')input.value=Number(value.toPrecision(6));else input.placeholder=value===null?'Authored size':'Measured';}
-      input.addEventListener('input',()=>dirty.set(group+'.'+key,input));label.append(input);box.append(label);
+      input.addEventListener('input',()=>markDirty(group+'.'+key,input));label.append(input);box.append(label);
     }container.append(box);
   }
-  showSection();drawOverlay();
+  showSection();decorateFields();syncUI();drawOverlay();
 }
-function showSection(){const selected=byId('inspector').value;let shown=0;byId('fields').querySelectorAll('fieldset').forEach(box=>{box.hidden=(selected==='layout'?!['placement','page'].includes(box.dataset.section):box.dataset.section!==selected);if(!box.hidden)shown++;});byId('empty').hidden=shown>0;}
+function showSection(){const selected=byId('inspector').value;let shown=0;byId('fields').querySelectorAll('fieldset').forEach(box=>{box.hidden=(selected==='layout'?!['placement','page'].includes(box.dataset.section):box.dataset.section!==selected);if(!box.hidden)shown++;});byId('empty').hidden=shown>0;document.querySelectorAll('[data-tab]').forEach(button=>button.setAttribute('aria-pressed',button.dataset.tab===selected));byId('inspector-hint').textContent=({layout:'Measured positions follow your recipe. Enter a value to place them explicitly.',labels:'Text is remeasured when you apply. Connected content follows its new size.',styles:'Blank fields use automatic styling. Sizes and line widths use millimetres.'})[selected];}
 byId('inspector').addEventListener('change',showSection);
 function render(next){previewReady=false;state=next;const selected=byId('target').value;byId('target').replaceChildren();for(const path of Object.keys(state.targets)){const option=document.createElement('option');option.value=path;option.textContent=path==='/'?'Whole composition':path;byId('target').append(option);}if(Object.hasOwn(state.targets,selected))byId('target').value=selected;fields();
-  if(previewURL)URL.revokeObjectURL(previewURL);previewURL=URL.createObjectURL(new Blob([state.svg],{type:'image/svg+xml'}));const currentURL=previewURL;byId('preview').style.aspectRatio=state.viewbox[2]+'/'+state.viewbox[3];byId('preview').onload=()=>{if(byId('preview').src===currentURL){previewReady=true;drawOverlay();}};byId('preview').src=previewURL;
+  if(previewURL)URL.revokeObjectURL(previewURL);previewURL=URL.createObjectURL(new Blob([state.svg],{type:'image/svg+xml'}));const currentURL=previewURL;byId('preview').style.aspectRatio=state.viewbox[2]+'/'+state.viewbox[3];byId('preview').onload=()=>{if(byId('preview').src===currentURL){previewReady=true;sizeCanvas();drawOverlay();}};byId('preview').src=previewURL;
   for(const [id,path] of [['save','layout.json'],['svg','figure.svg'],['pdf','figure.pdf']])byId(id).href='/'+path+'?revision='+state.revision;
   byId('drop').hidden=true;lock(false);
 }
-async function request(action,value,missing='error'){if(busy)return;lock(true);status('Compiling…');try{
+async function request(action,value,missing='error'){if(busy)return;if(dirty.size&&action!=='edit'){status('Apply or discard pending changes first.',true);return;}lock(true);status('Compiling…');try{
  const response=await fetch('/command',{method:'POST',headers:{'Content-Type':'application/json','X-Inklet-Token':token},body:JSON.stringify({action,value,missing,revision:state.revision})});const result=await response.json();if(!response.ok)throw new Error(result.error);render(result);const removed=result.report.orphaned_targets;status(removed.length?'Discarded removed targets: '+removed.join(', '):'Layout ready.');
 }catch(error){status(error.message,true);if(action==='refresh'&&error.message.includes('orphaned layout targets'))byId('drop').hidden=false;}finally{lock(false);}}
-async function reload(){if(busy)return;lock(true);try{const response=await fetch('/state');const result=await response.json();if(!response.ok)throw new Error(result.error);render(result);status('Layout ready.');}catch(error){status(error.message,true);}finally{lock(false);}}
-byId('target').addEventListener('change',fields);
+async function reload(){if(busy)return;if(dirty.size){status('Apply or discard pending changes first.',true);return;}lock(true);try{const response=await fetch('/state');const result=await response.json();if(!response.ok)throw new Error(result.error);render(result);status('Layout ready.');}catch(error){status(error.message,true);}finally{lock(false);}}
+byId('target').addEventListener('change',()=>selectTarget(byId('target').value));
 byId('apply').onclick=()=>{try{if(!dirty.size){status('No layout changes entered.');return;}const value={path:byId('target').value};for(const input of dirty.values()){const {group,key}=input.dataset;let field;if(input.type==='checkbox')field=input.checked;else if(group==='styles'&&input.value==='')field=null;else if(group==='styles'&&input.type==='text')field=input.value;else if(group==='labels'&&(key==='text'||key==='side'))field=input.value;else if(group==='labels'&&key==='clear'&&input.value===''&&input.dataset.kind==='plot-annotate')field=null;else if(key==='anchor')field=input.value||null;else if(input.value===''&&(key==='width'||key==='height')&&group==='placement')field=null;else{field=Number(input.value);if(input.value===''||!Number.isFinite(field))throw new Error('Enter a finite value for '+key);} if(group==='labels'||group==='styles'){const label=(value[group]??=Object.create(null))[input.dataset.label]??={kind:input.dataset.kind};label[key]=field;}else (value[group]??={})[key]=field;}request('edit',value);}catch(error){status(error.message,true);}};
 byId('reset').onclick=()=>request('reset',byId('target').value);byId('undo').onclick=()=>request('undo');byId('redo').onclick=()=>request('redo');byId('refresh').onclick=()=>request('refresh');byId('drop').onclick=()=>request('refresh',null,'drop');byId('reload').onclick=reload;
 byId('load').onchange=async event=>{const file=event.target.files[0];if(!file||busy)return;lock(true);try{if(file.size>1000000)throw new Error('Layout file is too large');const value=JSON.parse(await file.text());lock(false);await request('load',value);}catch(error){status(error.message,true);}finally{event.target.value='';lock(false);}};
+<!--WORKSPACE-->
 <!--GESTURES-->
 reload();
 </script></body></html>