@mokly/mokly 0.8.0

package/dist/client/component_occlusion.js

@@ -0,0 +1,52 @@
+export function intersectBoxes(a, b) {
+    const box = {
+        left: Math.max(a.left, b.left),
+        top: Math.max(a.top, b.top),
+        right: Math.min(a.right, b.right),
+        bottom: Math.min(a.bottom, b.bottom),
+    };
+    return box.right > box.left && box.bottom > box.top ? box : undefined;
+}
+export function subtractBox(box, cut) {
+    const overlap = intersectBoxes(box, cut);
+    if (!overlap)
+        return [box];
+    return [
+        { ...box, bottom: overlap.top },
+        { ...box, top: overlap.bottom },
+        {
+            left: box.left,
+            top: overlap.top,
+            right: overlap.left,
+            bottom: overlap.bottom,
+        },
+        {
+            left: overlap.right,
+            top: overlap.top,
+            right: box.right,
+            bottom: overlap.bottom,
+        },
+    ].filter((value) => value.right > value.left && value.bottom > value.top);
+}
+export function uncoveredBoxes(box, range, candidates, rects) {
+    const doc = range.startContainer.ownerDocument;
+    let pieces = [box];
+    for (const candidate of candidates) {
+        if (!pieces.length)
+            break;
+        if (range.intersectsNode(candidate))
+            continue;
+        if (!rects.has(candidate))
+            rects.set(candidate, [...candidate.getClientRects()]);
+        for (const rect of rects.get(candidate)) {
+            const overlap = intersectBoxes(box, rect);
+            if (!overlap)
+                continue;
+            const hit = doc.elementFromPoint((overlap.left + overlap.right) / 2, (overlap.top + overlap.bottom) / 2);
+            if (hit && candidate.contains(hit))
+                pieces = pieces.flatMap((piece) => subtractBox(piece, rect));
+        }
+    }
+    return pieces;
+}
+//# sourceMappingURL=component_occlusion.js.map

package/dist/client/component_occlusion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component_occlusion.js","sourceRoot":"","sources":["../../src/client/component_occlusion.ts"],"names":[],"mappings":"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"}

package/dist/client/component_overlay.d.ts

@@ -0,0 +1,6 @@
+/** Overlapping cutouts form one union, so their shared pixels never become dim. */
+export declare function createOverlay(doc: Document, width: number, height: number): {
+    svg: SVGSVGElement;
+    cutout: (x: number, y: number, width: number, height: number) => void;
+};
+//# sourceMappingURL=component_overlay.d.ts.map

package/dist/client/component_overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component_overlay.d.ts","sourceRoot":"","sources":["../../src/client/component_overlay.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,wBAAgB,aAAa,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;gBAyB1D,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM;EAgB/D"}

package/dist/client/component_overlay.js

@@ -0,0 +1,39 @@
+/** Overlapping cutouts form one union, so their shared pixels never become dim. */
+export function createOverlay(doc, width, height) {
+    const namespace = "http://www.w3.org/2000/svg";
+    const svg = doc.createElementNS(namespace, "svg");
+    svg.setAttribute("aria-hidden", "true");
+    const mask = doc.createElementNS(namespace, "mask");
+    mask.id = `mbk-mask-${crypto.randomUUID()}`;
+    mask.setAttribute("maskUnits", "userSpaceOnUse");
+    const rectangle = (values) => {
+        const rect = doc.createElementNS(namespace, "rect");
+        for (const [key, value] of Object.entries(values))
+            rect.setAttribute(key, String(value));
+        return rect;
+    };
+    mask.append(rectangle({ width, height, fill: "white" }));
+    svg.append(mask, rectangle({
+        width,
+        height,
+        fill: "rgba(244,246,244,.72)",
+        mask: `url(#${mask.id})`,
+    }));
+    return {
+        svg,
+        cutout: (x, y, width, height) => {
+            mask.append(rectangle({ x, y, width, height, fill: "black" }));
+            svg.append(rectangle({
+                x,
+                y,
+                width,
+                height,
+                fill: "none",
+                stroke: "#336249",
+                "stroke-width": 1.5,
+                rx: 3,
+            }));
+        },
+    };
+}
+//# sourceMappingURL=component_overlay.js.map

