@limetech/lime-crm-building-blocks 2.3.0 → 2.4.0

package/dist/esm/limebb-rule-editor.entry.js

@@ -1,177 +1,106 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-COtSgrC5.js';
-import { M as Mt, n } from './index.esm-B9D_MXA6.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-BK566_jX.js';
+import { M as Mt, n } from './index.esm-C__n3hug.js';
+import { c as createTranslator } from './condition-tree-translate-ZQptbaXF.js';
+import { c as createRuleConditionTreeAdapter, g as groupOf } from './limebb-rule-condition-editor-DeY758N-.js';
+import './limebb-rule-condition-chip.entry.js';
 import { r as ruleForMode, b as ruleMode, A as ALWAYS_PRIMITIVE_ID } from './rule-editor-modes-BCglve2Z.js';
 import { c as createRandomString } from './random-string-C2JP2nLw.js';
+import './web-component-template-D1JpeNy_.js';
 
 /**
- * Remove the node at `path`.
+ * The problems the registry found, gathered by the node each belongs to.
  *
- * Removing the root yields an empty `all`-group so the tree always has
- * something to render. Returns `rule` unchanged when `path` does not
- * address a removable node.
- * @param rule
- * @param path
- */
-function deleteNode(rule, path) {
-    if (path.length === 0) {
-        return { type: 'all', rules: [] };
-    }
-    const parentPath = path.slice(0, -1);
-    const key = path.at(-1);
-    const parent = getNode(rule, parentPath);
-    if (parent === undefined) {
-        return rule;
-    }
-    if ((parent.type === 'all' || parent.type === 'any') &&
-        typeof key === 'number') {
-        const rules = [...parent.rules];
-        rules.splice(key, 1);
-        return replaceAt(rule, parentPath, Object.assign(Object.assign({}, parent), { rules }));
-    }
-    if (parent.type === 'not' && key === 'rule') {
-        return replaceAt(rule, parentPath, { type: 'all', rules: [] });
-    }
-    return rule;
-}
-/**
- * Replace the `args` of a `ref` node. Returns `rule` unchanged when
- * `path` does not resolve to a `ref`.
- * @param rule
- * @param path
- * @param args
- */
-function updateArgs(rule, path, args) {
-    const node = getNode(rule, path);
-    if (node === undefined || node.type !== 'ref') {
-        return rule;
-    }
-    return replaceAt(rule, path, Object.assign(Object.assign({}, node), { args }));
-}
-/**
- * Replace the node at `path` with `replacement`, returning a new rule
- * tree. Used by callers that need to apply a non-atomic change as a
- * single emit (e.g. updating a group's whole `rules` array at once).
- * @param rule
- * @param path
- * @param replacement
- */
-function replaceNode(rule, path, replacement) {
-    return replaceAt(rule, path, replacement);
-}
-/**
- * Wrap `group` in a `not` when `isNegated`, otherwise return it
- * unchanged. Used when re-emitting a group whose negation flag should
- * be preserved.
- * @param group
- * @param isNegated
- */
-function wrapNegated(group, isNegated) {
-    return isNegated ? { type: 'not', rule: group } : group;
-}
-/**
- * Append `child` to a group's `rules`, returning a new group. The
- * input is not mutated.
- * @param group
- * @param child
+ * The registry addresses an issue by path — `['rules', 0, 'rule']` for
+ * `root.rules[0].rule` — while the tree asks about one node at a time and never
+ * says where it is. Resolving the paths once, here, bridges the two.
+ * @param root
+ * @param issues
  */
