kerfjs 0.16.0 → 1.0.2

package/dist/chunk-QNYOMGI4.js

@@ -0,0 +1,543 @@
+import { effect, isSignal } from './chunk-4E26PO2C.js';
+
+// src/utils/urlScreen.ts
+var URL_ATTRS = /* @__PURE__ */ new Set(["href", "src", "xlink:href", "formaction", "action", "data"]);
+var DANGEROUS_SCHEMES = /* @__PURE__ */ new Set(["javascript", "vbscript"]);
+var CONTROL_CHARS = /[\u0000-\u001F\u007F]/g;
+function normalizeUrl(value) {
+  return value.replace(CONTROL_CHARS, "").replace(/^\s+/, "");
+}
+function extractScheme(value) {
+  const m = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(normalizeUrl(value));
+  return m ? m[1].toLowerCase() : null;
+}
+function isDangerousDataUrl(value) {
+  const media = /^data:([^;,]*)/.exec(normalizeUrl(value).toLowerCase())?.[1].trim() ?? "";
+  if (media === "" || media === "text/plain" || media === "text/css") return false;
+  if (media === "image/svg+xml") return true;
+  if (media.startsWith("image/")) return false;
+  if (media.startsWith("font/") || media.startsWith("application/font")) return false;
+  if (media.startsWith("audio/") || media.startsWith("video/")) return false;
+  return true;
+}
+function isDangerousUrlValue(name, value) {
+  if (!URL_ATTRS.has(name)) return false;
+  const scheme = extractScheme(value);
+  if (scheme === null) return false;
+  if (DANGEROUS_SCHEMES.has(scheme)) return true;
+  return scheme === "data" && isDangerousDataUrl(value);
+}
+function dangerousUrlWarning(name, value) {
+  return `dropped dangerous URL value for ${name}=${JSON.stringify(value.slice(0, 80))}. kerf blocks javascript:, vbscript:, and script-executing data: URLs (text/html, image/svg+xml, xml) in href/src/data/formaction/action/xlink:href by default. Wrap in raw() if this is intentional (e.g. bookmarklets), or sanitize upstream.`;
+}
+
+// src/bindings.ts
+var BIND_ATTR = "data-kfb";
+var TEXT_MARKER_PREFIX = "kfb:";
+var BIND_ATTR_ROW = "data-kfbrow";
+var ROW_TEXT_PREFIX = "kfbr:";
+var context = null;
+var rowSink = null;
+var rowCounter = 0;
+var NO_DISPOSERS = [];
+function newBindingContext() {
+  return { counter: 0, list: [] };
+}
+function _setBindingContext(c) {
+  context = c;
+}
+function captureRowBindings(renderRow) {
+  const prevSink = rowSink;
+  const prevCounter = rowCounter;
+  rowSink = [];
+  rowCounter = 0;
+  try {
+    const html = renderRow();
+    return { html, bindings: rowSink };
+  } finally {
+    rowSink = prevSink;
+    rowCounter = prevCounter;
+  }
+}
+function bindAttr(attr, signal) {
+  if (rowSink !== null) {
+    const id = `a${rowCounter++}`;
+    rowSink.push({ kind: "attr", id, attr, signal });
+    return id;
+  }
+  if (context !== null) {
+    const id = `a${context.counter++}`;
+    context.list.push({ kind: "attr", id, attr, signal });
+    return id;
+  }
+  return null;
+}
+function bindMarkerAttr() {
+  return rowSink !== null ? BIND_ATTR_ROW : BIND_ATTR;
+}
+function bindText(signal) {
+  if (rowSink !== null) {
+    const id = `t${rowCounter++}`;
+    rowSink.push({ kind: "text", id, signal });
+    return `<!--${ROW_TEXT_PREFIX}${id}-->`;
+  }
+  if (context !== null) {
+    const id = `t${context.counter++}`;
+    context.list.push({ kind: "text", id, signal });
+    return `<!--${TEXT_MARKER_PREFIX}${id}-->`;
+  }
+  return null;
+}
+function wireBindings(rootEl, ctx, prevDisposers) {
+  for (const d of prevDisposers) d();
+  if (ctx.list.length === 0) return NO_DISPOSERS;
+  const disposers = [];
+  wireInto(rootEl, BIND_ATTR, TEXT_MARKER_PREFIX, ctx.list, disposers);
+  return disposers;
+}
+function wireRowBindings(rowNode, bindings) {
+  const disposers = new Array(bindings.length);
+  const rootIds = rowNode.getAttribute(BIND_ATTR_ROW);
+  let rootIdSet = null;
+  let descIndex = null;
+  let textMarkers = null;
+  for (let i = 0; i < bindings.length; i++) {
+    const b = bindings[i];
+    if (b.kind === "attr") {
+      let onRoot = false;
+      if (rootIds !== null) {
+        if (rootIds === b.id) {
+          onRoot = true;
+        } else if (rootIds.indexOf(",") !== -1) {
+          rootIdSet ??= new Set(rootIds.split(","));
+          onRoot = rootIdSet.has(b.id);
+        }
+      }
+      let el;
+      if (onRoot) {
+        el = rowNode;
+      } else {
+        descIndex ??= indexAttrEls(rowNode, BIND_ATTR_ROW);
+        el = descIndex.get(b.id);
+      }
+      if (el === void 0) continue;
+      disposers[i] = attachAttrEffect(el, b.attr, b.signal);
+    } else {
+      if (textMarkers === null) {
+        textMarkers = /* @__PURE__ */ new Map();
+        collectComments(rowNode, ROW_TEXT_PREFIX, textMarkers);
+      }
+      const marker = textMarkers.get(b.id);
+      if (marker === void 0) continue;
+      disposers[i] = attachTextEffect(marker, b.signal);
+    }
+  }
+  return disposers;
+}
+function disposeRowBindings(disposers) {
+  if (disposers === void 0) return;
+  for (const d of disposers) d();
+}
+function wireInto(scope, attrName, textPrefix, bindings, disposers) {
+  const attrEls = indexAttrEls(scope, attrName);
+  const textMarkers = /* @__PURE__ */ new Map();
+  collectComments(scope, textPrefix, textMarkers);
+  for (const b of bindings) {
+    if (b.kind === "attr") {
+      const el = attrEls.get(b.id);
+      if (el === void 0) continue;
+      disposers.push(attachAttrEffect(el, b.attr, b.signal));
+    } else {
+      const marker = textMarkers.get(b.id);
+      if (marker === void 0) continue;
+      disposers.push(attachTextEffect(marker, b.signal));
+    }
+  }
+}
+function indexAttrEls(scope, attrName) {
+  const map = /* @__PURE__ */ new Map();
+  for (const el of scope.querySelectorAll(`[${attrName}]`)) {
+    for (const id of el.getAttribute(attrName).split(",")) map.set(id, el);
+  }
+  return map;
+}
+function attachAttrEffect(el, attr, signal) {
+  return effect(() => setBoundAttr(el, attr, signal.value));
+}
+function attachTextEffect(marker, signal) {
+  const text = marker.ownerDocument.createTextNode("");
+  marker.parentNode.insertBefore(text, marker.nextSibling);
+  return effect(() => {
+    text.data = coerceText(signal.value);
+  });
+}
+function setBoundAttr(el, name, value) {
+  if (value == null || value === false) {
+    el.removeAttribute(name);
+    return;
+  }
+  if (value === true) {
+    el.setAttribute(name, "");
+    return;
+  }
+  if (isSafeHtmlValue(value)) {
+    el.setAttribute(name, value.__html);
+    return;
+  }
+  const str = String(value);
+  if (isDangerousUrlValue(name, str)) {
+    console.warn(`kerf binding: ${dangerousUrlWarning(name, str)}`);
+    el.removeAttribute(name);
+    return;
+  }
+  el.setAttribute(name, str);
+}
+var SAFE_HTML_BRAND = /* @__PURE__ */ Symbol.for("kerfjs.SafeHtml");
+function isSafeHtmlValue(v) {
+  return typeof v === "object" && v !== null && v[SAFE_HTML_BRAND] === true;
+}
+function coerceText(value) {
+  if (value == null || typeof value === "boolean") return "";
+  return String(value);
+}
+function collectComments(node, prefix, out) {
+  for (let c = node.firstChild; c !== null; c = c.nextSibling) {
+    if (c.nodeType === Node.COMMENT_NODE) {
+      const data = c.data;
+      if (data.startsWith(prefix)) out.set(data.slice(prefix.length), c);
+    } else if (c.nodeType === Node.ELEMENT_NODE) {
+      collectComments(c, prefix, out);
+    }
+  }
+}
+
+// src/segment.ts
+function flatten(segment, withMarkers) {
+  if (segment.kind === "static") return segment.html;
+  if (segment.kind === "list") {
+    const items = segment.items.map((i) => i.html).join("");
+    return withMarkers ? `<!--kf-list:${segment.id}-->${items}` : items;
+  }
+  return segment.parts.map((p) => flatten(p, withMarkers)).join("");
+}
+function flattenWithoutListItems(segment) {
+  if (segment.kind === "static") return segment.html;
+  if (segment.kind === "list") return `<!--kf-list:${segment.id}-->`;
+  return segment.parts.map(flattenWithoutListItems).join("");
+}
+function collectLists(segment, out = /* @__PURE__ */ new Map()) {
+  if (segment.kind === "list") out.set(segment.id, segment);
+  else if (segment.kind === "mixed") {
+    for (const part of segment.parts) collectLists(part, out);
+  }
+  return out;
+}
+function mergeChildSegments(parts) {
+  if (parts.length === 0) return { kind: "static", html: "" };
+  if (parts.every((p) => p.kind === "static")) {
+    return {
+      kind: "static",
+      html: parts.map((p) => p.html).join("")
+    };
+  }
+  const merged = [];
+  let coalesced = "";
+  for (const p of parts) {
+    if (p.kind === "static") {
+      coalesced += p.html;
+    } else {
+      if (coalesced !== "") {
+        merged.push({ kind: "static", html: coalesced });
+        coalesced = "";
+      }
+      merged.push(p);
+    }
+  }
+  if (coalesced !== "") merged.push({ kind: "static", html: coalesced });
+  return { kind: "mixed", parts: merged };
+}
+function wrapWithTags(child, openTag, closeTag) {
+  if (child.kind === "static") {
+    return { kind: "static", html: openTag + child.html + closeTag };
+  }
+  if (child.kind === "mixed") {
+    return {
+      kind: "mixed",
+      parts: [
+        { kind: "static", html: openTag },
+        ...child.parts,
+        { kind: "static", html: closeTag }
+      ]
+    };
+  }
+  return {
+    kind: "mixed",
+    parts: [
+      { kind: "static", html: openTag },
+      child,
+      { kind: "static", html: closeTag }
+    ]
+  };
+}
+
+// src/utils/escapeHtml.ts
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/utils/jsx-attr-aliases.ts
+var ATTR_ALIASES = {
+  // HTML attributes
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  acceptCharset: "accept-charset",
+  accessKey: "accesskey",
+  autoCapitalize: "autocapitalize",
+  autoComplete: "autocomplete",
+  autoFocus: "autofocus",
+  autoPlay: "autoplay",
+  colSpan: "colspan",
+  contentEditable: "contenteditable",
+  crossOrigin: "crossorigin",
+  dateTime: "datetime",
+  defaultChecked: "checked",
+  defaultValue: "value",
+  encType: "enctype",
+  formAction: "formaction",
+  formEncType: "formenctype",
+  formMethod: "formmethod",
+  formNoValidate: "formnovalidate",
+  formTarget: "formtarget",
+  hrefLang: "hreflang",
+  inputMode: "inputmode",
+  maxLength: "maxlength",
+  minLength: "minlength",
+  noModule: "nomodule",
+  noValidate: "novalidate",
+  readOnly: "readonly",
+  referrerPolicy: "referrerpolicy",
+  rowSpan: "rowspan",
+  spellCheck: "spellcheck",
+  srcDoc: "srcdoc",
+  srcLang: "srclang",
+  srcSet: "srcset",
+  tabIndex: "tabindex",
+  useMap: "usemap",
+  // SVG presentation attributes (camelCase → kebab-case)
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeOpacity: "stroke-opacity",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  clipPath: "clip-path",
+  clipRule: "clip-rule",
+  colorInterpolation: "color-interpolation",
+  colorInterpolationFilters: "color-interpolation-filters",
+  floodColor: "flood-color",
+  floodOpacity: "flood-opacity",
+  lightingColor: "lighting-color",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  shapeRendering: "shape-rendering",
+  imageRendering: "image-rendering",
+  textRendering: "text-rendering",
+  pointerEvents: "pointer-events",
+  vectorEffect: "vector-effect",
+  paintOrder: "paint-order",
+  // SVG text/font attributes
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontStyle: "font-style",
+  fontVariant: "font-variant",
+  fontWeight: "font-weight",
+  fontStretch: "font-stretch",
+  textAnchor: "text-anchor",
+  textDecoration: "text-decoration",
+  dominantBaseline: "dominant-baseline",
+  alignmentBaseline: "alignment-baseline",
+  baselineShift: "baseline-shift",
+  letterSpacing: "letter-spacing",
+  wordSpacing: "word-spacing",
+  writingMode: "writing-mode",
+  // SVG marker attributes
+  markerStart: "marker-start",
+  markerMid: "marker-mid",
+  markerEnd: "marker-end",
+  // SVG xlink (legacy but still used)
+  xlinkHref: "xlink:href",
+  xlinkShow: "xlink:show",
+  xlinkActuate: "xlink:actuate",
+  xlinkType: "xlink:type",
+  xlinkRole: "xlink:role",
+  xlinkTitle: "xlink:title",
+  xlinkArcrole: "xlink:arcrole",
+  xmlBase: "xml:base",
+  xmlLang: "xml:lang",
+  xmlSpace: "xml:space",
+  xmlnsXlink: "xmlns:xlink"
+};
+
+// src/jsx-runtime.ts
+var SAFE_HTML_BRAND2 = /* @__PURE__ */ Symbol.for("kerfjs.SafeHtml");
+var SafeHtml = class {
+  __html;
+  __segment;
+  // Branded so `isSafeHtml()` recognizes instances from any copy of this module.
+  [SAFE_HTML_BRAND2] = true;
+  constructor(input) {
+    if (typeof input === "string") {
+      this.__segment = { kind: "static", html: input };
+      this.__html = input;
+    } else {
+      this.__segment = input;
+      this.__html = flatten(input, false);
+    }
+  }
+  toString() {
+    return this.__html;
+  }
+};
+function isSafeHtml(value) {
+  return typeof value === "object" && value !== null && value[SAFE_HTML_BRAND2] === true;
+}
+function raw(html) {
+  return new SafeHtml(html);
+}
+function listSafeHtml(id, items) {
+  return new SafeHtml({ kind: "list", id, items });
+}
+function granularListSafeHtml(id, items, patches) {
+  return new SafeHtml({ kind: "list", id, items, patches });
+}
+var VOID_TAGS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "source",
+  "track",
+  "wbr"
+]);
+function toSegment(child) {
+  if (child == null || typeof child === "boolean") return { kind: "static", html: "" };
+  if (isSignal(child)) {
+    const marker = bindText(child);
+    if (marker !== null) return { kind: "static", html: marker };
+    const v = child.value;
+    return { kind: "static", html: v == null || typeof v === "boolean" ? "" : escapeHtml(String(v)) };
+  }
+  if (isSafeHtml(child)) {
+    return child.__segment ?? { kind: "static", html: child.__html };
+  }
+  if (typeof child === "string") return { kind: "static", html: escapeHtml(child) };
+  if (typeof child === "number") return { kind: "static", html: String(child) };
+  if (Array.isArray(child)) return mergeChildSegments(child.map(toSegment));
+  const maybeNode = child;
+  if (typeof maybeNode === "object" && maybeNode !== null && ("nodeType" in maybeNode || "outerHTML" in maybeNode)) {
+    throw new Error(
+      "JSX: DOM elements cannot be passed as children (the JSX runtime renders to HTML strings). Build the tree in one JSX expression and use querySelector after toElement() to get element refs."
+    );
+  }
+  throw new Error(
+    `JSX: unsupported child of type ${describeValue(child)}. Children must be SafeHtml, string, number, boolean, null, undefined, or an array of those. Common mistakes: passing a Signal/Store object directly (use signal.value or store.state.value), passing a function (call it first), or passing a Promise (await it before render).`
+  );
+}
+function describeValue(v) {
+  if (Array.isArray(v)) return "array";
+  if (typeof v === "object" && v !== null) {
+    const ctor = v.constructor?.name;
+    return ctor && ctor !== "Object" ? `object (${ctor})` : "object";
+  }
+  return typeof v;
+}
+var SAFE_ATTR_NAME = /^[A-Za-z_:][\w.:-]*$/;
+function assertEmittableAttrName(key, name, isFn) {
+  if (/^on[a-z]/i.test(name)) {
+    if (isFn) {
+      throw new Error(
+        `JSX: inline event handlers like ${key}={fn} are not supported by kerf's JSX \u2192 HTML-string runtime. Use event delegation from the mount root instead:
+
+  delegate(rootEl, 'click', '[data-action="..."]', (evt, target) => { ... });
+  <button data-action="...">click</button>
+
+See docs/5-event-delegation.md for the tier-1/tier-2/tier-3 model.`
+      );
+    }
+    throw new Error(
+      `JSX: event-handler attribute ${JSON.stringify(key)} is not allowed \u2014 an \`on*\` attribute (whether a string emitted into HTML or a signal bound via setAttribute) installs a live inline handler, an XSS vector. kerf uses event delegation: delegate(rootEl, 'click', '[data-action="..."]', handler). See docs/5-event-delegation.md.`
+    );
+  }
+  if (!SAFE_ATTR_NAME.test(name)) {
+    throw new Error(
+      `JSX: invalid attribute name ${JSON.stringify(key)}. Attribute names must be a letter/underscore/colon followed by letters, digits, or "_.:-" (e.g. class, data-id, aria-label, xlink:href). This usually means an untrusted object was spread into JSX ({...obj}) with attacker-controlled keys \u2014 validate keys first.`
+    );
+  }
+}
+function renderAttr(key, value) {
+  const name = ATTR_ALIASES[key] ?? key;
+  if (value == null || value === false) return "";
+  assertEmittableAttrName(key, name, typeof value === "function");
+  if (value === true) return ` ${name}`;
+  let strValue;
+  if (isSafeHtml(value)) {
+    strValue = value.__html;
+  } else if (typeof value === "number") {
+    strValue = String(value);
+  } else if (typeof value === "string") {
+    if (isDangerousUrlValue(name, value)) {
+      console.warn(`JSX: ${dangerousUrlWarning(name, value)}`);
+      return "";
+    }
+    strValue = escapeAttr(value);
+  } else {
+    throw new Error(
+      `JSX: unsupported value for attribute "${key}" \u2014 got ${describeValue(value)}. Attribute values must be string, number, boolean, null, undefined, or SafeHtml. Did you mean to read .value off a Signal, or stringify the object first?`
+    );
+  }
+  return ` ${name}="${strValue}"`;
+}
+function jsx(tag, props) {
+  if (typeof tag === "function") return tag(props);
+  const { children, ...attrs } = props;
+  let attrStr = "";
+  let bindIds = null;
+  for (const [k, v] of Object.entries(attrs)) {
+    if (isSignal(v)) {
+      const name = ATTR_ALIASES[k] ?? k;
+      assertEmittableAttrName(k, name, false);
+      const id = bindAttr(name, v);
+      if (id !== null) {
+        (bindIds ??= []).push(id);
+        continue;
+      }
+      attrStr += renderAttr(k, v.value);
+      continue;
+    }
+    attrStr += renderAttr(k, v);
+  }
+  if (bindIds !== null) attrStr += ` ${bindMarkerAttr()}="${bindIds.join(",")}"`;
+  if (VOID_TAGS.has(tag)) return new SafeHtml(`<${tag}${attrStr}>`);
+  const childSegment = children != null ? toSegment(children) : { kind: "static", html: "" };
+  return new SafeHtml(wrapWithTags(childSegment, `<${tag}${attrStr}>`, `</${tag}>`));
+}
+function Fragment({ children }) {
+  return new SafeHtml(children != null ? toSegment(children) : { kind: "static", html: "" });
+}
+
+export { Fragment, SafeHtml, _setBindingContext, captureRowBindings, collectLists, disposeRowBindings, flatten, flattenWithoutListItems, granularListSafeHtml, isSafeHtml, jsx, listSafeHtml, newBindingContext, raw, wireBindings, wireRowBindings };
+//# sourceMappingURL=chunk-QNYOMGI4.js.map
+//# sourceMappingURL=chunk-QNYOMGI4.js.map