tosijs-floorplan 0.3.0

package/dist/index.js

@@ -0,0 +1,298 @@
+// src/index.ts
+var BOUND_TO_DOM = "⟵";
+var BOUND_TWO_WAY = "⟷";
+var shownValue = (v) => {
+  if (typeof v !== "string")
+    return;
+  for (const arrow of [BOUND_TWO_WAY, BOUND_TO_DOM]) {
+    const at = v.indexOf(arrow);
+    if (at >= 0)
+      return v.slice(0, at).trim();
+  }
+  return v;
+};
+var boundsOf = (element) => {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: Math.round(rect.x + (globalThis.scrollX ?? 0)),
+    y: Math.round(rect.y + (globalThis.scrollY ?? 0)),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height)
+  };
+};
+var intersects = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+var contains = (outer, inner) => inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+var esc = (s) => s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+var TRANSPARENT = "rgba(0, 0, 0, 0)";
+var FLAG_COLORS = {
+  error: "#d32f2f",
+  warn: "#e6a700",
+  info: "#888888"
+};
+var wrapCaption = (caption, maxChars, maxLines) => {
+  if (maxLines <= 1 || caption.length <= maxChars) {
+    return [caption.slice(0, maxChars + 2)];
+  }
+  const words = caption.split(" ");
+  const lines = [];
+  let line = "";
+  for (const word of words) {
+    const candidate = line === "" ? word : `${line} ${word}`;
+    if (candidate.length <= maxChars) {
+      line = candidate;
+    } else {
+      if (line !== "")
+        lines.push(line);
+      line = word.length > maxChars ? word.slice(0, maxChars) : word;
+      if (lines.length === maxLines)
+        break;
+    }
+  }
+  if (lines.length < maxLines && line !== "")
+    lines.push(line);
+  if (lines.length > maxLines || lines.length === maxLines && line !== "" && !lines.includes(line)) {
+    lines.length = maxLines;
+    lines[maxLines - 1] = lines[maxLines - 1].slice(0, maxChars - 1) + "…";
+  }
+  return lines;
+};
+var schematic = (description, options = {}) => {
+  const {
+    pad = 8,
+    minLabelHeight = 14,
+    maxCaption = 36,
+    fontSize = 11,
+    within,
+    index: showIndex = false,
+    targetSize = 24,
+    legendNote = true,
+    decorate
+  } = options;
+  const legend = [];
+  const boxes = description.wiring.filter((w) => w.bounds != null && w.bounds.width > 0 && w.bounds.height > 0 && (w.viewportFixed === true || w.bounds.x + w.bounds.width > 0 && w.bounds.y + w.bounds.height > 0) && (within == null || w.viewportFixed === true || intersects(w.bounds, within)));
+  const flow = boxes.filter((w) => w.viewportFixed !== true);
+  if (boxes.length === 0) {
+    return {
+      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0"></svg>',
+      legend
+    };
+  }
+  const fitBoxes = flow.length > 0 ? flow : boxes;
+  const minX = within != null ? within.x - pad : Math.min(...fitBoxes.map((w) => w.bounds.x)) - pad;
+  const minY = within != null ? within.y - pad : Math.min(...fitBoxes.map((w) => w.bounds.y)) - pad;
+  const maxX = within != null ? within.x + within.width + pad : Math.max(...fitBoxes.map((w) => w.bounds.x + w.bounds.width)) + pad;
+  const maxY = within != null ? within.y + within.height + pad : Math.max(...fitBoxes.map((w) => w.bounds.y + w.bounds.height)) + pad;
+  const parts = [
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${minX} ${minY} ${maxX - minX} ${maxY - minY}" width="${maxX - minX}" height="${maxY - minY}">`
+  ];
+  const ground = (w) => w.structural === true || w.list != null && w.on == null;
+  const drawOrder = [...boxes].sort((a, b) => Number(ground(b)) - Number(ground(a)));
+  for (const w of drawOrder) {
+    const index = description.wiring.indexOf(w);
+    const pinOffsetX = w.viewportFixed === true ? minX + pad : 0;
+    const pinOffsetY = w.viewportFixed === true ? minY + pad : 0;
+    const x = w.bounds.x + pinOffsetX;
+    const y = w.bounds.y + pinOffsetY;
+    const { width, height } = w.bounds;
+    const isContainer = w.viewportFixed !== true && boxes.some((other) => other !== w && other.viewportFixed !== true && contains(w.bounds, other.bounds));
+    const toggle = w.type === "checkbox" || w.type === "radio";
+    let caption;
+    let hint = false;
+    if (isContainer) {
+      caption = String(w.label ?? "");
+    } else if (toggle) {
+      caption = String(w.label ?? "");
+    } else if (w.tag === "input" || w.tag === "textarea" || w.tag === "select" || w.contentEditable === true) {
+      const value = shownValue(w.value);
+      if (value) {
+        caption = w.label != null ? `${w.label}: ${value}` : value;
+      } else if (w.placeholder != null && w.placeholder !== "") {
+        caption = String(w.placeholder);
+        hint = true;
+      } else {
+        caption = String(w.label ?? w.text ?? `<${w.tag}>`);
+      }
+    } else {
+      caption = String(w.label ?? shownValue(w.text) ?? shownValue(w.value) ?? w.href ?? `<${w.tag}>`);
+    }
+    const structural = ground(w);
+    const actable = !structural && w.on != null;
+    const editable = !structural && (w.contentEditable === true || Object.values(w).some((v) => typeof v === "string" && v.includes(BOUND_TWO_WAY)));
+    const fill = structural ? "none" : w.style != null ? w.style.background : "transparent";
+    const stroke = !structural && w.style != null && w.style.borderColor !== TRANSPARENT ? w.style.borderColor : "currentColor";
+    const color = w.style != null ? w.style.color : "currentColor";
+    const drawImage = !structural && typeof w.image === "string" && w.image.startsWith("data:");
+    const cramped = !structural && (height < minLabelHeight || width < fontSize * 3);
+    const interactive = !structural && (w.on != null || w.contentEditable === true || Object.values(w).some((v) => typeof v === "string" && v.includes(BOUND_TWO_WAY)));
+    const producerTargetFlag = Array.isArray(w.flags) && w.flags.some((f) => f.kind.toLowerCase().includes("target"));
+    const textSizedLink = w.tag === "a" && typeof w.text === "string" && w.text !== "";
+    const undersized = targetSize > 0 && interactive && !producerTargetFlag && !textSizedLink && !(w.type === "checkbox" || w.type === "radio") && (width < targetSize || height < targetSize) ? `${width}×${height} — below ${targetSize}×${targetSize} (WCAG 2.5.8)` : undefined;
+    const emphasis = structural ? ' stroke-dasharray="1 3" stroke-linecap="round" opacity="0.45"' : w.disabled === true ? ' opacity="0.4"' : actable ? ' stroke-width="2"' : "";
+    parts.push(`<g data-record="${index}"${w.ref != null ? ` data-ref="${esc(String(w.ref))}"` : ""}>`);
+    if (w.type === "radio") {
+      const r = Math.min(width, height) / 2;
+      const cx = x + width / 2;
+      const cy = y + height / 2;
+      parts.push(`<circle cx="${cx}" cy="${cy}" r="${r - 0.5}" fill="${esc(fill)}" ` + `stroke="${esc(stroke)}"${emphasis}/>`);
+      if (w.checked === true) {
+        parts.push(`<circle cx="${cx}" cy="${cy}" r="${Math.max(2, r * 0.45)}" ` + `fill="${esc(color)}"/>`);
+      }
+    } else {
+      parts.push(`<rect x="${x}" y="${y}" width="${width}" height="${height}" ` + `fill="${esc(fill)}" stroke="${esc(stroke)}"${emphasis}/>`);
+      if (drawImage) {
+        parts.push(`<image x="${x + 1}" y="${y + 1}" width="${width - 2}" ` + `height="${height - 2}" href="${esc(w.image)}" ` + `preserveAspectRatio="xMidYMid meet"/>`);
+      }
+      if (w.type === "checkbox" && w.checked === true) {
+        const inset = 3;
+        parts.push(`<line x1="${x + inset}" y1="${y + inset}" x2="${x + width - inset}" ` + `y2="${y + height - inset}" stroke="${esc(color)}" stroke-width="1.5"/>`, `<line x1="${x + inset}" y1="${y + height - inset}" ` + `x2="${x + width - inset}" y2="${y + inset}" ` + `stroke="${esc(color)}" stroke-width="1.5"/>`);
+      }
+    }
+    if (!cramped && !structural && Array.isArray(w.flags) && w.flags.length > 0) {
+      w.flags.forEach((flag, at) => {
+        const color2 = FLAG_COLORS[flag.severity ?? "warn"] ?? FLAG_COLORS.warn;
+        parts.push(`<rect x="${x + at * 3}" y="${y}" width="3" height="${height}" ` + `fill="${color2}" data-flag="${esc(flag.kind)}"/>`);
+      });
+      const first = w.flags[0];
+      if (first.label && height >= minLabelHeight) {
+        const flagColor = FLAG_COLORS[first.severity ?? "warn"] ?? FLAG_COLORS.warn;
+        parts.push(`<rect x="${x + w.flags.length * 3 + 1}" y="${y + height - 9}" ` + `width="${first.label.length * 4.5 + 2}" height="8" ` + `fill="white" opacity="0.85"/>`, `<text x="${x + w.flags.length * 3 + 2}" y="${y + height - 2}" ` + `font-size="7" font-family="monospace" fill="${flagColor}">` + `${esc(first.label)}</text>`);
+      }
+    }
+    if (undersized != null) {
+      parts.push(`<rect x="${x}" y="${y}" width="3" height="${height}" ` + `fill="${FLAG_COLORS.warn}" data-flag="target-size"/>`);
+    }
+    if (w.invalid === true && !structural) {
+      const flagSize = Math.min(7, Math.floor(Math.min(width, height) / 2));
+      parts.push(`<path d="M${x} ${y} l${flagSize} 0 l-${flagSize} ${flagSize} z" ` + `fill="#d32f2f"/>`);
+    }
+    if (w.focused === true && !structural) {
+      parts.push(`<rect x="${x - 2.5}" y="${y - 2.5}" width="${width + 5}" ` + `height="${height + 5}" fill="none" stroke="${esc(stroke)}" ` + `stroke-width="1.5"/>`);
+    }
+    if (editable && !toggle && !cramped) {
+      parts.push(`<text x="${x + width - 3}" y="${y + height - 4}" ` + `font-size="${fontSize}" text-anchor="end" ` + `font-family="monospace" fill="${esc(color)}">↔</text>`);
+    }
+    let drawnCaption = null;
+    const shownCaption = w.required === true && !structural && caption !== "" ? `${caption} *` : caption;
+    if (toggle) {
+      if (shownCaption !== "") {
+        parts.push(`<text x="${x + width + 4}" ` + `y="${y + height / 2 + fontSize / 2 - 1}" ` + `font-size="${fontSize}" font-family="monospace" ` + `fill="${esc(color)}">` + `${esc(shownCaption.slice(0, maxCaption + 2))}</text>`);
+      }
+    } else if (!cramped && height >= minLabelHeight && shownCaption !== "") {
+      const lineHeight = fontSize + 2;
+      const maxLines = Math.max(1, Math.floor((height - 6) / lineHeight));
+      const perLine = Math.min(maxCaption, Math.max(8, Math.floor((width - 8) / (fontSize * 0.6))));
+      const lines = wrapCaption(shownCaption, perLine, maxLines);
+      drawnCaption = lines.join(" ");
+      const styleAttrs = `font-size="${fontSize}" font-family="monospace" fill="${esc(color)}"` + `${hint ? ' font-style="italic" opacity="0.6"' : ""}`;
+      if (lines.length === 1) {
+        parts.push(`<text x="${x + 4}" y="${y + Math.min(height - 4, fontSize + 2)}" ` + `${styleAttrs}>${esc(lines[0])}</text>`);
+      } else {
+        parts.push(`<text x="${x + 4}" y="${y + fontSize + 2}" ${styleAttrs}>` + lines.map((line, at) => `<tspan x="${x + 4}"${at > 0 ? ` dy="${lineHeight}"` : ""}>` + `${esc(line)}</tspan>`).join("") + "</text>");
+      }
+    }
+    const truncated = drawnCaption != null && drawnCaption.length < shownCaption.split(" ").filter(Boolean).join(" ").length;
+    const elided = { index, tag: w.tag };
+    if (w.ref != null)
+      elided.ref = String(w.ref);
+    if (typeof w.href === "string" && w.href !== "" && !structural) {
+      elided.href = w.href;
+    }
+    if (cramped || truncated) {
+      if (shownCaption !== "" && !toggle)
+        elided.caption = caption;
+      const heldValue = shownValue(w.value);
+      if (heldValue)
+        elided.value = heldValue;
+      if (cramped) {
+        if (editable)
+          elided.editable = true;
+        if (w.required === true)
+          elided.required = true;
+        if (Array.isArray(w.flags) && w.flags.length > 0) {
+          elided.flags = w.flags;
+        }
+      }
+    }
+    if (w.invalid === true && cramped)
+      elided.invalid = true;
+    if (w.disabled === true && cramped)
+      elided.disabled = true;
+    if (undersized != null)
+      elided.undersized = undersized;
+    const inLegend = elided.caption != null || elided.href != null || elided.value != null || elided.editable != null || elided.required != null || elided.flags != null || elided.invalid != null || elided.disabled != null || elided.undersized != null;
+    if (inLegend)
+      legend.push(elided);
+    if (showIndex || w.ref != null || inLegend) {
+      const shown = w.ref != null ? String(w.ref) : String(index);
+      const indexX = toggle ? x - 3 : x + width - 2;
+      parts.push(`<rect x="${indexX - shown.length * 5 - 1}" y="${y + 1}" ` + `width="${shown.length * 5 + 2}" height="8" fill="white" ` + `opacity="0.85" data-index-backdrop="true"/>`, `<text x="${indexX}" y="${y + 8}" font-size="8" ` + `text-anchor="end" font-family="monospace" fill="black" ` + `opacity="0.8">${esc(shown)}</text>`);
+    }
+    if (decorate != null) {
+      decorate({
+        record: w,
+        index,
+        x,
+        y,
+        width,
+        height,
+        structural,
+        emit: (svg) => parts.push(svg)
+      });
+    }
+    parts.push("</g>");
+  }
+  const footerExtra = legendNote && legend.length > 0 ? 14 : 0;
+  if (footerExtra > 0) {
+    parts.push(`<text x="${minX + pad}" y="${maxY + 10}" font-size="8" ` + `font-family="monospace" fill="currentColor" opacity="0.75">` + `${legend.length} element${legend.length === 1 ? "" : "s"} with ` + `details in legend — match by stamped number</text>`);
+  }
+  parts[0] = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${minX} ${minY} ${maxX - minX} ${maxY - minY + footerExtra}" width="${maxX - minX}" height="${maxY - minY + footerExtra}">` + (legend.length > 0 ? `<desc>${description.wiring.length} records; ${legend.length} ` + "legend entries carry metadata the drawing could not — pair this " + "image with its legend JSON (schematic().legend), matched by the " + "stamped number / data-record index.</desc>" : "");
+  parts.push("</svg>");
+  return { svg: parts.join(""), legend };
+};
+var schematicSVG = (description, options = {}) => schematic(description, options).svg;
+var rasterizeSVG = (svg, options = {}) => {
+  const { scale = 2 } = options;
+  if (typeof document === "undefined" || typeof Image === "undefined") {
+    return Promise.reject(new Error("rasterizeSVG needs a browser (Image + canvas); under bun/node use @resvg/resvg-js — see the doc comment"));
+  }
+  const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+  const img = new Image;
+  return new Promise((resolve, reject) => {
+    img.onload = () => {
+      try {
+        const width = (img.naturalWidth || 800) * scale;
+        const height = (img.naturalHeight || 600) * scale;
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (ctx == null)
+          throw new Error("no 2d context");
+        ctx.drawImage(img, 0, 0, width, height);
+        canvas.toBlob((blob) => {
+          if (blob != null)
+            resolve(blob);
+          else
+            reject(new Error("canvas.toBlob produced no data"));
+        }, "image/png");
+      } catch (e) {
+        reject(e);
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("SVG failed to load as an image"));
+    };
+    img.src = url;
+  });
+};
+export {
+  schematicSVG,
+  schematic,
+  rasterizeSVG,
+  boundsOf,
+  BOUND_TWO_WAY,
+  BOUND_TO_DOM
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "tosijs-floorplan",
+  "version": "0.3.0",
+  "description": "Render an agent-surface map (plain records) as a floorplan SVG — the affordance grammar as a pure, dependency-free function. No DOM, no framework. Formerly tosijs-schematic.",
+  "type": "module",
+  "license": "Apache-2.0",
+  "author": "Tonio Loewald",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tonioloewald/tosijs-floorplan.git"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bun build src/index.ts --outdir dist --format esm && tsc -p tsconfig.json",
+    "test": "bun test",
+    "prepublishOnly": "bun test && bun run build"
+  },
+  "devDependencies": {
+    "typescript": "^7.0.2"
+  },
+  "keywords": [
+    "floorplan",
+    "schematic",
+    "svg",
+    "agent",
+    "accessibility",
+    "affordance",
+    "wireframe",
+    "tosijs",
+    "webmcp"
+  ]
+}