@heyramzi/ui 2.8.0 → 2.10.0

package/dist/canvas/headless/svg-figure.js

@@ -0,0 +1,137 @@
+const ALLOWED_TAGS = new Set([
+    "svg",
+    "g",
+    "defs",
+    "title",
+    "desc",
+    "linearGradient",
+    "radialGradient",
+    "stop",
+    "marker",
+    "clipPath",
+    "path",
+    "rect",
+    "circle",
+    "ellipse",
+    "line",
+    "polyline",
+    "polygon",
+    "text",
+    "tspan"
+]);
+const ALLOWED_ATTRS = new Set([
+    "viewBox",
+    "width",
+    "height",
+    "x",
+    "y",
+    "x1",
+    "x2",
+    "y1",
+    "y2",
+    "cx",
+    "cy",
+    "r",
+    "rx",
+    "ry",
+    "d",
+    "points",
+    "dx",
+    "dy",
+    "transform",
+    "fill",
+    "fill-opacity",
+    "fill-rule",
+    "stroke",
+    "stroke-width",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-opacity",
+    "opacity",
+    "font-size",
+    "font-weight",
+    "font-style",
+    "letter-spacing",
+    "text-anchor",
+    "dominant-baseline",
+    "offset",
+    "stop-color",
+    "stop-opacity",
+    "gradientUnits",
+    "gradientTransform",
+    "clip-path",
+    "clipPathUnits",
+    "marker-end",
+    "marker-start",
+    "markerWidth",
+    "markerHeight",
+    "refX",
+    "refY",
+    "orient",
+    "id",
+    "class",
+    "preserveAspectRatio"
+]);
+export const MAX_FIGURE_CHARS = 16000;
+const TAG = /<\/?([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>])*?)\/?>/g;
+const ATTR = /([a-zA-Z][\w:-]*)\s*=\s*("([^"]*)"|'([^']*)')/g;
+const FOREIGN_URL = /url\(\s*['"]?(?!#)/i;
+function cleanAttrs(raw) {
+    const kept = [];
+    for (const match of raw.matchAll(ATTR)){
+        const name = match[1];
+        const value = match[3] ?? match[4] ?? "";
+        if (!ALLOWED_ATTRS.has(name)) continue;
+        if (FOREIGN_URL.test(value)) continue;
+        kept.push(`${name}="${value.replace(/"/g, "&quot;")}"`);
+    }
+    return kept.length > 0 ? ` ${kept.join(" ")}` : "";
+}
+export function sanitizeFigureSvg(raw) {
+    if (typeof raw !== "string" || raw.length > MAX_FIGURE_CHARS) return null;
+    const stripped = raw.replace(/<!--[\s\S]*?-->/g, "").replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "").replace(/<\?[\s\S]*?\?>/g, "").replace(/<!DOCTYPE[^>]*>/gi, "").replace(/<(script|style|foreignObject|iframe)\b[\s\S]*?<\/\1\s*>/gi, "");
+    if (!/<svg\b/i.test(stripped)) return null;
+    let out = "";
+    let cursor = 0;
+    for (const match of stripped.matchAll(TAG)){
+        const [tag, name, attrs] = match;
+        const start = match.index ?? 0;
+        out += stripped.slice(cursor, start);
+        cursor = start + tag.length;
+        if (!ALLOWED_TAGS.has(name)) continue;
+        if (tag.startsWith("</")) {
+            out += `</${name}>`;
+            continue;
+        }
+        out += `<${name}${cleanAttrs(attrs)}${tag.endsWith("/>") ? " />" : ">"}`;
+    }
+    out += stripped.slice(cursor);
+    return out.trim();
+}
+function rootAttr(svg, name) {
+    const root = svg.match(/<svg\b([^>]*)>/i);
+    if (!root) return undefined;
+    const found = root[1].match(new RegExp(`${name}\\s*=\\s*"([^"]*)"`, "i"));
+    return found?.[1];
+}
+export function figureRatio(svg) {
+    const box = rootAttr(svg, "viewBox");
+    if (box) {
+        const [, , w, h] = box.trim().split(/[\s,]+/).map(Number);
+        if (w > 0 && h > 0) return h / w;
+    }
+    const w = Number.parseFloat(rootAttr(svg, "width") ?? "");
+    const h = Number.parseFloat(rootAttr(svg, "height") ?? "");
+    return w > 0 && h > 0 ? h / w : null;
+}
+export function figureBoxHeight(svg, width, fallback = 0.4) {
+    return Math.round(width * (figureRatio(svg) ?? fallback));
+}
+const LABEL_H = 27;
+const CAPTION_H = 24;
+export function figureNodeHeight(figure, width) {
+    const art = figure.height ?? figureBoxHeight(figure.svg ?? "", width);
+    return art + (figure.label ? LABEL_H : 0) + (figure.caption ? CAPTION_H : 0);
+}

package/dist/canvas/headless/table-layout.js

@@ -0,0 +1,161 @@
+const CELL_CHAR_W = 6.7;
+export const TABLE_CELL_PAD_X = 12;
+const ROW_LINE_H = 18;
+const ROW_BORDER = 1;
+const TABLE_EMPTY_H = 56;
+const SECTION_ROW_H = 29;
+const NOTE_LINE_H = 16;
+export const TABLE_DEPTH_INDENT = 16;
+export const TABLE_TITLE_H = 49;
+export const TABLE_COLHEAD_H = 33;
+const TABLE_ROW_PAD_Y = 20;
+export const TABLE_MIN_W = 360;
+export const TABLE_MAX_W = 760;
+const FILL_COL_CH = 32;
+const HAND_FONT_FACTOR = 1.12;
+export const TABLE_RESIZE_MAX_W = 1600;
+const MIN_COL_CH = 9;
+const MAX_COL_CH = 48;
+export function tableColumnCount(headers, rows) {
+    return Math.max(headers.length, rows.reduce((max, row)=>Math.max(max, row.cells?.length ?? 0), 0), 1);
+}
+export function tableColumnWeights(headers, rows, explicit) {
+    const count = tableColumnCount(headers, rows);
+    if (explicit && explicit.length === count && explicit.every((w)=>w > 0)) {
+        return normalize(explicit);
+    }
+    return normalize(naturalColumnChars(headers, rows, count));
+}
+function naturalColumnChars(headers, rows, count) {
+    return Array.from({
+        length: count
+    }, (_, i)=>{
+        const head = headers[i]?.length ?? 0;
+        const cells = rows.filter((row)=>!row.section).map((row)=>row.cells?.[i] ?? "");
+        const body = cells.reduce((max, cell)=>Math.max(max, cell.length), 0);
+        const blank = cells.length > 0 && cells.every(isBlankCell);
+        const wants = blank ? Math.max(head, FILL_COL_CH) : Math.max(head, body);
+        return Math.min(MAX_COL_CH, Math.max(MIN_COL_CH, wants));
+    });
+}
+export function isBlankCell(value) {
+    return /^[\s.…?\-–—_]*$/.test(value);
+}
+export const TABLE_COL_MIN_W = MIN_COL_CH * CELL_CHAR_W + TABLE_CELL_PAD_X * 2;
+export function tableGridTemplate(weights, floor = 0) {
+    const min = floor > 0 ? `${floor}px` : "0";
+    return weights.map((w)=>`minmax(${min}, ${w.toFixed(4)}fr)`).join(" ");
+}
+export function tableColumnPx(weights, width) {
+    const out = weights.map(()=>0);
+    const pinned = new Set();
+    let changed = true;
+    while(changed){
+        changed = false;
+        const free = weights.reduce((sum, w, i)=>sum + (pinned.has(i) ? 0 : w), 0);
+        const room = width - pinned.size * TABLE_COL_MIN_W;
+        weights.forEach((w, i)=>{
+            if (pinned.has(i)) return;
+            out[i] = free > 0 ? room * w / free : 0;
+            if (out[i] < TABLE_COL_MIN_W && pinned.size < weights.length - 1) {
+                pinned.add(i);
+                changed = true;
+            }
+        });
+    }
+    return out.map((px, i)=>pinned.has(i) ? TABLE_COL_MIN_W : px);
+}
+function charWidth(font) {
+    return font === "hand" ? CELL_CHAR_W * HAND_FONT_FACTOR : CELL_CHAR_W;
+}
+export function tableWidth(headers, rows, ceiling = TABLE_MAX_W, font = "plain") {
+    const fitted = Math.ceil(naturalWidth(headers, rows, font));
+    return Math.min(ceiling, TABLE_MAX_W, Math.max(TABLE_MIN_W, fitted));
+}
+export function tableMinWidth(headers, rows) {
+    return tableColumnCount(headers, rows) * TABLE_COL_MIN_W + 2;
+}
+function naturalWidth(headers, rows, font) {
+    const count = tableColumnCount(headers, rows);
+    return naturalColumnChars(headers, rows, count).reduce((sum, ch)=>sum + ch * charWidth(font) + TABLE_CELL_PAD_X * 2, 0);
+}
+export function tableWeightsAt(headers, rows, width, { explicit, font = "plain" } = {}) {
+    if (width >= naturalWidth(headers, rows, font)) return tableColumnWeights(headers, rows);
+    return tableColumnWeights(headers, rows, explicit);
+}
+export function tableNumericColumns(rows, count) {
+    return Array.from({
+        length: count
+    }, (_, i)=>{
+        const values = rows.filter((row)=>!row.section).map((row)=>row.cells?.[i]?.trim() ?? "").filter(Boolean);
+        return values.length > 0 && values.every(isFigure);
+    });
+}
+function isFigure(value) {
+    return /^[-+]?[$€£]?\s?\d[\d\s.,]*\s?[%x×]?$/.test(value);
+}
+function wrappedLines(text, columnWidth, charW = CELL_CHAR_W) {
+    const inner = Math.max(charW, columnWidth - TABLE_CELL_PAD_X * 2);
+    const perLine = Math.max(1, Math.floor(inner / charW));
+    return Math.max(1, Math.ceil(text.length / perLine));
+}
+export function tableColumnsAt(headers, rows, width, { sizing, weights }) {
+    const count = tableColumnCount(headers, rows);
+    const inner = Math.max(count * TABLE_COL_MIN_W, width - 2);
+    const pinned = sizing.columnWidths;
+    if (pinned && pinned.length === count && pinned.every((w)=>w > 0)) {
+        return tableColumnPx(pinned, inner);
+    }
+    const split = sizing.userWidth != null ? tableColumnWeights(headers, rows, weights) : tableWeightsAt(headers, rows, width, {
+        explicit: weights,
+        font: sizing.font
+    });
+    return tableColumnPx(split, inner);
+}
+export function tableColumns(headers, rows, sizing = {}, weights) {
+    const count = tableColumnCount(headers, rows);
+    const pinned = sizing.columnWidths;
+    const hasPinned = pinned && pinned.length === count && pinned.every((w)=>w > 0);
+    const width = sizing.userWidth ?? (hasPinned ? Math.round(pinned.reduce((sum, w)=>sum + w, 0)) + 2 : tableWidth(headers, rows, TABLE_MAX_W, sizing.font));
+    return {
+        width,
+        columns: tableColumnsAt(headers, rows, width, {
+            sizing,
+            weights
+        })
+    };
+}
+export function tableRowHeights(rows, columns, sizing = {}) {
+    const charW = charWidth(sizing.font ?? "plain");
+    const full = columns.reduce((sum, px)=>sum + px, 0);
+    return rows.map((row, i)=>{
+        if (row.section) return Math.max(SECTION_ROW_H, sizing.rowHeights?.[i] ?? 0);
+        const indent = (row.depth ?? 0) * TABLE_DEPTH_INDENT;
+        const lines = columns.reduce((max, px, c)=>Math.max(max, wrappedLines(row.cells?.[c] ?? "", c === 0 ? px - indent : px, charW)), 1);
+        const note = row.note ? wrappedLines(row.note, full - indent) * NOTE_LINE_H : 0;
+        const content = TABLE_ROW_PAD_Y + lines * ROW_LINE_H + ROW_BORDER + note;
+        return Math.max(content, sizing.rowHeights?.[i] ?? 0);
+    });
+}
+export function tableHeight(headers, rows, width, { explicit, sizing = {} } = {}) {
+    const head = headers.length > 0 ? TABLE_COLHEAD_H : 0;
+    if (rows.length === 0) return TABLE_TITLE_H + head + TABLE_EMPTY_H;
+    const columns = tableColumnsAt(headers, rows, width, {
+        sizing,
+        weights: explicit
+    });
+    const body = tableRowHeights(rows, columns, sizing).reduce((sum, h)=>sum + h, 0);
+    return Math.max(sizing.userHeight ?? 0, TABLE_TITLE_H + head + body);
+}
+export function tableColumnFit(headers, rows, col, font = "plain") {
+    const longest = [
+        headers[col] ?? "",
+        ...rows.filter((row)=>!row.section).map((row)=>row.cells?.[col] ?? "")
+    ].reduce((max, text)=>Math.max(max, text.length), 0);
+    const px = Math.ceil(longest * charWidth(font)) + TABLE_CELL_PAD_X * 2;
+    return Math.max(TABLE_COL_MIN_W, Math.min(px, TABLE_RESIZE_MAX_W));
+}
+function normalize(weights) {
+    const total = weights.reduce((sum, w)=>sum + w, 0);
+    return total > 0 ? weights.map((w)=>w / total) : weights.map(()=>1 / weights.length);
+}

package/dist/canvas/index.js

@@ -0,0 +1,25 @@
+export * from "./types.js";
+export * from "./plugin.js";
+export { tryCatch, tryCatchAsync } from "../lib/result.js";
+export * from "./ops/ops.js";
+export * from "./headless/alignment.js";
+export * from "./headless/canvas-cleanup.js";
+export * from "./headless/edge-anchors.js";
+export * from "./headless/edge-serialization.js";
+export * from "./headless/fit-viewport.js";
+export * from "./headless/grid.js";
+export * from "./headless/icon-node.js";
+export * from "./headless/linkify.js";
+export * from "./headless/sketch.js";
+export * from "./headless/snap-guides.js";
+export * from "./headless/svg-figure.js";
+export * from "./headless/table-layout.js";
+export { resolveContextMenuHit } from "./editor/context-menu.js";
+export * from "./editor/editor-context.js";
+export * from "./editor/dispatch.svelte.js";
+export * from "./editor/editor-mode.js";
+export * from "./editor/history-core.js";
+export * from "./editor/keymap.js";
+export * from "./editor/layout-actions.js";
+export * from "./editor/rebase.js";
+export * from "./editor/text-field-context.js";

package/dist/canvas/lod/lod-mode.svelte.js

@@ -0,0 +1,22 @@
+import { untrack } from "svelte";
+export const LOW_BELOW = 0.4;
+export const FULL_ABOVE = 0.46;
+const modes = new WeakMap();
+export function lodMode(store) {
+    const known = modes.get(store);
+    if (known) return known;
+    const mode = $state({
+        low: store.viewport.zoom < LOW_BELOW
+    });
+    modes.set(store, mode);
+    $effect.root(()=>{
+        $effect(()=>{
+            const zoom = store.viewport.zoom;
+            untrack(()=>{
+                if (mode.low && zoom > FULL_ABOVE) mode.low = false;
+                else if (!mode.low && zoom < LOW_BELOW) mode.low = true;
+            });
+        });
+    });
+    return mode;
+}

package/dist/canvas/lod/render-all.svelte.js

@@ -0,0 +1,45 @@
+import { tick } from "svelte";
+const hold = $state({
+    count: 0
+});
+export const renderAll = {
+    get on () {
+        return hold.count > 0;
+    }
+};
+const frame = ()=>new Promise((resolve)=>requestAnimationFrame(()=>resolve()));
+const DRAWN = ".svelte-flow__node, .svelte-flow__edge";
+const SETTLE_FRAMES = 8;
+const GIVE_UP_MS = 4000;
+export const EVERY_CARD_ATTR = "data-cv-every-card";
+export async function withEveryCard(root, use) {
+    hold.count += 1;
+    const marked = root instanceof Element ? root : null;
+    marked?.setAttribute(EVERY_CARD_ATTR, "");
+    try {
+        await tick();
+        const start = performance.now();
+        let last = -1;
+        let still = 0;
+        while(still < SETTLE_FRAMES && performance.now() - start < GIVE_UP_MS){
+            await frame();
+            const now = root.querySelectorAll(DRAWN).length;
+            still = now === last ? still + 1 : 0;
+            last = now;
+        }
+        if ("getAnimations" in root) {
+            const running = root.getAnimations({
+                subtree: true
+            });
+            await Promise.race([
+                Promise.allSettled(running.map((animation)=>animation.finished)),
+                new Promise((resolve)=>setTimeout(resolve, 1000))
+            ]);
+        }
+        await frame();
+        return await use();
+    } finally{
+        hold.count -= 1;
+        if (hold.count === 0) marked?.removeAttribute(EVERY_CARD_ATTR);
+    }
+}

package/dist/canvas/ops/arrange.js

@@ -0,0 +1,83 @@
+export const ALIGNMENTS = [
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "center-horizontal",
+    "center-vertical"
+];
+export function alignPositions(items, alignment) {
+    const moved = new Map();
+    if (items.length < 2) return moved;
+    const left = Math.min(...items.map((item)=>item.position.x));
+    const top = Math.min(...items.map((item)=>item.position.y));
+    const right = Math.max(...items.map((item)=>item.position.x + item.width));
+    const bottom = Math.max(...items.map((item)=>item.position.y + item.height));
+    for (const item of items){
+        const { x, y } = item.position;
+        const next = {
+            x,
+            y
+        };
+        if (alignment === "left") next.x = left;
+        else if (alignment === "right") next.x = right - item.width;
+        else if (alignment === "top") next.y = top;
+        else if (alignment === "bottom") next.y = bottom - item.height;
+        else if (alignment === "center-horizontal") next.x = (left + right) / 2 - item.width / 2;
+        else next.y = (top + bottom) / 2 - item.height / 2;
+        if (next.x !== x || next.y !== y) moved.set(item.id, next);
+    }
+    return moved;
+}
+function along(axis) {
+    const horizontal = axis === "horizontal";
+    return {
+        start: (item)=>horizontal ? item.position.x : item.position.y,
+        size: (item)=>horizontal ? item.width : item.height,
+        place: (item, at)=>horizontal ? {
+                x: at,
+                y: item.position.y
+            } : {
+                x: item.position.x,
+                y: at
+            }
+    };
+}
+function inOrder(items, axis) {
+    const { start } = along(axis);
+    return [
+        ...items
+    ].sort((a, b)=>start(a) - start(b));
+}
+export function distributePositions(items, axis) {
+    const moved = new Map();
+    if (items.length < 3) return moved;
+    const { start, size, place } = along(axis);
+    const sorted = inOrder(items, axis);
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    if (!first || !last) return moved;
+    const span = start(last) + size(last) - start(first);
+    const used = sorted.reduce((sum, item)=>sum + size(item), 0);
+    const gap = (span - used) / (sorted.length - 1);
+    let cursor = start(first);
+    for (const item of sorted){
+        if (cursor !== start(item)) moved.set(item.id, place(item, cursor));
+        cursor += size(item) + gap;
+    }
+    return moved;
+}
+export function stackPositions(items, axis, gap) {
+    const moved = new Map();
+    if (items.length < 2) return moved;
+    const { start, size, place } = along(axis);
+    const sorted = inOrder(items, axis);
+    const first = sorted[0];
+    if (!first) return moved;
+    let cursor = start(first);
+    for (const item of sorted){
+        if (cursor !== start(item)) moved.set(item.id, place(item, cursor));
+        cursor += size(item) + gap;
+    }
+    return moved;
+}