@unofficialbox/box-open-elements 0.24.0 → 0.26.0

package/dist/patterns/flow-builder/flow-builder.d.ts

@@ -27,7 +27,11 @@ export declare class FlowBuilder<N extends FlowNodeBase = FlowNode> extends Base
     private headingEl?;
     private renderedRenderer?;
     private observer?;
-    private narrow;
+    private narrowValue;
+    private visible;
+    get narrow(): boolean;
+    /** Focus a rendered card without changing selection or opening the editor. */
+    focusNode(node: N): void;
     private insertion?;
     private invoker?;
     private spine;

package/dist/patterns/flow-builder/flow-builder.js

@@ -22,7 +22,11 @@ export class FlowBuilder extends BaseElement {
     headingEl;
     renderedRenderer;
     observer;
-    narrow = false;
+    narrowValue = false;
+    visible = true;
+    get narrow() { return this.narrowValue; }
+    /** Focus a rendered card without changing selection or opening the editor. */
+    focusNode(node) { this.spine?.focusNode(node); }
     insertion;
     invoker;
     spine;
@@ -60,12 +64,18 @@ export class FlowBuilder extends BaseElement {
             this.refresh();
     }
     connectedCallback() {
+        this.visible = this.getClientRects().length > 0;
         super.connectedCallback();
         if (typeof ResizeObserver !== "undefined") {
-            this.observer = new ResizeObserver(entries => this.setNarrow(entries[0].contentRect.width < 800));
+            this.observer = new ResizeObserver(entries => {
+                const rect = entries[0].contentRect;
+                this.visible = rect.width > 0 && rect.height > 0 && this.getClientRects().length > 0;
+                this.setNarrow(this.visible && rect.width < 800);
+                this.updateInspector();
+            });
             this.observer.observe(this);
         }
-        this.setNarrow((this.getBoundingClientRect().width || this.ownerDocument.defaultView?.innerWidth || 1024) < 800);
+        this.setNarrow(this.visible && this.getBoundingClientRect().width < 800);
     }
     disconnectedCallback() {
         this.observer?.disconnect();
@@ -79,9 +89,10 @@ export class FlowBuilder extends BaseElement {
     setNarrow(narrow) {
         if (this.narrow === narrow)
             return;
-        this.narrow = narrow;
+        this.narrowValue = narrow;
         this.shadowRoot.querySelector("[part=layout]").dataset.narrow = String(narrow);
         this.updateInspector();
+        this.dispatchEvent(new CustomEvent("narrow-changed", { detail: { narrow }, bubbles: true, composed: true }));
     }
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>
@@ -134,7 +145,7 @@ export class FlowBuilder extends BaseElement {
         });
         this.palette.addEventListener("kind-pick", event => this.insert(event.detail.kind, { list: this.nodes, index: this.nodes.length, label: "Append to flow" }));
         this.drawer.addEventListener("open-changed", event => {
-            if (!event.detail.open && this.narrow && this.selectedValue)
+            if (!event.detail.open && this.visible && this.narrow && this.selectedValue)
                 this.select(null);
         });
     }
@@ -220,7 +231,7 @@ export class FlowBuilder extends BaseElement {
         if (this.inspector.parentElement !== target)
             target.append(this.inspector);
         if (this.inspected === this.selected && this.renderedRenderer === this.renderer && (!this.selected || this.headingEl?.tagName === `H${this.headingLevel}`)) {
-            this.drawer.open = this.narrow && Boolean(this.selected);
+            this.drawer.open = this.visible && this.narrow && Boolean(this.selected);
             return;
         }
         this.cleanupInspector?.();
@@ -243,7 +254,7 @@ export class FlowBuilder extends BaseElement {
             }
             this.drawer.heading = nodeTitle(this.selected, this.catalog, this.model);
         }
-        this.drawer.open = this.narrow && Boolean(this.selected);
+        this.drawer.open = this.visible && this.narrow && Boolean(this.selected);
     }
 }
 FlowBuilder.register();

package/dist/patterns/flow-builder/primitives.d.ts

