@shelamkoff/rector 1.0.0

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

@@ -0,0 +1,13 @@
+/** Toolbox icon, 16×16 — gallery (two stacked frames). */
+export const ICON: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 5.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666\"/><path d=\"M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1\"/><path d=\"M17 7h.01\"/><path d=\"M7 13l3.644 -3.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644\"/><path d=\"M15 12l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l2.644 2.644\"/></svg>";
+/** Dropzone large icon, 48×48. */
+export const ICON_SELECT: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 5.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666\"/><path d=\"M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1\"/><path d=\"M17 7h.01\"/><path d=\"M7 13l3.644 -3.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644\"/><path d=\"M15 12l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l2.644 2.644\"/></svg>";
+export const ICON_UPLOAD: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"/><path d=\"M7 9l5 -5l5 5\"/><path d=\"M12 4v12\"/></svg>";
+export const ICON_URL: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 15l6 -6\"/><path d=\"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464\"/><path d=\"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463\"/></svg>";
+export const ICON_ADD_IMAGE: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 8h.01\"/><path d=\"M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5\"/><path d=\"M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4\"/><path d=\"M14 14l1 -1c.67 -.644 1.45 -.824 2.182 -.54\"/><path d=\"M16 19h6\"/><path d=\"M19 16v6\"/></svg>";
+export const ICON_BACK: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 6l-6 6l6 6\"/></svg>";
+export const ICON_CHEVRON_RIGHT: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6l-6 6\"/></svg>";
+export const ICON_TRASH: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 7h16\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 11v6\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 11v6\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3\"/></svg>";
+export const ICON_SETTINGS: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"/></svg>";
+/** @type {Record<string, string>} */
+export const LAYOUT_ICONS: Record<string, string>;

package/dist/plugins/gallery/icons.js

