@shelamkoff/rector 1.0.0

package/dist/plugins/gallery/layout.js

@@ -0,0 +1,79 @@
+import { LAYOUT_ICONS } from './icons.js'
+
+/** All known layout names (auto, '1'..'6c', triptych, masonry, poly-*). */
+export const ALL_LAYOUTS = Object.keys(LAYOUT_ICONS)
+
+/** Maximum number of images visible in template-based layouts. */
+export const MAX_VISIBLE = 6
+
+/** Slot counts for `poly-*` templates. */
+/** @type {Record<string, number>} */
+const POLY_SLOTS = { 'poly-5': 5, 'poly-3arch': 3, 'poly-5flat': 5, 'poly-3steps': 3 }
+
+/**
+ * Return the number of visible slots provided by a gallery layout.
+ *
+ * @param {string} layout
+ * @returns {number} number of slots, or `Infinity` for layouts that flow all images
+ */
+export function getSlotsCount(layout) {
+  if (layout === 'auto' || layout === 'masonry') return Infinity
+  if (layout === 'triptych') return 3
+  if (POLY_SLOTS[layout]) return POLY_SLOTS[layout]
+  const m = layout.match(/^(\d)/)
+  return m?.[1] ? parseInt(m[1], 10) : MAX_VISIBLE
+}
+
+/**
+ * Pick a template based on image count + per-image orientations.
+ * Used after images load and we know each image's aspect ratio.
+ *
+ * @param {number} count
+ * @param {string[]} orientations  array of 'L' (landscape) | 'P' (portrait) | 'S' (square)
+ * @returns {string}
+ */
+export function selectAutoTemplate(count, orientations) {
+  if (count <= 1) return '1'
+  if (count === 2) return '2'
+
+  const firstP = orientations[0] === 'P'
+  const lastP = orientations[orientations.length - 1] === 'P'
+  const allLS = orientations.every((o) => o !== 'P')
+  const n = Math.min(count, MAX_VISIBLE)
+
+  switch (n) {
+    case 3: return firstP ? '3a' : lastP ? '3b' : '3c'
+    case 4: return firstP ? '4b' : allLS ? '4c' : '4a'
+    case 5: return firstP ? '5b' : allLS ? '5c' : '5a'
+    default: return firstP ? '6b' : allLS ? '6c' : '6a'
+  }
+}
+
+/**
+ * Initial template guess for `auto` layout, before images are loaded
+ * (no orientation info available).
+ *
+ * @param {number} count
+ * @returns {string}
+ */
+export function pickInitialAutoTemplate(count) {
+  if (count <= 1) return '1'
+  if (count === 2) return '2'
+  if (count === 3) return '3a'
+  if (count === 4) return '4a'
+  if (count === 5) return '5a'
+  return '6a'
+}
+
+/**
+ * Classify an image's orientation from its loaded dimensions.
+ * @param {number} width
+ * @param {number} height
+ * @returns {'L' | 'P' | 'S'}
+ */
+export function classifyOrientation(width, height) {
+  const r = width / height
+  if (r > 1.2) return 'L'
+  if (r < 1 / 1.2) return 'P'
+  return 'S'
+}

package/dist/plugins/gallery/locale/en.d.ts

@@ -0,0 +1,36 @@
+declare const _default: {
+    'plugin.gallery.title': string;
+    'plugin.gallery.upload': string;
+    'plugin.gallery.url': string;
+    'plugin.gallery.urlPrompt': string;
+    'plugin.gallery.dropzone': string;
+    'plugin.gallery.dropzoneUpload': string;
+    'plugin.gallery.dropzoneText': string;
+    'plugin.gallery.addMore': string;
+    'plugin.gallery.delete': string;
+    'plugin.gallery.deleteAll': string;
+    'plugin.gallery.caption': string;
+    'plugin.gallery.slot': string;
+    'plugin.gallery.layout': string;
+    'plugin.gallery.settings': string;
+    'plugin.gallery.lightbox': string;
+    'plugin.gallery.optNavigation': string;
+    'plugin.gallery.optLoop': string;
+    'plugin.gallery.optZoom': string;
+    'plugin.gallery.optCaptions': string;
+    'plugin.gallery.optThumbnails': string;
+    'plugin.gallery.optFullscreen': string;
+    'plugin.gallery.optAutoplay': string;
+    'plugin.gallery.styles': string;
+    'plugin.gallery.styleRadius': string;
+    'plugin.gallery.styleHeight': string;
+    'plugin.gallery.back': string;
+    'plugin.gallery.autoplayDelayPlaceholder': string;
+    'plugin.gallery.styleGap': string;
+    'plugin.gallery.layoutAuto': string;
+    'plugin.gallery.layoutMasonry': string;
+    'plugin.gallery.layoutTriptych': string;
+    'plugin.gallery.layoutTemplate': string;
+    'plugin.gallery.emptyReadonly': string;
+};
+export default _default;

