@djangocfg/widget-media 0.1.8 → 0.1.12

package/README.md

@@ -21,7 +21,7 @@ and a host mounting a lightbox must not pay for any of them.
 | `./diagram` | `LazyDiagram`, `DiagramSource`, `diagramPlugin` | mermaid (~2.5 MB) — **always deferred** |
 | `./markdown` | `Markdown` — for a reader, outside any conversation | streamdown |
 | `./code` | `Code` — a read-only listing | streamdown + shiki |
-| `./i18n` | `MediaCopy`, `DEFAULT_MEDIA_COPY` | — |
+| `./i18n` | `MediaCopy`, `DEFAULT_MEDIA_COPY`, `MEDIA_DICTIONARIES`, `useMediaCopy` | — |
 
 ```tsx
 import { ImageViewer } from '@djangocfg/widget-media';
@@ -33,8 +33,10 @@ import { LazyDiagram } from '@djangocfg/widget-media/diagram';
 
 ## Copy
 
-The package owns its copy, typed. Pass `copy` to override any subset; keys you
-omit fall back to English, so translating one label does not blank the rest.
+The package owns its copy, typed, in the 17 `@djangocfg/i18n` locales. The
+language comes from the `@djangocfg/i18n` provider (English without one). Pass
+`copy` to override any subset; keys you omit keep the dictionary's text, so
+changing one label does not blank the rest.
 
 ```tsx
 <ImageViewer images={images} copy={{ zoomIn: 'Приблизить', close: 'Закрыть' }} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/widget-media",
