@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-NCKWKNZM.js

@@ -0,0 +1,130 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  animatedPair,
+  keyNear,
+  positionPair,
+  sampleNode
+} from "./chunk-ZV7E5HA5.js";
+import {
+  setKey
+} from "./chunk-GD45G3CY.js";
+import {
+  init_properties,
+  propertyFor
+} from "./chunk-TZHWIVE5.js";
+import {
+  init_sample_keys,
+  sampleNumberKeys
+} from "./chunk-CAGDE6PT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/motion/spatial.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_properties();
+init_sample_keys();
+function anchorPoint(n) {
+  const ax = n.anchorX ?? 0.5, ay = n.anchorY ?? 0.5;
+  return [n.x + ax * n.width + (n.translateX ?? 0), n.y + ay * n.height + (n.translateY ?? 0)];
+}
+function pairTimes(motion, pair) {
+  const ts = [];
+  for (const p of pair) for (const k of motion.tracks[p]?.keys ?? []) if (!ts.some((t) => Math.abs(t - k.t) < 1)) ts.push(k.t);
+  return ts.sort((a, b) => a - b);
+}
+var pathMemo = /* @__PURE__ */ new WeakMap();
+function motionPathOf(node, parent, samplesPerSegment = 24) {
+  const hit = pathMemo.get(node);
+  if (hit && hit.parent === parent) return hit.path;
+  const pair = animatedPair(node, parent);
+  const motion = node.motion;
+  let path = null;
+  if (pair && motion) {
+    const times = pairTimes(motion, pair);
+    if (times.length >= 2) {
+      const at = (t) => anchorPoint(sampleNode(node, t));
+      const points = [];
+      for (let i = 0; i + 1 < times.length; i++) {
+        for (let j = 0; j < samplesPerSegment; j++) points.push(at(times[i] + (times[i + 1] - times[i]) * j / samplesPerSegment));
+      }
+      points.push(at(times[times.length - 1]));
+      const xKeys = motion.tracks[pair[0]]?.keys ?? [];
+      const dots = times.map((t, i) => {
+        const sp = keyNear(xKeys, t)?.spatial;
+        return { t, at: at(t), in: sp?.in, out: sp?.out, first: i === 0, last: i === times.length - 1 };
+      });
+      path = { pair, points, dots };
+    }
+  }
+  pathMemo.set(node, { parent, path });
+  return path;
+}
+function dotHandles(path, i) {
+  const d = path.dots[i];
+  if (d.in || d.out) return { in: d.first ? void 0 : d.in ?? [0, 0], out: d.last ? void 0 : d.out ?? [0, 0], auto: false };
+  const prev = path.dots[i - 1]?.at ?? d.at, next = path.dots[i + 1]?.at ?? d.at;
+  const dir = [(next[0] - prev[0]) / 6, (next[1] - prev[1]) / 6];
+  return { in: d.first ? void 0 : [-dir[0], -dir[1]], out: d.last ? void 0 : dir, auto: true };
+}
+function keyTo(motion, path, t, value) {
+  return setKey(motion, path, t, value);
+}
+function moveDot(node, parent, t, to) {
+  const pair = animatedPair(node, parent) ?? positionPair(node, parent);
+  const from = anchorPoint(sampleNode(node, t));
+  const d = [to[0] - from[0], to[1] - from[1]];
+  let motion = node.motion;
+  pair.forEach((p, axis) => {
+    const track = motion?.tracks[p];
+    const k = track ? keyNear(track.keys, t) : void 0;
+    const base = typeof k?.v === "number" ? k.v : track?.keys.length ? sampleNumberKeys(track.keys, t) : propertyFor(p)?.read(node, p);
+    if (typeof base !== "number") return;
+    motion = keyTo(motion, p, k ? k.t : t, base + d[axis]);
+  });
+  return motion;
+}
+function withSpatial(motion, path, t, spatial) {
+  const track = motion?.tracks[path];
+  if (!motion || !track) return motion;
+  const keys = track.keys.map((k) => {
+    if (Math.abs(k.t - t) >= 1) return k;
+    const next = { ...k };
+    if (spatial && (spatial.in || spatial.out)) next.spatial = spatial;
+    else delete next.spatial;
+    return next;
+  });
+  return { ...motion, tracks: { ...motion.tracks, [path]: { ...track, keys } } };
+}
+function setDotTangent(node, parent, t, side, vec, broken = false) {
+  const pair = animatedPair(node, parent) ?? positionPair(node, parent);
+  let motion = node.motion;
+  for (const p of pair) {
+    const track = motion?.tracks[p];
+    if (track && keyNear(track.keys, t)) continue;
+    const v = track?.keys.length ? sampleNumberKeys(track.keys, t) : propertyFor(p)?.read(node, p);
+    if (typeof v === "number") motion = keyTo(motion, p, t, v);
+  }
+  const xKey = motion?.tracks[pair[0]] ? keyNear(motion.tracks[pair[0]].keys, t) : void 0;
+  if (!xKey) return motion;
+  const prev = xKey.spatial ?? {};
+  const other = [-vec[0], -vec[1]];
+  const next = side === "out" ? { out: vec, in: broken ? prev.in : other } : { in: vec, out: broken ? prev.out : other };
+  const clean = {};
+  if (next.in) clean.in = next.in;
+  if (next.out) clean.out = next.out;
+  return withSpatial(motion, pair[0], xKey.t, clean);
+}
+
+export {
+  anchorPoint,
+  motionPathOf,
+  dotHandles,
+  moveDot,
+  setDotTangent
+};

