@tio-canvas/canvas 0.1.1 → 0.1.3

package/client/canvas.css

@@ -731,3 +731,17 @@ body[data-text-select],body[data-text-select] * { cursor: text !important; }
 /* The group box steps aside while screens are being reordered. */
 body[data-gesture="reorder"] #selection { border-color: transparent; }
 body[data-gesture="reorder"] #selection #handles { visibility: hidden; }
+
+/* Change log dialog: reuses the shortcuts dialog body; one block per release.
+   The dialog is as tall as its content, up to the picker height. */
+#changelog { height: fit-content; max-height: min(var(--canvas-picker-height),calc(100dvh - 2 * var(--canvas-panel-inset))); }
+.changelog-entry + .changelog-entry { margin-top: var(--canvas-layers-heading-inset); padding-top: var(--canvas-layers-heading-inset); border-top: var(--canvas-border) solid var(--canvas-line); }
+.changelog-entry h3 { display: flex; align-items: baseline; gap: var(--canvas-padding); margin: 0 0 var(--canvas-padding); font-size: inherit; font-weight: 600; color: var(--canvas-text); }
+.changelog-entry time { color: var(--canvas-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
+.changelog-items { display: grid; grid-template-columns: 4.5rem minmax(0,1fr); column-gap: var(--canvas-gap); row-gap: var(--canvas-padding); margin: 0; padding: 0; list-style: none; }
+.changelog-items li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; text-wrap: pretty; }
+.changelog-tag { --tag-hue: 265; justify-self: start; padding: 1px var(--canvas-padding); border-radius: 999px; background: oklch(0.7 0.12 var(--tag-hue) / .16); color: color-mix(in oklch, oklch(0.5 0.15 var(--tag-hue)) 70%, var(--canvas-text)); font-size: 11px; font-weight: 600; line-height: 18px; }
+.changelog-tag[data-type="new"] { --tag-hue: 150; }
+.changelog-tag[data-type="improved"] { --tag-hue: 250; }
+.changelog-tag[data-type="fixed"] { --tag-hue: 60; }
+.changelog-tag[data-type="faster"] { --tag-hue: 330; }

package/client/canvas.js

@@ -1,5 +1,6 @@
 import './tooltip.js';
 import './shortcuts.js';
+import {renderChangelog} from './changelog.js';
 import './device-gate.js';
 import './onboarding.js';
 import { setupSelectFields, closeSelectMenus, positionSelectMenus } from './select-field.js';
@@ -921,6 +922,15 @@ shortcuts.addEventListener('click',event=>{
   if(event.clientX<rect.left || event.clientX>rect.right || event.clientY<rect.top || event.clientY>rect.bottom)shortcuts.close();
 });
 shortcuts.addEventListener('close',()=>$('#layers-more').focus());
+const changelog=$('#changelog');
+$('#changelog-open').onclick=()=>{closeContext();stop();clearContact();delete document.body.dataset.space;renderChangelog(changelog.querySelector('.changelog-body'));changelog.showModal();};
+$('#changelog-close').onclick=()=>changelog.close();
+changelog.addEventListener('click',event=>{
+  if(event.target!==changelog)return;
+  const rect=changelog.getBoundingClientRect();
+  if(event.clientX<rect.left || event.clientX>rect.right || event.clientY<rect.top || event.clientY>rect.bottom)changelog.close();
+});
+changelog.addEventListener('close',()=>$('#layers-more').focus());
 $('#undo').onclick=()=>runHistory('undo');
 $('#redo').onclick=()=>runHistory('redo');
 $('#fit').onclick=()=>fitEntries(fitAll());
@@ -962,7 +972,7 @@ moreMenu.addEventListener('beforetoggle',event=>{
   moreMenu.style.left=`${Math.max(inset,Math.min(anchor.left+(anchor.width-width)/2,innerWidth-width-inset))}px`;
 });
 moreMenu.addEventListener('toggle',event=>{if(event.newState==='open')moreMenu.focus({preventScroll:true});moreButton.setAttribute('aria-expanded',String(event.newState==='open'));});
-moreMenu.addEventListener('click',event=>{if(event.target.closest('#shortcuts-open,#onboarding-open'))moreMenu.hidePopover();});
+moreMenu.addEventListener('click',event=>{if(event.target.closest('#shortcuts-open,#onboarding-open,#changelog-open'))moreMenu.hidePopover();});
 moreMenu.addEventListener('keydown',event=>{
   event.stopPropagation();
   if(!['ArrowDown','ArrowUp','Home','End'].includes(event.key))return;

package/client/changelog.js

@@ -0,0 +1,58 @@
+// What changed for the person using the canvas, newest first. Only user-visible
+// changes belong here: new things you can do, things that work differently,
+// fixes you would have noticed, and speed. Build, release and refactor work
+// never gets an entry. `type` is one of: new, improved, fixed, faster.
+//
+// New items go in the `unreleased` entry on top. On release,
+// scripts/stamp-changelog.mjs gives it the real version and date and adds a fresh
+// empty one. Keep that entry's shape.
+export const entries = [
+  {
+    unreleased: true,
+    items: [],
+  },
+  {
+    version: '0.1.2',
+    date: '2026-11-08',
+    items: [
+      { type: 'new', text: 'A Change log in the More menu lists what changed in each release.' },
+    ],
+  },
+  {
+    version: '0.1.0',
+    date: '2026-11-08',
+    items: [
+      { type: 'new', text: 'The exploration canvas is now its own package, so any project can lay its pages out on an infinite board.' },
+      { type: 'new', text: 'A demo project ships with the canvas, so you can try it without setting anything up.' },
+    ],
+  },
+];
+
+export const labels = { new: 'Feature', improved: 'Improved', fixed: 'Fixed', faster: 'Faster' };
+
+const formatDate = iso => new Date(`${iso}T00:00:00Z`).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' });
+const el = (tag, className, text) => { const node = document.createElement(tag); if (className) node.className = className; if (text != null) node.textContent = text; return node; };
+
+export function renderChangelog(body, list = entries) {
+  body.replaceChildren();
+  if (!list.some(entry => entry.items.length)) { body.append(el('p', '', 'Nothing to show yet.')); return; }
+  for (const entry of list.filter(entry => entry.items.length)) {
+    const section = el('section', 'changelog-entry');
+    const heading = el('h3', '', entry.unreleased ? 'Unreleased' : entry.version);
+    if (entry.date) {
+      const time = el('time', '', formatDate(entry.date));
+      time.dateTime = entry.date;
+      heading.append(time);
+    }
+    const items = el('ul', 'changelog-items');
+    for (const item of entry.items) {
+      const row = el('li');
+      const tag = el('span', 'changelog-tag', labels[item.type] ?? item.type);
+      tag.dataset.type = item.type;
+      row.append(tag, el('span', '', item.text));
+      items.append(row);
+    }
+    section.append(heading, items);
+    body.append(section);
+  }
+}

package/client/index.html

@@ -90,6 +90,7 @@
     <button id="shortcuts-open" type="button" role="menuitem"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 5.5C8.6 4.4 6.6 4 3.5 4v11c3.1 0 5.1.4 6.5 1.5m0-11C11.4 4.4 13.4 4 16.5 4v11c-3.1 0-5.1.4-6.5 1.5m0-11v11"/></svg>Guide &amp; hotkeys</button>
     <hr role="separator">
     <button id="onboarding-open" type="button" role="menuitem"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M8.2 8a1.9 1.9 0 1 1 2.9 1.6c-.7.4-1.1.8-1.1 1.6M10 14h.01"/></svg>Onboarding</button>
+    <button id="changelog-open" type="button" role="menuitem"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 3h9a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM7.5 7h5M7.5 10h5M7.5 13h3"/></svg>Change log</button>
   </div>
   <div id="screen-context" class="canvas-tools" popover="auto" role="menu" aria-label="Screen actions" tabindex="-1">
     <button type="button" role="menuitem" data-action="duplicate"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2"/><path d="M12 7V3H3v9h4"/></svg>Duplicate</button>
@@ -99,6 +100,10 @@
     <header class="layers-header"><h2 id="shortcuts-title">Guide &amp; hotkeys</h2><div id="shortcuts-platform" class="segmented" role="radiogroup" aria-label="Keyboard layout"><button type="button" role="radio" data-platform="mac" aria-checked="false">macOS</button><button type="button" role="radio" data-platform="win" aria-checked="false">Windows</button></div><button id="shortcuts-close" type="button" aria-label="Close Guide &amp; hotkeys" data-tooltip="Close" data-shortcut="esc">✕</button></header>
     <div class="shortcuts-body"></div>
   </dialog>
+  <dialog id="changelog" class="page-picker" aria-labelledby="changelog-title">
+    <header class="layers-header"><h2 id="changelog-title">Change log</h2><button id="changelog-close" type="button" aria-label="Close Change log" data-tooltip="Close" data-shortcut="esc">✕</button></header>
+    <div class="shortcuts-body changelog-body"></div>
+  </dialog>
   <div id="device-gate" popover="manual" role="alert">
     <div class="device-gate-icons" aria-hidden="true">
       <svg viewBox="0 0 20 20"><rect x="3" y="3" width="14" height="10" rx="1"/><path d="M10 13v4m-4 0h8"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tio-canvas/canvas",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A private exploration canvas: lay your project's pages out on an infinite board, frame real documents, annotate. Development tool, plain JavaScript, ships nothing to visitors.",
   "type": "module",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "node": ">=22"
   },
   "scripts": {
+    "dev": "node dev/serve.mjs",
     "test": "node tests/run.mjs"
   },
   "dependencies": {
@@ -51,6 +52,7 @@
   "devDependencies": {
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^11.0.1",
     "@semantic-release/github": "^12.0.10",
     "@semantic-release/release-notes-generator": "^14.1.1",
     "semantic-release": "^24.2.9"

package/src/project.js

@@ -20,9 +20,12 @@ export function resolveProject({ root = process.cwd(), config = DEFAULT_CONFIG,
   };
 }
 
+let loadCount = 0;
+
 /** Import the project's config afresh and refuse a screen the canvas cannot show. */
 export async function loadProject(project) {
-  const module = await import(`${pathToFileURL(project.configFile).href}?load=${Date.now()}`);
+  // A unique query per call defeats the module cache; Date.now() alone can repeat within one millisecond.
+  const module = await import(`${pathToFileURL(project.configFile).href}?load=${Date.now()}-${++loadCount}`);
   if (!Array.isArray(module.screens)) throw new Error(`${project.configFile} must export "screens", an array.`);
   validateScreens(module.screens);
   return { screens: module.screens, storageKey: module.storageKey ?? DEFAULT_STORAGE_KEY, presets, screenKinds };