package/dist/client/component_overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component_overlay.js","sourceRoot":"","sources":["../../src/client/component_overlay.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,MAAM,UAAU,aAAa,CAAC,GAAa,EAAE,KAAa,EAAE,MAAc;IACxE,MAAM,SAAS,GAAG,4BAA4B,CAAC;IAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAClD,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxC,MAAM,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,GAAG,YAAY,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;IAC5C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,CAAC,MAAuC,EAAE,EAAE;QAC5D,MAAM,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACpD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;YAC/C,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IACF,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IACzD,GAAG,CAAC,MAAM,CACR,IAAI,EACJ,SAAS,CAAC;QACR,KAAK;QACL,MAAM;QACN,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,QAAQ,IAAI,CAAC,EAAE,GAAG;KACzB,CAAC,CACH,CAAC;IACF,OAAO;QACL,GAAG;QACH,MAAM,EAAE,CAAC,CAAS,EAAE,CAAS,EAAE,KAAa,EAAE,MAAc,EAAE,EAAE;YAC9D,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;YAC/D,GAAG,CAAC,MAAM,CACR,SAAS,CAAC;gBACR,CAAC;gBACD,CAAC;gBACD,KAAK;gBACL,MAAM;gBACN,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,SAAS;gBACjB,cAAc,EAAE,GAAG;gBACnB,EAAE,EAAE,CAAC;aACN,CAAC,CACH,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/client/component_range_nodes.d.ts

@@ -0,0 +1,6 @@
+/** Enumerate owned element and text boxes with their actual clipping ancestors. */
+export declare function componentNodeRects(range: Range): Generator<{
+    rect: DOMRect;
+    parent: Element | null;
+}>;
+//# sourceMappingURL=component_range_nodes.d.ts.map

package/dist/client/component_range_nodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component_range_nodes.d.ts","sourceRoot":"","sources":["../../src/client/component_range_nodes.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,wBAAiB,kBAAkB,CACjC,KAAK,EAAE,KAAK,GACX,SAAS,CAAC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CAAC,CAiCtD"}

package/dist/client/component_range_nodes.js

@@ -0,0 +1,35 @@
+/** Enumerate owned element and text boxes with their actual clipping ancestors. */
+export function* componentNodeRects(range) {
+    const doc = range.startContainer.ownerDocument;
+    const win = doc.defaultView;
+    const walker = doc.createTreeWalker(range.commonAncestorContainer, 5);
+    let node;
+    while ((node = walker.nextNode())) {
+        if (!range.intersectsNode(node) || range.comparePoint(node, 0) !== 0)
+            continue;
+        const element = node.nodeType === 1 ? node : node.parentElement;
+        let visible = true;
+        for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) {
+            const style = win.getComputedStyle(ancestor);
+            if (style.visibility === "hidden" ||
+                style.visibility === "collapse" ||
+                style.opacity === "0") {
+                visible = false;
+                break;
+            }
+        }
+        if (!visible)
+            continue;
+        if (node.nodeType === 1) {
+            for (const rect of node.getClientRects())
+                yield { rect, parent: node.parentElement };
+        }
+        else {
+            const text = doc.createRange();
+            text.selectNodeContents(node);
+            for (const rect of text.getClientRects())
+                yield { rect, parent: node.parentElement };
+        }
+    }
+}
+//# sourceMappingURL=component_range_nodes.js.map

package/dist/client/component_range_nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component_range_nodes.js","sourceRoot":"","sources":["../../src/client/component_range_nodes.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,MAAM,SAAS,CAAC,CAAC,kBAAkB,CACjC,KAAY;IAEZ,MAAM,GAAG,GAAG,KAAK,CAAC,cAAc,CAAC,aAAc,CAAC;IAChD,MAAM,GAAG,GAAG,GAAG,CAAC,WAAY,CAAC;IAC7B,MAAM,MAAM,GAAG,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;IACtE,IAAI,IAAiB,CAAC;IACtB,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;QAClC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC;YAClE,SAAS;QACX,MAAM,OAAO,GACX,IAAI,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAE,IAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAC/D,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,KAAK,IAAI,QAAQ,GAAG,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;YACzE,MAAM,KAAK,GAAG,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC7C,IACE,KAAK,CAAC,UAAU,KAAK,QAAQ;gBAC7B,KAAK,CAAC,UAAU,KAAK,UAAU;gBAC/B,KAAK,CAAC,OAAO,KAAK,GAAG,EACrB,CAAC;gBACD,OAAO,GAAG,KAAK,CAAC;gBAChB,MAAM;YACR,CAAC;QACH,CAAC;QACD,IAAI,CAAC,OAAO;YAAE,SAAS;QACvB,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;YACxB,KAAK,MAAM,IAAI,IAAK,IAAgB,CAAC,cAAc,EAAE;gBACnD,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;YAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC9B,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,cAAc,EAAE;gBACtC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QAC/C,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/client/control_fields.d.ts