package/dist/plugins/gallery/locale/en.js

@@ -0,0 +1,35 @@
+export default {
+  'plugin.gallery.title': 'Gallery',
+  'plugin.gallery.upload': 'Upload',
+  'plugin.gallery.url': 'URL',
+  'plugin.gallery.urlPrompt': 'Image URL:',
+  'plugin.gallery.dropzone': 'or drag and drop files here',
+  'plugin.gallery.dropzoneUpload': 'Upload',
+  'plugin.gallery.dropzoneText': 'images from your device or drag and drop them here',
+  'plugin.gallery.addMore': 'Add more',
+  'plugin.gallery.delete': 'Delete',
+  'plugin.gallery.deleteAll': 'Delete all',
+  'plugin.gallery.caption': 'Caption',
+  'plugin.gallery.slot': 'Slot',
+  'plugin.gallery.layout': 'Layout',
+  'plugin.gallery.settings': 'Settings',
+  'plugin.gallery.lightbox': 'Lightbox',
+  'plugin.gallery.optNavigation': 'Navigation',
+  'plugin.gallery.optLoop': 'Loop',
+  'plugin.gallery.optZoom': 'Zoom',
+  'plugin.gallery.optCaptions': 'Captions',
+  'plugin.gallery.optThumbnails': 'Thumbnails',
+  'plugin.gallery.optFullscreen': 'Fullscreen',
+  'plugin.gallery.optAutoplay': 'Autoplay',
+  'plugin.gallery.styles': 'Styles',
+  'plugin.gallery.styleRadius': 'Radius',
+  'plugin.gallery.styleHeight': 'Height',
+  'plugin.gallery.back': 'Back',
+  'plugin.gallery.autoplayDelayPlaceholder': 'ms (e.g. 3000)',
+  'plugin.gallery.styleGap': 'Gap',
+  'plugin.gallery.layoutAuto': 'Automatic layout',
+  'plugin.gallery.layoutMasonry': 'Masonry layout',
+  'plugin.gallery.layoutTriptych': 'Triptych layout',
+  'plugin.gallery.layoutTemplate': 'Layout template',
+  'plugin.gallery.emptyReadonly': 'No images',
+}

package/dist/plugins/gallery/locale/keys.d.ts

@@ -0,0 +1,5 @@
+import enLocale from './en.js'
+
+declare module '../../../core/types.js' {
+  interface I18nMessages extends Record<keyof typeof enLocale, string> {}
+}

package/dist/plugins/gallery/locale/ru.d.ts

@@ -0,0 +1,36 @@
+declare const _default: {
+    'plugin.gallery.title': string;
+    'plugin.gallery.upload': string;
+    'plugin.gallery.url': string;
+    'plugin.gallery.urlPrompt': string;
+    'plugin.gallery.dropzone': string;
+    'plugin.gallery.dropzoneUpload': string;
+    'plugin.gallery.dropzoneText': string;
+    'plugin.gallery.addMore': string;
+    'plugin.gallery.delete': string;
+    'plugin.gallery.deleteAll': string;
+    'plugin.gallery.caption': string;
+    'plugin.gallery.slot': string;
+    'plugin.gallery.layout': string;
+    'plugin.gallery.settings': string;
+    'plugin.gallery.lightbox': string;
+    'plugin.gallery.optNavigation': string;
+    'plugin.gallery.optLoop': string;
+    'plugin.gallery.optZoom': string;
+    'plugin.gallery.optCaptions': string;
+    'plugin.gallery.optThumbnails': string;
+    'plugin.gallery.optFullscreen': string;
+    'plugin.gallery.optAutoplay': string;
+    'plugin.gallery.styles': string;
+    'plugin.gallery.styleRadius': string;
+    'plugin.gallery.styleHeight': string;
+    'plugin.gallery.back': string;
+    'plugin.gallery.autoplayDelayPlaceholder': string;
+    'plugin.gallery.styleGap': string;
+    'plugin.gallery.layoutAuto': string;
+    'plugin.gallery.layoutMasonry': string;
+    'plugin.gallery.layoutTriptych': string;
+    'plugin.gallery.layoutTemplate': string;
+    'plugin.gallery.emptyReadonly': string;
+};
+export default _default;

package/dist/plugins/gallery/locale/ru.js

