@drawnagency/primitives 0.1.0

package/dist/components/editor/SectionWrapper.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { draggable, dropTargetForElements, } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge, } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { DragHandle } from "./DragHandle";
+import { InsertButton } from "./InsertButton";
+import { DeleteButton } from "./DeleteButton";
+import { SettingsButton } from "./SettingsButton";
+import { StatusBadge } from "./StatusBadge";
+import { StatusPicker } from "./StatusPicker";
+import { AudiencePicker } from "./AudiencePicker";
+import { SettingsForm } from "./SettingsForm";
+import { useEditorContext } from "../shell/EditorContext";
+import { useEditorModal } from "../shell/EditorModalContext";
+import { cn } from "../../lib/cn";
+export function SectionWrapper({ sectionId, sectionType, status, dirty, index, isLast, definition, options, audiences, access, onAccessChange, onStatusChange, onSectionChange, onReorder, onRequestInsert, onDelete, children, }) {
+    const { isEditMode, showAllChrome } = useEditorContext();
+    const { openModal } = useEditorModal();
+    const [isActive, setIsActive] = useState(false);
+    const [chromeReady, setChromeReady] = useState(isEditMode);
+    useEffect(() => {
+        if (isEditMode) {
+            const id = requestAnimationFrame(() => setChromeReady(true));
+            return () => cancelAnimationFrame(id);
+        }
+        setChromeReady(false);
+    }, [isEditMode]);
+    const blockRef = useRef(null);
+    const handleRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [closestEdge, setClosestEdge] = useState(null);
+    const hasSettings = !!((definition.settings || definition.settingsForm) &&
+        onSectionChange);
+    useEffect(() => {
+        const block = blockRef.current;
+        if (!block)
+            return;
+        const onFocusIn = () => setIsActive(true);
+        const onFocusOut = (e) => {
+            if (!block.contains(e.relatedTarget))
+                setIsActive(false);
+        };
+        block.addEventListener("focusin", onFocusIn);
+        block.addEventListener("focusout", onFocusOut);
+        return () => {
+            block.removeEventListener("focusin", onFocusIn);
+            block.removeEventListener("focusout", onFocusOut);
+        };
+    }, []);
+    useEffect(() => {
+        const block = blockRef.current;
+        const handle = handleRef.current;
+        if (!block || !handle || !onReorder)
+            return;
+        // Use the parent .section-wrapper as the drop target so the hit area
+        // includes the padding (where the cursor actually is during drags)
+        const dropElement = block.closest(".section-wrapper") ?? block;
+        const cleanupDraggable = draggable({
+            element: dropElement,
+            dragHandle: handle,
+            getInitialData: () => ({ dragType: "section", sectionId, index }),
+            onGenerateDragPreview: () => {
+                dropElement.style.opacity = "0.4";
+                requestAnimationFrame(() => {
+                    dropElement.style.opacity = "";
+                });
+            },
+            onDragStart: () => {
+                setIsDragging(true);
+                setIsActive(true);
+            },
+            onDrop: () => {
+                setIsDragging(false);
+                setIsActive(false);
+            },
+        });
+        const cleanupDropTarget = dropTargetForElements({
+            element: dropElement,
+            canDrop: ({ source }) => source.data.dragType === "section",
+            getData: ({ input, element }) => attachClosestEdge({ sectionId, index }, { input, element, allowedEdges: ["top", "bottom"] }),
+            onDragEnter: ({ self }) => {
+                setClosestEdge(extractClosestEdge(self.data));
+            },
+            onDrag: ({ self }) => {
+                setClosestEdge(extractClosestEdge(self.data));
+            },
+            onDragLeave: () => {
+                setClosestEdge(null);
+            },
+            onDrop: ({ source, self }) => {
+                setClosestEdge(null);
+                const fromIndex = source.data.index;
+                const edge = extractClosestEdge(self.data);
+                let toIndex = index;
+                if (edge === "bottom")
+                    toIndex = index + 1;
+                if (fromIndex < toIndex)
+                    toIndex--;
+                if (fromIndex !== toIndex) {
+                    onReorder(fromIndex, toIndex);
+                }
+            },
+        });
+        return () => {
+            cleanupDraggable();
+            cleanupDropTarget();
+        };
+    }, [sectionId, index, onReorder]);
+    function handleSettingsClick() {
+        if (!onSectionChange)
+            return;
+        if (definition.settingsForm) {
+            const CustomForm = definition.settingsForm;
+            openModal(`${definition.label} Settings`, _jsx(CustomForm, { ...(options ?? {}), onChange: (values) => onSectionChange({ content: {}, options: values }) }));
+        }
+        else if (definition.settings) {
+            openModal(`${definition.label} Settings`, _jsx(SettingsForm, { schema: definition.settings, values: options ?? {}, onChange: (result) => onSectionChange(result) }));
+        }
+    }
+    if (!isEditMode) {
+        if (status && status !== "published") {
+            return (_jsxs("div", { className: "relative", "data-section-id": sectionId, "data-section-type": sectionType, children: [_jsx("div", { className: "pointer-events-none absolute right-0 bottom-full z-30 mb-1", children: _jsx(StatusBadge, { status: status, dirty: dirty }) }), children] }));
+        }
+        return _jsx(_Fragment, { children: children });
+    }
+    // Chrome visible via: showAllChrome toggle, parent SectionLayout hover (group-hover), or focus within
+    const alwaysShow = showAllChrome || isActive;
+    return (_jsxs("div", { ref: blockRef, className: cn("relative", isDragging && "opacity-50", isActive && "outline outline-2 outline-primary/50 rounded-sm", !isActive &&
+            showAllChrome &&
+            "outline outline-2 outline-primary/20 rounded-sm", !alwaysShow &&
+            "group-hover:outline group-hover:outline-2 group-hover:outline-primary/20 group-hover:rounded-sm"), "data-section-id": sectionId, "data-section-type": sectionType, children: [onRequestInsert && !isDragging && chromeReady && (_jsx("div", { className: cn("absolute -left-16 bottom-full z-30 mb-1 transition-opacity", alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: _jsx(InsertButton, { index: index, onInsert: onRequestInsert }) })), _jsxs("div", { className: cn("absolute left-0 bottom-full z-30 mb-1 flex items-center gap-1.5 transition-opacity", alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: [_jsx(DragHandle, { ref: handleRef }), _jsx("span", { className: "pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80", children: definition.label })] }), _jsxs("div", { className: cn("pointer-events-none absolute right-0 bottom-full z-30 mb-1 flex items-center gap-2 transition-opacity", alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: [_jsx("div", { className: "pointer-events-auto", children: _jsx(AudiencePicker, { access: access, audiences: audiences, onChange: (newAccess) => onAccessChange?.(newAccess) }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(StatusPicker, { status: status, dirty: dirty, onChange: (s) => onStatusChange?.(s) }) }), hasSettings && (_jsx(SettingsButton, { onClick: handleSettingsClick })), onDelete && _jsx(DeleteButton, { onDelete: onDelete })] }), closestEdge === "top" && (_jsx("div", { className: "absolute right-0 left-0 z-10 h-0.5 bg-primary", style: {
+                    top: "calc(var(--section-gap) / 2 * -1)",
+                    transform: "translateY(-50%)",
+                } })), closestEdge === "bottom" && isLast && (_jsx("div", { className: "absolute right-0 bottom-0 left-0 z-10 h-0.5 bg-primary" })), children] }));
+}

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

@@ -0,0 +1,6 @@
+interface SettingsButtonProps {
+    onClick: () => void;
+}
+export declare function SettingsButton({ onClick }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SettingsButton.d.ts.map

package/dist/components/editor/SettingsButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsButton.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SettingsButton.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CAS9D"}

package/dist/components/editor/SettingsButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SettingsIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+export function SettingsButton({ onClick }) {
+    return (_jsx(IconButton, { icon: _jsx(SettingsIcon, { size: 16 }), label: "Section settings", onClick: onClick, className: "pointer-events-auto" }));
+}

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

@@ -0,0 +1,13 @@
+import type { SettingsSchema } from "../../lib/registry";
+export interface SettingsFormResult {
+    content: Record<string, unknown>;
+    options: Record<string, unknown>;
+}
+interface SettingsFormProps {
+    schema: SettingsSchema;
+    values: Record<string, unknown>;
+    onChange: (result: SettingsFormResult) => void;
+}
+export declare function SettingsForm({ schema, values, onChange }: SettingsFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SettingsForm.d.ts.map

package/dist/components/editor/SettingsForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsForm.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SettingsForm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,oBAAoB,CAAC;AAO3E,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD;AAmED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA0E3E"}

package/dist/components/editor/SettingsForm.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Input } from "../shared/Input";
+import { Select } from "../shared/Select";
+import { Checkbox } from "../shared/Checkbox";
+import { FormLabel } from "../shared/FormLabel";
+import { cn } from "../../lib/cn";
+function resolveValues(schema, values) {
+    const resolved = {};
+    for (const [key, field] of Object.entries(schema)) {
+        resolved[key] = values[key] ?? field.default;
+    }
+    return resolved;
+}
+function coerceValue(field, value) {
+    if (field.type === "select" && "coerce" in field && field.coerce === "number") {
+        return Number(value);
+    }
+    return value;
+}
+function splitByTarget(schema, allValues) {
+    const content = {};
+    const options = {};
+    for (const [key, field] of Object.entries(schema)) {
+        const value = coerceValue(field, allValues[key]);
+        const target = field.target ?? "options";
+        if (target === "content") {
+            content[key] = value;
+        }
+        else {
+            options[key] = value;
+        }
+    }
+    return { content, options };
+}
+function RangeField({ field, value, onChange, }) {
+    const id = useId();
+    return (_jsxs("div", { children: [_jsx(FormLabel, { htmlFor: id, children: field.label }), _jsx("input", { id: id, type: "range", min: field.min, max: field.max, step: field.step, value: value, onChange: (e) => onChange(Number(e.target.value)), className: cn("w-full accent-primary") })] }));
+}
+export function SettingsForm({ schema, values, onChange }) {
+    const [local, setLocal] = useState(() => resolveValues(schema, values));
+    function handleFieldChange(key, newValue) {
+        const next = { ...local, [key]: newValue };
+        setLocal(next);
+        onChange(splitByTarget(schema, next));
+    }
+    return (_jsx("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => {
+            const value = local[key];
+            switch (field.type) {
+                case "text":
+                    return (_jsx(Input, { label: field.label, value: String(value ?? ""), placeholder: field.placeholder, onChange: (v) => handleFieldChange(key, v) }, key));
+                case "number":
+                    return (_jsx(Input, { label: field.label, type: "number", value: String(value ?? ""), onChange: (v) => handleFieldChange(key, v === "" ? "" : Number(v)) }, key));
+                case "checkbox":
+                    return (_jsx(Checkbox, { label: field.label, checked: Boolean(value), onChange: (checked) => handleFieldChange(key, checked) }, key));
+                case "select":
+                    return (_jsx(Select, { label: field.label, value: String(value ?? ""), options: field.options, onChange: (v) => handleFieldChange(key, v) }, key));
+                case "range":
+                    return (_jsx(RangeField, { field: field, value: Number(value ?? field.min), onChange: (v) => handleFieldChange(key, v) }, key));
+                default:
+                    return null;
+            }
+        }) }));
+}

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

@@ -0,0 +1,7 @@
+interface StatusBadgeProps {
+    status: string;
+    dirty?: boolean;
+}
+export declare function StatusBadge({ status, dirty }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/editor/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/editor/StatusBadge.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAQD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAc9D"}

package/dist/components/editor/StatusBadge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn";
+const statusClasses = {
+    published: "bg-status-published-bg text-status-published-text",
+    draft: "bg-status-draft-bg text-status-draft-text",
+    archived: "bg-status-archived-bg text-status-archived-text",
+};
+export function StatusBadge({ status, dirty }) {
+    return (_jsxs("span", { className: cn("rounded-full px-2 py-0.5 text-xs font-medium", statusClasses[status] ?? statusClasses.archived), children: [status, dirty && (_jsx("span", { className: "ml-1 opacity-70", children: "\u00B7 Unsaved" }))] }));
+}

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

@@ -0,0 +1,9 @@
+type Status = "draft" | "published" | "archived";
+interface Props {
+    status: Status;
+    dirty?: boolean;
+    onChange: (status: Status) => void;
+}
+export declare function StatusPicker({ status, dirty, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StatusPicker.d.ts.map

package/dist/components/editor/StatusPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPicker.d.ts","sourceRoot":"","sources":["../../../src/components/editor/StatusPicker.tsx"],"names":[],"mappings":"AAMA,KAAK,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjD,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgBD,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyD9D"}

package/dist/components/editor/StatusPicker.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+const STATUSES = ["draft", "published", "archived"];
+const statusClasses = {
+    published: "bg-status-published-bg text-status-published-text",
+    draft: "bg-status-draft-bg text-status-draft-text",
+    archived: "bg-status-archived-bg text-status-archived-text",
+};
+const dotClasses = {
+    published: "bg-status-published-bg",
+    draft: "bg-status-draft-bg",
+    archived: "bg-status-archived-bg",
+};
+export function StatusPicker({ status, dirty, onChange }) {
+    const [open, setOpen] = useState(false);
+    const buttonRef = useRef(null);
+    function handleSelect(next) {
+        if (next !== status)
+            onChange(next);
+        setOpen(false);
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: buttonRef, type: "button", onClick: () => setOpen((v) => !v), "aria-haspopup": "true", "aria-expanded": open, className: cn("cursor-pointer rounded-full px-2 py-0.5 text-xs font-medium", statusClasses[status] ?? statusClasses.archived), children: [status, dirty && _jsx("span", { className: "ml-1 opacity-70", children: "\u00B7 Unsaved" })] }), _jsx(Popover, { isOpen: open, onClose: () => setOpen(false), anchorRef: buttonRef, align: "end", className: "w-44", children: _jsx("ul", { role: "radiogroup", "aria-label": "Section status", className: "py-1", children: STATUSES.map((s) => {
+                        const checked = s === status;
+                        return (_jsx("li", { children: _jsxs(PopoverItem, { role: "radio", "aria-checked": checked, onClick: () => handleSelect(s), children: [_jsx("span", { "aria-hidden": "true", className: cn("h-3 w-3 shrink-0 rounded-full border border-base-200", dotClasses[s]) }), _jsx("span", { className: "flex-1 text-sm font-medium capitalize text-base-contrast", children: s }), checked && _jsx(Check, { size: 14, strokeWidth: 3, className: "text-primary" })] }) }, s));
+                    }) }) })] }));
+}

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