@@ -0,0 +1,9 @@
+import type { ManifestComponent, ManifestComponentVariant } from "../components/manifest_types.js";
+import type { ComponentOverride } from "../components/render_types.js";
+export interface ControlFields {
+    root: HTMLElement;
+    read(): Readonly<Record<string, ComponentOverride>> | undefined;
+    disable(value: boolean): void;
+}
+export declare function controlFields(doc: Document, component: ManifestComponent, variant: ManifestComponentVariant, changed: (immediate: boolean) => void): ControlFields;
+//# sourceMappingURL=control_fields.d.ts.map

package/dist/client/control_fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control_fields.d.ts","sourceRoot":"","sources":["../../src/client/control_fields.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,iCAAiC,CAAC;AAMzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGvE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC;IAChE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAC/B;AACD,wBAAgB,aAAa,CAC3B,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GACpC,aAAa,CAuJf"}

package/dist/client/control_fields.js

@@ -0,0 +1,155 @@
+/** Declared controls with native labels, explicit unset state and field errors. */
+import { decodeProps, encodeValue } from "../components/codec.js";
+import { validateControlledValues } from "../components/controls.js";
+import { validateValue } from "../components/props.js";
+import { element } from "./inspector_panels.js";
+export function controlFields(doc, component, variant, changed) {
+    const root = element(doc, "div");
+    root.className = "mbk-control-grid";
+    const values = decodeProps(variant.props);
+    const fields = Object.entries(component.controls).map(([key, control]) => {
+        const value = values[key];
+        const group = element(doc, "div");
+        group.className = "mbk-control-field";
+        const id = `prop-${crypto.randomUUID()}`;
+        const label = element(doc, "label", control.label ?? key);
+        label.htmlFor = id;
+        const input = control.kind === "select"
+            ? element(doc, "select")
+            : element(doc, "input");
+        input.id = id;
+        input.dataset["propControl"] = key;
+        if (input instanceof HTMLInputElement) {
+            input.type =
+                control.kind === "boolean"
+                    ? "checkbox"
+                    : control.kind === "number"
+                        ? "number"
+                        : "text";
+            if (control.kind === "number") {
+                input.step = String(control.step ?? "any");
+                if (control.minimum !== undefined)
+                    input.min = String(control.minimum);
+                if (control.maximum !== undefined)
+                    input.max = String(control.maximum);
+            }
+            if (control.kind === "number")
+                input.inputMode = "decimal";
+            if (control.kind === "boolean")
+                input.checked = value === true;
+            else
+                input.value =
+                    value === undefined
+                        ? ""
+                        : Object.is(value, -0)
+                            ? "-0"
+                            : String(value);
+        }
+        else if (control.kind === "select") {
+            const empty = element(doc, "option", "Choose a value");
+            empty.value = "";
+            input.append(empty);
+            control.options.forEach((option, index) => {
+                const node = element(doc, "option", option.label);
+                node.value = String(index);
+                input.append(node);
+            });
+            const selected = control.options.findIndex((option) => Object.is(value, option.value));
+            input.value = selected < 0 ? "" : String(selected);
+        }
+        const supplied = component.propSchema.properties[key]?.optional
+            ? element(doc, "input")
+            : undefined;
+        if (supplied) {
+            supplied.type = "checkbox";
+            supplied.checked = value !== undefined;
+            supplied.setAttribute("aria-label", `Supply ${control.label ?? key}`);
+            const toggle = element(doc, "label");
+            toggle.className = "mbk-control-supplied";
+            toggle.append(supplied, element(doc, "span", "Supplied"));
+            group.append(toggle);
+        }
+        const help = element(doc, "small", control.description ??
+            (control.kind === "number" &&
+                (control.minimum !== undefined || control.maximum !== undefined)
+                ? `Allowed range: ${control.minimum ?? "no minimum"} to ${control.maximum ?? "no maximum"}.`
+                : ""));
+        help.id = `${id}-help`;
+        const error = element(doc, "small");
+        error.className = "mbk-control-error";
+        error.id = `${id}-error`;
+        error.hidden = true;
+        input.setAttribute("aria-describedby", `${help.id} ${error.id}`);
+        input.addEventListener(control.kind === "text" || control.kind === "number" ? "input" : "change", () => changed(control.kind !== "text" && control.kind !== "number"));
+        supplied?.addEventListener("change", () => {
+            input.disabled = !supplied.checked;
+            changed(true);
+        });
+        group.append(label, input, help, error);
+        root.append(group);
+        return { key, control, input, supplied, error };
+    });
+    return {
+        root,
+        disable(disabled) {
+            for (const { input, supplied } of fields) {
+                input.disabled = disabled || supplied?.checked === false;
+                if (supplied)
+                    supplied.disabled = disabled;
+            }
+        },
+        read() {
+            let valid = true;
+            const overrides = {};
+            for (const { key, control, input, supplied, error } of fields) {
+                error.hidden = true;
+                input.removeAttribute("aria-invalid");
+                if (supplied && !supplied.checked) {
+                    if (values[key] !== undefined)
+                        overrides[key] = { kind: "unset" };
+                    continue;
+                }
+                try {
+                    let value;
+                    if (control.kind === "boolean")
+                        value = input.checked;
+                    else if (control.kind === "select") {
+                        const option = input.value === ""
+                            ? undefined
+                            : control.options[Number(input.value)];
+                        if (!option)
+                            throw new Error("Choose an available value.");
+                        value = option.value;
+                    }
+                    else if (control.kind === "number") {
+                        value = Number(input.value);
+                        if (!input.value.trim() || !Number.isFinite(value))
+                            throw new Error("Enter a finite number.");
+                    }
+                    else
+                        value = input.value;
+                    validateValue(component.propSchema.properties[key].schema, value, key);
+                    validateControlledValues({ [key]: control }, { [key]: value }, key);
+                    if (!Object.is(value, values[key]))
+                        overrides[key] = {
+                            kind: "set",
+                            value: encodeValue(value),
+                        };
+                }
+                catch {
+                    error.textContent =
+                        control.kind === "number"
+                            ? "Enter a number within the allowed range."
+                            : control.kind === "select"
+                                ? "Choose an available value."
+                                : "Check this value and its allowed limits.";
+                    error.hidden = false;
+                    input.setAttribute("aria-invalid", "true");
+                    valid = false;
+                }
+            }
+            return valid ? overrides : undefined;
+        },
+    };
+}
+//# sourceMappingURL=control_fields.js.map