@@ -0,0 +1,35 @@
+export default {
+  'plugin.gallery.title': 'Галерея',
+  'plugin.gallery.upload': 'Загрузить',
+  'plugin.gallery.url': 'URL',
+  'plugin.gallery.urlPrompt': 'URL изображения:',
+  'plugin.gallery.dropzone': 'или перетащите файлы сюда',
+  'plugin.gallery.dropzoneUpload': 'Загрузите',
+  'plugin.gallery.dropzoneText': 'изображения с устройства или перетащите их сюда',
+  'plugin.gallery.addMore': 'Добавить ещё',
+  'plugin.gallery.delete': 'Удалить',
+  'plugin.gallery.deleteAll': 'Удалить всё',
+  'plugin.gallery.caption': 'Подпись',
+  'plugin.gallery.slot': 'Слот',
+  'plugin.gallery.layout': 'Макет',
+  'plugin.gallery.settings': 'Настройки',
+  'plugin.gallery.lightbox': 'Просмотр',
+  'plugin.gallery.optNavigation': 'Навигация',
+  'plugin.gallery.optLoop': 'Зацикливание',
+  'plugin.gallery.optZoom': 'Зум',
+  'plugin.gallery.optCaptions': 'Подписи',
+  'plugin.gallery.optThumbnails': 'Миниатюры',
+  'plugin.gallery.optFullscreen': 'Полный экран',
+  'plugin.gallery.optAutoplay': 'Автовоспроизведение',
+  'plugin.gallery.styles': 'Стили',
+  'plugin.gallery.styleRadius': 'Радиус',
+  'plugin.gallery.styleHeight': 'Высота',
+  'plugin.gallery.back': 'Назад',
+  'plugin.gallery.autoplayDelayPlaceholder': 'мс (например, 3000)',
+  'plugin.gallery.styleGap': 'Интервал',
+  'plugin.gallery.layoutAuto': 'Автоматический макет',
+  'plugin.gallery.layoutMasonry': 'Кладочный макет',
+  'plugin.gallery.layoutTriptych': 'Триптих',
+  'plugin.gallery.layoutTemplate': 'Шаблон макета',
+  'plugin.gallery.emptyReadonly': 'Нет изображений',
+}

package/dist/plugins/gallery/settings.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @typedef {Object} SettingsDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {() => void} syncCaptions
+ * @property {() => void} reRender   re-render the filled view (after layout change)
+ * @property {(operation: () => void) => void} mutate
+ */
+/**
+ * Build the settings dropdown panel: layout grid + lightbox options + styles.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {SettingsDeps} deps
+ * @returns {HTMLElement}
+ */
+export function buildSettingsPanel(wrapper: HTMLElement, state: import("./state.js").GalleryState, deps: SettingsDeps): HTMLElement;
+export type SettingsDeps = {
+    t: (key: string, fallback: string) => string;
+    syncCaptions: () => void;
+    /**
+     * re-render the filled view (after layout change)
+     */
+    reRender: () => void;
+    mutate: (operation: () => void) => void;
+};

package/dist/plugins/gallery/settings.js

