npm - react-image-marker-viewer - Versions diffs - 0.1.0 - Mend

react-image-marker-viewer 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +102 -0
package/dist/image-marker-viewer.css +1 -0
package/dist/index.d.ts +1 -0
package/dist/react-image-marker.es.js +811 -0
package/dist/react-image-marker.umd.js +22 -0
package/dist/vite.svg +1 -0
package/package.json +49 -0

package/README.md ADDED Viewed

@@ -0,0 +1,102 @@
+# React Image Marker Viewer
+A powerful, responsive, and customizable image annotation library for React.
+Add markers to images, edit details, upload photos, and manage state with ease.
+## Features
+- 🎯 **Responsive Markers**: Markers stay in position (percentage-based) regardless of image resizing.
+- 🖼️ **Image Support**: Works with any image URL or base64 string.
+- 📝 **Rich Details**: Add titles, notes, and colors to markers.
+- 📸 **Photo Attachments**: Upload up to 3 photos per marker (stored as Base64).
+- 🔍 **Lightbox**: Built-in full-screen lightbox with zoom and pan support.
+- 🖱️ **Drag & Drop**: Drag markers to reposition them.
+- 🗑️ **Long Press Delete**: Hold a marker for 500ms to delete it.
+- 🌍 **Localization**: Auto-detects English (`en`), Turkish (`tr`), and Spanish (`es`).
+- ✅ **Validation**: Enforces required fields (e.g., Title) and prevents empty saves.
+- 🎨 **Customizable**: Built with Tailwind CSS logic (classes are scoped).
+## Installation
+```bash
+npm install react-image-marker-viewer
+# or
+yarn add react-image-marker-viewer
+```
+## Basic Usage
+```jsx
+import { ImageArea, useMarkerState } from 'react-image-marker-viewer';
+import 'react-image-marker-viewer/dist/style.css'; // Don't forget CSS!
+function App() {
+  const { markers, addMarker, updateMarker, removeMarker } = useMarkerState();
+  return (
+    <ImageArea
+      src="https://example.com/image.jpg"
+      markers={markers}
+      onAddMarker={addMarker}
+      onUpdateMarker={updateMarker}
+      onDeleteMarker={removeMarker}
+    />
+  );
+}
+```
+## Components
+### `ImageArea`
+The main component that renders the image and markers.
+| Prop | Type | Description |
+|------|------|-------------|
+| `src` | `string` | URL or Base64 string of the image. |
+| `markers` | `Marker[]` | Array of marker objects. |
+| `onAddMarker` | `(marker: Marker) => void` | Callback when a new marker is saved. |
+| `onUpdateMarker` | `(id: string, updates: Partial<Marker>) => void` | Callback when a marker is updated. |
+| `onDeleteMarker` | `(id: string) => void` | Callback when a marker is deleted. |
+### `useMarkerState` Hook
+A helper hook to manage marker state easily.
+```typescript
+const {
+  markers,        // Current array of markers
+  addMarker,      // Function to add a marker
+  updateMarker,   // Function to update a marker
+  removeMarker,   // Function to delete a marker
+  setAllMarkers   // Function to replace all markers (e.g. loading from DB)
+} = useMarkerState();
+```
+## Types
+### `Marker`
+```typescript
+interface Marker {
+  id: string;
+  x: number;            // Percentage (0-100)
+  y: number;            // Percentage (0-100)
+  color: number;        // Integer color value
+  markerTitle: string;
+  note: string;
+  photos: string[];     // Base64 strings
+  photosName: string[]; // File names
+}
+```
+## Localization
+The library automatically detects the browser language. Currently supported:
+- English (`en`) - Default
+- Turkish (`tr`)
+- Spanish (`es`)
+## License
+MIT

package/dist/image-marker-viewer.css ADDED Viewed

@@ -0,0 +1 @@