@@ -0,0 +1,8 @@
+export { DragHandle } from "./DragHandle";
+export { InsertButton } from "./InsertButton";
+export { DeleteButton } from "./DeleteButton";
+export { SettingsButton } from "./SettingsButton";
+export { SettingsForm } from "./SettingsForm";
+export { StatusBadge } from "./StatusBadge";
+export { SectionWrapper } from "./SectionWrapper";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/editor/index.js

@@ -0,0 +1,7 @@
+export { DragHandle } from "./DragHandle";
+export { InsertButton } from "./InsertButton";
+export { DeleteButton } from "./DeleteButton";
+export { SettingsButton } from "./SettingsButton";
+export { SettingsForm } from "./SettingsForm";
+export { StatusBadge } from "./StatusBadge";
+export { SectionWrapper } from "./SectionWrapper";

package/dist/components/primitives/CustomParagraph.d.ts

@@ -0,0 +1,2 @@
+export declare const CustomParagraph: import("@tiptap/core").Node<import("@tiptap/extension-paragraph").ParagraphOptions, any>;
+//# sourceMappingURL=CustomParagraph.d.ts.map

package/dist/components/primitives/CustomParagraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomParagraph.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/CustomParagraph.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,0FAoB1B,CAAC"}

package/dist/components/primitives/CustomParagraph.js

