@k2b/ui 0.27.0 → 0.29.0

package/dist/browser/content/ReactionBar.js

@@ -0,0 +1,419 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-reaction-bar__chip role=img data-gesture-ignore><span aria-hidden=true></span><span aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button class=k2b-reaction-bar__chip><span aria-hidden=true></span><span aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-reaction-bar__more><span aria-hidden=true>+<!$><!/></span><span class=k2b-sr-only>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div role=group><!$><!/><!$><!/><!$><!/><span class="k2b-tooltip k2b-reaction-bar__hint"popover=manual role=tooltip aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-reaction-bar__list>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<i class="ti ti-mood-plus"aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span>`);
+import { createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from "solid-js";
+import { IconButton } from "../actions/Button";
+import { useChatMessages } from "../chat/chat-messages";
+import { positionTooltipSurface } from "../feedback/tooltip-position";
+import { ScrollArea } from "../layout/ScrollArea";
+const HOVER_MS = 250;
+const HOLD_MS = 500;
+const MOVE_TOLERANCE = 8;
+export function ReactionBar(props) {
+  const chatMessages = useChatMessages();
+  // A max uses the wrapping layout, so the shown chips, +n, and add button wrap together.
+  const overflow = () => props.max !== undefined ? "wrap" : props.overflow ?? "scroll";
+  const shown = createMemo(() => props.max === undefined ? props.reactions : props.reactions.slice(0, props.max));
+  const keys = createMemo(() => shown().map(reaction => reaction.key));
+  const byKey = createMemo(() => new Map(shown().map(reaction => [reaction.key, reaction])));
+  const more = () => props.reactions.length - shown().length;
+  /** The reaction whose names the hint shows; it follows that reaction while the caller updates it. */
+  const [hintKey, setHintKey] = createSignal();
+  const hinted = () => {
+    const key = hintKey();
+    const reaction = key === undefined ? undefined : byKey().get(key);
+    return reaction?.label?.trim() ? reaction : undefined;
+  };
+  const hint = () => {
+    const reaction = hinted();
+    return reaction ? `${reaction.emoji} ${reaction.label}` : "";
+  };
+  const [touch, setTouch] = createSignal(false);
+  let root;
+  let surface;
+  onMount(() => {
+    if (!root || !surface) return;
+    const bar = root;
+    const tooltip = surface;
+    let timer;
+    let openChip;
+    let swallowClick = false;
+    let press;
+    const chipOf = target => {
+      const chip = target instanceof Element ? target.closest("[data-reaction-key]") : null;
+      return chip && chip.closest(".k2b-reaction-bar") === bar ? chip : undefined;
+    };
+    const clearTimer = () => {
+      clearTimeout(timer);
+      timer = undefined;
+    };
+    const close = () => {
+      clearTimer();
+      openChip = undefined;
+      try {
+        tooltip.hidePopover();
+      } catch {
+        /* The surface may already be disconnected. */
+      }
+      document.removeEventListener("pointerdown", dismiss, true);
+      document.removeEventListener("keydown", escape);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+    const dismiss = () => close();
+    const escape = event => {
+      if (event.key === "Escape") close();
+    };
+    /** Opens the names hint over a chip; false when the chip has no names to show. */
+    const open = (chip, fromTouch) => {
+      clearTimer();
+      const reaction = byKey().get(chip.dataset.reactionKey ?? "");
+      if (!reaction?.label?.trim() || !chip.isConnected) return false;
+      setHintKey(reaction.key);
+      setTouch(fromTouch);
+      if (!tooltip.matches(":popover-open")) {
+        try {
+          tooltip.showPopover();
+        } catch {
+          return false;
+        }
+      }
+      openChip = chip;
+      positionTooltipSurface(tooltip, chip, "top");
+      document.addEventListener("pointerdown", dismiss, true);
+      document.addEventListener("keydown", escape);
+      window.addEventListener("scroll", close, true);
+      window.addEventListener("resize", close);
+      return true;
+    };
+    // An open hint follows its reaction: new names show at once, and it closes when the reaction, its names, or its
+    // chip go away.
+    createEffect(on(hinted, reaction => {
+      if (!openChip) return;
+      if (!reaction || !openChip.isConnected) close();else positionTooltipSurface(tooltip, openChip, "top");
+    }));
+    const delayed = chip => {
+      if (touch() && openChip) return;
+      if (!byKey().get(chip.dataset.reactionKey ?? "")?.label?.trim()) {
+        close();
+        return;
+      }
+      clearTimer();
+      if (openChip) open(chip, false);else timer = setTimeout(() => open(chip, false), HOVER_MS);
+    };
+    const enter = event => {
+      const chip = chipOf(event.target);
+      if (chip && event.target === chip && event.pointerType !== "touch") delayed(chip);
+    };
+    const leave = event => {
+      if (event.target !== chipOf(event.target) || touch() && openChip) return;
+      // Moving directly to another chip keeps an open hint available for its immediate update.
+      const next = chipOf(event.relatedTarget);
+      if (!next || !byKey().get(next.dataset.reactionKey ?? "")?.label?.trim()) close();
+    };
+    const focusIn = event => {
+      const chip = chipOf(event.target);
+      if (chip?.matches(":focus-visible")) delayed(chip);
+    };
+    const focusOut = event => {
+      if (chipOf(event.target) && !chipOf(event.relatedTarget) && !(touch() && openChip)) close();
+    };
+    const resetSwallow = () => {
+      swallowClick = false;
+      document.removeEventListener("pointerdown", resetSwallow, true);
+    };
+    const endPress = () => {
+      clearTimer();
+      press = undefined;
+      document.removeEventListener("pointermove", move, true);
+      document.removeEventListener("pointerup", up, true);
+      document.removeEventListener("pointercancel", cancel, true);
+    };
+    const down = event => {
+      resetSwallow();
+      close();
+      endPress();
+      const chip = chipOf(event.target);
+      if (!chip || event.pointerType !== "touch" && event.pointerType !== "pen") return;
+      press = {
+        chip,
+        id: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        held: false,
+        moved: false
+      };
+      timer = setTimeout(() => {
+        timer = undefined;
+        if (!press || press.moved) return;
+        // Only a hold that shows names takes the press; on a chip without names it stays an ordinary press.
+        press.held = open(press.chip, true);
+      }, HOLD_MS);
+      document.addEventListener("pointermove", move, true);
+      document.addEventListener("pointerup", up, true);
+      document.addEventListener("pointercancel", cancel, true);
+    };
+    const move = event => {
+      if (!press || event.pointerId !== press.id) return;
+      if (Math.hypot(event.clientX - press.x, event.clientY - press.y) > MOVE_TOLERANCE) {
+        press.moved = true;
+        clearTimer();
+      }
+    };
+    const up = event => {
+      if (!press || event.pointerId !== press.id) return;
+      if (press.held) {
+        swallowClick = true;
+        // Some browsers send no click after a hold. Never consume the next real tap.
+        document.addEventListener("pointerdown", resetSwallow, true);
+      } else if (!press.moved && !props.onToggle) open(press.chip, true);
+      endPress();
+    };
+    const cancel = event => {
+      if (event.pointerId === press?.id) endPress();
+    };
+    const touchEnd = event => {
+      if (!swallowClick || !event.cancelable) return;
+      // A cancelled touchend sends no click, so nothing is left to swallow.
+      event.preventDefault();
+      resetSwallow();
+    };
+    // Only the click of the held finger or pen is swallowed; a keyboard's click has no detail and always goes through.
+    const click = event => {
+      if (!swallowClick || event.detail === 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      resetSwallow();
+    };
+    const contextMenu = event => {
+      if (chipOf(event.target) && (press || swallowClick || touch() && openChip)) event.preventDefault();
+    };
+    bar.addEventListener("pointerenter", enter, true);
+    bar.addEventListener("pointerleave", leave, true);
+    bar.addEventListener("focusin", focusIn);
+    bar.addEventListener("focusout", focusOut);
+    bar.addEventListener("pointerdown", down);
+    bar.addEventListener("touchend", touchEnd, {
+      passive: false
+    });
+    bar.addEventListener("click", click, true);
+    bar.addEventListener("contextmenu", contextMenu);
+    onCleanup(() => {
+      close();
+      endPress();
+      resetSwallow();
+      bar.removeEventListener("pointerenter", enter, true);
+      bar.removeEventListener("pointerleave", leave, true);
+      bar.removeEventListener("focusin", focusIn);
+      bar.removeEventListener("focusout", focusOut);
+      bar.removeEventListener("pointerdown", down);
+      bar.removeEventListener("touchend", touchEnd);
+      bar.removeEventListener("click", click, true);
+      bar.removeEventListener("contextmenu", contextMenu);
+    });
+  });
+  const chip = (key, reaction) => {
+    const label = own => chatMessages().messageReaction({
+      emoji: reaction().emoji,
+      count: reaction().count,
+      names: reaction().label,
+      own
+    });
+    return _$createComponent(Show, {
+      get when() {
+        return props.onToggle;
+      },
+      get fallback() {
+        return (() => {
+          var _el$ = _$getNextElement(_tmpl$),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.nextSibling;
+          _$setAttribute(_el$, "data-reaction-key", key);
+          _$insert(_el$2, () => reaction().emoji);
+          _$insert(_el$3, () => reaction().count);
+          _$effect(_p$ => {
+            var _v$ = label(Boolean(reaction().own)),
+              _v$2 = reaction().busy ? "true" : undefined,
+              _v$3 = reaction().own ? "" : undefined;
+            _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setAttribute(_el$, "aria-busy", _p$.t = _v$2);
+            _v$3 !== _p$.a && _$setAttribute(_el$, "data-own", _p$.a = _v$3);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          return _el$;
+        })();
+      },
+      children: toggle => (() => {
+        var _el$4 = _$getNextElement(_tmpl$2),
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling;
+        _el$4.$$click = () => toggle()(key);
+        _$setAttribute(_el$4, "data-reaction-key", key);
+        _$insert(_el$5, () => reaction().emoji);
+        _$insert(_el$6, () => reaction().count);
+        _$effect(_p$ => {
+          var _v$4 = reaction().own ? "true" : "false",
+            _v$5 = label(false),
+            _v$6 = reaction().busy ? "true" : undefined,
+            _v$7 = reaction().own ? "" : undefined;
+          _v$4 !== _p$.e && _$setAttribute(_el$4, "aria-pressed", _p$.e = _v$4);
+          _v$5 !== _p$.t && _$setAttribute(_el$4, "aria-label", _p$.t = _v$5);
+          _v$6 !== _p$.a && _$setAttribute(_el$4, "aria-busy", _p$.a = _v$6);
+          _v$7 !== _p$.o && _$setAttribute(_el$4, "data-own", _p$.o = _v$7);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        _$runHydrationEvents();
+        return _el$4;
+      })()
+    });
+  };
+  const chips = () => _$createComponent(For, {
+    get each() {
+      return keys();
+    },
+    children: key => _$createComponent(Show, {
+      get when() {
+        return byKey().get(key);
+      },
+      children: reaction => chip(key, reaction)
+    })
+  });
+  return (() => {
+    var _el$7 = _$getNextElement(_tmpl$4),
+      _el$13 = _el$7.firstChild,
+      [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling),
+      _el$15 = _el$14.nextSibling,
+      [_el$16, _co$3] = _$getNextMarker(_el$15.nextSibling),
+      _el$17 = _el$16.nextSibling,
+      [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling),
+      _el$12 = _el$18.nextSibling;
+    var _ref$ = root;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$7) : root = _el$7;
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return overflow() === "scroll";
+      },
+      get fallback() {
+        return (() => {
+          var _el$19 = _$getNextElement(_tmpl$5);
+          _$insert(_el$19, chips);
+          return _el$19;
+        })();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return shown().length > 0;
+          },
+          get children() {
+            return _$createComponent(ScrollArea, {
+              orientation: "horizontal",
+              "class": "k2b-reaction-bar__scroll",
+              get tabindex() {
+                return props.onToggle ? undefined : 0;
+              },
+              get children() {
+                return chips();
+              }
+            });
+          }
+        });
+      }
+    }), _el$14, _co$2);
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return more() > 0;
+      },
+      get children() {
+        var _el$8 = _$getNextElement(_tmpl$3),
+          _el$9 = _el$8.firstChild,
+          _el$0 = _el$9.firstChild,
+          _el$1 = _el$0.nextSibling,
+          [_el$10, _co$] = _$getNextMarker(_el$1.nextSibling),
+          _el$11 = _el$9.nextSibling;
+        _$insert(_el$9, more, _el$10, _co$);
+        _$insert(_el$11, () => props.moreLabel?.(more()) ?? chatMessages().moreReactions({
+          count: more()
+        }));
+        return _el$8;
+      }
+    }), _el$16, _co$3);
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return props.onAdd;
+      },
+      children: add => (() => {
+        var _el$20 = _$getNextElement(_tmpl$7);
+        _$insert(_el$20, _$createComponent(IconButton, {
+          get label() {
+            return chatMessages().messageAddReaction;
+          },
+          size: "xs",
+          "class": "k2b-reaction-bar__add-button",
+          onClick: event => add()(event.currentTarget),
+          get children() {
+            return _$getNextElement(_tmpl$6);
+          }
+        }));
+        _$effect(() => _$className(_el$20, `k2b-reaction-bar__add${props.add === "progressive" ? " k2b-progressive-action" : ""}`));
+        return _el$20;
+      })()
+    }), _el$18, _co$4);
+    var _ref$2 = surface;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$12) : surface = _el$12;
+    _$insert(_el$12, hint);
+    _$effect(_p$ => {
+      var _v$8 = props.class ? `k2b-reaction-bar ${props.class}` : "k2b-reaction-bar",
+        _v$9 = chatMessages().messageReactions,
+        _v$0 = props.density ?? "default",
+        _v$1 = overflow(),
+        _v$10 = props.onAdd ? props.add ?? "always" : undefined,
+        _v$11 = props.reactions.length === 0 ? "" : undefined,
+        _v$12 = touch() ? "" : undefined;
+      _v$8 !== _p$.e && _$className(_el$7, _p$.e = _v$8);
+      _v$9 !== _p$.t && _$setAttribute(_el$7, "aria-label", _p$.t = _v$9);
+      _v$0 !== _p$.a && _$setAttribute(_el$7, "data-density", _p$.a = _v$0);
+      _v$1 !== _p$.o && _$setAttribute(_el$7, "data-overflow", _p$.o = _v$1);
+      _v$10 !== _p$.i && _$setAttribute(_el$7, "data-add", _p$.i = _v$10);
+      _v$11 !== _p$.n && _$setAttribute(_el$7, "data-empty", _p$.n = _v$11);
+      _v$12 !== _p$.s && _$setAttribute(_el$12, "data-touch", _p$.s = _v$12);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
+    });
+    return _el$7;
+  })();
+}
+_$delegateEvents(["click"]);
+//# sourceMappingURL=ReactionBar.js.map

package/dist/browser/content/ReactionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["content/ReactionBar.tsx"],"sourcesContent":["import { type Accessor, createEffect, createMemo, createSignal, For, type JSX, on, onCleanup, onMount, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { useChatMessages } from \"../chat/chat-messages\";\nimport { positionTooltipSurface } from \"../feedback/tooltip-position\";\nimport { ScrollArea } from \"../layout/ScrollArea\";\n\nexport type ReactionBarItem = {\n  /** Stable identity of the reaction, passed to `onToggle`. */\n  key: string;\n  emoji: string;\n  count: number;\n  /** The reader reacted this way; the chip shows pressed. */\n  own?: boolean;\n  /** Who reacted, for example from `reactionPeople`. Read by screen readers and shown in the names hint. */\n  label?: string;\n  /** A change of the reader's own reaction is still being saved; the chip carries `aria-busy`. */\n  busy?: boolean;\n};\nexport type ReactionBarProps = {\n  reactions: readonly ReactionBarItem[];\n  /** Called with a reaction's key when the reader presses its chip. Without it, the chips are not controls. */\n  onToggle?: (key: string) => void;\n  /** Called by \"Add reaction\" with the button to anchor a picker to, such as `EmojiPicker.Popover`. Without it there is no button. */\n  onAdd?: (anchor: HTMLElement) => void;\n  /** \"default\": 26 px chips (chat, item detail). \"compact\": 24 px chips (cards). */\n  density?: \"default\" | \"compact\";\n  /** \"scroll\" (default): one line of fixed height that scrolls sideways. \"wrap\": every chip shows, lines wrap. */\n  overflow?: \"scroll\" | \"wrap\";\n  /** Shows at most this many chips and then \"+n\", n being the number of further emoji. The shown chips do not scroll. */\n  max?: number;\n  /** Screen-reader text of \"+n\"; defaults to \"{n} more reactions\". */\n  moreLabel?: (count: number) => string;\n  /** \"always\" (default) or \"progressive\": shown on hover and focus with a mouse or trackpad (k2b-progressive-action, inside the caller's k2b-progressive-row), kept while its picker is open, hidden on touch. Its place stays reserved. */\n  add?: \"always\" | \"progressive\";\n  class?: string;\n};\n\nconst HOVER_MS = 250;\nconst HOLD_MS = 500;\nconst MOVE_TOLERANCE = 8;\n\nexport function ReactionBar(props: ReactionBarProps): JSX.Element {\n  const chatMessages = useChatMessages();\n  // A max uses the wrapping layout, so the shown chips, +n, and add button wrap together.\n  const overflow = () => (props.max !== undefined ? \"wrap\" : (props.overflow ?? \"scroll\"));\n  const shown = createMemo(() => (props.max === undefined ? props.reactions : props.reactions.slice(0, props.max)));\n  const keys = createMemo(() => shown().map((reaction) => reaction.key));\n  const byKey = createMemo(() => new Map(shown().map((reaction) => [reaction.key, reaction])));\n  const more = () => props.reactions.length - shown().length;\n  /** The reaction whose names the hint shows; it follows that reaction while the caller updates it. */\n  const [hintKey, setHintKey] = createSignal<string>();\n  const hinted = () => {\n    const key = hintKey();\n    const reaction = key === undefined ? undefined : byKey().get(key);\n    return reaction?.label?.trim() ? reaction : undefined;\n  };\n  const hint = () => {\n    const reaction = hinted();\n    return reaction ? `${reaction.emoji} ${reaction.label}` : \"\";\n  };\n  const [touch, setTouch] = createSignal(false);\n  let root: HTMLDivElement | undefined;\n  let surface: HTMLSpanElement | undefined;\n\n  onMount(() => {\n    if (!root || !surface) return;\n    const bar = root;\n    const tooltip = surface;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let openChip: HTMLElement | undefined;\n    let swallowClick = false;\n    let press: { chip: HTMLElement; id: number; x: number; y: number; held: boolean; moved: boolean } | undefined;\n\n    const chipOf = (target: EventTarget | null): HTMLElement | undefined => {\n      const chip = target instanceof Element ? target.closest<HTMLElement>(\"[data-reaction-key]\") : null;\n      return chip && chip.closest(\".k2b-reaction-bar\") === bar ? chip : undefined;\n    };\n    const clearTimer = () => {\n      clearTimeout(timer);\n      timer = undefined;\n    };\n    const close = () => {\n      clearTimer();\n      openChip = undefined;\n      try {\n        tooltip.hidePopover();\n      } catch {\n        /* The surface may already be disconnected. */\n      }\n      document.removeEventListener(\"pointerdown\", dismiss, true);\n      document.removeEventListener(\"keydown\", escape);\n      window.removeEventListener(\"scroll\", close, true);\n      window.removeEventListener(\"resize\", close);\n    };\n    const dismiss = () => close();\n    const escape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") close();\n    };\n    /** Opens the names hint over a chip; false when the chip has no names to show. */\n    const open = (chip: HTMLElement, fromTouch: boolean): boolean => {\n      clearTimer();\n      const reaction = byKey().get(chip.dataset.reactionKey ?? \"\");\n      if (!reaction?.label?.trim() || !chip.isConnected) return false;\n      setHintKey(reaction.key);\n      setTouch(fromTouch);\n      if (!tooltip.matches(\":popover-open\")) {\n        try {\n          tooltip.showPopover();\n        } catch {\n          return false;\n        }\n      }\n      openChip = chip;\n      positionTooltipSurface(tooltip, chip, \"top\");\n      document.addEventListener(\"pointerdown\", dismiss, true);\n      document.addEventListener(\"keydown\", escape);\n      window.addEventListener(\"scroll\", close, true);\n      window.addEventListener(\"resize\", close);\n      return true;\n    };\n    // An open hint follows its reaction: new names show at once, and it closes when the reaction, its names, or its\n    // chip go away.\n    createEffect(\n      on(hinted, (reaction) => {\n        if (!openChip) return;\n        if (!reaction || !openChip.isConnected) close();\n        else positionTooltipSurface(tooltip, openChip, \"top\");\n      }),\n    );\n    const delayed = (chip: HTMLElement) => {\n      if (touch() && openChip) return;\n      if (\n        !byKey()\n          .get(chip.dataset.reactionKey ?? \"\")\n          ?.label?.trim()\n      ) {\n        close();\n        return;\n      }\n      clearTimer();\n      if (openChip) open(chip, false);\n      else timer = setTimeout(() => open(chip, false), HOVER_MS);\n    };\n    const enter = (event: PointerEvent) => {\n      const chip = chipOf(event.target);\n      if (chip && event.target === chip && event.pointerType !== \"touch\") delayed(chip);\n    };\n    const leave = (event: PointerEvent) => {\n      if (event.target !== chipOf(event.target) || (touch() && openChip)) return;\n      // Moving directly to another chip keeps an open hint available for its immediate update.\n      const next = chipOf(event.relatedTarget);\n      if (\n        !next ||\n        !byKey()\n          .get(next.dataset.reactionKey ?? \"\")\n          ?.label?.trim()\n      )\n        close();\n    };\n    const focusIn = (event: FocusEvent) => {\n      const chip = chipOf(event.target);\n      if (chip?.matches(\":focus-visible\")) delayed(chip);\n    };\n    const focusOut = (event: FocusEvent) => {\n      if (chipOf(event.target) && !chipOf(event.relatedTarget) && !(touch() && openChip)) close();\n    };\n    const resetSwallow = () => {\n      swallowClick = false;\n      document.removeEventListener(\"pointerdown\", resetSwallow, true);\n    };\n    const endPress = () => {\n      clearTimer();\n      press = undefined;\n      document.removeEventListener(\"pointermove\", move, true);\n      document.removeEventListener(\"pointerup\", up, true);\n      document.removeEventListener(\"pointercancel\", cancel, true);\n    };\n    const down = (event: PointerEvent) => {\n      resetSwallow();\n      close();\n      endPress();\n      const chip = chipOf(event.target);\n      if (!chip || (event.pointerType !== \"touch\" && event.pointerType !== \"pen\")) return;\n      press = { chip, id: event.pointerId, x: event.clientX, y: event.clientY, held: false, moved: false };\n      timer = setTimeout(() => {\n        timer = undefined;\n        if (!press || press.moved) return;\n        // Only a hold that shows names takes the press; on a chip without names it stays an ordinary press.\n        press.held = open(press.chip, true);\n      }, HOLD_MS);\n      document.addEventListener(\"pointermove\", move, true);\n      document.addEventListener(\"pointerup\", up, true);\n      document.addEventListener(\"pointercancel\", cancel, true);\n    };\n    const move = (event: PointerEvent) => {\n      if (!press || event.pointerId !== press.id) return;\n      if (Math.hypot(event.clientX - press.x, event.clientY - press.y) > MOVE_TOLERANCE) {\n        press.moved = true;\n        clearTimer();\n      }\n    };\n    const up = (event: PointerEvent) => {\n      if (!press || event.pointerId !== press.id) return;\n      if (press.held) {\n        swallowClick = true;\n        // Some browsers send no click after a hold. Never consume the next real tap.\n        document.addEventListener(\"pointerdown\", resetSwallow, true);\n      } else if (!press.moved && !props.onToggle) open(press.chip, true);\n      endPress();\n    };\n    const cancel = (event: PointerEvent) => {\n      if (event.pointerId === press?.id) endPress();\n    };\n    const touchEnd = (event: TouchEvent) => {\n      if (!swallowClick || !event.cancelable) return;\n      // A cancelled touchend sends no click, so nothing is left to swallow.\n      event.preventDefault();\n      resetSwallow();\n    };\n    // Only the click of the held finger or pen is swallowed; a keyboard's click has no detail and always goes through.\n    const click = (event: MouseEvent) => {\n      if (!swallowClick || event.detail === 0) return;\n      event.preventDefault();\n      event.stopPropagation();\n      resetSwallow();\n    };\n    const contextMenu = (event: MouseEvent) => {\n      if (chipOf(event.target) && (press || swallowClick || (touch() && openChip))) event.preventDefault();\n    };\n\n    bar.addEventListener(\"pointerenter\", enter, true);\n    bar.addEventListener(\"pointerleave\", leave, true);\n    bar.addEventListener(\"focusin\", focusIn);\n    bar.addEventListener(\"focusout\", focusOut);\n    bar.addEventListener(\"pointerdown\", down);\n    bar.addEventListener(\"touchend\", touchEnd, { passive: false });\n    bar.addEventListener(\"click\", click, true);\n    bar.addEventListener(\"contextmenu\", contextMenu);\n    onCleanup(() => {\n      close();\n      endPress();\n      resetSwallow();\n      bar.removeEventListener(\"pointerenter\", enter, true);\n      bar.removeEventListener(\"pointerleave\", leave, true);\n      bar.removeEventListener(\"focusin\", focusIn);\n      bar.removeEventListener(\"focusout\", focusOut);\n      bar.removeEventListener(\"pointerdown\", down);\n      bar.removeEventListener(\"touchend\", touchEnd);\n      bar.removeEventListener(\"click\", click, true);\n      bar.removeEventListener(\"contextmenu\", contextMenu);\n    });\n  });\n\n  const chip = (key: string, reaction: Accessor<ReactionBarItem>) => {\n    const label = (own: boolean) =>\n      chatMessages().messageReaction({ emoji: reaction().emoji, count: reaction().count, names: reaction().label, own });\n    return (\n      <Show\n        when={props.onToggle}\n        fallback={\n          <span\n            class=\"k2b-reaction-bar__chip\"\n            role=\"img\"\n            aria-label={label(Boolean(reaction().own))}\n            aria-busy={reaction().busy ? \"true\" : undefined}\n            data-own={reaction().own ? \"\" : undefined}\n            data-reaction-key={key}\n            data-gesture-ignore\n          >\n            <span aria-hidden=\"true\">{reaction().emoji}</span>\n            <span aria-hidden=\"true\">{reaction().count}</span>\n          </span>\n        }\n      >\n        {(toggle) => (\n          <button\n            type=\"button\"\n            class=\"k2b-reaction-bar__chip\"\n            aria-pressed={reaction().own ? \"true\" : \"false\"}\n            aria-label={label(false)}\n            aria-busy={reaction().busy ? \"true\" : undefined}\n            data-own={reaction().own ? \"\" : undefined}\n            data-reaction-key={key}\n            onClick={() => toggle()(key)}\n          >\n            <span aria-hidden=\"true\">{reaction().emoji}</span>\n            <span aria-hidden=\"true\">{reaction().count}</span>\n          </button>\n        )}\n      </Show>\n    );\n  };\n  const chips = () => <For each={keys()}>{(key) => <Show when={byKey().get(key)}>{(reaction) => chip(key, reaction)}</Show>}</For>;\n\n  return (\n    <div\n      ref={root}\n      class={props.class ? `k2b-reaction-bar ${props.class}` : \"k2b-reaction-bar\"}\n      role=\"group\"\n      aria-label={chatMessages().messageReactions}\n      data-density={props.density ?? \"default\"}\n      data-overflow={overflow()}\n      data-add={props.onAdd ? (props.add ?? \"always\") : undefined}\n      data-empty={props.reactions.length === 0 ? \"\" : undefined}\n    >\n      <Show when={overflow() === \"scroll\"} fallback={<div class=\"k2b-reaction-bar__list\">{chips()}</div>}>\n        <Show when={shown().length > 0}>\n          <ScrollArea orientation=\"horizontal\" class=\"k2b-reaction-bar__scroll\" tabindex={props.onToggle ? undefined : 0}>\n            {chips()}\n          </ScrollArea>\n        </Show>\n      </Show>\n      <Show when={more() > 0}>\n        <span class=\"k2b-reaction-bar__more\">\n          <span aria-hidden=\"true\">+{more()}</span>\n          <span class=\"k2b-sr-only\">{props.moreLabel?.(more()) ?? chatMessages().moreReactions({ count: more() })}</span>\n        </span>\n      </Show>\n      <Show when={props.onAdd}>\n        {(add) => (\n          <span class={`k2b-reaction-bar__add${props.add === \"progressive\" ? \" k2b-progressive-action\" : \"\"}`}>\n            <IconButton\n              label={chatMessages().messageAddReaction}\n              size=\"xs\"\n              class=\"k2b-reaction-bar__add-button\"\n              onClick={(event) => add()(event.currentTarget)}\n            >\n              <i class=\"ti ti-mood-plus\" aria-hidden=\"true\" />\n            </IconButton>\n          </span>\n        )}\n      </Show>\n      <span\n        ref={surface}\n        class=\"k2b-tooltip k2b-reaction-bar__hint\"\n        popover=\"manual\"\n        role=\"tooltip\"\n        aria-hidden=\"true\"\n        data-touch={touch() ? \"\" : undefined}\n      >\n        {hint()}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/ReferenceChip.js

@@ -0,0 +1,162 @@
+import { template as _$template } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } 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 { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-reference__avatar aria-hidden=true>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<time>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<a>`);
+import { Show } from "solid-js";
+import { Avatar } from "../surfaces/Avatar";
+
+/** The visible length of a chip; longer titles are cut in the middle. */
+export const REFERENCE_CHIP_MAX_CHARACTERS = 40;
+const graphemes = text => typeof Intl.Segmenter === "function" ? Array.from(new Intl.Segmenter(undefined, {
+  granularity: "grapheme"
+}).segment(text), part => part.segment) : Array.from(text);
+
+/**
+ * Shortens `text` to at most `max` visible characters by cutting its middle, so the start and an ending such as
+ * ".pdf" stay readable. Counts user-perceived characters, so an emoji is never split.
+ * @example truncateMiddle("Quarterly report for the operations team 2026.pdf", 24) // "Quarterly re…m 2026.pdf"
+ */
+export const truncateMiddle = (text, max = REFERENCE_CHIP_MAX_CHARACTERS) => {
+  const characters = graphemes(text);
+  if (characters.length <= max) return text;
+  if (max < 2) return "…";
+  const tail = Math.floor((max - 1) / 2);
+  const head = max - 1 - tail;
+  return `${characters.slice(0, head).join("").trimEnd()}…${characters.slice(characters.length - tail).join("").trimStart()}`;
+};
+
+/** A thing or a place: an icon in its application colour and its title, a link while it exists. */
+
+/** A person: avatar and display name. The address belongs in the preview, never in the chip. */
+
+/** A date or time the host already formatted for the reader. */
+
+const fullText = props => props.kind === "person" ? props.name : props.kind === "time" ? props.label : props.title;
+
+/**
+ * A typed reference inside a sentence: a thing, a place, a person, or a time, in the calm `.k2b-reference` pill.
+ * A chip shows at most 40 characters and cuts longer titles in the middle; the full title stays its accessible name
+ * and tooltip.
+ * @example <ReferenceChip kind="object" title="Maintenance window" icon="ti ti-mail" accent="var(--app-mail)" href="/mail/…" />
+ */
+export function ReferenceChip(props) {
+  const full = () => fullText(props);
+  const visible = () => truncateMiddle(full());
+  const cut = () => visible() !== full();
+  const gone = () => props.kind !== "person" && props.kind !== "time" && props.gone === true;
+  const href = () => gone() || props.kind === "time" ? undefined : props.href;
+  const accent = () => props.kind === "object" || props.kind === "place" ? props.accent : undefined;
+  const icon = () => props.kind === "time" ? "ti ti-clock" : props.kind === "object" || props.kind === "place" ? props.icon : undefined;
+  const content = () => [_$createComponent(Show, {
+    get when() {
+      return props.kind === "person" ? props : undefined;
+    },
+    children: person => (() => {
+      var _el$3 = _$getNextElement(_tmpl$3);
+      _$insert(_el$3, _$createComponent(Avatar, {
+        get name() {
+          return person().name;
+        },
+        get src() {
+          return person().src;
+        },
+        size: "xs"
+      }));
+      return _el$3;
+    })()
+  }), _$createComponent(Show, {
+    get when() {
+      return icon();
+    },
+    children: name => (() => {
+      var _el$4 = _$getNextElement(_tmpl$4);
+      _$effect(() => _$className(_el$4, `k2b-reference__icon ${name()}`));
+      return _el$4;
+    })()
+  }), _$createComponent(Show, {
+    get when() {
+      return cut();
+    },
+    get fallback() {
+      return full();
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _$getNextElement(_tmpl$);
+        _$insert(_el$, full);
+        return _el$;
+      })(), (() => {
+        var _el$2 = _$getNextElement(_tmpl$2);
+        _$insert(_el$2, visible);
+        return _el$2;
+      })()];
+    }
+  })];
+  const shared = () => ({
+    class: `k2b-reference k2b-reference-chip${props.class ? ` ${props.class}` : ""}`,
+    "data-kind": props.kind,
+    "data-gone": gone() ? "true" : undefined,
+    title: cut() ? full() : undefined,
+    style: accent() ? {
+      "--k2b-reference-icon": accent()
+    } : undefined
+  });
+  return _$createComponent(Show, {
+    get when() {
+      return href();
+    },
+    get fallback() {
+      return _$createComponent(Show, {
+        get when() {
+          return props.kind === "time" ? props : undefined;
+        },
+        get fallback() {
+          return (() => {
+            var _el$5 = _$getNextElement(_tmpl$5);
+            _$spread(_el$5, _$mergeProps(shared), false, true);
+            _$insert(_el$5, content);
+            _$runHydrationEvents();
+            return _el$5;
+          })();
+        },
+        children: time => (() => {
+          var _el$6 = _$getNextElement(_tmpl$6);
+          _$spread(_el$6, _$mergeProps(shared, {
+            get dateTime() {
+              return time().dateTime;
+            }
+          }), false, true);
+          _$insert(_el$6, content);
+          _$runHydrationEvents();
+          return _el$6;
+        })()
+      });
+    },
+    children: link => (() => {
+      var _el$7 = _$getNextElement(_tmpl$7);
+      _$spread(_el$7, _$mergeProps(shared, {
+        get href() {
+          return link();
+        }
+      }), false, true);
+      _$insert(_el$7, content);
+      _$runHydrationEvents();
+      return _el$7;
+    })()
+  });
+}
+export default ReferenceChip;
+//# sourceMappingURL=ReferenceChip.js.map

package/dist/browser/content/ReferenceChip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["content/ReferenceChip.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Avatar } from \"../surfaces/Avatar\";\n\n/** The visible length of a chip; longer titles are cut in the middle. */\nexport const REFERENCE_CHIP_MAX_CHARACTERS = 40;\n\nconst graphemes = (text: string): string[] =>\n  typeof Intl.Segmenter === \"function\"\n    ? Array.from(new Intl.Segmenter(undefined, { granularity: \"grapheme\" }).segment(text), (part) => part.segment)\n    : Array.from(text);\n\n/**\n * Shortens `text` to at most `max` visible characters by cutting its middle, so the start and an ending such as\n * \".pdf\" stay readable. Counts user-perceived characters, so an emoji is never split.\n * @example truncateMiddle(\"Quarterly report for the operations team 2026.pdf\", 24) // \"Quarterly re…m 2026.pdf\"\n */\nexport const truncateMiddle = (text: string, max: number = REFERENCE_CHIP_MAX_CHARACTERS): string => {\n  const characters = graphemes(text);\n  if (characters.length <= max) return text;\n  if (max < 2) return \"…\";\n  const tail = Math.floor((max - 1) / 2);\n  const head = max - 1 - tail;\n  return `${characters.slice(0, head).join(\"\").trimEnd()}…${characters\n    .slice(characters.length - tail)\n    .join(\"\")\n    .trimStart()}`;\n};\n\ntype ReferenceChipCommon = {\n  class?: string;\n};\n\n/** A thing or a place: an icon in its application colour and its title, a link while it exists. */\nexport type ReferenceChipObjectProps = ReferenceChipCommon & {\n  kind: \"object\" | \"place\";\n  title: string;\n  /** Destination of the chip. Omit it, or set `gone`, when there is nothing to open. */\n  href?: string;\n  /** Icon class, for example `ti ti-mail`. */\n  icon?: string;\n  /** Icon colour, usually the owning application's accent. Sets `--k2b-reference-icon`. */\n  accent?: string;\n  /** The thing no longer exists: struck through and never a link. */\n  gone?: boolean;\n};\n\n/** A person: avatar and display name. The address belongs in the preview, never in the chip. */\nexport type ReferenceChipPersonProps = ReferenceChipCommon & {\n  kind: \"person\";\n  name: string;\n  /** Avatar image; initials on a tint from the name otherwise. */\n  src?: string | null;\n  href?: string;\n};\n\n/** A date or time the host already formatted for the reader. */\nexport type ReferenceChipTimeProps = ReferenceChipCommon & {\n  kind: \"time\";\n  label: string;\n  /** Machine-readable value for `<time datetime>`. */\n  dateTime?: string;\n};\n\nexport type ReferenceChipProps = ReferenceChipObjectProps | ReferenceChipPersonProps | ReferenceChipTimeProps;\n\nconst fullText = (props: ReferenceChipProps): string =>\n  props.kind === \"person\" ? props.name : props.kind === \"time\" ? props.label : props.title;\n\n/**\n * A typed reference inside a sentence: a thing, a place, a person, or a time, in the calm `.k2b-reference` pill.\n * A chip shows at most 40 characters and cuts longer titles in the middle; the full title stays its accessible name\n * and tooltip.\n * @example <ReferenceChip kind=\"object\" title=\"Maintenance window\" icon=\"ti ti-mail\" accent=\"var(--app-mail)\" href=\"/mail/…\" />\n */\nexport function ReferenceChip(props: ReferenceChipProps): JSX.Element {\n  const full = () => fullText(props);\n  const visible = () => truncateMiddle(full());\n  const cut = () => visible() !== full();\n  const gone = () => props.kind !== \"person\" && props.kind !== \"time\" && props.gone === true;\n  const href = () => (gone() || props.kind === \"time\" ? undefined : props.href);\n  const accent = () => (props.kind === \"object\" || props.kind === \"place\" ? props.accent : undefined);\n  const icon = () => (props.kind === \"time\" ? \"ti ti-clock\" : props.kind === \"object\" || props.kind === \"place\" ? props.icon : undefined);\n\n  const content = () => (\n    <>\n      <Show when={props.kind === \"person\" ? props : undefined}>\n        {(person) => (\n          <span class=\"k2b-reference__avatar\" aria-hidden=\"true\">\n            <Avatar name={person().name} src={person().src} size=\"xs\" />\n          </span>\n        )}\n      </Show>\n      <Show when={icon()}>{(name) => <i class={`k2b-reference__icon ${name()}`} aria-hidden=\"true\" />}</Show>\n      <Show when={cut()} fallback={full()}>\n        <span class=\"k2b-sr-only\">{full()}</span>\n        <span aria-hidden=\"true\">{visible()}</span>\n      </Show>\n    </>\n  );\n\n  const shared = () => ({\n    class: `k2b-reference k2b-reference-chip${props.class ? ` ${props.class}` : \"\"}`,\n    \"data-kind\": props.kind,\n    \"data-gone\": gone() ? \"true\" : undefined,\n    title: cut() ? full() : undefined,\n    style: accent() ? { \"--k2b-reference-icon\": accent() } : undefined,\n  });\n\n  return (\n    <Show\n      when={href()}\n      fallback={\n        <Show when={props.kind === \"time\" ? props : undefined} fallback={<span {...shared()}>{content()}</span>}>\n          {(time) => (\n            <time {...shared()} dateTime={time().dateTime}>\n              {content()}\n            </time>\n          )}\n        </Show>\n      }\n    >\n      {(link) => (\n        <a {...shared()} href={link()}>\n          {content()}\n        </a>\n      )}\n    </Show>\n  );\n}\n\nexport default ReferenceChip;\n"],"mappings":"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","ignoreList":[]}