-function appendChild(group, child) {
-    return Object.assign(Object.assign({}, group), { rules: [...group.rules, child] });
+function collectRuleIssues(root, issues) {
+    var _a, _b;
+    const owners = displayOwners(root);
+    const byNode = new Map();
+    for (const issue of issues) {
+        const node = nodeAt(root, issue.path);
+        // An empty path means the rule as a whole, and one the path cannot
+        // reach has nowhere better to go than the root either.
+        const owner = (_a = (node && owners.get(node))) !== null && _a !== void 0 ? _a : root;
+        byNode.set(owner, [...((_b = byNode.get(owner)) !== null && _b !== void 0 ? _b : []), issue.message]);
+    }
+    return byNode;
 }
 /**
- * Structural equality on two paths.
- * @param a
- * @param b
+ * Which node each node is drawn as part of. Most stand for themselves; the
+ * exception is everything under a `not`, which is drawn as that `not` — the
+ * two are one thing on screen, and only the wrapper has somewhere to show it.
+ * @param root
  */
-function pathsEqual(a, b) {
-    if (a.length !== b.length) {
-        return false;
-    }
-    return a.every((value, index) => value === b[index]);
-}
-/**
- * Filter validation issues to those whose `path` matches `path`.
- * @param issues
- * @param path
- */
-function issuesAt(issues, path) {
-    return issues.filter((issue) => pathsEqual(issue.path, path));
+function displayOwners(root) {
+    const owners = new Map();
+    const visit = (node, owner) => {
+        // A hand-edited rule can hold a `null` where a node should be. It is
+        // drawn, as something that cannot be read, so it is walked past here.
+        if (typeof node !== 'object' || node === null) {
+            return;
+        }
+        owners.set(node, owner);
+        if (node.type === 'not') {
+            visit(node.rule, owner);
+            return;
+        }
+        if ((node.type === 'all' || node.type === 'any') &&
+            Array.isArray(node.rules)) {
+            for (const child of node.rules) {
+                visit(child, child);
+            }
+        }
+    };
+    visit(root, root);
+    return owners;
 }
 /**
- * Resolve the node at `path` by walking each segment from the root.
- * Returns `undefined` when a segment indexes past the end of a
- * combinator's `rules`, so callers must guard the result.
- * @param rule
+ * The node a validation path addresses, or nothing when it addresses none.
+ *
+ * Walked one hop at a time because the two the registry emits have different
+ * shapes: into a negation is the single segment `rule`, into the *n*-th child
+ * of a group is the pair `rules`, *n*. Anything else is not a path this rule
+ * can be walked by.
+ * @param root
  * @param path
  */
-function getNode(rule, path) {
-    let node = rule;
-    for (const key of path) {
-        if (node === undefined) {
+function nodeAt(root, path) {
+    let node = root;
+    let index = 0;
+    while (index < path.length) {
+        // The same `null` can be standing one hop short of the path's end,
+        // with no hop to take from it. Asked for `type`, it would throw.
+        if (node === null || typeof node !== 'object') {
             return undefined;
         }
-        node = stepIntoNode(node, key);
-    }
-    return node;
-}
-function replaceAt(root, path, replacement) {
-    if (path.length === 0) {
-        return replacement;
-    }
-    const [head, ...tail] = path;
-    if (root.type === 'not' && head === 'rule') {
-        return Object.assign(Object.assign({}, root), { rule: replaceAt(root.rule, tail, replacement) });
-    }
-    if ((root.type === 'all' || root.type === 'any') && head === 'rules') {
-        if (tail.length === 0) {
-            return replacement;
+        const key = path[index];
+        if (key === 'rule' && node.type === 'not') {
+            node = node.rule;
+            index += 1;
+            continue;
         }
-        const [index, ...rest] = tail;
-        if (typeof index !== 'number') {
-            return root;
+        const child = path[index + 1];
+        if (key === 'rules' &&
+            (node.type === 'all' || node.type === 'any') &&
+            Array.isArray(node.rules) &&
+            typeof child === 'number') {
+            node = node.rules[child];
+            index += 2;
+            continue;
         }
-        const rules = [...root.rules];
-        rules[index] = replaceAt(rules[index], rest, replacement);
-        return Object.assign(Object.assign({}, root), { rules });
-    }
-    return root;
-}
-function stepIntoNode(node, key) {
-    if (node.type === 'not' && key === 'rule') {
-        return node.rule;
-    }
-    if ((node.type === 'all' || node.type === 'any') && key === 'rules') {
-        return node;
-    }
-    if ((node.type === 'all' || node.type === 'any') &&
-        typeof key === 'number') {
-        return node.rules[key];
+        return undefined;
     }
     return node;
 }
 
-const UNKNOWN_ICON = {
-    name: 'question',
-    color: 'rgb(var(--color-glaucous-light))',
-};
-/**
- * Class map for a rule-node container. Adds the type modifier and an
- * `invalid` flag when validation issues attach to this node.
- * @param type
- * @param issues
- */
-function nodeClasses(type, issues) {
-    return {
-        'rule-node': true,
-        [`rule-node--${type}`]: true,
-        'rule-node--invalid': issues.length > 0,
-    };
-}
 /**
- * Build the searchable list shown by the primitive pickers. Cached on
- * the render context so it isn't recomputed per node. `meta.title` and
- * `meta.description` are passed through the translator so callers can
- * register translation keys as metadata — plain strings travel through
- * unchanged.
+ * The primitives the add button offers. Titles and descriptions go through the
+ * translator, so a caller can register translation keys as metadata — plain
+ * strings travel through unchanged.
  * @param metadataById
  * @param translator
  */
@@ -179,7 +108,7 @@ function createPrimitiveOptions(metadataById, translator) {
     return [...metadataById.values()]
         .map((meta) => ({
         value: meta.id,
-        text: meta.title ? translator.get(meta.title) : meta.id,
+        text: primitiveTitle(meta, translator),
         secondaryText: meta.description
             ? translator.get(meta.description)
             : '',
@@ -187,6 +116,15 @@ function createPrimitiveOptions(metadataById, translator) {
     }))
         .sort((a, b) => a.text.localeCompare(b.text));
 }
+/**
+ * How a primitive reads: its translated title, or its bare id when it has none
+ * to give. The add menu and the chip both read it from here, so they agree.
+ * @param meta
+ * @param translator
+ */
+function primitiveTitle(meta, translator) {
+    return meta.title ? translator.get(meta.title) : meta.id;
+}
 /**
  * Whether every context key a primitive reads is in the reachable set.
  * A primitive that reads nothing is always covered.
@@ -197,23 +135,9 @@ function primitiveReadsCovered(meta, reachable) {
     return meta.reads.every((key) => reachable.has(key));
 }
 /**
- * Find the picker item for `id`, falling back to a placeholder marked
- * with the unknown-primitive icon when the id isn't in the registry.
- * @param allItems
- * @param id
- */
-function resolveItem(allItems, id) {
-    var _a;
-    return ((_a = allItems.find((item) => item.value === id)) !== null && _a !== void 0 ? _a : {
-        value: id,
-        text: id,
-        icon: UNKNOWN_ICON,
-    });
-}
-/**
- * Build a picker `searcher` bound to a fixed item list. Both the ref
- * picker and the chip picker want exactly this — wrapping
- * {@link searchItems} in a promise — and deserve to share it.
+ * Narrow the primitives as the user types, for the search field at the top of
+ * the add menu. Every word has to match somewhere — title, description or id —
+ * so that "deal won" finds "Won deals".
  * @param items
  */
 function createSearcher(items) {
@@ -228,273 +152,12 @@ function searchItems(allItems, query) {
         var _a, _b;
         return item.text.toLocaleLowerCase().includes(part) ||
             ((_a = item.secondaryText) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase().includes(part)) ||
-            ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase().includes(part));
+            String((_b = item.value) !== null && _b !== void 0 ? _b : '')
+                .toLocaleLowerCase()
+                .includes(part);
     }));
 }
 
-const CHIP_TOKEN_PREFIX = '__chip__:';
-function chipTokenFor(index) {
-    return `${CHIP_TOKEN_PREFIX}${index}`;
-}
-// The address of a chip inside a group is the group's path followed
-// by a two-segment suffix `['rules', index]`. Build and parse via
-// these helpers so both sides stay in sync.
-const CHIP_PATH_SUFFIX_LENGTH = 2;
-/**
- * Address of the chip at `index` inside a group: the group's path plus
- * the `['rules', index]` suffix. Built here so the picker and popover
- * address chips the same way.
- * @param groupPath
- * @param index
- */
-function buildChipPath(groupPath, index) {
-    return [...groupPath, 'rules', index];
-}
-function parentGroupPath(chipPath) {
-    return chipPath.slice(0, -CHIP_PATH_SUFFIX_LENGTH);
-}
-/**
- * If `node` is a `ref` or a `not(ref)`, return the underlying ref
- * together with its negation flag. Used to decide whether a child of a
- * group renders as a chip (this returns non-null) or as a nested box
- * (this returns null).
- * @param node
- */
-function extractRef(node) {
-    if (node.type === 'ref') {
-        return { ref: node, isNegated: false };
-    }
-    if (node.type === 'not' && node.rule.type === 'ref') {
-        return { ref: node.rule, isNegated: true };
-    }
-    return null;
-}
-const GroupChipsView = ({ groupNode, groupPath, chipChildren, ctx }) => {
-    const chipsByToken = new Map();
-    const value = chipChildren.map((entry) => {
-        const token = chipTokenFor(entry.index);
-        chipsByToken.set(token, entry);
-        const base = resolveItem(ctx.allPrimitiveOptions, entry.ref.id);
-        return Object.assign(Object.assign({}, base), { text: entry.isNegated ? `¬ ${base.text}` : base.text, value: token });
-    });
-    const searcher = createSearcher(ctx.availablePrimitiveOptions);
-    const openChip = findOpenChip(chipChildren, groupPath, ctx.openChipPath);
-    const delimiter = groupNode.type === 'all' ? '&' : '|';
-    return (h("limel-popover", { class: "rule-node__chips-popover", open: openChip !== null, openDirection: "bottom-start", onClose: ctx.onPopoverClose }, h("div", { slot: "trigger", class: "rule-node__chips" }, h("limel-picker", { multiple: true, label: ctx.translator.get('webclient.rule-editor.rules-label'), value: value, searcher: searcher, delimiter: delimiter, readonly: ctx.readonly, disabled: ctx.disabled, onChange: chipsChangeHandler(groupNode, groupPath, chipsByToken, ctx), onInteract: chipInteractHandler(groupPath, chipsByToken, ctx) })), h("div", null, renderChipPopoverContent(openChip, groupPath, ctx))));
-};
-function renderChipPopoverContent(openChip, groupPath, ctx) {
-    if (!openChip) {
-        return null;
-    }
-    const openChipPath = buildChipPath(groupPath, openChip.index);
-    return (h("limebb-rule-chip-popover", { platform: ctx.platform, context: ctx.context, refNode: openChip.ref, isNegated: openChip.isNegated, metadata: ctx.metadataById.get(openChip.ref.id), readonly: ctx.readonly, disabled: ctx.disabled, isMutable: ctx.isMutable, focusOnOpen: ctx.focusOnOpen, onNegate: chipNegateHandler(openChip, openChipPath, ctx), onUpdateArgs: chipArgsHandler(openChip, openChipPath, ctx), onDeleteChip: chipDeleteHandler(openChipPath, ctx) }));
-}
-const chipsChangeHandler = (groupNode, groupPath, chipsByToken, ctx) => (event) => {
-    event.stopPropagation();
-    const items = Array.isArray(event.detail) ? event.detail : [];
-    const openIndex = openChipIndexInGroup(groupPath, ctx.openChipPath);
-    if (openIndex !== null) {
-        const openToken = chipTokenFor(openIndex);
-        if (items.every((item) => item.value !== openToken)) {
-            ctx.onPopoverClose();
-        }
-    }
-    const newChipNodes = items.flatMap((item) => {
-        if (typeof item.value !== 'string') {
-            return [];
-        }
-        const existing = chipsByToken.get(item.value);
-        if (existing) {
-            return [
-                existing.isNegated
-                    ? { type: 'not', rule: existing.ref }
-                    : existing.ref,
-            ];
-        }
-        return [{ type: 'ref', id: item.value }];
-    });
-    const nestedGroupRules = groupNode.rules.filter((rule) => extractRef(rule) === null);
-    ctx.onReplaceNode(groupPath, Object.assign(Object.assign({}, groupNode), { rules: [...newChipNodes, ...nestedGroupRules] }));
-};
-const chipInteractHandler = (groupPath, chipsByToken, ctx) => (event) => {
-    event.stopPropagation();
-    const token = interactedToken(event.detail);
-    const chip = token ? chipsByToken.get(token) : undefined;
-    if (!chip) {
-        return;
-    }
-    ctx.onChipInteract([...groupPath, 'rules', chip.index]);
-};
-const chipNegateHandler = (openChip, openChipPath, ctx) => (event) => {
-    event.stopPropagation();
-    const next = event.detail
-        ? { type: 'not', rule: openChip.ref }
-        : openChip.ref;
-    ctx.onReplaceNode(openChipPath, next);
-};
-const chipArgsHandler = (openChip, openChipPath, ctx) => (event) => {
-    event.stopPropagation();
-    const argsPath = openChip.isNegated
-        ? [...openChipPath, 'rule']
-        : openChipPath;
-    ctx.onUpdateArgs(argsPath, event.detail);
-};
-const chipDeleteHandler = (openChipPath, ctx) => () => {
-    ctx.onDelete(openChipPath);
-};
-/**
- * `limel-picker` declares its `interact` event as
- * `EventEmitter<ListItem<PickerValue>>` but the runtime actually emits
- * the chip's value (a string) — see picker.tsx's handleInteract. This
- * unwraps either shape into the string token.
- * @param detail
- */
-function interactedToken(detail) {
-    if (typeof detail === 'string') {
-        return detail;
-    }
-    if (detail && typeof detail === 'object' && 'value' in detail) {
-        const value = detail.value;
-        return typeof value === 'string' ? value : undefined;
-    }
-    return undefined;
-}
-function findOpenChip(chipChildren, groupPath, openChipPath) {
-    var _a;
-    const index = openChipIndexInGroup(groupPath, openChipPath);
-    if (index === null) {
-        return null;
-    }
-    return (_a = chipChildren.find((entry) => entry.index === index)) !== null && _a !== void 0 ? _a : null;
-}
-function openChipIndexInGroup(groupPath, openChipPath) {
-    if (!openChipPath || openChipPath.length < CHIP_PATH_SUFFIX_LENGTH) {
-        return null;
-    }
-    if (!pathsEqual(parentGroupPath(openChipPath), groupPath)) {
-        return null;
-    }
-    const lastKey = openChipPath.at(-1);
-    return typeof lastKey === 'number' ? lastKey : null;
-}
-
-const GroupNodeView = ({ node, path, isNegated, ctx }) => {
-    const groupBasePath = isNegated ? [...path, 'rule'] : path;
-    const issuesHere = isNegated
-        ? [
-            ...issuesAt(ctx.issues, path),
-            ...issuesAt(ctx.issues, groupBasePath),
-        ]
-        : issuesAt(ctx.issues, path);
-    const chipChildren = [];
-    const nestedGroups = [];
-    for (const [index, child] of node.rules.entries()) {
-        const extracted = extractRef(child);
-        if (extracted) {
-            chipChildren.push(Object.assign(Object.assign({}, extracted), { index }));
-        }
-        else {
-            nestedGroups.push({ child, index });
-        }
-    }
-    const options = combinatorOptions(ctx);
-    const selectedCombinator = options.find((option) => option.value === node.type);
-    return (h("div", { class: nodeClasses(node.type, issuesHere), key: pathKey(path) }, h("div", { class: "rule-node__header" }, h("limel-select", { class: "rule-node__combinator-select", value: selectedCombinator, options: options, disabled: !ctx.isMutable, onChange: combinatorChangeHandler(node, path, isNegated, ctx) }), renderMutableGroupActions(node, path, isNegated, ctx)), h("div", { class: "rule-node__body" }, h(IssuesView, { issues: issuesHere }), h(GroupChipsView, { groupNode: node, groupPath: groupBasePath, chipChildren: chipChildren, ctx: ctx }), renderNestedGroups(nestedGroups, groupBasePath, ctx), renderAddGroupFooter(node, path, isNegated, ctx))));
-};
-function pathKey(path) {
-    return path.length === 0 ? 'root' : path.join('/');
-}
-function combinatorOptions(ctx) {
-    return [
-        {
-            value: 'all',
-            text: ctx.translator.get('webclient.combinator.all'),
-        },
-        {
-            value: 'any',
-            text: ctx.translator.get('webclient.combinator.any'),
-        },
-    ];
-}
-function renderMutableGroupActions(node, path, isNegated, ctx) {
-    if (!ctx.isMutable) {
-        return null;
-    }
-    return (h("div", { class: "rule-node__header-actions" }, h("limel-switch", { class: "rule-node__negate-switch", label: ctx.translator.get('webclient.negate'), value: isNegated, onChange: negateGroupHandler(node, path, ctx) }), h("limel-icon-button", { icon: "trash", label: ctx.translator.get('webclient.rule-editor.delete'), onClick: () => ctx.onDelete(path) })));
-}
-function renderNestedGroups(nestedGroups, groupBasePath, ctx) {
-    if (nestedGroups.length === 0) {
-        return null;
-    }
-    return (h("div", { class: "rule-node__children" }, nestedGroups.map((entry) => (h(RuleNodeView, { node: entry.child, path: [...groupBasePath, 'rules', entry.index], ctx: ctx })))));
-}
-function renderAddGroupFooter(node, path, isNegated, ctx) {
-    if (!ctx.isMutable) {
-        return null;
-    }
-    return (h("div", { class: "rule-node__footer" }, h("limel-button", { icon: "add", label: ctx.translator.get('webclient.rule-editor.add-nested-group'), onClick: addGroupHandler(node, path, isNegated, ctx) })));
-}
-function replaceGroup(nextGroup, path, isNegated, ctx) {
-    ctx.onReplaceNode(path, wrapNegated(nextGroup, isNegated));
-}
-const combinatorChangeHandler = (node, path, isNegated, ctx) => (event) => {
-    event.stopPropagation();
-    const newType = event.detail.value;
-    if (newType !== node.type) {
-        replaceGroup(Object.assign(Object.assign({}, node), { type: newType }), path, isNegated, ctx);
-    }
-};
-const addGroupHandler = (node, path, isNegated, ctx) => () => {
-    const expanded = appendChild(node, { type: 'all', rules: [] });
-    replaceGroup(expanded, path, isNegated, ctx);
-};
-const negateGroupHandler = (node, path, ctx) => (event) => {
-    event.stopPropagation();
-    ctx.onReplaceNode(path, wrapNegated(node, event.detail));
-};
-
-/**
- * Render a `Rule` node and recurse into its children.
- * @param props
- */
-const RuleNodeView = (props) => {
-    const { node, path, ctx } = props;
-    const group = extractGroup(node);
-    if (!group) {
-        return null;
-    }
-    return (h(GroupNodeView, { node: group.node, path: path, isNegated: group.isNegated, ctx: ctx }));
-};
-const isNegatedGroup = (node) => node.type === 'not' &&
-    (node.rule.type === 'all' || node.rule.type === 'any');
-/**
- * If `node` is a group (`all`/`any`) or a negated group, return the
- * inner group together with its negation flag. Otherwise `null`.
- * Used by the dispatcher and by the editor's input normalization.
- * @param node
- */
-function extractGroup(node) {
-    if (node.type === 'all' || node.type === 'any') {
-        return { node, isNegated: false };
-    }
-    if (isNegatedGroup(node)) {
-        return { node: node.rule, isNegated: true };
-    }
-    if (node.type === 'not') {
-        const inner = extractGroup(node.rule);
-        if (inner) {
-            return { node: inner.node, isNegated: !inner.isNegated };
-        }
-    }
-    return null;
-}
-const IssuesView = ({ issues }) => {
-    if (issues.length === 0) {
-        return null;
-    }
-    return issues.map((issue) => (h("div", { class: "rule-node__issue" }, issue.message)));
-};
-
 /**
  * The shared string each mode is labelled from. Adverbs answering "when
  * does this apply?", so they carry no rule-editor namespace and are
@@ -527,7 +190,7 @@ const RuleModeView = (props) => {
         } }));
 };
 
-const ruleEditorCss = () => `@charset "UTF-8";:host{display:block;position:relative}.limel-notched-outline{--limel-notched-outline-background-color:transparent;padding:0.5rem 0 0 0}limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent}.rule-editor--disabled{opacity:0.6;pointer-events:none}.rule-node{border:1px solid rgb(var(--contrast-500));border-radius:0.5rem;margin:0.25rem 0;overflow:hidden;background-color:rgb(var(--contrast-100))}.rule-node--invalid{border-color:rgb(var(--color-red-default))}.rule-node--all>.rule-node__header,.rule-node--any>.rule-node__header{background-color:rgb(var(--contrast-300));padding:0.375rem 0.75rem;border-bottom:1px solid rgb(var(--contrast-500))}.rule-node__header{display:flex;align-items:center;gap:0.5rem}.rule-node__header-actions{margin-left:auto;display:grid;grid-auto-flow:column;grid-gap:0.5rem;padding:0.125rem;align-items:center}.rule-node__combinator-select{min-width:6rem}.rule-node__body{padding:0.75rem;display:flex;flex-direction:column;gap:0.75rem}limel-popover.rule-node__chips-popover{display:contents;--popover-surface-width:min(calc(100vw - 4rem), 50rem)}.rule-node__chips{display:block;width:100%}.rule-node__chips limel-picker{display:block;width:100%}.rule-node__children{display:flex;flex-direction:column;gap:0.5rem}.rule-node__footer{display:flex;justify-content:center}.rule-node__issue{color:rgb(var(--color-red-default));font-size:0.875rem}:host(limebb-rule-editor:focus),:host(limebb-rule-editor:focus-visible),:host(limebb-rule-editor:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limebb-rule-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limebb-rule-editor:focus) limel-helper-line,:host(limebb-rule-editor:focus-visible) limel-helper-line,:host(limebb-rule-editor:focus-within) limel-helper-line,:host(limebb-rule-editor:hover) limel-helper-line{will-change:grid-template-rows}limel-help{position:absolute;top:calc(var(--form-row-gap, 1rem) * -0.5);left:calc(var(--form-column-gap, 1rem) * -0.5);z-index:1}`;
+const ruleEditorCss = () => `@charset "UTF-8";:host{display:block;position:relative}.limel-notched-outline{--limel-notched-outline-background-color:transparent;padding:0.5rem 0 0 0}limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent}.rule-editor--disabled{opacity:0.6;pointer-events:none}limebb-condition-tree{--popover-surface-width:min(calc(100vw - 4rem), 50rem)}:host(limebb-rule-editor:focus),:host(limebb-rule-editor:focus-visible),:host(limebb-rule-editor:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limebb-rule-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limebb-rule-editor:focus) limel-helper-line,:host(limebb-rule-editor:focus-visible) limel-helper-line,:host(limebb-rule-editor:focus-within) limel-helper-line,:host(limebb-rule-editor:hover) limel-helper-line{will-change:grid-template-rows}limel-help{position:absolute;top:calc(var(--form-row-gap, 1rem) * -0.5);left:calc(var(--form-column-gap, 1rem) * -0.5);z-index:1}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -543,8 +206,6 @@ const RuleEditor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "change");
-        this.issues = [];
-        this.openChipPath = null;
         /**
          * The mode the author last clicked, held until `value` reads back
          * as it.
@@ -555,10 +216,27 @@ const RuleEditor = class {
          * what the author just clicked.
          */
         this.modeOverride = null;
-        this.focusOnOpen = false;
         this.metadataById = new Map();
-        this.allPrimitiveOptions = [];
+        /**
+         * How each registered primitive reads, by id. Translated once here
+         * because the platform's translator parses the message afresh on
+         * every call, and the adapter would otherwise do that per condition,
+         * several times over, on every edit.
+         */
+        this.primitiveTitles = new Map();
         this.availablePrimitiveOptions = [];
+        this.searcher = createSearcher([]);
+        /**
+         * What validation found, by the node it belongs to.
+         */
+        this.issuesByNode = new Map();
+        /**
+         * The conditions added here rather than loaded, which a `RuleRef`
+         * does not record. The adapter reads it to decide which condition
+         * opens itself. Replaced when the tree goes, since a condition still
+         * listed when the author comes back would open itself again.
+         */
+        this.created = new WeakSet();
         this.reachableSlots = new Set();
         this.normalizedCache = null;
         this.hasLoaded = false;
@@ -572,6 +250,9 @@ const RuleEditor = class {
          * conditions are gone, rather than handing back the ones they
          * removed. With nothing stashed, `conditional` emits no rule, which
          * is how the editor already says "the author cleared this".
+         *
+         * What is not stashed is which conditions had just been added, so
+         * that none of them opens itself again on the way back.
          * @param mode
          */
         this.handleModeChange = (mode) => {
@@ -579,32 +260,28 @@ const RuleEditor = class {
             if (this.currentMode === 'conditional') {
                 this.stashedTree = this.value;
             }
+            if (mode !== 'conditional') {
+                this.created = new WeakSet();
+            }
             this.modeOverride = mode;
             this.change.emit((_a = ruleForMode(mode)) !== null && _a !== void 0 ? _a : this.stashedTree);
         };
-        this.handleDelete = (path) => {
-            this.openChipPath = null;
-            this.focusOnOpen = false;
-            this.emitIfChanged(deleteNode(this.normalizedValue, path));
-        };
-        this.handleUpdateArgs = (path, args) => {
-            this.emitIfChanged(updateArgs(this.normalizedValue, path, args));
-        };
-        this.handleReplaceNode = (path, replacement) => {
-            const autoOpenPath = this.autoOpenPathFor(path, replacement);
-            this.focusOnOpen = autoOpenPath !== null;
-            if (autoOpenPath !== null) {
-                this.openChipPath = autoOpenPath;
-            }
-            this.emitIfChanged(replaceNode(this.normalizedValue, path, replacement));
-        };
-        this.handleChipInteract = (path) => {
-            this.openChipPath = path;
-            this.focusOnOpen = false;
-        };
-        this.handlePopoverClose = () => {
-            this.openChipPath = null;
-            this.focusOnOpen = false;
+        /**
+         * Take in a tree the author changed. The tree reports `null` when
+         * the last condition goes, which for a rule means there is none —
+         * the same thing an emptied editor has always emitted.
+         *
+         * Editing the tree is only possible in `conditional`, so the edit
+         * itself records the mode: without this, a tree emptied to nothing
+         * would read back as the first offered mode and rewrite the setting
+         * under the author.
+         * @param event
+         */
+        this.handleTreeChange = (event) => {
+            var _a;
+            event.stopPropagation();
+            this.modeOverride = 'conditional';
+            this.change.emit((_a = event.detail) !== null && _a !== void 0 ? _a : undefined);
         };
     }
     componentWillLoad() {
@@ -615,6 +292,7 @@ const RuleEditor = class {
         this.indexMetadata();
         this.rebuildAvailableOptions();
         this.runValidation();
+        this.rebuildAdapter();
     }
     /**
      * Re-walk reachable slots when the editor is re-attached to the DOM,
@@ -629,6 +307,7 @@ const RuleEditor = class {
         this.computeReachableSlots();
         this.rebuildAvailableOptions();
         this.runValidation();
+        this.rebuildAdapter();
     }
     componentDidLoad() {
         this.hasLoaded = true;
@@ -645,7 +324,7 @@ const RuleEditor = class {
         this.rebuildFromRegistries();
     }
     render() {
-        return (h(Host, { key: '98380987c6687ce58cca822ea2fd2f106787897b' }, this.renderHelp(), h("limel-notched-outline", { key: 'bbf2d6da192524c4cf8e2e616ca2dab6206a43a6', label: this.label, labelId: this.labelId, required: this.required, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, hasValue: true, hasFloatingLabel: true }, h("div", { key: '9e7043bae1b8f60f9ead7b0ed1874dae32944e9e', slot: "content", class: {
+        return (h(Host, { key: 'eb89af0c748f82d8e60b1209c4fcce3475ac2934' }, this.renderHelp(), h("limel-notched-outline", { key: '9d454ec87268aa9ff07776d38882365a544a64e7', label: this.label, labelId: this.labelId, required: this.required, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, hasValue: true, hasFloatingLabel: true }, h("div", { key: '57293e75c641d4909a4d2e1d3a3d2c20a60a4512', slot: "content", class: {
                 'rule-editor': true,
                 'rule-editor--disabled': this.disabled,
             }, role: "group", "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderModes(), this.renderTree())), this.renderHelperLine()));
@@ -662,13 +341,18 @@ const RuleEditor = class {
      * The condition tree, shown unless a mode other than `conditional`
      * is selected — an unconditional rule has no conditions to show.
      * A caller offering no modes at all gets the tree, as before.
+     *
+     * An unset rule is handed over as unset, rather than as an empty
+     * group: the tree draws the group an author's first condition will
+     * land in, and drawing one here would only be a second opinion on
+     * what that looks like.
      */
     renderTree() {
         const mode = this.currentMode;
         if (mode && mode !== 'conditional') {
             return null;
         }
-        return (h(RuleNodeView, { node: this.normalizedValue, path: [], ctx: this.createRenderContext() }));
+        return (h("limebb-condition-tree", { platform: this.platform, context: this.effectiveContext, value: this.normalizedValue, adapter: this.adapter, addOptions: this.availablePrimitiveOptions, addSearcher: this.searcher, readonly: this.readonly, disabled: this.disabled, onChange: this.handleTreeChange }));
     }
     renderHelperLine() {
         if (!this.helperText) {
@@ -682,27 +366,6 @@ const RuleEditor = class {
         }
         return h("limel-help", { value: this.help });
     }
-    createRenderContext() {
-        return {
-            issues: this.issues,
-            metadataById: this.metadataById,
-            allPrimitiveOptions: this.allPrimitiveOptions,
-            availablePrimitiveOptions: this.availablePrimitiveOptions,
-            isMutable: !this.readonly && !this.disabled,
-            readonly: this.readonly,
-            disabled: this.disabled,
-            platform: this.platform,
-            context: this.effectiveContext,
-            translator: this.translator,
-            openChipPath: this.openChipPath,
-            focusOnOpen: this.focusOnOpen,
-            onDelete: this.handleDelete,
-            onUpdateArgs: this.handleUpdateArgs,
-            onReplaceNode: this.handleReplaceNode,
-            onChipInteract: this.handleChipInteract,
-            onPopoverClose: this.handlePopoverClose,
-        };
-    }
     /**
      * The mode the editor is in, or `undefined` when it offers none —
      * then it is the plain tree editor it was before modes existed.
@@ -736,51 +399,14 @@ const RuleEditor = class {
             this.modeOverride = null;
         }
     }
-    /**
-     * Path of a newly added chip whose primitive declares a config
-     * component, so its args editor opens immediately on add. The new
-     * ref is found by object identity — the picker reuses existing ref
-     * objects and only the added chip is a fresh node — so adding a
-     * second instance of a primitive already in the group is still
-     * detected. Returns `null` unless exactly one ref was added and it
-     * has an editor, leaving the open chip untouched for removals,
-     * multi-adds, and negation.
-     * @param path
-     * @param replacement
-     */
-    autoOpenPathFor(path, replacement) {
-        var _a;
-        if (replacement.type !== 'all' && replacement.type !== 'any') {
-            return null;
-        }
-        const previous = getNode(this.normalizedValue, path);
-        if (previous === undefined ||
-            (previous.type !== 'all' && previous.type !== 'any')) {
-            return null;
-        }
-        const previousRefs = new Set(previous.rules
-            .map((rule) => { var _a; return (_a = extractRef(rule)) === null || _a === void 0 ? void 0 : _a.ref; })
-            .filter((ref) => ref !== undefined));
-        const added = replacement.rules
-            .map((rule, index) => {
-            var _a;
-            const ref = (_a = extractRef(rule)) === null || _a === void 0 ? void 0 : _a.ref;
-            return ref && !previousRefs.has(ref) ? { ref, index } : null;
-        })
-            .filter((entry) => entry !== null);
-        if (added.length !== 1) {
-            return null;
-        }
-        const [{ ref, index }] = added;
-        return ((_a = this.metadataById.get(ref.id)) === null || _a === void 0 ? void 0 : _a.configComponent)
-            ? buildChipPath(path, index)
-            : null;
-    }
     indexMetadata() {
         var _a, _b, _c;
         const metadata = (_c = (_b = (_a = this.ruleRegistry).listMetadata) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [];
         this.metadataById = new Map(metadata.map((item) => [item.id, item]));
-        this.allPrimitiveOptions = createPrimitiveOptions(this.metadataById, this.translator);
+        this.primitiveTitles = new Map(metadata.map((item) => [
+            item.id,
+            primitiveTitle(item, this.translator),
+        ]));
     }
     /**
      * Recompute the cached add-palette options. The inputs — indexed
@@ -790,6 +416,7 @@ const RuleEditor = class {
      */
     rebuildAvailableOptions() {
         this.availablePrimitiveOptions = createPrimitiveOptions(this.availablePrimitiveMetadata(), this.translator);
+        this.searcher = createSearcher(this.availablePrimitiveOptions);
     }
     /**
      * The subset of registered metadata offered for adding in the
@@ -797,7 +424,7 @@ const RuleEditor = class {
      * reachable slots are dropped, and so is the always primitive —
      * it reads nothing, so it is always covered, but an "Always" chip
      * among a group's conditions says nothing. Filtering only the
-     * palette — not the full `allPrimitiveOptions` — keeps
+     * palette — the adapter still reads the whole index — keeps
      * already-placed chips resolving to their proper title even when
      * their read slot isn't reachable.
      */
@@ -837,45 +464,81 @@ const RuleEditor = class {
         ]);
     }
     runValidation() {
-        if (!this.value) {
-            this.issues = [];
-            return;
-        }
-        const result = this.ruleRegistry.validate(this.normalizedValue, [
-            ...this.reachableSlots,
-        ]);
-        this.issues = result.ok ? [] : result.issues;
+        this.issuesByNode = this.findIssues();
     }
     /**
-     * Emit an edited tree. Editing the tree is only possible in
-     * `conditional`, so the edit itself records the mode: an edit that
-     * empties the tree emits no rule, and without this the empty value
-     * would read back as the first offered mode.
-     * @param next
+     * What the registry finds wrong with the rule, gathered by the node
+     * each problem belongs to. Validation runs against the normalized
+     * rule, which is also what the tree is handed, so the paths the
+     * registry reports address the very nodes the tree draws.
+     *
+     * A rule the registry cannot even walk — one hand-edited into a shape
+     * that is not a rule — makes it throw rather than report. That is the
+     * rule an author most needs the editor for, so the throw is caught
+     * and the editor drawn anyway: the tree marks the offending condition
+     * unreadable itself, which is the same thing validation would have
+     * said and in the place it belongs.
      */
-    emitIfChanged(next) {
-        if (next === this.normalizedValue) {
-            return;
+    findIssues() {
+        const root = this.normalizedValue;
+        if (!root) {
+            return new Map();
+        }
+        try {
+            const result = this.ruleRegistry.validate(root, [
+                ...this.reachableSlots,
+            ]);
+            return result.ok
+                ? new Map()
+                : collectRuleIssues(root, result.issues);
+        }
+        catch (error) {
+            // The throw names the node it choked on. What the author needs is
+            // already in the tree; this is what tells a developer an unreadable
+            // rule from a registry that could not answer for a readable one.
+            console.warn('rule-editor could not validate the rule', {
+                rule: root,
+                error,
+            });
+            return new Map();
         }
-        this.modeOverride = 'conditional';
-        this.change.emit(collapseEmptyRoot(next));
     }
     /**
-     * Wrap any non-group `value` in a top-level `all` so the editor
-     * always has a group to render against. When `value` is unset,
-     * returns a fresh empty `all`-group as a render-only placeholder —
-     * `emitNormalization` will *not* push that placeholder back to the
-     * caller, so an unset value stays unset until the user edits.
+     * Gather what the tree draws from into a new adapter, which is how a
+     * change the rule does not carry reaches the screen at all.
+     *
+     * Not rebuilt for a validation pass: that runs because the rule
+     * changed, and the tree is already redrawing for the same reason.
+     * Rebuilding there would sync its open state twice for one edit.
+     */
+    rebuildAdapter() {
+        this.adapter = createRuleConditionTreeAdapter({
+            metadata: this.metadataById,
+            titles: this.primitiveTitles,
+            translate: createTranslator(this.platform),
+            issues: () => this.issuesByNode,
+            created: () => this.created,
+        });
+    }
+    /**
+     * Wrap any non-group `value` in a top-level `all`, so that a lone
+     * condition has a group to grow in. An unset value stays unset: the
+     * tree draws the group a first condition will land in, and
+     * `emitNormalization` never pushes that placeholder back to the
+     * caller, so "no rule yet" stays distinguishable from "the author
+     * cleared this".
      *
      * An unconditional mode is the exception: its sentinel is left
      * exactly as it came in, because wrapping it would rewrite the
      * shape the mode is read back from.
      *
-     * Memoized so callers that read this several times in one handler
-     * see the same reference — the identity check in `emitIfChanged`
-     * depends on it.
+     * Memoized, so that the tree is handed the same rule on every
+     * render and redraws only when the rule itself changes.
      */
     get normalizedValue() {
+        if (!this.value) {
+            return undefined;
+        }
         const mode = this.currentMode;
         if (this.normalizedCache !== null &&
             this.normalizedCache.source === this.value &&
@@ -942,35 +605,16 @@ const EMPTY_CONTEXT = Object.freeze({
     id: null,
 });
 function normalize(value, mode) {
-    if (!value) {
-        return { type: 'all', rules: [] };
-    }
     // Neither sentinel is a group, and wrapping one would rewrite the
     // very shape the mode is read back from.
     if (mode === 'always' || mode === 'never') {
         return value;
     }
-    if (extractGroup(value)) {
+    if (groupOf(value)) {
         return value;
     }
     return { type: 'all', rules: [value] };
 }
-/**
- * Treat an empty root `all`/`any` as "no rule". Mapping that back to
- * `undefined` on emit keeps the form contract a clean
- * `Rule | undefined` — callers don't have to inspect rule shape to
- * tell "user cleared this" from "user has a real rule". A negated
- * empty group (`not(all())` etc.) is left intact — vacuous either
- * direction, but the user explicitly opted into the wrapper, so we
- * don't second-guess.
- * @param rule
- */
-function collapseEmptyRoot(rule) {
-    if (rule.type !== 'all' && rule.type !== 'any') {
-        return rule;
-    }
-    return rule.rules.length === 0 ? undefined : rule;
-}
 RuleEditor.style = ruleEditorCss();
 
 export { RuleEditor as limebb_rule_editor };