{"_id":"@arandana/landing-editor","_rev":"3-28b71d03de97be911950d87d1e2e25b8","name":"@arandana/landing-editor","dist-tags":{"latest":"1.6.1"},"versions":{"1.5.1":{"name":"@arandana/landing-editor","version":"1.5.1","keywords":["react","typescript","vite","craftjs","editor","landing-page"],"author":{"name":"Arandana"},"license":"MIT","_id":"@arandana/landing-editor@1.5.1","maintainers":[{"name":"planny","email":"marioroger11@gmail.com"}],"homepage":"https://github.com/meowlnir/landing-editor#readme","bugs":{"url":"https://github.com/meowlnir/landing-editor/issues"},"dist":{"shasum":"6f02ad3e9e3c218bf3a80b61187dec9259e147ac","tarball":"https://registry.npmjs.org/@arandana/landing-editor/-/landing-editor-1.5.1.tgz","fileCount":69,"integrity":"sha512-Xvmib9tOnEURoevoRvW4+89swTfGIDeSKtsJ1M0d43bHQxvSVcY9UoQEzbkMY+WRzII5Fj0HTax0mGufyms9zw==","signatures":[{"sig":"MEUCIQDrmgx11hpiC3rUgVHH/86v/oURkC8dz6Tf1IpHKtjuZQIgVxd2yPnyHdkzT/Q8qL+Hn/QOa3GxNQlgI4jZP8G/1d8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2294649},"main":"./dist/main.js","types":"./dist/index.d.ts","module":"./dist/main.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/main.es.js","require":"./dist/main.js"},"./style.css":{"import":"./dist/style.css","require":"./dist/style.css"},"./dist/style.css":"./dist/style.css"},"gitHead":"7d692b3791df03814dc31cac95e166508ad224d7","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 10","build":"tsc && vite build","preview":"vite preview","lint:fix":"eslint . --ext ts,tsx --fix","build:lib":"tsc && vite build --mode library","type-check":"tsc --noEmit","publish:local":"pnpm run build:lib && pnpm publish --no-git-checks"},"_npmUser":{"name":"planny","email":"marioroger11@gmail.com"},"repository":{"url":"git+https://github.com/meowlnir/landing-editor.git","type":"git"},"_npmVersion":"10.8.2","description":"A React library with Craft.js integration for building landing page editors","directories":{},"_nodeVersion":"20.19.5","dependencies":{"clsx":"^2.0.0","axios":"^1.12.2","tippy.js":"^6.3.7","@tiptap/pm":"^3.8.0","lucide-react":"^0.544.0","@craftjs/core":"^0.2.5","@tiptap/react":"^3.8.0","@editorjs/code":"^2.9.3","@editorjs/list":"^2.0.8","react-colorful":"^5.6.1","tailwind-merge":"^2.0.0","@craftjs/layers":"^0.2.5","@editorjs/quote":"^2.7.6","@editorjs/header":"^2.8.8","@editorjs/editorjs":"^2.31.0","@tiptap/suggestion":"^3.8.0","@editorjs/paragraph":"^2.11.7","@editorjs/underline":"^1.2.1","@tiptap/starter-kit":"^3.8.0","@radix-ui/react-slot":"^1.0.0","@radix-ui/react-tabs":"^1.1.13","@editorjs/inline-code":"^1.5.2","@phosphor-icons/react":"^2.0.0","@radix-ui/react-label":"^2.1.7","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.0.0","@radix-ui/react-switch":"^1.2.6","@tiptap/extension-link":"^3.8.0","@radix-ui/react-menubar":"^1.1.16","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-tooltip":"^1.2.8","@tiptap/extension-color":"^3.8.0","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.2.12","@tiptap/extension-document":"^3.8.0","@tiptap/extension-underline":"^3.8.0","@radix-ui/react-alert-dialog":"^1.1.15","@tiptap/extension-text-align":"^3.8.0","@tiptap/extension-text-style":"^3.8.0","@tiptap/extension-bubble-menu":"^3.8.0","@tiptap/extension-placeholder":"^3.8.0","@tiptap/extension-floating-menu":"^3.8.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.12.2+sha512.a32540185b964ee30bb4e979e405adc6af59226b438ee4cc19f9e8773667a66d302f5bfee60a39d3cac69e35e4b96e708a71dd002b7e9359c4112a1722ac323f","devDependencies":{"sass":"^1.93.2","vite":"^4.4.5","react":"^18.2.0","eslint":"^8.45.0","postcss":"^8.4.31","react-dom":"^18.2.0","typescript":"^5.0.2","@types/node":"^24.9.1","tailwindcss":"^3.3.5","@types/react":"^18.2.15","autoprefixer":"^10.4.16","vite-plugin-dts":"^3.5.3","@types/react-dom":"^18.2.7","semantic-release":"^25.0.2","@vitejs/plugin-react":"^4.0.3","@semantic-release/git":"^10.0.1","@semantic-release/github":"^12.0.2","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.4.3","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/landing-editor_1.5.1_1765657175070_0.08059941560402262","host":"s3://npm-registry-packages-npm-production"}},"1.6.0":{"name":"@arandana/landing-editor","version":"1.6.0","keywords":["react","typescript","vite","craftjs","editor","landing-page"],"author":{"name":"Arandana"},"license":"MIT","_id":"@arandana/landing-editor@1.6.0","maintainers":[{"name":"planny","email":"marioroger11@gmail.com"}],"homepage":"https://github.com/meowlnir/landing-editor#readme","bugs":{"url":"https://github.com/meowlnir/landing-editor/issues"},"dist":{"shasum":"b49bae276a596b201d3545451b0855f45eebe797","tarball":"https://registry.npmjs.org/@arandana/landing-editor/-/landing-editor-1.6.0.tgz","fileCount":69,"integrity":"sha512-Evag6O7igxllJ4UkeNoABe0B5Fx4NU8R1V5LyhsD1TsVJI5Qm24I3mpStLm3TX3fNq0wg8wxP2NE2Xd16d/cHg==","signatures":[{"sig":"MEUCIQDQyxkVLt71wLEvypSa6FL6L8wPXG3Bbg/rQO0qdOX0OgIgEyrewCO7Mou2x6rJBUfZH5Fm/oczgBH5/LtiyvBQNJ4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2294211},"main":"./dist/main.js","types":"./dist/index.d.ts","module":"./dist/main.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/main.es.js","require":"./dist/main.js"},"./style.css":{"import":"./dist/style.css","require":"./dist/style.css"},"./dist/style.css":"./dist/style.css"},"gitHead":"c0662d0428e8eb4b3d44d4b0de9b94b7e7513c8e","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 10","build":"tsc && vite build","preview":"vite preview","lint:fix":"eslint . --ext ts,tsx --fix","build:lib":"tsc && vite build --mode library","type-check":"tsc --noEmit","publish:local":"pnpm run build:lib && pnpm publish --no-git-checks"},"_npmUser":{"name":"planny","email":"marioroger11@gmail.com"},"repository":{"url":"git+https://github.com/meowlnir/landing-editor.git","type":"git"},"_npmVersion":"10.8.2","description":"A React library with Craft.js integration for building landing page editors","directories":{},"_nodeVersion":"20.19.5","dependencies":{"clsx":"^2.0.0","axios":"^1.12.2","tippy.js":"^6.3.7","@tiptap/pm":"^3.8.0","lucide-react":"^0.544.0","@craftjs/core":"^0.2.5","@tiptap/react":"^3.8.0","@editorjs/code":"^2.9.3","@editorjs/list":"^2.0.8","react-colorful":"^5.6.1","tailwind-merge":"^2.0.0","@craftjs/layers":"^0.2.5","@editorjs/quote":"^2.7.6","@editorjs/header":"^2.8.8","@editorjs/editorjs":"^2.31.0","@tiptap/suggestion":"^3.8.0","@editorjs/paragraph":"^2.11.7","@editorjs/underline":"^1.2.1","@tiptap/starter-kit":"^3.8.0","@radix-ui/react-slot":"^1.0.0","@radix-ui/react-tabs":"^1.1.13","@editorjs/inline-code":"^1.5.2","@phosphor-icons/react":"^2.0.0","@radix-ui/react-label":"^2.1.7","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.0.0","@radix-ui/react-switch":"^1.2.6","@tiptap/extension-link":"^3.8.0","@radix-ui/react-menubar":"^1.1.16","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-tooltip":"^1.2.8","@tiptap/extension-color":"^3.8.0","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.2.12","@tiptap/extension-document":"^3.8.0","@tiptap/extension-underline":"^3.8.0","@radix-ui/react-alert-dialog":"^1.1.15","@tiptap/extension-text-align":"^3.8.0","@tiptap/extension-text-style":"^3.8.0","@tiptap/extension-bubble-menu":"^3.8.0","@tiptap/extension-placeholder":"^3.8.0","@tiptap/extension-floating-menu":"^3.8.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.12.2+sha512.a32540185b964ee30bb4e979e405adc6af59226b438ee4cc19f9e8773667a66d302f5bfee60a39d3cac69e35e4b96e708a71dd002b7e9359c4112a1722ac323f","devDependencies":{"sass":"^1.93.2","vite":"^4.4.5","react":"^18.2.0","eslint":"^8.45.0","postcss":"^8.4.31","react-dom":"^18.2.0","typescript":"^5.0.2","@types/node":"^24.9.1","tailwindcss":"^3.3.5","@types/react":"^18.2.15","autoprefixer":"^10.4.16","vite-plugin-dts":"^3.5.3","@types/react-dom":"^18.2.7","semantic-release":"^25.0.2","@vitejs/plugin-react":"^4.0.3","@semantic-release/git":"^10.0.1","@semantic-release/github":"^12.0.2","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@semantic-release/changelog":"^6.0.3","eslint-plugin-react-refresh":"^0.4.3","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/landing-editor_1.6.0_1765974952569_0.36730303014885757","host":"s3://npm-registry-packages-npm-production"}},"1.6.1":{"name":"@arandana/landing-editor","version":"1.6.1","description":"A React library with Craft.js integration for building landing page editors","main":"./dist/main.js","module":"./dist/main.es.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/main.es.js","require":"./dist/main.js","types":"./dist/index.d.ts"},"./style.css":{"import":"./dist/style.css","require":"./dist/style.css"},"./dist/style.css":"./dist/style.css"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"scripts":{"dev":"vite","build":"tsc && vite build","build:lib":"tsc && vite build --mode library","preview":"vite preview","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 10","lint:fix":"eslint . --ext ts,tsx --fix","type-check":"tsc --noEmit","publish:local":"pnpm run build:lib && pnpm publish --no-git-checks"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@semantic-release/github":"^12.0.2","@types/node":"^24.9.1","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","@vitejs/plugin-react":"^4.0.3","autoprefixer":"^10.4.16","eslint":"^8.45.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","postcss":"^8.4.31","react":"^18.2.0","react-dom":"^18.2.0","sass":"^1.93.2","semantic-release":"^25.0.2","tailwindcss":"^3.3.5","typescript":"^5.0.2","vite":"^4.4.5","vite-plugin-dts":"^3.5.3"},"dependencies":{"@craftjs/core":"^0.2.5","@craftjs/layers":"^0.2.5","@editorjs/code":"^2.9.3","@editorjs/editorjs":"^2.31.0","@editorjs/header":"^2.8.8","@editorjs/inline-code":"^1.5.2","@editorjs/list":"^2.0.8","@editorjs/paragraph":"^2.11.7","@editorjs/quote":"^2.7.6","@editorjs/underline":"^1.2.1","@phosphor-icons/react":"^2.0.0","@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-alert-dialog":"^1.1.15","@radix-ui/react-label":"^2.1.7","@radix-ui/react-menubar":"^1.1.16","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.0.0","@radix-ui/react-slot":"^1.0.0","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-tooltip":"^1.2.8","@tiptap/extension-bubble-menu":"^3.8.0","@tiptap/extension-color":"^3.8.0","@tiptap/extension-document":"^3.8.0","@tiptap/extension-floating-menu":"^3.8.0","@tiptap/extension-link":"^3.8.0","@tiptap/extension-placeholder":"^3.8.0","@tiptap/extension-text-align":"^3.8.0","@tiptap/extension-text-style":"^3.8.0","@tiptap/extension-underline":"^3.8.0","@tiptap/pm":"^3.8.0","@tiptap/react":"^3.8.0","@tiptap/starter-kit":"^3.8.0","@tiptap/suggestion":"^3.8.0","axios":"^1.12.2","class-variance-authority":"^0.7.0","clsx":"^2.0.0","lucide-react":"^0.544.0","react-colorful":"^5.6.1","tailwind-merge":"^2.0.0","tippy.js":"^6.3.7"},"keywords":["react","typescript","vite","craftjs","editor","landing-page"],"author":{"name":"Arandana"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/meowlnir/landing-editor.git"},"packageManager":"pnpm@10.12.2+sha512.a32540185b964ee30bb4e979e405adc6af59226b438ee4cc19f9e8773667a66d302f5bfee60a39d3cac69e35e4b96e708a71dd002b7e9359c4112a1722ac323f","_id":"@arandana/landing-editor@1.6.1","gitHead":"b1c95c8169e02f8cb91e1be4dbdb743a90b1f3f2","bugs":{"url":"https://github.com/meowlnir/landing-editor/issues"},"homepage":"https://github.com/meowlnir/landing-editor#readme","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-qFHV6a0r6wJxQI/oAssj8+n18t+aI9MXduVrgi9G4+1lFaZQdPHZljWC8hI/+G4B+DWdHm/lthZrw3yPtRpnfA==","shasum":"c59fa56579093c5f3e845c3bd1cfea790b643985","tarball":"https://registry.npmjs.org/@arandana/landing-editor/-/landing-editor-1.6.1.tgz","fileCount":69,"unpackedSize":2294211,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCID2GooRN8Nd+5fPsWYRutBogTPzgFkWkse5wD02B0TirAiBxXsb2wVyFiKDRDqF1IG/3cbDjHJBQA9xJwymiqmWiKA=="}]},"_npmUser":{"name":"planny","email":"marioroger11@gmail.com"},"directories":{},"maintainers":[{"name":"planny","email":"marioroger11@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/landing-editor_1.6.1_1766410161047_0.37553108117808875"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-13T20:19:34.995Z","modified":"2025-12-22T13:29:21.434Z","1.5.1":"2025-12-13T20:19:35.248Z","1.6.0":"2025-12-17T12:35:52.806Z","1.6.1":"2025-12-22T13:29:21.244Z"},"bugs":{"url":"https://github.com/meowlnir/landing-editor/issues"},"author":{"name":"Arandana"},"license":"MIT","homepage":"https://github.com/meowlnir/landing-editor#readme","keywords":["react","typescript","vite","craftjs","editor","landing-page"],"repository":{"type":"git","url":"git+https://github.com/meowlnir/landing-editor.git"},"description":"A React library with Craft.js integration for building landing page editors","maintainers":[{"name":"planny","email":"marioroger11@gmail.com"}],"readme":"# @meowlnir/landing-editor\n\nA modern React 18 + TypeScript library powered by Vite and Craft.js for building beautiful landing page editors.  \nSimple integration, full type safety, and flexible components for your projects.\n\n---\n\n## Features\n\n- **Editor Mode**: Full-featured Craft.js editor with drag-and-drop, properties panel, and save functionality\n- **Preview Mode**: Read-only display for rendering editor content\n- **Render Mode**: Display components with simulated API data (WYSIWYG demo mode)\n- **React 18**: Built using the latest React API\n- **TypeScript**: Full type definitions for IntelliSense and safety\n- **Ready for Production**: UMD and ES modules, TypeScript declarations included\n\n---\n\n## Installation\n\nInstall via pnpm (recommended):\n\n```bash\npnpm add @meowlnir/landing-editor\n```\n\n> **Peer Dependencies**:  \n> Make sure you have React 18 and React DOM installed in your project:\n>\n> ```bash\n> pnpm add react@^18.0.0 react-dom@^18.0.0\n> ```\n\n### CDN Usage (CSS only)\n\nIf you only need the compiled CSS file, you can use a CDN without installing the full package:\n\n```html\n<!-- jsDelivr CDN -->\n<link\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/@meowlnir/landing-editor@latest/dist/style.css\"\n/>\n\n<!-- or Unpkg CDN -->\n<link\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/@meowlnir/landing-editor@latest/dist/style.css\"\n/>\n```\n\nThis exposes only the compiled styles, not the source code.\n\n---\n\n## Usage\n\n### Editor Component\n\n```tsx\nimport { Editor } from \"@meowlnir/landing-editor\";\n\nconst handleSave = (data: string) => {\n  // Save data to your backend or localStorage\n};\n\nexport default function MyEditorApp() {\n  return (\n    <Editor\n      initialData={savedData} // Optional: load previously saved data\n      onSave={handleSave} // Optional: callback when user saves\n    />\n  );\n}\n```\n\n### Preview Component\n\n```tsx\nimport { Preview } from \"@meowlnir/landing-editor\";\n\nexport default function MyPreview() {\n  return (\n    <Preview\n      data={savedData} // Optional: data to display\n      className=\"my-preview\" // Optional: CSS class\n      style={{ padding: \"20px\" }} // Optional: inline styles\n    />\n  );\n}\n```\n\n### Render Component\n\nThe Render component displays your landing page with simulated API data, showing how it would look when consuming real backend data.\n\n```tsx\nimport { Render } from \"@meowlnir/landing-editor\";\n\nexport default function MyRender() {\n  return (\n    <Render\n      data={savedData} // Optional: editor data to render\n      className=\"my-render\" // Optional: CSS class\n      style={{ padding: \"20px\" }} // Optional: inline styles\n    />\n  );\n}\n```\n\n---\n\n## API Reference\n\n### Editor\n\n| Prop          | Type                     | Description                    |\n| ------------- | ------------------------ | ------------------------------ |\n| `initialData` | `string`                 | Serialized editor data to load |\n| `onSave`      | `(data: string) => void` | Callback when user saves       |\n\n### Preview\n\n| Prop            | Type                           | Description                |\n| --------------- | ------------------------------ | -------------------------- |\n| `data`          | `string`                       | Serialized data to display |\n| `className`     | `string`                       | CSS class for styling      |\n| `style`         | `React.CSSProperties`          | Inline styles              |\n| `onButtonClick` | `(buttonText: string) => void` | Button click handler       |\n\n### Render\n\n| Prop        | Type                  | Description                                     |\n| ----------- | --------------------- | ----------------------------------------------- |\n| `data`      | `string`              | Serialized editor data to render with mock data |\n| `className` | `string`              | CSS class for styling                           |\n| `style`     | `React.CSSProperties` | Inline styles                                   |\n\n---\n\n## Available Components\n\n- **Container**: Layout container, customizable background\n- **Text**: Editable text with font size\n- **Button**: Interactive button with color options\n\n### Hero Sections\n\n- **Hero Simple**: Clean profile-style hero with avatar\n- **Hero Gradient**: Hero with gradient background\n- **Hero Banner**: Hero with banner image\n- **Hero Card**: Card-style hero presentation\n\n### Content Blocks\n\n- **Services Block**: Display services with pricing, ratings, and booking\n- **Social Links Block**: Social media icons and links\n- **Rich Text Block**: HTML content editor\n- **Video Block**: Embed videos (YouTube, Vimeo, etc.)\n\nYou can easily extend built-in components using Craft.js resolver.\n\n## Editor Modes\n\nThe editor includes three distinct modes accessible via tabs:\n\n1. **Edición (Editor Mode)**: Full editing capabilities with drag-and-drop, component settings, and customization\n2. **Vista previa (Preview Mode)**: Read-only view showing exactly what was configured in editor mode\n3. **Render Mode**: Displays components with simulated API data, demonstrating how the page would look when consuming real backend services\n\nThis \"What You See Is What You Get\" (WYSIWYG) approach ensures your designs match production output.\n\n---\n\n## Data Services & Backend Integration\n\n### Environment Configuration\n\nConfigure your backend connection via `.env` file:\n\n```env\n# Data mode: 'fake' for demo data, 'real' for production API\nVITE_DATA_MODE=fake\n\n# Backend API base URL (only required for real mode)\nVITE_API_BASE_URL=https://api.dashflow.com\n\n# Default tenant slug for demo mode\nVITE_DEFAULT_TENANT=roger-maldonado\n```\n\n### API Endpoints (Production Mode)\n\nWhen `VITE_DATA_MODE=real`, the editor expects these endpoints on your backend:\n\n#### 1. Fetch Landing Settings\n\n```\nGET /api/v1/landing/{tenantSlug}/settings\n```\n\n**Response**: `LandingSettings` object containing profile, services, social links, and theme.\n\n#### 2. Fetch User Profile\n\n```\nGET /api/v1/users/{tenantSlug}/profile\n```\n\n**Response**: `UserProfile` object with user details.\n\n#### 3. Fetch Services\n\n```\nGET /api/v1/users/{tenantSlug}/services\n```\n\n**Response**: Array of `Service` objects.\n\n#### 4. Fetch Social Links\n\n```\nGET /api/v1/users/{tenantSlug}/social-links\n```\n\n**Response**: Array of `SocialLink` objects.\n\n#### 5. Save Editor Customizations\n\n```\nPUT /api/v1/landing/{tenantSlug}/editor-data\n```\n\n**Request Body**:\n\n```json\n{\n  \"editorData\": {\n    /* serialized CraftJS editor state */\n  },\n  \"updatedAt\": \"2025-10-23T10:30:00Z\"\n}\n```\n\n#### 6. Book a Service\n\n```\nPOST /api/v1/users/{tenantSlug}/services/{serviceId}/book\n```\n\n**Request Body**: Service booking details (custom structure).\n\n### Auto-Injection of Backend Data\n\nWhen users drag components from the toolbar, the editor **automatically injects backend data** into those components at creation time. This ensures seamless integration between editor and backend without manual steps.\n\n#### How It Works\n\n1. **User drags component** (e.g., \"Tarjeta de Presentación\") from toolbar\n2. **Editor detects component type** and fetches corresponding backend data\n3. **Component is created with backend data** as initial props\n4. **User sees data immediately** - no placeholder phase\n\n#### Components with Auto-Injection\n\n| Component        | Backend Data Source | Props Injected                                     |\n| ---------------- | ------------------- | -------------------------------------------------- |\n| HeroSimple       | UserProfile         | `name`, `role`, `description`, `profileImage`      |\n| HeroCard         | UserProfile         | `name`, `role`, `description`, `profileImage`      |\n| HeroGradient     | UserProfile         | `title`, `subtitle`                                |\n| HeroBanner       | UserProfile         | `title`, `subtitle`, `description`, `profileImage` |\n| ServicesBlock    | Service[]           | `services`                                         |\n| SocialLinksBlock | SocialLink[]        | `links`                                            |\n| VideoBlock       | Video[]             | `videoUrl`, `title`                                |\n\n#### Example: Dragging a Hero\n\n```typescript\n// When user drags HeroCard from toolbar:\n// 1. Toolbar detects HeroCard is a Hero component\n// 2. Gets backendSettings.profile: { fullName: \"Roger Maldonado\", profession: \"Senior Engineer\", ... }\n// 3. Creates component with these props:\n//\n//   <HeroCard\n//     name=\"Roger Maldonado\"\n//     role=\"Senior Engineer\"\n//     description=\"10+ years of experience...\"\n//     profileImage=\"https://...\"\n//   />\n//\n// 4. User sees \"Roger Maldonado\" immediately\n```\n\n#### Customization\n\nUsers can still customize injected data:\n\n- Edit component properties in the sidebar\n- Changes are saved to the editor state\n- User customizations take priority over backend data when rendering\n\n#### UserProfile\n\n```typescript\ninterface UserProfile {\n  id: string;\n  slug: string;\n  fullName: string;\n  email: string;\n  bio?: string;\n  profession?: string;\n  profileImage?: string;\n  coverImage?: string;\n  phone?: string;\n  location?: string;\n}\n```\n\n#### Service\n\n```typescript\ninterface Service {\n  id: string;\n  name: string;\n  description: string;\n  price: number;\n  currency: string;\n  duration: number;\n  durationUnit: string;\n  rating?: number;\n  reviews?: number;\n  icon?: string;\n  color?: string;\n  available: boolean;\n  popular?: boolean;\n  category?: string;\n}\n```\n\n#### SocialLink\n\n```typescript\ninterface SocialLink {\n  platform: string; // e.g., 'twitter', 'linkedin', 'instagram'\n  url: string;\n  enabled: boolean;\n  icon?: string;\n  order?: number;\n}\n```\n\n#### LandingSettings (Complete Response)\n\n```typescript\ninterface LandingSettings {\n  profile: UserProfile;\n  services: Service[];\n  socialLinks: SocialLink[];\n  theme?: {\n    primaryColor?: string;\n    secondaryColor?: string;\n    accentColor?: string;\n    backgroundColor?: string;\n    fontFamily?: string;\n  };\n  seo?: {\n    title?: string;\n    description?: string;\n    keywords?: string[];\n    ogImage?: string;\n  };\n  customData?: Record<string, any>;\n}\n```\n\n### Authentication\n\nThe API client automatically includes:\n\n- **Authorization Header**: `Authorization: Bearer {AUTH_TOKEN}` (when available)\n- **Tenant Header**: `X-Tenant-Slug: {tenantSlug}`\n\nConfigure auth token via environment or provide it when initializing the data provider.\n\n### Data Merge Strategy\n\nWhen rendering, backend data is merged with editor customizations:\n\n- **Backend** provides dynamic content: profiles, services, social links\n- **Editor** provides layout, styling, and component configuration\n- **Editor customizations take precedence** for specific field overrides\n\nExample: If a user customizes the hero title in the editor, that value is used. Otherwise, the backend profile name is displayed.\n\n---\n\n## TypeScript Support\n\nType definitions are included for all exported components and props.\n\n```tsx\nimport {\n  EditorProps,\n  PreviewProps,\n  RenderProps,\n} from \"@meowlnir/landing-editor\";\n```\n\n---\n\n## Example\n\nA minimal example to get you started:\n\n```tsx\nimport { Editor, Preview, Render } from \"@meowlnir/landing-editor\";\n\nfunction App() {\n  const [data, setData] = React.useState(\"\");\n\n  return (\n    <>\n      <Editor onSave={setData} />\n      <Preview data={data} />\n      <Render data={data} />\n    </>\n  );\n}\n```\n\nThe Editor component includes built-in tabs for switching between editor, preview, and render modes, so you typically only need to use the Editor component in your application.\n\n---\n\n## Publishing and Releases\n\nThis package is automatically published to GitHub Packages when a new release is created. The GitHub Actions workflow will:\n\n1. Install dependencies with pnpm\n2. Build the library using `pnpm run build:lib`\n3. Publish the package to GitHub Packages\n\n### Creating a Release from GitHub Web Interface\n\n1. Go to the [GitHub repository](https://github.com/meowlnir/landing-editor)\n2. Click on \"Releases\" in the right sidebar or go to `/releases`\n3. Click \"Create a new release\"\n4. Choose or create a new tag (e.g., `v1.0.0`, `v1.1.0`)\n5. Add a release title and description\n6. Click \"Publish release\"\n\n### Creating a Release from Terminal\n\n```bash\n# Create and push a tag\ngit tag v1.0.0\ngit push origin v1.0.0\n\n# Or create a release using GitHub CLI\ngh release create v1.0.0 --title \"v1.0.0\" --notes \"Release notes here\"\n```\n\nThe workflow will automatically trigger when:\n\n- A release is published with any tag\n- A tag matching the pattern `v*` is pushed (e.g., `v1.0.0`, `v2.1.3`)\n\n---\n\n## License\n\nMIT\n\n## Support\n\nIf you have questions or issues, please open an issue in the [GitHub repository](https://github.com/meowlnir/landing-editor/issues).\n\n## Documentation\n\nThe detailed implementation and setup guides have been moved to the `docs/` directory. Useful files:\n\n- [Index / overview](./docs/INDEX.md)\n- [Getting started guide (EN)](./docs/GETTING_STARTED.md)\n- [Quick start (ES)](./docs/QUICK_START_ES.md)\n- [Setup guide (ES)](./docs/SETUP_GUIDE_ES.md)\n- [Implementation summary (ES)](./docs/IMPLEMENTATION_SUMMARY_ES.md)\n- [Troubleshooting](./docs/TROUBLESHOOTING.md)\n- [Changes made / changelog](./docs/CHANGES_MADE.md)\n- [Implementation README](./docs/README_IMPLEMENTATION.md)\n- [Implementation complete notes](./docs/IMPLEMENTATION_COMPLETE.md)\n\nIf you can't find a specific document, check the `docs/` folder or open an issue in the repository.\n","readmeFilename":"README.md"}