feat(motion): panel-demo kit + reference composition (#365)

Reusable pk-* building blocks (motion/kit/) that recreate the control
panel's look for HyperFrames compositions: frame chrome, task card,
status pills with swap crossfade, chips, toast, typing reveal, cursor
sprite. Tokens lifted from the panel's dark theme and badge components.

Reference composition motion/compositions/panel-demo/ (12s, both cuts):
a task title types into intake, the card materializes, the cursor
clicks, the status pill flips to completed, a toast slides in.

Verified: motion vitest gate green (7/7); both cuts visually checked
in-browser at native resolution.

Co-authored-by: Renn F <rennf93@users.noreply.github.com>

motion/kit/kit.js

@@ -0,0 +1,36 @@
+// Panel kit helpers — tiny, framework-free, run synchronously at load
+// (no requestAnimationFrame, no timers). Loaded after props.js and before
+// any inline script that reads window.PanelKit, same ordering convention as
+// props.js itself (see motion/README.md).
+(function () {
+  "use strict";
+
+  var DEFAULT_STAGGER = 0.045; // seconds between characters
+
+  // Splits `el`'s current text into one <span class="pk-type__char"> per
+  // character (whitespace preserved via CSS `white-space: pre` on the
+  // container) and gives each an absolute animation-delay so the reveal
+  // cascades left-to-right. `delay` is the composition-absolute second the
+  // first character should appear — the same convention every other
+  // animation-delay in this house uses (seconds from frame 0, not relative
+  // to the element). Deterministic: runs once, before any animation fires.
+  function typeText(el, options) {
+    if (!el) return;
+    var opts = options || {};
+    var delay = typeof opts.delay === "number" ? opts.delay : 0;
+    var stagger = typeof opts.stagger === "number" ? opts.stagger : DEFAULT_STAGGER;
+    var text = el.textContent || "";
+
+    el.textContent = "";
+    el.classList.add("pk-type");
+    for (var i = 0; i < text.length; i++) {
+      var span = document.createElement("span");
+      span.className = "pk-type__char";
+      span.textContent = text[i];
+      span.style.animationDelay = (delay + i * stagger).toFixed(3) + "s";
+      el.appendChild(span);
+    }
+  }
+
+  window.PanelKit = { typeText: typeText };
+})();