@hitslop/cli 0.1.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@hitslop/cli",
+  "version": "0.1.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"
+},
+"homepage": "https://hitslop.app",
+"bugs": {
+"url": "https://github.com/hitslop/hitslop/issues"
+},
+"keywords": ["hitslop", "cli", "local-first", "mini-apps"],
+"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",
+  "check": "tsc -p tsconfig.json",
+  "test": "bun run --cwd ../schema build && bun test"
+},
+"dependencies": {
+  "@crustjs/core": "^0.0.19",
+  "@hitslop/schema": "0.1.0",
+  "@noble/ed25519": "^3.2.0",
+  "fast-png": "^8.0.0",
+  "fflate": "^0.8.3",
+  "postcss": "^8.5.6",
+  "vite": "^8.2.2",
+  "zod": "^4.5.2"
+},
+"devDependencies": {
+  "@types/bun": "latest",
+  "typescript": "^7.0.2"
+}
+}

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

@@ -0,0 +1,47 @@
+---
+name: hitslop-authoring
+description: Create, preview, validate, build, register, or publish hitSlop authoring projects with the TypeScript CLI. Use for manifests, storage choices, package boundaries, capture, identity, and release workflow.
+---
+
+# hitSlop authoring
+
+Read `manifest.json` first. Work on the authored source project, never a built
+runtime document.
+
+## Workflow
+
+1. Fix the single job, categories, and initial window size in the manifest.
+2. Choose no storage, JSON, SQLite, named media, or a deliberate combination.
+3. Develop against the disposable browser fake and test live plus static capture states.
+4. Validate and build a source-free, store-free runtime package.
+5. Register a local master, create a writable copy, and test reopen/export.
+6. Publish one signed immutable artifact.
+
+Use `bun slop <command> <path>` inside the hitSlop repository. In a scaffolded
+project use its Bun scripts, `slop`, or `bunx @hitslop/cli`.
+
+Read [references/workflow.md](references/workflow.md) for commands, capture,
+identity, and the definition of done. Read
+[references/storage-and-packages.md](references/storage-and-packages.md) before
+adding persistence or changing the runtime boundary.
+
+## Non-negotiable package rules
+
+- 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.
+- 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.
+- 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
+  `slop identity export`.
+
+When creating or substantially revising an interface, also use the local
+`hitslop-design` skill.

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

@@ -0,0 +1,22 @@
+# Storage and package boundary
+
+Use no persistence for a pure calculation. Use JSON for one compact object
+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
+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,
+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.
+
+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

@@ -0,0 +1,46 @@
+# Authoring workflow
+
+## Commands
+
+```sh
+bunx @hitslop/cli init my-slop
+bun run dev
+bun run validate
+bun run build
+bun run register
+bun run publish
+```
+
+`dev` is a disposable browser UI preview with in-memory JSON and forgiving
+SQLite/media stubs. A reload clears preview state. Register a local master and
+open a writable copy for real persistence, external-file, and native-window behavior.
+
+`build` emits `dist/<slug>.slop`. Inspect the result. `register` adds an
+immutable master under `~/.hitslop/templates`; open it to create a writable
+copy and test persistence there.
+
+New builds include the canonical document skill. Add optional app-specific
+instructions only in root `document-guide.md`; the build copies it to the
+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.
+
+An optional renderer-only icon target is a square 512px DOM element. Use
+`capture.isRenderer()` so they never mount in the interactive app.
+
+## 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.
+
+## Definition of done
+
+Validate keyboard/focus/reduced motion, long and empty content, persistence
+reopen, resize or skin hit testing, static/full-height export, icon
+legibility, and the contents of the final runtime package.

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

