@whichly/core 0.1.0

package/README.md

@@ -0,0 +1,71 @@
+# @whichly/core
+
+Framework-agnostic DOM runtime for Whichly variant previews.
+
+`@whichly/core` scans server-rendered HTML for Whichly data attributes, keeps variant state in the URL, applies the active variant to the DOM, and renders the floating picker inside a Shadow DOM.
+
+It is intended for framework integrations such as `@whichly/astro`, but can also be used directly on any static or server-rendered page.
+
+## Install
+
+```sh
+npm i @whichly/core
+# or
+pnpm add @whichly/core
+```
+
+## Markup contract
+
+```html
+<div data-whichly-block="hero">
+  <div data-whichly-variant="simple">
+    <h1>Simple hero</h1>
+  </div>
+
+  <div data-whichly-variant="bold">
+    <h1>Bold hero</h1>
+  </div>
+</div>
+```
+
+The first variant is active by default. Active variants use `display: contents`; inactive variants use `display: none`.
+
+## Runtime
+
+```ts
+import { createWhichlyRuntime } from "@whichly/core";
+
+const runtime = createWhichlyRuntime();
+```
+
+Options:
+
+```ts
+createWhichlyRuntime({
+  floating: true,
+  param: "vp",
+  root: document,
+});
+```
+
+## URL state
+
+Variant selections are encoded in the URL:
+
+```txt
+?vp=hero:bold,pricing:enterprise
+```
+
+## API
+
+```ts
+runtime.scan();
+runtime.select("hero", "bold");
+runtime.reset("hero");
+runtime.subscribe(() => {
+  console.log(runtime.state);
+});
+runtime.destroy();
+```
+
+The runtime also observes DOM mutations, so blocks added later by islands or client-rendered components are picked up automatically.

package/dist/index.cjs

