@panphora/bevel 0.1.0

package/examples/components/reference/sources/richclay/src/sanitize.js

@@ -0,0 +1,189 @@
+export const DEFAULT_SANITIZE_CONFIG = {
+  ALLOWED_TAGS: [
+    "a",
+    "b",
+    "blockquote",
+    "br",
+    "code",
+    "div",
+    "em",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "i",
+    "li",
+    "ol",
+    "p",
+    "pre",
+    "s",
+    "span",
+    "strong",
+    "sub",
+    "sup",
+    "u",
+    "ul"
+  ],
+  ALLOWED_ATTR: ["aria-label", "href", "rel", "target", "title"],
+  ALLOW_DATA_ATTR: false,
+  ALLOW_ARIA_ATTR: true,
+  ALLOWED_URI_REGEXP:
+    /^(?:(?:(?:f|ht)tps?|mailto|tel):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
+  FORBID_TAGS: ["script", "style", "iframe", "object", "embed", "form", "input"],
+  FORBID_ATTR: ["style", "srcset", "onerror", "onclick", "onload"]
+};
+
+export function createSanitizer(config = {}, doc = document) {
+  const purify = resolveDOMPurify(doc);
+
+  return {
+    sanitizeHTML(html) {
+      return sanitizeHTML(html, config, doc, purify);
+    },
+    sanitizeElement(element) {
+      return sanitizeElement(element, config, purify);
+    },
+    sanitizeToDOMFragment(html, editor) {
+      const ownerDocument = editor?.getRoot?.().ownerDocument || doc;
+      return sanitizeToDOMFragment(html, config, ownerDocument, purify);
+    }
+  };
+}
+
+export function sanitizeHTML(html, config = {}, doc = document, purify = resolveDOMPurify(doc)) {
+  const template = doc.createElement("template");
+  template.innerHTML = purify.sanitize(String(html || ""), mergeConfig(config));
+  normalizeLinks(template.content);
+  return template.innerHTML;
+}
+
+export function sanitizeElement(element, config = {}, purify = resolveDOMPurify(element.ownerDocument)) {
+  const doc = element.ownerDocument;
+  const wrapper = doc.createElement("div");
+  while (element.firstChild) wrapper.appendChild(element.firstChild);
+
+  purify.sanitize(wrapper, {
+    ...mergeConfig(config),
+    IN_PLACE: true
+  });
+
+  normalizeLinks(wrapper);
+  while (wrapper.firstChild) element.appendChild(wrapper.firstChild);
+  return element;
+}
+
+export function sanitizeToDOMFragment(
+  html,
+  config = {},
+  doc = document,
+  purify = resolveDOMPurify(doc)
+) {
+  const fragment = purify.sanitize(String(html || ""), {
+    ...mergeConfig(config),
+    RETURN_DOM_FRAGMENT: true
+  });
+  const clean = fragment?.ownerDocument === doc ? fragment : doc.importNode(fragment, true);
+  normalizeLinks(clean);
+  return clean || doc.createDocumentFragment();
+}
+
+function mergeConfig(config) {
+  return { ...DEFAULT_SANITIZE_CONFIG, ...config };
+}
+
+const SAFE_URL_SCHEMES = new Set(["http", "https", "mailto", "tel"]);
+const URL_CONTROL_CHARS = new RegExp("[\\u0000-\\u0020\\u007F-\\u009F]", "g");
+
+export function isSafeUrl(url) {
+  const stripped = String(url == null ? "" : url).replace(URL_CONTROL_CHARS, "");
+  const scheme = (stripped.match(/^([a-z][a-z0-9+.\-]*):/i) || [])[1];
+  return !scheme || SAFE_URL_SCHEMES.has(scheme.toLowerCase());
+}
+
+export function normalizeUrl(value) {
+  const raw = String(value == null ? "" : value).trim();
+  if (!raw || !isSafeUrl(raw)) return "";
+  if (/^(?:https?:|mailto:|tel:)/i.test(raw)) return raw;
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(raw)) return `mailto:${raw}`;
+  // Preserve fragment, query, root-relative, protocol-relative, and explicitly
+  // relative links as-is; only a bare hostname gets an https:// scheme.
+  if (/^(?:[#?]|\/|\.{1,2}\/)/.test(raw)) return raw;
+  return `https://${raw}`;
+}
+
+function resolveDOMPurify(doc) {
+  const supplied = globalThis.DOMPurify;
+  if (supplied?.sanitize) return supplied;
+  if (typeof supplied === "function") return supplied(doc.defaultView || globalThis);
+
+  throw new Error(
+    "RichClay requires DOMPurify. Load vendor/purify.min.js before richclay.js or provide globalThis.DOMPurify."
+  );
+}
+
+function normalizeLinks(root) {
+  root.querySelectorAll?.("a[href]").forEach(link => {
+    const href = link.getAttribute("href") || "";
+    if (/^\s*javascript:/i.test(href)) {
+      link.removeAttribute("href");
+    }
+    if (link.getAttribute("target") === "_blank") {
+      const rel = new Set((link.getAttribute("rel") || "").split(/\s+/).filter(Boolean));
+      rel.add("noopener");
+      rel.add("noreferrer");
+      link.setAttribute("rel", Array.from(rel).join(" "));
+    }
+  });
+}
+
+const INLINE_SANITIZE_EXTENSIONS = {
+  ADD_TAGS: ["img"],
+  ADD_ATTR: ["class", "id", "src", "alt", "width", "height"]
+};
+
+// Inline editors live inside real page markup, so paste/setHTML ingress keeps
+// structural attributes and images that the card allowlist strips. Everything
+// XSS-relevant (scripts, on* handlers, javascript: URLs) stays forbidden.
+export function inlineSanitizeConfig(config = {}) {
+  return {
+    ...config,
+    ADD_TAGS: [...new Set([...INLINE_SANITIZE_EXTENSIONS.ADD_TAGS, ...(config.ADD_TAGS || [])])],
+    ADD_ATTR: [...new Set([...INLINE_SANITIZE_EXTENSIONS.ADD_ATTR, ...(config.ADD_ATTR || [])])],
+    ALLOW_DATA_ATTR: config.ALLOW_DATA_ATTR ?? true
+  };
+}
+
+const FLATTEN_SELECTOR =
+  "p, div, h1, h2, h3, h4, h5, h6, blockquote, pre, ul, ol, li, figure, figcaption, table, thead, tbody, tr, td, th";
+
+export function flattenFragmentToSingleLine(fragment) {
+  const doc = fragment.ownerDocument || document;
+  fragment.querySelectorAll?.("br").forEach(br => br.replaceWith(doc.createTextNode(" ")));
+  let block = fragment.querySelector?.(FLATTEN_SELECTOR);
+  while (block) {
+    const parent = block.parentNode;
+    parent.insertBefore(doc.createTextNode(" "), block);
+    while (block.firstChild) parent.insertBefore(block.firstChild, block);
+    parent.insertBefore(doc.createTextNode(" "), block);
+    block.remove();
+    block = fragment.querySelector(FLATTEN_SELECTOR);
+  }
+  collapseFragmentWhitespace(fragment, doc);
+  return fragment;
+}
+
+function collapseFragmentWhitespace(fragment, doc) {
+  fragment.normalize?.();
+  const walker = doc.createTreeWalker(fragment, 4 /* NodeFilter.SHOW_TEXT */);
+  const nodes = [];
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  nodes.forEach(node => {
+    node.nodeValue = node.nodeValue.replace(/\s+/g, " ");
+  });
+  const first = fragment.firstChild;
+  if (first?.nodeType === 3) first.nodeValue = first.nodeValue.replace(/^\s+/, "");
+  const last = fragment.lastChild;
+  if (last?.nodeType === 3) last.nodeValue = last.nodeValue.replace(/\s+$/, "");
+}

package/examples/components/reference/sources/richclay/src/styles.js

@@ -0,0 +1,23 @@
+const STYLE_ID = "richclay-styles";
+const styledDocs = new WeakSet();
+let cssText = "";
+
+export function setRichClayStyles(text) {
+  cssText = text || "";
+}
+
+export function ensureStyles(doc = document) {
+  if (!doc || styledDocs.has(doc)) return;
+  if (doc.getElementById(STYLE_ID)) {
+    styledDocs.add(doc);
+    return;
+  }
+  if (!cssText) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.setAttribute("save-remove", "");
+  style.setAttribute("save-ignore", "");
+  style.textContent = cssText;
+  (doc.head || doc.documentElement).appendChild(style);
+  styledDocs.add(doc);
+}

package/examples/components/reference/sources/richclay/src/toolbar-float.js

@@ -0,0 +1,175 @@
+import { Toolbar } from "./toolbar.js";
+import { markChrome } from "./hyperclay.js";
+
+export const GAP = 16;
+export const GAP_LADDER = [16, 8, 0];
+export const VIEWPORT_INSET = 8;
+export const PLACEMENT_SLACK = 4;
+
+// Pure placement ladder: above -> below -> side rail -> pinned to viewport top.
+// All coords are viewport-relative (the shell is position: fixed). `current`
+// gets PLACEMENT_SLACK of hysteresis so the mode doesn't flip-flop at exact
+// boundaries.
+export function placeToolbar({ anchor, bar, rail, viewport, current = null }) {
+  const slack = mode => (current === mode ? PLACEMENT_SLACK : 0);
+
+  if (
+    anchor.bottom <= 0 ||
+    anchor.top >= viewport.height ||
+    anchor.right <= 0 ||
+    anchor.left >= viewport.width
+  ) {
+    return { mode: "hidden", x: 0, y: 0 };
+  }
+
+  const clampX = width =>
+    Math.max(VIEWPORT_INSET, Math.min(anchor.left, viewport.width - width - VIEWPORT_INSET));
+
+  const aboveY = anchor.top - GAP - bar.height;
+  if (aboveY >= VIEWPORT_INSET - slack("above")) {
+    return { mode: "above", x: clampX(bar.width), y: aboveY };
+  }
+
+  const belowY = anchor.bottom + GAP;
+  if (belowY + bar.height <= viewport.height - VIEWPORT_INSET + slack("below")) {
+    return { mode: "below", x: clampX(bar.width), y: belowY };
+  }
+
+  const rightSpace = viewport.width - anchor.right - VIEWPORT_INSET;
+  const leftSpace = anchor.left - VIEWPORT_INSET;
+  const sides =
+    rightSpace >= leftSpace
+      ? [["rail-right", rightSpace], ["rail-left", leftSpace]]
+      : [["rail-left", leftSpace], ["rail-right", rightSpace]];
+
+  for (const [mode, space] of sides) {
+    for (const gap of GAP_LADDER) {
+      if (rail.width + gap > space + slack(mode)) continue;
+      const x =
+        mode === "rail-right"
+          ? Math.min(anchor.right + gap, viewport.width - rail.width - VIEWPORT_INSET)
+          : Math.max(anchor.left - gap - rail.width, VIEWPORT_INSET);
+      const maxY = Math.min(anchor.bottom, viewport.height - VIEWPORT_INSET) - rail.height;
+      const y = Math.max(VIEWPORT_INSET, Math.min(Math.max(anchor.top, VIEWPORT_INSET), maxY));
+      return { mode, x, y, gap };
+    }
+  }
+
+  return { mode: "pinned", x: clampX(bar.width), y: VIEWPORT_INSET };
+}
+
+export class FloatingToolbar {
+  constructor(editor, controls) {
+    this.editor = editor;
+    this.mode = null;
+    this.hidden = false;
+    this.frame = 0;
+    this.bar = { width: 0, height: 0 };
+    this.rail = { width: 0, height: 0 };
+
+    const doc = editor.element.ownerDocument;
+    this.doc = doc;
+    this.win = doc.defaultView || globalThis;
+
+    this.root = doc.createElement("div");
+    this.root.className = "richclay-float";
+    this.root.setAttribute("data-richclay-float", "");
+    this.root.setAttribute("save-remove", "");
+    markChrome(this.root);
+    doc.body.appendChild(this.root);
+
+    this.toolbar = new Toolbar(editor, controls, { toolbarContainer: this.root });
+
+    this.onScroll = () => this.schedule();
+    this.onResize = () => {
+      this.measure();
+      this.schedule();
+    };
+    doc.addEventListener("scroll", this.onScroll, { capture: true, passive: true });
+    this.win.addEventListener("resize", this.onResize, { passive: true });
+    this.win.visualViewport?.addEventListener("resize", this.onResize, { passive: true });
+    this.win.visualViewport?.addEventListener("scroll", this.onScroll, { passive: true });
+    this.resizeObserver =
+      typeof this.win.ResizeObserver === "function"
+        ? new this.win.ResizeObserver(() => this.schedule())
+        : null;
+    this.resizeObserver?.observe(editor.element);
+
+    this.measure();
+    this.reposition();
+  }
+
+  // Measure both orientations up front so the placement math can evaluate the
+  // rail without first switching to it.
+  measure() {
+    const wasRail = this.root.classList.contains("richclay-float-rail");
+    this.root.style.visibility = "hidden";
+    this.root.classList.remove("richclay-float-rail");
+    this.bar = { width: this.root.offsetWidth || 0, height: this.root.offsetHeight || 0 };
+    this.root.classList.add("richclay-float-rail");
+    this.rail = { width: this.root.offsetWidth || 0, height: this.root.offsetHeight || 0 };
+    this.root.classList.toggle("richclay-float-rail", wasRail);
+    this.root.style.visibility = "";
+  }
+
+  schedule() {
+    if (!this.win.requestAnimationFrame) {
+      this.reposition();
+      return;
+    }
+    if (this.frame) return;
+    this.frame = this.win.requestAnimationFrame(() => {
+      this.frame = 0;
+      this.reposition();
+    });
+  }
+
+  setVisible(visible) {
+    this.hidden = !visible;
+    this.reposition();
+  }
+
+  reposition() {
+    if (this.hidden) {
+      this.root.style.display = "none";
+      return;
+    }
+    const anchor = this.editor.element.getBoundingClientRect();
+    const viewport = {
+      width: this.win.visualViewport?.width ?? this.win.innerWidth,
+      height: this.win.visualViewport?.height ?? this.win.innerHeight
+    };
+    const placement = placeToolbar({
+      anchor,
+      bar: this.bar,
+      rail: this.rail,
+      viewport,
+      current: this.mode
+    });
+    this.mode = placement.mode;
+
+    if (placement.mode === "hidden") {
+      this.root.style.display = "none";
+      return;
+    }
+    this.root.style.display = "";
+    this.root.classList.toggle(
+      "richclay-float-rail",
+      placement.mode === "rail-left" || placement.mode === "rail-right"
+    );
+    this.root.classList.toggle("richclay-float-pinned", placement.mode === "pinned");
+    this.root.style.transform = `translate(${Math.round(placement.x)}px, ${Math.round(placement.y)}px)`;
+  }
+
+  destroy() {
+    if (this.frame) this.win.cancelAnimationFrame?.(this.frame);
+    this.frame = 0;
+    this.doc.removeEventListener("scroll", this.onScroll, { capture: true });
+    this.win.removeEventListener("resize", this.onResize);
+    this.win.visualViewport?.removeEventListener("resize", this.onResize);
+    this.win.visualViewport?.removeEventListener("scroll", this.onScroll);
+    this.resizeObserver?.disconnect();
+    this.toolbar.destroy();
+    this.root.remove();
+  }
+}