package/dist/client/control_fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control_fields.js","sourceRoot":"","sources":["../../src/client/control_fields.ts"],"names":[],"mappings":"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"}

package/dist/client/control_surface.d.ts

@@ -0,0 +1,14 @@
+/** Shared controls panel chrome; fields and readonly values have stable DOM homes. */
+import type { WorkspaceData, WorkspaceVariant } from "../server/shell/workspace_data.js";
+export declare function controlSurface(doc: Document, reset: () => void, retryEdit: () => void): {
+    panel: HTMLDivElement;
+    form: HTMLDivElement;
+    status: HTMLParagraphElement;
+    error: HTMLParagraphElement;
+    resetButton: HTMLButtonElement;
+    retry: HTMLButtonElement;
+    propsPanel: HTMLDivElement;
+};
+/** Explain the capability boundary without advertising unavailable actions. */
+export declare function controlsUnavailable(data: WorkspaceData, variant: WorkspaceVariant | undefined, comparing: boolean): string | undefined;
+//# sourceMappingURL=control_surface.d.ts.map

package/dist/client/control_surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control_surface.d.ts","sourceRoot":"","sources":["../../src/client/control_surface.ts"],"names":[],"mappings":"AAAA,sFAAsF;AACtF,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAG3C,wBAAgB,cAAc,CAC5B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,MAAM,IAAI,EACjB,SAAS,EAAE,MAAM,IAAI;;;;;;;;EA2BtB;AAED,+EAA+E;AAC/E,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,gBAAgB,GAAG,SAAS,EACrC,SAAS,EAAE,OAAO,GACjB,MAAM,GAAG,SAAS,CAYpB"}

