@hitslop/cli 0.1.4 → 0.3.0

package/dist/module-loader.js

@@ -0,0 +1,25 @@
+// @bun
+// src/module-loader.ts
+import { pathToFileURL } from "url";
+import { assertJSON } from "@hitslop/schema/json";
+if (!process.send)
+  throw new Error("Module loader requires an IPC parent");
+var result;
+try {
+  const path = process.argv[2];
+  if (!path)
+    throw new Error("Missing module path");
+  const kind = process.argv[3];
+  if (kind !== "schema" && kind !== "theme")
+    throw new Error("Unknown module kind");
+  const { default: definition } = await import(pathToFileURL(path).href);
+  const value = kind === "theme" ? definition?.css : definition;
+  if (kind === "theme" && typeof value !== "string")
+    throw new Error("theme.ts must default-export defineTheme(...)");
+  assertJSON(value);
+  result = { ok: true, value };
+} catch (error) {
+  result = { ok: false, error: error instanceof Error ? error.message : String(error) };
+}
+setInterval(() => {}, 60000);
+process.send(result);

package/package.json

@@ -1,35 +1,44 @@
 {
   "name": "@hitslop/cli",
-  "version": "0.1.4",
+  "version": "0.3.0",
   "description": "Create, develop, build, register, and publish hitSlop apps.",
   "license": "MIT",
-  "repository": { "type": "git", "url": "git+https://github.com/hitslop/hitslop.git", "directory": "packages/cli" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hitslop/hitslop.git",
+    "directory": "packages/cli"
+  },
   "homepage": "https://hitslop.com",
-  "bugs": { "url": "https://github.com/hitslop/hitslop/issues" },
+  "bugs": {
+    "url": "https://github.com/hitslop/hitslop/issues"
+  },
   "keywords": ["hitslop", "cli", "local-first", "mini-apps"],
-  "publishConfig": { "access": "public" },
+  "publishConfig": {
+    "access": "public"
+  },
   "type": "module",
   "bin": {
     "slop": "dist/cli.js"
   },
   "files": ["dist", "templates"],
   "scripts": {
-    "build": "bun ../../scripts/clean-dist.ts && bun build src/cli.ts --target bun --format esm --packages external --outfile dist/cli.js && /bin/chmod +x dist/cli.js",
+    "build": "bun ../../scripts/clean-dist.ts && bun build src/cli.ts src/module-loader.ts --target bun --format esm --packages external --outdir dist && /bin/chmod +x dist/cli.js",
     "check": "tsc -p tsconfig.json",
     "test": "bun run --cwd ../schema build && bun test"
   },
   "dependencies": {
     "@crustjs/core": "^0.0.19",
-    "@hitslop/schema": "^0.1.3",
+    "@hitslop/schema": "^0.3.0",
     "@noble/ed25519": "^3.2.0",
     "fast-png": "^8.0.0",
     "fflate": "^0.8.3",
+    "parse5": "^8.0.1",
     "postcss": "^8.5.6",
-    "vite": "^8.2.2",
-    "zod": "^4.5.2"
+    "vite": "^8.2.2"
   },
   "devDependencies": {
     "@types/bun": "latest",
+    "typebox": "^1.3.26",
     "typescript": "^7.0.2"
   }
 }

package/templates/svelte/.agents/skills/hitslop-authoring/SKILL.md

@@ -30,14 +30,27 @@ adding persistence or changing the runtime boundary.
 - Runtime packages contain `manifest.json`, generated `app.html`, optional
   `data.schema.json`, the canonical document Agent Skill, optional immutable `assets/`, optional host-owned
   `stores/` in writable documents, and optional `QuickLook/` images.
-- Svelte JSON stores require `{ schema, initial }`; default-export the Zod 4
-  schema from root `schema.ts` and attach that same export to the store.
+- Author root `schema.ts` with `import * as Type from "typebox"`.
+  Import that schema directly into `jsonStore({ schema, initial })`.
+  Type inference requires no generated files or running dev server. The store
+  uses TypeBox runtime validation; builds emit `data.schema.json` for the host.
+  Keep schema definitions deterministic: app and builder evaluate separately.
+  Never manually supply a validator or rewrite ordinary schema imports. Preserve
+  unknown fields with `additionalProperties: true`; never coerce or insert defaults.
+  Quick Checklist is the only active example. Paused source is preserved in
+  `examples/slops/_backlog/`, excluded from active checks, tests, and builds.
+  Promote and migrate one example at a time. The CLI counter starter follows the same APIs.
 - Authored templates and published artifacts contain no stores, source,
   dependencies, build caches, editable stylesheets, SQLite sidecars, or
   Finder-managed `Icon\r`.
 - Storage is implicit and ID-free. Never add storage declarations or release
   versions to the manifest.
 - Treat `dist/<slug>.slop` as generated output.