@@ -0,0 +1,62 @@
+---
+name: hitslop-design
+description: Design or refine hitSlop mini apps and documents with a purpose-led tactile language, responsive native-window behavior, transparent or PNG-skinned surfaces, and export-aware capture.
+---
+
+# hitSlop design
+
+Read `manifest.json` first and design at its exact initial dimensions. A slop
+is one complete digital object, not a small website.
+
+If the project provides `_vibe/`, inspect it for visual direction. Treat those
+images as inspiration only; do not copy them into source or runtime packages.
+
+## Decide before styling
+
+1. State the single job in one sentence.
+2. Choose a dominant object family: Paper, Instrument, or Skin.
+3. Identify the primary action/readout and persistent state.
+4. Decide whether the window is standard/resizable, transparent, or PNG-skinned.
+5. Define what live editing, static capture, and icon must show.
+
+Read [references/object-families.md](references/object-families.md) for visual
+patterns and anti-patterns. Read
+[references/presentation-and-export.md](references/presentation-and-export.md)
+for transparency, resizing, skins, responsive layout, capture, icon, PNG,
+and PDF behavior.
+
+## Core design rules
+
+- Let the host window be the outer object boundary; do not wrap everything in a
+  generic app card or fake desktop window.
+- Use hierarchy, spacing, typography, rules, and tonal contrast before adding
+  containers.
+- Use one dominant neutral surface and one purpose-specific accent; reserve
+  extra color for meaningful state.
+- Size the initial viewport around realistic default content. Compactness comes
+  from rhythm and hierarchy, never tiny type.
+- Preserve critical actions at narrow sizes. Prefer container queries and
+  reflow to simply hiding features.
+- Keep focus visible, labels concise, numbers tabular, contrast accessible, and
+  motion respectful of `prefers-reduced-motion`.
+- Prefer direct editing and progressive disclosure. When interactive controls are
+  needed (dialogs, dropdowns, selects, sliders, segmented tabs, checkboxes, calendars,
+  popovers, tooltips), always use Bits UI headless primitives (`bits-ui`). Never home-make
+  custom modal overlays, focus traps, or range hacks. Read [references/bits-ui-styling.md](references/bits-ui-styling.md).
+- Style Bits UI primitives via data attributes (`[data-dialog-overlay]`, `[data-select-trigger]`,
+  `[data-slider-track]`, `[data-state="checked"]`) and CSS custom properties
+  (`--slop-surface`, `--slop-accent`, `--slop-ink`). This ensures each slop retains its
+  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.
+- 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
+  objects look like one reskinned dashboard.
+
+Runtime packages remain source-free: never ship authoring skills, editable CSS,
+dependencies, build caches, or seed stores inside a `.slop`. The builder alone
+adds the canonical document skill.

package/templates/svelte/.agents/skills/hitslop-design/references/bits-ui-styling.md

