@k2b/ui 0.21.0 → 0.22.0

package/dist/ssr/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":";;;;;;;;;;;;;;;AAAA,SAAS,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,QAAQ,UAAU;AACpF,SAAS,WAAW,EAAE,YAAY,QAAQ,0BAA0B;AACpE,SAAS,aAAa,QAAQ,kBAAkB;;AAEhD;;AAqBA;AACA;AACA;AACA;AACA,eAAe,SAAS,QAAQ,CAAC,KAAoB,EAAE;EACrD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,KACtD,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;EAC3E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;EAC3E,IAAI,SAA6B;EACjC,IAAI,MAA0B,GAAG,IAAI;EACrC,IAAI,UAAU,GAAG,IAAI;EAErB,YAAY,CACT,QAAuE,IAAK;IAC3E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;IAC3B,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY;IACvC,QAAQ,CAAE,YAAY,IAAK;MACzB,IAAI,YAAY,KAAK,QAAQ,CAAC,YAAY,EAAE,OAAO,UAAU,CAAC,YAAY,IAAI,CAAC,EAAE,MAAM,CAAC;MACxF,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC;MACnD,MAAM,QAAQ,GAAG,aAAa,GAAG,MAAM,CAAC,SAAS,CAAE,KAAK,IAAK,KAAK,KAAK,aAAa,IAAI,KAAK,CAAC,GAAG,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;MAC7H,OAAO,QAAQ,IAAI,CAAC,GAAG,QAAQ,GAAG,UAAU,CAAC,YAAY,EAAE,MAAM,CAAC;IACpE,CAAC,CAAC;IACF,OAAO;MAAE,MAAM;MAAE;IAAa,CAAC;EACjC,CAAC,EACD;IAAE,MAAM,EAAE,KAAK,CAAC,MAAM;IAAE,YAAY,EAAE,KAAK,CAAC;EAAa,CAC3D,CAAC;;EAED;EACA,IAAI,WAAW,GAAG,CAAC;EACnB,IAAI,WAAW,GAAG,CAAC;EACnB,MAAM,eAAe,GAAG,EAAE;EAE1B,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;EAC3C,MAAM,UAAU,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;EAChD,MAAM,IAAI,GAAG,MAAM;IACjB,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE;IACnB,QAAQ,CAAE,CAAC,IAAK,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;EACtE,CAAC;EACD,MAAM,IAAI,GAAG,MAAM;IACjB,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE;IACnB,QAAQ,CAAE,CAAC,IAAK,CAAC,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;EAChD,CAAC;EAED,MAAM,KAAK,GAAG,MAAM;IAClB,SAAS,CAAC,KAAK,CAAC,CAAC;IACjB,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC;IAC/B,KAAK,CAAC,OAAO,CAAC,CAAC;EACjB,CAAC;;EAED;EACA;EACA,MAAM,OAAO,GAAI,MAA0B,IACzC,MAAM,YAAY,IAAI,KACrB,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,IACxB,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAE,MAAM,IAAK,MAAM,KAAK,SAAS,CAAE,CAAC;;EAEhI;EACA,MAAM,aAAa,GAAI,CAAgB,IAAK;IAC1C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;IACxB,QAAQ,CAAC,CAAC,GAAG;MACX,KAAK,QAAQ;QACX;QACA,CAAC,CAAC,cAAc,CAAC,CAAC;QAClB,KAAK,CAAC,CAAC;QACP;MACF,KAAK,WAAW;QACd,IAAI,CAAC,CAAC;QACN;MACF,KAAK,YAAY;QACf,IAAI,CAAC,CAAC;QACN;IACJ;EACF,CAAC;;EAED;EACA,MAAM,gBAAgB,GAAI,CAAa,IAAK;IAC1C,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1B,IAAI,KAAK,EAAE;MACT,WAAW,GAAG,KAAK,CAAC,OAAO;MAC3B,WAAW,GAAG,KAAK,CAAC,OAAO;IAC7B;EACF,CAAC;EAED,MAAM,cAAc,GAAI,CAAa,IAAK;IACxC,MAAM,KAAK,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;IACjC,IAAI,CAAC,KAAK,EAAE;IAEZ,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,WAAW;IAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,WAAW;;IAE1C;IACA,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,eAAe,EAAE;MAC7E,IAAI,MAAM,GAAG,CAAC,EAAE;QACd,IAAI,CAAC,CAAC;MACR,CAAC,MAAM;QACL,IAAI,CAAC,CAAC;MACR;IACF;EACF,CAAC;;EAED;EACA,MAAM,mBAAmB,GAAI,CAAa,IAAK;IAC7C,IAAI,CAAC,CAAC,MAAM,KAAK,SAAS,EAAE;MAC1B,KAAK,CAAC,CAAC;IACT;EACF,CAAC;;EAED;EACA;EACA,MAAM,YAAY,GAAI,CAAQ,IAAK;IACjC,CAAC,CAAC,cAAc,CAAC,CAAC;IAClB,KAAK,CAAC,CAAC;EACT,CAAC;;EAED;EACA;EACA,OAAO,CAAC,MAAM;IACZ,MAAM,GAAG,QAAQ,CAAC,aAAa,YAAY,WAAW,GAAG,QAAQ,CAAC,aAAa,GAAG,IAAI;IACtF,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC;IACjC;IACA,MAAM,EAAE,IAAI,CAAC,CAAC;IACd,SAAS,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;IACnD,SAAS,CAAC,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;EACzE,CAAC,CAAC;EAEF,4DAQgB,QAAQ,CAAC,CAAC,CAAC,aAAa,4CAK/B,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,UAAU,CAAC,CAAC;IAAA;IAAA;MAAA,qBAEnB,cAAK,CAAC,CAAC,IAAG,CAAC,WAAK,KAAK,CAAC,MAAM,CAAC,MAAM;IAAA;EAAA,gCAGvC,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,OAAO,CAAC,CAAC,EAAE,GAAG;IAAA;IAAA;MAAA,+BAE2B,OAAO,CAAC,CAAC,EAAE,GAAG;IAAA;EAAA,gCAMlE,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,OAAO,CAAC,CAAC,EAAE,OAAO,IAAI,EAAE;IAAA;IAAA,UAC/B,MAAM,yDACkG,MAAM,CAAC,KAAK,kDACxG,MAAM,CAAC,IAAI,0BAC6B,MAAM,CAAC,KAAK;EAEjE,gCAEF,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,OAAO,CAAC,CAAC,EAAE,WAAW;IAAA;IAAA;MAAA,sDACvB,OAAO,CAAC,CAAC,CAAE,WAAW,uDAA+D,QAAQ,CAAC,CAAC,CAAC,aAAa,0BAElE,QAAQ,CAAC,CAAC,CAAC,QAAQ;IAAA;EAAA,2CAGc,QAAQ,CAAC,CAAC,CAAC,aAAa,0BAE3D,QAAQ,CAAC,CAAC,CAAC,KAAK,8BAMrE,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,OAAO,CAAC,CAAC;IAAA;IAAA,UACjB,KAAK,kDAAe,KAAK,CAAC,CAAC,CAAC,GAAG,iDAAO,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE;EAA0D,gCAItH,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,UAAU,CAAC,CAAC;IAAA;IAAA;MAAA,6DAMR,QAAQ,CAAC,CAAC,CAAC,aAAa,uEAImE,QAAQ,CAAC,CAAC,CAAC,SAAS;IAAA;EAAA,gCAK9H,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,yBAAU,CAAC,CAAC,OAAI,KAAK,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE;IAAA;IAAA;MAAA,4DACc,QAAQ,CAAC,CAAC,CAAC,eAAe,4CACxF,GAAG;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM;QAAA;QAAA,UACpB,CAAC,CAAC,EAAE,CAAC,mDAKY,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,YAAG,SAAS,wDACtC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;UAAE,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG;QAAE,CAAC,CAAC;MAEvD;IAAA;EAAA;AAMb","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/ssr/content/LogEntriesTable.js

