ketatlas 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.4
+
+- Anchor the progress detail header directly inside the modal top border and scroll only the form beneath it.
+
+## 0.2.3
+
+- Keep preview headers and progress footers outside the scrolling content so the footer remains fixed to the frame bottom.
+
 ## 0.2.2
 
 - Show screen status, blockers, linked PR states and scoped state checks in preview footers, with direct access to progress details.

package/README.md

@@ -17,15 +17,15 @@ https://github.com/user-attachments/assets/13f24fc8-7b8e-4bda-9e02-364c120ee163
 [KetAtlas is available on npm](https://www.npmjs.com/package/ketatlas). Use Node.js 22+ and run it from any directory:
 
 ```sh
-npx --yes ketatlas@0.2.2 scaffold my-atlas --template web
-npx --yes ketatlas@0.2.2 serve my-atlas/atlas.json
-npx --yes ketatlas@0.2.2 audit my-atlas/atlas.json --strict
+npx --yes ketatlas@0.2.4 scaffold my-atlas --template web
+npx --yes ketatlas@0.2.4 serve my-atlas/atlas.json
+npx --yes ketatlas@0.2.4 audit my-atlas/atlas.json --strict
 ```
 
 Or install the CLI once for your user account:
 
 ```sh
-npm install --global ketatlas@0.2.2
+npm install --global ketatlas@0.2.4
 ketatlas scaffold my-atlas
 ketatlas serve my-atlas/atlas.json
 ketatlas audit my-atlas/atlas.json --strict

package/docs/progress.md

@@ -71,11 +71,11 @@ Evidence kinds are `pr`, `test`, `release`, `reference`. Required fields: `id`,
 ## Editing locally and from agents
 
 ```sh
-npx --yes ketatlas@0.2.2 serve atlas.json
-npx --yes ketatlas@0.2.2 serve atlas.json --read-only
-npx --yes ketatlas@0.2.2 progress atlas.json --init
-npx --yes ketatlas@0.2.2 progress atlas.json --json
-npx --yes ketatlas@0.2.2 progress atlas.json --set sign-in --record record.json --expect REVISION_FROM_READ
+npx --yes ketatlas@0.2.4 serve atlas.json
+npx --yes ketatlas@0.2.4 serve atlas.json --read-only
+npx --yes ketatlas@0.2.4 progress atlas.json --init
+npx --yes ketatlas@0.2.4 progress atlas.json --json
+npx --yes ketatlas@0.2.4 progress atlas.json --set sign-in --record record.json --expect REVISION_FROM_READ
 ```
 
 `--init` explicitly creates Unassessed records and refuses an existing progress file. `--set` replaces one complete screen record; preserve existing checklist IDs, evidence and state references. Read the revision with `--json` first. Do not retry a stale revision by blindly substituting a new one: reload and reconcile changes. `updatedAt` is stamped on successful record writes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ketatlas",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Interactive HTML maps for screens, workflows, and user journeys.",
   "type": "module",
   "license": "MIT",

package/src/index.js

@@ -365,7 +365,7 @@ export function createAtlas(container, input, options = {}) {
     const v = previewNode.screen.viewport,
       dialog = $("screen-dialog"),
       frame = $("dialog-preview").querySelector("iframe");
-    const scale = Math.min(1, dialog.clientWidth / v.width);
+    const scale = Math.min(1, dialog.querySelector(".preview-scroll").clientWidth / v.width);
     $("dialog-preview").style.width = v.width * scale + "px";
     $("dialog-preview").style.height = v.height * scale + "px";
     frame.style.width = v.width + "px";

package/src/template.js

@@ -30,7 +30,7 @@ export function template(config) {
         <div class="map-minimap"><span>Current flow</span><svg id="minimap" viewBox="0 0 168 114" role="img" aria-label="Current viewport position"></svg><button id="minimap-fit">Fit entire flow</button></div>
       </main>
     </div>
-    <dialog id="screen-dialog" class="screen-dialog" aria-labelledby="dialog-title"><header><div><small id="dialog-screen-id"></small><h2 id="dialog-title"></h2></div><button id="close-screen" class="icon-button" aria-label="Close preview"></button></header><div id="dialog-preview"></div><footer><div id="dialog-progress" class="preview-progress"></div><div class="preview-actions"><button id="dialog-progress-details" data-ui="action" data-variant="secondary">Progress details</button><a id="dialog-open" data-ui="action" data-variant="secondary" target="_blank" rel="noopener noreferrer">Open in new tab</a></div></footer></dialog>
+    <dialog id="screen-dialog" class="screen-dialog" aria-labelledby="dialog-title"><header><div><small id="dialog-screen-id"></small><h2 id="dialog-title"></h2></div><button id="close-screen" class="icon-button" aria-label="Close preview"></button></header><div class="preview-scroll"><div id="dialog-preview"></div></div><footer><div id="dialog-progress" class="preview-progress"></div><div class="preview-actions"><button id="dialog-progress-details" data-ui="action" data-variant="secondary">Progress details</button><a id="dialog-open" data-ui="action" data-variant="secondary" target="_blank" rel="noopener noreferrer">Open in new tab</a></div></footer></dialog>
     <dialog id="help-dialog" class="help-dialog" aria-labelledby="help-title"><h2 id="help-title">Explore the whole journey</h2><ul>
       <li>Drag the canvas or a screen card to move around.</li><li>Use + / −, Ctrl/⌘ + scroll, or pinch to zoom.</li><li>Choose a workflow in the sidebar. Fit the flow to see every branch.</li><li>Click a node to follow its outgoing steps. Double-click a screen to interact.</li><li>Use arrow keys to pan, F to fit, 0 to return to the start, and Escape to close.</li>
     </ul><p>Arrows describe the authored flow. Embedded screens keep their own behavior.</p><button id="close-help" data-ui="action" data-variant="primary">Got it</button></dialog>

package/styles/ketatlas.css

@@ -1258,12 +1258,12 @@ a svg {
   width: 100%;
 }
 .progress-editor > .progress-header {
-  position: sticky;
-  top: 0;
+  position: static;
+  flex: none;
   background: var(--kv-panel-bg);
   z-index: 2;
   border-bottom: 1px solid var(--kv-border-default);
-  padding-bottom: var(--kv-space-3);
+  padding: var(--progress-dialog-padding);
 }
 .progress-editor .progress-actions {
   position: sticky;
@@ -1358,11 +1358,9 @@ a svg {
   }
 }
 
-/* Keep delivery context visible while scrolling a full-size screen preview. */
+/* Only preview content scrolls; the footer remains outside the scrolling region. */
 .screen-dialog footer {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
+  flex: none;
   background: var(--kv-panel-bg);
   flex-wrap: wrap;
   max-height: 40dvh;
@@ -1406,3 +1404,39 @@ a svg {
 .preview-actions [data-ui] {
   font-size: var(--kv-text-xs);
 }
+
+.screen-dialog[open] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.screen-dialog > header {
+  flex: none;
+  position: static;
+}
+.preview-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.progress-editor {
+  --progress-dialog-padding: var(--kv-space-6);
+  padding: 0;
+  overflow: hidden;
+}
+.progress-editor[open] {
+  display: flex;
+  flex-direction: column;
+}
+.progress-editor > #progress-form {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 var(--progress-dialog-padding) var(--progress-dialog-padding);
+}
+@media (max-width: 760px) {
+  .progress-editor {
+    --progress-dialog-padding: var(--kv-space-3);
+  }
+}

package/templates/basic/README.md

@@ -7,7 +7,7 @@ npx ketatlas serve atlas.json
 npx ketatlas audit atlas.json --strict
 ```
 
-Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.2 and use ketatlas serve atlas.json.
+Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.4 and use ketatlas serve atlas.json.
 
 Edit the HTML files in screens/ to replace the sample product. styles/design-system.css is generated from the pinned KetJS design system; do not manually fork its tokens.
 

package/templates/process/README.md

@@ -7,7 +7,7 @@ npx ketatlas serve atlas.json
 npx ketatlas audit atlas.json --strict
 ```
 
-Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.2 and use ketatlas serve atlas.json.
+Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.4 and use ketatlas serve atlas.json.
 
 This template models a process without HTML screens. Add a screen registry and screen nodes when needed.
 

package/templates/web/README.md

@@ -7,7 +7,7 @@ npx ketatlas serve atlas.json
 npx ketatlas audit atlas.json --strict
 ```
 
-Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.2 and use ketatlas serve atlas.json.
+Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.4 and use ketatlas serve atlas.json.
 
 Edit the HTML files in screens/ to replace the sample product. styles/design-system.css is generated from the pinned KetJS design system; do not manually fork its tokens.