text-img-editor 0.1.0

package/README.md

@@ -0,0 +1,88 @@
+# Text & Image Editor
+
+Block-based editor for creating LLM prompts with text, annotated images, and variables. Features Slate.js rich text with @mentions and #variables.
+
+## Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Start upload server (for image uploads)
+cd server && npm install && npm start
+
+# Run development server (new terminal)
+npm run dev
+```
+
+Open http://localhost:5173
+
+## Features
+
+### Rich Text Editor (Slate.js)
+- **@mentions** - Reference bounding boxes on images (`@BOX_NAME`)
+- **#variables** - Insert string or boolean variables (`#VAR_NAME`)
+- Click on tokens to see details (box preview / variable info)
+
+### Image Blocks
+- Drag & drop images into the document
+- Draw bounding boxes with mouse
+- Name boxes in SCREAMING_SNAKE_CASE for @mention references
+- Add descriptions to boxes
+
+### LLM-Ready Output
+Generates OpenAI Vision API compatible format:
+
+```json
+{
+  "content": [
+    { "type": "text", "text": "Analyze [box_id - abc123]" },
+    { "type": "image", "image": "https://..." },
+    { "type": "text", "text": "{\"image_id\":\"...\",\"image_size\":[1920,1080],\"boxes\":[...]}" }
+  ]
+}
+```
+
+## Usage
+
+1. **Text**: Click to type, use `@` for box mentions, `#` for variables
+2. **Images**: Drag image files into the editor
+3. **Boxes**: Click and drag on images to draw bounding boxes
+4. **Box Names**: Click a box to set its SCREAMING_SNAKE_CASE name
+5. **Mentions**: Type `@` to reference named boxes in text
+6. **Variables**: Type `#` to insert or create variables
+
+## Token Format
+
+| Token | Example | Output |
+|-------|---------|--------|
+| @mention | `@MACHINE` | `[box_id - xyz123]` |
+| #variable (string) | `#USER_NAME` | Replaced with value |
+| #variable (boolean) | `#IS_ACTIVE` | `[CONDITION: if "..." then ... else ...]` |
+
+## Box Metadata Format
+
+```json
+{
+  "image_id": "abc123",
+  "image_size": [1920, 1080],
+  "bbox_format": "xyxy",
+  "bbox_units": "pixels",
+  "boxes": [
+    {
+      "box_id": "xyz789",
+      "label": "MACHINE",
+      "semantic": "CNC machine",
+      "bbox": [100, 200, 500, 600]
+    }
+  ]
+}
+```
+
+## Tech Stack
+
+- React 18
+- TypeScript
+- Vite
+- Slate.js (rich text)
+- Express (upload server)

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react/jsx-runtime"),i=require("react");function S(){return Math.random().toString(36).substring(2,9)}const V=new Map;function W(e){const s=[];for(const n of V.values()){const o=new RegExp(n.parsePattern.source,"g");let t;for(;(t=o.exec(e))!==null;){const a=n.parseMatch(t);a.start=t.index,a.end=t.index+t[0].length,s.push(a)}}return s.sort((n,o)=>n.start-o.start)}function _(e,s){const n=W(e);for(let o=n.length-1;o>=0;o--){const t=n[o];if(t.type==="mention"){const a=`[box_id - ${t.data.boxId}]`;e=e.substring(0,t.start)+a+e.substring(t.end)}else if(t.type==="variable"){const a=s[t.data.name];if(a)if(a.type==="string")e=e.substring(0,t.start)+a.value+e.substring(t.end);else{const r=`[CONDITION: if "${a.condition.if}" then ${a.condition.then} else ${a.condition.else}]`;e=e.substring(0,t.start)+r+e.substring(t.end)}}}return e}function q(e,s){const n=[];for(const o of e)if(o.type==="text"){const a=_(o.content,s);a.trim()&&n.push({type:"text",text:a})}else if(o.type==="image"){const t=o;if(n.push({type:"image",image:t.src}),t.width&&t.height){const a=t.width,r=t.height,p={image_id:t.id,image_size:[a,r],bbox_format:"[x, y, width, height]",bbox_units:"pixels",boxes:t.boxes.map(c=>({box_id:c.id,label:c.name||"",semantic:c.description||"",bbox_format:"[x, y, width, height]",bbox:[Math.round(c.x*a),Math.round(c.y*r),Math.round(c.width*a),Math.round(c.height*r)]}))};n.push({type:"text",text:JSON.stringify(p,null,2)})}}return{content:n}}const A={name:"json-v1",version:"1.0",serialize(e,s={},n){const o=e.map(a=>a.type==="text"?{type:"text",content:a.content}:{type:"image",src:a.src,width:a.width,height:a.height,boxes:a.boxes.map(p=>({id:p.id,name:p.name||"",x:p.x,y:p.y,width:p.width,height:p.height,description:p.description}))}),t=q(e,s);return{version:1,blocks:o,variables:Object.keys(s).length>0?s:void 0,metadata:n??{updatedAt:new Date().toISOString()},llm_value:t}},deserialize(e){return{blocks:e.blocks.map(n=>n.type==="text"?{id:S(),type:"text",content:n.content}:{id:S(),type:"image",src:n.src,width:n.width,height:n.height,boxes:n.boxes.map(t=>({id:t.id,name:t.name||"",x:t.x,y:t.y,width:t.width,height:t.height,description:t.description}))}),variables:e.variables||{}}},validate(e){const s=[];if(!e||typeof e!="object")return{valid:!1,errors:[{path:"",message:"Data must be an object"}]};const n=e;return n.version!==1&&s.push({path:"version",message:"Version must be 1"}),Array.isArray(n.blocks)?(n.blocks.forEach((o,t)=>{if(!o||typeof o!="object"){s.push({path:`blocks[${t}]`,message:"Block must be an object"});return}const a=o;a.type==="text"?typeof a.content!="string"&&s.push({path:`blocks[${t}].content`,message:"Content must be a string"}):a.type==="image"?(typeof a.src!="string"&&s.push({path:`blocks[${t}].src`,message:"Src must be a string"}),Array.isArray(a.boxes)||s.push({path:`blocks[${t}].boxes`,message:"Boxes must be an array"})):s.push({path:`blocks[${t}].type`,message:'Type must be "text" or "image"'})}),n.variables!==void 0&&(typeof n.variables!="object"||n.variables===null)&&s.push({path:"variables",message:"Variables must be an object"}),{valid:s.length===0,errors:s}):(s.push({path:"blocks",message:"Blocks must be an array"}),{valid:!1,errors:s})}},J=e=>e.startsWith("data:image/");function H({initialData:e,onChange:s}={}){const o=(()=>{if(e){const f=A.validate(e);if(f.valid)return A.deserialize(e);console.error("Invalid initialData:",f.errors)}return{blocks:[],variables:{}}})(),[t,a]=i.useState(o.blocks),[r,p]=i.useState(o.variables),c=i.useRef(!0),d=i.useRef(s);d.current=s,i.useEffect(()=>{if(c.current){c.current=!1;return}if(!t.some(u=>u.type==="image"&&J(u.src))&&d.current){const u=A.serialize(t,r);d.current(u)}},[t,r]);const m=i.useCallback(f=>{const u={id:S(),type:"text",content:""};a(l=>f!==void 0?[...l.slice(0,f),u,...l.slice(f)]:[...l,u])},[]),v=i.useCallback((f,u)=>{const l=S(),b={id:l,type:"image",src:f,boxes:[]};return a(k=>u!==void 0?[...k.slice(0,u),b,...k.slice(u)]:[...k,b]),l},[]),B=i.useCallback((f,u)=>{a(l=>l.map(b=>b.id===f?{...b,...u}:b))},[]),w=i.useCallback(f=>{a(u=>u.filter(l=>l.id!==f))},[]),x=i.useCallback((f,u)=>{p(l=>({...l,[f]:u}))},[]);return{blocks:t,variables:r,addTextBlock:m,addImageBlock:v,updateBlock:B,deleteBlock:w,addVariable:x}}const F=e=>e.startsWith("data:image/");function G({onUploadImage:e,onUpdateBlock:s}){const[n,o]=i.useState(new Map),t=i.useCallback((c,d)=>F(d)&&!n.has(c),[n]),a=i.useCallback((c,d)=>{!e||!F(d)||(o(m=>{const v=new Map(m);return v.delete(c),v}),e(d).then(m=>{const v=new Image;v.onload=()=>{s(c,{src:m})},v.onerror=()=>{o(B=>new Map(B).set(c,"Failed to load image"))},v.src=m}).catch(m=>{console.error("Failed to upload image:",m);const v=m instanceof Error?m.message:"Upload failed";o(B=>new Map(B).set(c,v))}))},[e,s]),r=i.useCallback((c,d)=>{F(d)&&a(c,d)},[a]),p=i.useCallback(c=>c.some(d=>d.type==="image"&&F(d.src)),[]);return{uploadErrors:n,isUploading:t,uploadImageInBackground:a,retryUpload:r,hasBase64Images:p}}function K({blocksCount:e,focusedBlockIndex:s,onAddImageBlock:n,onAddTextBlock:o,onSetFocusedBlockIndex:t}){const[a,r]=i.useState(!1),[p,c]=i.useState(null),d=i.useRef(0),m=i.useCallback(l=>{l.preventDefault(),d.current++,l.dataTransfer.types.includes("Files")&&r(!0)},[]),v=i.useCallback(l=>{l.preventDefault(),l.dataTransfer.dropEffect="copy"},[]),B=i.useCallback(l=>{l.preventDefault(),d.current--,d.current===0&&(r(!1),c(null))},[]),w=i.useCallback((l,b)=>{const k=new FileReader;k.onload=y=>{var M;const E=(M=y.target)==null?void 0:M.result;n(E,b),setTimeout(()=>{o(b+1),t(b+1)},50)},k.readAsDataURL(l)},[n,o,t]),x=i.useCallback(l=>{if(l.defaultPrevented)return;l.preventDefault(),d.current=0,r(!1),c(null);const k=Array.from(l.dataTransfer.files).find(y=>y.type.startsWith("image/"));k&&w(k,e)},[e,w]),f=i.useCallback((l,b)=>{l.preventDefault(),l.stopPropagation(),d.current=0,r(!1),c(null);const y=Array.from(l.dataTransfer.files).find(E=>E.type.startsWith("image/"));y&&w(y,b)},[w]),u=i.useCallback(l=>{const k=Array.from(l.clipboardData.items).find(y=>y.type.startsWith("image/"));if(k){l.preventDefault();const y=k.getAsFile();if(y){const E=s+1;w(y,E)}}},[s,w]);return{isDraggingFile:a,activeDropZone:p,setActiveDropZone:c,handleDragEnter:m,handleDragOver:v,handleDragLeave:B,handleEditorDrop:x,handleDropOnZone:f,handlePaste:u}}function Q({isFirst:e,visible:s,isActive:n,onDragEnter:o,onDragLeave:t,onDrop:a}){return D.jsx("div",{className:`drop-zone ${s?"drop-zone--visible":""} ${n?"drop-zone--active":""} ${e?"drop-zone--first":""}`,onDragEnter:o,onDragLeave:t,onDragOver:r=>r.preventDefault(),onDrop:a,children:D.jsx("div",{className:"drop-zone-line"})})}const L=i.memo(Q,(e,s)=>e.visible===s.visible&&e.isActive===s.isActive&&e.isFirst===s.isFirst),X=new Map;function Y(e){return X.get(e)}function ee({block:e,blockIndex:s,focusedBlockIndex:n,allBlocks:o,variables:t,onUpdate:a,onDelete:r,onVariableCreate:p,isUploading:c,getUploadError:d,onRetryUpload:m,onFocus:v}){const B=Y(e.type);if(!B)return null;const w=B.Component,x=i.useMemo(()=>({blockIndex:s,focusedBlockIndex:n,allBlocks:o,variables:t,onVariableCreate:p,isUploading:c,getUploadError:d,onRetryUpload:m}),[s,n,o,t,p,c,d,m]),f=i.useMemo(()=>B.getProps(e,x),[B,e,x]);return D.jsx("div",{className:"block-wrapper",draggable:!1,onFocus:v,onDragStart:u=>u.preventDefault(),children:D.jsx(w,{block:e,onUpdate:a,onDelete:r,...f})})}function te(e,s){if(e.block!==s.block)return!1;const n=e.blockIndex===e.focusedBlockIndex,o=s.blockIndex===s.focusedBlockIndex;if(n!==o||s.block.type==="text"&&(e.variables!==s.variables||e.allBlocks!==s.allBlocks))return!1;if(s.block.type==="image"){const t=e.isUploading(e.block.id,e.block.src),a=s.isUploading(s.block.id,s.block.src);if(t!==a)return!1;const r=e.getUploadError(e.block.id),p=s.getUploadError(s.block.id);if(r!==p)return!1}return!0}const se=i.memo(ee,te);function ae({initialData:e,onChange:s,onUploadImage:n}){const[o,t]=i.useState(0),a=i.useRef(null),{blocks:r,variables:p,addTextBlock:c,addImageBlock:d,updateBlock:m,deleteBlock:v,addVariable:B}=H({initialData:e,onChange:s}),{uploadErrors:w,isUploading:x,uploadImageInBackground:f,retryUpload:u}=G({onUploadImage:n,onUpdateBlock:m}),l=i.useCallback((g,h)=>{const C=d(g,h);f(C,g)},[d,f]),{isDraggingFile:b,activeDropZone:k,setActiveDropZone:y,handleDragEnter:E,handleDragOver:M,handleDragLeave:$,handleEditorDrop:N,handleDropOnZone:U,handlePaste:O}=K({blocksCount:r.length,focusedBlockIndex:o,onAddImageBlock:l,onAddTextBlock:c,onSetFocusedBlockIndex:t}),T=i.useCallback((g,h)=>{B(g,h)},[B]),z=i.useCallback(g=>{const h=r.find(C=>C.id===g);h&&h.type==="image"&&u(g,h.src)},[r,u]),P=i.useCallback(g=>w.get(g),[w]),Z=i.useMemo(()=>{const g=new Map;return r.forEach((h,C)=>{g.set(h.id,{onUpdate:j=>m(h.id,j),onDelete:()=>v(h.id),onFocus:()=>t(C)})}),g},[r,m,v]),R=i.useCallback(g=>{k===g&&y(null)},[k,y]),I=i.useMemo(()=>{const g=new Map;for(let h=0;h<=r.length;h++){const C=h;g.set(C,{onDragEnter:()=>y(C),onDragLeave:()=>R(C),onDrop:j=>U(j,C)})}return g},[r.length,y,R,U]);return r.length===0?D.jsxs("div",{className:"editor editor--empty",onDragEnter:E,onDragOver:M,onDragLeave:$,onDrop:g=>U(g,0),children:[D.jsx("div",{className:"editor-placeholder",onClick:()=>c(),children:D.jsx("span",{children:"Start typing or drag an image here..."})}),b&&D.jsxs("div",{className:"editor-drop-overlay",children:[D.jsx("div",{className:"drop-icon",children:"📷"}),D.jsx("p",{children:"Drop image to add"})]})]}):D.jsx("div",{ref:a,className:`editor ${b?"editor--dragging":""}`,onDragEnter:E,onDragOver:M,onDragLeave:$,onDrop:N,onPaste:O,children:D.jsxs("div",{className:"editor-document",children:[r.map((g,h)=>{const C=Z.get(g.id),j=I.get(h);return!C||!j?null:D.jsxs("div",{className:"block-with-dropzone",children:[D.jsx(L,{index:h,isFirst:h===0,visible:b,isActive:k===h,onDragEnter:j.onDragEnter,onDragLeave:j.onDragLeave,onDrop:j.onDrop}),D.jsx(se,{block:g,blockIndex:h,focusedBlockIndex:o,allBlocks:r,variables:p,onUpdate:C.onUpdate,onDelete:C.onDelete,onVariableCreate:T,isUploading:x,getUploadError:P,onRetryUpload:z,onFocus:C.onFocus})]},g.id)}),I.get(r.length)&&D.jsx(L,{index:r.length,visible:b,isActive:k===r.length,onDragEnter:I.get(r.length).onDragEnter,onDragLeave:I.get(r.length).onDragLeave,onDrop:I.get(r.length).onDrop})]})})}exports.Editor=ae;exports.JsonV1Adapter=A;

