@wildwinter/app-shell 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ian Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,47 @@
+# @wildwinter/app-shell
+
+The shared shell for the editor family (Patterpad, Storylet Studio): the
+app-agnostic pieces both apps would otherwise hand-mirror. Framework-neutral
+(vanilla TS + DOM), no app dependencies.
+
+**Two palettes, one grammar.** Each app supplies its own palette and fonts; this
+package supplies the grammar and primitives beneath them.
+
+## v0.1 (the thin slice)
+
+- **`el`** - the tag-typed element factory. A superset of the two apps' prior
+  signatures, so neither rewrites call sites:
+
+  ```ts
+  import { el } from "@wildwinter/app-shell";
+  el("div", "card", "hello");                       // string className + text child
+  el("button", { className: "b", onClick: fn }, child);  // props bag + children
+  ```
+
+- **`colourIndex` / `colourFor` / `PALETTE` / `PALETTE_SIZE`** - the per-entity
+  colour hash. A stable name -> palette-slot index, storage-free. The hues live
+  in each theme as `--char-0 .. --char-11`.
+
+- **`tokens.css`** - the design-token grammar (elevation, motion, radius,
+  scrollbar). Import once at the app root:
+
+  ```css
+  @import "@wildwinter/app-shell/tokens.css";
+  ```
+
+## Roadmap
+
+Later slices lift the rest of the common shell from Patterpad (canonical),
+reconciling Storylet Studio's variants: the pane grid + toggles, the save/dirty
+controller, the command palette, the anchored popover/panel + toast, and the
+detached-window out-of-date / restart pattern. Storylet Studio migrates each
+first (proving app-agnosticism); Patterpad follows.
+
+## Release
+
+```bash
+npm run release -- minor   # bumps, commits, pushes, tags, creates a GH Release
+```
+
+Creating the Release triggers `publish.yml`, which publishes to npm. Requires an
+`NPM_TOKEN` repo secret with publish rights to the `@wildwinter` scope.

