@airoom/nextmin-react 1.4.0 → 1.4.1

package/dist/components/editor/components/SchemaInsertionModal.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, 
+// RadioGroup, // Removed
+// Radio, // Removed
+Input, } from '@heroui/react';
+import { RefMultiSelect } from '../../RefMultiSelect';
+import { cn } from '../../../lib/utils'; // Assuming cn utility is available
+export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, }) => {
+    const [viewType, setViewType] = useState('grid');
+    const [template, setTemplate] = useState('');
+    const [urlPattern, setUrlPattern] = useState('{slug}_{id}');
+    const [selectedIds, setSelectedIds] = useState([]);
+    // const [limit, setLimit] = useState('6'); // Removed limit
+    const handleInsert = () => {
+        onInsert({ viewType, template, ids: selectedIds, urlPattern });
+        onClose();
+        // Reset state
+        setTimeout(() => {
+            setViewType('grid');
+            setTemplate('');
+            setUrlPattern('{slug}_{id}');
+            setSelectedIds([]);
+        }, 200);
+    };
+    if (!schema)
+        return null;
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "2xl", classNames: {
+            base: "bg-white dark:bg-zinc-950 border border-gray-200 dark:border-gray-800",
+            header: "border-b border-gray-200 dark:border-gray-800",
+            footer: "border-t border-gray-200 dark:border-gray-800",
+        }, children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsxs(ModalHeader, { children: ["Insert ", schema.modelName] }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "Select Items" }), _jsx(RefMultiSelect, { name: "items", label: "Search & Select", refModel: schema.modelName, value: selectedIds, onChange: (ids) => setSelectedIds(ids), pageSize: 20 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to fetch latest items automatically." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "View Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setViewType('grid'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'grid'
+                                                    ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
+                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50"), children: "Grid (Pills)" }), _jsx("button", { onClick: () => setViewType('list'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'list'
+                                                    ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
+                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50"), children: "List (Rows)" })] })] }), _jsx(Input, { label: "Template String", placeholder: "e.g. {name} - {designation}", value: template, onChange: (e) => setTemplate(e.target.value), description: "Use {fieldName} to insert dynamic data", variant: "bordered", labelPlacement: "outside" }), _jsx(Input, { label: "URL Suffix", placeholder: "{slug}_{id}", value: urlPattern, onChange: (e) => setUrlPattern(e.target.value), description: `Appended to ${process.env.NEXT_PUBLIC_FRONTEND_URL || 'BASE_URL'}/...`, variant: "bordered", labelPlacement: "outside" })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, children: "Insert" })] })] }) }) }));
+};

package/dist/components/editor/components/TableBubbleMenu.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/react';
+interface TableBubbleMenuProps {
+    editor: Editor | null;
+}
+export declare const TableBubbleMenu: ({ editor }: TableBubbleMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/editor/components/TableBubbleMenu.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from '@tiptap/react/menus';
+import { Columns, Rows, Trash2 } from 'lucide-react';
+export const TableBubbleMenu = ({ editor }) => {
+    if (!editor)
+        return null;
+    return (_jsxs(BubbleMenu, { editor: editor, shouldShow: ({ editor }) => editor.isActive('table'), className: "flex items-center gap-1 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-gray-700 shadow-lg p-1 rounded-lg", children: [_jsxs("button", { type: "button", onClick: () => editor.chain().focus().addColumnBefore().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Column Before", children: [_jsx(Columns, { size: 14, className: "rotate-180" }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().addColumnAfter().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Column After", children: [_jsx(Columns, { size: 14 }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().deleteColumn().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-red-500", title: "Delete Column", children: [_jsx(Columns, { size: 14 }), "-"] }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 dark:bg-gray-600 mx-1" }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().addRowBefore().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Row Before", children: [_jsx(Rows, { size: 14, className: "rotate-180" }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().addRowAfter().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200", title: "Add Row After", children: [_jsx(Rows, { size: 14 }), "+"] }), _jsxs("button", { type: "button", onClick: () => editor.chain().focus().deleteRow().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-red-500", title: "Delete Row", children: [_jsx(Rows, { size: 14 }), "-"] }), _jsx("div", { className: "w-[1px] h-4 bg-gray-300 dark:bg-gray-600 mx-1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteTable().run(), className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-red-500", title: "Delete Table", children: _jsx(Trash2, { size: 16 }) })] }));
+};

package/dist/components/editor/extensions/Container.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const Container: Node<any, any>;

package/dist/components/editor/extensions/Container.js

@@ -0,0 +1,51 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const Container = Node.create({
+    name: 'container',
+    group: 'block',
+    content: 'block+', // Can contain paragraphs, lists, etc.
+    defining: true, // Prevents node from being replaced when content is pasted
+    isolating: false, // Allow backspace to delete/merge
+    addAttributes() {
+        return {
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.backgroundColor,
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `background-color: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.borderRadius,
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `border-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="container"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'container',
+                class: 'nm-editor-container',
+            }),
+            0,
+        ];
+    },
+});

package/dist/components/editor/extensions/Grid.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+export declare const GridContainer: Node<any, any>;
+export declare const GridItem: Node<any, any>;

package/dist/components/editor/extensions/Grid.js

@@ -0,0 +1,89 @@
+import { Node } from '@tiptap/core';
+export const GridContainer = Node.create({
+    name: 'gridContainer',
+    group: 'block',
+    content: 'gridItem+', // Contains only grid items
+    defining: true,
+    isolating: true,
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="grid-container"]', priority: 51 },
+            { tag: 'div.nm-editor-grid', priority: 51 },
+        ];
+    },
+    addAttributes() {
+        return {
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.getPropertyValue('--nm-grid-card-bg'),
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `--nm-grid-card-bg: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.getPropertyValue('--nm-grid-radius')?.replace(/["']/g, ''), // parse from var if possible, or just ignore since it's logical
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `--nm-grid-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            {
+                'data-type': 'grid-container',
+                ...HTMLAttributes,
+                class: 'nm-editor-grid',
+            },
+            0,
+        ];
+    },
+});
+export const GridItem = Node.create({
+    name: 'gridItem',
+    group: 'block',
+    content: 'block+', // Allow blocks (paragraphs) prevents flattening
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return {
+            href: {
+                default: null,
+                parseHTML: element => element.getAttribute('href'),
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="grid-item"]', priority: 60 },
+            { tag: 'div.nm-editor-grid-card', priority: 60 },
+            { tag: 'a[data-type="grid-item"]', priority: 60 },
+            { tag: 'a.nm-editor-grid-card', priority: 60 },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { href, class: _c, className: _cn, ...attributesWithoutHref } = HTMLAttributes;
+        const hasHref = !!href;
+        const Tag = hasHref ? 'a' : 'div';
+        return [
+            Tag,
+            {
+                'data-type': 'grid-item',
+                ...attributesWithoutHref,
+                ...(hasHref ? { href } : {}),
+                class: 'nm-editor-grid-card',
+            },
+            0,
+        ];
+    },
+});

package/dist/components/editor/extensions/Layout.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+export declare const LayoutRow: Node<any, any>;
+export declare const LayoutColumn: Node<any, any>;

package/dist/components/editor/extensions/Layout.js

@@ -0,0 +1,116 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const LayoutRow = Node.create({
+    name: 'layoutRow',
+    group: 'block',
+    content: 'layoutColumn+', // Must contain one or more columns
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return {
+            cols: {
+                default: 2,
+                parseHTML: element => element.getAttribute('data-cols'),
+                renderHTML: attributes => ({
+                    'data-cols': attributes.cols,
+                }),
+            },
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.backgroundColor,
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `background-color: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.borderRadius,
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `border-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="layout-row"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const cols = HTMLAttributes.cols || 2;
+        let gridClass = 'nm-editor-row-2';
+        if (cols == 3) {
+            gridClass = 'nm-editor-row-3';
+        }
+        else if (cols == 1) {
+            gridClass = 'nm-editor-row-1';
+        }
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'layout-row',
+                class: gridClass,
+            }),
+            0,
+        ];
+    },
+});
+export const LayoutColumn = Node.create({
+    name: 'layoutColumn',
+    group: 'block',
+    content: 'block+', // Can contain paragraphs, lists, images, etc.
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return {
+            backgroundColor: {
+                default: null,
+                parseHTML: element => element.style.backgroundColor,
+                renderHTML: attributes => {
+                    if (!attributes.backgroundColor)
+                        return {};
+                    return {
+                        style: `background-color: ${attributes.backgroundColor}`,
+                    };
+                },
+            },
+            borderRadius: {
+                default: null,
+                parseHTML: element => element.style.borderRadius,
+                renderHTML: attributes => {
+                    if (!attributes.borderRadius)
+                        return {};
+                    return {
+                        style: `border-radius: ${attributes.borderRadius}`,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-type="layout-column"]',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-type': 'layout-column',
+                class: 'nm-editor-col',
+            }),
+            0,
+        ];
+    },
+});

package/dist/components/editor/extensions/ResizableImage.d.ts

@@ -0,0 +1 @@
+export declare const ResizableImage: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/editor/extensions/ResizableImage.js

@@ -0,0 +1,52 @@
+import Image from '@tiptap/extension-image';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { ImageComponent } from '../components/ImageComponent';
+import { mergeAttributes } from '@tiptap/core';
+export const ResizableImage = Image.extend({
+    name: 'image',
+    group: 'block',
+    inline: false,
+    draggable: true,
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            width: {
+                default: null,
+                renderHTML: (attributes) => {
+                    if (!attributes.width)
+                        return {};
+                    return { width: attributes.width };
+                }
+            },
+            height: {
+                default: null,
+                renderHTML: (attributes) => {
+                    if (!attributes.height)
+                        return {};
+                    return { height: attributes.height };
+                }
+            },
+            src: {
+                default: '',
+            },
+            alt: {
+                default: '',
+            },
+            objectFit: {
+                default: 'contain', // cover, contain, fill
+                renderHTML: (attributes) => {
+                    if (!attributes.objectFit)
+                        return {};
+                    return { style: `object-fit: ${attributes.objectFit}` };
+                }
+            },
+        };
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ImageComponent);
+    },
+    // Custom renderHTML to ensure attributes are correct in output
+    renderHTML({ HTMLAttributes }) {
+        return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+    },
+});

