create-sinter 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sinter",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "npm create sinter: a new app with sinter (JSON API bound to HTML) and temper (CSS for semantic HTML).",
   "license": "MIT",
   "author": "Tia Heinrich",

package/template/README.md

@@ -17,6 +17,9 @@ npm run dev
 - **Press "Fail next change", then tick a task.** The tick shows at once (`data-sn-optimistic`),
   the server refuses it, and the tick is taken back. The toast comes from `onError` in
   `src/sinter.config.ts`.
+- **Add a task.** The demo server takes 300ms to answer. While it does, sinter marks the form
+  `aria-busy`, and temper dims it only after `--tm-busy-delay` (200ms), so a fast server shows
+  no busy state at all.
 - **Press N.** A key filter on `<body>` opens the dialog. The dialog itself needs no JavaScript:
   `command="show-modal"` is the browser's.
 - **Click the ring.** It is a component with a script (`src/components/task-chart.html` and

package/template/index.html

@@ -35,6 +35,7 @@
         </select>
       </div>
 
+      <!-- A busy line: temper gives it a spinner and shows it only after --tm-busy-delay (200ms). -->
       <p data-sn-show="$meta.tasks.loading && !tasks.length" aria-busy="true">Loading…</p>
       <p data-muted data-sn-show="$meta.tasks.loadedAt && !shown.length">No tasks here.</p>
 

package/template/package.json

@@ -9,10 +9,11 @@
     "check": "sinter check && temper check ."
   },
   "dependencies": {
-    "@tiaforge-ui/sinter": "^0.15.0",
-    "@tiaforge-ui/temper": "^0.1.9"
+    "@tiaforge-ui/sinter": "^0.16.0",
+    "@tiaforge-ui/temper": "^0.3.0"
   },
   "devDependencies": {
+    "@tiaforge-ui/temper-inspect": "^0.3.0",
     "typescript": "^7.0.2",
     "vite": "^8.3.5"
   }

package/template/vite.config.js

@@ -9,8 +9,9 @@ export default defineConfig({
   plugins: [
     // Compiles the data-sn-* pages; typecheck: every expression is checked against src/sinter.types.ts in `vite build`.
     sinter({ typecheck: true }),
-    // temper check on the markup: a wrong data-* value fails the build, the dev server warns.
-    temper(),
+    // temper check on the markup: a wrong data-* value fails the build, the dev server warns. `inspect` also audits
+    // the rendered page in dev (overflow, contrast, clipped text) and prints findings in the terminal.
+    temper({ inspect: true }),
     // The demo backend (server/api.js). Replace it with your API, e.g. server: { proxy: { '/api': 'http://localhost:3000' } }.
     api(),
   ],