-  "version": "0.1.8",
+  "version": "0.1.12",
   "description": "Media viewers for a conversation or a file preview: zoom/pan image lightbox, mermaid diagrams, markdown and code listings",
   "keywords": [
     "image-viewer",
@@ -56,14 +56,16 @@
     "zustand": "^5.0.0"
   },
   "peerDependencies": {
-    "@djangocfg/ui-core": "^2.1.549",
+    "@djangocfg/i18n": "^2.1.586",
+    "@djangocfg/ui-core": "^2.1.586",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "streamdown": "^2.6.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.549",
-    "@djangocfg/ui-core": "^2.1.549",
+    "@djangocfg/i18n": "^2.1.586",
+    "@djangocfg/typescript-config": "^2.1.586",
+    "@djangocfg/ui-core": "^2.1.586",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/i18n/index.ts

@@ -1,60 +1,49 @@
 'use client';
 
-/**
- * The package owns its copy, typed.
- *
- * `MediaCopy` is the schema of record: a missing or misspelled key is a `tsc`
- * error rather than `undefined` rendered into a toolbar button. Copy used to
- * arrive through a host i18n provider, which made the viewer unmountable
- * without one — a story, a preview route and a test each had to stand a
- * provider up to draw one image.
- *
- * A host that already translates passes `copy` to override any subset; keys it
- * omits fall back to English.
- */
+import { useMemo } from 'react';
 
-export interface MediaCopy {
-  close: string;
-  diagram: string;
-  download: string;
-  failedToLoad: string;
-  fitToView: string;
-  flipHorizontal: string;
-  flipVertical: string;
-  fullscreen: string;
-  loading: string;
-  next: string;
-  noImage: string;
-  previous: string;
-  rotate: string;
-  zoomIn: string;
-  zoomOut: string;
-}
+import { createCopy, type Locale } from '@djangocfg/i18n/copy';
+
+import { ar } from './locales/ar';
+import { da } from './locales/da';
+import { de } from './locales/de';
+import { en } from './locales/en';
+import { es } from './locales/es';
+import { fr } from './locales/fr';
+import { it } from './locales/it';
+import { ja } from './locales/ja';
+import { ko } from './locales/ko';
+import { nl } from './locales/nl';
+import { no } from './locales/no';
+import { pl } from './locales/pl';
+import { ptBR } from './locales/ptBR';
+import { ru } from './locales/ru';
+import { sv } from './locales/sv';
+import { tr } from './locales/tr';
+import { zh } from './locales/zh';
 
-export const DEFAULT_MEDIA_COPY: MediaCopy = {
-  close: 'Close',
-  diagram: 'Diagram',
-  download: 'Download',
-  failedToLoad: 'Failed to load',
-  fitToView: 'Fit to view',
-  flipHorizontal: 'Flip horizontal',
-  flipVertical: 'Flip vertical',
-  fullscreen: 'Fullscreen',
-  loading: 'Loading…',
-  next: 'Next',
-  noImage: 'No image',
-  previous: 'Previous',
-  rotate: 'Rotate',
-  zoomIn: 'Zoom in',
-  zoomOut: 'Zoom out',
+import type { MediaCopy } from './types';
+
+export type { MediaCopy } from './types';
+
+/** Every bundled dictionary, typed complete over the shared `Locale` union. */
+export const MEDIA_DICTIONARIES: Readonly<Record<Locale, MediaCopy>> = {
+  en, ru, ko, ja, de, fr, zh, it, es, nl, ar, tr, pl, sv, no, da,
+  'pt-BR': ptBR,
 };
 
+/** English, for a host that wants the unlocalised defaults. */
+export const DEFAULT_MEDIA_COPY: MediaCopy = en;
+
+const kit = createCopy(MEDIA_DICTIONARIES);
+
 /**
- * Resolve the copy a component renders. Takes the host's partial override and
- * fills the rest from the defaults, so a caller supplying one string does not
- * blank the other fourteen.
+ * The copy a component renders: the dictionary for the active language (the
+ * `locale` argument, else the `@djangocfg/i18n` provider, else English), with
+ * the host's partial override on top. A host that overrides one string does
+ * not blank the other fourteen.
  */
-export function useMediaCopy(copy?: Partial<MediaCopy>): MediaCopy {
-  if (!copy) return DEFAULT_MEDIA_COPY;
-  return { ...DEFAULT_MEDIA_COPY, ...copy };
+export function useMediaCopy(copy?: Partial<MediaCopy>, locale?: string): MediaCopy {
+  const base = kit.useCopy(locale);
+  return useMemo(() => (copy ? { ...base, ...copy } : base), [base, copy]);
 }

package/src/i18n/locales/ar.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const ar: MediaCopy = {
+  close: 'إغلاق',
+  diagram: 'مخطط',
+  download: 'تنزيل',
+  failedToLoad: 'فشل التحميل',
+  fitToView: 'ملاءمة للنافذة',
+  flipHorizontal: 'قلب أفقي',
+  flipVertical: 'قلب عمودي',
+  fullscreen: 'ملء الشاشة',
+  loading: 'جارٍ التحميل…',
+  next: 'التالي',
+  noImage: 'لا توجد صورة',
+  previous: 'السابق',
+  rotate: 'تدوير',
+  zoomIn: 'تكبير',
+  zoomOut: 'تصغير',
+};

package/src/i18n/locales/da.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const da: MediaCopy = {
+  close: 'Luk',
+  diagram: 'Diagram',
+  download: 'Download',
+  failedToLoad: 'Kunne ikke indlæses',
+  fitToView: 'Tilpas til vindue',
+  flipHorizontal: 'Spejlvend vandret',
+  flipVertical: 'Spejlvend lodret',
+  fullscreen: 'Fuld skærm',
+  loading: 'Indlæser…',
+  next: 'Næste',
+  noImage: 'Intet billede',
+  previous: 'Forrige',
+  rotate: 'Roter',
+  zoomIn: 'Zoom ind',
+  zoomOut: 'Zoom ud',
+};

package/src/i18n/locales/de.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const de: MediaCopy = {
+  close: 'Schließen',
+  diagram: 'Diagramm',
+  download: 'Herunterladen',
+  failedToLoad: 'Laden fehlgeschlagen',
+  fitToView: 'An Fenster anpassen',
+  flipHorizontal: 'Horizontal spiegeln',
+  flipVertical: 'Vertikal spiegeln',
+  fullscreen: 'Vollbild',
+  loading: 'Wird geladen…',
+  next: 'Weiter',
+  noImage: 'Kein Bild',
+  previous: 'Zurück',
+  rotate: 'Drehen',
+  zoomIn: 'Vergrößern',
+  zoomOut: 'Verkleinern',
+};

package/src/i18n/locales/en.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const en: MediaCopy = {
+  close: 'Close',
+  diagram: 'Diagram',
+  download: 'Download',
+  failedToLoad: 'Failed to load',
+  fitToView: 'Fit to view',
+  flipHorizontal: 'Flip horizontal',
+  flipVertical: 'Flip vertical',
+  fullscreen: 'Fullscreen',
+  loading: 'Loading…',
+  next: 'Next',
+  noImage: 'No image',
+  previous: 'Previous',
+  rotate: 'Rotate',
+  zoomIn: 'Zoom in',
+  zoomOut: 'Zoom out',
+};

package/src/i18n/locales/es.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const es: MediaCopy = {
+  close: 'Cerrar',
+  diagram: 'Diagrama',
+  download: 'Descargar',
+  failedToLoad: 'Error al cargar',
+  fitToView: 'Ajustar a la ventana',
+  flipHorizontal: 'Voltear horizontalmente',
+  flipVertical: 'Voltear verticalmente',
+  fullscreen: 'Pantalla completa',
+  loading: 'Cargando…',
+  next: 'Siguiente',
+  noImage: 'Sin imagen',
+  previous: 'Anterior',
+  rotate: 'Girar',
+  zoomIn: 'Acercar',
+  zoomOut: 'Alejar',
+};

package/src/i18n/locales/fr.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const fr: MediaCopy = {
+  close: 'Fermer',
+  diagram: 'Diagramme',
+  download: 'Télécharger',
+  failedToLoad: 'Échec du chargement',
+  fitToView: 'Ajuster à la fenêtre',
+  flipHorizontal: 'Retourner horizontalement',
+  flipVertical: 'Retourner verticalement',
+  fullscreen: 'Plein écran',
+  loading: 'Chargement…',
+  next: 'Suivant',
+  noImage: 'Aucune image',
+  previous: 'Précédent',
+  rotate: 'Pivoter',
+  zoomIn: 'Zoom avant',
+  zoomOut: 'Zoom arrière',
+};

package/src/i18n/locales/it.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const it: MediaCopy = {
+  close: 'Chiudi',
+  diagram: 'Diagramma',
+  download: 'Scarica',
+  failedToLoad: 'Caricamento non riuscito',
+  fitToView: 'Adatta alla finestra',
+  flipHorizontal: 'Capovolgi orizzontalmente',
+  flipVertical: 'Capovolgi verticalmente',
+  fullscreen: 'Schermo intero',
+  loading: 'Caricamento…',
+  next: 'Avanti',
+  noImage: 'Nessuna immagine',
+  previous: 'Indietro',
+  rotate: 'Ruota',
+  zoomIn: 'Ingrandisci',
+  zoomOut: 'Riduci',
+};

package/src/i18n/locales/ja.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const ja: MediaCopy = {
+  close: '閉じる',
+  diagram: 'ダイアグラム',
+  download: 'ダウンロード',
+  failedToLoad: '読み込めませんでした',
+  fitToView: '画面に合わせる',
+  flipHorizontal: '左右反転',
+  flipVertical: '上下反転',
+  fullscreen: '全画面表示',
+  loading: '読み込み中…',
+  next: '次へ',
+  noImage: '画像がありません',
+  previous: '前へ',
+  rotate: '回転',
+  zoomIn: '拡大',
+  zoomOut: '縮小',
+};

package/src/i18n/locales/ko.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const ko: MediaCopy = {
+  close: '닫기',
+  diagram: '다이어그램',
+  download: '다운로드',
+  failedToLoad: '불러오지 못했습니다',
+  fitToView: '화면에 맞추기',
+  flipHorizontal: '좌우 반전',
+  flipVertical: '상하 반전',
+  fullscreen: '전체 화면',
+  loading: '로딩 중…',
+  next: '다음',
+  noImage: '이미지 없음',
+  previous: '이전',
+  rotate: '회전',
+  zoomIn: '확대',
+  zoomOut: '축소',
+};

package/src/i18n/locales/nl.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const nl: MediaCopy = {
+  close: 'Sluiten',
+  diagram: 'Diagram',
+  download: 'Downloaden',
+  failedToLoad: 'Laden mislukt',
+  fitToView: 'Aanpassen aan venster',
+  flipHorizontal: 'Horizontaal spiegelen',
+  flipVertical: 'Verticaal spiegelen',
+  fullscreen: 'Volledig scherm',
+  loading: 'Laden…',
+  next: 'Volgende',
+  noImage: 'Geen afbeelding',
+  previous: 'Vorige',
+  rotate: 'Draaien',
+  zoomIn: 'Inzoomen',
+  zoomOut: 'Uitzoomen',
+};

package/src/i18n/locales/no.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const no: MediaCopy = {
+  close: 'Lukk',
+  diagram: 'Diagram',
+  download: 'Last ned',
+  failedToLoad: 'Kunne ikke lastes',
+  fitToView: 'Tilpass til vinduet',
+  flipHorizontal: 'Speilvend horisontalt',
+  flipVertical: 'Speilvend vertikalt',
+  fullscreen: 'Fullskjerm',
+  loading: 'Laster…',
+  next: 'Neste',
+  noImage: 'Ingen bilde',
+  previous: 'Forrige',
+  rotate: 'Roter',
+  zoomIn: 'Zoom inn',
+  zoomOut: 'Zoom ut',
+};

package/src/i18n/locales/pl.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const pl: MediaCopy = {
+  close: 'Zamknij',
+  diagram: 'Diagram',
+  download: 'Pobierz',
+  failedToLoad: 'Nie udało się wczytać',
+  fitToView: 'Dopasuj do okna',
+  flipHorizontal: 'Odbij w poziomie',
+  flipVertical: 'Odbij w pionie',
+  fullscreen: 'Pełny ekran',
+  loading: 'Ładowanie…',
+  next: 'Dalej',
+  noImage: 'Brak obrazu',
+  previous: 'Wstecz',
+  rotate: 'Obróć',
+  zoomIn: 'Powiększ',
+  zoomOut: 'Pomniejsz',
+};

package/src/i18n/locales/ptBR.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const ptBR: MediaCopy = {
+  close: 'Fechar',
+  diagram: 'Diagrama',
+  download: 'Baixar',
+  failedToLoad: 'Falha ao carregar',
+  fitToView: 'Ajustar à janela',
+  flipHorizontal: 'Espelhar na horizontal',
+  flipVertical: 'Espelhar na vertical',
+  fullscreen: 'Tela cheia',
+  loading: 'Carregando…',
+  next: 'Próximo',
+  noImage: 'Sem imagem',
+  previous: 'Anterior',
+  rotate: 'Girar',
+  zoomIn: 'Aproximar',
+  zoomOut: 'Afastar',
+};

package/src/i18n/locales/ru.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const ru: MediaCopy = {
+  close: 'Закрыть',
+  diagram: 'Диаграмма',
+  download: 'Скачать',
+  failedToLoad: 'Не удалось загрузить',
+  fitToView: 'По размеру окна',
+  flipHorizontal: 'Отразить по горизонтали',
+  flipVertical: 'Отразить по вертикали',
+  fullscreen: 'Во весь экран',
+  loading: 'Загрузка…',
+  next: 'Далее',
+  noImage: 'Нет изображения',
+  previous: 'Назад',
+  rotate: 'Повернуть',
+  zoomIn: 'Увеличить',
+  zoomOut: 'Уменьшить',
+};

package/src/i18n/locales/sv.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const sv: MediaCopy = {
+  close: 'Stäng',
+  diagram: 'Diagram',
+  download: 'Ladda ner',
+  failedToLoad: 'Det gick inte att ladda',
+  fitToView: 'Anpassa till fönstret',
+  flipHorizontal: 'Vänd horisontellt',
+  flipVertical: 'Vänd vertikalt',
+  fullscreen: 'Helskärm',
+  loading: 'Laddar…',
+  next: 'Nästa',
+  noImage: 'Ingen bild',
+  previous: 'Föregående',
+  rotate: 'Rotera',
+  zoomIn: 'Zooma in',
+  zoomOut: 'Zooma ut',
+};

package/src/i18n/locales/tr.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const tr: MediaCopy = {
+  close: 'Kapat',
+  diagram: 'Diyagram',
+  download: 'İndir',
+  failedToLoad: 'Yüklenemedi',
+  fitToView: 'Pencereye sığdır',
+  flipHorizontal: 'Yatay çevir',
+  flipVertical: 'Dikey çevir',
+  fullscreen: 'Tam ekran',
+  loading: 'Yükleniyor…',
+  next: 'Sonraki',
+  noImage: 'Görsel yok',
+  previous: 'Önceki',
+  rotate: 'Döndür',
+  zoomIn: 'Yakınlaştır',
+  zoomOut: 'Uzaklaştır',
+};

package/src/i18n/locales/zh.ts

@@ -0,0 +1,19 @@
+import type { MediaCopy } from '../types';
+
+export const zh: MediaCopy = {
+  close: '关闭',
+  diagram: '图表',
+  download: '下载',
+  failedToLoad: '加载失败',
+  fitToView: '适应窗口',
+  flipHorizontal: '水平翻转',
+  flipVertical: '垂直翻转',
+  fullscreen: '全屏',
+  loading: '加载中…',
+  next: '下一个',
+  noImage: '没有图片',
+  previous: '上一个',
+  rotate: '旋转',
+  zoomIn: '放大',
+  zoomOut: '缩小',
+};

package/src/i18n/types.ts

@@ -0,0 +1,22 @@
+/**
+ * The media package's copy schema. English is the schema of record: every
+ * locale is typed against `MediaCopy`, so a missing key is a `tsc` error rather
+ * than `undefined` rendered into a toolbar button.
+ */
+export interface MediaCopy {
+  close: string;
+  diagram: string;
+  download: string;
+  failedToLoad: string;
+  fitToView: string;
+  flipHorizontal: string;
+  flipVertical: string;
+  fullscreen: string;
+  loading: string;
+  next: string;
+  noImage: string;
+  previous: string;
+  rotate: string;
+  zoomIn: string;
+  zoomOut: string;
+}

package/src/index.ts

@@ -7,4 +7,4 @@
 // undo the split silently.
 export * from "./image-viewer";
 export type { MediaCopy } from "./i18n";
-export { DEFAULT_MEDIA_COPY } from "./i18n";
+export { DEFAULT_MEDIA_COPY, MEDIA_DICTIONARIES, useMediaCopy } from "./i18n";