@@ -0,0 +1,199 @@
+import { CSS } from './css.js'
+import { LAYOUT_ICONS } from './icons.js'
+import { ALL_LAYOUTS } from './layout.js'
+import { applyGalleryStyles } from './styles.js'
+
+/**
+ * @typedef {Object} SettingsDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {() => void} syncCaptions
+ * @property {() => void} reRender   re-render the filled view (after layout change)
+ * @property {(operation: () => void) => void} mutate
+ */
+
+/**
+ * Build the settings dropdown panel: layout grid + lightbox options + styles.
+ *
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {SettingsDeps} deps
+ * @returns {HTMLElement}
+ */
+export function buildSettingsPanel(wrapper, state, deps) {
+  const signal = /** @type {AbortController} */ (state.abortController).signal
+
+  const panel = document.createElement('div')
+  panel.className = CSS.dropdownPanel
+  panel.addEventListener('click', (e) => e.stopPropagation())
+
+  const form = document.createElement('div')
+  form.className = CSS.styleForm
+
+  form.appendChild(buildLayoutGroup(wrapper, state, deps, signal))
+  form.appendChild(buildLightboxGroup(state, deps, signal))
+  form.appendChild(buildStylesGroup(wrapper, state, deps, signal))
+
+  panel.appendChild(form)
+  return panel
+}
+
+/**
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {SettingsDeps} deps
+ * @param {AbortSignal} signal
+ */
+function buildLayoutGroup(wrapper, state, deps, signal) {
+  const group = createGroup(deps.t('layout', 'Layout'))
+
+  const grid = document.createElement('div')
+  grid.className = CSS.layoutGrid
+
+  for (const layout of ALL_LAYOUTS) {
+    const layoutLabel = layout === 'auto'
+      ? deps.t('layoutAuto', 'Automatic layout')
+      : layout === 'masonry'
+        ? deps.t('layoutMasonry', 'Masonry layout')
+        : layout === 'triptych'
+          ? deps.t('layoutTriptych', 'Triptych layout')
+          : `${deps.t('layoutTemplate', 'Layout template')} ${layout}`
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.className = `${CSS.layoutBtn}${state.data.layout === layout ? ` ${CSS.layoutBtnActive}` : ''}`
+    btn.innerHTML = LAYOUT_ICONS[layout] || ''
+    btn.title = layoutLabel
+    btn.setAttribute('aria-label', layoutLabel)
+    btn.setAttribute('aria-pressed', String(state.data.layout === layout))
+    btn.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
+    btn.addEventListener('click', () => {
+      deps.mutate(() => {
+        deps.syncCaptions()
+        state.data.layout = layout
+        deps.reRender()
+      })
+    }, { signal })
+    grid.appendChild(btn)
+  }
+  group.appendChild(grid)
+  return group
+}
+
+/**
+ * @param {import('./state.js').GalleryState} state
+ * @param {SettingsDeps} deps
+ * @param {AbortSignal} signal
+ */
+function buildLightboxGroup(state, deps, signal) {
+  const opts = state.data.options
+  const group = createGroup(deps.t('lightbox', 'Lightbox'))
+
+  const makeSwitch = (/** @type {string} */ label, /** @type {string} */ key, /** @type {boolean} */ defaultVal) => {
+    const row = document.createElement('div')
+    row.className = CSS.switchRow
+    const lbl = document.createElement('span')
+    lbl.className = CSS.switchLabel
+    lbl.textContent = label
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.className = `${CSS.switch}${(opts[key] ?? defaultVal) ? ` ${CSS.switchActive}` : ''}`
+    btn.setAttribute('aria-label', label)
+    btn.setAttribute('aria-pressed', String(Boolean(opts[key] ?? defaultVal)))
+    btn.addEventListener('mousedown', (e) => e.preventDefault(), { signal })
+    btn.addEventListener('click', () => {
+      deps.mutate(() => {
+        opts[key] = !(opts[key] ?? defaultVal)
+        btn.classList.toggle(CSS.switchActive)
+        btn.setAttribute('aria-pressed', String(Boolean(opts[key])))
+      })
+    }, { signal })
+    row.append(lbl, btn)
+    return row
+  }
+
+  group.appendChild(makeSwitch(deps.t('optNavigation', 'Navigation'), 'navigation', true))
+  group.appendChild(makeSwitch(deps.t('optLoop', 'Loop'), 'loop', true))
+  group.appendChild(makeSwitch(deps.t('optZoom', 'Zoom'), 'zoom', true))
+  group.appendChild(makeSwitch(deps.t('optCaptions', 'Captions'), 'captions', true))
+  group.appendChild(makeSwitch(deps.t('optThumbnails', 'Thumbnails'), 'thumbnails', false))
+  group.appendChild(makeSwitch(deps.t('optFullscreen', 'Fullscreen'), 'fullscreen', true))
+
+  // Autoplay interval
+  const autoplayRow = document.createElement('div')
+  autoplayRow.className = CSS.styleRow
+  const autoplayLbl = document.createElement('label')
+  autoplayLbl.className = CSS.styleLabel
+  const autoplaySpan = document.createElement('span')
+  autoplaySpan.textContent = deps.t('optAutoplay', 'Autoplay')
+  const autoplayInput = document.createElement('input')
+  autoplayInput.type = 'text'
+  autoplayInput.className = CSS.styleInput
+  autoplayInput.placeholder = deps.t('autoplayDelayPlaceholder', 'ms (e.g. 3000)')
+  autoplayInput.value = opts.autoplayInterval ? String(opts.autoplayInterval) : ''
+  autoplayInput.addEventListener('input', () => {
+    deps.mutate(() => {
+      const val = parseInt(autoplayInput.value, 10)
+      if (val > 0) opts.autoplayInterval = val
+      else delete opts.autoplayInterval
+    })
+  }, { signal })
+  autoplayLbl.append(autoplaySpan, autoplayInput)
+  autoplayRow.appendChild(autoplayLbl)
+  group.appendChild(autoplayRow)
+
+  return group
+}
+
+/**
+ * @param {HTMLElement} wrapper
+ * @param {import('./state.js').GalleryState} state
+ * @param {SettingsDeps} deps
+ * @param {AbortSignal} signal
+ */
+function buildStylesGroup(wrapper, state, deps, signal) {
+  const group = createGroup(deps.t('styles', 'Styles'))
+  const styles = state.data.styles
+
+  const makeStyleInput = (/** @type {string} */ key, /** @type {string} */ value) => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.className = CSS.styleInput
+    input.value = value || ''
+    input.addEventListener('input', () => {
+      deps.mutate(() => {
+        if (input.value) styles[key] = input.value
+        else delete styles[key]
+        applyGalleryStyles(wrapper, state)
+      })
+    }, { signal })
+    return input
+  }
+
+  const makeRow = (/** @type {string} */ label, /** @type {HTMLElement} */ input) => {
+    const row = document.createElement('div')
+    row.className = CSS.styleRow
+    const lbl = document.createElement('label')
+    lbl.className = CSS.styleLabel
+    const span = document.createElement('span')
+    span.textContent = label
+    lbl.append(span, input)
+    row.appendChild(lbl)
+    return row
+  }
+
+  group.appendChild(makeRow(deps.t('styleGap', 'Gap'), makeStyleInput('gap', styles.gap)))
+  group.appendChild(makeRow(deps.t('styleRadius', 'Radius'), makeStyleInput('borderRadius', styles.borderRadius)))
+  group.appendChild(makeRow(deps.t('styleHeight', 'Height'), makeStyleInput('height', styles.height)))
+
+  return group
+}
+
+/** @param {string} title @returns {HTMLElement} */
+function createGroup(title) {
+  const group = document.createElement('div')
+  group.className = CSS.styleGroup
+  const titleEl = document.createElement('div')
+  titleEl.className = CSS.styleGroupTitle
+  titleEl.textContent = title
+  group.appendChild(titleEl)
+  return group
+}