package/dist/index.d.ts

@@ -0,0 +1,180 @@
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare type Block = TextBlock | ImageBlock;
+
+declare type BlockV1 = TextBlockV1 | ImageBlockV1;
+
+declare interface BooleanVariable {
+    type: 'boolean';
+    condition: {
+        if: string;
+        then: boolean;
+        else: boolean;
+    };
+}
+
+export declare interface BoundingBox {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    description: string;
+}
+
+declare interface BoxV1 {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    description: string;
+}
+
+declare interface DocumentMetadata {
+    createdAt?: string;
+    updatedAt?: string;
+    title?: string;
+}
+
+export declare interface DocumentV1 {
+    version: 1;
+    blocks: BlockV1[];
+    variables?: VariablesMap;
+    metadata?: DocumentMetadata;
+    llm_value?: LLMValue;
+}
+
+export declare function Editor({ initialData, onChange, onUploadImage }: EditorProps_2): JSX_2.Element;
+
+export declare interface EditorProps {
+    initialData?: DocumentV1 | null;
+    onChange?: (data: DocumentV1) => void;
+    onUploadImage?: (base64: string) => Promise<string>;
+}
+
+declare interface EditorProps_2 {
+    initialData?: DocumentV1 | null;
+    onChange?: (data: DocumentV1) => void;
+    onUploadImage?: (base64: string) => Promise<string>;
+}
+
+export declare interface ImageBlock {
+    id: string;
+    type: 'image';
+    src: string;
+    width?: number;
+    height?: number;
+    boxes: BoundingBox[];
+}
+
+declare interface ImageBlockV1 {
+    type: 'image';
+    src: string;
+    width?: number;
+    height?: number;
+    boxes: BoxV1[];
+}
+
+/**
+ * JSON V1 Serializer Adapter
+ *
+ * Converts between internal Block[] format and external DocumentV1 format.
+ *
+ * Key differences:
+ * - External format has version and metadata
+ * - External TextBlock/ImageBlock don't have id (internal only)
+ * - External BoxV1 keeps id (for referencing in text)
+ */
+export declare const JsonV1Adapter: SerializerAdapter<DocumentV1>;
+
+export declare interface LLMBox {
+    box_id: string;
+    label: string;
+    semantic: string;
+    bbox: [number, number, number, number];
+}
+
+export declare interface LLMBoxMetadata {
+    image_id: string;
+    image_size: [number, number];
+    bbox_format: '[x, y, width, height]';
+    bbox_units: 'pixels';
+    boxes: LLMBox[];
+}
+
+export declare type LLMContentItem = LLMTextContent | LLMImageContent;
+
+declare interface LLMImageContent {
+    type: 'image';
+    image: string;
+}
+
+declare interface LLMTextContent {
+    type: 'text';
+    text: string;
+}
+
+export declare interface LLMValue {
+    content: LLMContentItem[];
+}
+
+declare interface SerializerAdapter<T = unknown> {
+    /** Adapter name for identification */
+    name: string;
+    /** Version of this adapter */
+    version: string;
+    /** Convert internal blocks to external format */
+    serialize(blocks: Block[], variables?: VariablesMap, metadata?: DocumentMetadata): T;
+    /** Convert external format to internal blocks */
+    deserialize(data: T): {
+        blocks: Block[];
+        variables: VariablesMap;
+    };
+    /** Validate external data before deserializing */
+    validate(data: unknown): ValidationResult;
+}
+
+declare interface StringVariable {
+    type: 'string';
+    value: string;
+}
+
+export declare interface TextBlock {
+    id: string;
+    type: 'text';
+    content: string;
+}
+
+declare interface TextBlockV1 {
+    type: 'text';
+    content: string;
+}
+
+declare interface ValidationError {
+    path: string;
+    message: string;
+}
+
+declare interface ValidationResult {
+    valid: boolean;
+    errors: ValidationError[];
+}
+
+export declare type Variable = StringVariable | BooleanVariable;
+
+export declare type VariablesMap = Record<string, Variable>;
+
+export { }
+
+
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}
+