@@ -8,9 +8,9 @@ var _tmpl$ = ["<span class=\"k2b-log-level\"", "><i class=\"", "\" aria-hidden=\
   _tmpl$4 = ["<span class=\"k2b-log-table__time\">", "</span>"];
 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
@@ -40,7 +40,7 @@ const levelIcon = {
   }
 };
 export default function LogEntriesTable(props) {
-  const messages = useUiMessages();
+  const logEntriesMessages = useLogEntriesMessages();
   const columns = () => [{
     id: "level",
     header: "Level",
@@ -67,7 +67,7 @@ export default function LogEntriesTable(props) {
       return _$createComponent(Placeholder, {
         surface: "paper",
         get description() {
-          return props.emptyMessage ?? messages().noLogEntries;
+          return props.emptyMessage ?? logEntriesMessages().noLogEntries;
         }
       });
     },

package/dist/ssr/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":"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","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/ssr/content/MessageRow.js

@@ -65,6 +65,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";
@@ -239,7 +240,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,
@@ -267,7 +268,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>`,
@@ -282,10 +283,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;
@@ -333,16 +335,16 @@ export function MessageRow(props) {
       return _$ssr(_tmpl$6, _$escape(props.badge));
     }
   }), _$ssr(_tmpl$7, _$ssrAttribute("datetime", _$escape(dateTimeOf(props.dateTime), true), false), _$escape(props.time))];
-  const quote = value => [_$ssr(_tmpl$8), _$ssr(_tmpl$9, _$escape(messages().messageReplyTo), _$escape(value.author), _$escape(value.text))];
+  const quote = value => [_$ssr(_tmpl$8), _$ssr(_tmpl$9, _$escape(chatMessages().messageReplyTo), _$escape(value.author), _$escape(value.text))];
 
   /** 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,
@@ -452,7 +454,7 @@ export function MessageRow(props) {
       return _$memo(() => !!content())() && props.forwarded;
     },
     get children() {
-      return _$ssr(_tmpl$17, _$escape(messages().messageForwarded));
+      return _$ssr(_tmpl$17, _$escape(chatMessages().messageForwarded));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -477,7 +479,7 @@ export function MessageRow(props) {
           return !props.deleted;
         },
         get fallback() {
-          return _$ssr(_tmpl$34, _$escape(messages().messageDeleted));
+          return _$ssr(_tmpl$34, _$escape(chatMessages().messageDeleted));
         },
         get children() {
           return _$createComponent(Show, {
@@ -503,14 +505,14 @@ export function MessageRow(props) {
                     "aria-controls": textId,
                     onClick: () => setExpanded(value => !value),
                     get children() {
-                      return expanded() ? messages().messageShowLess : messages().messageShowMore;
+                      return expanded() ? chatMessages().messageShowLess : chatMessages().messageShowMore;
                     }
                   })), _$escape(_$createComponent(Show, {
                     get when() {
                       return props.edited;
                     },
                     get children() {
-                      return _$ssr(_tmpl$19, _$escape(messages().messageEdited));
+                      return _$ssr(_tmpl$19, _$escape(chatMessages().messageEdited));
                     }
                   })));
                 }
@@ -525,14 +527,14 @@ export function MessageRow(props) {
       return _$memo(() => !!(content() && props.edited))() && !hasBubble();
     },
     get children() {
-      return _$ssr(_tmpl$22, _$escape(messages().messageEdited));
+      return _$ssr(_tmpl$22, _$escape(chatMessages().messageEdited));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return media().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$23, _$ssrAttribute("aria-label", _$escape(messages().attachments, true), false) + _$ssrAttribute("data-count", _$escape(Math.min(media().length, MEDIA_SHOWN), true), false), _$ssrStyle(media().length === 1 ? {
+      return _$ssr(_tmpl$23, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false) + _$ssrAttribute("data-count", _$escape(Math.min(media().length, MEDIA_SHOWN), true), false), _$ssrStyle(media().length === 1 ? {
         width: mediaWidth(media()[0])
       } : undefined), _$escape(_$createComponent(For, {
         get each() {
@@ -612,13 +614,13 @@ export function MessageRow(props) {
           })
         })));
       }
-    })), _$escape(messages().messageReplies({
+    })), _$escape(chatMessages().messageReplies({
       count: thread().count
     })), _$escape(_$createComponent(Show, {
       get when() {
         return thread().lastReply;
       },
-      children: time => _$ssr(_tmpl$41, _$ssrAttribute("datetime", _$escape(dateTimeOf(thread().lastReplyDateTime), true), false), _$escape(messages().messageLastReply({
+      children: time => _$ssr(_tmpl$41, _$ssrAttribute("datetime", _$escape(dateTimeOf(thread().lastReplyDateTime), true), false), _$escape(chatMessages().messageLastReply({
         time: time()
       })))
     })))
@@ -631,7 +633,7 @@ export function MessageRow(props) {
         get when() {
           return reactions();
         },
-        children: list => _$ssr(_tmpl$42, _$ssrAttribute("aria-label", _$escape(messages().messageReactions, true), false) + _$ssrAttribute("data-empty", list().length === 0 ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        children: list => _$ssr(_tmpl$42, _$ssrAttribute("aria-label", _$escape(chatMessages().messageReactions, true), false) + _$ssrAttribute("data-empty", list().length === 0 ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
           get when() {
             return list().length > 0;
           },
@@ -663,7 +665,7 @@ export function MessageRow(props) {
           },
           children: add => _$createComponent(IconButton, {
             get label() {
-              return messages().messageAddReaction;
+              return chatMessages().messageAddReaction;
             },
             size: "xs",
             "class": "k2b-message-row__react",
@@ -688,14 +690,14 @@ export function MessageRow(props) {
                   return props.status === "pending";
                 },
                 get children() {
-                  return [_$ssr(_tmpl$44), _$ssr(_tmpl$45, _$escape(messages().sending))];
+                  return [_$ssr(_tmpl$44), _$ssr(_tmpl$45, _$escape(chatMessages().sending))];
                 }
               }), _$createComponent(Show, {
                 get when() {
                   return props.status === "failed";
                 },
                 get children() {
-                  return [_$ssr(_tmpl$46), _$ssr(_tmpl$45, _$escape(messages().messageNotSent)), _$createComponent(Show, {
+                  return [_$ssr(_tmpl$46), _$ssr(_tmpl$45, _$escape(chatMessages().messageNotSent)), _$createComponent(Show, {
                     get when() {
                       return props.onRetry;
                     },
@@ -704,7 +706,7 @@ export function MessageRow(props) {
                       size: "xs",
                       onClick: () => retry()(),
                       get children() {
-                        return messages().messageRetry;
+                        return chatMessages().messageRetry;
                       }
                     })
                   })];
@@ -724,7 +726,7 @@ export function MessageRow(props) {
                           return props.status === "sent";
                         },
                         get children() {
-                          return [_$ssr(_tmpl$47), _$ssr(_tmpl$48, _$escape(messages().messageSent))];
+                          return [_$ssr(_tmpl$47), _$ssr(_tmpl$48, _$escape(chatMessages().messageSent))];
                         }
                       });
                     },
@@ -742,7 +744,7 @@ export function MessageRow(props) {
                 size: "xs",
                 onClick: () => stop()(),
                 get children() {
-                  return messages().messageStop;
+                  return chatMessages().messageStop;
                 }
               })
             })]
@@ -755,7 +757,7 @@ export function MessageRow(props) {
       return (props.actions?.length ?? 0) > 0;
     },
     get children() {
-      return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(messages().messageActions, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(chatMessages().messageActions, true), false), _$escape(_$createComponent(For, {
         get each() {
           return props.actions;
         },