@@ -0,0 +1,45 @@
+// Tabler icons + layout thumbnails used by the Gallery plugin.
+
+/** Toolbox icon, 16×16 — gallery (two stacked frames). */
+export const ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666"/><path d="M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1"/><path d="M17 7h.01"/><path d="M7 13l3.644 -3.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644"/><path d="M15 12l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l2.644 2.644"/></svg>'
+
+/** Dropzone large icon, 48×48. */
+export const ICON_SELECT = '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666"/><path d="M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1"/><path d="M17 7h.01"/><path d="M7 13l3.644 -3.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644"/><path d="M15 12l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l2.644 2.644"/></svg>'
+
+// Action bar icons, 14×14
+export const ICON_UPLOAD = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/><path d="M7 9l5 -5l5 5"/><path d="M12 4v12"/></svg>'
+export const ICON_URL = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 15l6 -6"/><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"/><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"/></svg>'
+export const ICON_ADD_IMAGE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15 8h.01"/><path d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4"/><path d="M14 14l1 -1c.67 -.644 1.45 -.824 2.182 -.54"/><path d="M16 19h6"/><path d="M19 16v6"/></svg>'
+export const ICON_BACK = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6"/></svg>'
+export const ICON_CHEVRON_RIGHT = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6l-6 6"/></svg>'
+export const ICON_TRASH = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7h16"/><path stroke-linecap="round" stroke-linejoin="round" d="M10 11v6"/><path stroke-linecap="round" stroke-linejoin="round" d="M14 11v6"/><path stroke-linecap="round" stroke-linejoin="round" d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>'
+export const ICON_SETTINGS = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0"/></svg>'
+
+// Layout thumbnails (24×24 fill-based) — used in the layout picker grid.
+const S = 'xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"'
+const F = 'fill="currentColor"'
+
+/** @type {Record<string, string>} */
+export const LAYOUT_ICONS = {
+  auto:     `<svg ${S}><rect x="3" y="3" width="8.5" height="8.5" rx="1" ${F}/><rect x="12.5" y="3" width="8.5" height="12" rx="1" ${F}/><rect x="3" y="12.5" width="8.5" height="8.5" rx="1" ${F}/></svg>`,
+  '1':      `<svg ${S}><rect x="3" y="3" width="18" height="18" rx="2" ${F}/></svg>`,
+  '2':      `<svg ${S}><rect x="3" y="3" width="8.5" height="18" rx="1" ${F}/><rect x="12.5" y="3" width="8.5" height="18" rx="1" ${F}/></svg>`,
+  '3a':     `<svg ${S}><rect x="3" y="3" width="11" height="18" rx="1" ${F}/><rect x="15" y="3" width="6" height="8.5" rx="1" ${F}/><rect x="15" y="12.5" width="6" height="8.5" rx="1" ${F}/></svg>`,
+  '3b':     `<svg ${S}><rect x="3" y="3" width="6" height="8.5" rx="1" ${F}/><rect x="3" y="12.5" width="6" height="8.5" rx="1" ${F}/><rect x="10" y="3" width="11" height="18" rx="1" ${F}/></svg>`,
+  '3c':     `<svg ${S}><rect x="3" y="3" width="18" height="11" rx="1" ${F}/><rect x="3" y="15" width="8.5" height="6" rx="1" ${F}/><rect x="12.5" y="15" width="8.5" height="6" rx="1" ${F}/></svg>`,
+  '4a':     `<svg ${S}><rect x="3" y="3" width="8.5" height="8.5" rx="1" ${F}/><rect x="12.5" y="3" width="8.5" height="8.5" rx="1" ${F}/><rect x="3" y="12.5" width="8.5" height="8.5" rx="1" ${F}/><rect x="12.5" y="12.5" width="8.5" height="8.5" rx="1" ${F}/></svg>`,
+  '4b':     `<svg ${S}><rect x="3" y="3" width="11" height="18" rx="1" ${F}/><rect x="15" y="3" width="6" height="5.3" rx="1" ${F}/><rect x="15" y="9.3" width="6" height="5.3" rx="1" ${F}/><rect x="15" y="15.7" width="6" height="5.3" rx="1" ${F}/></svg>`,
+  '4c':     `<svg ${S}><rect x="3" y="3" width="18" height="11" rx="1" ${F}/><rect x="3" y="15" width="5.3" height="6" rx="1" ${F}/><rect x="9.3" y="15" width="5.3" height="6" rx="1" ${F}/><rect x="15.7" y="15" width="5.3" height="6" rx="1" ${F}/></svg>`,
+  '5a':     `<svg ${S}><rect x="3" y="3" width="8.5" height="10" rx="1" ${F}/><rect x="12.5" y="3" width="8.5" height="10" rx="1" ${F}/><rect x="3" y="14" width="5.3" height="7" rx="1" ${F}/><rect x="9.3" y="14" width="5.3" height="7" rx="1" ${F}/><rect x="15.7" y="14" width="5.3" height="7" rx="1" ${F}/></svg>`,
+  '5b':     `<svg ${S}><rect x="3" y="3" width="10" height="18" rx="1" ${F}/><rect x="14" y="3" width="3" height="8.5" rx="1" ${F}/><rect x="18" y="3" width="3" height="8.5" rx="1" ${F}/><rect x="14" y="12.5" width="3" height="8.5" rx="1" ${F}/><rect x="18" y="12.5" width="3" height="8.5" rx="1" ${F}/></svg>`,
+  '5c':     `<svg ${S}><rect x="3" y="3" width="18" height="11" rx="1" ${F}/><rect x="3" y="15" width="3.75" height="6" rx="1" ${F}/><rect x="7.75" y="15" width="3.75" height="6" rx="1" ${F}/><rect x="12.5" y="15" width="3.75" height="6" rx="1" ${F}/><rect x="17.25" y="15" width="3.75" height="6" rx="1" ${F}/></svg>`,
+  '6a':     `<svg ${S}><rect x="3" y="3" width="5.3" height="10" rx="1" ${F}/><rect x="9.3" y="3" width="5.3" height="10" rx="1" ${F}/><rect x="15.7" y="3" width="5.3" height="10" rx="1" ${F}/><rect x="3" y="14" width="5.3" height="7" rx="1" ${F}/><rect x="9.3" y="14" width="5.3" height="7" rx="1" ${F}/><rect x="15.7" y="14" width="5.3" height="7" rx="1" ${F}/></svg>`,
+  '6b':     `<svg ${S}><rect x="3" y="3" width="8.5" height="18" rx="1" ${F}/><rect x="12.5" y="3" width="8.5" height="5.3" rx="1" ${F}/><rect x="12.5" y="9.3" width="8.5" height="5.3" rx="1" ${F}/><rect x="12.5" y="15.7" width="2.5" height="5.3" rx="1" ${F}/><rect x="15.5" y="15.7" width="2.5" height="5.3" rx="1" ${F}/><rect x="18.5" y="15.7" width="2.5" height="5.3" rx="1" ${F}/></svg>`,
+  '6c':     `<svg ${S}><rect x="3" y="3" width="8.5" height="10" rx="1" ${F}/><rect x="12.5" y="3" width="8.5" height="10" rx="1" ${F}/><rect x="3" y="14" width="3.75" height="7" rx="1" ${F}/><rect x="7.75" y="14" width="3.75" height="7" rx="1" ${F}/><rect x="12.5" y="14" width="3.75" height="7" rx="1" ${F}/><rect x="17.25" y="14" width="3.75" height="7" rx="1" ${F}/></svg>`,
+  triptych: `<svg ${S}><rect x="3" y="3" width="5.3" height="18" rx="1" ${F}/><rect x="9.3" y="3" width="5.3" height="18" rx="1" ${F}/><rect x="15.7" y="3" width="5.3" height="18" rx="1" ${F}/></svg>`,
+  masonry:  `<svg ${S}><rect x="3" y="3" width="5.3" height="9" rx="1" ${F}/><rect x="3" y="13" width="5.3" height="8" rx="1" ${F}/><rect x="9.3" y="3" width="5.3" height="6" rx="1" ${F}/><rect x="9.3" y="10" width="5.3" height="11" rx="1" ${F}/><rect x="15.7" y="3" width="5.3" height="11" rx="1" ${F}/><rect x="15.7" y="15" width="5.3" height="6" rx="1" ${F}/></svg>`,
+  'poly-5':      `<svg ${S}><rect x="3" y="7.5" width="2.8" height="9" rx=".7" ${F}/><rect x="6.3" y="5.5" width="3.3" height="13" rx=".7" ${F}/><rect x="10.1" y="3" width="3.8" height="18" rx=".7" ${F}/><rect x="14.4" y="5.5" width="3.3" height="13" rx=".7" ${F}/><rect x="18.2" y="7.5" width="2.8" height="9" rx=".7" ${F}/></svg>`,
+  'poly-3arch':  `<svg ${S}><rect x="3" y="5.5" width="5.4" height="13" rx=".7" ${F}/><rect x="8.9" y="3" width="6.2" height="18" rx=".7" ${F}/><rect x="15.6" y="5.5" width="5.4" height="13" rx=".7" ${F}/></svg>`,
+  'poly-5flat':  `<svg ${S}><rect x="3" y="3" width="2.8" height="10" rx=".7" ${F}/><rect x="6.3" y="3" width="3.3" height="13.5" rx=".7" ${F}/><rect x="10.1" y="3" width="3.8" height="18" rx=".7" ${F}/><rect x="14.4" y="3" width="3.3" height="13.5" rx=".7" ${F}/><rect x="18.2" y="3" width="2.8" height="10" rx=".7" ${F}/></svg>`,
+  'poly-3steps': `<svg ${S}><rect x="3" y="3" width="5.3" height="12" rx=".7" ${F}/><rect x="9.3" y="5" width="5.3" height="12" rx=".7" ${F}/><rect x="15.7" y="7" width="5.3" height="12" rx=".7" ${F}/></svg>`,
+}

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