package/dist/plugins/gallery/slot.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @typedef {Object} SlotDeps
+ * @property {(key: string, fallback: string) => string} t
+ * @property {boolean} readOnly
+ * @property {(index: number) => void} onRemoveImage
+ * @property {(from: number, to: number) => void} onSwapImages
+ * @property {() => void} syncCaptions
+ *   Called before any structural mutation that re-renders — flushes
+ *   in-flight contenteditable text into `state.data`.
+ * @property {() => import('./state.js').GalleryState | undefined} getState
+ *   Indirect access used by drag handlers, since they need the live
+ *   `dragIndex` field on state.
+ */
+/**
+ * Build a filled slot with image, caption, remove button, and drag.
+ * `index` is the global image index.
+ *
+ * @param {{ url: string, caption: string }} img
+ * @param {number} index
+ * @param {AbortSignal} signal
+ * @param {SlotDeps} deps
+ * @returns {HTMLDivElement}
+ */
+export function createFilledSlot(img: {
+    url: string;
+    caption: string;
+}, index: number, signal: AbortSignal, deps: SlotDeps): HTMLDivElement;
+/**
+ * Build an unfilled placeholder for a template slot.
+ *
+ * @param {number} slotIndex
+ * @param {SlotDeps} deps
+ * @returns {HTMLDivElement}
+ */
+export function createEmptySlot(slotIndex: number, deps: SlotDeps): HTMLDivElement;
+/**
+ * Build a draggable image item displayed outside the active template slots.
+ *
+ * @param {{ url: string, caption: string }} img
+ * @param {number} globalIndex
+ * @param {AbortSignal} signal
+ * @param {SlotDeps} deps
+ * @returns {HTMLDivElement}
+ */
+export function createOverflowItem(img: {
+    url: string;
+    caption: string;
+}, globalIndex: number, signal: AbortSignal, deps: SlotDeps): HTMLDivElement;
+/**
+ * Attach external (file from OS) drop to a container.
+ *
+ * @param {HTMLElement} el
+ * @param {AbortSignal} signal
+ * @param {(files: File[]) => void} onFiles
+ * @returns {void}
+ */
+export function attachExternalDrop(el: HTMLElement, signal: AbortSignal, onFiles: (files: File[]) => void): void;
+export type SlotDeps = {
+    t: (key: string, fallback: string) => string;
+    readOnly: boolean;
+    onRemoveImage: (index: number) => void;
+    onSwapImages: (from: number, to: number) => void;
+    /**
+     *   Called before any structural mutation that re-renders — flushes
+     *   in-flight contenteditable text into `state.data`.
+     */
+    syncCaptions: () => void;
+    /**
+     *   Indirect access used by drag handlers, since they need the live
+     *   `dragIndex` field on state.
+     */
+    getState: () => import("./state.js").GalleryState | undefined;
+};