@shelamkoff/rector 1.0.0

package/dist/shared/carouselData.js

@@ -0,0 +1,111 @@
+import { sanitizeRawHtml } from './sanitize/sanitizeRawHtml.js'
+import { sanitizeUrl } from './sanitize/sanitizeUrl.js'
+
+/**
+ * @typedef {{ id: string, type: 'image' | 'video' | 'html', src?: string, alt?: string, caption?: string, poster?: string, html?: string }} CarouselSlide
+ * @typedef {{ loop: boolean, autoplay: boolean, autoplayDelay: number, navigation: boolean, pagination: boolean, thumbnails: boolean, aspectRatio?: string }} CarouselOptions
+ * @typedef {{ slides: CarouselSlide[], options: CarouselOptions }} CarouselData
+ */
+
+const ASPECT_RATIO_RE = /^(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)$/
+
+/** @param {unknown} value @returns {value is Record<string, unknown>} */
+function isRecord(value) {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+/**
+ * Normalize a CSS aspect-ratio value accepted by the carousel contract.
+ * Both numeric components must be finite and strictly positive.
+ *
+ * @param {unknown} value
+ * @returns {string | undefined}
+ */
+export function normalizeCarouselAspectRatio(value) {
+  if (typeof value !== 'string') return undefined
+  const normalized = value.trim()
+  if (normalized === 'auto') return normalized
+  const match = normalized.match(ASPECT_RATIO_RE)
+  if (!match) return undefined
+  const width = Number(match[1])
+  const height = Number(match[2])
+  return Number.isFinite(width) && width > 0 && Number.isFinite(height) && height > 0
+    ? normalized
+    : undefined
+}
+
+/** @param {unknown} input @param {() => string} createId @returns {CarouselData} */
+export function normalizeCarouselData(input, createId) {
+  const source = isRecord(input) ? /** @type {Record<string, unknown>} */ (input) : {}
+  const seen = new Set()
+  const slides = (Array.isArray(source.slides) ? source.slides : []).flatMap(raw => {
+    if (!isRecord(raw)) return []
+    const type = raw.type === 'video' || raw.type === 'html' ? raw.type : 'image'
+    let id = typeof raw.id === 'string' && raw.id ? raw.id : createId()
+    while (seen.has(id)) id = createId()
+    seen.add(id)
+    /** @type {CarouselSlide} */
+    const slide = { id, type }
+    if (type === 'html') {
+      slide.html = sanitizeRawHtml(typeof raw.html === 'string' ? raw.html : '')
+    } else {
+      slide.src = sanitizeUrl(typeof raw.src === 'string' ? raw.src : '', { policy: 'media', fallback: '' })
+      if (type === 'video') {
+        slide.poster = sanitizeUrl(typeof raw.poster === 'string' ? raw.poster : '', { policy: 'media', fallback: '' })
+      }
+      if (typeof raw.alt === 'string') slide.alt = raw.alt
+    }
+    if (typeof raw.caption === 'string') slide.caption = raw.caption
+    return [slide]
+  })
+  const rawOptions = isRecord(source.options) ? source.options : {}
+  /** @type {CarouselOptions} */
+  const options = {
+    loop: rawOptions.loop === true,
+    autoplay: rawOptions.autoplay === true,
+    autoplayDelay: typeof rawOptions.autoplayDelay === 'number'
+      && Number.isFinite(rawOptions.autoplayDelay)
+      && rawOptions.autoplayDelay > 0
+      ? Math.floor(rawOptions.autoplayDelay)
+      : 3000,
+    navigation: rawOptions.navigation !== false,
+    pagination: rawOptions.pagination !== false,
+    thumbnails: rawOptions.thumbnails === true,
+  }
+  const aspectRatio = normalizeCarouselAspectRatio(rawOptions.aspectRatio)
+  if (aspectRatio) options.aspectRatio = aspectRatio
+  return { slides, options }
+}
+
+/** @param {unknown} data */
+export function validateCarouselData(data) {
+  if (!isRecord(data)) return false
+  const value = /** @type {Record<string, unknown>} */ (data)
+  if (!Array.isArray(value.slides) || value.slides.length === 0) return false
+  const ids = new Set()
+  for (const slide of value.slides) {
+    if (!isRecord(slide) || typeof slide.id !== 'string' || !slide.id || ids.has(slide.id)) return false
+    ids.add(slide.id)
+    if (typeof slide.type !== 'string' || !['image', 'video', 'html'].includes(slide.type)) return false
+    if (slide.caption !== undefined && typeof slide.caption !== 'string') return false
+    if (slide.type === 'html') {
+      if (typeof slide.html !== 'string' || !slide.html.trim()) return false
+    } else {
+      if (typeof slide.src !== 'string' || !slide.src
+        || sanitizeUrl(slide.src, { policy: 'media', fallback: '' }) !== slide.src) return false
+      if (slide.alt !== undefined && typeof slide.alt !== 'string') return false
+      if (slide.type === 'video' && slide.poster !== undefined
+        && (typeof slide.poster !== 'string'
+          || sanitizeUrl(slide.poster, { policy: 'media', fallback: '' }) !== slide.poster)) return false
+    }
+  }
+  if (!isRecord(value.options)) return false
+  for (const key of ['loop', 'autoplay', 'navigation', 'pagination', 'thumbnails']) {
+    if (typeof value.options[key] !== 'boolean') return false
+  }
+  if (typeof value.options.autoplayDelay !== 'number'
+    || !Number.isFinite(value.options.autoplayDelay)
+    || value.options.autoplayDelay <= 0) return false
+  return value.options.aspectRatio === undefined
+    || normalizeCarouselAspectRatio(value.options.aspectRatio) !== undefined
+}

package/dist/shared/cloneEditorData.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Take ownership of serializable editor data at an API boundary.
+ * Editor block data is a JSON document model. Validation happens before the
+ * clone so history, storage, workers, and network transports observe the same
+ * value shape.
+ *
+ * @template T
+ * @param {T} value
+ * @returns {T}
+ */
+export function cloneEditorData<T>(value: T): T;

package/dist/shared/cloneEditorData.js

@@ -0,0 +1,20 @@
+// @ts-check
+import { assertJsonValue } from './jsonData.js'
+
+/**
+ * Take ownership of serializable editor data at an API boundary.
+ * Editor block data is a JSON document model. Validation happens before the
+ * clone so history, storage, workers, and network transports observe the same
+ * value shape.
+ *
+ * @template T
+ * @param {T} value
+ * @returns {T}
+ */
+export function cloneEditorData(value) {
+  assertJsonValue(value)
+  if (typeof structuredClone === 'function') {
+    return structuredClone(value)
+  }
+  return JSON.parse(JSON.stringify(value))
+}

package/dist/shared/documentTypes.d.ts

@@ -0,0 +1,35 @@
+/** Opaque data owned by one committed inline widget instance. */
+export interface EditorInlineWidget<
+  Type extends string = string,
+  Data extends Record<string, unknown> = Record<string, unknown>,
+> {
+  type: Type
+  data: Data
+}
+
+/** Canonical persisted block shape shared by the editor and document renderer. */
+export interface EditorBlockData<
+  Type extends string = string,
+  Data extends object = Record<string, unknown>,
+> {
+  id?: string
+  /**
+   * Optional producer-owned content revision (or stable content hash).
+   * When present, incremental renderers can compare blocks in O(1).
+   * The producer must change it whenever `data`, `tunes`, or `inline` changes.
+   */
+  revision?: string | number
+  type: Type
+  data: Data
+  tunes?: Record<string, unknown>
+  inline?: Record<string, EditorInlineWidget>
+}
+
+/** Canonical editor output envelope. Composition layers may narrow fields. */
+export interface EditorOutputData<
+  Block extends EditorBlockData<string, object> = EditorBlockData,
+> {
+  time?: number
+  version?: string
+  blocks: Block[]
+}

package/dist/shared/embedPlayer.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Build a video player DOM subtree.
+ *
+ * `playIcon` and `placeholderHtml` are inserted with `innerHTML` and therefore
+ * must contain trusted application-owned markup, never user content.
+ *
+ * @param {{
+ *   service: string,
+ *   videoId: string,
+ *   cover?: string,
+ *   title?: string,
+ *   duration?: string,
+ *   classPrefix: string,
+ *   playIcon: string,
+ *   placeholderHtml?: string,
+ *   playLabel?: string,
+ *   videoLabel?: string,
+ * }} opts
+ * @returns {{ player: HTMLElement, play: () => void, setPreview: (src: string, alt?: string) => void }}
+ */
+export function buildPlayer(opts: {
+    service: string;
+    videoId: string;
+    cover?: string;
+    title?: string;
+    duration?: string;
+    classPrefix: string;
+    playIcon: string;
+    placeholderHtml?: string;
+    playLabel?: string;
+    videoLabel?: string;
+}): {
+    player: HTMLElement;
+    play: () => void;
+    setPreview: (src: string, alt?: string) => void;
+};
+/** @type {Record<string, { regex: RegExp[], embedUrl: (id: string) => string, previewUrl: ((id: string) => string) | null }>} */
+export const SERVICES: Record<string, {
+    regex: RegExp[];
+    embedUrl: (id: string) => string;
+    previewUrl: ((id: string) => string) | null;
+}>;

package/dist/shared/embedPlayer.js

@@ -0,0 +1,141 @@
+import { sanitizeUrl, setSafeUrlAttribute } from './sanitize/sanitizeUrl.js'
+
+/** @type {Record<string, { regex: RegExp[], embedUrl: (id: string) => string, previewUrl: ((id: string) => string) | null }>} */
+export const SERVICES = {
+  youtube: {
+    regex: [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/],
+    embedUrl: (id) => `https://www.youtube.com/embed/${id}?autoplay=1&rel=0`,
+    previewUrl: (id) => `https://img.youtube.com/vi/${id}/hqdefault.jpg`,
+  },
+  vimeo: {
+    regex: [/vimeo\.com\/(\d+)/],
+    embedUrl: (id) => `https://player.vimeo.com/video/${id}?autoplay=1`,
+    previewUrl: null,
+  },
+}
+
+const IFRAME_ALLOW = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+const IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-presentation allow-popups'
+
+/**
+ * Build a video player DOM subtree.
+ *
+ * `playIcon` and `placeholderHtml` are inserted with `innerHTML` and therefore
+ * must contain trusted application-owned markup, never user content.
+ *
+ * @param {{
+ *   service: string,
+ *   videoId: string,
+ *   cover?: string,
+ *   title?: string,
+ *   duration?: string,
+ *   classPrefix: string,
+ *   playIcon: string,
+ *   placeholderHtml?: string,
+ *   playLabel?: string,
+ *   videoLabel?: string,
+ * }} opts
+ * @returns {{ player: HTMLElement, play: () => void, setPreview: (src: string, alt?: string) => void }}
+ */
+export function buildPlayer(opts) {
+  const { service, videoId, cover, title, duration, classPrefix, playIcon, placeholderHtml } = opts
+  const playLabel = opts.playLabel || 'Play'
+  const videoLabel = opts.videoLabel || 'Video'
+  const svc = SERVICES[service]
+  const prefix = `${classPrefix}-embed`
+
+  const player = document.createElement('div')
+  player.className = `${prefix}__player`
+
+  // Preview: custom cover → service thumbnail → placeholder
+  const previewUrl = sanitizeUrl(cover || '', { policy: 'media', fallback: '' })
+    || svc?.previewUrl?.(videoId)
+    || ''
+
+  /** @type {HTMLElement | null} */
+  let previewEl = null
+
+  if (previewUrl) {
+    const img = document.createElement('img')
+    img.className = `${prefix}__preview`
+    const safePreview = setSafeUrlAttribute(img, 'src', previewUrl, 'media')
+    img.alt = title || videoLabel
+    img.loading = 'lazy'
+    if (safePreview) {
+      player.appendChild(img)
+      previewEl = img
+    }
+  }
+  if (!previewEl && placeholderHtml) {
+    previewEl = document.createElement('div')
+    previewEl.className = `${prefix}__placeholder`
+    previewEl.innerHTML = placeholderHtml
+    player.appendChild(previewEl)
+  }
+
+  // Play button
+  const playBtn = document.createElement('button')
+  playBtn.type = 'button'
+  playBtn.className = `${prefix}__play-btn`
+  playBtn.innerHTML = playIcon
+  playBtn.setAttribute('aria-label', playLabel)
+  player.appendChild(playBtn)
+
+  // Title overlay (top-left)
+  if (title) {
+    const titleEl = document.createElement('span')
+    titleEl.className = `${prefix}__title`
+    titleEl.textContent = title
+    player.appendChild(titleEl)
+  }
+
+  // Duration overlay (bottom-right)
+  if (duration) {
+    const durEl = document.createElement('span')
+    durEl.className = `${prefix}__duration`
+    durEl.textContent = duration
+    player.appendChild(durEl)
+  }
+
+  // Iframe container (empty until play)
+  const iframeWrap = document.createElement('div')
+  iframeWrap.className = `${prefix}__iframe`
+  player.appendChild(iframeWrap)
+
+  /** Create and inject the iframe, toggle playing state. */
+  function play() {
+    if (iframeWrap.firstElementChild) return
+    const embedUrl = svc?.embedUrl(videoId)
+    if (!embedUrl) return
+
+    player.classList.add(`${prefix}__player--playing`)
+
+    const iframe = document.createElement('iframe')
+    setSafeUrlAttribute(iframe, 'src', embedUrl, 'external')
+    iframe.style.border = '0'
+    iframe.allowFullscreen = true
+    iframe.setAttribute('allow', IFRAME_ALLOW)
+    iframe.setAttribute('sandbox', IFRAME_SANDBOX)
+    iframe.title = title || videoLabel
+    iframeWrap.appendChild(iframe)
+  }
+
+  /**
+   * Replace the preview image (e.g. after async Vimeo oEmbed fetch).
+   * @param {string} src
+   * @param {string} [alt]
+   */
+  function setPreview(src, alt) {
+    const img = document.createElement('img')
+    img.className = `${prefix}__preview`
+    const safePreview = setSafeUrlAttribute(img, 'src', src, 'media')
+    if (!safePreview) return
+    img.alt = alt || videoLabel
+    img.loading = 'lazy'
+    if (previewEl) previewEl.remove()
+    player.insertBefore(img, player.firstChild)
+    previewEl = img
+  }
+
+  return { player, play, setPreview }
+}

package/dist/shared/fileUtils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the SVG icon for a file extension.
+ * @param {string} ext  lowercase extension without dot
+ * @returns {{ svg: string, key: string }}
+ */
+export function getFileIcon(ext: string): {
+    svg: string;
+    key: string;
+};
+/**
+ * Format bytes into a human-readable size string.
+ * @param {number} bytes
+ * @returns {string}
+ */
+export function formatSize(bytes: number): string;
+/**
+ * Extract the extension from a filename.
+ * @param {string} filename
+ * @returns {string}
+ */
+export function getExtension(filename: string): string;
+/**
+ * Format an ISO date string as DD.MM.YYYY.
+ * @param {string} [isoString]
+ * @returns {string}
+ */
+export function formatDate(isoString?: string): string;
+/** @type {Record<string, string>} */
+export const FILE_ICONS: Record<string, string>;
+/** Extension → icon key mapping. @type {Record<string, string>} */
+export const EXT_MAP: Record<string, string>;
+/** Extension → badge accent color (only for known doc types). @type {Record<string, string>} */
+export const EXT_COLORS: Record<string, string>;

package/dist/shared/fileUtils.js

@@ -0,0 +1,109 @@
+/**
+ * Shared file utilities for the Attaches plugin (editor) and its renderer.
+ * Icons, extension mapping, size formatting — single source of truth.
+ */
+
+// Tabler Icons (24×24) — compact stroke-based file type icons
+const _S = 'xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"'
+
+/** @type {Record<string, string>} */
+export const FILE_ICONS = {
+  pdf: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M17 18h2"/><path d="M20 15h-3v6"/><path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"/></svg>`,
+  doc: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M5 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"/><path d="M20 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0"/><path d="M12.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1 -3 0v-3a1.5 1.5 0 0 1 1.5 -1.5"/></svg>`,
+  xls: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M4 15l4 6"/><path d="M4 21l4 -6"/><path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/><path d="M11 15v6h3"/></svg>`,
+  ppt: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M11 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M16.5 15h3"/><path d="M18 15v6"/></svg>`,
+  csv: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M7 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0"/><path d="M10 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/><path d="M16 15l2 6l2 -6"/></svg>`,
+  zip: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M16 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"/><path d="M12 15v6"/><path d="M5 15h3l-3 6h3"/></svg>`,
+  sql: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M5 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/><path d="M18 15v6h2"/><path d="M13 15a2 2 0 0 1 2 2v2a2 2 0 1 1 -4 0v-2a2 2 0 0 1 2 -2"/><path d="M14 20l1.5 1.5"/></svg>`,
+  js: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M3 15h3v4.5a1.5 1.5 0 0 1 -3 0"/><path d="M9 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1"/></svg>`,
+  ts: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1"/><path d="M9 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/><path d="M3.5 15h3"/><path d="M5 15v6"/></svg>`,
+  html: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M2 21v-6"/><path d="M5 15v6"/><path d="M2 18h3"/><path d="M20 15v6h2"/><path d="M13 21v-6l2 3l2 -3v6"/><path d="M7.5 15h3"/><path d="M9 15v6"/></svg>`,
+  css: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M8 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0"/><path d="M11 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/><path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"/></svg>`,
+  xml: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"/><path d="M4 15l4 6"/><path d="M4 21l4 -6"/><path d="M19 15v6h3"/><path d="M11 21v-6l2.5 3l2.5 -3v6"/></svg>`,
+  json: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/><path d="M10 13l-1 2l1 2"/><path d="M14 13l1 2l-1 2"/></svg>`,
+  image: `<svg ${_S}><path d="M15 8h.01"/><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"/><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"/></svg>`,
+  audio: `<svg ${_S}><path d="M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M13 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M9 17v-13h10v13"/><path d="M9 8h10"/></svg>`,
+  video: `<svg ${_S}><path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4"/><path d="M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -8"/></svg>`,
+  default: `<svg ${_S}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/></svg>`,
+}
+
+/** Extension → icon key mapping. @type {Record<string, string>} */
+export const EXT_MAP = {
+  pdf: 'pdf',
+  doc: 'doc', docx: 'doc', odt: 'doc', rtf: 'doc',
+  xls: 'xls', xlsx: 'xls',
+  ppt: 'ppt', pptx: 'ppt',
+  csv: 'csv', tsv: 'csv',
+  zip: 'zip', rar: 'zip', '7z': 'zip', tar: 'zip', gz: 'zip',
+  sql: 'sql', db: 'sql',
+  js: 'js', mjs: 'js', cjs: 'js',
+  ts: 'ts', tsx: 'ts',
+  html: 'html', htm: 'html',
+  css: 'css', scss: 'css', less: 'css',
+  xml: 'xml', svg: 'xml',
+  json: 'json', jsonl: 'json',
+  jpg: 'image', jpeg: 'image', png: 'image', gif: 'image', webp: 'image', avif: 'image', bmp: 'image', ico: 'image',
+  mp3: 'audio', wav: 'audio', ogg: 'audio', flac: 'audio', aac: 'audio', m4a: 'audio', wma: 'audio',
+  mp4: 'video', avi: 'video', mov: 'video', mkv: 'video', webm: 'video', wmv: 'video', flv: 'video',
+}
+
+/** Extension → badge accent color (only for known doc types). @type {Record<string, string>} */
+export const EXT_COLORS = {
+  pdf: '#e74c3c',
+  doc: '#2b579a', docx: '#2b579a',
+  xls: '#217346', xlsx: '#217346',
+  ppt: '#d24726', pptx: '#d24726',
+  zip: '#f39c12', rar: '#f39c12', '7z': '#f39c12',
+}
+
+/**
+ * Get the SVG icon for a file extension.
+ * @param {string} ext  lowercase extension without dot
+ * @returns {{ svg: string, key: string }}
+ */
+export function getFileIcon(ext) {
+  const key = EXT_MAP[ext.toLowerCase()] || 'default'
+  return { svg: FILE_ICONS[key] ?? FILE_ICONS['default'] ?? '', key }
+}
+
+/**
+ * Format bytes into a human-readable size string.
+ * @param {number} bytes
+ * @returns {string}
+ */
+export function formatSize(bytes) {
+  if (!bytes || bytes <= 0) return ''
+  if (bytes < 1024) return `${bytes}B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
+}
+
+/**
+ * Extract the extension from a filename.
+ * @param {string} filename
+ * @returns {string}
+ */
+export function getExtension(filename) {
+  if (!filename) return ''
+  const dot = filename.lastIndexOf('.')
+  return dot >= 0 ? filename.substring(dot + 1).toLowerCase() : ''
+}
+
+/**
+ * Format an ISO date string as DD.MM.YYYY.
+ * @param {string} [isoString]
+ * @returns {string}
+ */
+export function formatDate(isoString) {
+  if (!isoString) return ''
+  try {
+    const d = new Date(isoString)
+    if (isNaN(d.getTime())) return ''
+    const dd = String(d.getDate()).padStart(2, '0')
+    const mm = String(d.getMonth() + 1).padStart(2, '0')
+    const yyyy = d.getFullYear()
+    return `${dd}.${mm}.${yyyy}`
+  } catch {
+    return ''
+  }
+}

package/dist/shared/highlightRuntime.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @returns {HighlightRuntime | null}
+ */
+export function getHighlightRuntime(): HighlightRuntime | null;
+/**
+ * Preserve dependency injection for consumers that provide their own build.
+ * @param {HighlightRuntime} value
+ */
+export function setHighlightRuntime(value: HighlightRuntime): void;
+/**
+ * Load the browser-native local bundle once.
+ * @returns {Promise<HighlightRuntime>}
+ */
+export function loadHighlightRuntime(): Promise<HighlightRuntime>;
+/**
+ * Highlight synchronously when the runtime has already loaded.
+ * @param {string} code
+ * @param {string} [language]
+ * @returns {{ value: string, language: string } | null}
+ */
+export function highlightCode(code: string, language?: string): {
+    value: string;
+    language: string;
+} | null;
+export const HIGHLIGHT_RUNTIME_VERSION: "11.11.1";
+export type HighlightRuntime = {
+    highlightAuto(code: string): {
+        value: string;
+        language?: string;
+    };
+    highlight(code: string, options: {
+        language: string;
+        ignoreIllegals?: boolean;
+    }): {
+        value: string;
+    };
+    getLanguage(language: string): unknown;
+};

package/dist/shared/highlightRuntime.js

@@ -0,0 +1,75 @@
+// @ts-check
+
+/** @typedef {{ highlightAuto(code: string): { value: string, language?: string }, highlight(code: string, options: { language: string, ignoreIllegals?: boolean }): { value: string }, getLanguage(language: string): unknown }} HighlightRuntime */
+
+/** @type {HighlightRuntime | null} */
+let runtime = null
+/** @type {Promise<HighlightRuntime> | null} */
+let loadPromise = null
+
+/**
+ * @returns {HighlightRuntime | null}
+ */
+export function getHighlightRuntime() {
+  if (!runtime && typeof globalThis !== 'undefined') {
+    const globalRuntime = /** @type {{ hljs?: HighlightRuntime }} */ (globalThis).hljs
+    if (globalRuntime) runtime = globalRuntime
+  }
+  return runtime
+}
+
+/**
+ * Preserve dependency injection for consumers that provide their own build.
+ * @param {HighlightRuntime} value
+ */
+export function setHighlightRuntime(value) {
+  runtime = value
+}
+
+/**
+ * Load the browser-native local bundle once.
+ * @returns {Promise<HighlightRuntime>}
+ */
+export function loadHighlightRuntime() {
+  const current = getHighlightRuntime()
+  if (current) return Promise.resolve(current)
+  if (loadPromise) return loadPromise
+
+  loadPromise = import('./runtime/highlightBundle.js')
+    .then(module => {
+      const loaded = /** @type {HighlightRuntime} */ (module.default || module)
+      runtime = loaded
+      return loaded
+    })
+    .catch(error => {
+      loadPromise = null
+      throw error
+    })
+
+  return loadPromise
+}
+
+/**
+ * Highlight synchronously when the runtime has already loaded.
+ * @param {string} code
+ * @param {string} [language]
+ * @returns {{ value: string, language: string } | null}
+ */
+export function highlightCode(code, language) {
+  const hljs = getHighlightRuntime()
+  if (!hljs) return null
+
+  try {
+    if (language && language !== 'auto' && hljs.getLanguage(language)) {
+      const result = hljs.highlight(code, { language, ignoreIllegals: true })
+      return { value: result.value, language }
+    }
+
+    const result = hljs.highlightAuto(code)
+    return { value: result.value, language: result.language || 'plaintext' }
+  } catch {
+    return null
+  }
+}
+
+export const HIGHLIGHT_RUNTIME_VERSION = '11.11.1'