package/dist/client/control_surface.js

@@ -0,0 +1,41 @@
+import { element } from "./inspector_panels.js";
+export function controlSurface(doc, reset, retryEdit) {
+    const panel = element(doc, "div");
+    panel.className = "mbk-component-controls";
+    const form = element(doc, "div");
+    const status = element(doc, "p");
+    status.setAttribute("role", "status");
+    status.dataset["controlsStatus"] = "";
+    const error = element(doc, "p");
+    error.className = "mbk-control-error";
+    error.setAttribute("role", "alert");
+    error.hidden = true;
+    const resetButton = element(doc, "button", "Reset");
+    resetButton.type = "button";
+    resetButton.className = "mbk-chip";
+    const retry = element(doc, "button", "Try again");
+    retry.type = "button";
+    retry.className = "mbk-chip";
+    retry.hidden = true;
+    const propsPanel = element(doc, "div");
+    const actions = element(doc, "div");
+    actions.className = "mbk-control-actions";
+    actions.append(status, retry, resetButton);
+    panel.append(form, error, actions, propsPanel);
+    resetButton.addEventListener("click", reset);
+    retry.addEventListener("click", retryEdit);
+    return { panel, form, status, error, resetButton, retry, propsPanel };
+}
+/** Explain the capability boundary without advertising unavailable actions. */
+export function controlsUnavailable(data, variant, comparing) {
+    if (!variant || variant.removed)
+        return "Choose an available saved variant to edit props.";
+    if (comparing)
+        return "Comparisons show the saved variant. Return to Current to edit props.";
+    if (!data.renderCapability)
+        return "Open this catalogue locally to edit props.";
+    if (data.entry.kind === "component" &&
+        !Object.keys(data.entry.controls).length)
+        return "No editable props are declared for this component.";
+}
+//# sourceMappingURL=control_surface.js.map

package/dist/client/control_surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control_surface.js","sourceRoot":"","sources":["../../src/client/control_surface.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,MAAM,UAAU,cAAc,CAC5B,GAAa,EACb,KAAiB,EACjB,SAAqB;IAErB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAClC,KAAK,CAAC,SAAS,GAAG,wBAAwB,CAAC;IAC3C,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACjC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,EAAE,CAAC;IACtC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAChC,KAAK,CAAC,SAAS,GAAG,mBAAmB,CAAC;IACtC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACpD,WAAW,CAAC,IAAI,GAAG,QAAQ,CAAC;IAC5B,WAAW,CAAC,SAAS,GAAG,UAAU,CAAC;IACnC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IAClD,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;IACtB,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC;IAC7B,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACpC,OAAO,CAAC,SAAS,GAAG,qBAAqB,CAAC;IAC1C,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;IAC3C,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/C,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC7C,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;AACxE,CAAC;AAED,+EAA+E;AAC/E,MAAM,UAAU,mBAAmB,CACjC,IAAmB,EACnB,OAAqC,EACrC,SAAkB;IAElB,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO;QAC7B,OAAO,kDAAkD,CAAC;IAC5D,IAAI,SAAS;QACX,OAAO,sEAAsE,CAAC;IAChF,IAAI,CAAC,IAAI,CAAC,gBAAgB;QACxB,OAAO,4CAA4C,CAAC;IACtD,IACE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW;QAC/B,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM;QAExC,OAAO,oDAAoD,CAAC;AAChE,CAAC"}

package/dist/client/control_transport.d.ts

@@ -0,0 +1,7 @@
+/** Request cancellation and response/context validation for temporary previews. */
+import type { GeneratedComponentView } from "../components/views.js";
+import type { ComponentRenderRequest, ComponentRenderSuccess, RenderCapability } from "../components/render_types.js";
+export declare function requestComponentPreview(request: ComponentRenderRequest, capability: RenderCapability, view: GeneratedComponentView, signal: AbortSignal): Promise<ComponentRenderSuccess>;
+/** Check only the immediate authenticated transient document after it loads. */
+export declare function componentPreviewExpired(frame: HTMLIFrameElement, previews: Iterable<ComponentRenderSuccess>, signal: AbortSignal): Promise<boolean>;
+//# sourceMappingURL=control_transport.d.ts.map