@@ -0,0 +1,24 @@
+import Paragraph from "@tiptap/extension-paragraph";
+const ALLOWED_CLASSES = ["large", "lead-in"];
+export const CustomParagraph = Paragraph.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null,
+                parseHTML: (element) => {
+                    const cls = element.getAttribute("class");
+                    if (cls && ALLOWED_CLASSES.includes(cls)) {
+                        return cls;
+                    }
+                    return null;
+                },
+                renderHTML: (attributes) => {
+                    if (!attributes.class)
+                        return {};
+                    return { class: attributes.class };
+                },
+            },
+        };
+    },
+});

package/dist/components/primitives/EditableGrid.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+interface EditableGridProps<T> {
+    items: T[];
+    columns: number;
+    onChange: (items: T[]) => void;
+    createItem: () => T;
+    isEditMode: boolean;
+    renderItem: (item: T, props: {
+        isEditMode: boolean;
+        index: number;
+    }) => ReactNode;
+    onItemSettings?: (index: number) => void;
+    onItemImageClick?: (index: number) => void;
+    chromeTopClass?: string;
+    className?: string;
+}
+export declare function EditableGrid<T>({ items, columns, onChange, createItem, isEditMode, renderItem, onItemSettings, onItemImageClick, chromeTopClass, className, }: EditableGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditableGrid.d.ts.map

package/dist/components/primitives/EditableGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableGrid.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/EditableGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWpE,UAAU,iBAAiB,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE;QAAE,UAAU,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IAClF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAsEtB"}

package/dist/components/primitives/EditableGrid.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { ImageIcon } from "lucide-react";
+import { AddIcon, DragHandle, DeleteIcon, SettingsIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { cn } from "../../lib/cn";
+import { gridColsClass } from "../../lib/grid";
+import { useEditableCollection } from "./useEditableCollection";
+export function EditableGrid({ items, columns, onChange, createItem, isEditMode, renderItem, onItemSettings, onItemImageClick, chromeTopClass, className, }) {
+    const { wrappedItems, onReorder, onAdd, onInsert, onRemove } = useEditableCollection({
+        items,
+        onChange,
+        createItem,
+    });
+    const [dragState, setDragState] = useState({ sourceId: null, closestEdge: null });
+    const [isDragging, setIsDragging] = useState(false);
+    useEffect(() => {
+        return monitorForElements({
+            onDragStart: ({ source }) => {
+                if (source.data.dragType === "grid-cell")
+                    setIsDragging(true);
+            },
+            onDrop: ({ source }) => {
+                if (source.data.dragType === "grid-cell")
+                    setIsDragging(false);
+            },
+        });
+    }, []);
+    if (!isEditMode) {
+        return (_jsx("div", { className: cn("grid gap-4", gridColsClass[columns] || "grid-cols-1", className), children: wrappedItems.map((wrapped, index) => (_jsx("div", { children: renderItem(wrapped.data, { isEditMode: false, index }) }, wrapped.id))) }));
+    }
+    return (_jsxs("div", { className: cn("group/grid relative grid gap-4", gridColsClass[columns] || "grid-cols-1", className), children: [wrappedItems.map((wrapped, index) => (_jsx(GridCell, { id: wrapped.id, index: index, isLast: index === wrappedItems.length - 1, isDragging: isDragging, onReorder: onReorder, onRemove: onRemove, onInsert: onInsert, onSettings: onItemSettings ? () => onItemSettings(index) : undefined, onImageClick: onItemImageClick ? () => onItemImageClick(index) : undefined, chromeTopClass: chromeTopClass, dragState: dragState, setDragState: setDragState, children: renderItem(wrapped.data, { isEditMode: true, index }) }, wrapped.id))), _jsx(IconButton, { icon: _jsx(AddIcon, { size: 16 }), label: "Add item", size: "lg", intent: "primary", onClick: onAdd, className: "absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/grid:opacity-100" })] }));
+}
+function GridCell({ id, index, isLast, isDragging, onReorder, onRemove, onInsert, onSettings, onImageClick, chromeTopClass, dragState, setDragState, children, }) {
+    const cellRef = useRef(null);
+    const handleRef = useRef(null);
+    useEffect(() => {
+        const cell = cellRef.current;
+        const handle = handleRef.current;
+        if (!cell || !handle)
+            return;
+        const cleanupDraggable = draggable({
+            element: handle,
+            getInitialData: () => ({ dragType: "grid-cell", id, index }),
+            onDragStart: () => setDragState({ sourceId: id, closestEdge: null }),
+            onDrop: () => setDragState({ sourceId: null, closestEdge: null }),
+        });
+        const cleanupDropTarget = dropTargetForElements({
+            element: cell,
+            canDrop: ({ source }) => source.data.dragType === "grid-cell",
+            getData: ({ input, element }) => attachClosestEdge({ id, index }, { input, element, allowedEdges: ["left", "right"] }),
+            onDragEnter: ({ self }) => {
+                const edge = extractClosestEdge(self.data);
+                if (edge)
+                    setDragState((prev) => ({ ...prev, closestEdge: { id, edge: edge } }));
+            },
+            onDrag: ({ self }) => {
+                const edge = extractClosestEdge(self.data);
+                if (edge)
+                    setDragState((prev) => ({ ...prev, closestEdge: { id, edge: edge } }));
+            },
+            onDragLeave: () => {
+                setDragState((prev) => prev.closestEdge?.id === id ? { ...prev, closestEdge: null } : prev);
+            },
+            onDrop: ({ source, self }) => {
+                const fromIndex = source.data.index;
+                const edge = extractClosestEdge(self.data);
+                let toIndex = index;
+                if (edge === "right")
+                    toIndex = index + 1;
+                if (fromIndex < toIndex)
+                    toIndex--;
+                if (fromIndex !== toIndex) {
+                    onReorder(fromIndex, toIndex);
+                }
+            },
+        });
+        return () => {
+            cleanupDraggable();
+            cleanupDropTarget();
+        };
+    }, [id, index, onReorder, setDragState]);
+    const isCellDragging = dragState.sourceId === id;
+    const showLeftEdge = dragState.closestEdge?.id === id && dragState.closestEdge.edge === "left" && dragState.sourceId !== id;
+    const showRightEdge = dragState.closestEdge?.id === id && dragState.closestEdge.edge === "right" && dragState.sourceId !== id;
+    return (_jsxs("div", { ref: cellRef, className: cn("group/cell relative", isCellDragging && "opacity-50"), children: [showLeftEdge && (_jsx("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-0.5 -translate-x-2 bg-primary" })), showRightEdge && (_jsx("div", { className: "absolute top-0 right-0 bottom-0 z-10 w-0.5 translate-x-2 bg-primary" })), !isDragging && !isLast && (_jsx(IconButton, { icon: _jsx(AddIcon, { size: 12 }), label: "Insert item", size: "sm", intent: "primary", onClick: () => onInsert(index + 1), className: "absolute top-1/2 -right-2 z-20 -translate-y-1/2 translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 group-hover/cell:opacity-100" })), _jsx(IconButton, { ref: handleRef, icon: _jsx(DragHandle, { size: 16 }), label: "Drag to reorder", className: cn("absolute left-1.5 z-10 cursor-grab bg-base/80 opacity-0 shadow-sm group-hover/cell:opacity-100 no-hover:opacity-100", chromeTopClass || "top-1.5"), tabIndex: -1 }), _jsxs("div", { className: cn("absolute right-1.5 z-10 flex items-center gap-1 opacity-0 group-hover/cell:opacity-100 no-hover:opacity-100", chromeTopClass || "top-1.5"), children: [onImageClick && (_jsx(IconButton, { icon: _jsx(ImageIcon, { size: 16 }), label: "Change image", onClick: onImageClick, className: "bg-base/80 shadow-sm" })), onSettings && (_jsx(IconButton, { icon: _jsx(SettingsIcon, { size: 16 }), label: "Item settings", onClick: onSettings, className: "bg-base/80 shadow-sm" })), _jsx(IconButton, { icon: _jsx(DeleteIcon, { size: 16 }), label: "Delete item", intent: "destructive", onClick: () => onRemove(id), className: "bg-base/80 shadow-sm" })] }), children] }));
+}

package/dist/components/primitives/EditableList.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+interface EditableListProps<T> {
+    items: T[];
+    onChange: (items: T[]) => void;
+    createItem: () => T;
+    isEditMode: boolean;
+    renderItem: (item: T, props: {
+        isEditMode: boolean;
+        index: number;
+    }) => ReactNode;
+    className?: string;
+}
+export declare function EditableList<T>({ items, onChange, createItem, isEditMode, renderItem, className, }: EditableListProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditableList.d.ts.map

package/dist/components/primitives/EditableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableList.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/EditableList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpE,UAAU,iBAAiB,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE;QAAE,UAAU,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA+CtB"}

package/dist/components/primitives/EditableList.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { DragHandle, DeleteIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { cn } from "../../lib/cn";
+import { useEditableCollection } from "./useEditableCollection";
+export function EditableList({ items, onChange, createItem, isEditMode, renderItem, className, }) {
+    const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+        items,
+        onChange,
+        createItem,
+    });
+    const [dragState, setDragState] = useState({ sourceId: null, targetId: null });
+    if (!isEditMode) {
+        return (_jsx("div", { className: cn("flex flex-col gap-2", className), children: wrappedItems.map((wrapped, index) => (_jsx("div", { children: renderItem(wrapped.data, { isEditMode: false, index }) }, wrapped.id))) }));
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [wrappedItems.map((wrapped, index) => (_jsx(ListRow, { id: wrapped.id, index: index, onReorder: onReorder, onRemove: onRemove, dragState: dragState, setDragState: setDragState, children: renderItem(wrapped.data, { isEditMode: true, index }) }, wrapped.id))), _jsx("button", { onClick: onAdd, className: "cursor-pointer rounded border-2 border-dashed border-base-200 px-3 py-2 text-sm text-base-contrast-light hover:border-primary hover:text-primary", children: "Add row" })] }));
+}
+function ListRow({ id, index, onReorder, onRemove, dragState, setDragState, children, }) {
+    const rowRef = useRef(null);
+    const handleRef = useRef(null);
+    useEffect(() => {
+        const row = rowRef.current;
+        const handle = handleRef.current;
+        if (!row || !handle)
+            return;
+        const cleanupDraggable = draggable({
+            element: handle,
+            getInitialData: () => ({ dragType: "list-row", id, index }),
+            onDragStart: () => setDragState({ sourceId: id, targetId: null }),
+            onDrop: () => setDragState({ sourceId: null, targetId: null }),
+        });
+        const cleanupDropTarget = dropTargetForElements({
+            element: row,
+            canDrop: ({ source }) => source.data.dragType === "list-row",
+            getData: () => ({ id, index }),
+            onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
+            onDragLeave: () => setDragState((prev) => prev.targetId === id ? { ...prev, targetId: null } : prev),
+            onDrop: ({ source }) => {
+                const fromIndex = source.data.index;
+                if (fromIndex !== index) {
+                    onReorder(fromIndex, index);
+                }
+            },
+        });
+        return () => {
+            cleanupDraggable();
+            cleanupDropTarget();
+        };
+    }, [id, index, onReorder, setDragState]);
+    const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
+    return (_jsxs("div", { ref: rowRef, className: cn("group/row relative flex items-center gap-2", isDropTarget && "border-t-2 border-primary"), children: [_jsx(IconButton, { ref: handleRef, icon: _jsx(DragHandle, { size: 14 }), label: "Drag to reorder", size: "sm", className: "shrink-0 cursor-grab opacity-0 group-hover/row:opacity-100 no-hover:opacity-100", tabIndex: -1 }), _jsx("div", { className: "min-w-0 flex-1", children: children }), _jsx(IconButton, { icon: _jsx(DeleteIcon, { size: 14 }), label: "Delete item", size: "sm", intent: "destructive", onClick: () => onRemove(id), className: "shrink-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100" })] }));
+}

