dsh-side-chat-plus 0.3.2 → 0.3.4

package/src/client/attachments/ImageLightbox.tsx

@@ -1,58 +1,58 @@
-import { useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { IconCloseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
-import css from './ImageLightbox.module.css'
-
-/** Preview strings the owner resolves from its own locale namespace. */
-export interface ImageLightboxLabels {
-  /** Accessible name of the preview dialog. */
-  dialog: string
-  /** Accessible label of the close control. */
-  close: string
-}
-
-/**
- * Document-level original-image preview opened by clicking a thumbnail.
- * Closes on Escape, backdrop press, or the close control, and restores focus
- * to the opener on unmount. Rendered through a body portal: an opener inside
- * a transformed or filtered ancestor would otherwise trap the fixed backdrop
- * in that ancestor's box instead of covering the viewport.
- */
-export function ImageLightbox({ src, alt, labels, onClose }: {
-  src: string
-  alt: string
-  labels: ImageLightboxLabels
-  onClose: () => void
-}) {
-  const closeRef = useRef<HTMLButtonElement | null>(null)
-  const restoreRef = useRef<HTMLElement | null>(null)
-
-  useEffect(() => {
-    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
-    closeRef.current?.focus()
-    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
-      if (event.key === 'Escape') onClose()
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => {
-      window.removeEventListener('keydown', onKeyDown)
-      restoreRef.current?.focus()
-    }
-  }, [onClose])
-
-  return createPortal(
-    <div
-      className={css.backdrop}
-      role="dialog"
-      aria-modal="true"
-      aria-label={labels.dialog}
-    >
-      <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
-      <img className={css.image} src={src} alt={alt} />
-      <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
-        <IconCloseOutline16 size={16} />
-      </button>
-    </div>,
-    document.body,
-  )
-}
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { IconCloseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './ImageLightbox.module.css'
+
+/** Preview strings the owner resolves from its own locale namespace. */
+export interface ImageLightboxLabels {
+  /** Accessible name of the preview dialog. */
+  dialog: string
+  /** Accessible label of the close control. */
+  close: string
+}
+
+/**
+ * Document-level original-image preview opened by clicking a thumbnail.
+ * Closes on Escape, backdrop press, or the close control, and restores focus
+ * to the opener on unmount. Rendered through a body portal: an opener inside
+ * a transformed or filtered ancestor would otherwise trap the fixed backdrop
+ * in that ancestor's box instead of covering the viewport.
+ */
+export function ImageLightbox({ src, alt, labels, onClose }: {
+  src: string
+  alt: string
+  labels: ImageLightboxLabels
+  onClose: () => void
+}) {
+  const closeRef = useRef<HTMLButtonElement | null>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    closeRef.current?.focus()
+    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      restoreRef.current?.focus()
+    }
+  }, [onClose])
+
+  return createPortal(
+    <div
+      className={css.backdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-label={labels.dialog}
+    >
+      <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
+      <img className={css.image} src={src} alt={alt} />
+      <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
+        <IconCloseOutline16 size={16} />
+      </button>
+    </div>,
+    document.body,
+  )
+}

package/src/client/attachments/MessageImage.module.css

@@ -1,61 +1,61 @@
-.gallery {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  max-width: 100%;
-}
-
-.gallery[data-align='start'] {
-  justify-content: flex-start;
-}
-
-.gallery[data-align='end'] {
-  justify-content: flex-end;
-}
-
-.frame {
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: 8px;
-  background: none;
-  cursor: pointer;
-}
-
-.frame[data-variant='tile'] {
-  width: 64px;
-  height: 64px;
-}
-
-.frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-width: 64px;
-  min-height: 64px;
-  font-size: 12px;
-  color: var(--dsw-color-text-secondary, #646a73);
-}
-
-.error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 64px;
-  min-height: 64px;
-  padding: 0 8px;
-  border: 1px dashed var(--dsw-color-border, rgba(0, 0, 0, 0.16));
-  border-radius: 8px;
-  background: none;
-  font-size: 12px;
-  color: var(--dsw-color-text-secondary, #646a73);
-  cursor: pointer;
-}
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 100%;
+}
+
+.gallery[data-align='start'] {
+  justify-content: flex-start;
+}
+
+.gallery[data-align='end'] {
+  justify-content: flex-end;
+}
+
+.frame {
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+}
+
+.frame[data-variant='tile'] {
+  width: 64px;
+  height: 64px;
+}
+
+.frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 64px;
+  min-height: 64px;
+  font-size: 12px;
+  color: var(--dsw-color-text-secondary, #646a73);
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 64px;
+  min-height: 64px;
+  padding: 0 8px;
+  border: 1px dashed var(--dsw-color-border, rgba(0, 0, 0, 0.16));
+  border-radius: 8px;
+  background: none;
+  font-size: 12px;
+  color: var(--dsw-color-text-secondary, #646a73);
+  cursor: pointer;
+}

package/src/client/attachments/MessageImage.tsx

@@ -1,120 +1,120 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import type { SidechatImageRef } from '../api.ts'
-import { ImageLightbox } from './ImageLightbox.tsx'
-import type { ImageLightboxLabels } from './ImageLightbox.tsx'
-import css from './MessageImage.module.css'
-
-/** Loads one durable image's bytes into a displayable URL. */
-export type ImageLoader = (ref: SidechatImageRef) => Promise<string>
-
-/** Message-image strings the owner resolves from its own locale namespace. */
-export interface MessageImageLabels {
-  /** Fallback display name for an unnamed image. */
-  image: string
-  /** Thumbnail tooltip inviting the original-image preview. */
-  open: string
-  /** Accessible thumbnail label; receives the image's display name. */
-  openNamed: (label: string) => string
-  /** Loading placeholder shown until bytes resolve. */
-  loading: string
-  /** Retry-control label shown when the load fails. */
-  loadFailed: string
-  /** Lightbox strings forwarded to the opened preview. */
-  lightbox: ImageLightboxLabels
-}
-
-/** Display box for a lone image: long edge 240px with the rendered aspect
- * ratio clamped to [0.25, 4] — the overflow is cropped by
- * `object-fit: cover` — and never upscaled past the image's natural size. The
- * crop anchor keeps the top of very tall images and the left of very wide
- * ones, where the informative content usually starts. */
-function singleFit(
-  dimensions: { readonly width: number; readonly height: number },
-): { width: number; height: number; objectPosition: string } {
-  const natural = dimensions.width / dimensions.height
-  const ratio = Math.min(4, Math.max(0.25, natural))
-  const box = ratio >= 1 ? { width: 240, height: 240 / ratio } : { width: 240 * ratio, height: 240 }
-  const scale = Math.min(1, dimensions.width / box.width, dimensions.height / box.height)
-  return {
-    width: Math.max(1, Math.round(box.width * scale)),
-    height: Math.max(1, Math.round(box.height * scale)),
-    objectPosition: natural < 0.25 ? 'center top' : natural > 4 ? 'left center' : 'center',
-  }
-}
-
-/**
- * Compact history renderer with retryable loading and click-to-open original
- * preview. A lone image renders at its `singleFit` size; an image among
- * several renders as a fixed 64px square tile.
- */
-export function MessageImage({ image, load, variant, labels }: {
-  image: SidechatImageRef
-  load: ImageLoader
-  variant: 'single' | 'tile'
-  labels: MessageImageLabels
-}) {
-  const [loaded, setLoaded] = useState<string | null>(null)
-  const [error, setError] = useState(false)
-  const [open, setOpen] = useState(false)
-  // Retry re-arms the one load effect below, so every attempt — first load or
-  // retry — runs under the same liveness guard and the same reset.
-  const [attempt, setAttempt] = useState(0)
-  const request = useCallback(() => { setAttempt(a => a + 1) }, [])
-  const close = useCallback(() => { setOpen(false) }, [])
-  const label = image.name === undefined || image.name === '' ? labels.image : image.name
-  const fit = useMemo(() => (variant === 'single' ? singleFit(image) : undefined), [image, variant])
-
-  useEffect(() => {
-    let live = true
-    setError(false)
-    setLoaded(null)
-    void load(image).then((url) => { if (live) setLoaded(url) }).catch(() => { if (live) setError(true) })
-    return () => { live = false }
-  }, [image, load, attempt])
-
-  if (error) return <button type="button" className={css.error} data-variant={variant} onClick={request}>{labels.loadFailed}</button>
-  const src = loaded
-  return (
-    <>
-      <button
-        type="button"
-        className={css.frame}
-        data-variant={variant}
-        style={fit === undefined ? undefined : { width: fit.width, height: fit.height }}
-        title={labels.open}
-        aria-label={labels.openNamed(label)}
-        onClick={() => { if (src !== null) setOpen(true) }}
-      >
-        {src === null
-          ? <span className={css.loading}>{labels.loading}</span>
-          : <img src={src} alt={label} style={fit === undefined ? undefined : { objectPosition: fit.objectPosition }} />}
-      </button>
-      {open && src !== null && <ImageLightbox src={src} alt={label} labels={labels.lightbox} onClose={close} />}
-    </>
-  )
-}
-
-/** Wrapping image group: a lone image renders large, several render as 64px
- * square tiles. */
-export function ImageGallery({ images, load, align, labels }: {
-  images: readonly SidechatImageRef[]
-  load: ImageLoader
-  align: 'start' | 'end'
-  labels: MessageImageLabels
-}) {
-  if (images.length === 0) return null
-  const variant = images.length === 1 ? 'single' : 'tile'
-  return (
-    <div className={css.gallery} data-align={align}>
-      {images.map((image, index) => (
-        <MessageImage
-          key={`${image.attachmentId}:${index}`}
-          image={image}
-          load={load}
-          variant={variant}
-          labels={labels}
-        />
-      ))}
-    </div>
-  )
-}
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { SidechatImageRef } from '../api.ts'
+import { ImageLightbox } from './ImageLightbox.tsx'
+import type { ImageLightboxLabels } from './ImageLightbox.tsx'
+import css from './MessageImage.module.css'
+
+/** Loads one durable image's bytes into a displayable URL. */
+export type ImageLoader = (ref: SidechatImageRef) => Promise<string>
+
+/** Message-image strings the owner resolves from its own locale namespace. */
+export interface MessageImageLabels {
+  /** Fallback display name for an unnamed image. */
+  image: string
+  /** Thumbnail tooltip inviting the original-image preview. */
+  open: string
+  /** Accessible thumbnail label; receives the image's display name. */
+  openNamed: (label: string) => string
+  /** Loading placeholder shown until bytes resolve. */
+  loading: string
+  /** Retry-control label shown when the load fails. */
+  loadFailed: string
+  /** Lightbox strings forwarded to the opened preview. */
+  lightbox: ImageLightboxLabels
+}
+
+/** Display box for a lone image: long edge 240px with the rendered aspect
+ * ratio clamped to [0.25, 4] — the overflow is cropped by
+ * `object-fit: cover` — and never upscaled past the image's natural size. The
+ * crop anchor keeps the top of very tall images and the left of very wide
+ * ones, where the informative content usually starts. */
+function singleFit(
+  dimensions: { readonly width: number; readonly height: number },
+): { width: number; height: number; objectPosition: string } {
+  const natural = dimensions.width / dimensions.height
+  const ratio = Math.min(4, Math.max(0.25, natural))
+  const box = ratio >= 1 ? { width: 240, height: 240 / ratio } : { width: 240 * ratio, height: 240 }
+  const scale = Math.min(1, dimensions.width / box.width, dimensions.height / box.height)
+  return {
+    width: Math.max(1, Math.round(box.width * scale)),
+    height: Math.max(1, Math.round(box.height * scale)),
+    objectPosition: natural < 0.25 ? 'center top' : natural > 4 ? 'left center' : 'center',
+  }
+}
+
+/**
+ * Compact history renderer with retryable loading and click-to-open original
+ * preview. A lone image renders at its `singleFit` size; an image among
+ * several renders as a fixed 64px square tile.
+ */
+export function MessageImage({ image, load, variant, labels }: {
+  image: SidechatImageRef
+  load: ImageLoader
+  variant: 'single' | 'tile'
+  labels: MessageImageLabels
+}) {
+  const [loaded, setLoaded] = useState<string | null>(null)
+  const [error, setError] = useState(false)
+  const [open, setOpen] = useState(false)
+  // Retry re-arms the one load effect below, so every attempt — first load or
+  // retry — runs under the same liveness guard and the same reset.
+  const [attempt, setAttempt] = useState(0)
+  const request = useCallback(() => { setAttempt(a => a + 1) }, [])
+  const close = useCallback(() => { setOpen(false) }, [])
+  const label = image.name === undefined || image.name === '' ? labels.image : image.name
+  const fit = useMemo(() => (variant === 'single' ? singleFit(image) : undefined), [image, variant])
+
+  useEffect(() => {
+    let live = true
+    setError(false)
+    setLoaded(null)
+    void load(image).then((url) => { if (live) setLoaded(url) }).catch(() => { if (live) setError(true) })
+    return () => { live = false }
+  }, [image, load, attempt])
+
+  if (error) return <button type="button" className={css.error} data-variant={variant} onClick={request}>{labels.loadFailed}</button>
+  const src = loaded
+  return (
+    <>
+      <button
+        type="button"
+        className={css.frame}
+        data-variant={variant}
+        style={fit === undefined ? undefined : { width: fit.width, height: fit.height }}
+        title={labels.open}
+        aria-label={labels.openNamed(label)}
+        onClick={() => { if (src !== null) setOpen(true) }}
+      >
+        {src === null
+          ? <span className={css.loading}>{labels.loading}</span>
+          : <img src={src} alt={label} style={fit === undefined ? undefined : { objectPosition: fit.objectPosition }} />}
+      </button>
+      {open && src !== null && <ImageLightbox src={src} alt={label} labels={labels.lightbox} onClose={close} />}
+    </>
+  )
+}
+
+/** Wrapping image group: a lone image renders large, several render as 64px
+ * square tiles. */
+export function ImageGallery({ images, load, align, labels }: {
+  images: readonly SidechatImageRef[]
+  load: ImageLoader
+  align: 'start' | 'end'
+  labels: MessageImageLabels
+}) {
+  if (images.length === 0) return null
+  const variant = images.length === 1 ? 'single' : 'tile'
+  return (
+    <div className={css.gallery} data-align={align}>
+      {images.map((image, index) => (
+        <MessageImage
+          key={`${image.attachmentId}:${index}`}
+          image={image}
+          load={load}
+          variant={variant}
+          labels={labels}
+        />
+      ))}
+    </div>
+  )
+}

package/src/client/attachments/index.ts

@@ -1,19 +1,19 @@
-/**
- * Image presentation owned by this plugin.
- *
- * The DSH attachment UI package registers these through conversation slots and
- * exports no React components (`packages/client/AGENTS.md`: a feature plugin
- * MUST NOT runtime-import another feature plugin's values — UI crosses
- * packages through slots). A standalone side panel sits outside the
- * conversation slot tree and cannot reach those slots, so it carries its own
- * presentation, built only on `ui-primitives` (a sanctioned static owner).
- */
-
-export { AttachmentRail } from './AttachmentRail.tsx'
-export type { AttachmentRailItem, AttachmentRailLabels } from './AttachmentRail.tsx'
-export { DropOverlay } from './DropOverlay.tsx'
-export type { DropOverlayLabels } from './DropOverlay.tsx'
-export { ImageGallery, MessageImage } from './MessageImage.tsx'
-export type { ImageLoader, MessageImageLabels } from './MessageImage.tsx'
-export { ImageLightbox } from './ImageLightbox.tsx'
-export type { ImageLightboxLabels } from './ImageLightbox.tsx'
+/**
+ * Image presentation owned by this plugin.
+ *
+ * The DSH attachment UI package registers these through conversation slots and
+ * exports no React components (`packages/client/AGENTS.md`: a feature plugin
+ * MUST NOT runtime-import another feature plugin's values — UI crosses
+ * packages through slots). A standalone side panel sits outside the
+ * conversation slot tree and cannot reach those slots, so it carries its own
+ * presentation, built only on `ui-primitives` (a sanctioned static owner).
+ */
+
+export { AttachmentRail } from './AttachmentRail.tsx'
+export type { AttachmentRailItem, AttachmentRailLabels } from './AttachmentRail.tsx'
+export { DropOverlay } from './DropOverlay.tsx'
+export type { DropOverlayLabels } from './DropOverlay.tsx'
+export { ImageGallery, MessageImage } from './MessageImage.tsx'
+export type { ImageLoader, MessageImageLabels } from './MessageImage.tsx'
+export { ImageLightbox } from './ImageLightbox.tsx'
+export type { ImageLightboxLabels } from './ImageLightbox.tsx'