package/dist/components/editor/extensions/SlashCommand.d.ts

@@ -0,0 +1,15 @@
+import { Extension } from '@tiptap/core';
+import { SchemaDef } from '../../../lib/types';
+export declare const SlashCommand: Extension<any, any>;
+export declare const getSuggestionOptions: (items: SchemaDef[], onSelect?: (item: SchemaDef) => void) => {
+    items: ({ query }: {
+        query: string;
+    }) => SchemaDef[];
+    command: ({ editor, range }: any) => void;
+    render: () => {
+        onStart: (props: any) => void;
+        onUpdate(props: any): void;
+        onKeyDown(props: any): any;
+        onExit(): void;
+    };
+};

package/dist/components/editor/extensions/SlashCommand.js

@@ -0,0 +1,161 @@
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+import { ReactRenderer } from '@tiptap/react';
+import { CommandList } from '../components/CommandList';
+import { List, LayoutTemplate, LayoutPanelLeft } from 'lucide-react'; // Assuming these icons are available
+export const SlashCommand = Extension.create({
+    name: 'slashCommand',
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                command: ({ editor, range }) => {
+                    // Just delete the range (the "/") to clean up
+                    editor.chain().focus().deleteRange(range).run();
+                },
+                items: ({ query }) => {
+                    const allCommands = [
+                        {
+                            title: 'Bullet List',
+                            description: 'Create a simple bullet list.',
+                            icon: List,
+                            command: ({ editor, range }) => {
+                                editor.chain().focus().deleteRange(range).toggleBulletList().run();
+                            },
+                        },
+                        {
+                            title: '2 Columns',
+                            description: 'Insert 2 responsive columns',
+                            icon: LayoutTemplate,
+                            command: ({ editor, range }) => {
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .deleteRange(range)
+                                    .insertContent('<p></p>') // Ensure separation
+                                    .insertContent('<div data-type="layout-row" data-cols="2"><div data-type="layout-column"><p></p></div><div data-type="layout-column"><p></p></div></div>')
+                                    .run();
+                            },
+                        },
+                        {
+                            title: '3 Columns',
+                            description: 'Insert 3 responsive columns',
+                            icon: LayoutPanelLeft,
+                            command: ({ editor, range }) => {
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .deleteRange(range)
+                                    .insertContent('<p></p>') // Ensure separation
+                                    .insertContent('<div data-type="layout-row" data-cols="3"><div data-type="layout-column"><p></p></div><div data-type="layout-column"><p></p></div><div data-type="layout-column"><p></p></div></div>')
+                                    .run();
+                            },
+                        },
+                        // Add other static commands here if any
+                    ];
+                    // Filter commands based on query
+                    return allCommands
+                        .filter((item) => item.title.toLowerCase().startsWith(query.toLowerCase()))
+                        .slice(0, 10);
+                },
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ];
+    },
+});
+export const getSuggestionOptions = (items, onSelect) => ({
+    items: ({ query }) => {
+        return items
+            .filter((item) => item.modelName.toLowerCase().startsWith(query.toLowerCase()))
+            .slice(0, 10);
+    },
+    command: ({ editor, range }) => {
+        // For schema-only suggestions, we just delete the range.
+        // The actual selection logic (onSelect) is handled in the render function's command prop.
+        editor.chain().focus().deleteRange(range).run();
+    },
+    render: () => {
+        let component;
+        let popup = null;
+        let container = null;
+        return {
+            onStart: (props) => {
+                component = new ReactRenderer(CommandList, {
+                    props: {
+                        ...props,
+                        // Fix 1: Explicitly pass the command prop expected by CommandList
+                        command: (item) => {
+                            // If external callback provided, use it
+                            if (onSelect) {
+                                onSelect(item);
+                            }
+                            // CRITICAL: Call the original command to close the popup and delete the "/"
+                            props.command(item);
+                        },
+                        items: props.items,
+                    },
+                    editor: props.editor,
+                });
+                // Create container for popup
+                container = document.createElement('div');
+                container.style.position = 'absolute';
+                container.style.zIndex = '9999';
+                container.style.display = 'none'; // Hidden until positioned
+                document.body.appendChild(container);
+                // Mount component
+                // @ts-ignore
+                container.appendChild(component.element);
+                // Position it
+                const coords = props.clientRect?.();
+                if (coords && container) {
+                    container.style.display = 'block';
+                    container.style.left = `${coords.left}px`;
+                    container.style.top = `${coords.bottom + 10}px`;
+                }
+            },
+            onUpdate(props) {
+                component.updateProps({
+                    ...props,
+                    // Fix 2: Ensure command prop is preserved during updates
+                    command: (item) => {
+                        if (onSelect) {
+                            onSelect(item);
+                        }
+                        props.command(item);
+                    },
+                    items: props.items,
+                });
+                const coords = props.clientRect?.();
+                if (coords && container) {
+                    container.style.left = `${coords.left}px`;
+                    container.style.top = `${coords.bottom + 10}px`;
+                }
+            },
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    if (container) {
+                        container.remove();
+                        container = null;
+                    }
+                    return true;
+                }
+                // @ts-ignore
+                return component.ref?.onKeyDown(props);
+            },
+            onExit() {
+                if (container) {
+                    container.remove();
+                    container = null;
+                }
+                component.destroy();
+            },
+        };
+    },
+});