package/dist/index.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+// src/dom.ts
+function el(tag, classNameOrProps, ...children) {
+  const node = document.createElement(tag);
+  const props = typeof classNameOrProps === "string" ? { className: classNameOrProps } : classNameOrProps ?? {};
+  if (props.className) node.className = props.className;
+  if (props.text !== void 0 && props.text !== null) node.textContent = props.text;
+  if (props.title !== void 0) node.title = props.title;
+  if (props.onClick) node.addEventListener("click", props.onClick);
+  for (const child of children) {
+    if (child === null || child === void 0) continue;
+    node.append(child);
+  }
+  return node;
+}
+
+// src/colour.ts
+var PALETTE_SIZE = 12;
+var PALETTE = Array.from({ length: PALETTE_SIZE }, (_, i) => `var(--char-${i})`);
+function colourIndex(name) {
+  let h = 2166136261;
+  for (let i = 0; i < name.length; i++) {
+    h ^= name.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  h ^= h >>> 16;
+  h = Math.imul(h, 2246822507);
+  h ^= h >>> 13;
+  h = Math.imul(h, 3266489909);
+  h ^= h >>> 16;
+  return (h >>> 0) % PALETTE_SIZE;
+}
+function colourFor(name) {
+  return PALETTE[colourIndex(name)];
+}
+
+exports.PALETTE = PALETTE;
+exports.PALETTE_SIZE = PALETTE_SIZE;
+exports.colourFor = colourFor;
+exports.colourIndex = colourIndex;
+exports.el = el;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dom.ts","../src/colour.ts"],"names":[],"mappings":";;;AAqBO,SAAS,EAAA,CACd,GAAA,EACA,gBAAA,EAAA,GACG,QAAA,EACuB;AAC1B,EAAA,MAAM,IAAA,GAAO,QAAA,CAAS,aAAA,CAAc,GAAG,CAAA;AACvC,EAAA,MAAM,KAAA,GAAiB,OAAO,gBAAA,KAAqB,QAAA,GAC/C,EAAE,SAAA,EAAW,gBAAA,EAAiB,GAC9B,gBAAA,IAAoB,EAAC;AACzB,EAAA,IAAI,KAAA,CAAM,SAAA,EAAW,IAAA,CAAK,SAAA,GAAY,KAAA,CAAM,SAAA;AAC5C,EAAA,IAAI,KAAA,CAAM,SAAS,MAAA,IAAa,KAAA,CAAM,SAAS,IAAA,EAAM,IAAA,CAAK,cAAc,KAAA,CAAM,IAAA;AAC9E,EAAA,IAAI,KAAA,CAAM,KAAA,KAAU,MAAA,EAAW,IAAA,CAAK,QAAQ,KAAA,CAAM,KAAA;AAClD,EAAA,IAAI,MAAM,OAAA,EAAS,IAAA,CAAK,gBAAA,CAAiB,OAAA,EAAS,MAAM,OAAwB,CAAA;AAChF,EAAA,KAAA,MAAW,SAAS,QAAA,EAAU;AAC5B,IAAA,IAAI,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,MAAA,EAAW;AAC3C,IAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AAAA,EACnB;AACA,EAAA,OAAO,IAAA;AACT;;;AC3BO,IAAM,YAAA,GAAe;AAErB,IAAM,OAAA,GAAU,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,YAAA,EAAa,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,WAAA,EAAc,CAAC,CAAA,CAAA,CAAG;AAIjF,SAAS,YAAY,IAAA,EAAsB;AAChD,EAAA,IAAI,CAAA,GAAI,UAAA;AACR,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,IAAA,CAAK,QAAQ,CAAA,EAAA,EAAK;AAAE,IAAA,CAAA,IAAK,IAAA,CAAK,WAAW,CAAC,CAAA;AAAG,IAAA,CAAA,GAAI,IAAA,CAAK,IAAA,CAAK,CAAA,EAAG,QAAU,CAAA;AAAA,EAAG;AAC/F,EAAA,CAAA,IAAK,CAAA,KAAM,EAAA;AAAI,EAAA,CAAA,GAAI,IAAA,CAAK,IAAA,CAAK,CAAA,EAAG,UAAU,CAAA;AAAG,EAAA,CAAA,IAAK,CAAA,KAAM,EAAA;AAAI,EAAA,CAAA,GAAI,IAAA,CAAK,IAAA,CAAK,CAAA,EAAG,UAAU,CAAA;AAAG,EAAA,CAAA,IAAK,CAAA,KAAM,EAAA;AACrG,EAAA,OAAA,CAAQ,MAAM,CAAA,IAAK,YAAA;AACrB;AAGO,SAAS,UAAU,IAAA,EAAsB;AAC9C,EAAA,OAAO,OAAA,CAAQ,WAAA,CAAY,IAAI,CAAC,CAAA;AAClC","file":"index.cjs","sourcesContent":["// ---------------------------------------------------------------------------\n// `el`: the tiny tag-typed element factory both apps build their imperative,\n// idempotent views with.\n//\n// A SUPERSET of the two apps' prior signatures, so neither rewrites call sites:\n//   - Patterpad:       el(tag, cls?, text?)                       (positional)\n//   - Storylet Studio: el(tag, { className, text, ... }, ...kids) (options bag)\n// A string second argument is the className; an object is the props bag; string\n// children become text nodes. So `el(\"div\", \"c\", \"t\")` and\n// `el(\"div\", { className: \"c\" }, \"t\")` produce identical DOM.\n// ---------------------------------------------------------------------------\n\nexport type Child = Node | string | null | undefined;\n\nexport interface ElProps {\n  className?: string;\n  text?: string;\n  title?: string;\n  onClick?: (event: MouseEvent) => void;\n}\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  classNameOrProps?: string | ElProps,\n  ...children: Child[]\n): HTMLElementTagNameMap[K] {\n  const node = document.createElement(tag);\n  const props: ElProps = typeof classNameOrProps === \"string\"\n    ? { className: classNameOrProps }\n    : classNameOrProps ?? {};\n  if (props.className) node.className = props.className;\n  if (props.text !== undefined && props.text !== null) node.textContent = props.text;\n  if (props.title !== undefined) node.title = props.title;\n  if (props.onClick) node.addEventListener(\"click\", props.onClick as EventListener);\n  for (const child of children) {\n    if (child === null || child === undefined) continue;\n    node.append(child);\n  }\n  return node;\n}\n","// ---------------------------------------------------------------------------\n// The per-entity colour model (design-language.md section 4): a stable hash of\n// a name selects an INDEX into the curated palette - repeatable, storage-free.\n// The hues live in the token layer as `--char-0 .. --char-(N-1)` per theme, so\n// a colour reference adapts to light/dark with zero JS. Each app defines the\n// `--char-*` values in its own palette; this module only picks the slot.\n//\n// Storylet Studio uses it for dimension-value / zone chips; Patterpad for\n// character cues.\n// ---------------------------------------------------------------------------\n\n/** Curated colour slots; must match the `--char-*` set defined per theme. */\nexport const PALETTE_SIZE = 12;\n\nexport const PALETTE = Array.from({ length: PALETTE_SIZE }, (_, i) => `var(--char-${i})`) as readonly string[];\n\n/** Hash a name to a palette slot: FNV-1a + an fmix32 avalanche, well\n *  distributed even for short, similar names. */\nexport function colourIndex(name: string): number {\n  let h = 0x811c9dc5;\n  for (let i = 0; i < name.length; i++) { h ^= name.charCodeAt(i); h = Math.imul(h, 0x01000193); }\n  h ^= h >>> 16; h = Math.imul(h, 0x85ebca6b); h ^= h >>> 13; h = Math.imul(h, 0xc2b2ae35); h ^= h >>> 16;\n  return (h >>> 0) % PALETTE_SIZE;\n}\n\n/** The theme-aware CSS variable reference for a name's slot. */\nexport function colourFor(name: string): string {\n  return PALETTE[colourIndex(name)]!;\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,19 @@
+type Child = Node | string | null | undefined;
+interface ElProps {
+    className?: string;
+    text?: string;
+    title?: string;
+    onClick?: (event: MouseEvent) => void;
+}
+declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, classNameOrProps?: string | ElProps, ...children: Child[]): HTMLElementTagNameMap[K];
+
+/** Curated colour slots; must match the `--char-*` set defined per theme. */
+declare const PALETTE_SIZE = 12;
+declare const PALETTE: readonly string[];
+/** Hash a name to a palette slot: FNV-1a + an fmix32 avalanche, well
+ *  distributed even for short, similar names. */
+declare function colourIndex(name: string): number;
+/** The theme-aware CSS variable reference for a name's slot. */
+declare function colourFor(name: string): string;
+
+export { type Child, type ElProps, PALETTE, PALETTE_SIZE, colourFor, colourIndex, el };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+type Child = Node | string | null | undefined;
+interface ElProps {
+    className?: string;
+    text?: string;
+    title?: string;
+    onClick?: (event: MouseEvent) => void;
+}
+declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, classNameOrProps?: string | ElProps, ...children: Child[]): HTMLElementTagNameMap[K];
+
+/** Curated colour slots; must match the `--char-*` set defined per theme. */
+declare const PALETTE_SIZE = 12;
+declare const PALETTE: readonly string[];
+/** Hash a name to a palette slot: FNV-1a + an fmix32 avalanche, well
+ *  distributed even for short, similar names. */
+declare function colourIndex(name: string): number;
+/** The theme-aware CSS variable reference for a name's slot. */
+declare function colourFor(name: string): string;
+
+export { type Child, type ElProps, PALETTE, PALETTE_SIZE, colourFor, colourIndex, el };