+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media(min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media(min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media(min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media(min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media(min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.right-4{right:1rem}.top-4{top:1rem}.z-40{z-index:40}.z-50{z-index:50}.z-\[60\]{z-index:60}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-full{width:100%}.max-w-5xl{max-width:64rem}.max-w-full{max-width:100%}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-125{--tw-scale-x: 1.25;--tw-scale-y: 1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-black\/50{background-color:#00000080}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-opacity-90{--tw-bg-opacity: .9}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-0{opacity:0}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-blue-500{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}.ring-offset-1{--tw-ring-offset-width: 1px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:scale-110:hover{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-blue-500:hover{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.hover\:bg-blue-50:hover{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-600:hover{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-red-50:hover{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/10:hover{background-color:#ffffff1a}.hover\:text-gray-300:hover{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.hover\:text-gray-600:hover{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:border-red-500:focus{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}.focus\:ring-red-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-1:focus{--tw-ring-offset-width: 1px}.group:hover .group-hover\:opacity-100{opacity:1}@media(min-width:640px){.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {}

package/dist/react-image-marker.es.js ADDED Viewed

@@ -0,0 +1,811 @@
+import de, { useMemo as fe, useState as N, useRef as T, useCallback as M, useEffect as q } from "react";
+var Y = { exports: {} }, I = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ee;
+function me() {
+  if (ee) return I;
+  ee = 1;
+  var t = Symbol.for("react.transitional.element"), u = Symbol.for("react.fragment");
+  function i(o, n, s) {
+    var x = null;
+    if (s !== void 0 && (x = "" + s), n.key !== void 0 && (x = "" + n.key), "key" in n) {
+      s = {};
+      for (var c in n)
+        c !== "key" && (s[c] = n[c]);
+    } else s = n;
+    return n = s.ref, {
+      $$typeof: t,
+      type: o,
+      key: x,
+      ref: n !== void 0 ? n : null,
+      props: s
+    };
+  }
+  return I.Fragment = u, I.jsx = i, I.jsxs = i, I;
+}
+var F = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var te;
+function he() {
+  return te || (te = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === ie ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case C:
+          return "Fragment";
+        case A:
+          return "Profiler";
+        case p:
+          return "StrictMode";
+        case w:
+          return "Suspense";
+        case P:
+          return "SuspenseList";
+        case le:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case E:
+            return "Portal";
+          case R:
+            return e.displayName || "Context";
+          case l:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case _:
+            var a = e.render;
+            return e = e.displayName, e || (e = a.displayName || a.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case O:
+            return a = e.displayName || null, a !== null ? a : t(e.type) || "Memo";
+          case L:
+            a = e._payload, e = e._init;
+            try {
+              return t(e(a));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function u(e) {
+      return "" + e;
+    }
+    function i(e) {
+      try {
+        u(e);
+        var a = !1;
+      } catch {
+        a = !0;
+      }
+      if (a) {
+        a = console;
+        var b = a.error, y = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return b.call(
+          a,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          y
+        ), u(e);
+      }
+    }
+    function o(e) {
+      if (e === C) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === L)
+        return "<...>";
+      try {
+        var a = t(e);
+        return a ? "<" + a + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var e = $.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function x(e) {
+      if (G.call(e, "key")) {
+        var a = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (a && a.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function c(e, a) {
+      function b() {
+        J || (J = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          a
+        ));
+      }
+      b.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: b,
+        configurable: !0
+      });
+    }
+    function d() {
+      var e = t(this.type);
+      return H[e] || (H[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function f(e, a, b, y, D, U) {
+      var k = b.ref;
+      return e = {
+        $$typeof: g,
+        type: e,
+        key: a,
+        props: b,
+        _owner: y
+      }, (k !== void 0 ? k : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: d
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: D
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: U
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function h(e, a, b, y, D, U) {
+      var k = a.children;
+      if (k !== void 0)
+        if (y)
+          if (ce(k)) {
+            for (y = 0; y < k.length; y++)
+              v(k[y]);
+            Object.freeze && Object.freeze(k);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else v(k);
+      if (G.call(a, "key")) {
+        k = t(e);
+        var S = Object.keys(a).filter(function(ue) {
+          return ue !== "key";
+        });
+        y = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", Q[k + y] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          y,
+          k,
+          S,
+          k
+        ), Q[k + y] = !0);
+      }
+      if (k = null, b !== void 0 && (i(b), k = "" + b), x(a) && (i(a.key), k = "" + a.key), "key" in a) {
+        b = {};
+        for (var z in a)
+          z !== "key" && (b[z] = a[z]);
+      } else b = a;
+      return k && c(
+        b,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), f(
+        e,
+        k,
+        b,
+        n(),
+        D,
+        U
+      );
+    }
+    function v(e) {
+      j(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === L && (e._payload.status === "fulfilled" ? j(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function j(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === g;
+    }
+    var m = de, g = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), C = Symbol.for("react.fragment"), p = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), l = Symbol.for("react.consumer"), R = Symbol.for("react.context"), _ = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), le = Symbol.for("react.activity"), ie = Symbol.for("react.client.reference"), $ = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, ce = Array.isArray, B = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    m = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var J, H = {}, Z = m.react_stack_bottom_frame.bind(
+      m,
+      s
+    )(), K = B(o(s)), Q = {};
+    F.Fragment = C, F.jsx = function(e, a, b) {
+      var y = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        a,
+        b,
+        !1,
+        y ? Error("react-stack-top-frame") : Z,
+        y ? B(o(e)) : K
+      );
+    }, F.jsxs = function(e, a, b) {
+      var y = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        a,
+        b,
+        !0,
+        y ? Error("react-stack-top-frame") : Z,
+        y ? B(o(e)) : K
+      );
+    };
+  })()), F;
+}
+var re;
+function xe() {
+  return re || (re = 1, process.env.NODE_ENV === "production" ? Y.exports = me() : Y.exports = he()), Y.exports;
+}
+var r = xe();
+const ge = (t, u) => {
+  const i = u.getBoundingClientRect();
+  let o, n;
+  "touches" in t ? (o = t.touches[0].clientX, n = t.touches[0].clientY) : (o = t.clientX, n = t.clientY);
+  const s = (o - i.left) / i.width * 100, x = (n - i.top) / i.height * 100;
+  return {
+    x: Math.max(0, Math.min(100, s)),
+    y: Math.max(0, Math.min(100, x))
+  };
+}, X = (t) => parseInt(t.replace(/^#/, ""), 16), ae = (t) => {
+  const u = t.toString(16).toUpperCase();
+  return `#${"0".repeat(6 - u.length)}${u}`;
+}, W = {
+  en: {
+    editMarker: "Edit Marker",
+    title: "Title",
+    note: "Note",
+    photos: "Photos",
+    delete: "Delete",
+    cancel: "Cancel",
+    save: "Save",
+    newMarker: "New Marker",
+    uploadImage: "Upload Image",
+    deleteConfirmation: "Are you sure you want to delete this marker?",
+    confirmClear: "Clear existing markers for new image?",
+    titlePlaceholder: "Enter a title",
+    notePlaceholder: "Enter a note",
+    titleRequired: "Title is required"
+  },
+  tr: {
+    editMarker: "İşaretçiyi Düzenle",
+    title: "Başlık",
+    note: "Not",
+    photos: "Fotoğraflar",
+    delete: "Sil",
+    cancel: "İptal",
+    save: "Kaydet",
+    newMarker: "Yeni İşaretçi",
+    uploadImage: "Görsel Yükle",
+    deleteConfirmation: "Bu işaretçiyi silmek istediğinizden emin misiniz?",
+    confirmClear: "Yeni görsel için mevcut işaretçileri temizle?",
+    titlePlaceholder: "Bir başlık girin",
+    notePlaceholder: "Bir not girin",
+    titleRequired: "Başlık zorunludur"
+  },
+  es: {
+    editMarker: "Editar Marcador",
+    title: "Título",
+    note: "Nota",
+    photos: "Fotos",
+    delete: "Eliminar",
+    cancel: "Cancelar",
+    save: "Guardar",
+    newMarker: "Nuevo Marcador",
+    uploadImage: "Subir Imagen",
+    deleteConfirmation: "¿Estás seguro de que deseas eliminar este marcador?",
+    confirmClear: "¿Borrar marcadores existentes para la nueva imagen?",
+    titlePlaceholder: "Ingrese un título",
+    notePlaceholder: "Ingrese una nota",
+    titleRequired: "El título es obligatorio"
+  }
+}, V = () => fe(() => {
+  const u = navigator.language.split("-")[0];
+  return u === "tr" ? W.tr : u === "es" ? W.es : W.en;
+}, []), ne = ({ marker: t, onClick: u, onUpdate: i, onDelete: o }) => {
+  const n = ae(t.color), [s, x] = N(!1), c = T(null), d = V(), f = T(null), h = T(!1), v = T({ x: 0, y: 0 }), j = T(!1), m = (p) => {
+    p.stopPropagation(), p.preventDefault(), j.current = !1, h.current = !1, v.current = { x: p.clientX, y: p.clientY }, f.current = window.setTimeout(() => {
+      h.current = !0, window.confirm(d.deleteConfirmation) && o(t.id);
+    }, 500), x(!0), p.target.setPointerCapture(p.pointerId);
+  }, g = (p) => {
+    var R;
+    if (!s) return;
+    Math.sqrt(Math.pow(p.clientX - v.current.x, 2) + Math.pow(p.clientY - v.current.y, 2)) > 5 && (j.current = !0, f.current && (clearTimeout(f.current), f.current = null));
+    const l = (R = c.current) == null ? void 0 : R.parentElement;
+    if (l) {
+      const _ = l.getBoundingClientRect();
+      let w = (p.clientX - _.left) / _.width * 100, P = (p.clientY - _.top) / _.height * 100;
+      w = Math.max(0, Math.min(100, w)), P = Math.max(0, Math.min(100, P)), i(t.id, { x: w, y: P });
+    }
+  }, E = (p) => {
+    p.stopPropagation(), x(!1), p.target.releasePointerCapture(p.pointerId), f.current && (clearTimeout(f.current), f.current = null);
+  }, C = (p) => {
+    p.stopPropagation(), !j.current && !h.current && u(t);
+  };
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: c,
+      onPointerDown: m,
+      onPointerMove: g,
+      onPointerUp: E,
+      onClick: C,
+      style: {
+        left: `${t.x}%`,
+        top: `${t.y}%`,
+        backgroundColor: n,
+        touchAction: "none"
+      },
+      className: `absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border-2 border-white shadow-md flex items-center justify-center transition-transform ${s ? "scale-125 z-50" : "hover:scale-110"}`,
+      children: /* @__PURE__ */ r.jsx("div", { className: "w-2 h-2 bg-white rounded-full opacity-50" })
+    }
+  );
+}, se = [
+  { name: "Red", hex: "#EF4444" },
+  { name: "Orange", hex: "#F97316" },
+  { name: "Amber", hex: "#F59E0B" },
+  { name: "Yellow", hex: "#EAB308" },
+  { name: "Lime", hex: "#84CC16" },
+  { name: "Green", hex: "#22C55E" },
+  { name: "Emerald", hex: "#10B981" },
+  { name: "Teal", hex: "#14B8A6" },
+  { name: "Cyan", hex: "#06B6D4" },
+  { name: "Sky", hex: "#0EA5E9" },
+  { name: "Blue", hex: "#3B82F6" },
+  { name: "Indigo", hex: "#6366F1" },
+  { name: "Violet", hex: "#8B5CF6" },
+  { name: "Purple", hex: "#A855F7" },
+  { name: "Fuchsia", hex: "#D946EF" },
+  { name: "Pink", hex: "#EC4899" },
+  { name: "Rose", hex: "#F43F5E" },
+  { name: "Slate", hex: "#64748B" },
+  { name: "Black", hex: "#000000" },
+  { name: "White", hex: "#FFFFFF" }
+];
+X(se[0].hex);
+const pe = ({ color: t, onChange: u }) => {
+  const i = ae(t);
+  return /* @__PURE__ */ r.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ r.jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Color" }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      se.map((o) => /* @__PURE__ */ r.jsx(
+        "button",
+        {
+          onClick: () => u(X(o.hex)),
+          className: `h-6 w-6 rounded-full border transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 ${i === o.hex ? "ring-2 ring-blue-500 ring-offset-1" : "border-gray-200"}`,
+          style: { backgroundColor: o.hex },
+          title: o.name
+        },
+        o.hex
+      )),
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          type: "color",
+          value: i,
+          onChange: (o) => u(X(o.target.value)),
+          className: "h-6 w-6 cursor-pointer rounded-full border border-gray-300 p-0 overflow-hidden",
+          title: "Custom Color"
+        }
+      )
+    ] })
+  ] });
+}, be = (t) => new Promise((u, i) => {
+  const o = new FileReader();
+  o.readAsDataURL(t), o.onload = () => u(o.result), o.onerror = (n) => i(n);
+}), ve = ({ photos: t, photosNames: u, onUpload: i, onRemove: o, onPhotoClick: n }) => {
+  const s = V(), x = async (c) => {
+    if (c.target.files) {
+      const d = Array.from(c.target.files), f = await Promise.all(d.map(be)), h = d.map((g) => g.name), v = 3 - t.length, j = f.slice(0, v), m = h.slice(0, v);
+      i([...t, ...j], [...u, ...m]);
+    }
+  };
+  return /* @__PURE__ */ r.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ r.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
+      s.photos,
+      " (",
+      t.length,
+      "/3)"
+    ] }) }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      t.map((c, d) => /* @__PURE__ */ r.jsxs("div", { className: "relative h-16 w-16 group", children: [
+        /* @__PURE__ */ r.jsx(
+          "img",
+          {
+            src: c,
+            alt: `Upload ${d}`,
+            className: "h-full w-full object-cover rounded border cursor-pointer",
+            onClick: () => n && n(d)
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            onClick: () => o(d),
+            className: "absolute -top-1 -right-1 bg-red-500 text-white rounded-full p-0.5 w-4 h-4 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity",
+            children: "×"
+          }
+        )
+      ] }, d)),
+      t.length < 3 && /* @__PURE__ */ r.jsxs("label", { className: "flex h-16 w-16 cursor-pointer items-center justify-center rounded border-2 border-dashed border-gray-300 hover:border-blue-500 hover:bg-blue-50 transition-colors", children: [
+        /* @__PURE__ */ r.jsx("span", { className: "text-xl text-gray-400", children: "+" }),
+        /* @__PURE__ */ r.jsx("input", { type: "file", accept: "image/*", multiple: !0, onChange: x, className: "hidden" })
+      ] })
+    ] })
+  ] });
+}, we = ({ photos: t, initialIndex: u, onClose: i }) => {
+  const [o, n] = N(u), [s, x] = N(1), [c, d] = N({ x: 0, y: 0 }), [f, h] = N(!1), v = T({ x: 0, y: 0 }), j = T(null), m = M(() => {
+    x(1), d({ x: 0, y: 0 });
+  }, []), g = M(() => {
+    n((l) => (l + 1) % t.length), m();
+  }, [t.length, m]), E = M(() => {
+    n((l) => (l - 1 + t.length) % t.length), m();
+  }, [t.length, m]);
+  q(() => {
+    const l = (R) => {
+      R.key === "Escape" && i(), R.key === "ArrowRight" && g(), R.key === "ArrowLeft" && E();
+    };
+    return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
+  }, [i, g, E]), q(() => {
+    const l = j.current;
+    if (!l) return;
+    const R = (_) => {
+      _.preventDefault();
+      const w = -_.deltaY * 0.01, P = Math.min(Math.max(1, s + w), 5);
+      x(P), P === 1 && d({ x: 0, y: 0 });
+    };
+    return l.addEventListener("wheel", R, { passive: !1 }), () => l.removeEventListener("wheel", R);
+  }, [s]);
+  const C = (l) => {
+    s > 1 && (l.preventDefault(), h(!0), v.current = { x: l.clientX - c.x, y: l.clientY - c.y }, l.target.setPointerCapture(l.pointerId));
+  }, p = (l) => {
+    f && s > 1 && (l.preventDefault(), d({
+      x: l.clientX - v.current.x,
+      y: l.clientY - v.current.y
+    }));
+  }, A = (l) => {
+    h(!1), l.target.releasePointerCapture(l.pointerId);
+  };
+  return t.length ? /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-90 overflow-hidden",
+      onClick: (l) => {
+        l.stopPropagation(), i();
+      },
+      children: [
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            onClick: i,
+            className: "absolute top-4 right-4 text-white hover:text-gray-300 z-50 p-2",
+            children: /* @__PURE__ */ r.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        ),
+        /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            ref: j,
+            className: "relative flex items-center justify-center w-full h-full p-4",
+            onClick: (l) => l.stopPropagation(),
+            children: [
+              t.length > 1 && /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  onClick: E,
+                  className: "absolute left-4 z-40 p-2 text-white hover:bg-white/10 rounded-full transition-colors",
+                  children: /* @__PURE__ */ r.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+                }
+              ),
+              /* @__PURE__ */ r.jsx("div", { className: "relative overflow-hidden flex items-center justify-center w-full h-full", children: /* @__PURE__ */ r.jsx(
+                "img",
+                {
+                  src: t[o],
+                  alt: `View ${o + 1}`,
+                  onPointerDown: C,
+                  onPointerMove: p,
+                  onPointerUp: A,
+                  style: {
+                    transform: `scale(${s}) translate(${c.x / s}px, ${c.y / s}px)`,
+                    transition: f ? "none" : "transform 0.1s ease-out",
+                    cursor: s > 1 ? f ? "grabbing" : "grab" : "default",
+                    maxHeight: "100%",
+                    maxWidth: "100%"
+                  },
+                  className: "object-contain select-none touch-none"
+                }
+              ) }),
+              t.length > 1 && /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  onClick: g,
+                  className: "absolute right-4 z-40 p-2 text-white hover:bg-white/10 rounded-full transition-colors",
+                  children: /* @__PURE__ */ r.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+                }
+              ),
+              /* @__PURE__ */ r.jsxs("div", { className: "absolute bottom-4 left-0 right-0 text-center text-white text-sm bg-black/50 py-1 pointer-events-none", children: [
+                o + 1,
+                " / ",
+                t.length,
+                " ",
+                s > 1 && `(${Math.round(s * 100)}%)`
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+}, oe = ({ marker: t, onSave: u, onDelete: i, onClose: o }) => {
+  const n = V(), [s, x] = N(t.markerTitle), [c, d] = N(t.note), [f, h] = N(t.color), [v, j] = N(t.photos), [m, g] = N(t.photosName || []), [E, C] = N(!1), [p, A] = N(0), [l, R] = N(!1);
+  q(() => {
+    x(t.markerTitle), d(t.note), h(t.color), j(t.photos), g(t.photosName || []), R(!1);
+  }, [t]);
+  const _ = () => {
+    if (!s.trim()) {
+      R(!0);
+      return;
+    }
+    u(t.id, { markerTitle: s, note: c, color: f, photos: v, photosName: m }), o();
+  };
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx("div", { className: "fixed inset-0 z-40 flex items-center justify-center bg-black/50", onClick: (w) => w.stopPropagation(), children: /* @__PURE__ */ r.jsxs("div", { className: "w-72 max-h-[90vh] overflow-y-auto rounded-lg bg-white p-4 shadow-xl border border-gray-200 relative z-50", children: [
+      /* @__PURE__ */ r.jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ r.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: n.editMarker }),
+        /* @__PURE__ */ r.jsx("button", { onClick: o, className: "text-gray-400 hover:text-gray-600", children: "✕" })
+      ] }),
+      /* @__PURE__ */ r.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r.jsxs("div", { children: [
+          /* @__PURE__ */ r.jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [
+            n.title,
+            " ",
+            /* @__PURE__ */ r.jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ r.jsx(
+            "input",
+            {
+              type: "text",
+              value: s,
+              placeholder: n.titlePlaceholder,
+              onChange: (w) => {
+                x(w.target.value), l && R(!1);
+              },
+              className: `mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none focus:ring-1 sm:text-sm ${l ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`
+            }
+          ),
+          l && /* @__PURE__ */ r.jsx("p", { className: "mt-1 text-xs text-red-500", children: n.titleRequired })
+        ] }),
+        /* @__PURE__ */ r.jsxs("div", { children: [
+          /* @__PURE__ */ r.jsx("label", { className: "block text-sm font-medium text-gray-700", children: n.note }),
+          /* @__PURE__ */ r.jsx(
+            "textarea",
+            {
+              value: c,
+              placeholder: n.notePlaceholder,
+              onChange: (w) => d(w.target.value),
+              rows: 3,
+              className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r.jsx(pe, { color: f, onChange: h }),
+        /* @__PURE__ */ r.jsx(
+          ve,
+          {
+            photos: v,
+            photosNames: m,
+            onUpload: (w, P) => {
+              j(w), g(P);
+            },
+            onRemove: (w) => {
+              j(v.filter((P, O) => O !== w)), g(m.filter((P, O) => O !== w));
+            },
+            onPhotoClick: (w) => {
+              A(w), C(!0);
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsxs("div", { className: "mt-4 flex justify-between", children: [
+          /* @__PURE__ */ r.jsx(
+            "button",
+            {
+              onClick: () => i(t.id),
+              className: "rounded px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50",
+              children: n.delete
+            }
+          ),
+          /* @__PURE__ */ r.jsxs("div", { className: "space-x-2", children: [
+            /* @__PURE__ */ r.jsx(
+              "button",
+              {
+                onClick: o,
+                className: "rounded border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50",
+                children: n.cancel
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "button",
+              {
+                onClick: _,
+                className: "rounded bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700",
+                children: n.save
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    E && /* @__PURE__ */ r.jsx(
+      we,
+      {
+        photos: v,
+        initialIndex: p,
+        onClose: () => C(!1)
+      }
+    )
+  ] });
+}, ke = ({
+  src: t,
+  markers: u,
+  onAddMarker: i,
+  onUpdateMarker: o,
+  onDeleteMarker: n
+}) => {
+  const s = T(null), x = T(null), [c, d] = N(null), [f, h] = N(null), v = (m) => {
+    if (!x.current) return;
+    if (c) {
+      d(null);
+      return;
+    }
+    if (f) {
+      h(null);
+      return;
+    }
+    const { x: g, y: E } = ge(m, x.current), C = {
+      id: crypto.randomUUID(),
+      x: g,
+      y: E,
+      color: 16711680,
+      // Default Red
+      markerTitle: "",
+      note: "",
+      photos: [],
+      photosName: []
+    };
+    h(C);
+  }, j = u.find((m) => m.id === c);
+  return /* @__PURE__ */ r.jsx("div", { className: "relative inline-block overflow-hidden rounded-lg shadow-lg group select-none", children: /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      ref: x,
+      onClick: v,
+      className: "relative cursor-crosshair",
+      children: [
+        /* @__PURE__ */ r.jsx(
+          "img",
+          {
+            ref: s,
+            src: t,
+            alt: "Marker Area",
+            className: "block max-w-full h-auto",
+            draggable: !1
+          }
+        ),
+        u.map((m) => /* @__PURE__ */ r.jsx(
+          ne,
+          {
+            marker: m,
+            onClick: (g) => {
+              h(null), d(g.id);
+            },
+            onUpdate: (g, E) => o(g, E),
+            onDelete: n
+          },
+          m.id
+        )),
+        f && /* @__PURE__ */ r.jsx(
+          ne,
+          {
+            marker: f,
+            onClick: () => {
+            },
+            onUpdate: (m, g) => h((E) => E ? { ...E, ...g } : null),
+            onDelete: () => h(null)
+          },
+          "temp-marker"
+        ),
+        j && /* @__PURE__ */ r.jsx(
+          oe,
+          {
+            marker: j,
+            onSave: o,
+            onDelete: (m) => {
+              n(m), d(null);
+            },
+            onClose: () => d(null)
+          }
+        ),
+        f && /* @__PURE__ */ r.jsx(
+          oe,
+          {
+            marker: f,
+            onSave: (m, g) => {
+              i({ ...f, ...g }), h(null);
+            },
+            onDelete: () => h(null),
+            onClose: () => h(null)
+          }
+        )
+      ]
+    }
+  ) });
+}, je = (t = []) => {
+  const [u, i] = N(t), o = M((c) => {
+    i((d) => [...d, c]);
+  }, []), n = M((c, d) => {
+    i(
+      (f) => f.map((h) => h.id === c ? { ...h, ...d } : h)
+    );
+  }, []), s = M((c) => {
+    i((d) => d.filter((f) => f.id !== c));
+  }, []), x = M((c) => {
+    i(c);
+  }, []);
+  return {
+    markers: u,
+    addMarker: o,
+    updateMarker: n,
+    removeMarker: s,
+    setAllMarkers: x
+  };
+};
+export {
+  pe as ColorPicker,
+  ke as ImageArea,
+  ke as ImageMarker,
+  we as Lightbox,
+  ne as MarkerItem,
+  oe as MarkerPopup,
+  ve as PhotoUploader,
+  V as useLocale,
+  je as useMarkerState
+};

package/dist/react-image-marker.umd.js ADDED Viewed

@@ -0,0 +1,22 @@
+(function(N,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],n):(N=typeof globalThis<"u"?globalThis:N||self,n(N.ReactImageMarker={},N.React))})(this,(function(N,n){"use strict";var F={exports:{}},A={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var H;function ce(){if(H)return A;H=1;var t=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function c(a,o,l){var g=null;if(l!==void 0&&(g=""+l),o.key!==void 0&&(g=""+o.key),"key"in o){l={};for(var u in o)u!=="key"&&(l[u]=o[u])}else l=o;return o=l.ref,{$$typeof:t,type:a,key:g,ref:o!==void 0?o:null,props:l}}return A.Fragment=d,A.jsx=c,A.jsxs=c,A}var O={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Z;function ue(){return Z||(Z=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ge?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case S:return"Profiler";case b:return"StrictMode";case k:return"Suspense";case _:return"SuspenseList";case xe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case R:return"Portal";case C:return e.displayName||"Context";case i:return(e._context.displayName||"Context")+".Consumer";case T:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case I:return s=e.displayName||null,s!==null?s:t(e.type)||"Memo";case W:s=e._payload,e=e._init;try{return t(e(s))}catch{}}return null}function d(e){return""+e}function c(e){try{d(e);var s=!1}catch{s=!0}if(s){s=console;var v=s.error,y=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return v.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",y),d(e)}}function a(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===W)return"<...>";try{var s=t(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function o(){var e=X.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function g(e){if(ne.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function u(e,s){function v(){oe||(oe=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}v.isReactWarning=!0,Object.defineProperty(e,"key",{get:v,configurable:!0})}function f(){var e=t(this.type);return ae[e]||(ae[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function m(e,s,v,y,L,G){var j=v.ref;return e={$$typeof:p,type:e,key:s,props:v,_owner:y},(j!==void 0?j:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:f}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:G}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function x(e,s,v,y,L,G){var j=s.children;if(j!==void 0)if(y)if(pe(j)){for(y=0;y<j.length;y++)w(j[y]);Object.freeze&&Object.freeze(j)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(j);if(ne.call(s,"key")){j=t(e);var M=Object.keys(s).filter(function(be){return be!=="key"});y=0<M.length?"{key: someKey, "+M.join(": ..., ")+": ...}":"{key: someKey}",ie[j+y]||(M=0<M.length?"{"+M.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,y,j,M,j),ie[j+y]=!0)}if(j=null,v!==void 0&&(c(v),j=""+v),g(s)&&(c(s.key),j=""+s.key),"key"in s){v={};for(var J in s)J!=="key"&&(v[J]=s[J])}else v=s;return j&&u(v,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,j,v,o(),L,G)}function w(e){E(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===W&&(e._payload.status==="fulfilled"?E(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function E(e){return typeof e=="object"&&e!==null&&e.$$typeof===p}var h=n,p=Symbol.for("react.transitional.element"),R=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),b=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),i=Symbol.for("react.consumer"),C=Symbol.for("react.context"),T=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),W=Symbol.for("react.lazy"),xe=Symbol.for("react.activity"),ge=Symbol.for("react.client.reference"),X=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ne=Object.prototype.hasOwnProperty,pe=Array.isArray,V=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var oe,ae={},se=h.react_stack_bottom_frame.bind(h,l)(),le=V(a(l)),ie={};O.Fragment=P,O.jsx=function(e,s,v){var y=1e4>X.recentlyCreatedOwnerStacks++;return x(e,s,v,!1,y?Error("react-stack-top-frame"):se,y?V(a(e)):le)},O.jsxs=function(e,s,v){var y=1e4>X.recentlyCreatedOwnerStacks++;return x(e,s,v,!0,y?Error("react-stack-top-frame"):se,y?V(a(e)):le)}})()),O}var K;function de(){return K||(K=1,process.env.NODE_ENV==="production"?F.exports=ce():F.exports=ue()),F.exports}var r=de();const fe=(t,d)=>{const c=d.getBoundingClientRect();let a,o;"touches"in t?(a=t.touches[0].clientX,o=t.touches[0].clientY):(a=t.clientX,o=t.clientY);const l=(a-c.left)/c.width*100,g=(o-c.top)/c.height*100;return{x:Math.max(0,Math.min(100,l)),y:Math.max(0,Math.min(100,g))}},Y=t=>parseInt(t.replace(/^#/,""),16),Q=t=>{const d=t.toString(16).toUpperCase();return`#${"0".repeat(6-d.length)}${d}`},B={en:{editMarker:"Edit Marker",title:"Title",note:"Note",photos:"Photos",delete:"Delete",cancel:"Cancel",save:"Save",newMarker:"New Marker",uploadImage:"Upload Image",deleteConfirmation:"Are you sure you want to delete this marker?",confirmClear:"Clear existing markers for new image?",titlePlaceholder:"Enter a title",notePlaceholder:"Enter a note",titleRequired:"Title is required"},tr:{editMarker:"İşaretçiyi Düzenle",title:"Başlık",note:"Not",photos:"Fotoğraflar",delete:"Sil",cancel:"İptal",save:"Kaydet",newMarker:"Yeni İşaretçi",uploadImage:"Görsel Yükle",deleteConfirmation:"Bu işaretçiyi silmek istediğinizden emin misiniz?",confirmClear:"Yeni görsel için mevcut işaretçileri temizle?",titlePlaceholder:"Bir başlık girin",notePlaceholder:"Bir not girin",titleRequired:"Başlık zorunludur"},es:{editMarker:"Editar Marcador",title:"Título",note:"Nota",photos:"Fotos",delete:"Eliminar",cancel:"Cancelar",save:"Guardar",newMarker:"Nuevo Marcador",uploadImage:"Subir Imagen",deleteConfirmation:"¿Estás seguro de que deseas eliminar este marcador?",confirmClear:"¿Borrar marcadores existentes para la nueva imagen?",titlePlaceholder:"Ingrese un título",notePlaceholder:"Ingrese una nota",titleRequired:"El título es obligatorio"}},D=()=>n.useMemo(()=>{const d=navigator.language.split("-")[0];return d==="tr"?B.tr:d==="es"?B.es:B.en},[]),U=({marker:t,onClick:d,onUpdate:c,onDelete:a})=>{const o=Q(t.color),[l,g]=n.useState(!1),u=n.useRef(null),f=D(),m=n.useRef(null),x=n.useRef(!1),w=n.useRef({x:0,y:0}),E=n.useRef(!1),h=b=>{b.stopPropagation(),b.preventDefault(),E.current=!1,x.current=!1,w.current={x:b.clientX,y:b.clientY},m.current=window.setTimeout(()=>{x.current=!0,window.confirm(f.deleteConfirmation)&&a(t.id)},500),g(!0),b.target.setPointerCapture(b.pointerId)},p=b=>{var C;if(!l)return;Math.sqrt(Math.pow(b.clientX-w.current.x,2)+Math.pow(b.clientY-w.current.y,2))>5&&(E.current=!0,m.current&&(clearTimeout(m.current),m.current=null));const i=(C=u.current)==null?void 0:C.parentElement;if(i){const T=i.getBoundingClientRect();let k=(b.clientX-T.left)/T.width*100,_=(b.clientY-T.top)/T.height*100;k=Math.max(0,Math.min(100,k)),_=Math.max(0,Math.min(100,_)),c(t.id,{x:k,y:_})}},R=b=>{b.stopPropagation(),g(!1),b.target.releasePointerCapture(b.pointerId),m.current&&(clearTimeout(m.current),m.current=null)},P=b=>{b.stopPropagation(),!E.current&&!x.current&&d(t)};return r.jsx("div",{ref:u,onPointerDown:h,onPointerMove:p,onPointerUp:R,onClick:P,style:{left:`${t.x}%`,top:`${t.y}%`,backgroundColor:o,touchAction:"none"},className:`absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border-2 border-white shadow-md flex items-center justify-center transition-transform ${l?"scale-125 z-50":"hover:scale-110"}`,children:r.jsx("div",{className:"w-2 h-2 bg-white rounded-full opacity-50"})})},q=[{name:"Red",hex:"#EF4444"},{name:"Orange",hex:"#F97316"},{name:"Amber",hex:"#F59E0B"},{name:"Yellow",hex:"#EAB308"},{name:"Lime",hex:"#84CC16"},{name:"Green",hex:"#22C55E"},{name:"Emerald",hex:"#10B981"},{name:"Teal",hex:"#14B8A6"},{name:"Cyan",hex:"#06B6D4"},{name:"Sky",hex:"#0EA5E9"},{name:"Blue",hex:"#3B82F6"},{name:"Indigo",hex:"#6366F1"},{name:"Violet",hex:"#8B5CF6"},{name:"Purple",hex:"#A855F7"},{name:"Fuchsia",hex:"#D946EF"},{name:"Pink",hex:"#EC4899"},{name:"Rose",hex:"#F43F5E"},{name:"Slate",hex:"#64748B"},{name:"Black",hex:"#000000"},{name:"White",hex:"#FFFFFF"}];Y(q[0].hex);const $=({color:t,onChange:d})=>{const c=Q(t);return r.jsxs("div",{className:"space-y-2",children:[r.jsx("label",{className:"block text-sm font-medium text-gray-700",children:"Color"}),r.jsxs("div",{className:"flex flex-wrap gap-2",children:[q.map(a=>r.jsx("button",{onClick:()=>d(Y(a.hex)),className:`h-6 w-6 rounded-full border transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-1 ${c===a.hex?"ring-2 ring-blue-500 ring-offset-1":"border-gray-200"}`,style:{backgroundColor:a.hex},title:a.name},a.hex)),r.jsx("input",{type:"color",value:c,onChange:a=>d(Y(a.target.value)),className:"h-6 w-6 cursor-pointer rounded-full border border-gray-300 p-0 overflow-hidden",title:"Custom Color"})]})]})},me=t=>new Promise((d,c)=>{const a=new FileReader;a.readAsDataURL(t),a.onload=()=>d(a.result),a.onerror=o=>c(o)}),ee=({photos:t,photosNames:d,onUpload:c,onRemove:a,onPhotoClick:o})=>{const l=D(),g=async u=>{if(u.target.files){const f=Array.from(u.target.files),m=await Promise.all(f.map(me)),x=f.map(p=>p.name),w=3-t.length,E=m.slice(0,w),h=x.slice(0,w);c([...t,...E],[...d,...h])}};return r.jsxs("div",{className:"space-y-2",children:[r.jsx("div",{className:"flex items-center justify-between",children:r.jsxs("label",{className:"text-sm font-medium text-gray-700",children:[l.photos," (",t.length,"/3)"]})}),r.jsxs("div",{className:"flex flex-wrap gap-2",children:[t.map((u,f)=>r.jsxs("div",{className:"relative h-16 w-16 group",children:[r.jsx("img",{src:u,alt:`Upload ${f}`,className:"h-full w-full object-cover rounded border cursor-pointer",onClick:()=>o&&o(f)}),r.jsx("button",{onClick:()=>a(f),className:"absolute -top-1 -right-1 bg-red-500 text-white rounded-full p-0.5 w-4 h-4 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity",children:"×"})]},f)),t.length<3&&r.jsxs("label",{className:"flex h-16 w-16 cursor-pointer items-center justify-center rounded border-2 border-dashed border-gray-300 hover:border-blue-500 hover:bg-blue-50 transition-colors",children:[r.jsx("span",{className:"text-xl text-gray-400",children:"+"}),r.jsx("input",{type:"file",accept:"image/*",multiple:!0,onChange:g,className:"hidden"})]})]})]})},te=({photos:t,initialIndex:d,onClose:c})=>{const[a,o]=n.useState(d),[l,g]=n.useState(1),[u,f]=n.useState({x:0,y:0}),[m,x]=n.useState(!1),w=n.useRef({x:0,y:0}),E=n.useRef(null),h=n.useCallback(()=>{g(1),f({x:0,y:0})},[]),p=n.useCallback(()=>{o(i=>(i+1)%t.length),h()},[t.length,h]),R=n.useCallback(()=>{o(i=>(i-1+t.length)%t.length),h()},[t.length,h]);n.useEffect(()=>{const i=C=>{C.key==="Escape"&&c(),C.key==="ArrowRight"&&p(),C.key==="ArrowLeft"&&R()};return window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i)},[c,p,R]),n.useEffect(()=>{const i=E.current;if(!i)return;const C=T=>{T.preventDefault();const k=-T.deltaY*.01,_=Math.min(Math.max(1,l+k),5);g(_),_===1&&f({x:0,y:0})};return i.addEventListener("wheel",C,{passive:!1}),()=>i.removeEventListener("wheel",C)},[l]);const P=i=>{l>1&&(i.preventDefault(),x(!0),w.current={x:i.clientX-u.x,y:i.clientY-u.y},i.target.setPointerCapture(i.pointerId))},b=i=>{m&&l>1&&(i.preventDefault(),f({x:i.clientX-w.current.x,y:i.clientY-w.current.y}))},S=i=>{x(!1),i.target.releasePointerCapture(i.pointerId)};return t.length?r.jsxs("div",{className:"fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-90 overflow-hidden",onClick:i=>{i.stopPropagation(),c()},children:[r.jsx("button",{onClick:c,className:"absolute top-4 right-4 text-white hover:text-gray-300 z-50 p-2",children:r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-8 w-8",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})}),r.jsxs("div",{ref:E,className:"relative flex items-center justify-center w-full h-full p-4",onClick:i=>i.stopPropagation(),children:[t.length>1&&r.jsx("button",{onClick:R,className:"absolute left-4 z-40 p-2 text-white hover:bg-white/10 rounded-full transition-colors",children:r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-10 w-10",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),r.jsx("div",{className:"relative overflow-hidden flex items-center justify-center w-full h-full",children:r.jsx("img",{src:t[a],alt:`View ${a+1}`,onPointerDown:P,onPointerMove:b,onPointerUp:S,style:{transform:`scale(${l}) translate(${u.x/l}px, ${u.y/l}px)`,transition:m?"none":"transform 0.1s ease-out",cursor:l>1?m?"grabbing":"grab":"default",maxHeight:"100%",maxWidth:"100%"},className:"object-contain select-none touch-none"})}),t.length>1&&r.jsx("button",{onClick:p,className:"absolute right-4 z-40 p-2 text-white hover:bg-white/10 rounded-full transition-colors",children:r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-10 w-10",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})}),r.jsxs("div",{className:"absolute bottom-4 left-0 right-0 text-center text-white text-sm bg-black/50 py-1 pointer-events-none",children:[a+1," / ",t.length," ",l>1&&`(${Math.round(l*100)}%)`]})]})]}):null},z=({marker:t,onSave:d,onDelete:c,onClose:a})=>{const o=D(),[l,g]=n.useState(t.markerTitle),[u,f]=n.useState(t.note),[m,x]=n.useState(t.color),[w,E]=n.useState(t.photos),[h,p]=n.useState(t.photosName||[]),[R,P]=n.useState(!1),[b,S]=n.useState(0),[i,C]=n.useState(!1);n.useEffect(()=>{g(t.markerTitle),f(t.note),x(t.color),E(t.photos),p(t.photosName||[]),C(!1)},[t]);const T=()=>{if(!l.trim()){C(!0);return}d(t.id,{markerTitle:l,note:u,color:m,photos:w,photosName:h}),a()};return r.jsxs(r.Fragment,{children:[r.jsx("div",{className:"fixed inset-0 z-40 flex items-center justify-center bg-black/50",onClick:k=>k.stopPropagation(),children:r.jsxs("div",{className:"w-72 max-h-[90vh] overflow-y-auto rounded-lg bg-white p-4 shadow-xl border border-gray-200 relative z-50",children:[r.jsxs("div",{className:"mb-4 flex items-center justify-between",children:[r.jsx("h3",{className:"text-lg font-semibold text-gray-900",children:o.editMarker}),r.jsx("button",{onClick:a,className:"text-gray-400 hover:text-gray-600",children:"✕"})]}),r.jsxs("div",{className:"space-y-4",children:[r.jsxs("div",{children:[r.jsxs("label",{className:"block text-sm font-medium text-gray-700",children:[o.title," ",r.jsx("span",{className:"text-red-500",children:"*"})]}),r.jsx("input",{type:"text",value:l,placeholder:o.titlePlaceholder,onChange:k=>{g(k.target.value),i&&C(!1)},className:`mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none focus:ring-1 sm:text-sm ${i?"border-red-500 focus:border-red-500 focus:ring-red-500":"border-gray-300 focus:border-blue-500 focus:ring-blue-500"}`}),i&&r.jsx("p",{className:"mt-1 text-xs text-red-500",children:o.titleRequired})]}),r.jsxs("div",{children:[r.jsx("label",{className:"block text-sm font-medium text-gray-700",children:o.note}),r.jsx("textarea",{value:u,placeholder:o.notePlaceholder,onChange:k=>f(k.target.value),rows:3,className:"mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 sm:text-sm"})]}),r.jsx($,{color:m,onChange:x}),r.jsx(ee,{photos:w,photosNames:h,onUpload:(k,_)=>{E(k),p(_)},onRemove:k=>{E(w.filter((_,I)=>I!==k)),p(h.filter((_,I)=>I!==k))},onPhotoClick:k=>{S(k),P(!0)}}),r.jsxs("div",{className:"mt-4 flex justify-between",children:[r.jsx("button",{onClick:()=>c(t.id),className:"rounded px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50",children:o.delete}),r.jsxs("div",{className:"space-x-2",children:[r.jsx("button",{onClick:a,className:"rounded border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50",children:o.cancel}),r.jsx("button",{onClick:T,className:"rounded bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700",children:o.save})]})]})]})]})}),R&&r.jsx(te,{photos:w,initialIndex:b,onClose:()=>P(!1)})]})},re=({src:t,markers:d,onAddMarker:c,onUpdateMarker:a,onDeleteMarker:o})=>{const l=n.useRef(null),g=n.useRef(null),[u,f]=n.useState(null),[m,x]=n.useState(null),w=h=>{if(!g.current)return;if(u){f(null);return}if(m){x(null);return}const{x:p,y:R}=fe(h,g.current),P={id:crypto.randomUUID(),x:p,y:R,color:16711680,markerTitle:"",note:"",photos:[],photosName:[]};x(P)},E=d.find(h=>h.id===u);return r.jsx("div",{className:"relative inline-block overflow-hidden rounded-lg shadow-lg group select-none",children:r.jsxs("div",{ref:g,onClick:w,className:"relative cursor-crosshair",children:[r.jsx("img",{ref:l,src:t,alt:"Marker Area",className:"block max-w-full h-auto",draggable:!1}),d.map(h=>r.jsx(U,{marker:h,onClick:p=>{x(null),f(p.id)},onUpdate:(p,R)=>a(p,R),onDelete:o},h.id)),m&&r.jsx(U,{marker:m,onClick:()=>{},onUpdate:(h,p)=>x(R=>R?{...R,...p}:null),onDelete:()=>x(null)},"temp-marker"),E&&r.jsx(z,{marker:E,onSave:a,onDelete:h=>{o(h),f(null)},onClose:()=>f(null)}),m&&r.jsx(z,{marker:m,onSave:(h,p)=>{c({...m,...p}),x(null)},onDelete:()=>x(null),onClose:()=>x(null)})]})})},he=(t=[])=>{const[d,c]=n.useState(t),a=n.useCallback(u=>{c(f=>[...f,u])},[]),o=n.useCallback((u,f)=>{c(m=>m.map(x=>x.id===u?{...x,...f}:x))},[]),l=n.useCallback(u=>{c(f=>f.filter(m=>m.id!==u))},[]),g=n.useCallback(u=>{c(u)},[]);return{markers:d,addMarker:a,updateMarker:o,removeMarker:l,setAllMarkers:g}};N.ColorPicker=$,N.ImageArea=re,N.ImageMarker=re,N.Lightbox=te,N.MarkerItem=U,N.MarkerPopup=z,N.PhotoUploader=ee,N.useLocale=D,N.useMarkerState=he,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})}));

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "react-image-marker-viewer",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/react-image-marker.umd.js",
+  "module": "./dist/react-image-marker.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-image-marker.es.js",
+      "require": "./dist/react-image-marker.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.5.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  }
+}