@panphora/bevel 0.1.0

package/examples/components/reference/sources/hypercms/src/unresolved.js

@@ -0,0 +1,211 @@
+import domAdapter from 'hyper-html-api/dom'
+import { ruleAttrIndex, DOM_PROPERTIES_READ_ONLY_SET } from 'hyper-html-api/engine'
+
+const PREFIX = '[hypercms]'
+
+// The opts every other engine call in hypercms uses: never traverse into the
+// sidebar's own form, never count a [cms-template] seed as content.
+const FIND_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
+// templateAttr:null includes seeds. An empty list still holding its seed can be
+// grown back from it, so it is not dead.
+const SEED_OPTS = { skip: '[data-hcms-shell]', templateAttr: null }
+
+export class InvalidRuleSelector extends Error {
+  constructor(path, selector, cause) {
+    super(`hypercms: rule at "${path}" has an invalid CSS selector: "${selector}"`)
+    this.name = 'InvalidRuleSelector'
+    this.path = path
+    this.selector = selector
+    this.cause = cause
+  }
+}
+
+// Report a field only when writing to it would be silently discarded, which is
+// exactly when apply() finds no element and returns having done nothing.
+// An extracted null is NOT that test: a present-but-empty attribute reads null
+// too (extract.js readPropOrAttr), and that field saves perfectly. So this
+// resolves each rule's selector and counts matches instead of reading values.
+export function findUnresolved(root, rules) {
+  const missing = []
+  const twins = []
+  const readOnly = []
+  walk(root, rules, [], missing, twins, readOnly)
+  return { missing: unique(missing), twins: uniqueTwins(twins), readOnly: unique(readOnly) }
+}
+
+// The rules to WRITE with. Extract keeps the full tree, because a read-only
+// projection still READS (".box@classList" reads its class list) and dropping
+// it would change what onChange reports. apply() ignores data keys its rules do
+// not mention, so narrowing only the write side costs nothing and removes the
+// failure class: apply throws RuleTargetReadOnly part-way through its walk, and
+// the ordinary edit path does not snapshot, so the writes ordered before the
+// throw stay and the ones after never happen.
+export function stripReadOnly(rules) {
+  return strip(rules)
+}
+
+function strip(rule) {
+  if (typeof rule === 'string') return isReadOnlyRule(rule) ? undefined : rule
+  if (Array.isArray(rule)) {
+    const [selector, shape] = rule
+    // Keep the tuple even when the item shape strips to nothing. The selector is
+    // what engine.apply needs in order to add, remove and reorder rows, so
+    // dropping it made every structural operation on a list whose only field is
+    // read-only report success while the page did not change. An undefined item
+    // shape writes no value and leaves row reconciliation intact.
+    return [selector, strip(shape)]
+  }
+  if (rule && typeof rule === 'object') {
+    const out = {}
+    for (const [key, sub] of Object.entries(rule)) {
+      const kept = strip(sub)
+      if (kept !== undefined) out[key] = kept
+    }
+    return out
+  }
+  return rule
+}
+
+function walk(ctx, rule, path, missing, twins, readOnly) {
+  if (typeof rule === 'string') {
+    const selector = selectorOf(rule)
+    // Resolve the selector even for a read-only rule, so an invalid one still
+    // becomes InvalidRuleSelector here rather than a raw SyntaxError out of the
+    // extract that follows.
+    const matches = selector ? find(ctx, selector, FIND_OPTS, path) : []
+    // Reported on its own and never also as missing: the selector may well
+    // match, and the reason the edit cannot land is the property, not the
+    // element.
+    if (isReadOnlyRule(rule)) {
+      readOnly.push(pathStr(path))
+      return
+    }
+    if (!selector) return
+    if (rule.endsWith('[]')) {
+      if (matches.length === 0 && find(ctx, selector, SEED_OPTS, path).length === 0) {
+        missing.push(pathStr(path))
+      }
+      return
+    }
+    if (matches.length === 0) missing.push(pathStr(path))
+    else if (matches.length > 1) twins.push({ path: pathStr(path), count: matches.length })
+    return
+  }
+
+  if (Array.isArray(rule)) {
+    const [selector, shape] = rule
+    if (typeof selector !== 'string' || !selector) return
+    const matches = find(ctx, selector, FIND_OPTS, path)
+    if (matches.length === 0) {
+      if (find(ctx, selector, SEED_OPTS, path).length === 0) missing.push(pathStr(path))
+      return
+    }
+    // Rows collapse to one '*' segment, so a field broken on every row is
+    // reported once rather than once per row.
+    for (const node of matches) walk(node, shape, [...path, '*'], missing, twins, readOnly)
+    return
+  }
+
+  if (rule && typeof rule === 'object') {
+    for (const [key, sub] of Object.entries(rule)) walk(ctx, sub, [...path, key], missing, twins, readOnly)
+  }
+}
+
+function find(ctx, selector, opts, path) {
+  try {
+    return domAdapter.find(ctx, selector, opts)
+  } catch (err) {
+    throw new InvalidRuleSelector(pathStr(path), selector, err)
+  }
+}
+
+// Mirrors the engine's scalar parsing: a trailing [] strips, "." and a leading
+// @ read the context node itself so they can never fail to resolve, and
+// otherwise the selector is the part before the separator @ (the last one that
+// is not inside brackets or quotes, so a mailto address stays in the selector).
+function selectorOf(rule) {
+  if (rule === '.' || rule.startsWith('@')) return null
+  if (rule.endsWith('[]')) return rule.slice(0, -2) || null
+  const at = ruleAttrIndex(rule)
+  return (at === -1 ? rule : rule.slice(0, at)) || null
+}
+
+// The attribute or property half of a scalar rule, or null when the rule is a
+// bare selector, an array rule, or ".". ruleAttrIndex returns the index of the
+// last top-level @, so a leading @ (the context node itself) resolves here too.
+function attrOf(rule) {
+  if (rule.endsWith('[]')) return null
+  const at = ruleAttrIndex(rule)
+  return at === -1 ? null : rule.slice(at + 1) || null
+}
+
+function isReadOnlyRule(rule) {
+  const attr = attrOf(rule)
+  return attr != null && DOM_PROPERTIES_READ_ONLY_SET.has(attr)
+}
+
+export function applyUnresolvedState(ctx) {
+  renderNotice(ctx)
+  warnTwins(ctx)
+}
+
+// States the fact and stops. Regenerating a CMS replaces the rules tag
+// wholesale, so a notice that reads as a repair prompt would walk anyone with a
+// hand-edited config into losing it.
+function renderNotice(ctx) {
+  const el = ctx.noticeEl
+  if (!el) return
+  const missing = (ctx.unresolved && ctx.unresolved.missing) || []
+  const readOnly = (ctx.unresolved && ctx.unresolved.readOnly) || []
+  if (missing.length === 0 && readOnly.length === 0) {
+    el.textContent = ''
+    el.hidden = true
+    return
+  }
+  const lines = []
+  if (missing.length) {
+    const count = missing.length === 1
+      ? '1 field no longer matches this page'
+      : `${missing.length} fields no longer match this page`
+    lines.push(`${count}: ${missing.join(', ')}`)
+  }
+  if (readOnly.length) {
+    const count = readOnly.length === 1
+      ? '1 field reads a property the browser will not let anything write'
+      : `${readOnly.length} fields read properties the browser will not let anything write`
+    lines.push(`${count}: ${readOnly.join(', ')}`)
+  }
+  el.textContent = lines.join('\n')
+  el.hidden = false
+}
+
+// Two elements matching one scalar rule still works, since the write lands on
+// the first, so this is a console note rather than a notice. Runtime duplicates
+// (a carousel cloning slides, a dialog holding a second copy) are ordinary.
+// Signature-gated because the walk reruns on every refresh.
+function warnTwins(ctx) {
+  const twins = (ctx.unresolved && ctx.unresolved.twins) || []
+  const signature = twins.map((t) => `${t.path}:${t.count}`).join('|')
+  if (signature === ctx.lastTwinSignature) return
+  ctx.lastTwinSignature = signature
+  for (const { path, count } of twins) {
+    console.warn(`${PREFIX} "${path}" matches ${count} elements; edits go to the first one.`)
+  }
+}
+
+function unique(list) {
+  return [...new Set(list)]
+}
+
+function uniqueTwins(list) {
+  const byPath = new Map()
+  for (const twin of list) {
+    const seen = byPath.get(twin.path)
+    if (!seen || twin.count > seen.count) byPath.set(twin.path, twin)
+  }
+  return [...byPath.values()]
+}
+
+function pathStr(path) {
+  return path.length ? path.join('.') : '(whole page)'
+}