package/dist/components/primitives/EditablePlainText.d.ts

@@ -0,0 +1,12 @@
+import { type ElementType, type HTMLAttributes } from "react";
+interface EditablePlainTextProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    tag: ElementType;
+    value: string;
+    onChange: (value: string) => void;
+    isEditMode: boolean;
+    multiline?: boolean;
+    placeholder?: string;
+}
+export declare function EditablePlainText({ tag, value, onChange, isEditMode, multiline, placeholder, className, ...htmlAttrs }: EditablePlainTextProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=EditablePlainText.d.ts.map

package/dist/components/primitives/EditablePlainText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditablePlainText.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/EditablePlainText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAGf,UAAU,sBACR,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACrD,GAAG,EAAE,WAAW,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACb,EAAE,sBAAsB,0FAqExB"}

package/dist/components/primitives/EditablePlainText.js

@@ -0,0 +1,52 @@
+import { useRef, useEffect, useCallback, createElement, } from "react";
+import { useEditablePlainText } from "./useEditablePlainText";
+export function EditablePlainText({ tag, value, onChange, isEditMode, multiline = false, placeholder, className, ...htmlAttrs }) {
+    const ref = useRef(null);
+    const { value: localValue, handleInput, handleBlur, shouldPreventEnter, } = useEditablePlainText({ value, onChange, multiline });
+    // Set textContent via ref (safe — plain text only, no HTML injection)
+    useEffect(() => {
+        if (ref.current && ref.current.textContent !== localValue) {
+            ref.current.textContent = localValue;
+        }
+    }, [localValue]);
+    const onInput = useCallback(() => {
+        if (ref.current) {
+            handleInput(ref.current.textContent || "");
+        }
+    }, [handleInput]);
+    const onKeyDown = useCallback((e) => {
+        if (e.key === "Enter" && shouldPreventEnter) {
+            e.preventDefault();
+        }
+    }, [shouldPreventEnter]);
+    const onPaste = useCallback((e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData("text/plain");
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+            range.insertNode(document.createTextNode(text));
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        if (ref.current) {
+            handleInput(ref.current.textContent || "");
+        }
+    }, [handleInput]);
+    return createElement(tag, {
+        ref,
+        className: isEditMode && placeholder
+            ? `editable-placeholder ${className ?? ""}`
+            : className,
+        contentEditable: isEditMode ? "true" : undefined,
+        suppressContentEditableWarning: isEditMode || undefined,
+        onInput: isEditMode ? onInput : undefined,
+        onBlur: isEditMode ? handleBlur : undefined,
+        onKeyDown: isEditMode ? onKeyDown : undefined,
+        onPaste: isEditMode ? onPaste : undefined,
+        "data-placeholder": isEditMode && placeholder ? placeholder : undefined,
+        ...htmlAttrs,
+    }, value);
+}