package/dist/client/control_transport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control_transport.d.ts","sourceRoot":"","sources":["../../src/client/control_transport.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,+BAA+B,CAAC;AAEvC,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,sBAAsB,EAC/B,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,sBAAsB,EAC5B,MAAM,EAAE,WAAW,GAClB,OAAO,CAAC,sBAAsB,CAAC,CAyCjC;AAED,gFAAgF;AAChF,wBAAsB,uBAAuB,CAC3C,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,QAAQ,CAAC,sBAAsB,CAAC,EAC1C,MAAM,EAAE,WAAW,GAClB,OAAO,CAAC,OAAO,CAAC,CAWlB"}

package/dist/client/control_transport.js

@@ -0,0 +1,51 @@
+export async function requestComponentPreview(request, capability, view, signal) {
+    const response = await fetch("/__mokly/components/render", {
+        method: "POST",
+        credentials: "same-origin",
+        signal,
+        headers: {
+            "content-type": "application/json",
+            "x-mokly-render-token": capability.token,
+        },
+        body: JSON.stringify(request),
+    });
+    if (!response.ok) {
+        const messages = {
+            400: "Check the prop values and their allowed limits.",
+            403: "Reload the catalogue to continue editing.",
+            404: "This component or variant is unavailable.",
+            409: "The catalogue changed. Reload to continue editing.",
+            413: "The prop values are too large.",
+            422: "The preview could not be rendered. Try again or reset the props.",
+            429: "The renderer is busy. Try again shortly.",
+        };
+        throw new Error(messages[response.status] ??
+            "The preview could not be updated. Try again.");
+    }
+    const result = (await response.json());
+    if (!result ||
+        !/^[a-f0-9]{48}\.[a-f0-9]{64}$/.test(result.renderId) ||
+        result.generation !== capability.generation ||
+        result.previewUrl !==
+            `/__mokly/components/renders/${result.renderId}/${view.path.split("/").map(encodeURIComponent).join("/")}` ||
+        result.view?.viewport !== view.viewport ||
+        result.view.colorScheme !== view.colorScheme ||
+        !Array.isArray(result.view.instances) ||
+        !Array.isArray(result.view.ranges) ||
+        !result.props)
+        throw new Error("The preview response could not be read. Try again.");
+    return result;
+}
+/** Check only the immediate authenticated transient document after it loads. */
+export async function componentPreviewExpired(frame, previews, signal) {
+    const preview = [...previews].find((result) => frame.contentWindow?.location.pathname === result.previewUrl);
+    if (!preview)
+        return false;
+    const response = await fetch(preview.previewUrl, {
+        method: "HEAD",
+        signal,
+        cache: "no-store",
+    });
+    return response.status === 410;
+}
+//# sourceMappingURL=control_transport.js.map