@@ -31,6 +31,7 @@ export declare class KindPicker extends BaseElement {
     static readonly tagName = "box-kind-picker";
     catalog: readonly FlowKind[];
     variant: "inline" | "menu";
+    searchable: boolean;
     protected renderTemplate(): void;
     protected setupListeners(): void;
     refresh(): void;

package/dist/patterns/flow-builder/primitives.js

@@ -24,7 +24,7 @@ export class FlowCard extends BaseElement {
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>${styles}
       button { width:100%; text-align:start; display:grid; gap:6px; padding:16px; border:1px solid var(--boe-token-stroke-stroke,#ddd); border-radius:var(--boe-profile-radius-med,8px); background:var(--boe-token-surface-surface,#fff); overflow-wrap:anywhere; }
-      button[aria-pressed=true] { border-color:var(--boe-token-surface-surface-brand,#0061d5); background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 8%,var(--boe-token-surface-surface,#fff)); }
+      button[aria-pressed=true] { border-color:var(--boe-token-surface-surface-brand,#0061d5); background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 5%,var(--boe-token-surface-surface,#fff)); }
       button[data-invalid=true] { border-color:var(--boe-token-text-status-text-error,#b92340); }
       button.has-icon{grid-template-columns:20px minmax(0,1fr);column-gap:12px} button.has-icon [part=icon]{grid-column:1;grid-row:1/span 4} button.has-icon [part=title],button.has-icon [part=kind],button.has-icon [part=description],button.has-icon [part=status],button.has-icon [part=error]{grid-column:2}
       [part=icon]{color:var(--boe-token-surface-surface-brand,#0061d5);width:20px;height:20px} [part=icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=icon] svg{display:block;width:20px;height:20px} [part=title] { font-weight:650; } [part=kind],[part=description] { color:var(--boe-token-text-text-secondary,#666); } [part=error] { color:var(--boe-token-text-status-text-error,#b92340); }
@@ -67,8 +67,10 @@ export class KindPicker extends BaseElement {
     static tagName = "box-kind-picker";
     catalog = [];
     variant = "inline";
-    renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=choices]{display:grid;gap:8px} button{text-align:start;padding:10px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;background:var(--boe-token-surface-surface,#fff)} button.has-icon{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start} [part=choice-icon]{grid-row:1/span 2;width:20px;height:20px;color:var(--boe-token-surface-surface-brand,#0061d5)} [part=choice-icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=choice-icon] svg{display:block;width:20px;height:20px} [part=choice-label]{display:block} small{display:block;color:var(--boe-token-text-text-secondary,#666)} h3{font:inherit;font-weight:650;margin:12px 0 4px}</style><div part="choices"></div>`; }
+    searchable = false;
+    renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=search]{width:100%;min-height:36px;margin-bottom:8px;padding:8px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;background:var(--boe-token-surface-surface,#fff);font:inherit;color:inherit} [part=choices]{display:grid;gap:8px} button{text-align:start;padding:10px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;background:var(--boe-token-surface-surface,#fff)} button.has-icon{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start} [part=choice-icon]{grid-row:1/span 2;width:20px;height:20px;color:var(--boe-token-surface-surface-brand,#0061d5)} [part=choice-icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=choice-icon] svg{display:block;width:20px;height:20px} [part=choice-label]{display:block} small{display:block;color:var(--boe-token-text-text-secondary,#666)} h3{font:inherit;font-weight:650;margin:12px 0 4px}</style><input part="search" type="search" aria-label="Find a building block" placeholder="Find a building block"><div part="choices"></div>`; }
     setupListeners() {
+        this.shadowRoot.querySelector('[part=search]').addEventListener('input', () => this.update());
         this.shadowRoot.addEventListener("keydown", event => {
             const e = event;
             if (this.variant !== "menu")
@@ -78,6 +80,8 @@ export class KindPicker extends BaseElement {
                 emit(this, "picker-cancel", {});
                 return;
             }
+            if (e.target === this.shadowRoot.querySelector('[part=search]') && e.key !== "ArrowDown")
+                return;
             const buttons = Array.from(this.shadowRoot.querySelectorAll("button"));
             if (!buttons.length)
                 return;
@@ -92,14 +96,17 @@ export class KindPicker extends BaseElement {
     }
     refresh() { if (this.isRendered)
         this.update(); }
-    focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
+    focus(options) { (this.searchable ? this.shadowRoot?.querySelector('[part=search]') : this.shadowRoot?.querySelector("button"))?.focus(options); }
     update() {
         const choices = this.shadowRoot.querySelector("[part=choices]");
+        const search = this.shadowRoot.querySelector('[part=search]');
+        search.hidden = !this.searchable;
+        const query = this.searchable ? search.value.trim().toLowerCase() : '';
         choices.setAttribute("role", this.variant === "menu" ? "menu" : "group");
         choices.setAttribute("aria-label", "Choose a step type");
         choices.replaceChildren();
         let group = "";
-        this.catalog.forEach((kind, index) => {
+        this.catalog.filter(kind => `${kind.label} ${kind.description} ${kind.group ?? ''} ${kind.aliases?.join(' ') ?? ''}`.toLowerCase().includes(query)).forEach((kind, index) => {
             if (kind.group && group !== kind.group) {
                 const heading = document.createElement("h3");
                 heading.textContent = kind.group;

package/dist/patterns/process-modeler/bridge.d.ts

@@ -0,0 +1,10 @@
+import type { NodePath } from "../flow-builder/model.js";
+import type { ProcessCheck, ProcessLayout, ProcessLoadOptions, ProcessPositionSnapshot, ProcessProjection } from "./model.js";
+/** Restore only current paths with explicitly matching host fingerprints. */
+export declare function restoreProcessPositions<N>(projection: ProcessProjection<N>, positions: ProcessLoadOptions["positions"]): ProcessLayout;
+/** Detached, ID-sorted entries; stale layout IDs and unplaced boxes are omitted. */
+export declare function snapshotProcessPositions<N>(projection: ProcessProjection<N>, layout: ProcessLayout): readonly ProcessPositionSnapshot[];
+/** Resolve a host field path to its deepest projected box, without string coercion. */
+export declare function normalizeProcessSelectionPath<N>(projection: ProcessProjection<N>, path: NodePath | null | undefined): NodePath | null;
+/** Generic topology only. Hosts own workflow vocabulary and semantic validation. */
+export declare function graphChecks<N>(projection: ProcessProjection<N>): readonly ProcessCheck[];

package/dist/patterns/process-modeler/bridge.js

@@ -0,0 +1,173 @@
+const validPosition = (position) => Number.isFinite(position.x) && Number.isFinite(position.y) &&
+    (position.width === undefined || (Number.isFinite(position.width) && position.width > 0)) &&
+    (position.height === undefined || (Number.isFinite(position.height) && position.height > 0));
+/** Restore only current paths with explicitly matching host fingerprints. */
+export function restoreProcessPositions(projection, positions) {
+    const savedPositions = Array.isArray(positions)
+        ? Object.fromEntries(positions.filter(entry => entry.path).map(entry => [JSON.stringify(entry.path), entry]))
+        : positions;
+    const boxes = {};
+    for (const box of projection.boxes) {
+        if (!box.path || box.fingerprint === undefined)
+            continue;
+        const key = JSON.stringify(box.path);
+        const saved = savedPositions && Object.hasOwn(savedPositions, key) ? savedPositions[key] : undefined;
+        if (!saved || saved.fingerprint === undefined || saved.fingerprint !== box.fingerprint ||
+            !saved.position || !validPosition(saved.position))
+            continue;
+        Object.defineProperty(boxes, box.id, {
+            value: { ...saved.position }, enumerable: true, configurable: true, writable: true,
+        });
+    }
+    return { boxes };
+}
+/** Detached, ID-sorted entries; stale layout IDs and unplaced boxes are omitted. */
+export function snapshotProcessPositions(projection, layout) {
+    const snapshots = [];
+    for (const box of projection.boxes) {
+        if (!Object.hasOwn(layout.boxes, box.id))
+            continue;
+        const position = layout.boxes[box.id];
+        if (!position || !validPosition(position))
+            continue;
+        snapshots.push({
+            id: box.id,
+            ...(box.path ? { path: [...box.path] } : {}),
+            ...(box.fingerprint !== undefined ? { fingerprint: box.fingerprint } : {}),
+            position: { ...position },
+        });
+    }
+    return snapshots.sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+}
+/** Resolve a host field path to its deepest projected box, without string coercion. */
+export function normalizeProcessSelectionPath(projection, path) {
+    if (path == null)
+        return null;
+    let selected;
+    for (const box of projection.boxes) {
+        if (box.path && box.path.length <= path.length &&
+            box.path.every((segment, index) => segment === path[index]) &&
+            (!selected || box.path.length > selected.length))
+            selected = box.path;
+    }
+    return selected ? [...selected] : null;
+}
+const branchKinds = new Set(["decision", "choice", "weighted", "weighted-choice", "parallel", "fork"]);
+const parallelKinds = new Set(["parallel", "fork"]);
+/** Generic topology only. Hosts own workflow vocabulary and semantic validation. */
+export function graphChecks(projection) {
+    const boxes = new Map(projection.boxes.map(box => [box.id, box]));
+    const outgoing = new Map(projection.boxes.map(box => [box.id, []]));
+    const incoming = new Map(projection.boxes.map(box => [box.id, []]));
+    for (const line of projection.lines) {
+        if (!boxes.has(line.from) || !boxes.has(line.to))
+            continue;
+        outgoing.get(line.from).push(line.to);
+        incoming.get(line.to).push(line.from);
+    }
+    // Iterative strongly connected components keep long host graphs off the call stack.
+    const visited = new Set();
+    const finished = [];
+    for (const id of boxes.keys()) {
+        if (visited.has(id))
+            continue;
+        visited.add(id);
+        const stack = [{ id, next: 0 }];
+        while (stack.length) {
+            const top = stack[stack.length - 1];
+            const targets = outgoing.get(top.id);
+            if (top.next < targets.length) {
+                const target = targets[top.next++];
+                if (!visited.has(target)) {
+                    visited.add(target);
+                    stack.push({ id: target, next: 0 });
+                }
+            }
+            else {
+                finished.push(top.id);
+                stack.pop();
+            }
+        }
+    }
+    visited.clear();
+    const loops = new Set();
+    for (const id of finished.reverse()) {
+        if (visited.has(id))
+            continue;
+        const component = [];
+        const stack = [id];
+        visited.add(id);
+        while (stack.length) {
+            const current = stack.pop();
+            component.push(current);
+            for (const source of incoming.get(current)) {
+                if (!visited.has(source)) {
+                    visited.add(source);
+                    stack.push(source);
+                }
+            }
+        }
+        if (component.length > 1 || outgoing.get(id).includes(id)) {
+            for (const member of component)
+                loops.add(member);
+        }
+    }
+    const reachable = (start) => {
+        const distances = new Map([[start, 0]]);
+        const queue = [start];
+        for (let i = 0; i < queue.length; i++) {
+            const id = queue[i];
+            for (const target of outgoing.get(id)) {
+                if (!distances.has(target)) {
+                    distances.set(target, distances.get(id) + 1);
+                    queue.push(target);
+                }
+            }
+        }
+        return distances;
+    };
+    const allPathsMeet = (start, join) => {
+        const queue = [start];
+        const seen = new Set();
+        for (let i = 0; i < queue.length; i++) {
+            const id = queue[i];
+            if (id === join || seen.has(id))
+                continue;
+            seen.add(id);
+            const targets = outgoing.get(id);
+            if (!targets.length || loops.has(id))
+                return false;
+            queue.push(...targets);
+        }
+        return true;
+    };
+    const checks = [];
+    for (const box of projection.boxes) {
+        const add = (message) => checks.push({
+            message, boxId: box.id, ...(box.path ? { path: [...box.path] } : {}),
+        });
+        if (loops.has(box.id))
+            add("This box is part of a loop. Remove a connection to break the loop.");
+        const targets = outgoing.get(box.id);
+        if (targets.length < 2)
+            continue;
+        if (!branchKinds.has(box.kind)) {
+            add("This step leads to multiple places. Use a Decision, Weighted choice or Parallel to branch.");
+            continue;
+        }
+        const routes = targets.map(reachable);
+        const candidates = [...routes[0].keys()].filter(id => id !== box.id && routes.every(route => route.has(id)));
+        candidates.sort((a, b) => Math.max(...routes.map(route => route.get(a))) - Math.max(...routes.map(route => route.get(b))) ||
+            (a < b ? -1 : a > b ? 1 : 0));
+        const join = candidates.find(id => targets.every(target => allPathsMeet(target, id)));
+        if (!join) {
+            add(parallelKinds.has(box.kind)
+                ? "Parallel paths must meet at a Wait for all (join) box."
+                : "These branch paths do not meet. Connect every path to a common next box.");
+        }
+        else if (parallelKinds.has(box.kind) && boxes.get(join).kind !== "join") {
+            add("Parallel paths must meet at a Wait for all (join) box.");
+        }
+    }
+    return checks;
+}

package/dist/patterns/process-modeler/design.d.ts

@@ -0,0 +1,2 @@
+/** Riptide Diagram anatomy expressed through public Box Open Elements tokens. */
+export declare const processModelerDesign = "\n  :host([hidden]), [hidden] { display: none !important; }\n  *, *::before, *::after { box-sizing: border-box; }\n  button, input, textarea, select { font: inherit; color: inherit; }\n  button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n  button:disabled { opacity: .5; cursor: default; }\n  :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  :host {\n    display: block;\n    min-width: 0;\n    --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n    color: var(--boe-token-text-text, #141413);\n    background: var(--boe-token-surface-surface, #fff);\n    font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n  }\n  [part=sr-only] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=toolbar] {\n    min-height: 56px;\n    margin: 0;\n    padding: 8px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-wrap: wrap;\n    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n    min-height: 30px;\n    padding: 4px 10px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    background: transparent;\n    font-size: 13px;\n    font-weight: 600;\n  }\n  [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n  [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n  [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n  }\n  [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n  [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n  [part=view-switch] button { border-radius: 16px; }\n  [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n  [part=run-toggle] { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; }\n  [part=run-toggle] input { accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=view-menu] { display: none; position: relative; }\n  [part=view-menu] summary { list-style: none; padding: 4px 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=view-menu][open] { z-index: 20; }\n  [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 192px; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=view-menu] button { display: block; width: 100%; text-align: start; background: transparent; }\n  [part=layout] {\n    display: grid;\n    grid-template-columns: 248px minmax(0, 1fr) 320px;\n    gap: 0;\n    min-height: 0;\n    height: var(--boe-process-height, 660px);\n    overflow: hidden;\n  }\n  [part=pane-drawer] { display: contents; color: inherit; }\n  [part=pane-drawer]::backdrop, [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n  [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n  [part=palette], [part=inspector] {\n    min-width: 0;\n    overflow: auto;\n    padding: 12px;\n    border: 0;\n    border-radius: 0;\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n  [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n  [part=palette] label { font-size: 0; position: relative; }\n  [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n  [part=palette] input {\n    width: 100%; min-width: 0;\n    height: 36px;\n    padding: 0 12px 0 36px;\n    border: 1px solid transparent;\n    border-radius: 24px;\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n    font-size: 13px;\n  }\n  [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n  [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n  [part=group] { margin: 4px 4px 6px; font-size: 12px; font-weight: 650; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=choice] {\n    display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 0 10px;\n    min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;\n    text-align: start; background: transparent; cursor: grab;\n  }\n  [part=choice]:hover { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n  [part=choice-icon] { grid-row: span 2; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=choice][data-tone=accent] [part=choice-icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=choice-icon] svg { width: 20px; height: 20px; }\n  [part=choice-name] { font-size: 13px; font-weight: 600; line-height: 1.3; }\n  [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n  [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=canvas] {\n    position: relative; min-width: 0; height: 100%; overflow: hidden;\n    border: 0; border-radius: 0;\n    background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n    background-image: radial-gradient(circle, var(--boe-token-stroke-stroke-hover, #d3d3d3) 1px, transparent 1.2px);\n    background-size: 12px 12px;\n    touch-action: none; user-select: none; cursor: grab;\n  }\n  [part=canvas][data-panning] { cursor: grabbing; }\n  [part=hold] { position: absolute; z-index: 12; top: 12px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid var(--boe-token-stroke-status-stroke-warning, #9a6b00); border-radius: 8px; background: var(--boe-token-surface-status-surface-warning, #fff7df); color: var(--boe-token-text-status-text-warning, #6b4a00); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); font-size: 12.5px; cursor: default; }\n  [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n  [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n  [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n  [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n  [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n  [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n  [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=box], [part=frame] {\n    position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n    gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n    border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n    border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n    font-size: 13px; line-height: 1.3;\n    transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n      background var(--boe-profile-motion-interactive, 200ms) ease-out;\n  }\n  [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [data-connect-target=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5) !important; }\n  [part=box] strong, [part=frame] strong { overflow-wrap: anywhere; }\n  [part=box] strong, [part=frame] strong { font-size: 13.5px; font-weight: 650; line-height: 1.3; }\n  [part=box] small, [part=frame] small { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.35; }\n  [part=technical-description] { font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; overflow-wrap: anywhere; }\n  [part=metrics] { grid-column: 2; font-size: 12px; font-variant-numeric: tabular-nums; }\n  [part=metric-warning] { color: var(--boe-token-text-status-text-warning, #8a5800); }\n  [part=icon] { grid-row: span 3; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=icon] svg { display: block; width: 20px; height: 20px; }\n  [data-tone=accent] > [part=icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=box][aria-current=true], [part=frame][aria-current=true] {\n    border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);\n    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff));\n  }\n  [data-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n  [part=problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n  [part=frame] { z-index: 1; align-content: start; border-radius: 12px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 78%, transparent); }\n  [part=frame] small { grid-column: 2; }\n  [part=loop-mark] { position: absolute; right: 12px; bottom: 8px; font-size: 20px; line-height: 1; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=frame-resize] { position: absolute; right: -12px; bottom: -12px; z-index: 8; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 0 0 1px var(--boe-process-box-edge, #858585); cursor: nwse-resize; }\n  [part=frame-resize]::before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; border-right: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=frame]:not([aria-current=true]) [part=frame-resize] { visibility: hidden; }\n  [data-shape=gateway], [data-shape=event] { width: 56px !important; height: 56px !important; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; display: block; overflow: visible; }\n  [data-shape=gateway]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; rotate: 45deg; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n  [data-shape=event]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [data-shape=event][data-kind=finish]::before { border-width: 4px; }\n  [data-shape=event][data-kind=scheduled-start]::after { content: ''; position: absolute; left: 13px; top: 13px; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }\n  [data-shape=gateway] > [part=icon], [data-shape=event] > [part=icon] { position: absolute; left: 18px; top: 18px; z-index: 1; }\n  [data-shape=gateway] > strong, [data-shape=event] > strong { position: absolute; top: 58px; left: 50%; width: 150px; translate: -50% 0; text-align: center; font-size: 12px; }\n  [data-shape=gateway] > small { display: none; }\n  [data-shape=event] > small { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; font-size: 11px; line-height: 1.25; }\n  [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n  [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n  [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n  [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n  [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n  [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n  [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n  [part=port][data-side=north]::after { content: '\u2191'; }\n  [part=port][data-side=east]::after { content: '\u2192'; }\n  [part=port][data-side=south]::after { content: '\u2193'; }\n  [part=port][data-side=west]::after { content: '\u2190'; }\n  [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n  [part=port][data-hot=true] { opacity: 1; }\n  [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n  [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n  [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n  [part=connection]:has(> span:empty) { padding: 0; background: transparent; min-width: 0; min-height: 0; }\n  [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n  [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n  [part=connection-actions] button { min-height: 32px; padding: 4px; font-size: 12px; }\n  [part=note] { width: 208px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; }\n  [part=section] { z-index: 0; border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 16px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 45%, transparent); }\n  [part=section] strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.3; }\n  [part=section] small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; line-height: 1.35; }\n  [part=note], [part=section] { position: absolute; padding: 8px; pointer-events: none; }\n  [part=marquee] { position: absolute; border: 2px solid var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent); pointer-events: none; }\n  [part=connect-tooltip] { position: absolute; z-index: 20; max-width: 240px; padding: 5px 8px; border-radius: 7px; background: var(--boe-token-text-text, #141413); color: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=connect-tooltip][data-invalid=true] { background: var(--boe-token-text-status-text-error, #b92340); color: #fff; }\n  [part=ghost-box], [part=palette-ghost] { position: absolute; z-index: 5; display: flex; align-items: center; padding: 11px 12px; border: 1.5px dashed var(--boe-token-surface-surface-brand, #0061d5); border-radius: 8px; background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); font-size: 13px; font-weight: 650; pointer-events: none; }\n  [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n  [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n  [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=controls] [data-command=reset] { min-width: 56px; font-variant-numeric: tabular-nums; }\n  [part=minimap] { position: absolute; right: 16px; bottom: 16px; width: 208px; height: 136px; touch-action: none; background: var(--boe-token-surface-surface, #fff); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=minimap] rect:not([data-viewport]) { fill: var(--boe-token-stroke-stroke-hover, #d3d3d3); }\n  [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 9%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1; }\n  [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }\n  [part=checks] { display: grid; gap: 6px; margin-top: 12px; }\n  [part=checks] button { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }\n  :host([embed-mode]) [part=process-heading], :host([embed-mode]) [part=view-switch], :host([embed-mode]) [part=run-toggle], :host([embed-mode]) [part=view-menu] { display: none; }\n  [part=process-title] { font-size: 15px; line-height: 1.4; }\n  [part=process-summary] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=pane-tabs] { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); overflow-x: auto; }\n  [part=pane-tabs] button { flex: none; min-height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 13px; font-weight: 600; }\n  [part=pane-tabs] button[aria-selected=true] { color: var(--boe-token-text-text, #141413); border-bottom-color: currentColor; }\n  [part=editor], [part=pane-content] { padding: 8px 16px; }\n  [part=editor] { display: grid; align-content: start; gap: 12px; }\n  [part=inspector-kind] { display: none; }\n  [part=inspector-purpose] { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=field] { display: grid; gap: 4px; }\n  [part=field] label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 650; }\n  [part=field] :is(input:not([type=checkbox]),textarea,select) { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); font-family: inherit; font-size: 13px; line-height: 1.4; }\n  [part=field] textarea { min-height: 76px; resize: vertical; }\n  [part=field]:has([part=action-options]) { position: relative; }\n  [part=field]:has([part=action-options]) input { padding-right: 34px; }\n  [part=action-caret] { position: absolute; z-index: 1; top: 25px; right: 2px; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 18px; }\n  [part=action-options] { position: absolute; z-index: 30; top: calc(100% - 1px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=action-options][hidden] { display: none; }\n  [part=action-options] button { display: block; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; text-align: start; background: transparent; font-size: 12.5px; }\n  [part=action-options] button:hover, [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n  [part=action-options] button strong { display: block; font-size: 13px; font-weight: 650; }\n  [part=action-options] button small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=field] input[type=checkbox] { justify-self: start; width: 18px; height: 18px; accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=field] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.4; }\n  [part=field] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 4px; }\n  [part=variable-chips] button { min-height: 24px; padding: 2px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 11.5px; }\n  [part=leads-to] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=leads-to] h3 { margin: 0; font-size: 12.5px; }\n  [part=lead-row] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }\n  [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n  [part=inspector-metrics] { margin: 0; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12px; font-variant-numeric: tabular-nums; }\n  [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n  [part=inspector-metrics] dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; }\n  [part=inspector-metrics] dt { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=inspector-metrics] dd { margin: 0; font-weight: 650; }\n  [part=inspector-actions] { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=arrange-actions] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }\n  [part=arrange-actions] button { min-height: 32px; padding: 5px 7px; font-size: 12px; text-align: start; }\n  [part=outline-intro] { margin: 4px 0 14px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n  [part=copy-outline] { justify-self: start; min-height: 28px; margin-bottom: 8px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 650; }\n  [part=outline-list] { margin: 0; padding-left: 18px; display: grid; gap: 8px; }\n  [part=outline-list] [part=outline-list] { margin: 6px 0 0; gap: 6px; }\n  [part=outline-list] li { padding-left: 0; font-size: 12.5px; }\n  [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 0; font-size: 12.5px; font-weight: 650; line-height: 1.45; text-align: start; }\n  [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; }\n  [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=outline-list] p { margin: 2px 0 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }\n  [part=inspector-heading][data-single=true]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=checks] { margin: 0; padding: 0; }\n  [part=checks] button { width: 100%; border: 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 0; text-align: start; background: transparent; }\n  [part=variable-row], [part=connection-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }\n  [part=variable-row] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=variable-scope] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; }\n  [part=variable-row] label { display: grid; gap: 4px; font-weight: 650; }\n  [part=variable-row] input { min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n  [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n  :host([data-narrow]) [part=pane-drawer] { display: none; position: fixed; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n  :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n  :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n  :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; min-height: 28px; padding: 4px 9px; border-radius: 14px; font-size: 12px; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: 0; width: min(320px, 86vw); }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62vh, 560px); border-radius: 24px 24px 0 0; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-surface-surface-secondary, #e8e8e8); }\n  :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n  :host([data-narrow]) [part=palette] { padding-top: 54px; }\n  :host([data-narrow]) [part=minimap] { display: none; }\n  :host([data-narrow]) [part=toolbar] { justify-content: flex-start; }\n  :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n  :host([data-narrow]) [part=view-menu] { display: block; }\n  :host([data-narrow]) [part=controls] { left: 12px; bottom: 12px; }\n  :host([data-phone]) [data-command=tidy] { display: none; }\n  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }\n";