@k2b/ui 0.28.0 → 0.30.0

package/dist/browser/chat/ChatDecision.js

@@ -0,0 +1,814 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<section class=k2b-chat-decision__card><p class=k2b-chat-decision__sentence tabindex=-1></p><p class="k2b-chat-line k2b-chat-decision__reason"><i aria-hidden=true></i><span class=k2b-chat-line__text></span></p><!$><!/><div class=k2b-chat-decision__answers><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div tabindex=-1><span class=k2b-chat-outcome__icon aria-hidden=true><i></i></span><div class=k2b-chat-outcome__cell></div><span class=k2b-sr-only role=status aria-live=polite>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-chat-outcome__text><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-chat-outcome__detail>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-chat-outcome__time>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-chat-outcome__actions>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-chat-preview__person><!$><!/><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<b>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-chat-preview__address>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-chat-preview__header><dl></dl><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div><dt></dt><dd><!$><!/><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<p>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<p class=k2b-chat-preview__title-line><span class=k2b-chat-preview__title></span><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-chat-preview__meta>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<p class=k2b-chat-preview__sentence>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<p class=k2b-chat-preview__excerpt>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-preview__more aria-expanded=false>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<a class=k2b-chat-preview__more>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<ul class=k2b-chat-preview__lines>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-chat-line__text><span class=k2b-chat-mark><!$><!/><!$><!/></span><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-sr-only><!$><!/> `),
+  _tmpl$22 = /*#__PURE__*/_$template(`<li>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<p class=k2b-chat-preview__people><span class=k2b-chat-preview__faces aria-hidden=true></span><span>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<del class=k2b-chat-mark data-change=removed><span class=k2b-sr-only><!$><!/> </span><!$><!/>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<mark class=k2b-chat-mark data-change=added><span class=k2b-sr-only><!$><!/> </span><!$><!/>`);
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack, useContext } from "solid-js";
+import { Button } from "../actions/Button";
+import { Avatar } from "../surfaces/Avatar";
+import { useChatMessages } from "./chat-messages";
+
+// ---------------------------------------------------------------------------
+// Decision
+// ---------------------------------------------------------------------------
+
+/** What an outcome inside a question needs from it: whether it was just answered here, and a link press inside it. */
+const DecisionScope = createContext();
+const reasonIcon = reason => reason.icon ?? "ti ti-info-circle";
+
+/**
+ * A question the person answers in the conversation: one sentence, why it is asked, the thing itself, and two answers.
+ * An answer collapses it at once to its outcome line, which takes the focus and is announced.
+ */
+export function ChatDecision(props) {
+  const id = createUniqueId();
+  const sentenceId = `k2b-chat-decision-${id}-sentence`;
+  const reasonId = `k2b-chat-decision-${id}-reason`;
+  let root;
+  let sentence;
+  // An answer given here moves the focus to the outcome; a click in the outcome that reopens the question moves it
+  // back to the sentence. A state change from elsewhere moves no focus.
+  const [answeredHere, setAnsweredHere] = createSignal(false);
+  const [arrive, setArrive] = createSignal(false);
+  let reopenedHere = false;
+  // A press counts only while its action runs: a reopen from elsewhere later must not take the focus.
+  const scope = {
+    answered: answeredHere,
+    pressed: () => {
+      reopenedHere = true;
+    },
+    released: () => {
+      reopenedHere = false;
+    }
+  };
+
+  // Read once: an object literal from the host builds its JSX again on every read.
+  const reason = createMemo(() => props.unavailable ?? props.reason);
+  const open = () => props.state === "open";
+  const answer = (choice, enabled) => {
+    if (!enabled || !open() || answeredHere()) return;
+    setAnsweredHere(true);
+    try {
+      const result = choice.onSelect();
+      if (result instanceof Promise) result.catch(error => props.onAnswerError?.(error));
+    } catch (error) {
+      props.onAnswerError?.(error);
+    }
+    // A host that keeps the question open (it could not take the answer) gets working buttons back.
+    queueMicrotask(() => {
+      if (open()) setAnsweredHere(false);
+    });
+  };
+  createEffect(on(() => props.state, (state, previous) => {
+    if (state !== "open" && previous === "open" && answeredHere()) {
+      root?.querySelector(".k2b-chat-outcome")?.focus({
+        preventScroll: true
+      });
+    }
+    if (state === "open" && previous !== undefined && previous !== "open") {
+      // A host that could not take an answer given here returns the question from `sending`; the outcome that held
+      // the focus is gone, so the focus goes back to the sentence instead of the page.
+      const active = document.activeElement;
+      const failedHere = answeredHere() && previous === "sending" && (!active || active === document.body);
+      setAnsweredHere(false);
+      if (reopenedHere || failedHere) {
+        sentence?.focus({
+          preventScroll: true
+        });
+        setArrive(true);
+      }
+      // Handled. Until then the marker holds through states in between, such as `sending` while a reopen loads.
+      reopenedHere = false;
+    }
+  }));
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$2);
+    var _ref$ = root;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$) : root = _el$;
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return open();
+      },
+      get fallback() {
+        return _$createComponent(DecisionScope.Provider, {
+          value: scope,
+          get children() {
+            return props.outcome;
+          }
+        });
+      },
+      get children() {
+        var _el$2 = _$getNextElement(_tmpl$),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling,
+          _el$12 = _el$4.nextSibling,
+          [_el$13, _co$4] = _$getNextMarker(_el$12.nextSibling),
+          _el$7 = _el$13.nextSibling,
+          _el$8 = _el$7.firstChild,
+          [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+          _el$0 = _el$9.nextSibling,
+          [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling),
+          _el$10 = _el$1.nextSibling,
+          [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling);
+        _$setAttribute(_el$2, "aria-labelledby", sentenceId);
+        _$setAttribute(_el$2, "aria-describedby", reasonId);
+        _el$3.addEventListener("animationend", () => setArrive(false));
+        var _ref$2 = sentence;
+        typeof _ref$2 === "function" ? _$use(_ref$2, _el$3) : sentence = _el$3;
+        _$setAttribute(_el$3, "id", sentenceId);
+        _$insert(_el$3, () => props.sentence);
+        _$setAttribute(_el$4, "id", reasonId);
+        _$insert(_el$6, () => reason().text);
+        _$insert(_el$2, () => props.preview, _el$13, _co$4);
+        _$insert(_el$7, _$createComponent(Button, {
+          "class": "k2b-chat-decision__answer",
+          wrap: true,
+          get variant() {
+            return props.confirm.variant ?? "ai";
+          },
+          get disabled() {
+            return Boolean(props.unavailable);
+          },
+          onClick: () => answer(props.confirm, !props.unavailable),
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return props.confirm.icon;
+              },
+              children: icon => (() => {
+                var _el$14 = _$getNextElement(_tmpl$3);
+                _$effect(() => _$className(_el$14, icon()));
+                return _el$14;
+              })()
+            }), _$memo(() => props.confirm.label)];
+          }
+        }), _el$9, _co$);
+        _$insert(_el$7, _$createComponent(Button, {
+          "class": "k2b-chat-decision__answer",
+          wrap: true,
+          variant: "subtle",
+          onClick: () => answer(props.decline, true),
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return props.decline.icon;
+              },
+              children: icon => (() => {
+                var _el$15 = _$getNextElement(_tmpl$3);
+                _$effect(() => _$className(_el$15, icon()));
+                return _el$15;
+              })()
+            }), _$memo(() => props.decline.label)];
+          }
+        }), _el$1, _co$2);
+        _$insert(_el$7, _$createComponent(Show, {
+          get when() {
+            return props.remember;
+          },
+          children: remember => _$createComponent(Button, {
+            "class": "k2b-chat-decision__remember",
+            wrap: true,
+            variant: "text",
+            get disabled() {
+              return Boolean(props.unavailable);
+            },
+            onClick: () => answer(remember(), !props.unavailable),
+            get children() {
+              return remember().label;
+            }
+          })
+        }), _el$11, _co$3);
+        _$effect(_p$ => {
+          var _v$ = arrive() ? "true" : undefined,
+            _v$2 = reason().tone ?? "neutral",
+            _v$3 = `k2b-chat-line__icon ${reasonIcon(reason())}`;
+          _v$ !== _p$.e && _$setAttribute(_el$3, "data-arrive", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$4, "data-tone", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$className(_el$5, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$2;
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$4 = `k2b-chat-decision ${props.class ?? ""}`,
+        _v$5 = props.state,
+        _v$6 = props.anchorId !== undefined ? String(props.anchorId) : undefined;
+      _v$4 !== _p$.e && _$className(_el$, _p$.e = _v$4);
+      _v$5 !== _p$.t && _$setAttribute(_el$, "data-state", _p$.t = _v$5);
+      _v$6 !== _p$.a && _$setAttribute(_el$, "data-chat-anchor", _p$.a = _v$6);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+}
+
+// ---------------------------------------------------------------------------
+// Outcome
+// ---------------------------------------------------------------------------
+
+const OUTCOME_ICONS = {
+  running: "ti ti-loader-2 k2b-spin",
+  done: "ti ti-check",
+  off: "ti ti-circle-off",
+  waiting: "ti ti-clock",
+  warning: "ti ti-alert-triangle",
+  error: "ti ti-alert-circle"
+};
+
+/** The visible words of a line, without what screen readers do not hear. */
+const spokenText = element => {
+  const copy = element.cloneNode(true);
+  // Buttons under the line are controls, not part of what happened.
+  for (const hidden of copy.querySelectorAll('[aria-hidden="true"], .k2b-chat-outcome__actions')) hidden.remove();
+  // The time and the link stand apart by margin only; spoken, they need a space.
+  for (const part of copy.querySelectorAll(".k2b-chat-outcome__time, .k2b-chat-outcome__link")) part.before(" ");
+  return (copy.textContent ?? "").replace(/\s+/g, " ").trim();
+};
+
+/**
+ * One line that says what happened: running, done, off, waiting, warning, or error. Changes are announced through a
+ * polite live region; the line itself can take the focus.
+ */
+export function ChatOutcome(props) {
+  const scope = useContext(DecisionScope);
+  // Only a line that replaces a question just answered here fades in; history renders final.
+  const entering = untrack(() => scope?.answered() ?? false);
+  const [live, setLive] = createSignal("");
+  let root;
+  let cell;
+  let pending = false;
+  let timer;
+  // Read once: an object literal from the host builds its JSX again on every read.
+  const lines = createMemo(() => props.lines);
+  const line = () => lines()[props.current];
+  const tone = () => line()?.tone ?? "off";
+  const keys = () => {
+    const all = Object.keys(lines());
+    return all.includes(props.current) ? all : [props.current, ...all];
+  };
+
+  // Empty the region first, so the same words spoken again are a change too.
+  const announce = () => {
+    setLive("");
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      const current = cell?.querySelector('[data-current="true"]');
+      setLive(current ? spokenText(current) : "");
+    }, 40);
+  };
+  onMount(() => {
+    if (untrack(() => scope?.answered())) announce();
+  });
+  createEffect(on(() => props.current, () => {
+    // A link pressed in a line that is now hidden would leave the focus on an invisible button, which the browser
+    // then drops to the page. The line itself keeps it instead.
+    const active = document.activeElement;
+    const hidden = active && cell?.contains(active) && !active.closest('[data-current="true"]');
+    if (hidden || pending && active === document.body) root?.focus({
+      preventScroll: true
+    });
+    announce();
+  }, {
+    defer: true
+  }));
+  onCleanup(() => {
+    if (timer) clearTimeout(timer);
+  });
+  return (() => {
+    var _el$16 = _$getNextElement(_tmpl$4),
+      _el$17 = _el$16.firstChild,
+      _el$18 = _el$17.firstChild,
+      _el$19 = _el$17.nextSibling,
+      _el$20 = _el$19.nextSibling;
+    var _ref$3 = root;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$16) : root = _el$16;
+    _$setAttribute(_el$16, "data-enter", entering ? "true" : undefined);
+    var _ref$4 = cell;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$19) : cell = _el$19;
+    _$insert(_el$19, _$createComponent(For, {
+      get each() {
+        return keys();
+      },
+      children: key => {
+        const entry = () => lines()[key];
+        const current = () => key === props.current;
+        return _$createComponent(Show, {
+          get when() {
+            return entry();
+          },
+          children: item => (() => {
+            var _el$21 = _$getNextElement(_tmpl$5),
+              _el$22 = _el$21.firstChild,
+              [_el$23, _co$5] = _$getNextMarker(_el$22.nextSibling),
+              _el$24 = _el$23.nextSibling,
+              [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling),
+              _el$26 = _el$25.nextSibling,
+              [_el$27, _co$7] = _$getNextMarker(_el$26.nextSibling),
+              _el$28 = _el$27.nextSibling,
+              [_el$29, _co$8] = _$getNextMarker(_el$28.nextSibling),
+              _el$30 = _el$29.nextSibling,
+              [_el$31, _co$9] = _$getNextMarker(_el$30.nextSibling);
+            _$insert(_el$21, () => item().text, _el$23, _co$5);
+            _$insert(_el$21, _$createComponent(Show, {
+              get when() {
+                return item().detail;
+              },
+              children: detail => [" ", (() => {
+                var _el$32 = _$getNextElement(_tmpl$6);
+                _$insert(_el$32, detail);
+                return _el$32;
+              })()]
+            }), _el$25, _co$6);
+            _$insert(_el$21, _$createComponent(Show, {
+              get when() {
+                return item().time;
+              },
+              children: time => (() => {
+                var _el$33 = _$getNextElement(_tmpl$7);
+                _$insert(_el$33, time);
+                return _el$33;
+              })()
+            }), _el$27, _co$7);
+            _$insert(_el$21, _$createComponent(Show, {
+              get when() {
+                return item().action;
+              },
+              children: action => _$createComponent(Button, {
+                "class": "k2b-chat-outcome__link",
+                wrap: true,
+                variant: "text",
+                get tabIndex() {
+                  return current() ? undefined : -1;
+                },
+                onClick: () => {
+                  // A second press while the first is still running would repeat its work.
+                  if (pending) return;
+                  scope?.pressed();
+                  try {
+                    const result = action().onSelect();
+                    if (result instanceof Promise) {
+                      pending = true;
+                      result.catch(error => props.onActionError?.(error)).finally(() => {
+                        pending = false;
+                        scope?.released();
+                      });
+                      return;
+                    }
+                  } catch (error) {
+                    props.onActionError?.(error);
+                  }
+                  scope?.released();
+                },
+                get children() {
+                  return action().label;
+                }
+              })
+            }), _el$29, _co$8);
+            _$insert(_el$21, _$createComponent(Show, {
+              get when() {
+                return item().actions;
+              },
+              children: actions => (() => {
+                var _el$34 = _$getNextElement(_tmpl$8);
+                _$insert(_el$34, actions);
+                return _el$34;
+              })()
+            }), _el$31, _co$9);
+            _$effect(_p$ => {
+              var _v$10 = current() ? "true" : undefined,
+                _v$11 = current() ? undefined : "true";
+              _v$10 !== _p$.e && _$setAttribute(_el$21, "data-current", _p$.e = _v$10);
+              _v$11 !== _p$.t && _$setAttribute(_el$21, "aria-hidden", _p$.t = _v$11);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$21;
+          })()
+        });
+      }
+    }));
+    _$insert(_el$20, live);
+    _$effect(_p$ => {
+      var _v$7 = `k2b-chat-outcome ${props.class ?? ""}`,
+        _v$8 = tone(),
+        _v$9 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+        _v$0 = line()?.icon ?? OUTCOME_ICONS[tone()],
+        _v$1 = tone() === "running" ? "true" : undefined;
+      _v$7 !== _p$.e && _$className(_el$16, _p$.e = _v$7);
+      _v$8 !== _p$.t && _$setAttribute(_el$16, "data-tone", _p$.t = _v$8);
+      _v$9 !== _p$.a && _$setAttribute(_el$16, "data-chat-anchor", _p$.a = _v$9);
+      _v$0 !== _p$.o && _$className(_el$18, _p$.o = _v$0);
+      _v$1 !== _p$.i && _$setAttribute(_el$19, "aria-busy", _p$.i = _v$1);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$16;
+  })();
+}
+
+// ---------------------------------------------------------------------------
+// Preview
+// ---------------------------------------------------------------------------
+
+/** The thing a question is about, as calm text on the sentence's edge: no surface, no column. */
+function ChatPreviewRoot(props) {
+  return (() => {
+    var _el$35 = _$getNextElement(_tmpl$2);
+    _$insert(_el$35, () => props.children);
+    _$effect(() => _$className(_el$35, `k2b-chat-preview ${props.class ?? ""}`));
+    return _el$35;
+  })();
+}
+const PreviewPeople = props => _$createComponent(For, {
+  get each() {
+    return props.people;
+  },
+  children: (person, index) => [_$memo(() => index() > 0 ? ", " : ""), (() => {
+    var _el$36 = _$getNextElement(_tmpl$9),
+      _el$37 = _el$36.firstChild,
+      [_el$38, _co$0] = _$getNextMarker(_el$37.nextSibling),
+      _el$39 = _el$38.nextSibling,
+      [_el$40, _co$1] = _$getNextMarker(_el$39.nextSibling);
+    _$insert(_el$36, _$createComponent(Show, {
+      get when() {
+        return person.name;
+      },
+      children: name => (() => {
+        var _el$41 = _$getNextElement(_tmpl$0);
+        _$insert(_el$41, name);
+        return _el$41;
+      })()
+    }), _el$38, _co$0);
+    _$insert(_el$36, _$createComponent(Show, {
+      get when() {
+        return person.address;
+      },
+      children: address => (() => {
+        var _el$42 = _$getNextElement(_tmpl$1);
+        _$insert(_el$42, address);
+        _$effect(() => _$setAttribute(_el$42, "data-alone", person.name ? undefined : "true"));
+        return _el$42;
+      })()
+    }), _el$40, _co$1);
+    return _el$36;
+  })()]
+});
+function ChatPreviewHeader(props) {
+  return (() => {
+    var _el$43 = _$getNextElement(_tmpl$10),
+      _el$44 = _el$43.firstChild,
+      _el$45 = _el$44.nextSibling,
+      [_el$46, _co$10] = _$getNextMarker(_el$45.nextSibling);
+    _$insert(_el$44, _$createComponent(For, {
+      get each() {
+        return props.rows;
+      },
+      children: row => (() => {
+        var _el$47 = _$getNextElement(_tmpl$11),
+          _el$48 = _el$47.firstChild,
+          _el$49 = _el$48.nextSibling,
+          _el$50 = _el$49.firstChild,
+          [_el$51, _co$11] = _$getNextMarker(_el$50.nextSibling),
+          _el$52 = _el$51.nextSibling,
+          [_el$53, _co$12] = _$getNextMarker(_el$52.nextSibling);
+        _$insert(_el$48, () => row.label);
+        _$insert(_el$49, _$createComponent(Show, {
+          get when() {
+            return row.people;
+          },
+          children: people => _$createComponent(PreviewPeople, {
+            get people() {
+              return people();
+            }
+          })
+        }), _el$51, _co$11);
+        _$insert(_el$49, () => row.value, _el$53, _co$12);
+        _$effect(() => _$setAttribute(_el$47, "data-emphasis", row.emphasis ? "true" : undefined));
+        return _el$47;
+      })()
+    }));
+    _$insert(_el$43, _$createComponent(Show, {
+      get when() {
+        return props.note;
+      },
+      children: note => (() => {
+        var _el$54 = _$getNextElement(_tmpl$12);
+        _$insert(_el$54, note);
+        return _el$54;
+      })()
+    }), _el$46, _co$10);
+    return _el$43;
+  })();
+}
+/** The thing's name in the text's own face, with optional quiet facts after it. */
+function ChatPreviewTitle(props) {
+  return (() => {
+    var _el$55 = _$getNextElement(_tmpl$13),
+      _el$56 = _el$55.firstChild,
+      _el$57 = _el$56.nextSibling,
+      [_el$58, _co$13] = _$getNextMarker(_el$57.nextSibling);
+    _$insert(_el$56, () => props.children);
+    _$insert(_el$55, _$createComponent(Show, {
+      get when() {
+        return props.meta;
+      },
+      children: meta => [" ", (() => {
+        var _el$59 = _$getNextElement(_tmpl$14);
+        _$insert(_el$59, meta);
+        return _el$59;
+      })()]
+    }), _el$58, _co$13);
+    return _el$55;
+  })();
+}
+
+/** A rule or instruction as one sentence, such as what a routine does; chips and marks may stand inside. */
+function ChatPreviewSentence(props) {
+  return (() => {
+    var _el$60 = _$getNextElement(_tmpl$15);
+    _$insert(_el$60, () => props.children);
+    return _el$60;
+  })();
+}
+/** The first lines of a longer text. It keeps its line breaks, shows about three lines, and fades out. */
+function ChatPreviewExcerpt(props) {
+  return (() => {
+    var _el$61 = _$getNextElement(_tmpl$16);
+    _$insert(_el$61, () => props.children);
+    _$effect(_p$ => {
+      var _v$12 = props.id,
+        _v$13 = props.expanded ? "true" : undefined,
+        _v$14 = props.expanded ? -1 : undefined;
+      _v$12 !== _p$.e && _$setAttribute(_el$61, "id", _p$.e = _v$12);
+      _v$13 !== _p$.t && _$setAttribute(_el$61, "data-expanded", _p$.t = _v$13);
+      _v$14 !== _p$.a && _$setAttribute(_el$61, "tabindex", _p$.a = _v$14);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$61;
+  })();
+}
+/**
+ * Shows the rest of an excerpt in place, for a text with no page of its own to open. It looks like `ReadMore`; the
+ * caller removes it once the text is shown, and the focus moves to the text, so reading goes on where it was.
+ */
+function ChatPreviewShowAll(props) {
+  const show = () => {
+    props.onShow();
+    queueMicrotask(() => document.getElementById(props.controls)?.focus({
+      preventScroll: true
+    }));
+  };
+  return (() => {
+    var _el$62 = _$getNextElement(_tmpl$17);
+    _el$62.$$click = show;
+    _$insert(_el$62, () => props.children);
+    _$effect(() => _$setAttribute(_el$62, "aria-controls", props.controls));
+    _$runHydrationEvents();
+    return _el$62;
+  })();
+}
+/** Opens the whole thing at exactly the version the question shows. */
+function ChatPreviewReadMore(props) {
+  return (() => {
+    var _el$63 = _$getNextElement(_tmpl$18);
+    _$insert(_el$63, () => props.children);
+    _$effect(_p$ => {
+      var _v$15 = props.href,
+        _v$16 = props.title;
+      _v$15 !== _p$.e && _$setAttribute(_el$63, "href", _p$.e = _v$15);
+      _v$16 !== _p$.t && _$setAttribute(_el$63, "title", _p$.t = _v$16);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$63;
+  })();
+}
+const InList = createContext(false);
+
+/** A list of lines with a name, such as "What the routine may do". */
+function ChatPreviewLines(props) {
+  return (() => {
+    var _el$64 = _$getNextElement(_tmpl$19);
+    _$insert(_el$64, _$createComponent(InList.Provider, {
+      value: true,
+      get children() {
+        return props.children;
+      }
+    }));
+    _$effect(() => _$setAttribute(_el$64, "aria-label", props.label));
+    return _el$64;
+  })();
+}
+/** One line led by an icon: a consequence, a right, an attachment, or a warning. */
+function ChatPreviewLine(props) {
+  const inList = useContext(InList);
+  const messages = useChatMessages();
+  const content = () => [(() => {
+    var _el$65 = _$getNextElement(_tmpl$3);
+    _$effect(_p$ => {
+      var _v$17 = `k2b-chat-line__icon ${props.icon}`,
+        _v$18 = props.accent ? {
+          color: props.accent
+        } : undefined;
+      _v$17 !== _p$.e && _$className(_el$65, _p$.e = _v$17);
+      _p$.t = _$style(_el$65, _v$18, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$65;
+  })(), (() => {
+    var _el$66 = _$getNextElement(_tmpl$20),
+      _el$67 = _el$66.firstChild,
+      _el$68 = _el$67.firstChild,
+      [_el$69, _co$14] = _$getNextMarker(_el$68.nextSibling),
+      _el$70 = _el$69.nextSibling,
+      [_el$71, _co$15] = _$getNextMarker(_el$70.nextSibling),
+      _el$72 = _el$67.nextSibling,
+      [_el$73, _co$16] = _$getNextMarker(_el$72.nextSibling);
+    _$insert(_el$67, _$createComponent(Show, {
+      get when() {
+        return props.mark;
+      },
+      children: mark => (() => {
+        var _el$74 = _$getNextElement(_tmpl$21),
+          _el$76 = _el$74.firstChild,
+          [_el$77, _co$17] = _$getNextMarker(_el$76.nextSibling),
+          _el$75 = _el$77.nextSibling;
+        _$insert(_el$74, (() => {
+          var _c$ = _$memo(() => mark() === "added");
+          return () => _c$() ? messages().markAdded : messages().markRemoved;
+        })(), _el$77, _co$17);
+        return _el$74;
+      })()
+    }), _el$69, _co$14);
+    _$insert(_el$67, () => props.children, _el$71, _co$15);
+    _$insert(_el$66, _$createComponent(Show, {
+      get when() {
+        return props.meta;
+      },
+      children: meta => [" ", (() => {
+        var _el$78 = _$getNextElement(_tmpl$14);
+        _$insert(_el$78, meta);
+        return _el$78;
+      })()]
+    }), _el$73, _co$16);
+    _$effect(() => _$setAttribute(_el$67, "data-change", props.mark));
+    return _el$66;
+  })()];
+  const attributes = () => ({
+    class: "k2b-chat-line k2b-chat-preview__line",
+    "data-tone": props.tone && props.tone !== "default" ? props.tone : undefined
+  });
+  return inList ? (() => {
+    var _el$79 = _$getNextElement(_tmpl$22);
+    _$spread(_el$79, _$mergeProps(attributes), false, true);
+    _$insert(_el$79, content);
+    _$runHydrationEvents();
+    return _el$79;
+  })() : (() => {
+    var _el$80 = _$getNextElement(_tmpl$12);
+    _$spread(_el$80, _$mergeProps(attributes), false, true);
+    _$insert(_el$80, content);
+    _$runHydrationEvents();
+    return _el$80;
+  })();
+}
+function ChatPreviewPeople(props) {
+  return (() => {
+    var _el$81 = _$getNextElement(_tmpl$23),
+      _el$82 = _el$81.firstChild,
+      _el$83 = _el$82.nextSibling;
+    _$insert(_el$82, _$createComponent(For, {
+      get each() {
+        return props.people;
+      },
+      children: person => _$createComponent(Avatar, {
+        get name() {
+          return person.name;
+        },
+        get src() {
+          return person.src;
+        },
+        size: "xs"
+      })
+    }));
+    _$insert(_el$83, () => props.children);
+    return _el$81;
+  })();
+}
+export const ChatPreview = Object.assign(ChatPreviewRoot, {
+  Header: ChatPreviewHeader,
+  Title: ChatPreviewTitle,
+  Sentence: ChatPreviewSentence,
+  Excerpt: ChatPreviewExcerpt,
+  ReadMore: ChatPreviewReadMore,
+  ShowAll: ChatPreviewShowAll,
+  Lines: ChatPreviewLines,
+  Line: ChatPreviewLine,
+  People: ChatPreviewPeople
+});
+
+// ---------------------------------------------------------------------------
+// Mark
+// ---------------------------------------------------------------------------
+
+/** Marks new or removed words; screen readers hear "new:" or "removed:" first. */
+export function ChatMark(props) {
+  const messages = useChatMessages();
+  return _$createComponent(Show, {
+    get when() {
+      return props.change === "removed";
+    },
+    get fallback() {
+      return (() => {
+        var _el$91 = _$getNextElement(_tmpl$25),
+          _el$92 = _el$91.firstChild,
+          _el$94 = _el$92.firstChild,
+          [_el$95, _co$20] = _$getNextMarker(_el$94.nextSibling),
+          _el$93 = _el$95.nextSibling,
+          _el$96 = _el$92.nextSibling,
+          [_el$97, _co$21] = _$getNextMarker(_el$96.nextSibling);
+        _$insert(_el$92, () => messages().markAdded, _el$95, _co$20);
+        _$insert(_el$91, () => props.children, _el$97, _co$21);
+        return _el$91;
+      })();
+    },
+    get children() {
+      var _el$84 = _$getNextElement(_tmpl$24),
+        _el$85 = _el$84.firstChild,
+        _el$87 = _el$85.firstChild,
+        [_el$88, _co$18] = _$getNextMarker(_el$87.nextSibling),
+        _el$86 = _el$88.nextSibling,
+        _el$89 = _el$85.nextSibling,
+        [_el$90, _co$19] = _$getNextMarker(_el$89.nextSibling);
+      _$insert(_el$85, () => messages().markRemoved, _el$88, _co$18);
+      _$insert(_el$84, () => props.children, _el$90, _co$19);
+      return _el$84;
+    }
+  });
+}
+_$delegateEvents(["click"]);
+//# sourceMappingURL=ChatDecision.js.map