@profpowell/border-wc 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ProfPowell
+
+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,69 @@
+# `<border-wc>`
+
+[![CI](https://github.com/ProfPowell/border-wc/actions/workflows/ci.yml/badge.svg)](https://github.com/ProfPowell/border-wc/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
+
+**[Live demo →](https://profpowell.github.io/border-wc/)**
+
+A light-DOM web component for high-touch border effects — squiggle, draw-on,
+sparks — the kind of decorative borders that pure CSS can't pull off. It pairs
+with vanilla-breeze's CSS-tier `data-border-effect` (spin / pulse / march): use
+the CSS tier for cheap, always-on motion, and reach for `<border-wc>` when you
+need SVG/canvas-driven effects. It reads your design tokens (CSS custom
+properties) so borders stay on-brand without extra config.
+
+## Install
+
+```bash
+npm install @profpowell/border-wc
+```
+
+## Usage
+
+```html
+<script type="module" src="https://unpkg.com/@profpowell/border-wc"></script>
+<border-wc effect="squiggle" color="var(--ink)" animate>
+  <blockquote>The shape around the thing is the thing.</blockquote>
+</border-wc>
+```
+
+## Attributes
+
+| Attribute   | Description                                                                                          |
+| ----------- | ---------------------------------------------------------------------------------------------------- |
+| `effect`    | Border effect: `squiggle`, `draw`, or `sparks`.                                                      |
+| `color`     | Stroke/particle color (any CSS color; defaults to `currentColor`).                                   |
+| `thickness` | Stroke width in px.                                                                                  |
+| `speed`     | Animation duration in ms.                                                                            |
+| `radius`    | Corner radius in px (falls back to the host's computed `border-radius`).                             |
+| `animate`   | Boolean; when present, plays the entrance/loop animation.                                            |
+| `mode`      | Effect-specific placement mode (e.g. `center`).                                                      |
+| `motion`    | `auto` \| `reduce` \| `force` — overrides `prefers-reduced-motion`: `reduce` forces static, `force` forces animation, `auto` (default) honors the media query. |
+
+Each attribute can also be set via a matching `--border-wc-*` CSS custom
+property (e.g. `--border-wc-color`), which takes precedence over the attribute.
+
+## Attribute binder (no wrapper)
+
+Opt in once and annotate any element — no `<border-wc>` wrapper needed:
+
+```html
+<script type="module" src="https://unpkg.com/@profpowell/border-wc/attr"></script>
+<article data-border-effect="squiggle">…</article>
+```
+
+The binder applies the **extreme** effects (`squiggle`, `draw`, `sparks`) directly
+to the element and watches the DOM for added/changed/removed nodes. **Base** values
+(`spin`, `pulse`, `march`, …) are owned by vanilla-breeze's CSS and ignored here.
+Params come from `--border-wc-*` custom properties (same knobs as the component).
+
+The module auto-scans on import. For programmatic control it also exports
+`bindBorderEffects(root = document)` (scan a subtree on demand) and `stopWatching()`
+(stop observing future DOM changes).
+
+Part of the "Decorated Layers" family alongside
+[vanilla-breeze](https://github.com/ProfPowell) and `bg-wc`.
+
+## License
+
+MIT

package/dist/border-wc.js

@@ -0,0 +1,58 @@
+import { s as styleHost, E as EFFECTS, b as reducedMotion, r as readParams } from "./registry-FHKtTUGp.js";
+class BorderWC extends HTMLElement {
+  static get observedAttributes() {
+    return ["effect", "color", "thickness", "speed", "radius", "animate", "mode", "motion"];
+  }
+  #cleanup = null;
+  #token = 0;
+  get effect() {
+    return this.getAttribute("effect");
+  }
+  set effect(v) {
+    v == null ? this.removeAttribute("effect") : this.setAttribute("effect", String(v));
+  }
+  connectedCallback() {
+    styleHost(this);
+    this.#apply();
+  }
+  disconnectedCallback() {
+    this.#teardown();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this.#apply();
+  }
+  refresh() {
+    this.#apply();
+  }
+  #teardown() {
+    try {
+      this.#cleanup?.();
+    } catch {
+    }
+    this.#cleanup = null;
+  }
+  async #apply() {
+    this.#teardown();
+    const name = this.effect;
+    if (!name || !EFFECTS[name]) return;
+    const token = ++this.#token;
+    let create;
+    try {
+      create = await EFFECTS[name]();
+    } catch {
+      return;
+    }
+    if (token !== this.#token || !this.isConnected) return;
+    const params = { ...readParams(this), reduce: reducedMotion(this) };
+    try {
+      this.#cleanup = create(this, params) || null;
+      this.dispatchEvent(new CustomEvent("border-wc:effect-applied", { detail: { effect: name } }));
+    } catch (err) {
+      this.dispatchEvent(new CustomEvent("border-wc:error", { detail: { error: err } }));
+    }
+  }
+}
+if (!customElements.get("border-wc")) customElements.define("border-wc", BorderWC);
+export {
+  BorderWC
+};

package/dist/data-border-effect.js

@@ -0,0 +1,89 @@
+import { E as EFFECTS, s as styleHost, b as reducedMotion, r as readParams, a as EXTREME } from "./registry-FHKtTUGp.js";
+const bound = /* @__PURE__ */ new WeakMap();
+let observer = null;
+function extremeValue(el) {
+  const raw = el.getAttribute("data-border-effect");
+  if (!raw) return null;
+  for (const v of raw.trim().split(/\s+/)) {
+    if (EXTREME.includes(v)) return v;
+  }
+  return null;
+}
+function teardown(el) {
+  const prev = bound.get(el);
+  if (!prev) return;
+  try {
+    prev.cleanup?.();
+  } catch {
+  }
+  bound.delete(el);
+}
+async function applyTo(el) {
+  const value = extremeValue(el);
+  const prev = bound.get(el);
+  if (prev && prev.value === value) return;
+  teardown(el);
+  if (!value) return;
+  const token = {};
+  bound.set(el, { value, cleanup: null, token });
+  let create;
+  try {
+    create = await EFFECTS[value]();
+  } catch {
+    if (bound.get(el)?.token === token) bound.delete(el);
+    return;
+  }
+  const cur = bound.get(el);
+  if (!cur || cur.token !== token || !el.isConnected) return;
+  styleHost(el);
+  const params = { ...readParams(el), reduce: reducedMotion(el) };
+  try {
+    cur.cleanup = create(el, params) || null;
+  } catch {
+  }
+}
+function bindBorderEffects(root = document) {
+  if (root.nodeType === 1 && root.hasAttribute("data-border-effect")) applyTo(root);
+  root.querySelectorAll?.("[data-border-effect]").forEach(applyTo);
+}
+function stopWatching() {
+  observer?.disconnect();
+  observer = null;
+}
+function eachAnnotated(node, fn) {
+  if (node.nodeType !== 1) return;
+  if (node.hasAttribute("data-border-effect")) fn(node);
+  node.querySelectorAll?.("[data-border-effect]").forEach(fn);
+}
+function startWatching() {
+  if (observer) return;
+  observer = new MutationObserver((records) => {
+    for (const rec of records) {
+      if (rec.type === "attributes") {
+        applyTo(rec.target);
+      } else {
+        rec.addedNodes.forEach((n) => eachAnnotated(n, applyTo));
+        rec.removedNodes.forEach((n) => eachAnnotated(n, teardown));
+      }
+    }
+  });
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-border-effect"]
+  });
+}
+function init() {
+  bindBorderEffects();
+  startWatching();
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init, { once: true });
+} else {
+  init();
+}
+export {
+  bindBorderEffects,
+  stopWatching
+};

package/dist/draw-CKnXGdb7.js

@@ -0,0 +1,69 @@
+import { r as roundedRectPath, a as roundedRectPerimeter } from "./perimeter-B9myracn.js";
+import { c as resolveRadius } from "./registry-FHKtTUGp.js";
+const SVGNS = "http://www.w3.org/2000/svg";
+function createDraw(host, params) {
+  const svg = document.createElementNS(SVGNS, "svg");
+  svg.setAttribute("data-border-wc", "draw");
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    overflow: "visible",
+    pointerEvents: "none"
+  });
+  svg.setAttribute("width", "100%");
+  svg.setAttribute("height", "100%");
+  const path = document.createElementNS(SVGNS, "path");
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", params.color);
+  path.setAttribute("stroke-width", String(params.thickness));
+  svg.appendChild(path);
+  host.appendChild(svg);
+  let raf = 0;
+  let currentOnEnd = null;
+  const render = (animateIn) => {
+    if (currentOnEnd) {
+      path.removeEventListener("transitionend", currentOnEnd);
+      currentOnEnd = null;
+    }
+    const rect = host.getBoundingClientRect();
+    const inset = params.thickness / 2;
+    const radius = resolveRadius(host, params);
+    path.setAttribute(
+      "d",
+      roundedRectPath({ width: rect.width, height: rect.height, radius, inset })
+    );
+    const len = roundedRectPerimeter({ width: rect.width, height: rect.height, radius, inset }) || 1;
+    path.style.transition = "none";
+    path.style.strokeDasharray = String(len);
+    if (!animateIn || params.reduce) {
+      path.style.strokeDashoffset = "0";
+      host.dispatchEvent(new CustomEvent("border-wc:draw-complete", { detail: {} }));
+      return;
+    }
+    path.style.strokeDashoffset = String(len);
+    raf = requestAnimationFrame(() => {
+      path.style.transition = `stroke-dashoffset ${params.speed}ms linear`;
+      path.style.strokeDashoffset = "0";
+    });
+    const onEnd = (e) => {
+      if (e.propertyName !== "stroke-dashoffset") return;
+      host.dispatchEvent(new CustomEvent("border-wc:draw-complete", { detail: {} }));
+      path.removeEventListener("transitionend", onEnd);
+      if (currentOnEnd === onEnd) currentOnEnd = null;
+    };
+    currentOnEnd = onEnd;
+    path.addEventListener("transitionend", onEnd);
+  };
+  render(true);
+  const ro = new ResizeObserver(() => render(false));
+  ro.observe(host);
+  return () => {
+    cancelAnimationFrame(raf);
+    if (currentOnEnd) path.removeEventListener("transitionend", currentOnEnd);
+    ro.disconnect();
+    svg.remove();
+  };
+}
+export {
+  createDraw
+};