@@ -0,0 +1,284 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_URL_PARAM = "vp";
+function decodePart(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function encodePart(value) {
+  return encodeURIComponent(value);
+}
+function parseUrl(href = location.href, param = DEFAULT_URL_PARAM) {
+  try {
+    const raw = new URL(href).searchParams.get(param);
+    if (!raw) return {};
+    const state = {};
+    for (const pair of raw.split(",")) {
+      const idx = pair.indexOf(":");
+      if (idx <= 0) continue;
+      const block = decodePart(pair.slice(0, idx));
+      const variant = decodePart(pair.slice(idx + 1));
+      if (block && variant) state[block] = variant;
+    }
+    return state;
+  } catch {
+    return {};
+  }
+}
+function serializeUrl(state) {
+  return Object.entries(state).map(([block, variant]) => `${encodePart(block)}:${encodePart(variant)}`).join(",");
+}
+function syncURL(state, param = DEFAULT_URL_PARAM) {
+  try {
+    const url = new URL(location.href);
+    const serialized = serializeUrl(state);
+    if (serialized) {
+      url.searchParams.set(param, serialized);
+    } else {
+      url.searchParams.delete(param);
+    }
+    history.replaceState(history.state, "", url.toString());
+  } catch {
+  }
+}
+const BLOCK_SELECTOR = "[data-whichly-block], [data-vp-block]";
+const VARIANT_SELECTOR = "[data-whichly-variant], [data-vp-variant]";
+const pickerCss = `
+:host { all: initial; color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+* { box-sizing: border-box; }
+.whichly-wrap { position: fixed; left: 0; right: 0; bottom: 5vh; z-index: 2147483647; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
+.whichly-dock { pointer-events: auto; display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 14px; border-radius: 999px; background: #09090b; color: #fafafa; padding: 6px 8px 6px 16px; box-shadow: 0 16px 48px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); }
+.whichly-title { font-size: 14px; font-weight: 700; white-space: nowrap; }
+.whichly-list { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
+.whichly-list::-webkit-scrollbar { display: none; }
+.whichly-stepper { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: #18181b; padding: 4px 6px 4px 12px; }
+.whichly-block { max-width: 96px; overflow: hidden; padding-right: 6px; color: #a1a1aa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.whichly-current { min-width: 80px; max-width: 160px; overflow: hidden; padding: 0 2px; text-align: center; color: #fafafa; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+button { appearance: none; border: 0; border-radius: 999px; background: transparent; color: #fafafa; cursor: pointer; display: inline-grid; height: 28px; min-width: 28px; place-items: center; padding: 0 8px; font: inherit; }
+button:hover { background: rgba(255,255,255,.09); }
+button.whichly-reset:hover { background: rgba(239,68,68,.2); color: #fecaca; }
+button.whichly-collapse { flex-shrink: 0; }
+.whichly-fab { position: fixed; right: 16px; bottom: 5vh; z-index: 2147483647; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.1); background: #18181b; box-shadow: 0 16px 48px rgba(0,0,0,.35); pointer-events: auto; }
+@media (max-width: 640px) { .whichly-wrap { bottom: max(12px, env(safe-area-inset-bottom)); padding: 0 8px; } .whichly-title { display: none; } .whichly-dock { gap: 8px; padding: 8px; } .whichly-fab { bottom: max(12px, env(safe-area-inset-bottom)); } }
+`;
+function getBlockName(el) {
+  return el.dataset.whichlyBlock ?? el.dataset.vpBlock;
+}
+function getVariantName(el) {
+  return el.dataset.whichlyVariant ?? el.dataset.vpVariant;
+}
+function wrap(list, current, dir) {
+  const len = list.length;
+  if (len === 0) return current;
+  const idx = list.indexOf(current);
+  const start = idx === -1 ? 0 : idx;
+  return list[(start + dir + len) % len] ?? current;
+}
+function isNestedInOtherBlock(variant, block) {
+  var _a;
+  const parentBlock = (_a = variant.parentElement) == null ? void 0 : _a.closest(BLOCK_SELECTOR);
+  return parentBlock !== block;
+}
+function createWhichlyRuntime(options = {}) {
+  const root = options.root ?? document;
+  const param = options.param ?? DEFAULT_URL_PARAM;
+  const floating = options.floating ?? true;
+  const blocks = /* @__PURE__ */ new Map();
+  let state = typeof location === "undefined" ? {} : parseUrl(location.href, param);
+  const listeners = /* @__PURE__ */ new Set();
+  let observer;
+  let host;
+  let shadow;
+  let collapsed = false;
+  function emit() {
+    for (const listener of listeners) listener();
+  }
+  function getActive(block) {
+    const variants = blocks.get(block);
+    if (!variants || variants.length === 0) return void 0;
+    const preferred = state[block];
+    if (preferred && variants.includes(preferred)) return preferred;
+    return variants[0];
+  }
+  function applyState() {
+    for (const blockEl of root.querySelectorAll(BLOCK_SELECTOR)) {
+      const block = getBlockName(blockEl);
+      if (!block) continue;
+      const active = getActive(block);
+      for (const variantEl of blockEl.querySelectorAll(VARIANT_SELECTOR)) {
+        if (isNestedInOtherBlock(variantEl, blockEl)) continue;
+        const variant = getVariantName(variantEl);
+        variantEl.style.display = variant === active ? "contents" : "none";
+      }
+    }
+  }
+  function renderPicker() {
+    if (!shadow) return;
+    const existing = shadow.querySelector(".whichly-wrap, .whichly-fab");
+    existing == null ? void 0 : existing.remove();
+    if (blocks.size === 0) return;
+    if (collapsed) {
+      const button = document.createElement("button");
+      button.className = "whichly-fab";
+      button.type = "button";
+      button.setAttribute("aria-label", "Expand Whichly picker");
+      button.textContent = "⌁";
+      button.addEventListener("click", () => {
+        collapsed = false;
+        renderPicker();
+      });
+      shadow.appendChild(button);
+      return;
+    }
+    const wrapEl = document.createElement("div");
+    wrapEl.className = "whichly-wrap";
+    const dock = document.createElement("div");
+    dock.className = "whichly-dock";
+    dock.setAttribute("role", "toolbar");
+    dock.setAttribute("aria-label", "Whichly variant picker");
+    const title = document.createElement("div");
+    title.className = "whichly-title";
+    title.textContent = "Whichly";
+    dock.appendChild(title);
+    const list = document.createElement("div");
+    list.className = "whichly-list";
+    for (const [block, variants] of blocks) {
+      const current = getActive(block) ?? "";
+      const stepper = document.createElement("div");
+      stepper.className = "whichly-stepper";
+      const label = document.createElement("div");
+      label.className = "whichly-block";
+      label.title = block;
+      label.textContent = block;
+      stepper.appendChild(label);
+      const prev = document.createElement("button");
+      prev.type = "button";
+      prev.setAttribute("aria-label", `Previous ${block} variant`);
+      prev.textContent = "‹";
+      prev.addEventListener("click", () => runtime.select(block, wrap(variants, current, -1)));
+      stepper.appendChild(prev);
+      const value = document.createElement("div");
+      value.className = "whichly-current";
+      value.title = current;
+      value.setAttribute("aria-live", "polite");
+      value.textContent = current;
+      stepper.appendChild(value);
+      const next = document.createElement("button");
+      next.type = "button";
+      next.setAttribute("aria-label", `Next ${block} variant`);
+      next.textContent = "›";
+      next.addEventListener("click", () => runtime.select(block, wrap(variants, current, 1)));
+      stepper.appendChild(next);
+      const reset = document.createElement("button");
+      reset.type = "button";
+      reset.className = "whichly-reset";
+      reset.setAttribute("aria-label", `Reset ${block} variant`);
+      reset.textContent = "↺";
+      reset.addEventListener("click", () => runtime.reset(block));
+      stepper.appendChild(reset);
+      list.appendChild(stepper);
+    }
+    dock.appendChild(list);
+    const collapse = document.createElement("button");
+    collapse.type = "button";
+    collapse.className = "whichly-collapse";
+    collapse.setAttribute("aria-label", "Minimize picker");
+    collapse.textContent = "−";
+    collapse.addEventListener("click", () => {
+      collapsed = true;
+      renderPicker();
+    });
+    dock.appendChild(collapse);
+    wrapEl.appendChild(dock);
+    shadow.appendChild(wrapEl);
+  }
+  function scan() {
+    blocks.clear();
+    for (const blockEl of root.querySelectorAll(BLOCK_SELECTOR)) {
+      const block = getBlockName(blockEl);
+      if (!block) continue;
+      const variants = blocks.get(block) ?? [];
+      for (const variantEl of blockEl.querySelectorAll(VARIANT_SELECTOR)) {
+        if (isNestedInOtherBlock(variantEl, blockEl)) continue;
+        const variant = getVariantName(variantEl);
+        if (variant && !variants.includes(variant)) variants.push(variant);
+      }
+      if (variants.length > 0) blocks.set(block, variants);
+    }
+    applyState();
+    renderPicker();
+    emit();
+  }
+  const runtime = {
+    get blocks() {
+      return new Map(blocks);
+    },
+    get state() {
+      return { ...state };
+    },
+    scan,
+    select(block, variant) {
+      var _a;
+      if (!((_a = blocks.get(block)) == null ? void 0 : _a.includes(variant))) return;
+      state = { ...state, [block]: variant };
+      syncURL(state, param);
+      applyState();
+      renderPicker();
+      emit();
+    },
+    reset(block) {
+      var _a;
+      const first = (_a = blocks.get(block)) == null ? void 0 : _a[0];
+      if (!first) return;
+      state = { ...state, [block]: first };
+      syncURL(state, param);
+      applyState();
+      renderPicker();
+      emit();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    destroy() {
+      observer == null ? void 0 : observer.disconnect();
+      host == null ? void 0 : host.remove();
+      listeners.clear();
+      blocks.clear();
+    }
+  };
+  if (floating && typeof document !== "undefined") {
+    host = document.createElement("div");
+    host.id = "__whichly_picker_host";
+    shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = pickerCss;
+    shadow.appendChild(style);
+    document.body.appendChild(host);
+  }
+  scan();
+  if (typeof MutationObserver !== "undefined") {
+    observer = new MutationObserver(() => scan());
+    observer.observe(root, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: [
+        "data-whichly-block",
+        "data-whichly-variant",
+        "data-vp-block",
+        "data-vp-variant"
+      ]
+    });
+  }
+  return runtime;
+}
+exports.DEFAULT_URL_PARAM = DEFAULT_URL_PARAM;
+exports.createWhichlyRuntime = createWhichlyRuntime;
+exports.parseUrl = parseUrl;
+exports.serializeUrl = serializeUrl;
+exports.syncURL = syncURL;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/url.ts","../src/runtime.ts"],"sourcesContent":["export type State = Record<string, string>;\n\nexport const DEFAULT_URL_PARAM = \"vp\";\n\nfunction decodePart(value: string): string {\n  try {\n    return decodeURIComponent(value);\n  } catch {\n    return value;\n  }\n}\n\nfunction encodePart(value: string): string {\n  return encodeURIComponent(value);\n}\n\nexport function parseUrl(href: string = location.href, param = DEFAULT_URL_PARAM): State {\n  try {\n    const raw = new URL(href).searchParams.get(param);\n    if (!raw) return {};\n\n    const state: State = {};\n    for (const pair of raw.split(\",\")) {\n      const idx = pair.indexOf(\":\");\n      if (idx <= 0) continue;\n      const block = decodePart(pair.slice(0, idx));\n      const variant = decodePart(pair.slice(idx + 1));\n      if (block && variant) state[block] = variant;\n    }\n    return state;\n  } catch {\n    return {};\n  }\n}\n\nexport function serializeUrl(state: State): string {\n  return Object.entries(state)\n    .map(([block, variant]) => `${encodePart(block)}:${encodePart(variant)}`)\n    .join(\",\");\n}\n\nexport function syncURL(state: State, param = DEFAULT_URL_PARAM): void {\n  try {\n    const url = new URL(location.href);\n    const serialized = serializeUrl(state);\n    if (serialized) {\n      url.searchParams.set(param, serialized);\n    } else {\n      url.searchParams.delete(param);\n    }\n    history.replaceState(history.state, \"\", url.toString());\n  } catch {\n    // location can be cross-origin restricted in sandboxed iframes; ignore\n  }\n}\n","import { DEFAULT_URL_PARAM, type State, parseUrl, syncURL } from \"./url\";\n\nexport interface WhichlyRuntimeOptions {\n  root?: ParentNode;\n  floating?: boolean;\n  param?: string;\n}\n\nexport interface WhichlyRuntime {\n  readonly blocks: Map<string, string[]>;\n  readonly state: State;\n  scan(): void;\n  select(block: string, variant: string): void;\n  reset(block: string): void;\n  subscribe(listener: () => void): () => void;\n  destroy(): void;\n}\n\ntype Listener = () => void;\n\nconst BLOCK_SELECTOR = \"[data-whichly-block], [data-vp-block]\";\nconst VARIANT_SELECTOR = \"[data-whichly-variant], [data-vp-variant]\";\n\nconst pickerCss = `\n:host { all: initial; color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; }\n* { box-sizing: border-box; }\n.whichly-wrap { position: fixed; left: 0; right: 0; bottom: 5vh; z-index: 2147483647; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }\n.whichly-dock { pointer-events: auto; display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 14px; border-radius: 999px; background: #09090b; color: #fafafa; padding: 6px 8px 6px 16px; box-shadow: 0 16px 48px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); }\n.whichly-title { font-size: 14px; font-weight: 700; white-space: nowrap; }\n.whichly-list { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }\n.whichly-list::-webkit-scrollbar { display: none; }\n.whichly-stepper { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: #18181b; padding: 4px 6px 4px 12px; }\n.whichly-block { max-width: 96px; overflow: hidden; padding-right: 6px; color: #a1a1aa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }\n.whichly-current { min-width: 80px; max-width: 160px; overflow: hidden; padding: 0 2px; text-align: center; color: #fafafa; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }\nbutton { appearance: none; border: 0; border-radius: 999px; background: transparent; color: #fafafa; cursor: pointer; display: inline-grid; height: 28px; min-width: 28px; place-items: center; padding: 0 8px; font: inherit; }\nbutton:hover { background: rgba(255,255,255,.09); }\nbutton.whichly-reset:hover { background: rgba(239,68,68,.2); color: #fecaca; }\nbutton.whichly-collapse { flex-shrink: 0; }\n.whichly-fab { position: fixed; right: 16px; bottom: 5vh; z-index: 2147483647; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.1); background: #18181b; box-shadow: 0 16px 48px rgba(0,0,0,.35); pointer-events: auto; }\n@media (max-width: 640px) { .whichly-wrap { bottom: max(12px, env(safe-area-inset-bottom)); padding: 0 8px; } .whichly-title { display: none; } .whichly-dock { gap: 8px; padding: 8px; } .whichly-fab { bottom: max(12px, env(safe-area-inset-bottom)); } }\n`;\n\nfunction getBlockName(el: Element): string | undefined {\n  return (el as HTMLElement).dataset.whichlyBlock ?? (el as HTMLElement).dataset.vpBlock;\n}\n\nfunction getVariantName(el: Element): string | undefined {\n  return (el as HTMLElement).dataset.whichlyVariant ?? (el as HTMLElement).dataset.vpVariant;\n}\n\nfunction wrap(list: string[], current: string, dir: 1 | -1): string {\n  const len = list.length;\n  if (len === 0) return current;\n  const idx = list.indexOf(current);\n  const start = idx === -1 ? 0 : idx;\n  return list[(start + dir + len) % len] ?? current;\n}\n\nfunction isNestedInOtherBlock(variant: Element, block: Element): boolean {\n  const parentBlock = variant.parentElement?.closest(BLOCK_SELECTOR);\n  return parentBlock !== block;\n}\n\nexport function createWhichlyRuntime(options: WhichlyRuntimeOptions = {}): WhichlyRuntime {\n  const root = options.root ?? document;\n  const param = options.param ?? DEFAULT_URL_PARAM;\n  const floating = options.floating ?? true;\n  const blocks = new Map<string, string[]>();\n  let state: State = typeof location === \"undefined\" ? {} : parseUrl(location.href, param);\n  const listeners = new Set<Listener>();\n  let observer: MutationObserver | undefined;\n  let host: HTMLDivElement | undefined;\n  let shadow: ShadowRoot | undefined;\n  let collapsed = false;\n\n  function emit(): void {\n    for (const listener of listeners) listener();\n  }\n\n  function getActive(block: string): string | undefined {\n    const variants = blocks.get(block);\n    if (!variants || variants.length === 0) return undefined;\n    const preferred = state[block];\n    if (preferred && variants.includes(preferred)) return preferred;\n    return variants[0];\n  }\n\n  function applyState(): void {\n    for (const blockEl of root.querySelectorAll<HTMLElement>(BLOCK_SELECTOR)) {\n      const block = getBlockName(blockEl);\n      if (!block) continue;\n      const active = getActive(block);\n      for (const variantEl of blockEl.querySelectorAll<HTMLElement>(VARIANT_SELECTOR)) {\n        if (isNestedInOtherBlock(variantEl, blockEl)) continue;\n        const variant = getVariantName(variantEl);\n        variantEl.style.display = variant === active ? \"contents\" : \"none\";\n      }\n    }\n  }\n\n  function renderPicker(): void {\n    if (!shadow) return;\n    const existing = shadow.querySelector(\".whichly-wrap, .whichly-fab\");\n    existing?.remove();\n\n    if (blocks.size === 0) return;\n\n    if (collapsed) {\n      const button = document.createElement(\"button\");\n      button.className = \"whichly-fab\";\n      button.type = \"button\";\n      button.setAttribute(\"aria-label\", \"Expand Whichly picker\");\n      button.textContent = \"⌁\";\n      button.addEventListener(\"click\", () => {\n        collapsed = false;\n        renderPicker();\n      });\n      shadow.appendChild(button);\n      return;\n    }\n\n    const wrapEl = document.createElement(\"div\");\n    wrapEl.className = \"whichly-wrap\";\n\n    const dock = document.createElement(\"div\");\n    dock.className = \"whichly-dock\";\n    dock.setAttribute(\"role\", \"toolbar\");\n    dock.setAttribute(\"aria-label\", \"Whichly variant picker\");\n\n    const title = document.createElement(\"div\");\n    title.className = \"whichly-title\";\n    title.textContent = \"Whichly\";\n    dock.appendChild(title);\n\n    const list = document.createElement(\"div\");\n    list.className = \"whichly-list\";\n\n    for (const [block, variants] of blocks) {\n      const current = getActive(block) ?? \"\";\n      const stepper = document.createElement(\"div\");\n      stepper.className = \"whichly-stepper\";\n\n      const label = document.createElement(\"div\");\n      label.className = \"whichly-block\";\n      label.title = block;\n      label.textContent = block;\n      stepper.appendChild(label);\n\n      const prev = document.createElement(\"button\");\n      prev.type = \"button\";\n      prev.setAttribute(\"aria-label\", `Previous ${block} variant`);\n      prev.textContent = \"‹\";\n      prev.addEventListener(\"click\", () => runtime.select(block, wrap(variants, current, -1)));\n      stepper.appendChild(prev);\n\n      const value = document.createElement(\"div\");\n      value.className = \"whichly-current\";\n      value.title = current;\n      value.setAttribute(\"aria-live\", \"polite\");\n      value.textContent = current;\n      stepper.appendChild(value);\n\n      const next = document.createElement(\"button\");\n      next.type = \"button\";\n      next.setAttribute(\"aria-label\", `Next ${block} variant`);\n      next.textContent = \"›\";\n      next.addEventListener(\"click\", () => runtime.select(block, wrap(variants, current, 1)));\n      stepper.appendChild(next);\n\n      const reset = document.createElement(\"button\");\n      reset.type = \"button\";\n      reset.className = \"whichly-reset\";\n      reset.setAttribute(\"aria-label\", `Reset ${block} variant`);\n      reset.textContent = \"↺\";\n      reset.addEventListener(\"click\", () => runtime.reset(block));\n      stepper.appendChild(reset);\n\n      list.appendChild(stepper);\n    }\n\n    dock.appendChild(list);\n\n    const collapse = document.createElement(\"button\");\n    collapse.type = \"button\";\n    collapse.className = \"whichly-collapse\";\n    collapse.setAttribute(\"aria-label\", \"Minimize picker\");\n    collapse.textContent = \"−\";\n    collapse.addEventListener(\"click\", () => {\n      collapsed = true;\n      renderPicker();\n    });\n    dock.appendChild(collapse);\n\n    wrapEl.appendChild(dock);\n    shadow.appendChild(wrapEl);\n  }\n\n  function scan(): void {\n    blocks.clear();\n    for (const blockEl of root.querySelectorAll<HTMLElement>(BLOCK_SELECTOR)) {\n      const block = getBlockName(blockEl);\n      if (!block) continue;\n      const variants = blocks.get(block) ?? [];\n      for (const variantEl of blockEl.querySelectorAll<HTMLElement>(VARIANT_SELECTOR)) {\n        if (isNestedInOtherBlock(variantEl, blockEl)) continue;\n        const variant = getVariantName(variantEl);\n        if (variant && !variants.includes(variant)) variants.push(variant);\n      }\n      if (variants.length > 0) blocks.set(block, variants);\n    }\n    applyState();\n    renderPicker();\n    emit();\n  }\n\n  const runtime: WhichlyRuntime = {\n    get blocks() {\n      return new Map(blocks);\n    },\n    get state() {\n      return { ...state };\n    },\n    scan,\n    select(block, variant) {\n      if (!blocks.get(block)?.includes(variant)) return;\n      state = { ...state, [block]: variant };\n      syncURL(state, param);\n      applyState();\n      renderPicker();\n      emit();\n    },\n    reset(block) {\n      const first = blocks.get(block)?.[0];\n      if (!first) return;\n      state = { ...state, [block]: first };\n      syncURL(state, param);\n      applyState();\n      renderPicker();\n      emit();\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    destroy() {\n      observer?.disconnect();\n      host?.remove();\n      listeners.clear();\n      blocks.clear();\n    },\n  };\n\n  if (floating && typeof document !== \"undefined\") {\n    host = document.createElement(\"div\");\n    host.id = \"__whichly_picker_host\";\n    shadow = host.attachShadow({ mode: \"open\" });\n    const style = document.createElement(\"style\");\n    style.textContent = pickerCss;\n    shadow.appendChild(style);\n    document.body.appendChild(host);\n  }\n\n  scan();\n\n  if (typeof MutationObserver !== \"undefined\") {\n    observer = new MutationObserver(() => scan());\n    observer.observe(root, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\n        \"data-whichly-block\",\n        \"data-whichly-variant\",\n        \"data-vp-block\",\n        \"data-vp-variant\",\n      ],\n    });\n  }\n\n  return runtime;\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export declare function createWhichlyRuntime(options?: WhichlyRuntimeOptions): WhichlyRuntime;
+
+export declare const DEFAULT_URL_PARAM = "vp";
+
+export declare function parseUrl(href?: string, param?: string): State;
+
+export declare function serializeUrl(state: State): string;
+
+export declare type State = Record<string, string>;
+
+export declare function syncURL(state: State, param?: string): void;
+
+export declare interface WhichlyRuntime {
+    readonly blocks: Map<string, string[]>;
+    readonly state: State;
+    scan(): void;
+    select(block: string, variant: string): void;
+    reset(block: string): void;
+    subscribe(listener: () => void): () => void;
+    destroy(): void;
+}
+
+export declare interface WhichlyRuntimeOptions {
+    root?: ParentNode;
+    floating?: boolean;
+    param?: string;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,284 @@
+const DEFAULT_URL_PARAM = "vp";
+function decodePart(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function encodePart(value) {
+  return encodeURIComponent(value);
+}
+function parseUrl(href = location.href, param = DEFAULT_URL_PARAM) {
+  try {
+    const raw = new URL(href).searchParams.get(param);
+    if (!raw) return {};
+    const state = {};
+    for (const pair of raw.split(",")) {
+      const idx = pair.indexOf(":");
+      if (idx <= 0) continue;
+      const block = decodePart(pair.slice(0, idx));
+      const variant = decodePart(pair.slice(idx + 1));
+      if (block && variant) state[block] = variant;
+    }
+    return state;
+  } catch {
+    return {};
+  }
+}
+function serializeUrl(state) {
+  return Object.entries(state).map(([block, variant]) => `${encodePart(block)}:${encodePart(variant)}`).join(",");
+}
+function syncURL(state, param = DEFAULT_URL_PARAM) {
+  try {
+    const url = new URL(location.href);
+    const serialized = serializeUrl(state);
+    if (serialized) {
+      url.searchParams.set(param, serialized);
+    } else {
+      url.searchParams.delete(param);
+    }
+    history.replaceState(history.state, "", url.toString());
+  } catch {
+  }
+}
+const BLOCK_SELECTOR = "[data-whichly-block], [data-vp-block]";
+const VARIANT_SELECTOR = "[data-whichly-variant], [data-vp-variant]";
+const pickerCss = `
+:host { all: initial; color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+* { box-sizing: border-box; }
+.whichly-wrap { position: fixed; left: 0; right: 0; bottom: 5vh; z-index: 2147483647; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
+.whichly-dock { pointer-events: auto; display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 14px; border-radius: 999px; background: #09090b; color: #fafafa; padding: 6px 8px 6px 16px; box-shadow: 0 16px 48px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); }
+.whichly-title { font-size: 14px; font-weight: 700; white-space: nowrap; }
+.whichly-list { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
+.whichly-list::-webkit-scrollbar { display: none; }
+.whichly-stepper { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: #18181b; padding: 4px 6px 4px 12px; }
+.whichly-block { max-width: 96px; overflow: hidden; padding-right: 6px; color: #a1a1aa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.whichly-current { min-width: 80px; max-width: 160px; overflow: hidden; padding: 0 2px; text-align: center; color: #fafafa; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+button { appearance: none; border: 0; border-radius: 999px; background: transparent; color: #fafafa; cursor: pointer; display: inline-grid; height: 28px; min-width: 28px; place-items: center; padding: 0 8px; font: inherit; }
+button:hover { background: rgba(255,255,255,.09); }
+button.whichly-reset:hover { background: rgba(239,68,68,.2); color: #fecaca; }
+button.whichly-collapse { flex-shrink: 0; }
+.whichly-fab { position: fixed; right: 16px; bottom: 5vh; z-index: 2147483647; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.1); background: #18181b; box-shadow: 0 16px 48px rgba(0,0,0,.35); pointer-events: auto; }
+@media (max-width: 640px) { .whichly-wrap { bottom: max(12px, env(safe-area-inset-bottom)); padding: 0 8px; } .whichly-title { display: none; } .whichly-dock { gap: 8px; padding: 8px; } .whichly-fab { bottom: max(12px, env(safe-area-inset-bottom)); } }
+`;
+function getBlockName(el) {
+  return el.dataset.whichlyBlock ?? el.dataset.vpBlock;
+}
+function getVariantName(el) {
+  return el.dataset.whichlyVariant ?? el.dataset.vpVariant;
+}
+function wrap(list, current, dir) {
+  const len = list.length;
+  if (len === 0) return current;
+  const idx = list.indexOf(current);
+  const start = idx === -1 ? 0 : idx;
+  return list[(start + dir + len) % len] ?? current;
+}
+function isNestedInOtherBlock(variant, block) {
+  var _a;
+  const parentBlock = (_a = variant.parentElement) == null ? void 0 : _a.closest(BLOCK_SELECTOR);
+  return parentBlock !== block;
+}
+function createWhichlyRuntime(options = {}) {
+  const root = options.root ?? document;
+  const param = options.param ?? DEFAULT_URL_PARAM;
+  const floating = options.floating ?? true;
+  const blocks = /* @__PURE__ */ new Map();
+  let state = typeof location === "undefined" ? {} : parseUrl(location.href, param);
+  const listeners = /* @__PURE__ */ new Set();
+  let observer;
+  let host;
+  let shadow;
+  let collapsed = false;
+  function emit() {
+    for (const listener of listeners) listener();
+  }
+  function getActive(block) {
+    const variants = blocks.get(block);
+    if (!variants || variants.length === 0) return void 0;
+    const preferred = state[block];
+    if (preferred && variants.includes(preferred)) return preferred;
+    return variants[0];
+  }
+  function applyState() {
+    for (const blockEl of root.querySelectorAll(BLOCK_SELECTOR)) {
+      const block = getBlockName(blockEl);
+      if (!block) continue;
+      const active = getActive(block);
+      for (const variantEl of blockEl.querySelectorAll(VARIANT_SELECTOR)) {
+        if (isNestedInOtherBlock(variantEl, blockEl)) continue;
+        const variant = getVariantName(variantEl);
+        variantEl.style.display = variant === active ? "contents" : "none";
+      }
+    }
+  }
+  function renderPicker() {
+    if (!shadow) return;
+    const existing = shadow.querySelector(".whichly-wrap, .whichly-fab");
+    existing == null ? void 0 : existing.remove();
+    if (blocks.size === 0) return;
+    if (collapsed) {
+      const button = document.createElement("button");
+      button.className = "whichly-fab";
+      button.type = "button";
+      button.setAttribute("aria-label", "Expand Whichly picker");
+      button.textContent = "⌁";
+      button.addEventListener("click", () => {
+        collapsed = false;
+        renderPicker();
+      });
+      shadow.appendChild(button);
+      return;
+    }
+    const wrapEl = document.createElement("div");
+    wrapEl.className = "whichly-wrap";
+    const dock = document.createElement("div");
+    dock.className = "whichly-dock";
+    dock.setAttribute("role", "toolbar");
+    dock.setAttribute("aria-label", "Whichly variant picker");
+    const title = document.createElement("div");
+    title.className = "whichly-title";
+    title.textContent = "Whichly";
+    dock.appendChild(title);
+    const list = document.createElement("div");
+    list.className = "whichly-list";
+    for (const [block, variants] of blocks) {
+      const current = getActive(block) ?? "";
+      const stepper = document.createElement("div");
+      stepper.className = "whichly-stepper";
+      const label = document.createElement("div");
+      label.className = "whichly-block";
+      label.title = block;
+      label.textContent = block;
+      stepper.appendChild(label);
+      const prev = document.createElement("button");
+      prev.type = "button";
+      prev.setAttribute("aria-label", `Previous ${block} variant`);
+      prev.textContent = "‹";
+      prev.addEventListener("click", () => runtime.select(block, wrap(variants, current, -1)));
+      stepper.appendChild(prev);
+      const value = document.createElement("div");
+      value.className = "whichly-current";
+      value.title = current;
+      value.setAttribute("aria-live", "polite");
+      value.textContent = current;
+      stepper.appendChild(value);
+      const next = document.createElement("button");
+      next.type = "button";
+      next.setAttribute("aria-label", `Next ${block} variant`);
+      next.textContent = "›";
+      next.addEventListener("click", () => runtime.select(block, wrap(variants, current, 1)));
+      stepper.appendChild(next);
+      const reset = document.createElement("button");
+      reset.type = "button";
+      reset.className = "whichly-reset";
+      reset.setAttribute("aria-label", `Reset ${block} variant`);
+      reset.textContent = "↺";
+      reset.addEventListener("click", () => runtime.reset(block));
+      stepper.appendChild(reset);
+      list.appendChild(stepper);
+    }
+    dock.appendChild(list);
+    const collapse = document.createElement("button");
+    collapse.type = "button";
+    collapse.className = "whichly-collapse";
+    collapse.setAttribute("aria-label", "Minimize picker");
+    collapse.textContent = "−";
+    collapse.addEventListener("click", () => {
+      collapsed = true;
+      renderPicker();
+    });
+    dock.appendChild(collapse);
+    wrapEl.appendChild(dock);
+    shadow.appendChild(wrapEl);
+  }
+  function scan() {
+    blocks.clear();
+    for (const blockEl of root.querySelectorAll(BLOCK_SELECTOR)) {
+      const block = getBlockName(blockEl);
+      if (!block) continue;
+      const variants = blocks.get(block) ?? [];
+      for (const variantEl of blockEl.querySelectorAll(VARIANT_SELECTOR)) {
+        if (isNestedInOtherBlock(variantEl, blockEl)) continue;
+        const variant = getVariantName(variantEl);
+        if (variant && !variants.includes(variant)) variants.push(variant);
+      }
+      if (variants.length > 0) blocks.set(block, variants);
+    }
+    applyState();
+    renderPicker();
+    emit();
+  }
+  const runtime = {
+    get blocks() {
+      return new Map(blocks);
+    },
+    get state() {
+      return { ...state };
+    },
+    scan,
+    select(block, variant) {
+      var _a;
+      if (!((_a = blocks.get(block)) == null ? void 0 : _a.includes(variant))) return;
+      state = { ...state, [block]: variant };
+      syncURL(state, param);
+      applyState();
+      renderPicker();
+      emit();
+    },
+    reset(block) {
+      var _a;
+      const first = (_a = blocks.get(block)) == null ? void 0 : _a[0];
+      if (!first) return;
+      state = { ...state, [block]: first };
+      syncURL(state, param);
+      applyState();
+      renderPicker();
+      emit();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    destroy() {
+      observer == null ? void 0 : observer.disconnect();
+      host == null ? void 0 : host.remove();
+      listeners.clear();
+      blocks.clear();
+    }
+  };
+  if (floating && typeof document !== "undefined") {
+    host = document.createElement("div");
+    host.id = "__whichly_picker_host";
+    shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = pickerCss;
+    shadow.appendChild(style);
+    document.body.appendChild(host);
+  }
+  scan();
+  if (typeof MutationObserver !== "undefined") {
+    observer = new MutationObserver(() => scan());
+    observer.observe(root, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: [
+        "data-whichly-block",
+        "data-whichly-variant",
+        "data-vp-block",
+        "data-vp-variant"
+      ]
+    });
+  }
+  return runtime;
+}
+export {
+  DEFAULT_URL_PARAM,
+  createWhichlyRuntime,
+  parseUrl,
+  serializeUrl,
+  syncURL
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/url.ts","../src/runtime.ts"],"sourcesContent":["export type State = Record<string, string>;\n\nexport const DEFAULT_URL_PARAM = \"vp\";\n\nfunction decodePart(value: string): string {\n  try {\n    return decodeURIComponent(value);\n  } catch {\n    return value;\n  }\n}\n\nfunction encodePart(value: string): string {\n  return encodeURIComponent(value);\n}\n\nexport function parseUrl(href: string = location.href, param = DEFAULT_URL_PARAM): State {\n  try {\n    const raw = new URL(href).searchParams.get(param);\n    if (!raw) return {};\n\n    const state: State = {};\n    for (const pair of raw.split(\",\")) {\n      const idx = pair.indexOf(\":\");\n      if (idx <= 0) continue;\n      const block = decodePart(pair.slice(0, idx));\n      const variant = decodePart(pair.slice(idx + 1));\n      if (block && variant) state[block] = variant;\n    }\n    return state;\n  } catch {\n    return {};\n  }\n}\n\nexport function serializeUrl(state: State): string {\n  return Object.entries(state)\n    .map(([block, variant]) => `${encodePart(block)}:${encodePart(variant)}`)\n    .join(\",\");\n}\n\nexport function syncURL(state: State, param = DEFAULT_URL_PARAM): void {\n  try {\n    const url = new URL(location.href);\n    const serialized = serializeUrl(state);\n    if (serialized) {\n      url.searchParams.set(param, serialized);\n    } else {\n      url.searchParams.delete(param);\n    }\n    history.replaceState(history.state, \"\", url.toString());\n  } catch {\n    // location can be cross-origin restricted in sandboxed iframes; ignore\n  }\n}\n","import { DEFAULT_URL_PARAM, type State, parseUrl, syncURL } from \"./url\";\n\nexport interface WhichlyRuntimeOptions {\n  root?: ParentNode;\n  floating?: boolean;\n  param?: string;\n}\n\nexport interface WhichlyRuntime {\n  readonly blocks: Map<string, string[]>;\n  readonly state: State;\n  scan(): void;\n  select(block: string, variant: string): void;\n  reset(block: string): void;\n  subscribe(listener: () => void): () => void;\n  destroy(): void;\n}\n\ntype Listener = () => void;\n\nconst BLOCK_SELECTOR = \"[data-whichly-block], [data-vp-block]\";\nconst VARIANT_SELECTOR = \"[data-whichly-variant], [data-vp-variant]\";\n\nconst pickerCss = `\n:host { all: initial; color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; }\n* { box-sizing: border-box; }\n.whichly-wrap { position: fixed; left: 0; right: 0; bottom: 5vh; z-index: 2147483647; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }\n.whichly-dock { pointer-events: auto; display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 14px; border-radius: 999px; background: #09090b; color: #fafafa; padding: 6px 8px 6px 16px; box-shadow: 0 16px 48px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); }\n.whichly-title { font-size: 14px; font-weight: 700; white-space: nowrap; }\n.whichly-list { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }\n.whichly-list::-webkit-scrollbar { display: none; }\n.whichly-stepper { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: #18181b; padding: 4px 6px 4px 12px; }\n.whichly-block { max-width: 96px; overflow: hidden; padding-right: 6px; color: #a1a1aa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }\n.whichly-current { min-width: 80px; max-width: 160px; overflow: hidden; padding: 0 2px; text-align: center; color: #fafafa; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }\nbutton { appearance: none; border: 0; border-radius: 999px; background: transparent; color: #fafafa; cursor: pointer; display: inline-grid; height: 28px; min-width: 28px; place-items: center; padding: 0 8px; font: inherit; }\nbutton:hover { background: rgba(255,255,255,.09); }\nbutton.whichly-reset:hover { background: rgba(239,68,68,.2); color: #fecaca; }\nbutton.whichly-collapse { flex-shrink: 0; }\n.whichly-fab { position: fixed; right: 16px; bottom: 5vh; z-index: 2147483647; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.1); background: #18181b; box-shadow: 0 16px 48px rgba(0,0,0,.35); pointer-events: auto; }\n@media (max-width: 640px) { .whichly-wrap { bottom: max(12px, env(safe-area-inset-bottom)); padding: 0 8px; } .whichly-title { display: none; } .whichly-dock { gap: 8px; padding: 8px; } .whichly-fab { bottom: max(12px, env(safe-area-inset-bottom)); } }\n`;\n\nfunction getBlockName(el: Element): string | undefined {\n  return (el as HTMLElement).dataset.whichlyBlock ?? (el as HTMLElement).dataset.vpBlock;\n}\n\nfunction getVariantName(el: Element): string | undefined {\n  return (el as HTMLElement).dataset.whichlyVariant ?? (el as HTMLElement).dataset.vpVariant;\n}\n\nfunction wrap(list: string[], current: string, dir: 1 | -1): string {\n  const len = list.length;\n  if (len === 0) return current;\n  const idx = list.indexOf(current);\n  const start = idx === -1 ? 0 : idx;\n  return list[(start + dir + len) % len] ?? current;\n}\n\nfunction isNestedInOtherBlock(variant: Element, block: Element): boolean {\n  const parentBlock = variant.parentElement?.closest(BLOCK_SELECTOR);\n  return parentBlock !== block;\n}\n\nexport function createWhichlyRuntime(options: WhichlyRuntimeOptions = {}): WhichlyRuntime {\n  const root = options.root ?? document;\n  const param = options.param ?? DEFAULT_URL_PARAM;\n  const floating = options.floating ?? true;\n  const blocks = new Map<string, string[]>();\n  let state: State = typeof location === \"undefined\" ? {} : parseUrl(location.href, param);\n  const listeners = new Set<Listener>();\n  let observer: MutationObserver | undefined;\n  let host: HTMLDivElement | undefined;\n  let shadow: ShadowRoot | undefined;\n  let collapsed = false;\n\n  function emit(): void {\n    for (const listener of listeners) listener();\n  }\n\n  function getActive(block: string): string | undefined {\n    const variants = blocks.get(block);\n    if (!variants || variants.length === 0) return undefined;\n    const preferred = state[block];\n    if (preferred && variants.includes(preferred)) return preferred;\n    return variants[0];\n  }\n\n  function applyState(): void {\n    for (const blockEl of root.querySelectorAll<HTMLElement>(BLOCK_SELECTOR)) {\n      const block = getBlockName(blockEl);\n      if (!block) continue;\n      const active = getActive(block);\n      for (const variantEl of blockEl.querySelectorAll<HTMLElement>(VARIANT_SELECTOR)) {\n        if (isNestedInOtherBlock(variantEl, blockEl)) continue;\n        const variant = getVariantName(variantEl);\n        variantEl.style.display = variant === active ? \"contents\" : \"none\";\n      }\n    }\n  }\n\n  function renderPicker(): void {\n    if (!shadow) return;\n    const existing = shadow.querySelector(\".whichly-wrap, .whichly-fab\");\n    existing?.remove();\n\n    if (blocks.size === 0) return;\n\n    if (collapsed) {\n      const button = document.createElement(\"button\");\n      button.className = \"whichly-fab\";\n      button.type = \"button\";\n      button.setAttribute(\"aria-label\", \"Expand Whichly picker\");\n      button.textContent = \"⌁\";\n      button.addEventListener(\"click\", () => {\n        collapsed = false;\n        renderPicker();\n      });\n      shadow.appendChild(button);\n      return;\n    }\n\n    const wrapEl = document.createElement(\"div\");\n    wrapEl.className = \"whichly-wrap\";\n\n    const dock = document.createElement(\"div\");\n    dock.className = \"whichly-dock\";\n    dock.setAttribute(\"role\", \"toolbar\");\n    dock.setAttribute(\"aria-label\", \"Whichly variant picker\");\n\n    const title = document.createElement(\"div\");\n    title.className = \"whichly-title\";\n    title.textContent = \"Whichly\";\n    dock.appendChild(title);\n\n    const list = document.createElement(\"div\");\n    list.className = \"whichly-list\";\n\n    for (const [block, variants] of blocks) {\n      const current = getActive(block) ?? \"\";\n      const stepper = document.createElement(\"div\");\n      stepper.className = \"whichly-stepper\";\n\n      const label = document.createElement(\"div\");\n      label.className = \"whichly-block\";\n      label.title = block;\n      label.textContent = block;\n      stepper.appendChild(label);\n\n      const prev = document.createElement(\"button\");\n      prev.type = \"button\";\n      prev.setAttribute(\"aria-label\", `Previous ${block} variant`);\n      prev.textContent = \"‹\";\n      prev.addEventListener(\"click\", () => runtime.select(block, wrap(variants, current, -1)));\n      stepper.appendChild(prev);\n\n      const value = document.createElement(\"div\");\n      value.className = \"whichly-current\";\n      value.title = current;\n      value.setAttribute(\"aria-live\", \"polite\");\n      value.textContent = current;\n      stepper.appendChild(value);\n\n      const next = document.createElement(\"button\");\n      next.type = \"button\";\n      next.setAttribute(\"aria-label\", `Next ${block} variant`);\n      next.textContent = \"›\";\n      next.addEventListener(\"click\", () => runtime.select(block, wrap(variants, current, 1)));\n      stepper.appendChild(next);\n\n      const reset = document.createElement(\"button\");\n      reset.type = \"button\";\n      reset.className = \"whichly-reset\";\n      reset.setAttribute(\"aria-label\", `Reset ${block} variant`);\n      reset.textContent = \"↺\";\n      reset.addEventListener(\"click\", () => runtime.reset(block));\n      stepper.appendChild(reset);\n\n      list.appendChild(stepper);\n    }\n\n    dock.appendChild(list);\n\n    const collapse = document.createElement(\"button\");\n    collapse.type = \"button\";\n    collapse.className = \"whichly-collapse\";\n    collapse.setAttribute(\"aria-label\", \"Minimize picker\");\n    collapse.textContent = \"−\";\n    collapse.addEventListener(\"click\", () => {\n      collapsed = true;\n      renderPicker();\n    });\n    dock.appendChild(collapse);\n\n    wrapEl.appendChild(dock);\n    shadow.appendChild(wrapEl);\n  }\n\n  function scan(): void {\n    blocks.clear();\n    for (const blockEl of root.querySelectorAll<HTMLElement>(BLOCK_SELECTOR)) {\n      const block = getBlockName(blockEl);\n      if (!block) continue;\n      const variants = blocks.get(block) ?? [];\n      for (const variantEl of blockEl.querySelectorAll<HTMLElement>(VARIANT_SELECTOR)) {\n        if (isNestedInOtherBlock(variantEl, blockEl)) continue;\n        const variant = getVariantName(variantEl);\n        if (variant && !variants.includes(variant)) variants.push(variant);\n      }\n      if (variants.length > 0) blocks.set(block, variants);\n    }\n    applyState();\n    renderPicker();\n    emit();\n  }\n\n  const runtime: WhichlyRuntime = {\n    get blocks() {\n      return new Map(blocks);\n    },\n    get state() {\n      return { ...state };\n    },\n    scan,\n    select(block, variant) {\n      if (!blocks.get(block)?.includes(variant)) return;\n      state = { ...state, [block]: variant };\n      syncURL(state, param);\n      applyState();\n      renderPicker();\n      emit();\n    },\n    reset(block) {\n      const first = blocks.get(block)?.[0];\n      if (!first) return;\n      state = { ...state, [block]: first };\n      syncURL(state, param);\n      applyState();\n      renderPicker();\n      emit();\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    destroy() {\n      observer?.disconnect();\n      host?.remove();\n      listeners.clear();\n      blocks.clear();\n    },\n  };\n\n  if (floating && typeof document !== \"undefined\") {\n    host = document.createElement(\"div\");\n    host.id = \"__whichly_picker_host\";\n    shadow = host.attachShadow({ mode: \"open\" });\n    const style = document.createElement(\"style\");\n    style.textContent = pickerCss;\n    shadow.appendChild(style);\n    document.body.appendChild(host);\n  }\n\n  scan();\n\n  if (typeof MutationObserver !== \"undefined\") {\n    observer = new MutationObserver(() => scan());\n    observer.observe(root, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\n        \"data-whichly-block\",\n        \"data-whichly-variant\",\n        \"data-vp-block\",\n        \"data-vp-variant\",\n      ],\n    });\n  }\n\n  return runtime;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@whichly/core",
+  "version": "0.1.0",
+  "description": "Framework-agnostic DOM runtime for Whichly variant previews.",
+  "license": "MIT",
+  "author": "kapishdima <kapishdima@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kapishdima/whichly.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/kapishdima/whichly/tree/main/packages/core#readme",
+  "bugs": {
+    "url": "https://github.com/kapishdima/whichly/issues"
+  },
+  "keywords": ["whichly", "variants", "ab-test", "staging", "client-review", "astro"],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check .",
+    "prepublishOnly": "pnpm build"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.4.0"
+  }
+}