package/dist/client/control_transport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control_transport.js","sourceRoot":"","sources":["../../src/client/control_transport.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,KAAK,UAAU,uBAAuB,CAC3C,OAA+B,EAC/B,UAA4B,EAC5B,IAA4B,EAC5B,MAAmB;IAEnB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,4BAA4B,EAAE;QACzD,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,aAAa;QAC1B,MAAM;QACN,OAAO,EAAE;YACP,cAAc,EAAE,kBAAkB;YAClC,sBAAsB,EAAE,UAAU,CAAC,KAAK;SACzC;QACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;KAC9B,CAAC,CAAC;IACH,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QACjB,MAAM,QAAQ,GAA2B;YACvC,GAAG,EAAE,iDAAiD;YACtD,GAAG,EAAE,2CAA2C;YAChD,GAAG,EAAE,2CAA2C;YAChD,GAAG,EAAE,oDAAoD;YACzD,GAAG,EAAE,gCAAgC;YACrC,GAAG,EAAE,kEAAkE;YACvE,GAAG,EAAE,0CAA0C;SAChD,CAAC;QACF,MAAM,IAAI,KAAK,CACb,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;YACvB,8CAA8C,CACjD,CAAC;IACJ,CAAC;IACD,MAAM,MAAM,GAAG,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAA2B,CAAC;IACjE,IACE,CAAC,MAAM;QACP,CAAC,8BAA8B,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;QACrD,MAAM,CAAC,UAAU,KAAK,UAAU,CAAC,UAAU;QAC3C,MAAM,CAAC,UAAU;YACf,+BAA+B,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QAC5G,MAAM,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC,QAAQ;QACvC,MAAM,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,WAAW;QAC5C,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;QACrC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;QAClC,CAAC,MAAM,CAAC,KAAK;QAEb,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IACxE,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,gFAAgF;AAChF,MAAM,CAAC,KAAK,UAAU,uBAAuB,CAC3C,KAAwB,EACxB,QAA0C,EAC1C,MAAmB;IAEnB,MAAM,OAAO,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAChC,CAAC,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC,QAAQ,KAAK,MAAM,CAAC,UAAU,CACzE,CAAC;IACF,IAAI,CAAC,OAAO;QAAE,OAAO,KAAK,CAAC;IAC3B,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;QAC/C,MAAM,EAAE,MAAM;QACd,MAAM;QACN,KAAK,EAAE,UAAU;KAClB,CAAC,CAAC;IACH,OAAO,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAC;AACjC,CAAC"}

package/dist/client/diff_views.d.ts

@@ -0,0 +1,12 @@
+/** DOM rendering for isolated before/after views requested by the user. */
+import type { ReviewResult } from "../review/types.js";
+/** Available display modes; Current never requests a comparison. */
+export type DiffMode = "current" | "side" | "overlay" | "difference";
+/** A parsed comparison with its immutable snapshot base URL. */
+export interface LoadedDiff {
+    result: ReviewResult;
+    url: string;
+}
+/** Render the selected screen, viewport, and scheme without changing the shell. */
+export declare function renderDiff(doc: Document, stage: HTMLElement, loaded: LoadedDiff, route: string, mode: DiffMode, variantId?: string): void;
+//# sourceMappingURL=diff_views.d.ts.map

package/dist/client/diff_views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff_views.d.ts","sourceRoot":"","sources":["../../src/client/diff_views.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAE3E,OAAO,KAAK,EACV,YAAY,EAGb,MAAM,oBAAoB,CAAC;AAG5B,oEAAoE;AACpE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAErE,gEAAgE;AAChE,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,YAAY,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;CACb;AAUD,mFAAmF;AACnF,wBAAgB,UAAU,CACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,QAAQ,EACd,SAAS,CAAC,EAAE,MAAM,GACjB,IAAI,CA+DN"}

package/dist/client/diff_views.js