@@ -0,0 +1,126 @@
+import type {} from './locale/keys.js'
+/**
+ * @typedef {(file: File, context: { signal: AbortSignal }) => Promise<{ url: string, alt?: string }>} UploadFn
+ *
+ * @typedef {Object} GalleryConfig
+ * @property {UploadFn} [uploadFile] Uploads one browser file. Without this callback the plugin reads each file into a data URL stored in the document.
+ * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} [actions] Additional application-owned image sources. `icon` is trusted application markup; never pass user-authored HTML.
+ * @property {boolean} [injectStyles=true] Whether the editor should load the built-in gallery stylesheet.
+ * @property {string} [css] Additional stylesheet URL, or the replacement URL when `injectStyles` is `false`.
+ */
+/**
+ * Editable image gallery with upload-source extensions, ordering, and layout controls.
+ * Internal logic is split across:
+ *  - `state.js`     — per-block state container (replaces module WeakMap)
+ *  - `uploader.js`  — multi-file upload pipeline
+ *  - `layout.js`    — layout selection algorithms
+ *  - `slot.js`      — slot/overflow item DOM builders + drag handling
+ *  - `view-empty.js`/ `view-filled.js` — DOM rendering for the two states
+ *  - `settings.js`  — settings dropdown form
+ *  - `styles.js`    — gallery-level inline style application
+ * @extends {BlockPluginAbstract<GalleryConfig>}
+ */
+export class Gallery extends BlockPluginAbstract<GalleryConfig> {
+    static isTextBlock: boolean;
+    static styles: string[];
+    /**
+     * Create a Gallery instance with the supplied consumer configuration.
+     * @param {GalleryConfig} [config]
+     */
+    constructor(config?: GalleryConfig);
+    type: string;
+    icon: string;
+    inlineTools: boolean;
+    pasteConfig: {
+        files: string[];
+    };
+    /**
+     * Return the localized toolbox label for this block.
+     * @returns {string}
+     */
+    get title(): string;
+    /**
+     * Create the editable DOM owned by this block instance.
+     * @param {Record<string, unknown>} data
+     * @param {import('../../core/types.js').BlockMutationContext} context
+     * @returns {HTMLElement}
+     */
+    render(data: Record<string, unknown>, context: import("../../core/types.js").BlockMutationContext): HTMLElement;
+    /**
+     * Serialize the current block DOM into document data.
+     * @param {HTMLElement} element
+     * @returns {Record<string, unknown>}
+     */
+    save(element: HTMLElement): Record<string, unknown>;
+    /**
+     * Check whether serialized data satisfies this block's schema.
+     * @param {Record<string, unknown>} data
+     * @returns {boolean}
+     */
+    validate(data: Record<string, unknown>): boolean;
+    /**
+     * Check whether the block has no meaningful user content.
+     * @param {HTMLElement} element
+     * @returns {boolean}
+     */
+    isEmpty(element: HTMLElement): boolean;
+    /**
+     * Extract neutral text that can initialize another block type.
+     * @param {HTMLElement} element
+     * @returns {Record<string, unknown>}
+     */
+    exportData(element: HTMLElement): Record<string, unknown>;
+    /**
+     * Handle supported pasted content for this block.
+     * @param {import('../../types.js').PasteEvent} event
+     * @returns {Record<string, unknown> | null}
+     */
+    onPaste(event: import("../../types.js").PasteEvent): Record<string, unknown> | null;
+    /**
+     * Keep pasted files inside one undo transaction until upload completes.
+     * @param {HTMLElement} element
+     * @returns {Promise<void>}
+     */
+    waitForPaste(element: HTMLElement): Promise<void>;
+    /**
+     * Release listeners and resources owned by this block element.
+     * @param {HTMLElement} element
+     * @returns {void}
+     */
+    destroy(element: HTMLElement): void;
+    #private;
+}
+export type UploadFn = (file: File, context: {
+    signal: AbortSignal;
+}) => Promise<{
+    url: string;
+    alt?: string;
+}>;
+export type GalleryConfig = {
+    /**
+     * Uploads one browser file. Without this callback the plugin reads each file into a data URL stored in the document.
+     */
+    uploadFile?: UploadFn;
+    /**
+     * Additional application-owned image sources. `icon` is trusted application markup; never pass user-authored HTML.
+     */
+    actions?: Array<{
+        icon?: string;
+        label: string;
+        handler: (context: {
+            signal: AbortSignal;
+        }) => Promise<Array<{
+            url: string;
+            alt?: string;
+        }> | null>;
+    }>;
+    /**
+     * Whether the editor should load the built-in gallery stylesheet.
+     */
+    injectStyles?: boolean;
+    /**
+     * Additional stylesheet URL, or the replacement URL when `injectStyles` is `false`.
+     */
+    css?: string;
+};
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js';