+- Quick Checklist and the CLI counter starter use root `theme.ts` uses `defineTheme`
+  from `@hitslop/runtime/theme`, supplying typed variables and generated
+  immutable `assets/theme.css`. Owners still edit `stores/theme.css`.
+- Builds embed document guidance; missing or changed guidance never prevents
+  opening. Do not compare its text with the host's current copy.
 - Publishing captures `QuickLook/Preview.png`, produces an exact 512×512
   `QuickLook/Icon.png`, and signs one immutable ZIP.
 - Publisher ownership comes from the local Ed25519 identity; back it up with

package/templates/svelte/.agents/skills/hitslop-authoring/references/storage-and-packages.md

@@ -5,18 +5,24 @@ graph, SQLite for queryable collections and transactional changes, and named
 media for a small set of known file roles.
 
 JSON writes replace the value atomically and may use an expected revision.
-For Svelte, define a Zod 4 schema in root `schema.ts` and pass it with the
-explicit initial value to `jsonStore`. Keep new fields backward-readable. Group
-related SQLite statements in one host transaction and parameterize values. Never copy live WAL
+Root `schema.ts` authors the TypeBox data shape. Svelte stores import its
+default export directly and infer data types through
+`jsonStore({ schema, initial })`. Validation checks values without
+coercion, defaults, or field removal. Quick Checklist and the CLI counter starter use this workflow;
+backlog examples remain deferred. Group related SQLite statements in one host transaction and parameterize values. Never copy live WAL
 or SHM files. Replace/remove named media through the host rather than treating
 it as an arbitrary filesystem.
 
 A template contains immutable `manifest.json`, generated `app.html`, optional
-`data.schema.json`, the canonical `.agents/skills/hitslop-document` skill,
+`data.schema.json`, optional immutable `.agents/skills/hitslop-document` guidance,
 optional `assets/`, and capture images when registered/published. A writable document may lazily add `stores/data.json`,
 `stores/data.sqlite`, `stores/media/`, and `stores/theme.css`.
 The macOS host may add Finder `Icon\r` metadata locally.
 
+The builder supplies current guidance, but hosts must not require its presence
+or compare it with their own copy. Quick Checklist and the CLI starter use single-source
+`theme.ts`; backlog migration remains a separate task.
+
 Never ship source, `node_modules`, `.hitslop`, `dist` nesting, authoring skills,
 `style.css`, `document.json`, seed stores, SQLite sidecars, env files, keys,
 or Finder metadata in a template or published artifact.

package/templates/svelte/.agents/skills/hitslop-authoring/references/workflow.md

@@ -2,8 +2,16 @@
 
 ## Commands
 