package/dist/perimeter-B9myracn.js

@@ -0,0 +1,169 @@
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const n = (v) => (Math.round(v * 1e3) / 1e3).toString();
+const deg = (d) => d * Math.PI / 180;
+function tracePath({ start, segments }) {
+  if (!segments.length) return "";
+  let out = `M${n(start[0])} ${n(start[1])}`;
+  segments.forEach((s, i) => {
+    if (s.len <= 0 && s.kind !== "line") return;
+    if (i === segments.length - 1 && s.kind === "line") {
+      const end = s.at(1);
+      if (Math.abs(end[0] - start[0]) < 1e-6 && Math.abs(end[1] - start[1]) < 1e-6) return;
+    }
+    out += s.d;
+  });
+  return out + "Z";
+}
+function traceLength({ segments }) {
+  return segments.reduce((acc, s) => acc + s.len, 0);
+}
+function traceSampler({ start, segments }) {
+  const total = segments.reduce((acc, s) => acc + s.len, 0);
+  if (total <= 0) return () => start.slice();
+  return (t) => {
+    let d = (t % 1 + 1) % 1 * total;
+    for (const s of segments) {
+      if (s.len <= 0) continue;
+      if (d <= s.len) return s.at(d / s.len);
+      d -= s.len;
+    }
+    for (let i = segments.length - 1; i >= 0; i--)
+      if (segments[i].len > 0) return segments[i].at(1);
+    return start.slice();
+  };
+}
+function lineSeg(p0, p1) {
+  const [x0, y0] = p0;
+  const [x1, y1] = p1;
+  const len = Math.hypot(x1 - x0, y1 - y0);
+  let d;
+  if (y0 === y1) d = `H${n(x1)}`;
+  else if (x0 === x1) d = `V${n(y1)}`;
+  else d = `L${n(x1)} ${n(y1)}`;
+  return { kind: "line", len, at: (u) => [x0 + (x1 - x0) * u, y0 + (y1 - y0) * u], d };
+}
+function flattenedWalker(poly) {
+  const cum = [0];
+  for (let i = 1; i < poly.length; i++) {
+    cum.push(cum[i - 1] + Math.hypot(poly[i][0] - poly[i - 1][0], poly[i][1] - poly[i - 1][1]));
+  }
+  const len = cum[cum.length - 1];
+  const at = (u) => {
+    if (len <= 0) return poly[0].slice();
+    const target = clamp(u, 0, 1) * len;
+    let i = 1;
+    while (i < cum.length && cum[i] < target) i++;
+    if (i >= cum.length) return poly[poly.length - 1].slice();
+    const seg = cum[i] - cum[i - 1] || 1;
+    const f = (target - cum[i - 1]) / seg;
+    return [
+      poly[i - 1][0] + (poly[i][0] - poly[i - 1][0]) * f,
+      poly[i - 1][1] + (poly[i][1] - poly[i - 1][1]) * f
+    ];
+  };
+  return { len, at };
+}
+function cornerArcSeg({ cx, cy, rx, ry, a0deg, end }) {
+  const pt = (adeg) => [cx + rx * Math.cos(deg(adeg)), cy + ry * Math.sin(deg(adeg))];
+  const d = `A${n(rx)} ${n(ry)} 0 0 1 ${n(end[0])} ${n(end[1])}`;
+  if (rx === ry) {
+    const r = rx;
+    return { kind: "arc", len: Math.PI / 2 * r, at: (u) => pt(a0deg + 90 * u), d };
+  }
+  const N = 24;
+  const poly = [];
+  for (let i = 0; i <= N; i++) poly.push(pt(a0deg + 90 * (i / N)));
+  return { kind: "arc", ...flattenedWalker(poly), d };
+}
+function roundedRectShape({ width, height, corners, inset = 0 }) {
+  const ox = inset;
+  const oy = inset;
+  const w = Math.max(0, width - 2 * inset);
+  const h = Math.max(0, height - 2 * inset);
+  if (w <= 0 || h <= 0) return { start: [ox, oy], segments: [] };
+  let c = corners.map(([rx, ry]) => [Math.max(0, rx - inset), Math.max(0, ry - inset)]);
+  const ratio = (avail, sum) => sum > 0 ? avail / sum : Infinity;
+  const f = Math.min(
+    1,
+    ratio(w, c[0][0] + c[1][0]),
+    // top:    rxTL + rxTR
+    ratio(w, c[3][0] + c[2][0]),
+    // bottom: rxBL + rxBR
+    ratio(h, c[0][1] + c[3][1]),
+    // left:   ryTL + ryBL
+    ratio(h, c[1][1] + c[2][1])
+    // right:  ryTR + ryBR
+  );
+  if (f < 1) c = c.map(([rx, ry]) => [rx * f, ry * f]);
+  c = c.map(([rx, ry]) => rx > 0 && ry > 0 ? [rx, ry] : [0, 0]);
+  const [[rxTL, ryTL], [rxTR, ryTR], [rxBR, ryBR], [rxBL, ryBL]] = c;
+  const start = [ox + rxTL, oy];
+  const segments = [];
+  segments.push(lineSeg([ox + rxTL, oy], [ox + w - rxTR, oy]));
+  if (rxTR > 0 && ryTR > 0)
+    segments.push(
+      cornerArcSeg({
+        cx: ox + w - rxTR,
+        cy: oy + ryTR,
+        rx: rxTR,
+        ry: ryTR,
+        a0deg: -90,
+        end: [ox + w, oy + ryTR]
+      })
+    );
+  segments.push(lineSeg([ox + w, oy + ryTR], [ox + w, oy + h - ryBR]));
+  if (rxBR > 0 && ryBR > 0)
+    segments.push(
+      cornerArcSeg({
+        cx: ox + w - rxBR,
+        cy: oy + h - ryBR,
+        rx: rxBR,
+        ry: ryBR,
+        a0deg: 0,
+        end: [ox + w - rxBR, oy + h]
+      })
+    );
+  segments.push(lineSeg([ox + w - rxBR, oy + h], [ox + rxBL, oy + h]));
+  if (rxBL > 0 && ryBL > 0)
+    segments.push(
+      cornerArcSeg({
+        cx: ox + rxBL,
+        cy: oy + h - ryBL,
+        rx: rxBL,
+        ry: ryBL,
+        a0deg: 90,
+        end: [ox, oy + h - ryBL]
+      })
+    );
+  segments.push(lineSeg([ox, oy + h - ryBL], [ox, oy + ryTL]));
+  if (rxTL > 0 && ryTL > 0)
+    segments.push(
+      cornerArcSeg({
+        cx: ox + rxTL,
+        cy: oy + ryTL,
+        rx: rxTL,
+        ry: ryTL,
+        a0deg: 180,
+        end: [ox + rxTL, oy]
+      })
+    );
+  return { start, segments };
+}
+function uniformCorners({ width, height, radius = 0, inset = 0 }) {
+  const c = [radius, radius];
+  return { width, height, inset, corners: [c, c, c, c] };
+}
+function roundedRectPath(dims) {
+  return tracePath(roundedRectShape(uniformCorners(dims)));
+}
+function roundedRectPerimeter(dims) {
+  return traceLength(roundedRectShape(uniformCorners(dims)));
+}
+function roundedRectSampler(dims) {
+  return traceSampler(roundedRectShape(uniformCorners(dims)));
+}
+export {
+  roundedRectPerimeter as a,
+  roundedRectSampler as b,
+  roundedRectPath as r
+};