@@ -0,0 +1,95 @@
+# Bits UI Styling in hitSlop
+
+hitSlop apps use **Bits UI** (`bits-ui`) as the standard primitive layer for interactive controls:
+- Dialogs and Modals (`Dialog.Root`)
+- Dropdowns and Selects (`Select.Root`)
+- Sliders and Faders (`Slider.Root`)
+- Checkboxes (`Checkbox.Root`)
+- Segmented Views and Tabs (`Tabs.Root`)
+- Date Pickers and Calendars (`Calendar.Root` + `Popover.Root`)
+- Progress and Meters (`Progress.Root`)
+- Tooltips (`Tooltip.Root`)
+- Switches and Toggles (`Switch.Root`)
+
+## Why Bits UI?
+
+1. **Zero Default Styles**: Bits UI is completely headless. Unlike styled UI libraries that force a generic SaaS dashboard appearance, Bits UI lets each slop look like a real physical paper document, brass audio hardware, vintage receipt, or retro console.
+2. **Accessibility Built-In**: Provides focus restoration, keyboard arrow navigation, screen reader ARIA roles, portal mounting, and scroll management out of the box.
+3. **No Homemade Hacks**: Eliminates hand-rolled modal backdrops, broken focus traps, un-styled WebKit `<select>` dropdowns, and range input styling hacks.
+
+---
+
+## Styling Architecture: Data Attributes & CSS Tokens
+
+Bits UI components expose semantic HTML attributes (such as `data-state="open|closed"`, `data-orientation="vertical|horizontal"`, `data-disabled`, `data-selected`).
+
+### 1. Data-Attribute Selectors
+Always style Bits UI elements using their standard data attributes:
+
+```css
+/* Checkbox Root */
+[data-checkbox-root] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1.5px solid var(--slop-rule);
+  background: var(--slop-surface);
+  cursor: pointer;
+}
+
+[data-checkbox-root][data-state="checked"] {
+  background: var(--slop-accent);
+  border-color: var(--slop-accent);
+  color: #ffffff;
+}
+
+/* Vertical Slider (e.g. Audio Faders) */
+[data-slider-root][data-orientation="vertical"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 28px;
+  height: 100%;
+}
+
+[data-slider-thumb] {
+  cursor: grab;
+  outline: none;
+}
+```
+
+### 2. Runtime Re-Theming with CSS Variables
+Define semantic tokens in `:root` so that updating a theme or switching color schemes (e.g., `html[data-theme="dark"]` or `html[data-theme="sepia"]`) instantly updates all Bits UI components:
+
+```css
+:root {
+  --slop-surface: #fdfbf7;
+  --slop-panel: #f3efe6;
+  --slop-ink: #1e293b;
+  --slop-muted: #64748b;
+  --slop-accent: #2563eb;
+  --slop-rule: rgba(0, 0, 0, 0.12);
+}
+
+[data-theme="dark"] {
+  --slop-surface: #0f172a;
+  --slop-panel: #1e293b;
+  --slop-ink: #f8fafc;
+  --slop-muted: #94a3b8;
+  --slop-accent: #38bdf8;
+  --slop-rule: rgba(255, 255, 255, 0.12);
+}
+```
+
+---
+
+## Modals & Portals
+When using `Dialog.Portal`:
+- Mounts outside normal DOM flow into `<body>`.
+- Style the `[data-dialog-overlay]` with `position: fixed; inset: 0; backdrop-filter: blur(...);`.
+- Style `[data-dialog-content]` with `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);`.
+- Mark both with `data-slop-export="hide"` to exclude them from print/export capture.

package/templates/svelte/.agents/skills/hitslop-design/references/object-families.md

@@ -0,0 +1,37 @@
+# Object families
+
+## Paper
+
+Use for an artifact people read, edit, share, print, or export: invoice, recipe,
+résumé, planner, notes. Favor editorial hierarchy, direct editing, generous
+reading rhythm, fine rules, and a flat export state. Editing affordances can be
+quiet, but focus and selection must remain obvious.
+
+Avoid placing the paper inside another rounded card. Avoid permanent toolbars in
+the export. Do not use fixed-height nested scrollers for printable content.
+
+## Instrument
+
+Use for a compact control surface: timer, tracker, picker, mixer, calculator.
+Prioritize one live readout or action, group related controls like hardware,
+make modes/state unmistakable, and use restrained depth only to communicate
+operation.
+
+Avoid dashboard grids, decorative gauges, excessive status pills, and many
+equal-weight actions.
+
+## Skin
+
+Use when silhouette is essential to recognition or delight: radio, pocket
+device, novelty utility. The exact-size RGBA PNG is both backing and native
+hit-test mask. Keep controls inside the solid safe area and verify pointer
+behavior around holes and feathered alpha.
+
+Avoid a skin when rounded/capsule CSS already communicates the object. A skin is
+fixed-size and trades flexibility for a meaningful silhouette.
+
+## Hybrids
+
+Choose one dominant family and borrow one supporting behavior. A recipe may be
+Paper with an Instrument timer; an invoice may adopt a receipt Skin. The job,
+not visual novelty, decides.

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

@@ -0,0 +1,42 @@
+# Presentation and export
+
+## Standard and responsive
+
+Manifest width/height are the initial viewport. Standard windows may be
+resizable and shaped `rounded`, `ellipse`, or `capsule`. Build the outer
+layout with grid/flex, relative units, min/max constraints, and container
+queries. Test initial, narrower, and content-heavy states.
+
+An unskinned slop may request `slop.window.resize({ width, height })`; use the
+returned host-applied size. Never assume the screen can fit the request.
+
+## Transparent backgrounds
+
+Set `html`, `body`, and the app root transparent, then paint only the visible
+object. Transparency does not make pixels click-through. Keep focus rings and
+content within the painted surface. Use an exact RGBA PNG skin when native
+alpha-shaped hit testing is required.
+
+## PNG skins
+
+The skin path is under `assets/`; PNG dimensions must exactly equal manifest
+dimensions and include alpha. Pixels below 10% alpha are click-through. Skinned
+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.
+
+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.
+
+## 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.

