@k2b/ui 0.20.0 → 0.22.0

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/Lightbox.tsx"],"sourcesContent":["import { createEffect, createSignal, For, onCleanup, onMount, Show } from \"solid-js\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\n\n/** One more thing to do with the shown image, beside Download: a short label, its icon class, and what it does. */\nexport type LightboxAction = {\n  label: string;\n  icon: string;\n  onClick: () => void;\n};\n\nexport type LightboxImage = {\n  src: string;\n  alt?: string;\n  downloadUrl?: string;\n  /** Actions for this image, shown before Download in the same style. */\n  actions?: readonly LightboxAction[];\n};\n\ntype LightboxProps = {\n  images: LightboxImage[];\n  initialIndex?: number;\n  onClose: () => void;\n};\n\n/**\n * Minimal, accessible lightbox using native <dialog>.\n * Supports keyboard navigation, touch swipe gestures, and screen readers.\n */\nexport default function Lightbox(props: LightboxProps) {\n  const messages = useUiMessages();\n  const clampIndex = (value: number, images = props.images): number =>\n    images.length === 0 ? 0 : Math.max(0, Math.min(value, images.length - 1));\n  const [index, setIndex] = createSignal(clampIndex(props.initialIndex ?? 0));\n  let dialogRef!: HTMLDialogElement;\n  let opener: HTMLElement | null = null;\n  let openerRing = true;\n\n  createEffect(\n    (previous: { images: LightboxImage[]; initialIndex: number | undefined }) => {\n      const images = props.images;\n      const initialIndex = props.initialIndex;\n      setIndex((currentIndex) => {\n        if (initialIndex !== previous.initialIndex) return clampIndex(initialIndex ?? 0, images);\n        const previousImage = previous.images[currentIndex];\n        const retained = previousImage ? images.findIndex((image) => image === previousImage || image.src === previousImage.src) : -1;\n        return retained >= 0 ? retained : clampIndex(currentIndex, images);\n      });\n      return { images, initialIndex };\n    },\n    { images: props.images, initialIndex: props.initialIndex },\n  );\n\n  // Touch gesture tracking\n  let touchStartX = 0;\n  let touchStartY = 0;\n  const SWIPE_THRESHOLD = 50;\n\n  const current = () => props.images[index()];\n  const isMultiple = () => props.images.length > 1;\n  const prev = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i - 1 + props.images.length) % props.images.length);\n  };\n  const next = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i + 1) % props.images.length);\n  };\n\n  const close = () => {\n    dialogRef.close();\n    returnFocus(opener, openerRing);\n    props.onClose();\n  };\n\n  // A key belongs to the Lightbox while focus is inside it, or on the page with no other dialog open. A dialog opened\n  // from one of its actions keeps its own keys: Escape closes that dialog, and arrows stay in its fields.\n  const ownsKey = (target: EventTarget | null) =>\n    target instanceof Node &&\n    (dialogRef.contains(target) ||\n      (target === document.body && Array.from(document.querySelectorAll(\"dialog[open]\")).every((dialog) => dialog === dialogRef)));\n\n  // Keyboard navigation\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (!ownsKey(e.target)) return;\n    switch (e.key) {\n      case \"Escape\":\n        // Handled here, so WebKit does not light the returned focus for this key.\n        e.preventDefault();\n        close();\n        break;\n      case \"ArrowLeft\":\n        prev();\n        break;\n      case \"ArrowRight\":\n        next();\n        break;\n    }\n  };\n\n  // Touch handlers for swipe gestures\n  const handleTouchStart = (e: TouchEvent) => {\n    const touch = e.touches[0];\n    if (touch) {\n      touchStartX = touch.clientX;\n      touchStartY = touch.clientY;\n    }\n  };\n\n  const handleTouchEnd = (e: TouchEvent) => {\n    const touch = e.changedTouches[0];\n    if (!touch) return;\n\n    const deltaX = touch.clientX - touchStartX;\n    const deltaY = touch.clientY - touchStartY;\n\n    // Only trigger swipe if horizontal movement is dominant\n    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > SWIPE_THRESHOLD) {\n      if (deltaX > 0) {\n        prev();\n      } else {\n        next();\n      }\n    }\n  };\n\n  // Click on backdrop closes lightbox\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === dialogRef) {\n      close();\n    }\n  };\n\n  // The browser cancels the dialog itself, as on the Android back gesture;\n  // closing here still returns focus and tells the owner.\n  const handleCancel = (e: Event) => {\n    e.preventDefault();\n    close();\n  };\n\n  // Registration and teardown both live in onMount: onCleanup also runs when an\n  // SSR render is disposed, where `document` does not exist.\n  onMount(() => {\n    opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    openerRing = ringOnReturn(opener);\n    // The native dialog would return focus with a ring of the browser's choosing.\n    opener?.blur();\n    dialogRef.showModal();\n    document.addEventListener(\"keydown\", handleKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", handleKeyDown));\n  });\n\n  return (\n    <dialog\n      ref={dialogRef}\n      class=\"k2b-content-lightbox\"\n      onMouseDown={handleBackdropClick}\n      onCancel={handleCancel}\n      onTouchStart={handleTouchStart}\n      onTouchEnd={handleTouchEnd}\n      aria-label={messages().imageLightbox}\n    >\n      {/* Top bar */}\n      <div class=\"k2b-content-lightbox__bar\">\n        <div class=\"k2b-content-lightbox__meta\">\n          <Show when={isMultiple()}>\n            <span class=\"k2b-content-lightbox__counter\" aria-live=\"polite\">\n              {index() + 1} / {props.images.length}\n            </span>\n          </Show>\n          <Show when={current()?.alt}>\n            <div class=\"k2b-content-lightbox__caption\">\n              <div class=\"k2b-content-lightbox__caption-text\">{current()?.alt}</div>\n            </div>\n          </Show>\n        </div>\n\n        <div class=\"k2b-content-lightbox__actions\">\n          <For each={current()?.actions ?? []}>\n            {(action) => (\n              <button type=\"button\" onClick={() => action.onClick()} class=\"k2b-content-lightbox__button\" aria-label={action.label}>\n                <i class={action.icon} aria-hidden=\"true\" />\n                <span class=\"k2b-content-lightbox__button-label\">{action.label}</span>\n              </button>\n            )}\n          </For>\n          <Show when={current()?.downloadUrl}>\n            <a href={current()!.downloadUrl} download=\"\" class=\"k2b-content-lightbox__button\" aria-label={messages().downloadImage}>\n              <i class=\"ti ti-download\" aria-hidden=\"true\" />\n              <span class=\"k2b-content-lightbox__button-label\">{messages().download}</span>\n            </a>\n          </Show>\n          <button type=\"button\" onClick={close} class=\"k2b-content-lightbox__button\" aria-label={messages().closeLightbox}>\n            <i class=\"ti ti-x\" aria-hidden=\"true\" />\n            <span class=\"k2b-content-lightbox__button-label\">{messages().close}</span>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"k2b-content-lightbox__stage\">\n        <Show when={current()}>\n          {(image) => <img src={image().src} alt={image().alt ?? \"\"} class=\"k2b-content-lightbox__image\" draggable={false} />}\n        </Show>\n      </div>\n\n      <Show when={isMultiple()}>\n        <button\n          type=\"button\"\n          onClick={prev}\n          class=\"k2b-content-lightbox__nav\"\n          data-direction=\"previous\"\n          aria-label={messages().previousImage}\n        >\n          <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <button type=\"button\" onClick={next} class=\"k2b-content-lightbox__nav\" data-direction=\"next\" aria-label={messages().nextImage}>\n          <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n\n      <Show when={isMultiple() && props.images.length <= 10}>\n        <div class=\"k2b-content-lightbox__dots\" role=\"group\" aria-label={messages().imageNavigation}>\n          <For each={props.images}>\n            {(_, i) => (\n              <button\n                type=\"button\"\n                onClick={() => setIndex(i())}\n                class=\"k2b-content-lightbox__dot\"\n                aria-current={index() === i() ? \"true\" : undefined}\n                aria-label={messages().goToImage({ index: i() + 1 })}\n              />\n            )}\n          </For>\n        </div>\n      </Show>\n    </dialog>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/Lightbox.tsx"],"sourcesContent":["import { createEffect, createSignal, For, onCleanup, onMount, Show } from \"solid-js\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { useLightboxMessages } from \"./lightbox-messages\";\n\n/** One more thing to do with the shown image, beside Download: a short label, its icon class, and what it does. */\nexport type LightboxAction = {\n  label: string;\n  icon: string;\n  onClick: () => void;\n};\n\nexport type LightboxImage = {\n  src: string;\n  alt?: string;\n  downloadUrl?: string;\n  /** Actions for this image, shown before Download in the same style. */\n  actions?: readonly LightboxAction[];\n};\n\ntype LightboxProps = {\n  images: LightboxImage[];\n  initialIndex?: number;\n  onClose: () => void;\n};\n\n/**\n * Minimal, accessible lightbox using native <dialog>.\n * Supports keyboard navigation, touch swipe gestures, and screen readers.\n */\nexport default function Lightbox(props: LightboxProps) {\n  const messages = useUiMessages();\n  const lightboxMessages = useLightboxMessages();\n  const clampIndex = (value: number, images = props.images): number =>\n    images.length === 0 ? 0 : Math.max(0, Math.min(value, images.length - 1));\n  const [index, setIndex] = createSignal(clampIndex(props.initialIndex ?? 0));\n  let dialogRef!: HTMLDialogElement;\n  let opener: HTMLElement | null = null;\n  let openerRing = true;\n\n  createEffect(\n    (previous: { images: LightboxImage[]; initialIndex: number | undefined }) => {\n      const images = props.images;\n      const initialIndex = props.initialIndex;\n      setIndex((currentIndex) => {\n        if (initialIndex !== previous.initialIndex) return clampIndex(initialIndex ?? 0, images);\n        const previousImage = previous.images[currentIndex];\n        const retained = previousImage ? images.findIndex((image) => image === previousImage || image.src === previousImage.src) : -1;\n        return retained >= 0 ? retained : clampIndex(currentIndex, images);\n      });\n      return { images, initialIndex };\n    },\n    { images: props.images, initialIndex: props.initialIndex },\n  );\n\n  // Touch gesture tracking\n  let touchStartX = 0;\n  let touchStartY = 0;\n  const SWIPE_THRESHOLD = 50;\n\n  const current = () => props.images[index()];\n  const isMultiple = () => props.images.length > 1;\n  const prev = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i - 1 + props.images.length) % props.images.length);\n  };\n  const next = () => {\n    if (!isMultiple()) return;\n    setIndex((i) => (i + 1) % props.images.length);\n  };\n\n  const close = () => {\n    dialogRef.close();\n    returnFocus(opener, openerRing);\n    props.onClose();\n  };\n\n  // A key belongs to the Lightbox while focus is inside it, or on the page with no other dialog open. A dialog opened\n  // from one of its actions keeps its own keys: Escape closes that dialog, and arrows stay in its fields.\n  const ownsKey = (target: EventTarget | null) =>\n    target instanceof Node &&\n    (dialogRef.contains(target) ||\n      (target === document.body && Array.from(document.querySelectorAll(\"dialog[open]\")).every((dialog) => dialog === dialogRef)));\n\n  // Keyboard navigation\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (!ownsKey(e.target)) return;\n    switch (e.key) {\n      case \"Escape\":\n        // Handled here, so WebKit does not light the returned focus for this key.\n        e.preventDefault();\n        close();\n        break;\n      case \"ArrowLeft\":\n        prev();\n        break;\n      case \"ArrowRight\":\n        next();\n        break;\n    }\n  };\n\n  // Touch handlers for swipe gestures\n  const handleTouchStart = (e: TouchEvent) => {\n    const touch = e.touches[0];\n    if (touch) {\n      touchStartX = touch.clientX;\n      touchStartY = touch.clientY;\n    }\n  };\n\n  const handleTouchEnd = (e: TouchEvent) => {\n    const touch = e.changedTouches[0];\n    if (!touch) return;\n\n    const deltaX = touch.clientX - touchStartX;\n    const deltaY = touch.clientY - touchStartY;\n\n    // Only trigger swipe if horizontal movement is dominant\n    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > SWIPE_THRESHOLD) {\n      if (deltaX > 0) {\n        prev();\n      } else {\n        next();\n      }\n    }\n  };\n\n  // Click on backdrop closes lightbox\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === dialogRef) {\n      close();\n    }\n  };\n\n  // The browser cancels the dialog itself, as on the Android back gesture;\n  // closing here still returns focus and tells the owner.\n  const handleCancel = (e: Event) => {\n    e.preventDefault();\n    close();\n  };\n\n  // Registration and teardown both live in onMount: onCleanup also runs when an\n  // SSR render is disposed, where `document` does not exist.\n  onMount(() => {\n    opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    openerRing = ringOnReturn(opener);\n    // The native dialog would return focus with a ring of the browser's choosing.\n    opener?.blur();\n    dialogRef.showModal();\n    document.addEventListener(\"keydown\", handleKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", handleKeyDown));\n  });\n\n  return (\n    <dialog\n      ref={dialogRef}\n      class=\"k2b-content-lightbox\"\n      onMouseDown={handleBackdropClick}\n      onCancel={handleCancel}\n      onTouchStart={handleTouchStart}\n      onTouchEnd={handleTouchEnd}\n      aria-label={lightboxMessages().imageLightbox}\n    >\n      {/* Top bar */}\n      <div class=\"k2b-content-lightbox__bar\">\n        <div class=\"k2b-content-lightbox__meta\">\n          <Show when={isMultiple()}>\n            <span class=\"k2b-content-lightbox__counter\" aria-live=\"polite\">\n              {index() + 1} / {props.images.length}\n            </span>\n          </Show>\n          <Show when={current()?.alt}>\n            <div class=\"k2b-content-lightbox__caption\">\n              <div class=\"k2b-content-lightbox__caption-text\">{current()?.alt}</div>\n            </div>\n          </Show>\n        </div>\n\n        <div class=\"k2b-content-lightbox__actions\">\n          <For each={current()?.actions ?? []}>\n            {(action) => (\n              <button type=\"button\" onClick={() => action.onClick()} class=\"k2b-content-lightbox__button\" aria-label={action.label}>\n                <i class={action.icon} aria-hidden=\"true\" />\n                <span class=\"k2b-content-lightbox__button-label\">{action.label}</span>\n              </button>\n            )}\n          </For>\n          <Show when={current()?.downloadUrl}>\n            <a href={current()!.downloadUrl} download=\"\" class=\"k2b-content-lightbox__button\" aria-label={lightboxMessages().downloadImage}>\n              <i class=\"ti ti-download\" aria-hidden=\"true\" />\n              <span class=\"k2b-content-lightbox__button-label\">{messages().download}</span>\n            </a>\n          </Show>\n          <button type=\"button\" onClick={close} class=\"k2b-content-lightbox__button\" aria-label={lightboxMessages().closeLightbox}>\n            <i class=\"ti ti-x\" aria-hidden=\"true\" />\n            <span class=\"k2b-content-lightbox__button-label\">{messages().close}</span>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"k2b-content-lightbox__stage\">\n        <Show when={current()}>\n          {(image) => <img src={image().src} alt={image().alt ?? \"\"} class=\"k2b-content-lightbox__image\" draggable={false} />}\n        </Show>\n      </div>\n\n      <Show when={isMultiple()}>\n        <button\n          type=\"button\"\n          onClick={prev}\n          class=\"k2b-content-lightbox__nav\"\n          data-direction=\"previous\"\n          aria-label={lightboxMessages().previousImage}\n        >\n          <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={next}\n          class=\"k2b-content-lightbox__nav\"\n          data-direction=\"next\"\n          aria-label={lightboxMessages().nextImage}\n        >\n          <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </Show>\n\n      <Show when={isMultiple() && props.images.length <= 10}>\n        <div class=\"k2b-content-lightbox__dots\" role=\"group\" aria-label={lightboxMessages().imageNavigation}>\n          <For each={props.images}>\n            {(_, i) => (\n              <button\n                type=\"button\"\n                onClick={() => setIndex(i())}\n                class=\"k2b-content-lightbox__dot\"\n                aria-current={index() === i() ? \"true\" : undefined}\n                aria-label={lightboxMessages().goToImage({ index: i() + 1 })}\n              />\n            )}\n          </For>\n        </div>\n      </Show>\n    </dialog>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/LogEntriesTable.js

@@ -12,9 +12,9 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-log-level><i aria-hidden=t
   _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-log-table__time>`);
 import { dates } from "@k2b/stdlib";
 import { Show } from "solid-js";
-import { useUiMessages } from "../intl/messages";
 import Placeholder from "../surfaces/Placeholder";
 import DataTable from "./DataTable";
+import { useLogEntriesMessages } from "./log-entries-messages";
 /**
  * Cloud paints each level with a hardcoded Tailwind palette pair
  * (`text-amber-500 dark:text-amber-400`, …). The package keeps the same
@@ -44,7 +44,7 @@ const levelIcon = {
   }
 };
 export default function LogEntriesTable(props) {
-  const messages = useUiMessages();
+  const logEntriesMessages = useLogEntriesMessages();
   const columns = () => [{
     id: "level",
     header: "Level",
@@ -71,7 +71,7 @@ export default function LogEntriesTable(props) {
       return _$createComponent(Placeholder, {
         surface: "paper",
         get description() {
-          return _$memo(() => props.emptyMessage ?? messages().noLogEntries);
+          return _$memo(() => props.emptyMessage ?? logEntriesMessages().noLogEntries);
         }
       });
     },

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/LogEntriesTable.tsx"],"sourcesContent":["import { dates } from \"@k2b/stdlib\";\nimport { Show } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport DataTable, { type DataTableColumn } from \"./DataTable\";\n\nexport type LogTableEntry = {\n  id: number | string;\n  level: string;\n  source: string;\n  message: string;\n  metadata: Record<string, unknown> | null;\n  createdAt: string;\n};\n\ntype Props = {\n  entries: readonly LogTableEntry[];\n  emptyMessage?: string;\n};\n\n/**\n * Cloud paints each level with a hardcoded Tailwind palette pair\n * (`text-amber-500 dark:text-amber-400`, …). The package keeps the same\n * per-level distinction but routes it through `data-level` so the semantic\n * `--k2b-*` tokens stay the single theming contract in both schemes.\n */\nconst levelIcon: Record<string, { icon: string; level: string; label: string }> = {\n  debug: { icon: \"ti ti-bug\", level: \"debug\", label: \"debug\" },\n  info: { icon: \"ti ti-info-circle\", level: \"info\", label: \"info\" },\n  warn: { icon: \"ti ti-alert-triangle\", level: \"warn\", label: \"warn\" },\n  error: { icon: \"ti ti-alert-circle\", level: \"error\", label: \"error\" },\n};\n\nexport default function LogEntriesTable(props: Props) {\n  const messages = useUiMessages();\n  const columns = (): DataTableColumn<LogTableEntry>[] => [\n    { id: \"level\", header: \"Level\", value: (entry) => entry.level },\n    { id: \"source\", header: `Source (${props.entries.length})`, value: (entry) => entry.source },\n    { id: \"message\", header: \"Message\", value: (entry) => entry.message },\n    { id: \"time\", header: \"Time\", value: (entry) => entry.createdAt, cellClass: \"k2b-log-table__time-cell\" },\n  ];\n\n  return (\n    <Show\n      when={props.entries.length > 0}\n      fallback={<Placeholder surface=\"paper\" description={<>{props.emptyMessage ?? messages().noLogEntries}</>} />}\n    >\n      <DataTable\n        rows={props.entries}\n        columns={columns()}\n        getRowId={(entry) => String(entry.id)}\n        hoverRows\n        class=\"k2b-log-table\"\n        renderCell={({ row, col }) => {\n          if (col.id === \"level\") {\n            const level = levelIcon[row.level] ?? { icon: \"ti ti-circle\", level: \"neutral\", label: row.level || \"unknown\" };\n            return (\n              <span class=\"k2b-log-level\" data-level={level.level}>\n                <i class={`k2b-log-level__icon ${level.icon}`} aria-hidden=\"true\" />\n                <span>{level.label}</span>\n              </span>\n            );\n          }\n          if (col.id === \"source\") return <span class=\"k2b-log-table__source\">{row.source}</span>;\n          if (col.id === \"message\") return <span title={row.message}>{row.message}</span>;\n          if (col.id === \"time\") return <span class=\"k2b-log-table__time\">{dates.formatDateTime(row.createdAt)}</span>;\n          return \"\";\n        }}\n      />\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,KAAK,QAAQ,aAAa;AACnC,SAAS,IAAI,QAAQ,UAAU;AAC/B,SAAS,aAAa,QAAQ,kBAAkB;AAChD,OAAO,WAAW,MAAM,yBAAyB;AACjD,OAAO,SAAS,MAAgC,aAAa;AAgB7D;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAyE,GAAG;EAChF,KAAK,EAAE;IAAE,IAAI,EAAE,WAAW;IAAE,KAAK,EAAE,OAAO;IAAE,KAAK,EAAE;EAAQ,CAAC;EAC5D,IAAI,EAAE;IAAE,IAAI,EAAE,mBAAmB;IAAE,KAAK,EAAE,MAAM;IAAE,KAAK,EAAE;EAAO,CAAC;EACjE,IAAI,EAAE;IAAE,IAAI,EAAE,sBAAsB;IAAE,KAAK,EAAE,MAAM;IAAE,KAAK,EAAE;EAAO,CAAC;EACpE,KAAK,EAAE;IAAE,IAAI,EAAE,oBAAoB;IAAE,KAAK,EAAE,OAAO;IAAE,KAAK,EAAE;EAAQ;AACtE,CAAC;AAED,eAAe,SAAS,eAAe,CAAC,KAAY,EAAE;EACpD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,OAAO,GAAG,MAAwC,CACtD;IAAE,EAAE,EAAE,OAAO;IAAE,MAAM,EAAE,OAAO;IAAE,KAAK,EAAG,KAAK,IAAK,KAAK,CAAC;EAAM,CAAC,EAC/D;IAAE,EAAE,EAAE,QAAQ;IAAE,MAAM,EAAE,WAAW,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG;IAAE,KAAK,EAAG,KAAK,IAAK,KAAK,CAAC;EAAO,CAAC,EAC5F;IAAE,EAAE,EAAE,SAAS;IAAE,MAAM,EAAE,SAAS;IAAE,KAAK,EAAG,KAAK,IAAK,KAAK,CAAC;EAAQ,CAAC,EACrE;IAAE,EAAE,EAAE,MAAM;IAAE,MAAM,EAAE,MAAM;IAAE,KAAK,EAAG,KAAK,IAAK,KAAK,CAAC,SAAS;IAAE,SAAS,EAAE;EAA2B,CAAC,CACzG;EAED,yBACG,IAAI;IAAA,IACH,IAAI;MAAA,OAAE,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;IAAA;IAAA,IAC9B,QAAQ;MAAA,yBAAG,WAAW;QAAC,OAAO;QAAA,IAAS,WAAW;UAAA,oBAAK,KAAK,CAAC,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY;QAAA;MAAA;IAAA;IAAA;MAAA,yBAEnG,SAAS;QAAA,IACR,IAAI;UAAA,OAAE,KAAK,CAAC,OAAO;QAAA;QAAA,IACnB,OAAO;UAAA,OAAE,OAAO,CAAC,CAAC;QAAA;QAClB,QAAQ,EAAG,KAAK,IAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;QACrC,SAAS;QAAA;QAET,UAAU,EAAE,CAAC;UAAE,GAAG;UAAE;QAAI,CAAC,KAAK;UAC5B,IAAI,GAAG,CAAC,EAAE,KAAK,OAAO,EAAE;YACtB,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI;cAAE,IAAI,EAAE,cAAc;cAAE,KAAK,EAAE,SAAS;cAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAI;YAAU,CAAC;YAC/G;cAAA;gBAAA;gBAAA;cAAA,sBAGW,KAAK,CAAC,KAAK;cAAA;gBAAA,UAFoB,KAAK,CAAC,KAAK;kBAAA,OACvC,uBAAuB,KAAK,CAAC,IAAI,EAAE;gBAAA;gBAAA;gBAAA;cAAA;gBAAA;gBAAA;cAAA;cAAA;YAAA;UAInD;UACA,IAAI,GAAG,CAAC,EAAE,KAAK,QAAQ,EAAE;YAAA;YAAA,sBAA4C,GAAG,CAAC,MAAM;YAAA;UAAA;UAC/E,IAAI,GAAG,CAAC,EAAE,KAAK,SAAS,EAAE;YAAA;YAAA,sBAAkC,GAAG,CAAC,OAAO;YAAA,8CAAzB,GAAG,CAAC,OAAO;YAAA;UAAA;UACzD,IAAI,GAAG,CAAC,EAAE,KAAK,MAAM,EAAE;YAAA;YAAA,sBAA0C,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC;YAAA;UAAA;UACpG,OAAO,EAAE;QACX;MAAC;IAAA;EAAA;AAIT","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/LogEntriesTable.tsx"],"sourcesContent":["import { dates } from \"@k2b/stdlib\";\nimport { Show } from \"solid-js\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport DataTable, { type DataTableColumn } from \"./DataTable\";\nimport { useLogEntriesMessages } from \"./log-entries-messages\";\n\nexport type LogTableEntry = {\n  id: number | string;\n  level: string;\n  source: string;\n  message: string;\n  metadata: Record<string, unknown> | null;\n  createdAt: string;\n};\n\ntype Props = {\n  entries: readonly LogTableEntry[];\n  emptyMessage?: string;\n};\n\n/**\n * Cloud paints each level with a hardcoded Tailwind palette pair\n * (`text-amber-500 dark:text-amber-400`, …). The package keeps the same\n * per-level distinction but routes it through `data-level` so the semantic\n * `--k2b-*` tokens stay the single theming contract in both schemes.\n */\nconst levelIcon: Record<string, { icon: string; level: string; label: string }> = {\n  debug: { icon: \"ti ti-bug\", level: \"debug\", label: \"debug\" },\n  info: { icon: \"ti ti-info-circle\", level: \"info\", label: \"info\" },\n  warn: { icon: \"ti ti-alert-triangle\", level: \"warn\", label: \"warn\" },\n  error: { icon: \"ti ti-alert-circle\", level: \"error\", label: \"error\" },\n};\n\nexport default function LogEntriesTable(props: Props) {\n  const logEntriesMessages = useLogEntriesMessages();\n  const columns = (): DataTableColumn<LogTableEntry>[] => [\n    { id: \"level\", header: \"Level\", value: (entry) => entry.level },\n    { id: \"source\", header: `Source (${props.entries.length})`, value: (entry) => entry.source },\n    { id: \"message\", header: \"Message\", value: (entry) => entry.message },\n    { id: \"time\", header: \"Time\", value: (entry) => entry.createdAt, cellClass: \"k2b-log-table__time-cell\" },\n  ];\n\n  return (\n    <Show\n      when={props.entries.length > 0}\n      fallback={<Placeholder surface=\"paper\" description={<>{props.emptyMessage ?? logEntriesMessages().noLogEntries}</>} />}\n    >\n      <DataTable\n        rows={props.entries}\n        columns={columns()}\n        getRowId={(entry) => String(entry.id)}\n        hoverRows\n        class=\"k2b-log-table\"\n        renderCell={({ row, col }) => {\n          if (col.id === \"level\") {\n            const level = levelIcon[row.level] ?? { icon: \"ti ti-circle\", level: \"neutral\", label: row.level || \"unknown\" };\n            return (\n              <span class=\"k2b-log-level\" data-level={level.level}>\n                <i class={`k2b-log-level__icon ${level.icon}`} aria-hidden=\"true\" />\n                <span>{level.label}</span>\n              </span>\n            );\n          }\n          if (col.id === \"source\") return <span class=\"k2b-log-table__source\">{row.source}</span>;\n          if (col.id === \"message\") return <span title={row.message}>{row.message}</span>;\n          if (col.id === \"time\") return <span class=\"k2b-log-table__time\">{dates.formatDateTime(row.createdAt)}</span>;\n          return \"\";\n        }}\n      />\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/MessageRow.js

@@ -72,6 +72,7 @@ import { fileIcons } from "@k2b/stdlib";
 import { createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
 import { Button, IconButton } from "../actions/Button";
 import { copyText } from "../actions/CopyButton";
+import { useChatMessages } from "../chat/chat-messages";
 import { announce } from "../feedback/announce";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
@@ -316,7 +317,7 @@ function AttachmentTarget(props) {
  * Renders the safe Markdown of `MarkdownView` with line breaks kept, absolute links only, and a copy control above
  * every code block, and counts the fewest lines it takes. An edited message that does not collapse ends with the marker.
  */
-const renderMessage = (text, locale, messages, edited) => {
+const renderMessage = (text, locale, messages, chatMessages, edited) => {
   const renderer = createSafeRenderer({
     allowImages: false,
     linkProtocols: LINK_PROTOCOLS,
@@ -344,7 +345,7 @@ const renderMessage = (text, locale, messages, edited) => {
     lines
   };
   // The marker ends the last paragraph, so it takes no line of its own there.
-  const marker = `<span class="k2b-message-row__edited">${escapeHtml(messages.messageEdited)}</span>`;
+  const marker = `<span class="k2b-message-row__edited">${escapeHtml(chatMessages.messageEdited)}</span>`;
   const end = html.trimEnd();
   return {
     html: end.endsWith("</p>") ? `${end.slice(0, -4)} ${marker}</p>` : `${html}<p>${marker}</p>`,
@@ -359,10 +360,11 @@ const renderMessage = (text, locale, messages, edited) => {
  */
 export function MessageRow(props) {
   const messages = useUiMessages();
+  const chatMessages = useChatMessages();
   const locale = useLocale();
   const textId = `k2b-message-${createUniqueId()}`;
   const [expanded, setExpanded] = createSignal(false);
-  const rendered = createMemo(() => renderMessage(props.text, locale(), messages(), Boolean(props.edited)));
+  const rendered = createMemo(() => renderMessage(props.text, locale(), messages(), chatMessages(), Boolean(props.edited)));
   const collapsible = () => rendered().lines > COLLAPSE_LINES;
   const collapsed = () => collapsible() && !expanded();
   const groupStart = () => props.groupStart ?? true;
@@ -431,20 +433,20 @@ export function MessageRow(props) {
       _el$13 = _el$12.nextSibling,
       _el$14 = _el$13.nextSibling,
       [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling);
-    _$insert(_el$0, () => messages().messageReplyTo, _el$11, _co$);
+    _$insert(_el$0, () => chatMessages().messageReplyTo, _el$11, _co$);
     _$insert(_el$12, () => value.author);
     _$insert(_el$9, () => value.text, _el$15, _co$2);
     return _el$9;
   })()];
 
   /** The picture's description, then that it is a video and how long, then how many more the grid hides. */
-  const mediaLabel = (item, more) => [item.alt, item.kind === "video" ? [messages().messageVideo, item.duration].filter(Boolean).join(" ") : "", more > 0 ? messages().messageMoreAttachments({
+  const mediaLabel = (item, more) => [item.alt, item.kind === "video" ? [chatMessages().messageVideo, item.duration].filter(Boolean).join(" ") : "", more > 0 ? chatMessages().messageMoreAttachments({
     count: more
   }) : ""].filter(Boolean).join(", ");
 
   /** A toggle button, or with no `onToggleReaction` a labelled image that also says whether the reader reacted. */
   const reactionChip = (key, reaction) => {
-    const label = own => messages().messageReaction({
+    const label = own => chatMessages().messageReaction({
       emoji: reaction().emoji,
       count: reaction().count,
       names: reaction().label,
@@ -684,7 +686,7 @@ export function MessageRow(props) {
         var _el$34 = _$getNextElement(_tmpl$17),
           _el$35 = _el$34.firstChild,
           _el$36 = _el$35.nextSibling;
-        _$insert(_el$36, () => messages().messageForwarded);
+        _$insert(_el$36, () => chatMessages().messageForwarded);
         return _el$34;
       }
     }), _el$61, _co$9);
@@ -728,7 +730,7 @@ export function MessageRow(props) {
                 _el$101 = _el$100.firstChild,
                 _el$102 = _el$101.nextSibling,
                 [_el$103, _co$22] = _$getNextMarker(_el$102.nextSibling);
-              _$insert(_el$100, () => messages().messageDeleted, _el$103, _co$22);
+              _$insert(_el$100, () => chatMessages().messageDeleted, _el$103, _co$22);
               return _el$100;
             })();
           },
@@ -780,7 +782,7 @@ export function MessageRow(props) {
                       "aria-controls": textId,
                       onClick: () => setExpanded(value => !value),
                       get children() {
-                        return _$memo(() => !!expanded())() ? messages().messageShowLess : messages().messageShowMore;
+                        return _$memo(() => !!expanded())() ? chatMessages().messageShowLess : chatMessages().messageShowMore;
                       }
                     }), _el$42, _co$4);
                     _$insert(_el$39, _$createComponent(Show, {
@@ -789,7 +791,7 @@ export function MessageRow(props) {
                       },
                       get children() {
                         var _el$40 = _$getNextElement(_tmpl$19);
-                        _$insert(_el$40, () => messages().messageEdited);
+                        _$insert(_el$40, () => chatMessages().messageEdited);
                         return _el$40;
                       }
                     }), _el$44, _co$5);
@@ -821,7 +823,7 @@ export function MessageRow(props) {
         var _el$45 = _$getNextElement(_tmpl$22),
           _el$46 = _el$45.firstChild,
           _el$47 = _el$46.nextSibling;
-        _$insert(_el$47, () => messages().messageEdited);
+        _$insert(_el$47, () => chatMessages().messageEdited);
         return _el$45;
       }
     }), _el$67, _co$10);
@@ -838,7 +840,7 @@ export function MessageRow(props) {
           children: (item, index) => mediaItem(item, index)
         }));
         _$effect(_p$ => {
-          var _v$25 = messages().attachments,
+          var _v$25 = chatMessages().attachments,
             _v$26 = Math.min(media().length, MEDIA_SHOWN),
             _v$27 = media().length === 1 ? {
               width: mediaWidth(media()[0])
@@ -961,7 +963,7 @@ export function MessageRow(props) {
             return _el$113;
           }
         }), _el$116, _co$24);
-        _$insert(_el$114, () => messages().messageReplies({
+        _$insert(_el$114, () => chatMessages().messageReplies({
           count: thread().count
         }));
         _$insert(_el$112, _$createComponent(Show, {
@@ -970,7 +972,7 @@ export function MessageRow(props) {
           },
           children: time => (() => {
             var _el$119 = _$getNextElement(_tmpl$41);
-            _$insert(_el$119, () => messages().messageLastReply({
+            _$insert(_el$119, () => chatMessages().messageLastReply({
               time: time()
             }));
             _$effect(() => _$setAttribute(_el$119, "datetime", dateTimeOf(thread().lastReplyDateTime)));
@@ -1034,7 +1036,7 @@ export function MessageRow(props) {
               },
               children: add => _$createComponent(IconButton, {
                 get label() {
-                  return messages().messageAddReaction;
+                  return chatMessages().messageAddReaction;
                 },
                 size: "xs",
                 "class": "k2b-message-row__react",
@@ -1045,7 +1047,7 @@ export function MessageRow(props) {
               })
             }), _el$124, _co$27);
             _$effect(_p$ => {
-              var _v$33 = messages().messageReactions,
+              var _v$33 = chatMessages().messageReactions,
                 _v$34 = list().length === 0 ? "" : undefined;
               _v$33 !== _p$.e && _$setAttribute(_el$120, "aria-label", _p$.e = _v$33);
               _v$34 !== _p$.t && _$setAttribute(_el$120, "data-empty", _p$.t = _v$34);
@@ -1075,7 +1077,7 @@ export function MessageRow(props) {
                   get children() {
                     return [_$getNextElement(_tmpl$44), (() => {
                       var _el$127 = _$getNextElement(_tmpl$);
-                      _$insert(_el$127, () => messages().sending);
+                      _$insert(_el$127, () => chatMessages().sending);
                       return _el$127;
                     })()];
                   }
@@ -1086,7 +1088,7 @@ export function MessageRow(props) {
                   get children() {
                     return [_$getNextElement(_tmpl$45), (() => {
                       var _el$129 = _$getNextElement(_tmpl$);
-                      _$insert(_el$129, () => messages().messageNotSent);
+                      _$insert(_el$129, () => chatMessages().messageNotSent);
                       return _el$129;
                     })(), _$createComponent(Show, {
                       get when() {
@@ -1097,7 +1099,7 @@ export function MessageRow(props) {
                         size: "xs",
                         onClick: () => retry()(),
                         get children() {
-                          return messages().messageRetry;
+                          return chatMessages().messageRetry;
                         }
                       })
                     })];
@@ -1119,7 +1121,7 @@ export function MessageRow(props) {
                           get children() {
                             return [_$getNextElement(_tmpl$46), (() => {
                               var _el$131 = _$getNextElement(_tmpl$47);
-                              _$insert(_el$131, () => messages().messageSent);
+                              _$insert(_el$131, () => chatMessages().messageSent);
                               return _el$131;
                             })()];
                           }
@@ -1147,7 +1149,7 @@ export function MessageRow(props) {
                   size: "xs",
                   onClick: () => stop()(),
                   get children() {
-                    return messages().messageStop;
+                    return chatMessages().messageStop;
                   }
                 })
               })]
@@ -1184,7 +1186,7 @@ export function MessageRow(props) {
             }
           })
         }));
-        _$effect(() => _$setAttribute(_el$80, "aria-label", messages().messageActions));
+        _$effect(() => _$setAttribute(_el$80, "aria-label", chatMessages().messageActions));
         return _el$80;
       }
     }), _el$84, _co$18);