package/dist/registry-FHKtTUGp.js

@@ -0,0 +1,48 @@
+function readParams(host) {
+  const cs = getComputedStyle(host);
+  const cssVar = (n) => cs.getPropertyValue(n).trim();
+  const pick = (varName, attr, def, parse = (x) => x) => {
+    const v = cssVar(varName);
+    if (v) return parse(v);
+    const a = host.getAttribute(attr);
+    return a != null ? parse(a) : def;
+  };
+  return {
+    color: pick("--border-wc-color", "color", "currentColor"),
+    thickness: pick("--border-wc-thickness", "thickness", 2, parseFloat),
+    speed: pick("--border-wc-speed", "speed", 1e3, parseFloat),
+    radius: pick("--border-wc-radius", "radius", null, parseFloat),
+    animate: host.hasAttribute("animate"),
+    mode: host.getAttribute("mode") || "center"
+  };
+}
+function reducedMotion(host) {
+  const m = host.getAttribute("motion");
+  if (m === "reduce") return true;
+  if (m === "force") return false;
+  return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function resolveRadius(host, params) {
+  if (Number.isFinite(params.radius)) return params.radius;
+  const r = parseFloat(getComputedStyle(host).borderTopLeftRadius);
+  return Number.isFinite(r) ? r : 0;
+}
+const EFFECTS = {
+  draw: () => import("./draw-CKnXGdb7.js").then((m) => m.createDraw),
+  squiggle: () => import("./squiggle-CJaR8E7M.js").then((m) => m.createSquiggle),
+  sparks: () => import("./sparks-CGHc4C2Y.js").then((m) => m.createSparks)
+};
+const EXTREME = Object.keys(EFFECTS);
+function styleHost(host) {
+  const cs = getComputedStyle(host);
+  if (cs.position === "static") host.style.position = "relative";
+  if (cs.display === "inline") host.style.display = "block";
+}
+export {
+  EFFECTS as E,
+  EXTREME as a,
+  reducedMotion as b,
+  resolveRadius as c,
+  readParams as r,
+  styleHost as s
+};

package/dist/sparks-CGHc4C2Y.js

@@ -0,0 +1,85 @@
+import { b as roundedRectSampler } from "./perimeter-B9myracn.js";
+import { c as resolveRadius } from "./registry-FHKtTUGp.js";
+let ctx;
+const cache = /* @__PURE__ */ new Map();
+function toRGBA(css) {
+  if (!css) return "rgba(0,0,0,0)";
+  const key = String(css).trim();
+  if (cache.has(key)) return cache.get(key);
+  if (!ctx) ctx = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = "#000";
+  ctx.fillStyle = key;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+  const out = a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
+  cache.set(key, out);
+  return out;
+}
+function createSparks(host, params) {
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("data-border-wc", "sparks");
+  Object.assign(canvas.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none"
+  });
+  host.appendChild(canvas);
+  const ctx2 = canvas.getContext("2d");
+  const color = toRGBA(
+    params.color === "currentColor" ? getComputedStyle(host).color : params.color
+  );
+  let sampler = () => [0, 0];
+  let dpr = 1;
+  const fit = () => {
+    const rect = host.getBoundingClientRect();
+    dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = Math.max(1, Math.round(rect.width * dpr));
+    canvas.height = Math.max(1, Math.round(rect.height * dpr));
+    sampler = roundedRectSampler({
+      width: rect.width,
+      height: rect.height,
+      radius: resolveRadius(host, params),
+      inset: params.thickness / 2
+    });
+  };
+  fit();
+  const N = 24;
+  const parts = Array.from({ length: N }, (_, i) => ({ t: i / N, v: 0.02 + Math.random() * 0.02 }));
+  let raf = 0;
+  const frame = () => {
+    ctx2.clearRect(0, 0, canvas.width, canvas.height);
+    ctx2.fillStyle = color;
+    const dt = params.reduce ? 0 : 1;
+    for (const p of parts) {
+      p.t = (p.t + p.v * 0.016 * dt) % 1;
+      const [x, y] = sampler(p.t);
+      ctx2.beginPath();
+      ctx2.arc(x * dpr, y * dpr, params.thickness * dpr, 0, Math.PI * 2);
+      ctx2.fill();
+    }
+    raf = params.reduce ? 0 : requestAnimationFrame(frame);
+  };
+  frame();
+  const io = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting && !raf && !params.reduce) raf = requestAnimationFrame(frame);
+    else if (!e.isIntersecting && raf) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+  });
+  io.observe(host);
+  const ro = new ResizeObserver(fit);
+  ro.observe(host);
+  return () => {
+    cancelAnimationFrame(raf);
+    io.disconnect();
+    ro.disconnect();
+    canvas.remove();
+  };
+}
+export {
+  createSparks
+};