package/examples/components/reference/sources/hypercms/src/vendor/mirk.vendor.js

@@ -0,0 +1,212 @@
+/* VENDORED from mirk-interface/mirk.js — DO NOT EDIT. Regenerate: npm run build:theme */
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+/*
+ * mirk.js — the delegated runtime for the mirk UI kit, v2.
+ * https://github.com/panphora/mirk-interface
+ *
+ * One listener per interaction on `document`. No init(), no MutationObserver:
+ * every current AND future element is handled, so injected / re-rendered /
+ * saved-and-reopened markup just works. Idempotent; safe to include twice.
+ *
+ * The markup carries the initial state — chips are real DOM, the slider fill is
+ * an inline --mirk-value, native inputs hold their own value — so the page is
+ * correct before this script runs. JS only enhances the transitions.
+ */
+(function () {
+  if (window.__mirk) return;
+  window.__mirk = true;
+
+  // Crisp × for remove affordances — a font glyph renders at a different weight
+  // and baseline in every typeface, so draw it as a tiny square-capped vector.
+  const X_SVG = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4 12 12M12 4 4 12" stroke="currentColor" stroke-width="2" stroke-linecap="square" fill="none"/></svg>';
+
+  // Number stepper — bevel buttons drive the native input.
+  document.addEventListener("click", (e) => {
+    const step = e.target.closest(".mirk-number__step");
+    if (!step) return;
+    const input = step.closest(".mirk-number").querySelector("input[type=number]");
+    if (!input) return;
+    step.dataset.step === "up" ? input.stepUp() : input.stepDown();
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+
+  // Slider — mirror the value into --mirk-value on the wrapper (fill width + nub
+  // left both read it). The markup ships an inline --mirk-value matching value=,
+  // so the fill is correct before this runs; this only handles dragging.
+  document.addEventListener("input", (e) => {
+    const input = e.target.closest(".mirk-slider__input");
+    if (!input) return;
+    input.closest(".mirk-slider").style.setProperty("--mirk-value", `${input.value}%`);
+  });
+
+  // File picker — show the chosen file as a link to it, with a × to clear. The kit
+  // has no upload, so the link is a local object URL; an app swaps in the uploaded
+  // URL. State lives in the input's files.
+  document.addEventListener("change", (e) => {
+    const input = e.target.closest(".mirk-file__input");
+    if (!input || !input.files.length) return;
+    const root = input.closest(".mirk-file");
+    const slot = root.querySelector(".mirk-file__name");
+    if (!slot) return;
+    const file = input.files[0];
+    const link = document.createElement("a");
+    link.className = "mirk-file__name";
+    link.dataset.filled = "";
+    link.href = URL.createObjectURL(file);
+    link.target = "_blank";
+    link.rel = "noopener";
+    link.textContent = file.name;
+    slot.replaceWith(link);
+    if (!root.querySelector(".mirk-file__remove")) {
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "mirk-file__remove";
+      remove.setAttribute("aria-label", "Remove file");
+      remove.innerHTML = X_SVG;
+      link.after(remove);
+    }
+  });
+
+  // Image input — FileReader thumbnail preview.
+  document.addEventListener("change", (e) => {
+    const input = e.target.closest(".mirk-image__input");
+    if (!input || !input.files.length) return;
+    const root = input.closest(".mirk-image");
+    const preview = root.querySelector(".mirk-image__preview");
+    if (!preview) return;
+    const placeholder = root.querySelector(".mirk-image__placeholder");
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      preview.src = ev.target.result;
+      preview.removeAttribute("hidden");
+      if (placeholder) placeholder.setAttribute("hidden", "");
+      // compact variant: swap the upload button for the thumbnail
+      root.querySelector(".mirk-image__thumb")?.removeAttribute("hidden");
+      root.querySelector(".mirk-image__upload")?.setAttribute("hidden", "");
+    };
+    reader.readAsDataURL(input.files[0]);
+  });
+
+  // File / image remove — clear the field and return to the empty state.
+  document.addEventListener("click", (e) => {
+    const fileRemove = e.target.closest(".mirk-file__remove");
+    if (fileRemove) {
+      const root = fileRemove.closest(".mirk-file");
+      const input = root?.querySelector(".mirk-file__input");
+      const link = root?.querySelector(".mirk-file__name");
+      if (input) input.value = "";
+      if (link) {
+        const span = document.createElement("span");
+        span.className = "mirk-file__name";
+        span.textContent = "No file chosen";
+        link.replaceWith(span);
+      }
+      fileRemove.remove();
+      return;
+    }
+    const imageRemove = e.target.closest(".mirk-image__remove");
+    if (imageRemove) {
+      const root = imageRemove.closest(".mirk-image");
+      const input = root?.querySelector(".mirk-image__input");
+      const preview = root?.querySelector(".mirk-image__preview");
+      if (input) input.value = "";
+      if (preview) { preview.removeAttribute("src"); preview.setAttribute("hidden", ""); }
+      root?.querySelector(".mirk-image__thumb")?.setAttribute("hidden", "");
+      root?.querySelector(".mirk-image__upload")?.removeAttribute("hidden");
+    }
+  });
+
+  // Tags — Enter / comma adds a real chip, × or Backspace-on-empty removes one.
+  // Chips are DOM elements (and carry a hidden input), so outerHTML keeps them.
+  function makeChip(value, round) {
+    const text = document.createElement("span");
+    text.textContent = value;
+    const hidden = document.createElement("input");
+    hidden.type = "hidden"; hidden.name = "tags[]"; hidden.value = value;
+    const remove = document.createElement("button");
+    remove.type = "button"; remove.className = "mirk-tags__remove"; remove.textContent = "×";
+
+    const chip = document.createElement("span");
+    chip.className = "mirk-tags__chip";
+    if (round) {
+      const inner = document.createElement("span");
+      inner.className = "mirk-tags__chip-inner";
+      inner.append(text, hidden, remove);
+      chip.append(inner);
+    } else {
+      chip.append(text, hidden, remove);
+    }
+    return chip;
+  }
+
+  document.addEventListener("keydown", (e) => {
+    const input = e.target.closest(".mirk-tags__input");
+    if (!input) return;
+    const tags = input.closest(".mirk-tags");
+    if (e.key === "Enter" || e.key === ",") {
+      const value = input.value.trim();
+      if (!value) return;
+      e.preventDefault();
+      input.before(makeChip(value, tags.classList.contains("mirk-tags--round")));
+      input.value = "";
+    } else if (e.key === "Backspace" && !input.value) {
+      const chips = tags.querySelectorAll(".mirk-tags__chip");
+      chips[chips.length - 1]?.remove();
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    const remove = e.target.closest(".mirk-tags__remove");
+    if (remove) { remove.closest(".mirk-tags__chip").remove(); return; }
+    const tags = e.target.closest(".mirk-tags");
+    if (tags && e.target === tags) tags.querySelector(".mirk-tags__input")?.focus();
+  });
+
+  // Collapsible chip — open the panel, collapse back to the chip, toggle the
+  // before/after field table. State lives in classes on the markup, so a
+  // saved-and-reopened chip keeps whatever it was; this only flips them live.
+  document.addEventListener("click", (e) => {
+    const t = e.target.closest("[data-mirk-chip]");
+    if (!t) return;
+    const action = t.getAttribute("data-mirk-chip");
+    if (action === "open") t.closest(".mirk-chip")?.classList.add("mirk-chip--open");
+    else if (action === "collapse") t.closest(".mirk-chip")?.classList.remove("mirk-chip--open");
+    else if (action === "changes") {
+      const on = t.closest(".mirk-chip__panel")?.classList.toggle("is-changes");
+      t.textContent = on ? "(hide changes)" : "(view changes)";
+    }
+  });
+
+  // Copy button — delegated so dynamically-added buttons work too.
+  // [data-copy]         copies the component's innerHTML (clean markup).
+  // [data-copy="text"]  copies textContent (for <pre>/<code> source blocks
+  //                     whose displayed HTML must paste as raw characters).
+  document.addEventListener("click", (e) => {
+    const btn = e.target.closest("[data-copy-btn]");
+    if (!btn) return;
+    const copyable = btn.closest("[data-copy]");
+    if (!copyable) return;
+
+    const clone = copyable.cloneNode(true);
+    clone.querySelectorAll("[data-copy-btn]").forEach((b) => b.remove());
+
+    const mode = copyable.getAttribute("data-copy");
+    const payload = mode === "text"
+      ? clone.textContent.replace(/^\s+|\s+$/g, "")
+      : clone.innerHTML
+          .replace(/\s+data-copy(="[^"]*")?/g, "")
+          .replace(/^\s*\n/gm, "")
+          .trim();
+
+    navigator.clipboard.writeText(payload).then(() => {
+      const original = btn.textContent;
+      btn.textContent = "copied";
+      btn.dataset.copied = "";
+      setTimeout(() => { btn.textContent = original; delete btn.dataset.copied; }, 1200);
+    }).catch(() => {
+      btn.textContent = "error";
+      setTimeout(() => { btn.textContent = "copy"; }, 1200);
+    });
+  });
+})();
+}