@k2b/ui 0.28.0 → 0.30.0

package/dist/browser/chat/ChatDecision.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["chat/ChatDecision.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  For,\n  type JSX,\n  on,\n  onCleanup,\n  onMount,\n  Show,\n  untrack,\n  useContext,\n} from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { Avatar } from \"../surfaces/Avatar\";\nimport { useChatMessages } from \"./chat-messages\";\nimport type {\n  ChatDecisionAnswer,\n  ChatDecisionReason,\n  ChatDecisionState,\n  ChatOutcomeLine,\n  ChatOutcomeTone,\n  ChatPreviewHeaderRow,\n  ChatPreviewPerson,\n} from \"./types\";\n\n// ---------------------------------------------------------------------------\n// Decision\n// ---------------------------------------------------------------------------\n\nexport type ChatDecisionProps = {\n  /** `open` shows the question; every other state shows `outcome` in its place. */\n  state: ChatDecisionState;\n  /** The question as one sentence, usually with `ReferenceChip`s. */\n  sentence: JSX.Element;\n  /** Why this question is asked, in the platform's words. */\n  reason: ChatDecisionReason;\n  /** The thing itself, usually `Chat.Preview`. */\n  preview?: JSX.Element;\n  /** The main answer, named by verb and target (\"Send to Lea\"). `danger` for deletions, `primary` for requests. */\n  confirm: ChatDecisionAnswer & { variant?: \"ai\" | \"primary\" | \"danger\" };\n  /** The other answer (\"Don't send\"). */\n  decline: ChatDecisionAnswer;\n  /** An optional quiet third answer after the buttons, such as \"Yes, and don't ask again in this chat\". */\n  remember?: ChatDecisionAnswer;\n  /** Turns `confirm` and `remember` off; this reason replaces `reason` in the same place. */\n  unavailable?: ChatDecisionReason;\n  /** The result line shown in every state but `open`, usually `Chat.Outcome`. */\n  outcome?: JSX.Element;\n  /** Receives a rejected promise from an answer's `onSelect`. */\n  onAnswerError?: (error: unknown) => void;\n  anchorId?: string | number;\n  class?: string;\n};\n\n/** What an outcome inside a question needs from it: whether it was just answered here, and a link press inside it. */\nconst DecisionScope = createContext<{ answered: () => boolean; pressed: () => void; released: () => void }>();\n\nconst reasonIcon = (reason: ChatDecisionReason) => reason.icon ?? \"ti ti-info-circle\";\n\n/**\n * A question the person answers in the conversation: one sentence, why it is asked, the thing itself, and two answers.\n * An answer collapses it at once to its outcome line, which takes the focus and is announced.\n */\nexport function ChatDecision(props: ChatDecisionProps): JSX.Element {\n  const id = createUniqueId();\n  const sentenceId = `k2b-chat-decision-${id}-sentence`;\n  const reasonId = `k2b-chat-decision-${id}-reason`;\n  let root: HTMLDivElement | undefined;\n  let sentence: HTMLParagraphElement | undefined;\n  // An answer given here moves the focus to the outcome; a click in the outcome that reopens the question moves it\n  // back to the sentence. A state change from elsewhere moves no focus.\n  const [answeredHere, setAnsweredHere] = createSignal(false);\n  const [arrive, setArrive] = createSignal(false);\n  let reopenedHere = false;\n  // A press counts only while its action runs: a reopen from elsewhere later must not take the focus.\n  const scope = {\n    answered: answeredHere,\n    pressed: () => {\n      reopenedHere = true;\n    },\n    released: () => {\n      reopenedHere = false;\n    },\n  };\n\n  // Read once: an object literal from the host builds its JSX again on every read.\n  const reason = createMemo(() => props.unavailable ?? props.reason);\n  const open = () => props.state === \"open\";\n\n  const answer = (choice: ChatDecisionAnswer, enabled: boolean) => {\n    if (!enabled || !open() || answeredHere()) return;\n    setAnsweredHere(true);\n    try {\n      const result = choice.onSelect();\n      if (result instanceof Promise) result.catch((error: unknown) => props.onAnswerError?.(error));\n    } catch (error) {\n      props.onAnswerError?.(error);\n    }\n    // A host that keeps the question open (it could not take the answer) gets working buttons back.\n    queueMicrotask(() => {\n      if (open()) setAnsweredHere(false);\n    });\n  };\n\n  createEffect(\n    on(\n      () => props.state,\n      (state, previous) => {\n        if (state !== \"open\" && previous === \"open\" && answeredHere()) {\n          root?.querySelector<HTMLElement>(\".k2b-chat-outcome\")?.focus({ preventScroll: true });\n        }\n        if (state === \"open\" && previous !== undefined && previous !== \"open\") {\n          // A host that could not take an answer given here returns the question from `sending`; the outcome that held\n          // the focus is gone, so the focus goes back to the sentence instead of the page.\n          const active = document.activeElement;\n          const failedHere = answeredHere() && previous === \"sending\" && (!active || active === document.body);\n          setAnsweredHere(false);\n          if (reopenedHere || failedHere) {\n            sentence?.focus({ preventScroll: true });\n            setArrive(true);\n          }\n          // Handled. Until then the marker holds through states in between, such as `sending` while a reopen loads.\n          reopenedHere = false;\n        }\n      },\n    ),\n  );\n\n  return (\n    <div\n      ref={root}\n      class={`k2b-chat-decision ${props.class ?? \"\"}`}\n      data-state={props.state}\n      data-chat-anchor={props.anchorId !== undefined ? String(props.anchorId) : undefined}\n    >\n      <Show when={open()} fallback={<DecisionScope.Provider value={scope}>{props.outcome}</DecisionScope.Provider>}>\n        <section class=\"k2b-chat-decision__card\" aria-labelledby={sentenceId} aria-describedby={reasonId}>\n          <p\n            ref={sentence}\n            id={sentenceId}\n            class=\"k2b-chat-decision__sentence\"\n            tabindex=\"-1\"\n            data-arrive={arrive() ? \"true\" : undefined}\n            onAnimationEnd={() => setArrive(false)}\n          >\n            {props.sentence}\n          </p>\n          <p id={reasonId} class=\"k2b-chat-line k2b-chat-decision__reason\" data-tone={reason().tone ?? \"neutral\"}>\n            <i class={`k2b-chat-line__icon ${reasonIcon(reason())}`} aria-hidden=\"true\" />\n            <span class=\"k2b-chat-line__text\">{reason().text}</span>\n          </p>\n          {props.preview}\n          <div class=\"k2b-chat-decision__answers\">\n            <Button\n              class=\"k2b-chat-decision__answer\"\n              wrap\n              variant={props.confirm.variant ?? \"ai\"}\n              disabled={Boolean(props.unavailable)}\n              onClick={() => answer(props.confirm, !props.unavailable)}\n            >\n              <Show when={props.confirm.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n              {props.confirm.label}\n            </Button>\n            <Button class=\"k2b-chat-decision__answer\" wrap variant=\"subtle\" onClick={() => answer(props.decline, true)}>\n              <Show when={props.decline.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n              {props.decline.label}\n            </Button>\n            <Show when={props.remember}>\n              {(remember) => (\n                <Button\n                  class=\"k2b-chat-decision__remember\"\n                  wrap\n                  variant=\"text\"\n                  disabled={Boolean(props.unavailable)}\n                  onClick={() => answer(remember(), !props.unavailable)}\n                >\n                  {remember().label}\n                </Button>\n              )}\n            </Show>\n          </div>\n        </section>\n      </Show>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Outcome\n// ---------------------------------------------------------------------------\n\nexport type ChatOutcomeProps = {\n  /**\n   * Every line one flow can show, such as running and done. All of them share one cell, so the line is as high as\n   * the longest and switching between them moves nothing.\n   */\n  lines: Readonly<Record<string, ChatOutcomeLine>>;\n  /** The key of the visible line. */\n  current: string;\n  /** Receives an error thrown or rejected by a line's `action`. */\n  onActionError?: (error: unknown) => void;\n  anchorId?: string | number;\n  class?: string;\n};\n\nconst OUTCOME_ICONS: Record<ChatOutcomeTone, string> = {\n  running: \"ti ti-loader-2 k2b-spin\",\n  done: \"ti ti-check\",\n  off: \"ti ti-circle-off\",\n  waiting: \"ti ti-clock\",\n  warning: \"ti ti-alert-triangle\",\n  error: \"ti ti-alert-circle\",\n};\n\n/** The visible words of a line, without what screen readers do not hear. */\nconst spokenText = (element: Element): string => {\n  const copy = element.cloneNode(true) as Element;\n  // Buttons under the line are controls, not part of what happened.\n  for (const hidden of copy.querySelectorAll('[aria-hidden=\"true\"], .k2b-chat-outcome__actions')) hidden.remove();\n  // The time and the link stand apart by margin only; spoken, they need a space.\n  for (const part of copy.querySelectorAll(\".k2b-chat-outcome__time, .k2b-chat-outcome__link\")) part.before(\" \");\n  return (copy.textContent ?? \"\").replace(/\\s+/g, \" \").trim();\n};\n\n/**\n * One line that says what happened: running, done, off, waiting, warning, or error. Changes are announced through a\n * polite live region; the line itself can take the focus.\n */\nexport function ChatOutcome(props: ChatOutcomeProps): JSX.Element {\n  const scope = useContext(DecisionScope);\n  // Only a line that replaces a question just answered here fades in; history renders final.\n  const entering = untrack(() => scope?.answered() ?? false);\n  const [live, setLive] = createSignal(\"\");\n  let root: HTMLDivElement | undefined;\n  let cell: HTMLDivElement | undefined;\n  let pending = false;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  // Read once: an object literal from the host builds its JSX again on every read.\n  const lines = createMemo(() => props.lines);\n  const line = () => lines()[props.current];\n  const tone = () => line()?.tone ?? \"off\";\n  const keys = () => {\n    const all = Object.keys(lines());\n    return all.includes(props.current) ? all : [props.current, ...all];\n  };\n\n  // Empty the region first, so the same words spoken again are a change too.\n  const announce = () => {\n    setLive(\"\");\n    if (timer) clearTimeout(timer);\n    timer = setTimeout(() => {\n      const current = cell?.querySelector('[data-current=\"true\"]');\n      setLive(current ? spokenText(current) : \"\");\n    }, 40);\n  };\n\n  onMount(() => {\n    if (untrack(() => scope?.answered())) announce();\n  });\n  createEffect(\n    on(\n      () => props.current,\n      () => {\n        // A link pressed in a line that is now hidden would leave the focus on an invisible button, which the browser\n        // then drops to the page. The line itself keeps it instead.\n        const active = document.activeElement;\n        const hidden = active && cell?.contains(active) && !active.closest('[data-current=\"true\"]');\n        if (hidden || (pending && active === document.body)) root?.focus({ preventScroll: true });\n        announce();\n      },\n      { defer: true },\n    ),\n  );\n  onCleanup(() => {\n    if (timer) clearTimeout(timer);\n  });\n\n  return (\n    <div\n      ref={root}\n      class={`k2b-chat-outcome ${props.class ?? \"\"}`}\n      data-tone={tone()}\n      data-chat-anchor={props.anchorId !== undefined ? String(props.anchorId) : undefined}\n      data-enter={entering ? \"true\" : undefined}\n      tabindex=\"-1\"\n    >\n      <span class=\"k2b-chat-outcome__icon\" aria-hidden=\"true\">\n        <i class={line()?.icon ?? OUTCOME_ICONS[tone()]} />\n      </span>\n      {/* Busy is set on the words only: a live region inside a busy subtree would be held back. */}\n      <div ref={cell} class=\"k2b-chat-outcome__cell\" aria-busy={tone() === \"running\" ? \"true\" : undefined}>\n        <For each={keys()}>\n          {(key) => {\n            const entry = () => lines()[key];\n            const current = () => key === props.current;\n            return (\n              <Show when={entry()}>\n                {(item) => (\n                  <div\n                    class=\"k2b-chat-outcome__text\"\n                    data-current={current() ? \"true\" : undefined}\n                    aria-hidden={current() ? undefined : \"true\"}\n                  >\n                    {item().text}\n                    <Show when={item().detail}>\n                      {(detail) => (\n                        <>\n                          {\" \"}\n                          <span class=\"k2b-chat-outcome__detail\">{detail()}</span>\n                        </>\n                      )}\n                    </Show>\n                    <Show when={item().time}>{(time) => <span class=\"k2b-chat-outcome__time\">{time()}</span>}</Show>\n                    <Show when={item().action}>\n                      {(action) => (\n                        <Button\n                          class=\"k2b-chat-outcome__link\"\n                          wrap\n                          variant=\"text\"\n                          tabIndex={current() ? undefined : -1}\n                          onClick={() => {\n                            // A second press while the first is still running would repeat its work.\n                            if (pending) return;\n                            scope?.pressed();\n                            try {\n                              const result = action().onSelect();\n                              if (result instanceof Promise) {\n                                pending = true;\n                                result\n                                  .catch((error: unknown) => props.onActionError?.(error))\n                                  .finally(() => {\n                                    pending = false;\n                                    scope?.released();\n                                  });\n                                return;\n                              }\n                            } catch (error) {\n                              props.onActionError?.(error);\n                            }\n                            scope?.released();\n                          }}\n                        >\n                          {action().label}\n                        </Button>\n                      )}\n                    </Show>\n                    {/* Every line keeps its buttons, hidden with its text, so the cell also reserves their row. */}\n                    <Show when={item().actions}>{(actions) => <div class=\"k2b-chat-outcome__actions\">{actions()}</div>}</Show>\n                  </div>\n                )}\n              </Show>\n            );\n          }}\n        </For>\n      </div>\n      <span class=\"k2b-sr-only\" role=\"status\" aria-live=\"polite\">\n        {live()}\n      </span>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Preview\n// ---------------------------------------------------------------------------\n\nexport type ChatPreviewProps = { children: JSX.Element; class?: string };\n\n/** The thing a question is about, as calm text on the sentence's edge: no surface, no column. */\nfunction ChatPreviewRoot(props: ChatPreviewProps): JSX.Element {\n  return <div class={`k2b-chat-preview ${props.class ?? \"\"}`}>{props.children}</div>;\n}\n\nexport type ChatPreviewHeaderProps = {\n  /** One row per field, such as From, To, Cc, and Bcc; the label stands right before its value. */\n  rows: readonly ChatPreviewHeaderRow[];\n  /** A last line, such as when the message goes out. */\n  note?: JSX.Element;\n};\n\nconst PreviewPeople = (props: { people: readonly ChatPreviewPerson[] }) => (\n  <For each={props.people}>\n    {(person, index) => (\n      <>\n        {index() > 0 ? \", \" : \"\"}\n        <span class=\"k2b-chat-preview__person\">\n          <Show when={person.name}>{(name) => <b>{name()}</b>}</Show>\n          <Show when={person.address}>\n            {(address) => (\n              <span class=\"k2b-chat-preview__address\" data-alone={person.name ? undefined : \"true\"}>\n                {address()}\n              </span>\n            )}\n          </Show>\n        </span>\n      </>\n    )}\n  </For>\n);\n\nfunction ChatPreviewHeader(props: ChatPreviewHeaderProps): JSX.Element {\n  return (\n    <div class=\"k2b-chat-preview__header\">\n      <dl>\n        <For each={props.rows}>\n          {(row) => (\n            <div data-emphasis={row.emphasis ? \"true\" : undefined}>\n              <dt>{row.label}</dt>\n              <dd>\n                <Show when={row.people}>{(people) => <PreviewPeople people={people()} />}</Show>\n                {row.value}\n              </dd>\n            </div>\n          )}\n        </For>\n      </dl>\n      <Show when={props.note}>{(note) => <p>{note()}</p>}</Show>\n    </div>\n  );\n}\n\nexport type ChatPreviewTitleProps = { children: JSX.Element; meta?: JSX.Element };\n\n/** The thing's name in the text's own face, with optional quiet facts after it. */\nfunction ChatPreviewTitle(props: ChatPreviewTitleProps): JSX.Element {\n  return (\n    <p class=\"k2b-chat-preview__title-line\">\n      <span class=\"k2b-chat-preview__title\">{props.children}</span>\n      <Show when={props.meta}>\n        {(meta) => (\n          <>\n            {\" \"}\n            <span class=\"k2b-chat-preview__meta\">{meta()}</span>\n          </>\n        )}\n      </Show>\n    </p>\n  );\n}\n\n/** A rule or instruction as one sentence, such as what a routine does; chips and marks may stand inside. */\nfunction ChatPreviewSentence(props: { children: JSX.Element }): JSX.Element {\n  return <p class=\"k2b-chat-preview__sentence\">{props.children}</p>;\n}\n\nexport type ChatPreviewExcerptProps = {\n  children: JSX.Element;\n  /** Shows the whole text in place instead of the first lines, such as after `Chat.Preview.ShowAll`. */\n  expanded?: boolean;\n  id?: string;\n};\n\n/** The first lines of a longer text. It keeps its line breaks, shows about three lines, and fades out. */\nfunction ChatPreviewExcerpt(props: ChatPreviewExcerptProps): JSX.Element {\n  return (\n    <p\n      class=\"k2b-chat-preview__excerpt\"\n      id={props.id}\n      data-expanded={props.expanded ? \"true\" : undefined}\n      tabindex={props.expanded ? -1 : undefined}\n    >\n      {props.children}\n    </p>\n  );\n}\n\nexport type ChatPreviewShowAllProps = {\n  /** The id of the `Chat.Preview.Excerpt` this button opens. */\n  controls: string;\n  onShow: () => void;\n  children: JSX.Element;\n};\n\n/**\n * Shows the rest of an excerpt in place, for a text with no page of its own to open. It looks like `ReadMore`; the\n * caller removes it once the text is shown, and the focus moves to the text, so reading goes on where it was.\n */\nfunction ChatPreviewShowAll(props: ChatPreviewShowAllProps): JSX.Element {\n  const show = () => {\n    props.onShow();\n    queueMicrotask(() => document.getElementById(props.controls)?.focus({ preventScroll: true }));\n  };\n  return (\n    <button type=\"button\" class=\"k2b-chat-preview__more\" aria-controls={props.controls} aria-expanded=\"false\" onClick={show}>\n      {props.children}\n    </button>\n  );\n}\n\nexport type ChatPreviewReadMoreProps = {\n  href: string;\n  children: JSX.Element;\n  /** Tooltip, such as \"Opens exactly this version of the draft\". */\n  title?: string;\n};\n\n/** Opens the whole thing at exactly the version the question shows. */\nfunction ChatPreviewReadMore(props: ChatPreviewReadMoreProps): JSX.Element {\n  return (\n    <a class=\"k2b-chat-preview__more\" href={props.href} title={props.title}>\n      {props.children}\n    </a>\n  );\n}\n\nconst InList = createContext(false);\n\n/** A list of lines with a name, such as \"What the routine may do\". */\nfunction ChatPreviewLines(props: { label?: string; children: JSX.Element }): JSX.Element {\n  return (\n    <ul class=\"k2b-chat-preview__lines\" aria-label={props.label}>\n      <InList.Provider value={true}>{props.children}</InList.Provider>\n    </ul>\n  );\n}\n\nexport type ChatPreviewLineProps = {\n  /** Icon class; the text after it starts 1.5rem from the edge. */\n  icon: string;\n  /** Icon colour, such as the PDF colour of an attachment. */\n  accent?: string;\n  /** `muted` for limits and notes, `warning` for an application's own warning. */\n  tone?: \"default\" | \"muted\" | \"warning\";\n  /** Marks the whole line as new or removed. */\n  mark?: \"added\" | \"removed\";\n  /** Quiet facts after the text, such as a file size. */\n  meta?: JSX.Element;\n  children: JSX.Element;\n};\n\n/** One line led by an icon: a consequence, a right, an attachment, or a warning. */\nfunction ChatPreviewLine(props: ChatPreviewLineProps): JSX.Element {\n  const inList = useContext(InList);\n  const messages = useChatMessages();\n  const content = () => (\n    <>\n      <i class={`k2b-chat-line__icon ${props.icon}`} style={props.accent ? { color: props.accent } : undefined} aria-hidden=\"true\" />\n      <span class=\"k2b-chat-line__text\">\n        {/* One stable wrapper, so marking a line later never moves its mounted children. */}\n        <span class=\"k2b-chat-mark\" data-change={props.mark}>\n          <Show when={props.mark}>\n            {(mark) => <span class=\"k2b-sr-only\">{mark() === \"added\" ? messages().markAdded : messages().markRemoved} </span>}\n          </Show>\n          {props.children}\n        </span>\n        <Show when={props.meta}>\n          {(meta) => (\n            <>\n              {\" \"}\n              <span class=\"k2b-chat-preview__meta\">{meta()}</span>\n            </>\n          )}\n        </Show>\n      </span>\n    </>\n  );\n  const attributes = () => ({\n    class: \"k2b-chat-line k2b-chat-preview__line\",\n    \"data-tone\": props.tone && props.tone !== \"default\" ? props.tone : undefined,\n  });\n  return inList ? <li {...attributes()}>{content()}</li> : <p {...attributes()}>{content()}</p>;\n}\n\nexport type ChatPreviewPeopleProps = {\n  /** The first few people; their avatars overlap at the start of the line. */\n  people: readonly { name: string; src?: string | null }[];\n  /** The names as text, such as \"Lea Berg, Tom Weber and 3 others\". */\n  children: JSX.Element;\n};\n\nfunction ChatPreviewPeople(props: ChatPreviewPeopleProps): JSX.Element {\n  return (\n    <p class=\"k2b-chat-preview__people\">\n      <span class=\"k2b-chat-preview__faces\" aria-hidden=\"true\">\n        <For each={props.people}>{(person) => <Avatar name={person.name} src={person.src} size=\"xs\" />}</For>\n      </span>\n      <span>{props.children}</span>\n    </p>\n  );\n}\n\nexport const ChatPreview = Object.assign(ChatPreviewRoot, {\n  Header: ChatPreviewHeader,\n  Title: ChatPreviewTitle,\n  Sentence: ChatPreviewSentence,\n  Excerpt: ChatPreviewExcerpt,\n  ReadMore: ChatPreviewReadMore,\n  ShowAll: ChatPreviewShowAll,\n  Lines: ChatPreviewLines,\n  Line: ChatPreviewLine,\n  People: ChatPreviewPeople,\n});\n\n// ---------------------------------------------------------------------------\n// Mark\n// ---------------------------------------------------------------------------\n\nexport type ChatMarkProps = { change: \"added\" | \"removed\"; children: JSX.Element };\n\n/** Marks new or removed words; screen readers hear \"new:\" or \"removed:\" first. */\nexport function ChatMark(props: ChatMarkProps): JSX.Element {\n  const messages = useChatMessages();\n  return (\n    <Show\n      when={props.change === \"removed\"}\n      fallback={\n        <mark class=\"k2b-chat-mark\" data-change=\"added\">\n          <span class=\"k2b-sr-only\">{messages().markAdded} </span>\n          {props.children}\n        </mark>\n      }\n    >\n      <del class=\"k2b-chat-mark\" data-change=\"removed\">\n        <span class=\"k2b-sr-only\">{messages().markRemoved} </span>\n        {props.children}\n      </del>\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/chat/ChatPrimitives.js

@@ -1,7 +1,9 @@
 import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
@@ -31,12 +33,14 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-chat-progress-dots aria-hi
   _tmpl$17 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-right k2b-chat-activity__chevron"aria-hidden=true>`),
   _tmpl$18 = /*#__PURE__*/_$template(`<i>`),
   _tmpl$19 = /*#__PURE__*/_$template(`<small>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<details><summary class=k2b-chat-activity__row></summary><div class=k2b-chat-activity__body>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div><div class=k2b-chat-activity__row>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<i class="ti ti-brain"aria-hidden=true>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div><dt></dt><dd>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<dl><!$><!/><div><dt></dt><dd></dd></div><div><dt></dt><dd></dd></div><!$><!/><div><dt></dt><dd></dd></div><!$><!/>`);
-import { createRenderEffect, createSignal, For, onCleanup, Show } from "solid-js";
+  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-activity__toggle><span class=k2b-chat-activity__toggle-label></span><i class="ti ti-chevron-right k2b-chat-activity__chevron"aria-hidden=true>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<details><summary class=k2b-chat-activity__row></summary><div class=k2b-chat-activity__body>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div><div class=k2b-chat-activity__row>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div><div class=k2b-chat-activity__row></div><div class=k2b-chat-activity__body>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<i class="ti ti-brain"aria-hidden=true>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div><dt></dt><dd>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<dl><!$><!/><div><dt></dt><dd></dd></div><div><dt></dt><dd></dd></div><!$><!/><div><dt></dt><dd></dd></div><!$><!/>`);
+import { children, createContext, createRenderEffect, createSignal, createUniqueId, For, onCleanup, Show, useContext } from "solid-js";
 import { Button } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
 import { Tooltip } from "../feedback/Tooltip";
@@ -468,6 +472,42 @@ const ActivityContent = props => [(() => {
     return _$getNextElement(_tmpl$17);
   }
 })];
+const ActivityDisclosureContext = createContext();
+/**
+ * The words of an activity label that open its body, with the chevron right after them. With a toggle in its label,
+ * only these words are the disclosure, and the rest of the row, chips with links included, stays ordinary content.
+ * Outside an activity with a body it renders its words as plain text.
+ */
+export function ChatActivityToggle(props) {
+  const disclosure = useContext(ActivityDisclosureContext);
+  disclosure?.register();
+  return _$createComponent(Show, {
+    get when() {
+      return disclosure?.expandable() ? disclosure : undefined;
+    },
+    get fallback() {
+      return props.children;
+    },
+    children: current => (() => {
+      var _el$46 = _$getNextElement(_tmpl$20),
+        _el$47 = _el$46.firstChild;
+      _el$46.$$click = () => current().toggle();
+      _$insert(_el$47, () => props.children);
+      _$effect(_p$ => {
+        var _v$14 = current().open() ? "true" : "false",
+          _v$15 = current().bodyId;
+        _v$14 !== _p$.e && _$setAttribute(_el$46, "aria-expanded", _p$.e = _v$14);
+        _v$15 !== _p$.t && _$setAttribute(_el$46, "aria-controls", _p$.t = _v$15);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      _$runHydrationEvents();
+      return _el$46;
+    })()
+  });
+}
 export function ChatActivity(props) {
   // The disclosure's real state. A controlled `open` sets it, and every toggle reports it, so the body renders whenever
   // the row is open, also when a host has not yet passed its new `open` back.
@@ -477,102 +517,200 @@ export function ChatActivity(props) {
     if (open !== undefined) setExpanded(open);
   });
   const open = expanded;
+  const setOpen = next => {
+    if (next === expanded()) return;
+    setExpanded(next);
+    props.onOpenChange?.(next);
+  };
   const tone = () => props.tone ?? "neutral";
   const style = () => props.accent ? {
     "--k2b-chat-activity-accent": props.accent
   } : undefined;
-  return _$createComponent(Show, {
+  const expandable = () => Boolean(props.renderBody || props.children);
+  // A `Chat.Activity.Toggle` in the label registers while the label resolves, before the row picks its element, so the
+  // server and the first browser frame agree on whether the whole row or only the toggle is the disclosure.
+  const [toggles, setToggles] = createSignal(0);
+  const bodyId = createUniqueId();
+  const disclosure = {
+    expandable,
+    open,
+    toggle: () => setOpen(!expanded()),
+    bodyId,
+    register: () => {
+      setToggles(count => count + 1);
+      onCleanup(() => setToggles(count => count - 1));
+    }
+  };
+  const body = () => props.renderBody ? _$createComponent(Show, {
     get when() {
-      return props.renderBody || props.children;
-    },
-    get fallback() {
-      return (() => {
-        var _el$49 = _$getNextElement(_tmpl$21),
-          _el$50 = _el$49.firstChild;
-        _$insert(_el$50, _$createComponent(ActivityContent, props));
-        _$effect(_p$ => {
-          var _v$24 = `k2b-chat-activity ${props.class ?? ""}`,
-            _v$25 = tone(),
-            _v$26 = props.accent ? "true" : undefined,
-            _v$27 = props.busy ? "true" : undefined,
-            _v$28 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
-            _v$29 = style(),
-            _v$30 = props.busy ? "true" : undefined;
-          _v$24 !== _p$.e && _$className(_el$49, _p$.e = _v$24);
-          _v$25 !== _p$.t && _$setAttribute(_el$49, "data-tone", _p$.t = _v$25);
-          _v$26 !== _p$.a && _$setAttribute(_el$49, "data-accent", _p$.a = _v$26);
-          _v$27 !== _p$.o && _$setAttribute(_el$49, "data-busy", _p$.o = _v$27);
-          _v$28 !== _p$.i && _$setAttribute(_el$49, "data-chat-anchor", _p$.i = _v$28);
-          _p$.n = _$style(_el$49, _v$29, _p$.n);
-          _v$30 !== _p$.s && _$setAttribute(_el$49, "aria-busy", _p$.s = _v$30);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined,
-          i: undefined,
-          n: undefined,
-          s: undefined
-        });
-        return _el$49;
-      })();
+      return _$memo(() => !!open())() ? props.renderBody : undefined;
     },
+    children: render => render()()
+  }) : props.children;
+  return _$createComponent(ActivityDisclosureContext.Provider, {
+    value: disclosure,
     get children() {
-      var _el$46 = _$getNextElement(_tmpl$20),
-        _el$47 = _el$46.firstChild,
-        _el$48 = _el$47.nextSibling;
-      _el$46.addEventListener("toggle", event => {
-        setExpanded(event.currentTarget.open);
-        props.onOpenChange?.(event.currentTarget.open);
-      });
-      _$insert(_el$47, _$createComponent(ActivityContent, _$mergeProps(props, {
-        disclosure: true
-      })));
-      _$insert(_el$48, (() => {
-        var _c$ = _$memo(() => !!props.renderBody);
-        return () => _c$() ? _$createComponent(Show, {
+      return (() => {
+        const label = children(() => props.label);
+        return _$createComponent(Show, {
           get when() {
-            return _$memo(() => !!open())() ? props.renderBody : undefined;
+            return expandable();
           },
-          children: render => render()()
-        }) : props.children;
-      })());
-      _$effect(_p$ => {
-        var _v$14 = `k2b-chat-activity ${props.class ?? ""}`,
-          _v$15 = tone(),
-          _v$16 = props.accent ? "true" : undefined,
-          _v$17 = props.busy ? "true" : undefined,
-          _v$18 = props.bodyInset === false ? "false" : undefined,
-          _v$19 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
-          _v$20 = style(),
-          _v$21 = open(),
-          _v$22 = props.busy ? "true" : undefined,
-          _v$23 = props.ariaLabel;
-        _v$14 !== _p$.e && _$className(_el$46, _p$.e = _v$14);
-        _v$15 !== _p$.t && _$setAttribute(_el$46, "data-tone", _p$.t = _v$15);
-        _v$16 !== _p$.a && _$setAttribute(_el$46, "data-accent", _p$.a = _v$16);
-        _v$17 !== _p$.o && _$setAttribute(_el$46, "data-busy", _p$.o = _v$17);
-        _v$18 !== _p$.i && _$setAttribute(_el$46, "data-body-inset", _p$.i = _v$18);
-        _v$19 !== _p$.n && _$setAttribute(_el$46, "data-chat-anchor", _p$.n = _v$19);
-        _p$.s = _$style(_el$46, _v$20, _p$.s);
-        _v$21 !== _p$.h && _$setProperty(_el$46, "open", _p$.h = _v$21);
-        _v$22 !== _p$.r && _$setAttribute(_el$46, "aria-busy", _p$.r = _v$22);
-        _v$23 !== _p$.d && _$setAttribute(_el$47, "aria-label", _p$.d = _v$23);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined,
-        i: undefined,
-        n: undefined,
-        s: undefined,
-        h: undefined,
-        r: undefined,
-        d: undefined
-      });
-      return _el$46;
+          get fallback() {
+            return (() => {
+              var _el$51 = _$getNextElement(_tmpl$22),
+                _el$52 = _el$51.firstChild;
+              _$insert(_el$52, _$createComponent(ActivityContent, _$mergeProps(props, {
+                get label() {
+                  return label();
+                }
+              })));
+              _$effect(_p$ => {
+                var _v$27 = `k2b-chat-activity ${props.class ?? ""}`,
+                  _v$28 = tone(),
+                  _v$29 = props.accent ? "true" : undefined,
+                  _v$30 = props.busy ? "true" : undefined,
+                  _v$31 = props.wrap ? "true" : undefined,
+                  _v$32 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+                  _v$33 = style(),
+                  _v$34 = props.busy ? "true" : undefined;
+                _v$27 !== _p$.e && _$className(_el$51, _p$.e = _v$27);
+                _v$28 !== _p$.t && _$setAttribute(_el$51, "data-tone", _p$.t = _v$28);
+                _v$29 !== _p$.a && _$setAttribute(_el$51, "data-accent", _p$.a = _v$29);
+                _v$30 !== _p$.o && _$setAttribute(_el$51, "data-busy", _p$.o = _v$30);
+                _v$31 !== _p$.i && _$setAttribute(_el$51, "data-wrap", _p$.i = _v$31);
+                _v$32 !== _p$.n && _$setAttribute(_el$51, "data-chat-anchor", _p$.n = _v$32);
+                _p$.s = _$style(_el$51, _v$33, _p$.s);
+                _v$34 !== _p$.h && _$setAttribute(_el$51, "aria-busy", _p$.h = _v$34);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined,
+                i: undefined,
+                n: undefined,
+                s: undefined,
+                h: undefined
+              });
+              return _el$51;
+            })();
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return toggles() === 0;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$53 = _$getNextElement(_tmpl$23),
+                    _el$54 = _el$53.firstChild,
+                    _el$55 = _el$54.nextSibling;
+                  _$insert(_el$54, _$createComponent(ActivityContent, _$mergeProps(props, {
+                    get label() {
+                      return label();
+                    }
+                  })));
+                  _$setAttribute(_el$55, "id", bodyId);
+                  _$insert(_el$55, body);
+                  _$effect(_p$ => {
+                    var _v$35 = `k2b-chat-activity ${props.class ?? ""}`,
+                      _v$36 = tone(),
+                      _v$37 = props.accent ? "true" : undefined,
+                      _v$38 = props.busy ? "true" : undefined,
+                      _v$39 = props.wrap ? "true" : undefined,
+                      _v$40 = props.bodyInset === false ? "false" : undefined,
+                      _v$41 = open() ? "true" : "false",
+                      _v$42 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+                      _v$43 = style(),
+                      _v$44 = props.busy ? "true" : undefined,
+                      _v$45 = !open();
+                    _v$35 !== _p$.e && _$className(_el$53, _p$.e = _v$35);
+                    _v$36 !== _p$.t && _$setAttribute(_el$53, "data-tone", _p$.t = _v$36);
+                    _v$37 !== _p$.a && _$setAttribute(_el$53, "data-accent", _p$.a = _v$37);
+                    _v$38 !== _p$.o && _$setAttribute(_el$53, "data-busy", _p$.o = _v$38);
+                    _v$39 !== _p$.i && _$setAttribute(_el$53, "data-wrap", _p$.i = _v$39);
+                    _v$40 !== _p$.n && _$setAttribute(_el$53, "data-body-inset", _p$.n = _v$40);
+                    _v$41 !== _p$.s && _$setAttribute(_el$53, "data-open", _p$.s = _v$41);
+                    _v$42 !== _p$.h && _$setAttribute(_el$53, "data-chat-anchor", _p$.h = _v$42);
+                    _p$.r = _$style(_el$53, _v$43, _p$.r);
+                    _v$44 !== _p$.d && _$setAttribute(_el$53, "aria-busy", _p$.d = _v$44);
+                    _v$45 !== _p$.l && _$setProperty(_el$55, "hidden", _p$.l = _v$45);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined,
+                    a: undefined,
+                    o: undefined,
+                    i: undefined,
+                    n: undefined,
+                    s: undefined,
+                    h: undefined,
+                    r: undefined,
+                    d: undefined,
+                    l: undefined
+                  });
+                  return _el$53;
+                })();
+              },
+              get children() {
+                var _el$48 = _$getNextElement(_tmpl$21),
+                  _el$49 = _el$48.firstChild,
+                  _el$50 = _el$49.nextSibling;
+                _el$48.addEventListener("toggle", event => {
+                  setExpanded(event.currentTarget.open);
+                  props.onOpenChange?.(event.currentTarget.open);
+                });
+                _$insert(_el$49, _$createComponent(ActivityContent, _$mergeProps(props, {
+                  get label() {
+                    return label();
+                  },
+                  disclosure: true
+                })));
+                _$insert(_el$50, body);
+                _$effect(_p$ => {
+                  var _v$16 = `k2b-chat-activity ${props.class ?? ""}`,
+                    _v$17 = tone(),
+                    _v$18 = props.accent ? "true" : undefined,
+                    _v$19 = props.busy ? "true" : undefined,
+                    _v$20 = props.wrap ? "true" : undefined,
+                    _v$21 = props.bodyInset === false ? "false" : undefined,
+                    _v$22 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+                    _v$23 = style(),
+                    _v$24 = open(),
+                    _v$25 = props.busy ? "true" : undefined,
+                    _v$26 = props.ariaLabel;
+                  _v$16 !== _p$.e && _$className(_el$48, _p$.e = _v$16);
+                  _v$17 !== _p$.t && _$setAttribute(_el$48, "data-tone", _p$.t = _v$17);
+                  _v$18 !== _p$.a && _$setAttribute(_el$48, "data-accent", _p$.a = _v$18);
+                  _v$19 !== _p$.o && _$setAttribute(_el$48, "data-busy", _p$.o = _v$19);
+                  _v$20 !== _p$.i && _$setAttribute(_el$48, "data-wrap", _p$.i = _v$20);
+                  _v$21 !== _p$.n && _$setAttribute(_el$48, "data-body-inset", _p$.n = _v$21);
+                  _v$22 !== _p$.s && _$setAttribute(_el$48, "data-chat-anchor", _p$.s = _v$22);
+                  _p$.h = _$style(_el$48, _v$23, _p$.h);
+                  _v$24 !== _p$.r && _$setProperty(_el$48, "open", _p$.r = _v$24);
+                  _v$25 !== _p$.d && _$setAttribute(_el$48, "aria-busy", _p$.d = _v$25);
+                  _v$26 !== _p$.l && _$setAttribute(_el$49, "aria-label", _p$.l = _v$26);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined,
+                  n: undefined,
+                  s: undefined,
+                  h: undefined,
+                  r: undefined,
+                  d: undefined,
+                  l: undefined
+                });
+                return _el$48;
+              }
+            });
+          }
+        });
+      })();
     }
   });
 }
@@ -641,74 +779,74 @@ export function ChatContextUsage(props) {
               });
             }
           }), (() => {
-            var _el$53 = _$getNextElement(_tmpl$24),
-              _el$69 = _el$53.firstChild,
-              [_el$70, _co$1] = _$getNextMarker(_el$69.nextSibling),
-              _el$54 = _el$70.nextSibling,
-              _el$55 = _el$54.firstChild,
-              _el$56 = _el$55.nextSibling,
-              _el$57 = _el$54.nextSibling,
-              _el$58 = _el$57.firstChild,
-              _el$59 = _el$58.nextSibling,
-              _el$71 = _el$57.nextSibling,
-              [_el$72, _co$10] = _$getNextMarker(_el$71.nextSibling),
-              _el$63 = _el$72.nextSibling,
-              _el$64 = _el$63.firstChild,
-              _el$65 = _el$64.nextSibling,
-              _el$73 = _el$63.nextSibling,
-              [_el$74, _co$11] = _$getNextMarker(_el$73.nextSibling);
-            _$insert(_el$53, _$createComponent(Show, {
+            var _el$58 = _$getNextElement(_tmpl$26),
+              _el$74 = _el$58.firstChild,
+              [_el$75, _co$1] = _$getNextMarker(_el$74.nextSibling),
+              _el$59 = _el$75.nextSibling,
+              _el$60 = _el$59.firstChild,
+              _el$61 = _el$60.nextSibling,
+              _el$62 = _el$59.nextSibling,
+              _el$63 = _el$62.firstChild,
+              _el$64 = _el$63.nextSibling,
+              _el$76 = _el$62.nextSibling,
+              [_el$77, _co$10] = _$getNextMarker(_el$76.nextSibling),
+              _el$68 = _el$77.nextSibling,
+              _el$69 = _el$68.firstChild,
+              _el$70 = _el$69.nextSibling,
+              _el$78 = _el$68.nextSibling,
+              [_el$79, _co$11] = _$getNextMarker(_el$78.nextSibling);
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
                 return props.modelLabel;
               },
               children: model => (() => {
-                var _el$75 = _$getNextElement(_tmpl$23),
-                  _el$76 = _el$75.firstChild,
-                  _el$77 = _el$76.nextSibling;
-                _$insert(_el$76, () => chatMessages().model);
-                _$insert(_el$77, model);
-                return _el$75;
+                var _el$80 = _$getNextElement(_tmpl$25),
+                  _el$81 = _el$80.firstChild,
+                  _el$82 = _el$81.nextSibling;
+                _$insert(_el$81, () => chatMessages().model);
+                _$insert(_el$82, model);
+                return _el$80;
               })()
-            }), _el$70, _co$1);
-            _$insert(_el$55, () => chatMessages().input);
-            _$insert(_el$56, () => formattedUsageValue(usage().input));
-            _$insert(_el$58, () => chatMessages().output);
-            _$insert(_el$59, () => formattedUsageValue(usage().output));
-            _$insert(_el$53, _$createComponent(Show, {
+            }), _el$75, _co$1);
+            _$insert(_el$60, () => chatMessages().input);
+            _$insert(_el$61, () => formattedUsageValue(usage().input));
+            _$insert(_el$63, () => chatMessages().output);
+            _$insert(_el$64, () => formattedUsageValue(usage().output));
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
                 return loopUsage().reported;
               },
               get children() {
-                var _el$60 = _$getNextElement(_tmpl$23),
-                  _el$61 = _el$60.firstChild,
-                  _el$62 = _el$61.nextSibling;
-                _$insert(_el$61, () => chatMessages().loopTotal);
-                _$insert(_el$62, () => formattedUsageValue(loopUsage().total));
-                return _el$60;
+                var _el$65 = _$getNextElement(_tmpl$25),
+                  _el$66 = _el$65.firstChild,
+                  _el$67 = _el$66.nextSibling;
+                _$insert(_el$66, () => chatMessages().loopTotal);
+                _$insert(_el$67, () => formattedUsageValue(loopUsage().total));
+                return _el$65;
               }
-            }), _el$72, _co$10);
-            _$insert(_el$64, () => chatMessages().contextWindow);
-            _$insert(_el$65, (() => {
-              var _c$3 = _$memo(() => windowSize() > 0);
-              return () => _c$3() ? formatNumber(windowSize()) : chatMessages().notConfigured;
+            }), _el$77, _co$10);
+            _$insert(_el$69, () => chatMessages().contextWindow);
+            _$insert(_el$70, (() => {
+              var _c$2 = _$memo(() => windowSize() > 0);
+              return () => _c$2() ? formatNumber(windowSize()) : chatMessages().notConfigured;
             })());
-            _$insert(_el$53, _$createComponent(Show, {
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
                 return remaining() !== null;
               },
               get children() {
-                var _el$66 = _$getNextElement(_tmpl$23),
-                  _el$67 = _el$66.firstChild,
-                  _el$68 = _el$67.nextSibling;
-                _$insert(_el$67, () => chatMessages().remaining);
-                _$insert(_el$68, (() => {
-                  var _c$4 = _$memo(() => remaining() === null);
-                  return () => _c$4() ? messages().unknown : formatNumber(remaining());
+                var _el$71 = _$getNextElement(_tmpl$25),
+                  _el$72 = _el$71.firstChild,
+                  _el$73 = _el$72.nextSibling;
+                _$insert(_el$72, () => chatMessages().remaining);
+                _$insert(_el$73, (() => {
+                  var _c$3 = _$memo(() => remaining() === null);
+                  return () => _c$3() ? messages().unknown : formatNumber(remaining());
                 })());
-                return _el$66;
+                return _el$71;
               }
-            }), _el$74, _co$11);
-            return _el$53;
+            }), _el$79, _co$11);
+            return _el$58;
           })(), _$createComponent(Show, {
             get when() {
               return props.action;
@@ -725,9 +863,9 @@ export function ChatContextUsage(props) {
               },
               get children() {
                 return [(() => {
-                  var _el$78 = _$getNextElement(_tmpl$1);
-                  _$effect(() => _$className(_el$78, busy() ? "ti ti-loader-2 k2b-spin" : action().icon));
-                  return _el$78;
+                  var _el$83 = _$getNextElement(_tmpl$1);
+                  _$effect(() => _$className(_el$83, busy() ? "ti ti-loader-2 k2b-spin" : action().icon));
+                  return _el$83;
                 })(), _$memo(() => action().label)];
               }
             })
@@ -746,15 +884,16 @@ export function ChatContextUsage(props) {
       return accessibleLabel();
     },
     get children() {
-      return [_$getNextElement(_tmpl$22), (() => {
-        var _el$52 = _$getNextElement(_tmpl$0);
-        _$insert(_el$52, (() => {
-          var _c$2 = _$memo(() => percent() === null);
-          return () => _c$2() ? "–" : `${percent()}%`;
+      return [_$getNextElement(_tmpl$24), (() => {
+        var _el$57 = _$getNextElement(_tmpl$0);
+        _$insert(_el$57, (() => {
+          var _c$ = _$memo(() => percent() === null);
+          return () => _c$() ? "–" : `${percent()}%`;
         })());
-        return _el$52;
+        return _el$57;
       })()];
     }
   });
 }
+_$delegateEvents(["click"]);
 //# sourceMappingURL=ChatPrimitives.js.map