@plumix/plugin-media 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Plumix Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,211 @@
+# @plumix/plugin-media
+
+Media library for Plumix. Registers a `media` entry type, RPC procedures
+for uploads, and an admin Media Library page (grid + thumbnails +
+drag-to-upload + delete + alt-text editing + Copy URL + infinite scroll).
+
+Two upload modes, picked automatically based on what your runtime
+exposes:
+
+- **Presigned PUT** — bytes go straight from the browser to your bucket
+  via an AWS-SigV4 query-signed URL. No worker hop, no CPU cost on
+  upload. Requires S3 API credentials (see below) and bucket CORS rules.
+- **Worker-routed** — bytes flow through the worker via the storage
+  binding's `put()`. Works the moment the binding is attached, no
+  credentials or CORS configuration. Capped at the runtime's request-
+  body limit (~100 MiB on Workers free).
+
+You don't pick — `media.createUploadUrl` returns a presigned URL when
+`storage.presignPut` is wired up, otherwise a `/_plumix/media/upload/<id>`
+URL routed through the worker. The browser PUTs to whichever it gets.
+
+## Install
+
+```bash
+pnpm add @plumix/plugin-media
+```
+
+Wire it into `plumix.config.ts`. The plugin reads two slots from the
+host config: `storage` (where bytes live) and `imageDelivery` (how
+thumbnails are derived). The Cloudflare runtime ships compatible
+implementations.
+
+```ts
+import { auth, plumix } from "plumix";
+
+import { media } from "@plumix/plugin-media";
+import { cloudflare, d1, images, r2 } from "@plumix/runtime-cloudflare";
+
+export default plumix({
+  runtime: cloudflare(),
+  database: d1({ binding: "DB", session: "auto" }),
+  storage: r2({
+    binding: "MEDIA",
+    publicUrlBase: "https://media.example.com",
+    s3: {
+      bucket: "my-media-bucket",
+      accountId: process.env.CF_ACCOUNT_ID!,
+      accessKeyId: process.env.R2_ACCESS_KEY_ID!,
+      secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
+    },
+  }),
+  imageDelivery: images({ zone: "media.example.com" }),
+  auth: auth({
+    passkey: {/* … */},
+  }),
+  plugins: [media()],
+});
+```
+
+`wrangler.jsonc`:
+
+```jsonc
+{
+  "r2_buckets": [{ "binding": "MEDIA", "bucket_name": "my-media-bucket" }],
+}
+```
+
+## R2 CORS (only required for presigned-PUT mode)
+
+Skip this section if you're running on the binding-only path — the
+worker-routed upload is same-origin so no CORS rules are needed.
+
+For presigned PUTs, the browser hits R2 directly. Without CORS rules on
+the bucket, the request fails before the bytes ever reach R2. Apply
+this once per bucket:
+
+```bash
+wrangler r2 bucket cors put my-media-bucket --rules '[{
+  "AllowedOrigins": ["https://your-admin.example.com"],
+  "AllowedMethods": ["PUT"],
+  "AllowedHeaders": ["Content-Type"],
+  "ExposeHeaders": ["ETag"],
+  "MaxAgeSeconds": 3600
+}]'
+```
+
+Add every origin you serve the admin from (production, preview deploys,
+`http://localhost:8787` for local dev with `wrangler dev`).
+
+## Image Transformations (optional)
+
+`imageDelivery: images({ zone })` turns image URLs into Cloudflare
+Image Transformations URLs (`/cdn-cgi/image/<opts>/<src>`). The zone
+must be a Cloudflare zone with Image Transformations enabled in the
+dashboard, fronting the same bucket.
+
+Without `imageDelivery`, the plugin falls back to serving full-size
+images directly — fine for low-traffic sites, but every grid card
+fetches the original.
+
+## Configuration
+
+```ts
+media({
+  // MIME types accepted by createUploadUrl. Defaults to
+  // DEFAULT_ACCEPTED_TYPES (jpeg/png/gif/svg/webp/avif/pdf/doc(x)/
+  // xls(x)/ppt(x)/txt/csv/md/mp3/wav/ogg/mp4/webm/mov/zip).
+  acceptedTypes: ["image/jpeg", "image/png"],
+
+  // Maximum upload size (bytes). Default: 25 MiB. Cloudflare Workers
+  // free plan caps request bodies at 100 MiB; paid plans are higher.
+  maxUploadSize: 10 * 1024 * 1024,
+});
+```
+
+## Capabilities
+
+Derived automatically from the `media` entry type:
+
+| Cap                    | Min role      |
+| ---------------------- | ------------- |
+| `entry:media:read`     | `subscriber`  |
+| `entry:media:create`   | `contributor` |
+| `entry:media:edit_own` | `contributor` |
+| `entry:media:edit_any` | `editor`      |
+| `entry:media:delete`   | `editor`      |
+| `entry:media:publish`  | `author`      |
+
+Owners can always confirm/update/delete their own media. `delete` and
+`edit_any` let editors+ act on others'.
+
+## Upload flow
+
+```
+client → media.createUploadUrl({ filename, contentType, size })
+       → server: validate, draft entry, mint upload URL
+       ← { uploadUrl, headers, mediaId, storageKey, expiresAt }
+            └─ presigned R2 URL    (storage.presignPut available)
+            └─ /_plumix/media/upload/<id>  (worker-routed fallback)
+
+client → PUT bytes (XHR with progress)
+       ← 200/204 OK
+            └─ R2:    bytes never traverse the worker
+            └─ Worker: bytes streamed through env.MEDIA.put()
+
+client → media.confirm({ id: mediaId })
+       → server: read first 64 bytes, magic-byte sniff, flip to
+                 published. Mismatch → object deleted + CONFLICT.
+       ← { id, url, mime, size, storageKey }
+```
+
+If the PUT fails, `confirm` rejects (mime mismatch, network drop, …),
+or `presignPut` itself throws after the draft row landed, both client
+and server fire a best-effort `media.delete` to GC the draft.
+
+## RPC procedures
+
+- `media.createUploadUrl({ filename, contentType, size })` — phase 1 of
+  upload. Inserts a `draft` entry, mints a presigned PUT URL.
+- `media.confirm({ id })` — phase 3. Verifies bytes landed and match the
+  claimed mime, flips draft → published.
+- `media.list({ limit, offset })` — paginated published media + URLs +
+  thumbnails (image/\* only).
+- `media.update({ id, alt?, title? })` — owner OR `edit_any` writes
+  alt-text / title to `meta`.
+- `media.delete({ id })` — owner OR `entry:media:delete` removes the
+  row + best-effort storage delete.
+
+## Admin UI features
+
+- Grid of cards with image thumbnails (via `imageDelivery`) or
+  category glyphs for non-images.
+- **Drag-and-drop** files onto the grid to upload.
+- **Multi-file upload** with progress bar — concurrent uploads.
+- **Inline alt-text editing** per card (blur to save).
+- **Copy URL** button per card → clipboard.
+- **Delete** with `window.confirm` gate.
+- **Infinite scroll** — `IntersectionObserver` sentinel triggers the
+  next page automatically.
+
+## Limitations & follow-ups
+
+The plugin doesn't (yet) ship:
+
+- **Per-user upload quota / rate limit** — a contributor can mint
+  presigned URLs as fast as they can call the RPC. Track `meta.size`
+  per `authorId` or use a KV counter for at-scale deploys.
+- **Server-side draft garbage collection** — drafts created by
+  `createUploadUrl` get cleaned up by both client and server on the
+  immediate failure paths, but a session that drops mid-flight can
+  still leak a row. A scheduled handler that deletes `type=media AND
+status=draft AND created_at < now-1h` would close the loop.
+- **Featured image picker** — no meta box for posts to pick a featured
+  image from the library. Wire it from the consuming plugin.
+- **Bulk operations / search / tags** — single-row CRUD only. The
+  generic `entry.*` RPCs handle search/filter for advanced cases.
+- **Real worker e2e** — the plugin's e2e mocks RPC against the admin
+  static dist; the playground app at
+  `packages/plugins/media/playground` is the manual end-to-end rig.
+
+## Support
+
+Have a question? Start a [discussion](https://github.com/withplumix/plumix/discussions). Found a bug? [Open an issue](https://github.com/withplumix/plumix/issues).
+
+## Contributing
+
+PRs and ideas welcome. The [Contributing guide](https://github.com/withplumix/plumix/blob/main/CONTRIBUTING.md) gets you set up — new contributors especially welcome.
+
+## License
+
+[MIT](https://github.com/withplumix/plumix/blob/main/LICENSE) © Plumix Contributors

package/dist/admin/FocalPointField.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+interface FocalPoint {
+    readonly x: number;
+    readonly y: number;
+}
+/** Pointer position → normalized focal point within the preview's bounds. */
+export declare function focalFromPointer(rect: {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+}, clientX: number, clientY: number): FocalPoint;
+export declare function FocalPointField({ rhf, testId, attrs, }: {
+    readonly rhf: {
+        readonly value: unknown;
+        readonly onChange: (next: unknown) => void;
+    };
+    readonly testId: string;
+    readonly attrs?: Readonly<Record<string, unknown>>;
+}): ReactNode;
+export {};
+//# sourceMappingURL=FocalPointField.d.ts.map

package/dist/admin/FocalPointField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocalPointField.d.ts","sourceRoot":"","sources":["../../src/admin/FocalPointField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AAY1E,UAAU,UAAU;IAClB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE;IACJ,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,EACD,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,GACd,UAAU,CAMZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,MAAM,EACN,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,GAAG,EAAE;QACZ,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;QACxB,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;KAC5C,CAAC;IACF,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACpD,GAAG,SAAS,CAmEZ"}

package/dist/admin/FocalPointField.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { useLingui } from "plumix/i18n";
+// Reuses the media picker's "no media selected" string — the focal control is
+// inert until an image is chosen — rather than adding a near-duplicate.
+import { M } from "./messages.js";
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+function readFocalPoint(raw) {
+    if (raw && typeof raw === "object") {
+        const o = raw;
+        return {
+            x: typeof o.x === "number" ? clamp01(o.x) : 0.5,
+            y: typeof o.y === "number" ? clamp01(o.y) : 0.5,
+        };
+    }
+    return { x: 0.5, y: 0.5 };
+}
+// The block's image url — the picked media's url, else the raw src escape hatch.
+function imageUrl(attrs) {
+    const media = attrs.media;
+    if (media && typeof media === "object") {
+        const url = media.url;
+        if (typeof url === "string" && url !== "")
+            return url;
+    }
+    return typeof attrs.src === "string" ? attrs.src : "";
+}
+/** Pointer position → normalized focal point within the preview's bounds. */
+export function focalFromPointer(rect, clientX, clientY) {
+    if (rect.width === 0 || rect.height === 0)
+        return { x: 0.5, y: 0.5 };
+    return {
+        x: clamp01((clientX - rect.left) / rect.width),
+        y: clamp01((clientY - rect.top) / rect.height),
+    };
+}
+export function FocalPointField({ rhf, testId, attrs, }) {
+    const { i18n } = useLingui();
+    const url = imageUrl(attrs ?? {});
+    const focal = readFocalPoint(rhf.value);
+    const frameRef = useRef(null);
+    const draggingRef = useRef(false);
+    const setFromPointer = useCallback((clientX, clientY) => {
+        const el = frameRef.current;
+        if (!el)
+            return;
+        rhf.onChange(focalFromPointer(el.getBoundingClientRect(), clientX, clientY));
+    }, [rhf]);
+    if (url === "") {
+        return (_jsx("p", { className: "text-muted-foreground text-sm", "data-testid": `${testId}-empty`, children: i18n._(M.empty) }));
+    }
+    return (_jsxs("div", { ref: frameRef, "data-testid": testId, className: "relative inline-block cursor-crosshair overflow-hidden rounded-md border select-none", onPointerDown: (e) => {
+            draggingRef.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setFromPointer(e.clientX, e.clientY);
+        }, onPointerMove: (e) => {
+            if (draggingRef.current)
+                setFromPointer(e.clientX, e.clientY);
+        }, onPointerUp: () => {
+            draggingRef.current = false;
+        }, 
+        // A cancelled gesture (capture stolen, touch interrupted) never fires
+        // pointerup — reset here so a later move can't keep writing focal points.
+        onPointerCancel: () => {
+            draggingRef.current = false;
+        }, children: [_jsx("img", { src: url, alt: "", className: "pointer-events-none block max-h-48 w-auto max-w-full" }), _jsx("span", { "data-testid": `${testId}-dot`, className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-black/40 shadow ring-1 ring-black/40", style: {
+                    left: `${String(focal.x * 100)}%`,
+                    top: `${String(focal.y * 100)}%`,
+                } })] }));
+}
+//# sourceMappingURL=FocalPointField.js.map

package/dist/admin/FocalPointField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocalPointField.js","sourceRoot":"","sources":["../../src/admin/FocalPointField.tsx"],"names":[],"mappings":"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"}

package/dist/admin/MediaLibrary.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+/**
+ * What the picker hands back on confirm. Carries the resolved url/alt (not just
+ * the id) so a consumer can snapshot them without a second round-trip — the
+ * block editor stores these directly on the image block.
+ */
+export interface MediaSelection {
+    readonly id: string;
+    readonly url: string;
+    readonly alt: string | null;
+    readonly mime: string;
+    readonly filename: string;
+    readonly width: number | null;
+    readonly height: number | null;
+}
+/**
+ * `MediaLibrary` is dual-mode: a full-page browser + uploader at
+ * `/media`, or an in-modal picker that emits a selection back to a
+ * meta-box field renderer. Page mode (default) preserves every
+ * existing behavior — the picker mode swaps the detail drawer for
+ * a footer "Use selection" CTA, accepts a hybrid card click (single
+ * = select, double = confirm + close), and applies a server-side
+ * `accept` MIME filter to the grid.
+ */
+export interface MediaLibraryProps {
+    readonly mode?: "page" | "picker";
+    /**
+     * Server-side MIME filter forwarded to `media.list`. String form is
+     * a prefix match (`"image/"` → every `image/*` MIME); array form is
+     * an exact whitelist. Picker-mode only — page mode ignores it.
+     */
+    readonly accept?: string | readonly string[];
+    /**
+     * Picker-mode only: called with the bare media id (`"42"`) when the
+     * user confirms a selection. Single-pick semantics — caller is
+     * responsible for closing the modal.
+     */
+    readonly onSelect?: (selection: MediaSelection) => void;
+    /** Picker-mode only: called when the user clicks Cancel. */
+    readonly onCancel?: () => void;
+}
+export declare function MediaLibrary({ mode, accept, onSelect, onCancel, }?: MediaLibraryProps): ReactNode;
+//# sourceMappingURL=MediaLibrary.d.ts.map

package/dist/admin/MediaLibrary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibrary.d.ts","sourceRoot":"","sources":["../../src/admin/MediaLibrary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AA6JlD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AA2MD;;;;;;;;GAQG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACxD,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAa,EACb,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,GAAE,iBAAsB,GAAG,SAAS,CAwVpC"}