package/dist/squiggle-CJaR8E7M.js

@@ -0,0 +1,62 @@
+import { r as roundedRectPath } from "./perimeter-B9myracn.js";
+import { c as resolveRadius } from "./registry-FHKtTUGp.js";
+const SVGNS = "http://www.w3.org/2000/svg";
+let uid = 0;
+function createSquiggle(host, params) {
+  const id = `bw-sq-${++uid}`;
+  const svg = document.createElementNS(SVGNS, "svg");
+  svg.setAttribute("data-border-wc", "squiggle");
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    overflow: "visible",
+    pointerEvents: "none"
+  });
+  svg.setAttribute("width", "100%");
+  svg.setAttribute("height", "100%");
+  svg.innerHTML = `<defs><filter id="${id}" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="1" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="6" xChannelSelector="R" yChannelSelector="G"/></filter></defs>`;
+  const path = document.createElementNS(SVGNS, "path");
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", params.color);
+  path.setAttribute("stroke-width", String(params.thickness));
+  path.setAttribute("filter", `url(#${id})`);
+  svg.appendChild(path);
+  host.appendChild(svg);
+  const turb = svg.querySelector("feTurbulence");
+  const fit = () => {
+    const rect = host.getBoundingClientRect();
+    path.setAttribute(
+      "d",
+      roundedRectPath({
+        width: rect.width,
+        height: rect.height,
+        radius: resolveRadius(host, params),
+        inset: params.thickness / 2
+      })
+    );
+  };
+  fit();
+  let raf = 0;
+  if (params.animate && !params.reduce) {
+    let seed = 1;
+    let last = 0;
+    const loop = (now) => {
+      if (now - last > params.speed / 8) {
+        turb.setAttribute("seed", String(seed = (seed + 1) % 100));
+        last = now;
+      }
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+  }
+  const ro = new ResizeObserver(fit);
+  ro.observe(host);
+  return () => {
+    cancelAnimationFrame(raf);
+    ro.disconnect();
+    svg.remove();
+  };
+}
+export {
+  createSquiggle
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@profpowell/border-wc",
+  "version": "0.1.0",
+  "description": "Light-DOM web component for high-touch border effects (squiggle, draw, sparks) the platform under-serves.",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/border-wc.js",
+  "module": "dist/border-wc.js",
+  "exports": {
+    ".": "./dist/border-wc.js",
+    "./attr": "./dist/data-border-effect.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "dist/border-wc.js",
+    "dist/data-border-effect.js"
+  ],
+  "customElements": "custom-elements.json",
+  "keywords": [
+    "web-component",
+    "custom-element",
+    "border",
+    "svg",
+    "canvas",
+    "vanilla-breeze"
+  ],
+  "author": "ProfPowell",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write \"src/**/*.js\"",
+    "format:check": "prettier --check \"src/**/*.js\"",
+    "analyze": "cem analyze",
+    "prepublishOnly": "npm run build && npm run analyze"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.60.0",
+    "eslint": "^10.4.0",
+    "prettier": "^3.8.3",
+    "vite": "^7.3.3"
+  }
+}