@drawnagency/primitives 0.1.0 → 0.2.0

package/dist/components/editor/InsertButton.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AddIcon } from "../shared/icons";
-import { IconButton } from "../shared/IconButton";
-import { Tooltip, Kbd } from "../shared/Tooltip";
-export function InsertButton({ index, onInsert }) {
-    return (_jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx(Kbd, { children: "Click" }), " to add below", _jsx("br", {}), _jsx(Kbd, { children: "Alt+Click" }), " to add above"] }), children: _jsx(IconButton, { icon: _jsx(AddIcon, { size: 18 }), label: "Add section", className: "pointer-events-auto rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast", tabIndex: -1, onClick: (e) => onInsert(e.altKey ? index : index + 1) }) }));
-}

package/dist/components/editor/SectionWrapper.js

@@ -1,135 +0,0 @@
-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.js

@@ -1,6 +0,0 @@
-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.js

@@ -1,64 +0,0 @@
-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.js

@@ -1,10 +0,0 @@
-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.js

@@ -1,30 +0,0 @@
-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.js

@@ -1,7 +0,0 @@
-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.js

@@ -1,24 +0,0 @@
-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.js

@@ -1,90 +0,0 @@
-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.js

@@ -1,54 +0,0 @@
-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.js

@@ -1,52 +0,0 @@
-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);
-}

package/dist/components/primitives/EditableRichText.js

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useCallback, useEffect } from "react";
-import { EditorContent } from "@tiptap/react";
-import { BubbleMenu } from "@tiptap/react/menus";
-import { sanitizeHtml } from "../../lib/sanitize";
-import { useEditableRichText } from "./useEditableRichText";
-import { RichTextToolbar } from "./RichTextToolbar";
-export function EditableRichText({ value, onChange, isEditMode, preset = "rich", className, }) {
-    const { isEditorActive, editor, activate, deactivate } = useEditableRichText({ value, onChange, preset });
-    const wrapperRef = useRef(null);
-    const blurTimeoutRef = useRef(null);
-    const clickCoordsRef = useRef(null);
-    // Clear blur timeout on unmount to prevent stale callback execution
-    useEffect(() => {
-        return () => {
-            if (blurTimeoutRef.current) {
-                clearTimeout(blurTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Focus the editor and place cursor at click position after activation
-    useEffect(() => {
-        if (!isEditorActive || !editor)
-            return;
-        requestAnimationFrame(() => {
-            if (editor.isDestroyed)
-                return;
-            const coords = clickCoordsRef.current;
-            if (coords) {
-                try {
-                    const pos = editor.view.posAtCoords(coords);
-                    if (pos) {
-                        editor.commands.focus();
-                        editor.commands.setTextSelection(pos.pos);
-                    }
-                    else {
-                        editor.commands.focus('end');
-                    }
-                }
-                catch {
-                    editor.commands.focus('end');
-                }
-                finally {
-                    clickCoordsRef.current = null;
-                }
-            }
-            else {
-                editor.commands.focus('end');
-            }
-        });
-    }, [isEditorActive, editor]);
-    const handleClick = useCallback((e) => {
-        if (isEditMode && !isEditorActive) {
-            clickCoordsRef.current = { left: e.clientX, top: e.clientY };
-            activate();
-        }
-    }, [isEditMode, isEditorActive, activate]);
-    const handleFocus = useCallback(() => {
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-            blurTimeoutRef.current = null;
-        }
-    }, []);
-    const handleBlur = useCallback(() => {
-        blurTimeoutRef.current = setTimeout(() => {
-            if (wrapperRef.current &&
-                !wrapperRef.current.contains(document.activeElement)) {
-                deactivate();
-            }
-        }, 150);
-    }, [deactivate]);
-    if (!isEditMode) {
-        // eslint-disable-next-line react/no-danger
-        return (_jsx("div", { className: className, dangerouslySetInnerHTML: { __html: sanitizeHtml(value) } }));
-    }
-    // Edit mode, not yet active: static HTML with click-to-activate
-    if (!isEditorActive || !editor) {
-        // eslint-disable-next-line react/no-danger
-        return (_jsx("div", { className: className, onClick: handleClick, dangerouslySetInnerHTML: { __html: sanitizeHtml(value) } }));
-    }
-    // Edit mode, active: TipTap editor with bubble menu on text selection
-    return (_jsxs("div", { ref: wrapperRef, className: className, onFocus: handleFocus, onBlur: handleBlur, children: [_jsx(BubbleMenu, { editor: editor, shouldShow: ({ editor: ed, state }) => {
-                    const { from, to } = state.selection;
-                    return ed.isFocused && from !== to;
-                }, children: _jsx(RichTextToolbar, { editor: editor, preset: preset }) }), _jsx(EditorContent, { editor: editor })] }));
-}

package/dist/components/primitives/HeadingSection.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { toSectionId } from "../../lib/nav";
-import { EditablePlainText } from "./EditablePlainText";
-import { cn } from "../../lib/cn";
-export function HeadingSection({ heading, tag, placeholder, className, onChange }) {
-    return (_jsx(EditablePlainText, { tag: tag, value: heading, onChange: onChange ?? (() => { }), isEditMode: !!onChange, placeholder: placeholder, id: toSectionId(heading), className: cn("scroll-mt-20", className) }));
-}

package/dist/components/primitives/IconPicker.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { cn } from "../../lib/cn";
-import { curatedIcons } from "../../lib/icons";
-export function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
-    const panelRef = useRef(null);
-    useEffect(() => {
-        function handleMouseDown(e) {
-            if (panelRef.current && !panelRef.current.contains(e.target)) {
-                onClose();
-            }
-        }
-        document.addEventListener("mousedown", handleMouseDown);
-        return () => document.removeEventListener("mousedown", handleMouseDown);
-    }, [onClose]);
-    return (_jsxs("div", { ref: panelRef, className: "absolute z-50 w-56 rounded-lg border border-base-200 bg-base p-2 shadow-lg", children: [_jsx("div", { className: "grid grid-cols-5 gap-1", children: curatedIcons.map((entry) => {
-                    const Icon = entry.icon;
-                    const isSelected = selected === entry.id;
-                    return (_jsx("button", { "aria-label": entry.label, className: cn("cursor-pointer flex h-9 w-9 items-center justify-center rounded transition-colors", "text-base-contrast-light hover:bg-base-accent hover:text-base-contrast", isSelected && "ring-2 ring-primary bg-base-accent text-primary"), onClick: () => onSelect(entry.id), children: _jsx(Icon, { size: 18 }) }, entry.id));
-                }) }), showRemove && (_jsx("button", { className: "cursor-pointer mt-2 w-full rounded px-2 py-1.5 text-center text-xs text-base-contrast-light hover:bg-base-accent hover:text-base-contrast", onClick: () => onSelect(null), children: "Remove icon" }))] }));
-}