package/templates/svelte/AGENTS.md

@@ -0,0 +1,18 @@
+# hitSlop authoring
+
+Read `manifest.json` first. Use the local `hitslop-authoring` skill for package,
+storage, capture, install, and publish work. Use `hitslop-design` when creating
+or revising the interface. Treat the host window as the outer object boundary
+and size it for realistic default content. Use Bits UI (`bits-ui`) for interactive
+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`.
+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
+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/assets/theme.css

@@ -0,0 +1,10 @@
+: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/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>

package/templates/svelte/schema.ts

@@ -0,0 +1,5 @@
+import * as z from "zod";
+
+export default z.object({
+  count: z.number().int().describe("Current tally count value"),
+});

package/templates/svelte/src/App.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { capture } from "@hitslop/runtime";
+  import { jsonStore } from "@hitslop/svelte";
+  import { Button } from "bits-ui";
+  import counterSchema from "../schema";
+  import * as styles from "./styles.css.ts";
+
+  const title = __SLOP_TITLE_LITERAL__;
+  const state = jsonStore({ schema: counterSchema, initial: { count: 0 } });
+</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">
+      <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}
+  </section>
+</main>
+
+{#if capture.isRenderer()}
+  <section class={styles.renderTarget} data-slop-render="icon" aria-hidden="true">
+    <span class={styles.iconTile}>#</span>
+  </section>
+{/if}

package/templates/svelte/src/main.ts

@@ -0,0 +1,9 @@
+import { ready } from "@hitslop/runtime";
+import { mount } from "svelte";
+import App from "./App.svelte";
+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

@@ -0,0 +1,45 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+import { theme } from "./theme-contract.css.ts";
+
+globalStyle(":root", { colorScheme: "light", fontFamily: theme.font, fontSynthesis: "none" });
+globalStyle("*", { boxSizing: "border-box" });
+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" } },
+});
+
+export const main = style({ minHeight: "100vh", containerType: "inline-size", background: theme.surface });
+export const counter = style({
+  display: "grid",
+  alignContent: "center",
+  minHeight: "100vh",
+  padding: "34px 38px",
+  "@container": { "(max-width: 360px)": { padding: "25px 23px" } },
+});
+globalStyle(`${counter} header`, { display: "grid", gap: 4 });
+export const eyebrow = style({ margin: 0, color: theme.accent, fontSize: 10, fontWeight: 760, letterSpacing: ".1em", textTransform: "uppercase" });
+export const heading = style({ margin: 0, fontSize: 25, fontWeight: 670, letterSpacing: "-.035em" });
+export const readout = style({ margin: "25px 0 14px", border: `1px solid ${theme.rule}`, borderRadius: 12, padding: "25px 24px 21px", background: theme.panel });
+export const output = style({ display: "block", fontSize: "clamp(70px, 20cqw, 94px)", fontWeight: 650, lineHeight: ".84", letterSpacing: "-.075em", fontVariantNumeric: "tabular-nums" });
+export const readoutLabel = style({ display: "block", marginTop: 13, color: theme.muted, fontSize: 12 });
+export const controls = style({ display: "grid", gridTemplateColumns: "1fr 1.25fr", gap: 9 });
+export const controlButton = style({
+  minHeight: 48,
+  border: `1px solid ${theme.rule}`,
+  borderRadius: 10,
+  color: theme.ink,
+  background: theme.control,
+  cursor: "pointer",
+  fontSize: 23,
+  selectors: { "&:focus-visible": { outline: `3px solid color-mix(in srgb, ${theme.accent} 34%, transparent)`, outlineOffset: 2 } },
+});
+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 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/src/theme-contract.css.ts

@@ -0,0 +1,12 @@
+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",
+});

package/templates/svelte/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+
+export default defineConfig({ plugins: [vanillaExtractPlugin(), svelte()] });