@molecule/app-image-gallery-editor-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/ImageGalleryEditor.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Editable image gallery — a hero drop zone with a side grid of
+ * thumbnail slots. Clicking an empty slot or the drop zone opens the
+ * native file picker; clicking a filled slot prompts to remove.
+ *
+ * Stateless about persistence: the consumer supplies the slot array
+ * and reacts to `onChange` (e.g. by uploading to S3 and replacing the
+ * preview URL with the persisted URL).
+ *
+ * Styling goes entirely through the ClassMap bond (`getClassMap()` / `cm.*`)
+ * so the editor renders out of the box under ANY styling library and needs
+ * no per-app Tailwind `@source` scan of this package. The handful of
+ * `style={...}` values (grid-column span, aspect ratio, corner radius, the
+ * dashed drop-zone affordance border, `object-fit`, the dimming opacity, and
+ * the hidden file input's `display:none`) are the documented
+ * ClassMap-can't-express cases (molecule Rule 5); each uses a real theme
+ * token (`var(--color-*)`) rather than a hardcoded color. Icons are real SVG
+ * glyphs from `@molecule/app-ui-react`'s `<Icon>` (no Material Symbols font).
+ *
+ * @module
+ */
+import { type JSX, type ReactNode } from 'react';
+import type { IconName } from '@molecule/app-icons';
+/** Props for {@link ImageGalleryEditor}. */
+export interface ImageGalleryEditorProps {
+    /** Ordered slots, `null` for empty. Length determines slot count. */
+    slots: (string | null)[];
+    onChange: (slots: (string | null)[]) => void;
+    /** Called when the user picks files; defaults to a local object URL. */
+    onPickFiles?: (files: FileList) => Promise<(string | null)[]> | (string | null)[];
+    maxImages?: number;
+    /** Header heading + subtitle slot (renders left of the photo counter). */
+    header?: ReactNode;
+    /** Photo-counter label (e.g. "3 / 24 Photos"). */
+    counter?: ReactNode;
+    dropZoneTitle?: ReactNode;
+    dropZoneHint?: ReactNode;
+    confirmRemoveMessage?: string;
+    statusMessage?: ReactNode;
+    /**
+     * Glyph rendered in empty slots — a typed `IconName` from the bonded
+     * `@molecule/app-icons` set (an unknown name is a type error, not a blank).
+     */
+    emptySlotIcon?: IconName;
+}
+/** Editable image gallery primitive. */
+export declare function ImageGalleryEditor({ slots, onChange, onPickFiles, maxImages, header, counter, dropZoneTitle, dropZoneHint, confirmRemoveMessage, statusMessage, emptySlotIcon, }: ImageGalleryEditorProps): JSX.Element;
+export default ImageGalleryEditor;
+//# sourceMappingURL=ImageGalleryEditor.d.ts.map

package/dist/ImageGalleryEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGalleryEditor.d.ts","sourceRoot":"","sources":["../src/ImageGalleryEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAInD,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,qEAAqE;IACrE,KAAK,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,KAAK,IAAI,CAAA;IAC5C,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;IACjF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAA;CACzB;AAUD,wCAAwC;AACxC,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAc,EACd,MAAM,EACN,OAAO,EACP,aAA2C,EAC3C,YAA+C,EAC/C,oBAA2C,EAC3C,aAAa,EACb,aAAuB,GACxB,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA0KvC;AAED,eAAe,kBAAkB,CAAA"}

package/dist/ImageGalleryEditor.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Editable image gallery — a hero drop zone with a side grid of
+ * thumbnail slots. Clicking an empty slot or the drop zone opens the
+ * native file picker; clicking a filled slot prompts to remove.
+ *
+ * Stateless about persistence: the consumer supplies the slot array
+ * and reacts to `onChange` (e.g. by uploading to S3 and replacing the
+ * preview URL with the persisted URL).
+ *
+ * Styling goes entirely through the ClassMap bond (`getClassMap()` / `cm.*`)
+ * so the editor renders out of the box under ANY styling library and needs
+ * no per-app Tailwind `@source` scan of this package. The handful of
+ * `style={...}` values (grid-column span, aspect ratio, corner radius, the
+ * dashed drop-zone affordance border, `object-fit`, the dimming opacity, and
+ * the hidden file input's `display:none`) are the documented
+ * ClassMap-can't-express cases (molecule Rule 5); each uses a real theme
+ * token (`var(--color-*)`) rather than a hardcoded color. Icons are real SVG
+ * glyphs from `@molecule/app-ui-react`'s `<Icon>` (no Material Symbols font).
+ *
+ * @module
+ */
+import { useRef, useState } from 'react';
+import { getClassMap } from '@molecule/app-ui';
+import { Icon } from '@molecule/app-ui-react';
+/**
+ * Corner radius shared by the drop zone and thumbnail slots. The ClassMap
+ * contract exposes only `roundedFull` (a circle), so a specific radius amount
+ * is a documented inline-style exception (molecule Rule 5) — not a raw
+ * `rounded-xl` class, which no scaffold `@source`-scans from this package.
+ */
+const SLOT_RADIUS = '0.75rem';
+/** Editable image gallery primitive. */
+export function ImageGalleryEditor({ slots, onChange, onPickFiles, maxImages = 24, header, counter, dropZoneTitle = 'Drag and drop assets here', dropZoneHint = 'or click to browse local files', confirmRemoveMessage = 'Remove this image?', statusMessage, emptySlotIcon = 'image', }) {
+    const cm = getClassMap();
+    const fileInputRef = useRef(null);
+    const [uploadingSlot, setUploadingSlot] = useState(null);
+    const handleSlotClick = (index) => {
+        if (slots[index]) {
+            if (!window.confirm(confirmRemoveMessage))
+                return;
+            const next = [...slots];
+            next[index] = null;
+            onChange(next);
+        }
+        else {
+            setUploadingSlot(index);
+            fileInputRef.current?.click();
+        }
+    };
+    const handleUploadAreaClick = () => {
+        setUploadingSlot(null);
+        fileInputRef.current?.click();
+    };
+    const handleFileChange = async (e) => {
+        const files = e.target.files;
+        if (!files?.length)
+            return;
+        const urls = onPickFiles
+            ? await onPickFiles(files)
+            : Array.from(files).map((f) => URL.createObjectURL(f));
+        const next = [...slots];
+        if (uploadingSlot !== null) {
+            next[uploadingSlot] = urls[0] ?? null;
+        }
+        else {
+            let writeAt = next.findIndex((s) => s === null);
+            for (const url of urls) {
+                if (writeAt < 0 || writeAt >= maxImages)
+                    break;
+                next[writeAt] = url ?? null;
+                writeAt = next.findIndex((s) => s === null);
+            }
+        }
+        onChange(next.slice(0, maxImages));
+        setUploadingSlot(null);
+        e.target.value = '';
+    };
+    return (_jsxs("section", { children: [(header || counter) && (_jsxs("div", { className: cm.cn(cm.flex({ align: 'end', justify: 'between' }), cm.sp('mb', 6)), children: [header ?? _jsx("div", {}), counter ? (_jsx("span", { className: cm.cn(cm.textSize('xs'), cm.fontWeight('bold'), cm.textMuted, cm.uppercase, cm.trackingWide), children: counter })) : null] })), _jsxs("div", { className: cm.cn(cm.grid({ cols: 12, gap: 'md', responsive: false })), children: [_jsxs("div", { onClick: handleUploadAreaClick, className: cm.cn(cm.surfaceSecondary, cm.flex({ direction: 'col', align: 'center', justify: 'center' }), cm.cursorPointer), style: {
+                            gridColumn: 'span 8 / span 8',
+                            aspectRatio: '16 / 9',
+                            borderRadius: SLOT_RADIUS,
+                            border: '2px dashed var(--color-border)',
+                        }, children: [_jsx("div", { className: cm.cn(cm.w(16), cm.h(16), cm.bgWhite, cm.roundedFull, cm.flex({ align: 'center', justify: 'center' }), cm.sp('mb', 4)), children: _jsx(Icon, { name: "upload", size: 28, className: cm.textPrimary }) }), _jsx("p", { className: cm.cn(cm.fontWeight('bold')), children: dropZoneTitle }), _jsx("p", { className: cm.cn(cm.textSize('sm'), cm.textMuted, cm.sp('mt', 1)), children: dropZoneHint })] }), _jsx("div", { className: cm.cn(cm.grid({ cols: 2, gap: 'md', responsive: false })), style: { gridColumn: 'span 4 / span 4' }, children: slots.map((url, i) => (_jsx("div", { onClick: () => handleSlotClick(i), className: cm.cn(cm.surfaceSecondary, cm.position('relative'), cm.cursorPointer), style: { aspectRatio: '1 / 1', borderRadius: SLOT_RADIUS, overflow: 'hidden' }, children: url ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: "", src: url, className: cm.cn(cm.w('full'), cm.h('full')), 
+                                        // object-fit + a steady dim are not in the ClassMap contract
+                                        // (Rule 5). The dim lets the always-visible delete glyph read.
+                                        style: { objectFit: 'cover', opacity: 0.6 } }), _jsx("div", { className: cm.cn(cm.position('absolute'), cm.inset0, cm.flex({ align: 'center', justify: 'center' })), children: _jsx(Icon, { name: "trash", size: 20 }) })] })) : (_jsx("div", { className: cm.cn(cm.w('full'), cm.h('full'), cm.flex({ align: 'center', justify: 'center' })), children: _jsx(Icon, { name: emptySlotIcon, size: 24, className: cm.textMuted }) })) }, i))) })] }), statusMessage ? (_jsx("p", { className: cm.cn(cm.sp('mt', 3), cm.textSize('xs'), cm.textMuted), "data-mol-id": "image-gallery-editor-status", children: statusMessage })) : null, _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: handleFileChange })] }));
+}
+export default ImageGalleryEditor;

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * `@molecule/app-image-gallery-editor-react` — hero drop zone + side grid of
+ * thumbnail slots. Click an empty slot or the drop zone to upload; click a
+ * filled slot to remove (native `window.confirm`).
+ *
+ * Stateless about persistence — the consumer owns the slot array and handles
+ * uploads via `onPickFiles` (defaults to local object URLs for preview).
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ * import { ImageGalleryEditor } from '@molecule/app-image-gallery-editor-react'
+ *
+ * function GalleryEditor() {
+ *   const [slots, setSlots] = useState<(string | null)[]>(Array(4).fill(null))
+ *   return (
+ *     <ImageGalleryEditor
+ *       slots={slots}
+ *       onChange={setSlots}
+ *       onPickFiles={async (files) => {
+ *         // upload each file, return persisted URLs (null keeps a slot empty)
+ *         return Array.from(files).map((f) => URL.createObjectURL(f))
+ *       }}
+ *       header={<h3>Image Gallery</h3>}
+ *       counter={`${slots.filter(Boolean).length} / 24 Photos`}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - Styling is 100% ClassMap (`getClassMap()` / `cm.*`) — the editor renders
+ *   correctly out of the box under any bonded styling library and needs NO
+ *   per-app Tailwind `@source` scan of this package. (It previously hardcoded
+ *   raw Tailwind + Material-3 utility classes that no scaffold `@source`-scans,
+ *   so even the `hidden` file input never generated a rule and rendered
+ *   visible; the file input is now hidden with an inline `display:none`.) The
+ *   few `style={...}` values (grid-column span, aspect ratio, corner radius,
+ *   the dashed drop-zone border, `object-fit`, dim opacity, `display:none`)
+ *   are the documented ClassMap-can't-express cases and use real theme tokens.
+ * - Icons are real SVG glyphs from `@molecule/app-ui-react`'s `<Icon>`
+ *   (`upload`, `trash`, and the `emptySlotIcon` — a typed `IconName`) — NO
+ *   Material Symbols font to load. Requires a bonded `@molecule/app-icons` set.
+ * - The filled-slot delete affordance is always visible (touch-friendly)
+ *   rather than hover-revealed.
+ * - `dropZoneTitle` / `dropZoneHint` / `confirmRemoveMessage` default to
+ *   English strings — pass translated values (`t('...')`) in localized apps.
+ * - `getClassMap()` requires a bonded ClassMap for the layout primitives.
+ *
+ * @module
+ */
+export * from './ImageGalleryEditor.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -0,0 +1,52 @@
+/**
+ * `@molecule/app-image-gallery-editor-react` — hero drop zone + side grid of
+ * thumbnail slots. Click an empty slot or the drop zone to upload; click a
+ * filled slot to remove (native `window.confirm`).
+ *
+ * Stateless about persistence — the consumer owns the slot array and handles
+ * uploads via `onPickFiles` (defaults to local object URLs for preview).
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ * import { ImageGalleryEditor } from '@molecule/app-image-gallery-editor-react'
+ *
+ * function GalleryEditor() {
+ *   const [slots, setSlots] = useState<(string | null)[]>(Array(4).fill(null))
+ *   return (
+ *     <ImageGalleryEditor
+ *       slots={slots}
+ *       onChange={setSlots}
+ *       onPickFiles={async (files) => {
+ *         // upload each file, return persisted URLs (null keeps a slot empty)
+ *         return Array.from(files).map((f) => URL.createObjectURL(f))
+ *       }}
+ *       header={<h3>Image Gallery</h3>}
+ *       counter={`${slots.filter(Boolean).length} / 24 Photos`}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - Styling is 100% ClassMap (`getClassMap()` / `cm.*`) — the editor renders
+ *   correctly out of the box under any bonded styling library and needs NO
+ *   per-app Tailwind `@source` scan of this package. (It previously hardcoded
+ *   raw Tailwind + Material-3 utility classes that no scaffold `@source`-scans,
+ *   so even the `hidden` file input never generated a rule and rendered
+ *   visible; the file input is now hidden with an inline `display:none`.) The
+ *   few `style={...}` values (grid-column span, aspect ratio, corner radius,
+ *   the dashed drop-zone border, `object-fit`, dim opacity, `display:none`)
+ *   are the documented ClassMap-can't-express cases and use real theme tokens.
+ * - Icons are real SVG glyphs from `@molecule/app-ui-react`'s `<Icon>`
+ *   (`upload`, `trash`, and the `emptySlotIcon` — a typed `IconName`) — NO
+ *   Material Symbols font to load. Requires a bonded `@molecule/app-icons` set.
+ * - The filled-slot delete affordance is always visible (touch-friendly)
+ *   rather than hover-revealed.
+ * - `dropZoneTitle` / `dropZoneHint` / `confirmRemoveMessage` default to
+ *   English strings — pass translated values (`t('...')`) in localized apps.
+ * - `getClassMap()` requires a bonded ClassMap for the layout primitives.
+ *
+ * @module
+ */
+export * from './ImageGalleryEditor.js';

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@molecule/app-image-gallery-editor-react",
+  "version": "1.0.0",
+  "description": "Editable image gallery: hero drop zone + grid of thumbnail slots with click-to-remove and progress label. Extracted from property-listing ListingEditorImageGallery.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "image-gallery",
+    "uploader",
+    "editor",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-icons": "^1.0.0",
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-icons": "1.0.0",
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}