+Quick Checklist imports root `schema.ts` directly into `jsonStore`.
+Editor types and checks work without preparation or a dev server. Builds emit
+`data.schema.json` for the host; keep schema definitions deterministic.
+The CLI counter starter follows the same workflow; run `bun run check` for editor/type diagnostics.
+
 ```sh
 bunx @hitslop/cli init my-slop
+cd my-slop
+bun install
+bun run check
 bun run dev
 bun run validate
 bun run build
@@ -25,19 +33,25 @@ skill's single reference after validating its encoding and size.
 
 ## Capture
 
-Call `ready()` after initial durable data and critical assets are usable. Test
-the manifest viewport in live and `data-slop-capture="static"` states. Mark
-editing controls `data-slop-export="hide"`. Keep output in normal document
-flow so full-height PNG/PDF can see it.
+Call `ready()` after initial data is usable. Prefer optional `IconTarget` and
+`ExportTarget` from `@hitslop/svelte`, wrapping ordinary `Icon.svelte` and
+`Export.svelte` presentation components. Pass the same data and selected view;
+never open a second store. Helpers own mounting, geometry, and capture state.
+Export content belongs in normal flow. Without an export target, use the existing
+`data-slop-capture="static"` CSS and `data-slop-export="hide"` fallback.
 
-An optional renderer-only icon target is a square 512px DOM element. Use
-`capture.isRenderer()` so they never mount in the interactive app.
+Preview `?capture=icon` and `?capture=export` in the disposable gallery. The
+runtime waits for fonts, images, and stable layout. For charts/virtualization,
+register `capture.onPrepare(async (mode, signal) => { ... })` and clean up the
+returned registration. Background captures use temporary snapshots. Optional
+icons refresh Finder metadata on close; `QuickLook/Icon.png` remains immutable.
 
 ## Identity and publish
 
-`slop identity show`, `set-name`, `export`, and `import` manage the local
-publisher key. Never place private identity material in a project. Publish signs
-one built/captured artifact; the registry assigns release numbers externally.
+`manifest.json` owns the public author name and optional HTTP(S) author URL.
+`slop identity show`, `export`, and `import` manage only the local publisher
+key. Never place private identity material in a project. Publish signs one
+built/captured artifact; the registry assigns release numbers externally.
 
 ## Definition of done
 

package/templates/svelte/.agents/skills/hitslop-design/SKILL.md

@@ -49,9 +49,9 @@ and PDF behavior.
   authentic physical personality (Paper, Instrument, Skin) while remaining effortless
   to restyle or re-theme at runtime.
 - In new Svelte projects, keep structural styles in Vanilla Extract `.css.ts`
-  files and bind public `--slop-*` variables with `createGlobalThemeContract`.
-  Keep the plain default values in `assets/theme.css`; do not compile the owner-editable
-  theme surface into generated class names.
+  files and define public tokens in root `theme.ts` via `defineTheme` from
+  `@hitslop/runtime/theme`. Use its typed variable references in Vanilla Extract;
+  the builder generates `assets/theme.css`. Never maintain both defaults files.
 - Mark editing-only UI with `data-slop-export="hide"`; keep exportable content
   in normal flow.
 - Make each slop purpose-specific. Shared SDK patterns must not make unrelated

package/templates/svelte/.agents/skills/hitslop-design/references/presentation-and-export.md

@@ -25,18 +25,21 @@ windows cannot resize. Avoid critical controls on antialiased/translucent edges.
 
 ## Static output
 
-During static capture the root has `data-slop-capture="static"`. Add
-`data-slop-export="hide"` to editing-only controls and use capture CSS for
-necessary flattening. Do not hide the content those controls manipulate.
+Prefer an optional `Export.svelte` wrapped in `ExportTarget` from `@hitslop/svelte`.
+Pass the current data and selected view; share presentation and theme components.
+Use normal flow rather than viewport heights or scrolling panels. This view also
+supplies the window-sized preview. Without it, use `data-slop-capture="static"`
+styles and `data-slop-export="hide"` on editing controls.
 
-Preview preserves manifest dimensions. PNG/PDF export uses current width and
-full document height; PNG is deterministic 2× and PDF keeps selectable text/
-vectors. Keep export content in normal flow, not nested scroll panels.
+PNG exports use current width and full content height at 2×, within 16384 pixels
+per side and 24 megapixels. PDF retains selectable text on one content-sized page.
+Dedicated exports do not inherit native window masks. Fonts, visible images, and
+stable geometry are awaited; asynchronous charts can use `capture.onPrepare`.
 
 ## Icon
 
-Mount at most one 512×512 `data-slop-render="icon"` target only when
-`capture.isRenderer()` is true. Reveal it only in icon capture mode. The icon
-should communicate the job with a strong silhouette, safe margins, and no
-essential small text. Catalog detail uses the full preview; Finder and compact
-catalog rows use the icon.
+Use optional `IconTarget` around `Icon.svelte`. It owns renderer-only mounting and
+a transparent 512×512 surface. Pass progress or other saved data if useful; keep
+a strong silhouette, safe margins, and no essential small text. It refreshes
+Finder metadata on close; the published `QuickLook/Icon.png` remains immutable.
+Preview icon and export modes in the disposable gallery before native checks.

package/templates/svelte/AGENTS.md

@@ -8,12 +8,16 @@ and size it for realistic default content. Use Bits UI (`bits-ui`) for interacti
 controls (dialogs, selects, sliders, tabs, checkboxes, calendars, tooltips) rather
 than home-making components. Style via data attributes and semantic CSS custom
 properties so your slop retains its bespoke aesthetic and can be re-themed cleanly.
-Use Vanilla Extract for structural `.css.ts` styles and a global theme contract;
-keep the editable token defaults in plain `assets/theme.css`.
+Use Vanilla Extract for structural `.css.ts` styles and root `theme.ts` with
+`defineTheme` from `@hitslop/runtime/theme`. The builder emits immutable default
+CSS; owners override tokens in `stores/theme.css`.
 Preview both live and static states, then validate, build, install a writable test
 copy, and publish only when ready. Browser development is a disposable UI
-preview; test persistence in an installed writable copy. Attach the root Zod
-schema to every Svelte JSON store. Source, skills, dependencies, editable
+preview; test persistence in an installed writable copy. Attach the root TypeBox
+schema to every Svelte JSON store. Call `ready()` after loading and destroy stores on component teardown. Use
+`IconTarget` and `ExportTarget` for optional capture views with the same store data.
+Run `bun run check` without a dev server or generated files.
+Source, authoring skills, dependencies, editable
 styles, secrets, and seed data never enter the runtime `.slop`. Build output
 does include the canonical `hitslop-document` skill; optional app-specific
 agent guidance belongs only in root `document-guide.md`.

package/templates/svelte/schema.ts

@@ -1,5 +1,5 @@
-import * as z from "zod";
+import * as Type from "typebox";
 
-export default z.object({
-  count: z.number().int().describe("Current tally count value"),
-});
+export default Type.Object({
+  count: Type.Integer({ description: "Current tally count value" }),
+}, { additionalProperties: true });

package/templates/svelte/src/App.svelte

@@ -1,32 +1,40 @@
 <script lang="ts">
-  import { capture } from "@hitslop/runtime";
-  import { jsonStore } from "@hitslop/svelte";
+  import { ready } from "@hitslop/runtime";
+  import { jsonStore, IconTarget, ExportTarget } from "@hitslop/svelte";
+  import { onDestroy } from "svelte";
   import { Button } from "bits-ui";
   import counterSchema from "../schema";
   import * as styles from "./styles.css.ts";
+  import Readout from "./Readout.svelte";
+  import Icon from "./Icon.svelte";
+  import Export from "./Export.svelte";
 
   const title = __SLOP_TITLE_LITERAL__;
   const state = jsonStore({ schema: counterSchema, initial: { count: 0 } });
+  $effect(() => { if (state.isReady) ready(); });
+  onDestroy(() => state.destroy());
 </script>
 
-<main class={styles.main} data-slop-selection="none">
-  <section class={styles.counter} aria-labelledby="counter-title">
-    <header>
-      <span class={styles.eyebrow}>Quick counter</span>
-      <h1 class={styles.heading} id="counter-title">{title}</h1>
-    </header>
-    <div class={styles.readout}><output class={styles.output} aria-live="polite">{state.current.count}</output><span class={styles.readoutLabel}>things counted</span></div>
-    <div class={styles.controls} data-slop-export="hide">
+<main class={styles.main} data-slop-selection="none" aria-busy={state.isLoading}>
+  <section class={styles.counter} aria-label={title}>
+    <Readout {title} count={state.current.count} />
+    <div class={styles.controls} data-slop-export="hide" inert={!state.isReady || state.isLoading}>
       <Button.Root class={styles.controlButton} onclick={() => state.current.count -= 1} aria-label="Decrease count">−</Button.Root>
       <Button.Root class={`${styles.controlButton} ${styles.primaryButton}`} onclick={() => state.current.count += 1} aria-label="Increase count">+</Button.Root>
       <Button.Root class={`${styles.controlButton} ${styles.resetButton}`} onclick={() => state.current.count = 0}>Reset</Button.Root>
     </div>
-    {#if state.error}<p class={styles.error} data-slop-export="hide">Your latest change couldn’t be saved.</p>{/if}
+    {#if state.error}
+      <div class={styles.error} role="alert" data-slop-export="hide">
+        <p>{state.isReady ? "Your changes couldn’t be saved." : "Your counter couldn’t be loaded."} {state.error}</p>
+        {#if state.isReady}
+          <button onclick={() => { void state.flush().catch(() => {}); }}>Retry saving</button>
+        {:else}
+          <button onclick={() => state.reload()} disabled={state.isLoading}>Retry loading</button>
+        {/if}
+      </div>
+    {/if}
   </section>
 </main>
 
-{#if capture.isRenderer()}
-  <section class={styles.renderTarget} data-slop-render="icon" aria-hidden="true">
-    <span class={styles.iconTile}>#</span>
-  </section>
-{/if}
+<IconTarget><Icon /></IconTarget>
+<ExportTarget><Export {title} count={state.current.count} /></ExportTarget>

package/templates/svelte/src/Export.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Readout from "./Readout.svelte";
+  import * as styles from "./styles.css";
+  let { title, count }: { title: string; count: number } = $props();
+</script>
+
+<section class={styles.exportSurface} aria-label={title}>
+  <Readout {title} {count} />
+</section>

package/templates/svelte/src/Icon.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import * as styles from "./styles.css";
+</script>
+
+<div class={styles.iconSurface}><span class={styles.iconTile}>#</span></div>

package/templates/svelte/src/Readout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import * as styles from "./styles.css";
+  let { title, count }: { title: string; count: number } = $props();
+</script>
+
+<header>
+  <span class={styles.eyebrow}>Quick counter</span>
+  <h1 class={styles.heading}>{title}</h1>
+</header>
+<div class={styles.readout}>
+  <output class={styles.output} aria-live="polite">{count}</output>
+  <span class={styles.readoutLabel}>things counted</span>
+</div>

package/templates/svelte/src/main.ts

@@ -1,4 +1,3 @@
-import { ready } from "@hitslop/runtime";
 import { mount } from "svelte";
 import App from "./App.svelte";
 import "./styles.css.ts";
@@ -6,4 +5,3 @@ import "./styles.css.ts";
 const target = document.getElementById("app");
 if (!target) throw new Error("Missing #app");
 mount(App, { target });
-ready();

package/templates/svelte/src/styles.css.ts

@@ -1,5 +1,7 @@
 import { globalStyle, style } from "@vanilla-extract/css";
-import { theme } from "./theme-contract.css.ts";
+import definition from "../theme";
+
+const theme = definition.vars;
 
 globalStyle(":root", { colorScheme: "light", fontFamily: theme.font, fontSynthesis: "none" });
 globalStyle("*", { boxSizing: "border-box" });
@@ -7,8 +9,6 @@ globalStyle("html, body, #app", { width: "100%", minHeight: "100%", margin: 0 })
 globalStyle("body", { color: theme.ink, background: theme.surface });
 globalStyle("button", { font: "inherit" });
 globalStyle('html[data-slop-capture="static"] [data-slop-export="hide"]', { display: "none !important" });
-globalStyle('html[data-slop-renderer="true"][data-slop-capture="icon"] main', { display: "none" });
-globalStyle('html[data-slop-renderer="true"][data-slop-capture="icon"] [data-slop-render="icon"]', { display: "grid !important" });
 globalStyle("*, *::before, *::after", {
   "@media": { "(prefers-reduced-motion: reduce)": { scrollBehavior: "auto", transitionDuration: ".01ms" } },
 });
@@ -41,5 +41,6 @@ export const controlButton = style({
 export const primaryButton = style({ borderColor: "transparent", color: theme.surface, background: theme.accent });
 export const resetButton = style({ gridColumn: "1 / -1", minHeight: 30, border: 0, color: theme.muted, background: "transparent", fontSize: 10, fontWeight: 750, letterSpacing: ".08em", textTransform: "uppercase" });
 export const error = style({ margin: "10px 0 0", color: "#9a2e27", fontSize: 11 });
-export const renderTarget = style({ display: "none !important", width: 512, height: 512, placeItems: "center", overflow: "hidden", background: "transparent" });
+export const exportSurface = style({ minHeight: "100vh", padding: "34px 38px", background: theme.surface, color: theme.ink });
+export const iconSurface = style({ display: "grid", width: "100%", height: "100%", placeItems: "center" });
 export const iconTile = style({ display: "grid", placeItems: "center", width: 464, height: 464, border: `18px solid ${theme.ink}`, borderRadius: 72, color: theme.surface, background: theme.accent, fontSize: 250, fontWeight: 700 });

package/templates/svelte/theme.ts

@@ -0,0 +1,12 @@
+import { defineTheme } from "@hitslop/runtime/theme";
+
+export default defineTheme({
+  surface: "#f7f4eb",
+  panel: "#e3e9df",
+  control: "#ede9df",
+  ink: "#182126",
+  muted: "#687276",
+  accent: "#db6648",
+  rule: "color-mix(in srgb, var(--slop-ink) 15%, transparent)",
+  font: '"Avenir Next", Avenir, sans-serif',
+});

package/templates/svelte/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "checkJs": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src/**/*", "schema.ts", "theme.ts", "vite.config.ts"]
+}

package/templates/svelte/assets/theme.css

@@ -1,10 +0,0 @@
-:root {
-  --slop-surface: #f7f4eb;
-  --slop-panel: #e3e9df;
-  --slop-control: #ede9df;
-  --slop-ink: #182126;
-  --slop-muted: #687276;
-  --slop-accent: #db6648;
-  --slop-rule: color-mix(in srgb, var(--slop-ink) 15%, transparent);
-  --slop-font: "Avenir Next", Avenir, sans-serif;
-}

package/templates/svelte/src/theme-contract.css.ts

@@ -1,12 +0,0 @@
-import { createGlobalThemeContract } from "@vanilla-extract/css";
-
-export const theme = createGlobalThemeContract({
-  surface: "slop-surface",
-  panel: "slop-panel",
-  control: "slop-control",
-  ink: "slop-ink",
-  muted: "slop-muted",
-  accent: "slop-accent",
-  rule: "slop-rule",
-  font: "slop-font",
-});