package/dist/index.js

@@ -0,0 +1,545 @@
+import { jsx as E, jsxs as x } from "react/jsx-runtime";
+import { useState as A, useRef as N, useEffect as q, useCallback as h, memo as Z, useMemo as z } from "react";
+function C() {
+  return Math.random().toString(36).substring(2, 9);
+}
+const G = /* @__PURE__ */ new Map();
+function K(e) {
+  const n = [];
+  for (const r of G.values()) {
+    const o = new RegExp(r.parsePattern.source, "g");
+    let t;
+    for (; (t = o.exec(e)) !== null; ) {
+      const s = r.parseMatch(t);
+      s.start = t.index, s.end = t.index + t[0].length, n.push(s);
+    }
+  }
+  return n.sort((r, o) => r.start - o.start);
+}
+function Q(e, n) {
+  const r = K(e);
+  for (let o = r.length - 1; o >= 0; o--) {
+    const t = r[o];
+    if (t.type === "mention") {
+      const s = `[box_id - ${t.data.boxId}]`;
+      e = e.substring(0, t.start) + s + e.substring(t.end);
+    } else if (t.type === "variable") {
+      const s = n[t.data.name];
+      if (s)
+        if (s.type === "string")
+          e = e.substring(0, t.start) + s.value + e.substring(t.end);
+        else {
+          const a = `[CONDITION: if "${s.condition.if}" then ${s.condition.then} else ${s.condition.else}]`;
+          e = e.substring(0, t.start) + a + e.substring(t.end);
+        }
+    }
+  }
+  return e;
+}
+function X(e, n) {
+  const r = [];
+  for (const o of e)
+    if (o.type === "text") {
+      const s = Q(o.content, n);
+      s.trim() && r.push({
+        type: "text",
+        text: s
+      });
+    } else if (o.type === "image") {
+      const t = o;
+      if (r.push({
+        type: "image",
+        image: t.src
+      }), t.width && t.height) {
+        const s = t.width, a = t.height, u = {
+          image_id: t.id,
+          image_size: [s, a],
+          bbox_format: "[x, y, width, height]",
+          bbox_units: "pixels",
+          boxes: t.boxes.map((c) => ({
+            box_id: c.id,
+            label: c.name || "",
+            semantic: c.description || "",
+            bbox_format: "[x, y, width, height]",
+            // Convert normalized (0-1) to pixels [x, y, width, height]
+            bbox: [
+              Math.round(c.x * s),
+              Math.round(c.y * a),
+              Math.round(c.width * s),
+              Math.round(c.height * a)
+            ]
+          }))
+        };
+        r.push({
+          type: "text",
+          text: JSON.stringify(u, null, 2)
+        });
+      }
+    }
+  return { content: r };
+}
+const T = {
+  name: "json-v1",
+  version: "1.0",
+  serialize(e, n = {}, r) {
+    const o = e.map((s) => s.type === "text" ? {
+      type: "text",
+      content: s.content
+    } : {
+      type: "image",
+      src: s.src,
+      width: s.width,
+      height: s.height,
+      boxes: s.boxes.map((u) => ({
+        id: u.id,
+        name: u.name || "",
+        x: u.x,
+        y: u.y,
+        width: u.width,
+        height: u.height,
+        description: u.description
+      }))
+    }), t = X(e, n);
+    return {
+      version: 1,
+      blocks: o,
+      variables: Object.keys(n).length > 0 ? n : void 0,
+      metadata: r ?? {
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      },
+      llm_value: t
+    };
+  },
+  deserialize(e) {
+    return {
+      blocks: e.blocks.map((r) => r.type === "text" ? {
+        id: C(),
+        type: "text",
+        content: r.content
+      } : {
+        id: C(),
+        type: "image",
+        src: r.src,
+        width: r.width,
+        height: r.height,
+        boxes: r.boxes.map((t) => ({
+          id: t.id,
+          name: t.name || "",
+          x: t.x,
+          y: t.y,
+          width: t.width,
+          height: t.height,
+          description: t.description
+        }))
+      }),
+      variables: e.variables || {}
+    };
+  },
+  validate(e) {
+    const n = [];
+    if (!e || typeof e != "object")
+      return { valid: !1, errors: [{ path: "", message: "Data must be an object" }] };
+    const r = e;
+    return r.version !== 1 && n.push({ path: "version", message: "Version must be 1" }), Array.isArray(r.blocks) ? (r.blocks.forEach((o, t) => {
+      if (!o || typeof o != "object") {
+        n.push({ path: `blocks[${t}]`, message: "Block must be an object" });
+        return;
+      }
+      const s = o;
+      s.type === "text" ? typeof s.content != "string" && n.push({ path: `blocks[${t}].content`, message: "Content must be a string" }) : s.type === "image" ? (typeof s.src != "string" && n.push({ path: `blocks[${t}].src`, message: "Src must be a string" }), Array.isArray(s.boxes) || n.push({ path: `blocks[${t}].boxes`, message: "Boxes must be an array" })) : n.push({ path: `blocks[${t}].type`, message: 'Type must be "text" or "image"' });
+    }), r.variables !== void 0 && (typeof r.variables != "object" || r.variables === null) && n.push({ path: "variables", message: "Variables must be an object" }), { valid: n.length === 0, errors: n }) : (n.push({ path: "blocks", message: "Blocks must be an array" }), { valid: !1, errors: n });
+  }
+}, Y = (e) => e.startsWith("data:image/");
+function ee({
+  initialData: e,
+  onChange: n
+} = {}) {
+  const o = (() => {
+    if (e) {
+      const p = T.validate(e);
+      if (p.valid)
+        return T.deserialize(e);
+      console.error("Invalid initialData:", p.errors);
+    }
+    return { blocks: [], variables: {} };
+  })(), [t, s] = A(o.blocks), [a, u] = A(o.variables), c = N(!0), l = N(n);
+  l.current = n, q(() => {
+    if (c.current) {
+      c.current = !1;
+      return;
+    }
+    if (!t.some(
+      (d) => d.type === "image" && Y(d.src)
+    ) && l.current) {
+      const d = T.serialize(t, a);
+      l.current(d);
+    }
+  }, [t, a]);
+  const m = h((p) => {
+    const d = {
+      id: C(),
+      type: "text",
+      content: ""
+    };
+    s(
+      (i) => p !== void 0 ? [...i.slice(0, p), d, ...i.slice(p)] : [...i, d]
+    );
+  }, []), D = h((p, d) => {
+    const i = C(), v = {
+      id: i,
+      type: "image",
+      src: p,
+      boxes: []
+    };
+    return s(
+      (b) => d !== void 0 ? [...b.slice(0, d), v, ...b.slice(d)] : [...b, v]
+    ), i;
+  }, []), k = h((p, d) => {
+    s(
+      (i) => i.map(
+        (v) => v.id === p ? { ...v, ...d } : v
+      )
+    );
+  }, []), w = h((p) => {
+    s((d) => d.filter((i) => i.id !== p));
+  }, []), I = h((p, d) => {
+    u((i) => ({
+      ...i,
+      [p]: d
+    }));
+  }, []);
+  return {
+    blocks: t,
+    variables: a,
+    addTextBlock: m,
+    addImageBlock: D,
+    updateBlock: k,
+    deleteBlock: w,
+    addVariable: I
+  };
+}
+const L = (e) => e.startsWith("data:image/");
+function te({
+  onUploadImage: e,
+  onUpdateBlock: n
+}) {
+  const [r, o] = A(/* @__PURE__ */ new Map()), t = h((c, l) => L(l) && !r.has(c), [r]), s = h((c, l) => {
+    !e || !L(l) || (o((m) => {
+      const D = new Map(m);
+      return D.delete(c), D;
+    }), e(l).then((m) => {
+      const D = new Image();
+      D.onload = () => {
+        n(c, { src: m });
+      }, D.onerror = () => {
+        o((k) => new Map(k).set(c, "Failed to load image"));
+      }, D.src = m;
+    }).catch((m) => {
+      console.error("Failed to upload image:", m);
+      const D = m instanceof Error ? m.message : "Upload failed";
+      o((k) => new Map(k).set(c, D));
+    }));
+  }, [e, n]), a = h((c, l) => {
+    L(l) && s(c, l);
+  }, [s]), u = h((c) => c.some(
+    (l) => l.type === "image" && L(l.src)
+  ), []);
+  return {
+    uploadErrors: r,
+    isUploading: t,
+    uploadImageInBackground: s,
+    retryUpload: a,
+    hasBase64Images: u
+  };
+}
+function ne({
+  blocksCount: e,
+  focusedBlockIndex: n,
+  onAddImageBlock: r,
+  onAddTextBlock: o,
+  onSetFocusedBlockIndex: t
+}) {
+  const [s, a] = A(!1), [u, c] = A(null), l = N(0), m = h((i) => {
+    i.preventDefault(), l.current++, i.dataTransfer.types.includes("Files") && a(!0);
+  }, []), D = h((i) => {
+    i.preventDefault(), i.dataTransfer.dropEffect = "copy";
+  }, []), k = h((i) => {
+    i.preventDefault(), l.current--, l.current === 0 && (a(!1), c(null));
+  }, []), w = h((i, v) => {
+    const b = new FileReader();
+    b.onload = (y) => {
+      var U;
+      const F = (U = y.target) == null ? void 0 : U.result;
+      r(F, v), setTimeout(() => {
+        o(v + 1), t(v + 1);
+      }, 50);
+    }, b.readAsDataURL(i);
+  }, [r, o, t]), I = h((i) => {
+    if (i.defaultPrevented) return;
+    i.preventDefault(), l.current = 0, a(!1), c(null);
+    const b = Array.from(i.dataTransfer.files).find((y) => y.type.startsWith("image/"));
+    b && w(b, e);
+  }, [e, w]), p = h((i, v) => {
+    i.preventDefault(), i.stopPropagation(), l.current = 0, a(!1), c(null);
+    const y = Array.from(i.dataTransfer.files).find((F) => F.type.startsWith("image/"));
+    y && w(y, v);
+  }, [w]), d = h((i) => {
+    const b = Array.from(i.clipboardData.items).find((y) => y.type.startsWith("image/"));
+    if (b) {
+      i.preventDefault();
+      const y = b.getAsFile();
+      if (y) {
+        const F = n + 1;
+        w(y, F);
+      }
+    }
+  }, [n, w]);
+  return {
+    isDraggingFile: s,
+    activeDropZone: u,
+    setActiveDropZone: c,
+    handleDragEnter: m,
+    handleDragOver: D,
+    handleDragLeave: k,
+    handleEditorDrop: I,
+    handleDropOnZone: p,
+    handlePaste: d
+  };
+}
+function se({
+  isFirst: e,
+  visible: n,
+  isActive: r,
+  onDragEnter: o,
+  onDragLeave: t,
+  onDrop: s
+}) {
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      className: `drop-zone ${n ? "drop-zone--visible" : ""} ${r ? "drop-zone--active" : ""} ${e ? "drop-zone--first" : ""}`,
+      onDragEnter: o,
+      onDragLeave: t,
+      onDragOver: (a) => a.preventDefault(),
+      onDrop: s,
+      children: /* @__PURE__ */ E("div", { className: "drop-zone-line" })
+    }
+  );
+}
+const S = Z(se, (e, n) => e.visible === n.visible && e.isActive === n.isActive && e.isFirst === n.isFirst), re = /* @__PURE__ */ new Map();
+function ae(e) {
+  return re.get(e);
+}
+function oe({
+  block: e,
+  blockIndex: n,
+  focusedBlockIndex: r,
+  allBlocks: o,
+  variables: t,
+  onUpdate: s,
+  onDelete: a,
+  onVariableCreate: u,
+  isUploading: c,
+  getUploadError: l,
+  onRetryUpload: m,
+  onFocus: D
+}) {
+  const k = ae(e.type);
+  if (!k) return null;
+  const w = k.Component, I = z(() => ({
+    blockIndex: n,
+    focusedBlockIndex: r,
+    allBlocks: o,
+    variables: t,
+    onVariableCreate: u,
+    isUploading: c,
+    getUploadError: l,
+    onRetryUpload: m
+  }), [n, r, o, t, u, c, l, m]), p = z(
+    () => k.getProps(e, I),
+    [k, e, I]
+  );
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      className: "block-wrapper",
+      draggable: !1,
+      onFocus: D,
+      onDragStart: (d) => d.preventDefault(),
+      children: /* @__PURE__ */ E(
+        w,
+        {
+          block: e,
+          onUpdate: s,
+          onDelete: a,
+          ...p
+        }
+      )
+    }
+  );
+}
+function ie(e, n) {
+  if (e.block !== n.block) return !1;
+  const r = e.blockIndex === e.focusedBlockIndex, o = n.blockIndex === n.focusedBlockIndex;
+  if (r !== o || n.block.type === "text" && (e.variables !== n.variables || e.allBlocks !== n.allBlocks))
+    return !1;
+  if (n.block.type === "image") {
+    const t = e.isUploading(e.block.id, e.block.src), s = n.isUploading(n.block.id, n.block.src);
+    if (t !== s) return !1;
+    const a = e.getUploadError(e.block.id), u = n.getUploadError(n.block.id);
+    if (a !== u) return !1;
+  }
+  return !0;
+}
+const ce = Z(oe, ie);
+function ge({
+  initialData: e,
+  onChange: n,
+  onUploadImage: r
+}) {
+  const [o, t] = A(0), s = N(null), {
+    blocks: a,
+    variables: u,
+    addTextBlock: c,
+    addImageBlock: l,
+    updateBlock: m,
+    deleteBlock: D,
+    addVariable: k
+  } = ee({
+    initialData: e,
+    onChange: n
+  }), {
+    uploadErrors: w,
+    isUploading: I,
+    uploadImageInBackground: p,
+    retryUpload: d
+  } = te({
+    onUploadImage: r,
+    onUpdateBlock: m
+  }), i = h((g, f) => {
+    const B = l(g, f);
+    p(B, g);
+  }, [l, p]), {
+    isDraggingFile: v,
+    activeDropZone: b,
+    setActiveDropZone: y,
+    handleDragEnter: F,
+    handleDragOver: U,
+    handleDragLeave: j,
+    handleEditorDrop: R,
+    handleDropOnZone: O,
+    handlePaste: V
+  } = ne({
+    blocksCount: a.length,
+    focusedBlockIndex: o,
+    onAddImageBlock: i,
+    onAddTextBlock: c,
+    onSetFocusedBlockIndex: t
+  }), W = h((g, f) => {
+    k(g, f);
+  }, [k]), _ = h((g) => {
+    const f = a.find((B) => B.id === g);
+    f && f.type === "image" && d(g, f.src);
+  }, [a, d]), H = h((g) => w.get(g), [w]), J = z(() => {
+    const g = /* @__PURE__ */ new Map();
+    return a.forEach((f, B) => {
+      g.set(f.id, {
+        onUpdate: (M) => m(f.id, M),
+        onDelete: () => D(f.id),
+        onFocus: () => t(B)
+      });
+    }), g;
+  }, [a, m, D]), P = h((g) => {
+    b === g && y(null);
+  }, [b, y]), $ = z(() => {
+    const g = /* @__PURE__ */ new Map();
+    for (let f = 0; f <= a.length; f++) {
+      const B = f;
+      g.set(B, {
+        onDragEnter: () => y(B),
+        onDragLeave: () => P(B),
+        onDrop: (M) => O(M, B)
+      });
+    }
+    return g;
+  }, [a.length, y, P, O]);
+  return a.length === 0 ? /* @__PURE__ */ x(
+    "div",
+    {
+      className: "editor editor--empty",
+      onDragEnter: F,
+      onDragOver: U,
+      onDragLeave: j,
+      onDrop: (g) => O(g, 0),
+      children: [
+        /* @__PURE__ */ E("div", { className: "editor-placeholder", onClick: () => c(), children: /* @__PURE__ */ E("span", { children: "Start typing or drag an image here..." }) }),
+        v && /* @__PURE__ */ x("div", { className: "editor-drop-overlay", children: [
+          /* @__PURE__ */ E("div", { className: "drop-icon", children: "📷" }),
+          /* @__PURE__ */ E("p", { children: "Drop image to add" })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ E(
+    "div",
+    {
+      ref: s,
+      className: `editor ${v ? "editor--dragging" : ""}`,
+      onDragEnter: F,
+      onDragOver: U,
+      onDragLeave: j,
+      onDrop: R,
+      onPaste: V,
+      children: /* @__PURE__ */ x("div", { className: "editor-document", children: [
+        a.map((g, f) => {
+          const B = J.get(g.id), M = $.get(f);
+          return !B || !M ? null : /* @__PURE__ */ x("div", { className: "block-with-dropzone", children: [
+            /* @__PURE__ */ E(
+              S,
+              {
+                index: f,
+                isFirst: f === 0,
+                visible: v,
+                isActive: b === f,
+                onDragEnter: M.onDragEnter,
+                onDragLeave: M.onDragLeave,
+                onDrop: M.onDrop
+              }
+            ),
+            /* @__PURE__ */ E(
+              ce,
+              {
+                block: g,
+                blockIndex: f,
+                focusedBlockIndex: o,
+                allBlocks: a,
+                variables: u,
+                onUpdate: B.onUpdate,
+                onDelete: B.onDelete,
+                onVariableCreate: W,
+                isUploading: I,
+                getUploadError: H,
+                onRetryUpload: _,
+                onFocus: B.onFocus
+              }
+            )
+          ] }, g.id);
+        }),
+        $.get(a.length) && /* @__PURE__ */ E(
+          S,
+          {
+            index: a.length,
+            visible: v,
+            isActive: b === a.length,
+            onDragEnter: $.get(a.length).onDragEnter,
+            onDragLeave: $.get(a.length).onDragLeave,
+            onDrop: $.get(a.length).onDrop
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  ge as Editor,
+  T as JsonV1Adapter
+};

package/dist/style.css

@@ -0,0 +1 @@
+.editor{background:#fff;border:1px solid #e0e0e0;border-radius:8px;min-height:500px;position:relative;padding:40px 60px;box-shadow:0 1px 3px #00000014}.editor--dragging{border-color:#2196f3;background:linear-gradient(to bottom,#e3f2fd,#fff 100px)}.editor--empty{display:flex;align-items:flex-start;justify-content:flex-start}.editor-placeholder{color:#9e9e9e;font-size:16px;cursor:text;padding:4px 0;width:100%}.editor-placeholder:hover{color:#757575}.editor-document{display:flex;flex-direction:column;padding-bottom:48px;position:relative}.block-wrapper{position:relative;-webkit-user-drag:none;user-drag:none}.block-with-dropzone{position:relative}.drop-zone{position:absolute;left:0;right:0;top:-12px;height:24px;z-index:50;display:flex;align-items:center;justify-content:center;cursor:copy;opacity:0;pointer-events:none}.drop-zone--visible{opacity:1;pointer-events:auto}.drop-zone--first{top:0}.drop-zone-line{width:100%;height:4px;background:#90caf9;border-radius:2px;pointer-events:none}.drop-zone--active .drop-zone-line{background:#2196f3}.editor-document>.drop-zone{position:absolute;bottom:8px;top:auto;height:32px}.editor-drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#2196f3f2;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;z-index:100;pointer-events:none}.drop-icon{font-size:64px;margin-bottom:16px}.editor-drop-overlay p{font-size:18px;font-weight:500;color:#fff}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "text-img-editor",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "slate": "^0.120.0",
+    "slate-history": "^0.113.1",
+    "slate-react": "^0.120.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourorg/text-img-editor"
+  },
+  "keywords": [
+    "react",
+    "editor",
+    "llm",
+    "bounding-box",
+    "image-annotation"
+  ],
+  "license": "MIT"
+}