package/dist/index.js

@@ -0,0 +1,38 @@
+// src/dom.ts
+function el(tag, classNameOrProps, ...children) {
+  const node = document.createElement(tag);
+  const props = typeof classNameOrProps === "string" ? { className: classNameOrProps } : classNameOrProps ?? {};
+  if (props.className) node.className = props.className;
+  if (props.text !== void 0 && props.text !== null) node.textContent = props.text;
+  if (props.title !== void 0) node.title = props.title;
+  if (props.onClick) node.addEventListener("click", props.onClick);
+  for (const child of children) {
+    if (child === null || child === void 0) continue;
+    node.append(child);
+  }
+  return node;
+}
+
+// src/colour.ts
+var PALETTE_SIZE = 12;
+var PALETTE = Array.from({ length: PALETTE_SIZE }, (_, i) => `var(--char-${i})`);
+function colourIndex(name) {
+  let h = 2166136261;
+  for (let i = 0; i < name.length; i++) {
+    h ^= name.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  h ^= h >>> 16;
+  h = Math.imul(h, 2246822507);
+  h ^= h >>> 13;
+  h = Math.imul(h, 3266489909);
+  h ^= h >>> 16;
+  return (h >>> 0) % PALETTE_SIZE;
+}
+function colourFor(name) {
+  return PALETTE[colourIndex(name)];
+}
+
+export { PALETTE, PALETTE_SIZE, colourFor, colourIndex, el };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dom.ts","../src/colour.ts"],"names":[],"mappings":";AAqBO,SAAS,EAAA,CACd,GAAA,EACA,gBAAA,EAAA,GACG,QAAA,EACuB;AAC1B,EAAA,MAAM,IAAA,GAAO,QAAA,CAAS,aAAA,CAAc,GAAG,CAAA;AACvC,EAAA,MAAM,KAAA,GAAiB,OAAO,gBAAA,KAAqB,QAAA,GAC/C,EAAE,SAAA,EAAW,gBAAA,EAAiB,GAC9B,gBAAA,IAAoB,EAAC;AACzB,EAAA,IAAI,KAAA,CAAM,SAAA,EAAW,IAAA,CAAK,SAAA,GAAY,KAAA,CAAM,SAAA;AAC5C,EAAA,IAAI,KAAA,CAAM,SAAS,MAAA,IAAa,KAAA,CAAM,SAAS,IAAA,EAAM,IAAA,CAAK,cAAc,KAAA,CAAM,IAAA;AAC9E,EAAA,IAAI,KAAA,CAAM,KAAA,KAAU,MAAA,EAAW,IAAA,CAAK,QAAQ,KAAA,CAAM,KAAA;AAClD,EAAA,IAAI,MAAM,OAAA,EAAS,IAAA,CAAK,gBAAA,CAAiB,OAAA,EAAS,MAAM,OAAwB,CAAA;AAChF,EAAA,KAAA,MAAW,SAAS,QAAA,EAAU;AAC5B,IAAA,IAAI,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,MAAA,EAAW;AAC3C,IAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AAAA,EACnB;AACA,EAAA,OAAO,IAAA;AACT;;;AC3BO,IAAM,YAAA,GAAe;AAErB,IAAM,OAAA,GAAU,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,YAAA,EAAa,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,WAAA,EAAc,CAAC,CAAA,CAAA,CAAG;AAIjF,SAAS,YAAY,IAAA,EAAsB;AAChD,EAAA,IAAI,CAAA,GAAI,UAAA;AACR,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,IAAA,CAAK,QAAQ,CAAA,EAAA,EAAK;AAAE,IAAA,CAAA,IAAK,IAAA,CAAK,WAAW,CAAC,CAAA;AAAG,IAAA,CAAA,GAAI,IAAA,CAAK,IAAA,CAAK,CAAA,EAAG,QAAU,CAAA;AAAA,EAAG;AAC/F,EAAA,CAAA,IAAK,CAAA,KAAM,EAAA;AAAI,EAAA,CAAA,GAAI,IAAA,CAAK,IAAA,CAAK,CAAA,EAAG,UAAU,CAAA;AAAG,EAAA,CAAA,IAAK,CAAA,KAAM,EAAA;AAAI,EAAA,CAAA,GAAI,IAAA,CAAK,IAAA,CAAK,CAAA,EAAG,UAAU,CAAA;AAAG,EAAA,CAAA,IAAK,CAAA,KAAM,EAAA;AACrG,EAAA,OAAA,CAAQ,MAAM,CAAA,IAAK,YAAA;AACrB;AAGO,SAAS,UAAU,IAAA,EAAsB;AAC9C,EAAA,OAAO,OAAA,CAAQ,WAAA,CAAY,IAAI,CAAC,CAAA;AAClC","file":"index.js","sourcesContent":["// ---------------------------------------------------------------------------\n// `el`: the tiny tag-typed element factory both apps build their imperative,\n// idempotent views with.\n//\n// A SUPERSET of the two apps' prior signatures, so neither rewrites call sites:\n//   - Patterpad:       el(tag, cls?, text?)                       (positional)\n//   - Storylet Studio: el(tag, { className, text, ... }, ...kids) (options bag)\n// A string second argument is the className; an object is the props bag; string\n// children become text nodes. So `el(\"div\", \"c\", \"t\")` and\n// `el(\"div\", { className: \"c\" }, \"t\")` produce identical DOM.\n// ---------------------------------------------------------------------------\n\nexport type Child = Node | string | null | undefined;\n\nexport interface ElProps {\n  className?: string;\n  text?: string;\n  title?: string;\n  onClick?: (event: MouseEvent) => void;\n}\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  classNameOrProps?: string | ElProps,\n  ...children: Child[]\n): HTMLElementTagNameMap[K] {\n  const node = document.createElement(tag);\n  const props: ElProps = typeof classNameOrProps === \"string\"\n    ? { className: classNameOrProps }\n    : classNameOrProps ?? {};\n  if (props.className) node.className = props.className;\n  if (props.text !== undefined && props.text !== null) node.textContent = props.text;\n  if (props.title !== undefined) node.title = props.title;\n  if (props.onClick) node.addEventListener(\"click\", props.onClick as EventListener);\n  for (const child of children) {\n    if (child === null || child === undefined) continue;\n    node.append(child);\n  }\n  return node;\n}\n","// ---------------------------------------------------------------------------\n// The per-entity colour model (design-language.md section 4): a stable hash of\n// a name selects an INDEX into the curated palette - repeatable, storage-free.\n// The hues live in the token layer as `--char-0 .. --char-(N-1)` per theme, so\n// a colour reference adapts to light/dark with zero JS. Each app defines the\n// `--char-*` values in its own palette; this module only picks the slot.\n//\n// Storylet Studio uses it for dimension-value / zone chips; Patterpad for\n// character cues.\n// ---------------------------------------------------------------------------\n\n/** Curated colour slots; must match the `--char-*` set defined per theme. */\nexport const PALETTE_SIZE = 12;\n\nexport const PALETTE = Array.from({ length: PALETTE_SIZE }, (_, i) => `var(--char-${i})`) as readonly string[];\n\n/** Hash a name to a palette slot: FNV-1a + an fmix32 avalanche, well\n *  distributed even for short, similar names. */\nexport function colourIndex(name: string): number {\n  let h = 0x811c9dc5;\n  for (let i = 0; i < name.length; i++) { h ^= name.charCodeAt(i); h = Math.imul(h, 0x01000193); }\n  h ^= h >>> 16; h = Math.imul(h, 0x85ebca6b); h ^= h >>> 13; h = Math.imul(h, 0xc2b2ae35); h ^= h >>> 16;\n  return (h >>> 0) % PALETTE_SIZE;\n}\n\n/** The theme-aware CSS variable reference for a name's slot. */\nexport function colourFor(name: string): string {\n  return PALETTE[colourIndex(name)]!;\n}\n"]}

package/dist/tokens.css

@@ -0,0 +1,105 @@
+/* src/tokens.css */
+:root {
+  color-scheme: light dark;
+  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);
+  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);
+  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --dur-quick: 120ms;
+  --dur-base: 150ms;
+  --dur-settle: 200ms;
+  --dur-slow: 1s;
+  --dur-panel: 260ms;
+  --dur-exit: 170ms;
+  --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);
+  --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);
+  --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);
+  --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;
+  --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-pill: 999px;
+  --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);
+  --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);
+}
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-thumb) transparent;
+}
+::-webkit-scrollbar {
+  width: 11px;
+  height: 11px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-thumb-hover);
+  background-clip: padding-box;
+}
+@keyframes panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(-9px) scale(0.965);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes screen-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes panel-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+}
+@keyframes backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --anim-panel-in: none;
+    --anim-backdrop-in: none;
+    --anim-screen-in: none;
+    --anim-panel-out: none;
+    --anim-backdrop-out: none;
+  }
+}
+/*# sourceMappingURL=tokens.css.map */