@@ -0,0 +1,128 @@
+/** DOM rendering for isolated before/after views requested by the user. */
+import { currentColorScheme, currentViewport } from "./browse_state.js";
+const STATE_LABELS = {
+    added: "New screen",
+    changed: "Screen changed",
+    "ignored-only": "Only excluded content changed",
+    removed: "Screen removed",
+    unchanged: "No changes to this screen",
+};
+/** Render the selected screen, viewport, and scheme without changing the shell. */
+export function renderDiff(doc, stage, loaded, route, mode, variantId) {
+    const component = loaded.result.schemaVersion === 3
+        ? loaded.result.components.find((candidate) => candidate.route === route)
+        : undefined;
+    const variant = component?.variants.find((candidate) => candidate.id === variantId);
+    const screen = component && variant
+        ? { ...component, views: variant.views }
+        : loaded.result.screens.find((candidate) => candidate.route === route);
+    if (!screen) {
+        stage.replaceChildren();
+        stage.append(message(doc, "This screen has no comparison available."));
+        return;
+    }
+    const viewport = currentViewport(doc);
+    const scheme = currentColorScheme(doc);
+    const key = `${loaded.url}|${route}|${variantId ?? ""}|${viewport}|${scheme}`;
+    if (stage.dataset["diffKey"] === key && stage.querySelector(".mb-panes")) {
+        for (const panes of stage.querySelectorAll(".mb-panes")) {
+            panes.dataset["compareMode"] = panes.querySelector(".mb-pane-missing")
+                ? "side"
+                : mode;
+        }
+        return;
+    }
+    stage.replaceChildren();
+    stage.dataset["diffKey"] = key;
+    for (const size of ["mobile", "desktop"]) {
+        if (viewport !== "both" && viewport !== size)
+            continue;
+        const view = screen.views.find((item) => item.viewport === size && item.colorScheme === scheme) ??
+            screen.views.find((item) => item.viewport === size && item.colorScheme === "light");
+        if (!view)
+            continue;
+        const section = doc.createElement("section");
+        section.className = `mbk-diff-view mbk-diff-${size}`;
+        section.dataset["diffViewport"] = size;
+        const heading = doc.createElement("h3");
+        heading.textContent = `${size === "mobile" ? "Mobile" : "Desktop"} · ${component ? STATE_LABELS[view.state].replace(/screen/g, "variant").replace(/Screen/g, "Variant") : STATE_LABELS[view.state]}${scheme !== view.colorScheme ? " · Light only" : ""}`;
+        section.append(heading);
+        const panes = doc.createElement("div");
+        panes.className = "mb-panes";
+        panes.dataset["compareMode"] =
+            view.beforePath && view.afterPath ? mode : "side";
+        panes.append(pane(doc, loaded.url, view, "before"), pane(doc, loaded.url, view, "after"));
+        section.append(panes);
+        stage.append(section);
+    }
+    const details = doc.querySelector("[data-workspace-evidence]");
+    if (details && loaded.result.schemaVersion === 2) {
+        details.hidden = false;
+        details.replaceChildren();
+        evidence(doc, details, screen, loaded.result.baseRef);
+    }
+}
+function pane(doc, base, view, side) {
+    const container = doc.createElement("div");
+    container.className = `mb-pane mb-pane--${side}`;
+    const label = doc.createElement("p");
+    label.className = "mb-pane-label";
+    label.textContent = side === "before" ? "Before" : "Current";
+    container.append(label);
+    const source = side === "before" ? view.beforePath : view.afterPath;
+    if (!source) {
+        const missing = message(doc, side === "before"
+            ? "This screen was added on this branch."
+            : "This screen was removed on this branch.");
+        missing.className = "mb-pane-missing";
+        container.append(missing);
+        return container;
+    }
+    const body = doc.createElement("div");
+    body.className = "mb-pane-doc mbk-frame-wrap";
+    if (view.colorScheme === "light")
+        body.setAttribute("data-color-scheme-fallback", "");
+    const frame = doc.createElement("iframe");
+    frame.className = "mbk-frag";
+    frame.title = `${label.textContent} — ${view.viewport} — ${view.colorScheme}`;
+    frame.setAttribute("sandbox", "");
+    frame.src = new URL(source.split("/").map(encodeURIComponent).join("/"), base).href;
+    const template = doc.querySelector(`[data-diff-template="${view.viewport}"]`);
+    const chrome = template?.content.firstElementChild?.cloneNode(true);
+    const viewport = chrome?.querySelector(".phone-screen, .browser-viewport");
+    if (chrome && viewport) {
+        viewport.append(frame);
+        body.append(chrome);
+    }
+    else
+        body.append(frame);
+    container.append(body);
+    return container;
+}
+function evidence(doc, stage, screen, base) {
+    const details = doc.createElement("details");
+    details.className = "mb-impact-card";
+    const summary = doc.createElement("summary");
+    summary.textContent = "Comparison details";
+    details.append(summary, message(doc, `Compared with the branch point on ${base}.`));
+    if (screen.sharedImpact.length > 0) {
+        details.append(message(doc, "Changes to these files may affect this screen:"));
+        const list = doc.createElement("ul");
+        for (const input of screen.sharedImpact) {
+            const item = doc.createElement("li");
+            item.textContent = input;
+            list.append(item);
+        }
+        details.append(list);
+    }
+    const ignored = [...new Set(screen.views.flatMap((view) => view.ignoredIds))];
+    if (ignored.length > 0)
+        details.append(message(doc, `Excluded content: ${ignored.join(", ")}.`));
+    stage.append(details);
+}
+function message(doc, text) {
+    const paragraph = doc.createElement("p");
+    paragraph.textContent = text;
+    return paragraph;
+}
+//# sourceMappingURL=diff_views.js.map