@shelamkoff/rector 1.0.1 → 1.0.3

package/dist/shared/galleryMasonry.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @typedef {Object} GalleryMasonryOptions
+ * @property {AbortSignal} [signal]
+ * @property {number} [columnWidth]
+ * @property {number} [transitionDuration]
+ * @property {number} [fadeInDuration]
+ * @property {number} [contentLoadTimeout]
+ * @property {(error: unknown) => void} [onError]
+ */
+/**
+ * Mount a Masonry instance once its container is connected and measurable.
+ *
+ * Editor plugins and renderers both create their DOM before the host inserts
+ * it into the document. Waiting for a non-zero box avoids a failed first
+ * layout and keeps the two rendering paths on the same implementation.
+ *
+ * @param {HTMLElement} container
+ * @param {HTMLElement[]} elements
+ * @param {GalleryMasonryOptions} [options]
+ */
+export function mountGalleryMasonry(container: HTMLElement, elements: HTMLElement[], options?: GalleryMasonryOptions): {
+    ready: Promise<any>;
+    destroy: () => void;
+    readonly instance: Masonry;
+};
+export type GalleryMasonryOptions = {
+    signal?: AbortSignal;
+    columnWidth?: number;
+    transitionDuration?: number;
+    fadeInDuration?: number;
+    contentLoadTimeout?: number;
+    onError?: (error: unknown) => void;
+};
+import { Masonry } from '@shelamkoff/masonry';

package/dist/shared/galleryMasonry.js