package/dist/tokens.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* ============================================================================\n   Design-token GRAMMAR - the app-agnostic layer (design-language.md section 4).\n\n   The shared half of \"two palettes, one grammar\": the scales that are IDENTICAL\n   across the editor family - elevation, motion, radius, scrollbar chrome. Each\n   app supplies its own colour + font VALUES (its palette) over this grammar in\n   its own theme.css. Do not add app-specific colours here.\n   ============================================================================ */\n\n:root {\n  color-scheme: light dark;\n\n  /* Elevation: three tiers by how far a surface floats (resting cards,\n     floating menus/popovers, full overlays). Theme-agnostic black so it\n     deepens naturally on the dark palettes. */\n  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);\n  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);\n  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);\n\n  /* Motion: one easing curve + a small duration scale, plus the shared\n     panel/backdrop/screen enter-exit vocabulary. Nothing pops. */\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --dur-quick: 120ms;\n  --dur-base: 150ms;\n  --dur-settle: 200ms;\n  --dur-slow: 1s;\n  --dur-panel: 260ms;\n  --dur-exit: 170ms;\n  --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);\n  --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);\n  --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);\n  --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;\n  --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;\n\n  /* Corner radius: four steps cover every surface. */\n  --radius-sm: 6px;\n  --radius-md: 10px;\n  --radius-lg: 14px;\n  --radius-pill: 999px;\n\n  /* Scrollbar thumb: a translucent ink, so it adapts per palette. */\n  --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);\n  --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);\n}\n\n* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }\n::-webkit-scrollbar { width: 11px; height: 11px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-corner { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }\n::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }\n\n@keyframes panel-in { from { opacity: 0; transform: translateY(-9px) scale(0.965); } to { opacity: 1; transform: none; } }\n@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }\n@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --anim-panel-in: none; --anim-backdrop-in: none; --anim-screen-in: none;\n    --anim-panel-out: none; --anim-backdrop-out: none;\n  }\n}\n"],"mappings":";AASA;AACE,gBAAc,MAAM;AAKpB,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAItC,mBAAiB,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AACzC,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,cAAY;AACZ,eAAa;AACb,cAAY;AACZ,mBAAiB,SAAS,IAAI,aAAa,IAAI;AAC/C,sBAAoB,YAAY,IAAI,cAAc,IAAI;AACtD,oBAAkB,UAAU,IAAI,aAAa,IAAI;AACjD,oBAAkB,UAAU,IAAI,YAAY,IAAI,iBAAiB;AACjE,uBAAqB,aAAa,IAAI,YAAY,IAAI,iBAAiB;AAGvE,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAGf,kBAAgB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AACpD,wBAAsB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC5D;AAEA;AAAI,mBAAiB;AAAM,mBAAiB,IAAI,gBAAgB;AAAa;AAC7E;AAAsB,SAAO;AAAM,UAAQ;AAAM;AACjD;AAA4B,cAAY;AAAa;AACrD;AAA6B,cAAY;AAAa;AACtD;AAA4B,cAAY,IAAI;AAAiB,iBAAe;AAAK,UAAQ,IAAI,MAAM;AAAa,mBAAiB;AAAa;AAC9I,yBAAyB;AAAS,cAAY,IAAI;AAAuB,mBAAiB;AAAa;AAEvG,WAAW;AAAW;AAAO,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAQ;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AACzH,WAAW;AAAc;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AACjE,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW,WAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AAC5G,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAO;AAAE;AACzH,WAAW;AAAe;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AAElE,QAAO,wBAAyB;AAC9B;AACE,qBAAiB;AAAM,wBAAoB;AAAM,sBAAkB;AACnE,sBAAkB;AAAM,yBAAqB;AAC/C;AACF;","names":[]}

package/dist/tokens.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/tokens.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@wildwinter/app-shell",
+  "version": "0.1.0",
+  "description": "The shared shell for the editor family (Patterpad, Storylet Studio): the app-agnostic design-token grammar, the per-entity colour hash, and the vanilla-TS DOM primitive. Two palettes, one grammar - each app supplies its own palette/fonts over these tokens.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Ian Thomas",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wildwinter/app-shell.git"
+  },
+  "keywords": [
+    "shell",
+    "design-tokens",
+    "dom",
+    "electron",
+    "wildwinter"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens.css": "./dist/tokens.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "release": "node scripts/release.mjs",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vitest": "^3.2.7"
+  }
+}