package/dist/components/editor/utils/upload.d.ts

@@ -0,0 +1 @@
+export declare function uploadFile(file: File): Promise<string>;

package/dist/components/editor/utils/upload.js

@@ -0,0 +1,49 @@
+// Utility to upload files reusing existing API logic
+const DEFAULT_ENDPOINT = ((process.env.NEXT_PUBLIC_NEXTMIN_API_URL || '') + '/files').replace(/\/+$/, '') || '/files';
+const defaultAuthHeaders = () => {
+    if (typeof window === 'undefined')
+        return {};
+    let token;
+    let apiKey;
+    try {
+        const raw = localStorage.getItem('nextmin.user');
+        if (raw) {
+            const u = JSON.parse(raw);
+            token = u?.token ?? u?.data?.token;
+        }
+    }
+    catch { }
+    token = token ?? localStorage.getItem('nextmin.token') ?? undefined;
+    apiKey =
+        localStorage.getItem('nextmin.apiKey') ??
+            process.env.NEXT_PUBLIC_NEXTMIN_API_KEY;
+    const h = {};
+    if (token)
+        h.Authorization = `Bearer ${token}`;
+    if (apiKey)
+        h['x-api-key'] = apiKey;
+    return h;
+};
+export async function uploadFile(file) {
+    const headers = defaultAuthHeaders();
+    const endpoint = DEFAULT_ENDPOINT;
+    // XHR for progress support if needed, but fetch is simpler for now
+    const formData = new FormData();
+    formData.append('file', file);
+    const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            ...headers
+            // Content-Type is set automatically by fetch with FormData
+        },
+        body: formData
+    });
+    if (!response.ok) {
+        throw new Error('Upload failed');
+    }
+    const json = await response.json();
+    if (!json.success || !json.data || !json.data.length) {
+        throw new Error(json.message || 'Upload failed');
+    }
+    return json.data[0].url;
+}