@@ -0,0 +1,152 @@
+// @ts-check
+import { Masonry } from '@shelamkoff/masonry'
+
+/**
+ * @typedef {Object} GalleryMasonryOptions
+ * @property {AbortSignal} [signal]
+ * @property {number} [columnWidth]
+ * @property {number} [transitionDuration]
+ * @property {number} [fadeInDuration]
+ * @property {number} [contentLoadTimeout]
+ * @property {(error: unknown) => void} [onError]
+ */
+
+/**
+ * Mount a Masonry instance once its container is connected and measurable.
+ *
+ * Editor plugins and renderers both create their DOM before the host inserts
+ * it into the document. Waiting for a non-zero box avoids a failed first
+ * layout and keeps the two rendering paths on the same implementation.
+ *
+ * @param {HTMLElement} container
+ * @param {HTMLElement[]} elements
+ * @param {GalleryMasonryOptions} [options]
+ */
+export function mountGalleryMasonry(container, elements, options = {}) {
+  const {
+    signal,
+    columnWidth = 240,
+    transitionDuration = 200,
+    fadeInDuration = 180,
+    contentLoadTimeout = 10_000,
+    onError,
+  } = options
+
+  /** @type {Masonry | null} */
+  let instance = null
+  /** @type {ResizeObserver | null} */
+  let waitingObserver = null
+  /** @type {number | null} */
+  let frameId = null
+  let destroyed = false
+  let starting = false
+  let settled = false
+  /** @type {(value: Masonry | null) => void} */
+  let resolveReady = () => {}
+
+  const ready = new Promise((resolve) => {
+    resolveReady = resolve
+  })
+
+  const settle = (/** @type {Masonry | null} */ value) => {
+    if (settled) return
+    settled = true
+    resolveReady(value)
+  }
+
+  const stopWaiting = () => {
+    waitingObserver?.disconnect()
+    waitingObserver = null
+    if (frameId !== null && typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(frameId)
+    }
+    frameId = null
+  }
+
+  const readGap = () => {
+    const style = getComputedStyle(container)
+    const value = Number.parseFloat(style.columnGap || style.gap)
+    return Number.isFinite(value) && value >= 0 ? value : 4
+  }
+
+  const start = async () => {
+    if (destroyed || starting || settled) return
+    if (!container.isConnected || container.getBoundingClientRect().width <= 0) return
+
+    starting = true
+    stopWaiting()
+
+    try {
+      instance = new Masonry(container, {
+        columnWidth,
+        layoutMode: 'masonry',
+        autoColSpan: false,
+        gap: readGap(),
+        transitionDuration,
+        fadeInDuration,
+        contentLoadTimeout,
+      })
+      await instance.append(elements.map((element, index) => ({
+        id: `gallery-item-${index}`,
+        element,
+        colSpan: 1,
+        meta: { index },
+      })))
+
+      if (destroyed) {
+        instance.destroy()
+        instance = null
+        settle(null)
+        return
+      }
+      settle(instance)
+    } catch (error) {
+      instance?.destroy()
+      instance = null
+      if (!destroyed) {
+        container.classList.add('eg--masonry-fallback')
+        onError?.(error)
+      }
+      settle(null)
+    }
+  }
+
+  const destroy = () => {
+    if (destroyed) return
+    destroyed = true
+    stopWaiting()
+    instance?.destroy()
+    instance = null
+    signal?.removeEventListener('abort', destroy)
+    settle(null)
+  }
+
+  if (signal?.aborted) {
+    destroy()
+  } else {
+    signal?.addEventListener('abort', destroy, { once: true })
+    if (typeof ResizeObserver === 'function') {
+      waitingObserver = new ResizeObserver(() => {
+        void start()
+      })
+      waitingObserver.observe(container)
+    }
+    if (typeof requestAnimationFrame === 'function') {
+      frameId = requestAnimationFrame(() => {
+        frameId = null
+        void start()
+      })
+    }
+    queueMicrotask(() => {
+      void start()
+    })
+  }
+
+  return {
+    ready,
+    destroy,
+    get instance() {
+      return instance
+    },
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shelamkoff/rector",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Extensible browser-native block editor with atomic history, versioned JSON, and document rendering",
   "type": "module",
   "sideEffects": [
@@ -46,14 +46,14 @@
       "types": "./dist/inline-tools/*.d.ts",
       "import": "./dist/inline-tools/*.js"
     },
-    "./renderer": {
-      "types": "./dist/renderer/index.d.ts",
-      "import": "./dist/renderer/index.js"
-    },
-    "./renderer/types": {
-      "types": "./dist/renderer/types.d.ts"
-    },
-    "./renderer/async": {
+    "./renderer": {
+      "types": "./dist/renderer/index.d.ts",
+      "import": "./dist/renderer/index.js"
+    },
+    "./renderer/types": {
+      "types": "./dist/renderer/types.d.ts"
+    },
+    "./renderer/async": {
       "types": "./dist/renderer/async.d.ts",
       "import": "./dist/renderer/async.js"
     },
@@ -78,39 +78,40 @@
     "./styles/themes/*": "./dist/core/themes/*.css",
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE",
-    "NOTICE",
-    "THIRD_PARTY_LICENSES.txt"
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "THIRD_PARTY_LICENSES.txt"
   ],
   "scripts": {
-    "build": "npm run docs:validate-readmes && node scripts/build-package.mjs",
+    "build": "npm run docs:validate-readmes && node scripts/build-package.mjs",
     "build:types": "node scripts/generate-declarations.mjs --out dist",
     "typecheck": "node node_modules/typescript/bin/tsc -p jsconfig.json",
-    "docs:validate-readmes": "node scripts/validate-extension-readmes.mjs",
-    "docs:sync": "npm run docs:validate-readmes && node scripts/sync-vitepress-readmes.mjs",
+    "docs:validate-readmes": "node scripts/validate-extension-readmes.mjs",
+    "docs:sync": "npm run docs:validate-readmes && node scripts/sync-vitepress-readmes.mjs",
     "docs:dev": "npm run docs:sync && vitepress dev docs --host 127.0.0.1",
     "docs:build": "npm run docs:sync && vitepress build docs",
     "docs:preview": "vitepress preview docs --host 127.0.0.1",
-    "docs:check": "npm run docs:build && node scripts/vitepress-docs-smoke.mjs && node scripts/vitepress-browser-smoke.mjs",
-    "test": "node --test",
-    "test:browser": "node tests/browser/run.mjs && node tests/browser/physical-history.mjs && node tests/browser/heap-gate.mjs",
-    "test:plugin-source": "node scripts/plugin-source-audit.mjs",
-    "test:plugin-locales": "node scripts/plugin-locale-audit.mjs",
-    "test:docs": "npm run docs:validate-readmes && npm run test:plugin-source && npm run test:plugin-locales && node scripts/documentation-contract-audit.mjs && node scripts/readme-smoke.mjs",
+    "docs:check": "npm run docs:build && node scripts/vitepress-docs-smoke.mjs && node scripts/vitepress-browser-smoke.mjs",
+    "test": "node --test",
+    "test:browser": "node tests/browser/run.mjs && node tests/browser/physical-history.mjs && node tests/browser/heap-gate.mjs",
+    "test:plugin-source": "node scripts/plugin-source-audit.mjs",
+    "test:plugin-locales": "node scripts/plugin-locale-audit.mjs",
+    "test:docs": "npm run docs:validate-readmes && npm run test:plugin-source && npm run test:plugin-locales && node scripts/documentation-contract-audit.mjs && node scripts/readme-smoke.mjs",
     "test:types": "node --test shared/declarationParity.test.js",
     "test:package": "node scripts/package-consumer-gate.mjs",
     "prepublishOnly": "npm run typecheck && npm test && npm run test:browser && npm run test:docs && npm run test:types && npm run test:package",
     "prepack": "npm run build"
   },
-  "dependencies": {
-    "@shelamkoff/carousel": "^1.0.0",
+  "dependencies": {
+    "@shelamkoff/carousel": "^1.0.0",
     "@shelamkoff/color-picker": "^1.0.0",
     "@shelamkoff/event-bus": "^1.0.0",
     "@shelamkoff/cropper": "^1.0.0",
-    "@shelamkoff/expose": "^1.0.0"
+    "@shelamkoff/expose": "^1.0.0",
+    "@shelamkoff/masonry": "^1.0.0"
   },
   "devDependencies": {
     "@tabler/icons-vue": "^3.41.1",
@@ -135,7 +136,7 @@
     "type": "git",
     "url": "git+https://github.com/Shelamkoff/editor.git"
   },
-  "homepage": "https://shelamkoff.github.io/editor/",
+  "homepage": "https://shelamkoff.github.io/editor/",
   "bugs": {
     "url": "https://github.com/Shelamkoff/editor/issues"
   },