package/dist/chunks/chunk-NDAKDGKF.js

@@ -0,0 +1,23 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  BARLEY_MOON
+} from "./chunk-5NPZMARV.js";
+import {
+  countdownStory
+} from "./chunk-G72OSJJR.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/festival-presale-folk-countdown.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_folk_countdown_default = countdownStory(BARLEY_MOON);
+
+export {
+  festival_presale_folk_countdown_default
+};

package/dist/chunks/chunk-NEBEYJNW.js

@@ -0,0 +1,209 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  HARVEST,
+  almanacRule,
+  fallLeaves,
+  farFields,
+  field,
+  fitChart,
+  fitField,
+  fitLeaves,
+  growBars,
+  harvestBrand,
+  leaves,
+  nearField,
+  strew,
+  wheatChart
+} from "./chunk-W3Q6GV45.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/autumn-harvest-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 7e3;
+var LEDGER = [
+  ["$184M", "Paid out to freelancers", "Up from $121M in 2025. The biggest single invoice was $212,000, for a film score."],
+  ["1,204,880", "Invoices sent", "Nine in ten went out from a phone, most of them within an hour of the work being done."],
+  ["91%", "Paid on time", "Bushel sends the reminder on day one, day seven and day fourteen, so you never have to."],
+  ["9 days", "Sooner than last year", "The median invoice now clears in 11 days. In 2025 it took 20."],
+  ["212", "Changes shipped", "Recurring invoices, deposits, late fees that add themselves, and tax summaries by quarter."]
+];
+var plate = (w) => {
+  const u = w / 1e3, h = Math.round(w * 1.12), near = h * 0.72;
+  return { h, g: field({ w, h, near, u, loopMs: LOOP }, { sun: { x: w * 0.64, y: near - 300 * u, size: 430 * u }, birds: { x: w * 0.24, y: near - 560 * u }, pumpkins: [[0.94, 0.9], [0.83, 0.6]] }), chart: { x: w * 0.07, base: near + 12 * u, scale: w / 540 } };
+};
+var W = 540;
+var CHART = { x: W * 0.07, base: plate(W).g.near + 7, width: W * 0.86, height: 250, values: HARVEST.quarters, tags: HARVEST.quarters.map((q) => `$${q}M`), tagStyle: "Tag 17", u: 0.58 };
+var litter = (w, h, near, size = w) => strew(61, 9, { x0: w * 0.08, x1: w * 0.92, y0: near + size * 0.13 + 26, y1: Math.max(near + size * 0.13 + 30, h - size * 0.05) }, [size * 0.07, size * 0.13]);
+var counts = HARVEST.quarters.map((q, i) => ({ layer: `Tally ${i + 1}`, at: 1200 + i * 350, duration: 900, counter: { from: 10, to: q, prefix: "$", suffix: "M" } }));
+var cues = [
+  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 600 } },
+  { layer: "Nav", preset: "fade-in", at: 100, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 300, params: { duration: 700 } },
+  { layer: "Headline", preset: "words-in", at: 350, params: { duration: 800 } },
+  { layer: "Visual", preset: "fade-in", at: 400, params: { duration: 900 } },
+  { layer: "Lead", preset: "rise-in", at: 900, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1300, params: { duration: 700 }, stagger: { delay: 140 } },
+  { layer: "Tag", preset: "pop-in", at: 1500, params: { duration: 400 }, stagger: { delay: 350 } },
+  { layer: "Proof", preset: "fade-in", at: 2e3, params: { duration: 800 } },
+  { layer: ["Plate head", "Plate caption"], preset: "fade-in", at: 2600, params: { duration: 700 }, stagger: { delay: 200 } }
+];
+var autumn_harvest_landing_default = defineTemplate({
+  id: "web-autumn-harvest-landing",
+  meta: {
+    name: "Autumn harvest landing page",
+    description: "A seasonal landing page for a Q4 push, set as a page from a farmer\u2019s almanac: an offer bar, a hero where wheat grows out of a linocut field into the year\u2019s bar chart while leaves fall and settle, the year\u2019s ledger as ruled entries with the figure first, a word of thanks set as a letter, and the offer \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["autumn", "harvest", "fall", "landing page", "hero", "website", "saas", "year in review", "almanac", "linocut", "wheat", "bar chart", "offer", "thank you", "animation", "responsive", "seasonal", "serif"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "stats", "milestone"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Autumn harvest landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    harvestBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Bar 15", { size: 15, fontWeight: 700, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 84", { ...SERIF, size: 84, fontWeight: 900, letterSpacing: -2.8, lineHeight: 84 });
+    k.textStyle("Display 58", { ...SERIF, size: 58, fontWeight: 900, letterSpacing: -1.7, lineHeight: 60 });
+    k.textStyle("Display 36", { ...SERIF, size: 36, fontWeight: 900, letterSpacing: -0.9, lineHeight: 40 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Section 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Section 32", { ...SERIF, size: 32, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Figure 40", { ...MONO, size: 40, fontWeight: 800, letterSpacing: -1.6, lineHeight: 48 });
+    k.textStyle("Figure 30", { ...MONO, size: 30, fontWeight: 800, letterSpacing: -1, lineHeight: 38 });
+    k.textStyle("Entry 22", { ...SERIF, size: 22, fontWeight: 700, lineHeight: 30 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Letter 26", { ...SERIF, size: 26, fontStyle: "italic", fontWeight: 500, lineHeight: 40 });
+    k.textStyle("Letter 20", { ...SERIF, size: 20, fontStyle: "italic", fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Tag 17", { ...MONO, size: 17, fontWeight: 800, letterSpacing: -0.3, lineHeight: 21 });
+    k.textStyle("Plate 12", { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.6, lineHeight: 16, textCase: "UPPER" });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 6 });
+    pill(k, "Button paper", { fill: "paper", ink: "text", style: "Button 16", label: "Start the Q4 push", pad: [15, 26], radius: 6 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 24 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const bar = k.stack(sheet, { fill: "primary", radius: 6, padding: { top: 10, right: 20, bottom: 10, left: 20 }, align: "CENTER", name: "Offer bar" });
+    k.text(bar, "The Q4 push: three months at half price on any annual plan started before 30 November. Code HARVEST.", { style: "Bar 15", color: "onPrimary", name: "Offer bar text" });
+    nav(k, sheet, { links: ["Ledger", "Reminders", "Pricing", "Changelog"], cta: "Start the Q4 push", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    k.text(copy, "The 2026 harvest \xB7 one quarter left", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    almanacRule(k, copy, { width: "FILL", u: 0.6 });
+    k.text(copy, "Bring the year in before the frost.", { style: "Display 84", color: "text", name: "Headline" });
+    k.text(copy, "This year 31,412 freelancers sent their invoices through Bushel and were paid $184 million, nine days sooner than the year before. There is one quarter left. Send what you are owed, let Bushel do the chasing, and close the books in December instead of March.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Start the Q4 push" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read the 2026 ledger" }, { name: "CTA quiet" });
+    k.text(copy, "Half price for three months \xB7 no card for 30 days \xB7 code HARVEST", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const p = plate(W);
+    const visual = k.stack(hero, { width: W, height: p.h, fill: "card", radius: 6, clip: true, stroke: { color: "text", width: 2 }, name: "Visual" });
+    farFields(k, visual, p.g);
+    wheatChart(k, visual, CHART);
+    nearField(k, visual, p.g);
+    leaves(k, visual, litter(W, p.h, p.g.near));
+    k.text(visual, "{{brand.name}} almanac \xB7 the harvest number", { style: "Plate 12", color: "onCard", width: W - 48, name: "Plate head", absolute: { x: 24, y: 20 } });
+    k.text(visual, "Plate IV \xB7 paid out through Bushel, by quarter, 2026", { style: "Plate 12", color: "label", width: W - 48, name: "Plate caption", absolute: { x: 24, y: p.g.near + 22 } });
+    growBars(k, visual, 1e3, 350, 1e3);
+    fallLeaves(k, visual, { at: 600, gap: 380, duration: 2800, sway: 40 });
+    const ledger = k.stack(sheet, { gap: 0, name: "Ledger" });
+    k.text(ledger, "The year\u2019s ledger", { style: "Section 44", color: "text", name: "Ledger title" });
+    k.stack(ledger, { height: 28, name: "Gap" });
+    almanacRule(k, ledger, { width: "FILL", u: 0.6 });
+    for (const [figure, entry, account] of LEDGER) {
+      const row = k.stack(ledger, { direction: "HORIZONTAL", gap: 32, align: "CENTER", padding: { top: 22, right: 0, bottom: 22, left: 0 }, name: "Entry" });
+      k.text(row, figure, { style: "Figure 40", color: "text", width: 300, name: "Entry figure" });
+      k.text(row, entry, { style: "Entry 22", color: "text", width: 260, name: "Entry name" });
+      k.text(row, account, { style: "Body 18", color: "onPaper", name: "Entry account" });
+      k.rect(ledger, "FILL", 1, "text", { name: "Rule", opacity: 0.35 });
+    }
+    const letter = k.stack(sheet, { gap: 20, fill: "card", radius: 6, stroke: { color: "text", width: 2 }, padding: { top: 48, right: 56, bottom: 48, left: 56 }, name: "Letter" });
+    k.text(letter, "A word of thanks", { style: "Eyebrow 14", color: "onCard", name: "Letter eyebrow" });
+    k.text(letter, "None of that $184 million is ours. It is rent, a new lens, a first hire, a month off in August. You did the work; all we did was ask for the money politely, three times, so that you did not have to. Thank you for trusting six people in a small office with something that matters this much. We will keep earning it.", { style: "Letter 26", color: "onCard", name: "Letter text" });
+    k.text(letter, "Odile Marchetti, founder \xB7 October 2026", { style: "Small 14", color: "onCard", name: "Letter signature" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", fill: "primary", radius: 6, padding: 48, name: "Band" });
+    const pitch = k.stack(band, { gap: 10, name: "Band copy" });
+    k.text(pitch, "One quarter left. Half price to bring it in.", { style: "Section 32", color: "onPrimary", name: "Band title" });
+    k.text(pitch, "Start any annual plan before 30 November with the code HARVEST and the first three months are half price. Import your clients from a spreadsheet in about four minutes.", { style: "Body 18", color: "onPrimary", name: "Band text" });
+    k.instance(band, "Button paper", { Label: "Start the Q4 push" }, { name: "Band button" });
+    k.text(sheet, "\xA9 2026 Bushel Works \xB7 Security \xB7 Changelog \xB7 Status", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Band", "Entry"],
+      restyle: {
+        "Display 84": { laptop: "Display 58", tablet: "Display 58", mobile: "Display 36" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 44": { mobile: "Section 32" },
+        "Figure 40": { tablet: "Figure 30", mobile: "Figure 30" },
+        "Letter 26": { mobile: "Letter 20" }
+      },
+      gap: { tablet: 56, mobile: 44 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 24, padding: { top: 32, right: 24, bottom: 32, left: 24 } });
+          for (const n of kit.named(id, "Entry")) kit.patch(n, { itemSpacing: 4, counterAxisAlignItems: "MIN" });
+          for (const n of kit.named(id, "Letter")) {
+            const side = size === "tablet" ? 48 : 24;
+            kit.patch(n, { padding: { top: 32, right: side, bottom: 32, left: side } });
+          }
+        }
+        const y = size === "mobile" ? plate(335) : p;
+        for (const box of kit.named(id, "Visual")) {
+          kit.patch(box, { layoutSizingHorizontal: "FIXED", width: y.g.w, height: y.h });
+          if (size !== "mobile") continue;
+          fitField(kit, box, y.g);
+          fitChart(kit, box, CHART, y.chart);
+          fitLeaves(kit, box, litter(335, y.h, y.g.near, W));
+          for (const n of kit.named(box, "Plate head")) kit.patch(n, { x: 14, y: 12, width: 335 - 28 });
+          for (const n of kit.named(box, "Plate caption")) kit.patch(n, { x: 14, y: y.g.near + 12, width: 335 - 28 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  autumn_harvest_landing_default
+};

package/dist/chunks/chunk-NG4G27X5.js

@@ -0,0 +1,163 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  showcase,
+  showcaseStyles,
+  specimenRow
+} from "./chunk-JZ4SIJCP.js";
+import {
+  defineLibrary
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/libraries/micro-interactions.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TOGGLE_ON = [{ layer: "Knob", preset: "pulse", at: 120, params: { amount: 0.15, duration: 420 } }];
+var CHECKED = [
+  { layer: "Check", preset: "pop-in", at: 0, params: { duration: 360 } },
+  { layer: "Box", preset: "pulse", at: 60, params: { amount: 0.12, duration: 420 } }
+];
+var TAB_W = 132;
+var TABS = ["First", "Second", "Third"];
+var shadow = (blur, y, a) => ({ type: "DROP_SHADOW", color: hex("#101828", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+var micro_interactions_default = defineLibrary({
+  id: "lib-micro-interactions",
+  version: 1,
+  meta: {
+    name: "Micro-interactions",
+    description: "Interactive components with animated states \u2014 a button that lifts on hover and gives on press, a gliding toggle, a checkbox that ticks, tabs with a sliding underline \u2014 with text and colour inputs",
+    tags: ["animation", "micro-interactions", "components", "ui kit", "button", "toggle", "checkbox", "tabs", "hover"],
+    created: "2026-09-29",
+    updated: "2026-09-29",
+    aliases: ["web-kit-micro-interactions"]
+  },
+  motion: { components: [{ component: "Toggle/On", cues: TOGGLE_ON }, { component: "Checkbox/Checked", cues: CHECKED }] },
+  build() {
+    const k = new Kit("Micro-interaction kit", preset("web-desktop"));
+    k.brand({ paper: "#F6F7FB", text: "#141A2E", onPaper: "#5A6275", primary: "#2352D8", onPrimary: "#FFFFFF", track: "#C9CFDC", card: "#FFFFFF", boxLine: "#8A93A8", shade: "#0B1020", line: "#DDE1EA" }, { name: "Tally" });
+    showcaseStyles(k);
+    k.textStyle("Button 16", { size: 16, fontWeight: 600, lineHeight: 24 });
+    k.textStyle("Control 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Check 14", { size: 14, fontWeight: 800, lineHeight: 16, textAlign: "CENTER" });
+    k.textStyle("Tab 15", { size: 15, fontWeight: 500, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("Tab selected 15", { size: 15, fontWeight: 700, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("Panel title 22", { size: 22, fontWeight: 700, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Panel body 15", { size: 15, fontWeight: 400, lineHeight: 22 });
+    const button = k.variantSet("Button", "State", ["Idle", "Hover", "Pressed"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      align: "CENTER",
+      padding: 8,
+      description: "A call to action: it lifts and its shadow blooms on hover, and gives a little when pressed. Label and Accent are inputs.",
+      props: { Label: "Save changes", Accent: { color: "primary" } }
+    }, (state, id) => {
+      const bg = k.stack(id, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 10, align: "CENTER", padding: { top: 12, right: 22, bottom: 12, left: 22 }, effects: [shadow(state === "Hover" ? 18 : 6, state === "Hover" ? 8 : 2, state === "Pressed" ? 0.06 : 0.14)], name: "Background" });
+      k.propText(bg, "Label", { style: "Button 16", color: "onPrimary", autoWidth: true });
+      k.bindPath(bg, "fills[#0].color", "Accent");
+      if (state === "Pressed") k.rect(bg, 1, 1, "shade", { opacity: 0.16, name: "Shade", absolute: { x: 0, y: 0 } });
+    }, (state) => state === "Hover" ? { timeline: { duration: 420 } } : state === "Pressed" ? { timeline: { duration: 180 } } : {});
+    k.changeTo("Button/Idle", "ON_HOVER", "Button/Hover", 160);
+    k.changeTo("Button/Hover", "ON_PRESS", "Button/Pressed", 80);
+    const toggle = k.variantSet("Toggle", "State", ["Off", "On"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 12,
+      align: "CENTER",
+      padding: 4,
+      description: "An on/off switch: click it and the knob glides across as the track takes the brand colour. Label is an input.",
+      props: { Label: "Weekly summary email" }
+    }, (state, id) => {
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 44, height: 24, radius: 12, padding: 3, align: "CENTER", justify: state === "On" ? "MAX" : "MIN", fill: state === "On" ? "primary" : "track", name: "Track" });
+      k.ellipse(track, 18, "card", { name: "Knob", effects: [shadow(3, 1, 0.2)] });
+      k.propText(id, "Label", { style: "Control 16", color: "text", autoWidth: true });
+    }, (state) => state === "On" ? { timeline: { duration: 600 } } : {});
+    k.changeTo("Toggle/Off", "ON_CLICK", "Toggle/On", 220, "EASE_IN_OUT");
+    k.changeTo("Toggle/On", "ON_CLICK", "Toggle/Off", 220, "EASE_IN_OUT");
+    const checkbox = k.variantSet("Checkbox", "State", ["Unchecked", "Checked"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 10,
+      align: "CENTER",
+      padding: 4,
+      description: "A checkbox: click it and the box fills as the tick pops in. Label is an input.",
+      props: { Label: "Send me product updates" }
+    }, (state, id) => {
+      const box = k.stack(id, { direction: "HORIZONTAL", width: 20, height: 20, radius: 5, align: "CENTER", justify: "CENTER", fill: state === "Checked" ? "primary" : "card", ...state === "Checked" ? {} : { stroke: { color: "boxLine", width: 1.5 } }, name: "Box" });
+      if (state === "Checked") k.text(box, "\u2714", { style: "Check 14", color: "onPrimary", autoWidth: true, name: "Check" });
+      k.propText(id, "Label", { style: "Control 16", color: "text", autoWidth: true });
+    }, (state) => state === "Checked" ? { timeline: { duration: 600 } } : {});
+    k.changeTo("Checkbox/Unchecked", "ON_CLICK", "Checkbox/Checked", 160);
+    k.changeTo("Checkbox/Checked", "ON_CLICK", "Checkbox/Unchecked", 160);
+    const tabs = k.variantSet("Tabs", "Selected", TABS, {
+      direction: "VERTICAL",
+      width: "HUG",
+      description: "Three tabs with a sliding underline: click a tab and the underline glides under it. The tab names are inputs.",
+      props: { First: "Overview", Second: "Activity", Third: "Settings" }
+    }, (state, id) => {
+      const bar = k.stack(id, { direction: "HORIZONTAL", width: "HUG", name: "Bar" });
+      TABS.forEach((t) => {
+        const cell = k.stack(bar, { direction: "HORIZONTAL", width: TAB_W, align: "CENTER", justify: "CENTER", padding: { top: 14, right: 8, bottom: 14, left: 8 }, name: `Tab ${t}` });
+        k.propText(cell, t, { style: t === state ? "Tab selected 15" : "Tab 15", color: t === state ? "text" : "onPaper", autoWidth: true, name: t });
+      });
+      k.rect(id, TAB_W * TABS.length, 1, "line", { name: "Rule" });
+      k.rect(id, TAB_W, 3, "primary", { radius: 2, name: "Indicator", absolute: { x: TABS.indexOf(state) * TAB_W, y: 45 } });
+    });
+    for (const state of TABS) for (const t of TABS) if (t !== state) {
+      const cell = k.named(tabs[state], `Tab ${t}`)[0];
+      k.changeTo(`Tabs/${state}`, "ON_CLICK", `Tabs/${t}`, 260, "EASE_IN_OUT", cell);
+    }
+    k.finish();
+    for (const bg of k.named(button.Pressed, "Background")) for (const s of k.named(bg, "Shade")) k.patch(s, { width: k.node(bg).width, height: k.node(bg).height, cornerRadius: 10 });
+    const hoverBg = k.named(button.Hover, "Background")[0], pressedBg = k.named(button.Pressed, "Background")[0];
+    k.animate(hoverBg, "translateY", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 220, v: -2 }]);
+    k.animate(hoverBg, "effects[#0].blur", [{ t: 0, v: 6, ease: ease.out("expo") }, { t: 420, v: 18 }]);
+    k.animate(pressedBg, "scaleX", [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
+    k.animate(pressedBg, "scaleY", [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
+    k.cues(toggle.On, TOGGLE_ON);
+    k.cues(checkbox.Checked, CHECKED);
+    const sheet = k.sheet;
+    showcase(k, sheet, { title: "Micro-interaction kit", intro: "Every state of every control, playing its own move. Present the file and hover or press the buttons, flip the toggles, tick the boxes and pick a tab. Drop the components from Assets into any screen; the labels and the button colour are inputs.", duration: 4e3 });
+    const buttons = specimenRow(k, sheet, "Button \u2014 idle, hover, pressed");
+    k.instance(buttons, "Button/Idle", { Label: "Save changes" }, { name: "Button" });
+    k.instance(buttons, "Button/Hover", { Label: "Save changes" }, { name: "Button hover", playback: { loop: "pingpong", start: 300 } });
+    k.instance(buttons, "Button/Pressed", { Label: "Save changes" }, { name: "Button pressed", playback: { loop: "pingpong", start: 600 } });
+    k.instance(buttons, "Button/Idle", { Label: "Invite a teammate", Accent: hex("#0F7B4E") }, { name: "Button" });
+    const toggles = specimenRow(k, sheet, "Toggle \u2014 off, on");
+    k.instance(toggles, "Toggle/Off", { Label: "Weekly summary email" }, { name: "Toggle" });
+    k.instance(toggles, "Toggle/On", { Label: "Friday timesheet reminder" }, { name: "Toggle on", playback: { start: 400 } });
+    const checks = specimenRow(k, sheet, "Checkbox \u2014 unchecked, checked");
+    k.instance(checks, "Checkbox/Unchecked", { Label: "Send me product updates" }, { name: "Checkbox" });
+    k.instance(checks, "Checkbox/Checked", { Label: "Round entries to 15 minutes" }, { name: "Checkbox checked", playback: { start: 700 } });
+    const tabRow = specimenRow(k, sheet, "Tabs", { gap: 48 });
+    k.instance(tabRow, "Tabs/First", { First: "Overview", Second: "Timesheets", Third: "Settings" }, { name: "Tabs" });
+    k.instance(tabRow, "Tabs/Third", { First: "Week", Second: "Month", Third: "Year" }, { name: "Tabs" });
+    const panel = k.stack(sheet, { width: 760, gap: 20, radius: 16, stroke: { color: "line", width: 1 }, padding: 32, name: "Settings panel" });
+    k.text(panel, "Notification settings", { style: "Panel title 22", color: "text", name: "Panel title" });
+    k.instance(panel, "Tabs/First", { First: "Email", Second: "Mobile", Third: "Slack" }, { name: "Panel tabs" });
+    k.text(panel, "Choose what Tally sends you about your team\u2019s hours. You can change this at any time.", { style: "Panel body 15", color: "onPaper", name: "Panel body" });
+    k.instance(panel, "Toggle/On", { Label: "Weekly summary every Monday at 9:00" }, { name: "Setting" });
+    k.instance(panel, "Toggle/Off", { Label: "A reminder when a timesheet is late" }, { name: "Setting" });
+    k.instance(panel, "Checkbox/Checked", { Label: "Include billable hours by client" }, { name: "Setting check" });
+    const actions = k.stack(panel, { direction: "HORIZONTAL", gap: 12, justify: "MAX", name: "Actions" });
+    k.instance(actions, "Button/Idle", { Label: "Save changes" }, { name: "Save" });
+    return k.finish();
+  }
+});
+
+export {
+  micro_interactions_default
+};