package/dist/plugins/gallery/index.js

@@ -0,0 +1,355 @@
+import { resolvePath } from '../../shared/resolvePath.js'
+import { isSupportedImageFile, triggerFileInput } from '../shared/fileInput.js'
+import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
+import { validateGalleryData } from '../../shared/blockDataValidators.js'
+import { CSS } from './css.js'
+import { ICON } from './icons.js'
+import { GalleryState, normalizeGalleryData, emptyGalleryData } from './state.js'
+import { GalleryUploader } from './uploader.js'
+import { renderEmptyView } from './view-empty.js'
+import { renderFilledView } from './view-filled.js'
+import { sanitizeMediaUrl } from '../../shared/sanitize/sanitizeUrl.js'
+
+const editorStyles = resolvePath('./gallery.css', import.meta.url)
+
+/**
+ * @typedef {(file: File, context: { signal: AbortSignal }) => Promise<{ url: string, alt?: string }>} UploadFn
+ *
+ * @typedef {Object} GalleryConfig
+ * @property {UploadFn} [uploadFile] Uploads one browser file. Without this callback the plugin reads each file into a data URL stored in the document.
+ * @property {Array<{ icon?: string, label: string, handler: (context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null> }>} [actions] Additional application-owned image sources. `icon` is trusted application markup; never pass user-authored HTML.
+ * @property {boolean} [injectStyles=true] Whether the editor should load the built-in gallery stylesheet.
+ * @property {string} [css] Additional stylesheet URL, or the replacement URL when `injectStyles` is `false`.
+ */
+
+/**
+ * Editable image gallery with upload-source extensions, ordering, and layout controls.
+ * Internal logic is split across:
+ *  - `state.js`     — per-block state container (replaces module WeakMap)
+ *  - `uploader.js`  — multi-file upload pipeline
+ *  - `layout.js`    — layout selection algorithms
+ *  - `slot.js`      — slot/overflow item DOM builders + drag handling
+ *  - `view-empty.js`/ `view-filled.js` — DOM rendering for the two states
+ *  - `settings.js`  — settings dropdown form
+ *  - `styles.js`    — gallery-level inline style application
+ * @extends {BlockPluginAbstract<GalleryConfig>}
+ */
+export class Gallery extends BlockPluginAbstract {
+  static isTextBlock = false
+  static styles = [editorStyles]
+
+  type = 'gallery'
+  icon = ICON
+  inlineTools = false
+
+  pasteConfig = {
+    files: ['image/*'],
+  }
+
+  #uploader
+  /** Per-block state, encapsulated to this plugin instance. */
+  #states = /** @type {WeakMap<HTMLElement, GalleryState>} */ (new WeakMap())
+  /** @type {WeakMap<HTMLElement, import('../../core/types').BlockMutationContext>} */
+  #contexts = new WeakMap()
+  /**
+   * Create a Gallery instance with the supplied consumer configuration.
+   * @param {GalleryConfig} [config]
+   */
+  constructor(config) {
+    super(config)
+    this.#uploader = new GalleryUploader(this._config)
+  }
+
+  /**
+   * Return the localized toolbox label for this block.
+   * @returns {string}
+   */
+  get title() {
+    return this._t('title', 'Gallery')
+  }
+
+  // ── BlockPlugin contract ───────────────────────────────────────────────────
+
+  /**
+   * Create the editable DOM owned by this block instance.
+   * @param {Record<string, unknown>} data
+   * @param {import('../../core/types').BlockMutationContext} context
+   * @returns {HTMLElement}
+   */
+  render(data, context) {
+    const blockData = normalizeGalleryData(data)
+    const pendingFile = /** @type {File | null} */ (/** @type {any} */ (data)?._pendingFile || null)
+
+    const wrapper = document.createElement('div')
+    wrapper.classList.add(CSS.wrapper)
+    wrapper.contentEditable = 'false'
+    wrapper.tabIndex = -1
+
+    const state = new GalleryState(blockData, pendingFile ? [pendingFile] : [])
+    this.#states.set(wrapper, state)
+    this.#contexts.set(wrapper, context)
+
+    if (blockData.images.length > 0) {
+      this.#renderFilled(wrapper)
+    } else {
+      this.#renderEmpty(wrapper)
+    }
+
+    if (state.pendingFiles.length > 0 && !context.readOnly) {
+      const files = state.pendingFiles
+      state.pendingFiles = []
+      state.pendingUpload = this.#handleFiles(wrapper, files).finally(() => {
+        if (this.#states.get(wrapper) === state) state.pendingUpload = null
+      })
+    }
+
+    return wrapper
+  }
+
+  /**
+   * Serialize the current block DOM into document data.
+   * @param {HTMLElement} element
+   * @returns {Record<string, unknown>}
+   */
+  save(element) {
+    const state = this.#states.get(element)
+    if (!state) return emptyGalleryData()
+    this.#syncCaptions(element)
+    return {
+      images: state.data.images.map((img) => ({ ...img })),
+      layout: state.data.layout,
+      styles: { ...state.data.styles },
+      options: { ...state.data.options },
+    }
+  }
+
+  /**
+   * Check whether serialized data satisfies this block's schema.
+   * @param {Record<string, unknown>} data
+   * @returns {boolean}
+   */
+  validate(data) {
+    return validateGalleryData(data)
+  }
+
+  /**
+   * Check whether the block has no meaningful user content.
+   * @param {HTMLElement} element
+   * @returns {boolean}
+   */
+  isEmpty(element) {
+    const state = this.#states.get(element)
+    return !state || state.data.images.length === 0
+  }
+
+  /**
+   * Extract neutral text that can initialize another block type.
+   * @param {HTMLElement} element
+   * @returns {Record<string, unknown>}
+   */
+  exportData(element) {
+    const state = this.#states.get(element)
+    return { text: state?.data.images.map(image => image.caption).filter(Boolean).join(' ') || '' }
+  }
+
+  /**
+   * Handle supported pasted content for this block.
+   * @param {import('../../types').PasteEvent} event
+   * @returns {Record<string, unknown> | null}
+   */
+  onPaste(event) {
+    if (event.type === 'file') {
+      // Files dropped via paste — push immediately into the new block.
+      // Render path will then upload via the wrapper bound to this default data.
+      const data = /** @type {any} */ (emptyGalleryData())
+      data._pendingFile = event.file
+      return data
+    }
+    return null
+  }
+
+  /**
+   * Keep pasted files inside one undo transaction until upload completes.
+   * @param {HTMLElement} element
+   * @returns {Promise<void>}
+   */
+  waitForPaste(element) {
+    return this.#states.get(element)?.pendingUpload ?? Promise.resolve()
+  }
+
+  /**
+   * Release listeners and resources owned by this block element.
+   * @param {HTMLElement} element
+   * @returns {void}
+   */
+  destroy(element) {
+    const state = this.#states.get(element)
+    if (!state) return
+    state.dispose()
+    this.#states.delete(element)
+    this.#contexts.delete(element)
+  }
+
+  // ── Internal coordination ──────────────────────────────────────────────────
+
+  /** @param {string} key @param {string} fallback @returns {string} */
+  #t = (key, fallback) => this._t(key, fallback)
+
+  /** @param {HTMLElement} wrapper @param {() => void} operation @returns {void} */
+  #mutate = (wrapper, operation) => {
+    this.#contexts.get(wrapper)?.mutate(operation)
+  }
+
+  /**
+   * Flush in-flight contenteditable caption text into state before any
+   * mutation that would re-render and tear down the live caption nodes.
+   *
+   * @param {HTMLElement} wrapper
+   * @returns {void}
+   */
+  #syncCaptions(wrapper) {
+    const state = this.#states.get(wrapper)
+    if (!state) return
+    const slots = wrapper.querySelectorAll(`.${CSS.slot}.${CSS.slotFilled}`)
+    slots.forEach((slotEl) => {
+      const slot = /** @type {HTMLElement} */ (slotEl)
+      const idx = parseInt(slot.dataset.slot || slot.dataset.index || '0', 10)
+      const img = state.data.images[idx]
+      if (img) {
+        const caption = slot.querySelector(`.${CSS.slotCaption}`)
+        img.caption = caption?.textContent?.trim() || ''
+      }
+    })
+  }
+
+  /** @param {HTMLElement} wrapper @returns {void} */
+  #renderEmpty(wrapper) {
+    const state = this.#states.get(wrapper)
+    if (!state) return
+    renderEmptyView(wrapper, state, {
+      t: this.#t,
+      readOnly: Boolean(this.#contexts.get(wrapper)?.readOnly),
+      onUploadClick: () => this.#triggerFileInput(wrapper),
+      onFilesDropped: (files) => { void this.#handleFiles(wrapper, files) },
+      customActions: this._config.actions || [],
+      runCustomAction: async (handler) => this.#runCustomAction(wrapper, handler),
+    })
+  }
+
+  /** @param {HTMLElement} wrapper @returns {void} */
+  #renderFilled(wrapper) {
+    const state = this.#states.get(wrapper)
+    if (!state) return
+    renderFilledView(wrapper, state, {
+      t: this.#t,
+      readOnly: Boolean(this.#contexts.get(wrapper)?.readOnly),
+      syncCaptions: () => this.#syncCaptions(wrapper),
+      getState: () => this.#states.get(wrapper),
+      reRender: () => this.#renderFilled(wrapper),
+      renderEmpty: () => this.#renderEmpty(wrapper),
+      mutate: (operation) => this.#mutate(wrapper, operation),
+      onFilesDropped: (files) => { void this.#handleFiles(wrapper, files) },
+      onTriggerFileInput: () => this.#triggerFileInput(wrapper),
+      onPromptUrl: () => this.#promptUrl(wrapper),
+      onDeleteAll: () => this.#deleteAll(wrapper),
+      customActions: this._config.actions || [],
+      runCustomAction: async (handler) => this.#runCustomAction(wrapper, handler),
+    })
+  }
+
+  /** @param {HTMLElement} wrapper @returns {void} */
+  #triggerFileInput(wrapper) {
+    if (this.#contexts.get(wrapper)?.readOnly) return
+    triggerFileInput({
+      accept: 'image/*',
+      multiple: true,
+      signal: this.#states.get(wrapper)?.abortController?.signal,
+      onFiles: (files) => void this.#handleFiles(wrapper, files),
+    })
+  }
+
+  /**
+   * @param {HTMLElement} wrapper
+   * @param {File[]} files
+   * @returns {Promise<void>}
+   */
+  async #handleFiles(wrapper, files) {
+    const state = this.#states.get(wrapper)
+    const context = this.#contexts.get(wrapper)
+    if (!state || !context || context.readOnly) return
+    const accepted = files.filter(isSupportedImageFile)
+    if (accepted.length === 0) return
+    const controller = state.beginTask()
+    wrapper.classList.add(CSS.loading)
+    try {
+      await this.#uploader.handle(accepted, (added) => {
+        if (controller.signal.aborted || this.#states.get(wrapper) !== state) return
+        this.#mutate(wrapper, () => {
+          this.#syncCaptions(wrapper)
+          state.data.images.push(...added)
+          this.#renderFilled(wrapper)
+        })
+      }, controller.signal)
+    } finally {
+      if (state.finishTask(controller)) wrapper.classList.remove(CSS.loading)
+    }
+  }
+
+  /**
+   * @param {HTMLElement} wrapper
+   * @param {(context: { signal: AbortSignal }) => Promise<Array<{url: string, alt?: string}> | null>} handler
+   * @returns {Promise<void>}
+   */
+  async #runCustomAction(wrapper, handler) {
+    const state = this.#states.get(wrapper)
+    if (!state || this.#contexts.get(wrapper)?.readOnly) return
+    const controller = state.beginTask()
+    wrapper.classList.add(CSS.loading)
+    try {
+      const result = await handler({ signal: controller.signal })
+      if (!controller.signal.aborted && this.#states.get(wrapper) === state && Array.isArray(result) && result.length > 0) {
+        const added = result.flatMap(item => {
+          const url = sanitizeMediaUrl(item?.url || '')
+          if (!url) return []
+          return [{ url, caption: typeof item?.alt === 'string' ? item.alt : '' }]
+        })
+        if (!added.length) return
+        this.#mutate(wrapper, () => {
+          this.#syncCaptions(wrapper)
+          state.data.images.push(...added)
+          this.#renderFilled(wrapper)
+        })
+      }
+    } catch {
+      // Action cancelled or failed.
+    } finally {
+      if (state.finishTask(controller)) wrapper.classList.remove(CSS.loading)
+    }
+  }
+
+  /** @param {HTMLElement} wrapper @returns {void} */
+  #promptUrl(wrapper) {
+    const state = this.#states.get(wrapper)
+    if (!state || this.#contexts.get(wrapper)?.readOnly) return
+    const url = sanitizeMediaUrl(prompt(this.#t('urlPrompt', 'Image URL:')) || '')
+    if (url) {
+      this.#mutate(wrapper, () => {
+        this.#syncCaptions(wrapper)
+        state.data.images.push({ url, caption: '' })
+        this.#renderFilled(wrapper)
+      })
+    }
+  }
+
+  /** @param {HTMLElement} wrapper @returns {void} */
+  #deleteAll(wrapper) {
+    const state = this.#states.get(wrapper)
+    if (!state) return
+    state.cancelTasks()
+    wrapper.classList.remove(CSS.loading)
+    this.#mutate(wrapper, () => {
+      state.data.images = []
+      this.#renderEmpty(wrapper)
+    })
+  }
+}

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

@@ -0,0 +1,35 @@
+/**
+ * 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: string): number;
+/**
+ * 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: number, orientations: string[]): string;
+/**
+ * Initial template guess for `auto` layout, before images are loaded
+ * (no orientation info available).
+ *
+ * @param {number} count
+ * @returns {string}
+ */
+export function pickInitialAutoTemplate(count: number): string;
+/**
+ * Classify an image's orientation from its loaded dimensions.
+ * @param {number} width
+ * @param {number} height
+ * @returns {'L' | 'P' | 'S'}
+ */
+export function classifyOrientation(width: number, height: number): "L" | "P" | "S";
+/** All known layout names (auto, '1'..'6c', triptych, masonry, poly-*). */
+export const ALL_LAYOUTS: string[];
+/** Maximum number of images visible in template-based layouts. */
+export const MAX_VISIBLE: 6;