@drawnagency/primitives 0.1.0

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

@@ -0,0 +1,11 @@
+import type { PresetName } from "./tiptap-presets";
+interface EditableRichTextProps {
+    value: string;
+    onChange: (html: string) => void;
+    isEditMode: boolean;
+    preset?: PresetName;
+    className?: string;
+}
+export declare function EditableRichText({ value, onChange, isEditMode, preset, className, }: EditableRichTextProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditableRichText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableRichText.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/EditableRichText.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAe,EACf,SAAS,GACV,EAAE,qBAAqB,2CA6GvB"}

package/dist/components/primitives/EditableRichText.js

@@ -0,0 +1,86 @@
+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.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    heading: string;
+    tag: "h2" | "h3" | "h4";
+    placeholder: string;
+    className?: string;
+    onChange?: (heading: string) => void;
+}
+export declare function HeadingSection({ heading, tag, placeholder, className, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HeadingSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingSection.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/HeadingSection.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAYvF"}

package/dist/components/primitives/HeadingSection.js

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

@@ -0,0 +1,9 @@
+interface IconPickerProps {
+    selected: string | null;
+    onSelect: (iconId: string | null) => void;
+    onClose: () => void;
+    showRemove?: boolean;
+}
+export declare function IconPicker({ selected, onSelect, onClose, showRemove }: IconPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/IconPicker.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAiB,EAAE,EAAE,eAAe,2CAgD7F"}

package/dist/components/primitives/IconPicker.js

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

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

@@ -0,0 +1,8 @@
+import type { Editor } from "@tiptap/core";
+interface LinkPopoverProps {
+    editor: Editor;
+    onClose: () => void;
+}
+export declare function LinkPopover({ editor, onClose }: LinkPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LinkPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPopover.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/LinkPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAmGhE"}

package/dist/components/primitives/LinkPopover.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../shared/Button";
+export function LinkPopover({ editor, onClose }) {
+    const existingAttrs = editor.getAttributes("link");
+    const [url, setUrl] = useState(existingAttrs.href ?? "");
+    const [openInNewTab, setOpenInNewTab] = useState(existingAttrs.target === "_blank");
+    const inputRef = useRef(null);
+    const hasLink = Boolean(existingAttrs.href);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    const handleApply = () => {
+        if (url.trim()) {
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange("link")
+                .setLink({ href: url.trim(), target: openInNewTab ? "_blank" : null })
+                .run();
+        }
+        onClose();
+    };
+    const handleRemove = () => {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        onClose();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            handleApply();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 rounded bg-base-accent p-3 shadow-lg", onMouseDown: (e) => e.stopPropagation(), children: [_jsx("input", { ref: inputRef, type: "url", value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: handleKeyDown, placeholder: "https://example.com", className: "rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast/40 focus:outline-none focus:ring-1 focus:ring-primary" }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-base-contrast", children: [_jsx("input", { type: "checkbox", checked: openInNewTab, onChange: (e) => setOpenInNewTab(e.target.checked), className: "accent-primary" }), "Open in new tab"] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "brand", size: "sm", onMouseDown: (e) => {
+                            e.preventDefault();
+                            handleApply();
+                        }, children: "Apply" }), hasLink && (_jsx(Button, { variant: "secondary", size: "sm", onMouseDown: (e) => {
+                            e.preventDefault();
+                            handleRemove();
+                        }, children: "Remove" })), _jsx(Button, { variant: "secondary", size: "sm", onMouseDown: (e) => {
+                            e.preventDefault();
+                            onClose();
+                        }, children: "Cancel" })] })] }));
+}

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

@@ -0,0 +1,19 @@
+export declare function ImageSettingsForm({ border, objectFit, onChange, }: {
+    border?: boolean;
+    objectFit?: "cover" | "contain";
+    onChange: (update: {
+        border?: boolean;
+        objectFit?: "cover" | "contain";
+    }) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DoDontImageSettingsForm({ border, objectFit, doDont: initialDoDont, onChange, }: {
+    border?: boolean;
+    objectFit?: "cover" | "contain";
+    doDont: "do" | "dont";
+    onChange: (update: {
+        border?: boolean;
+        objectFit?: "cover" | "contain";
+        doDont: "do" | "dont";
+    }) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaSettingsForms.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSettingsForms.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/MediaSettingsForms.tsx"],"names":[],"mappings":"AAMA,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAAE,KAAK,IAAI,CAAC;CACnF,2CA+BA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,SAAS,EACT,MAAM,EAAE,aAAa,EACrB,QAAQ,GACT,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAAC,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1G,2CAmDA"}

package/dist/components/primitives/MediaSettingsForms.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { cn } from "../../lib/cn";
+import { Check, X } from "lucide-react";
+import { Checkbox } from "../shared/Checkbox";
+import { Select } from "../shared/Select";
+export function ImageSettingsForm({ border, objectFit, onChange, }) {
+    const [itemBorder, setItemBorder] = useState(border);
+    const [fit, setFit] = useState(objectFit);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Select, { label: "Object fit", value: fit ?? "", onChange: (v) => {
+                    const val = (v || undefined);
+                    setFit(val);
+                    onChange({ border: itemBorder, objectFit: val });
+                }, options: [
+                    { value: "", label: "Default (inherit from grid)" },
+                    { value: "contain", label: "Contain" },
+                    { value: "cover", label: "Crop to fill" },
+                ] }), _jsx(Checkbox, { checked: itemBorder ?? false, onChange: (v) => {
+                    const val = v || undefined;
+                    setItemBorder(val);
+                    onChange({ border: val, objectFit: fit });
+                }, label: "Override border settings" })] }));
+}
+export function DoDontImageSettingsForm({ border, objectFit, doDont: initialDoDont, onChange, }) {
+    const [doDont, setDoDont] = useState(initialDoDont);
+    const latestRef = useRef({ border, objectFit });
+    const handleBaseChange = (updated) => {
+        latestRef.current = updated;
+        onChange({ ...updated, doDont });
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(ImageSettingsForm, { border: border, objectFit: objectFit, onChange: handleBaseChange }), _jsx("hr", { className: "border-base-200" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("button", { className: cn("cursor-pointer flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm transition-colors", doDont === "do"
+                            ? "border-green-600 bg-base-accent text-base-contrast"
+                            : "border-base-200 text-base-contrast-light hover:bg-base-accent"), onClick: () => {
+                            setDoDont("do");
+                            onChange({ ...latestRef.current, doDont: "do" });
+                        }, children: [_jsx(Check, { size: 16, className: "text-green-600" }), "Do"] }), _jsxs("button", { className: cn("cursor-pointer flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm transition-colors", doDont === "dont"
+                            ? "border-red-600 bg-base-accent text-base-contrast"
+                            : "border-base-200 text-base-contrast-light hover:bg-base-accent"), onClick: () => {
+                            setDoDont("dont");
+                            onChange({ ...latestRef.current, doDont: "dont" });
+                        }, children: [_jsx(X, { size: 16, className: "text-red-600" }), "Don't"] })] })] }));
+}

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

@@ -0,0 +1,8 @@
+interface ResolvedMediaProps {
+    imageId: string | undefined;
+    className?: string;
+    imgClassName?: string;
+}
+export declare function ResolvedMedia({ imageId, className, imgClassName, }: ResolvedMediaProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ResolvedMedia.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResolvedMedia.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/ResolvedMedia.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,YAAY,GACb,EAAE,kBAAkB,2CAqBpB"}

package/dist/components/primitives/ResolvedMedia.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn";
+import { ImageIcon } from "lucide-react";
+import { useResolvedMedia } from "../../hooks/useResolvedMedia";
+export function ResolvedMedia({ imageId, className, imgClassName, }) {
+    const { src, srcset, poster, alt, kind } = useResolvedMedia(imageId);
+    const mediaClass = cn("h-full w-full", imgClassName);
+    return (_jsx("div", { className: className, children: src ? (kind === "video" ? (_jsx("video", { src: src, poster: poster, muted: true, playsInline: true, loop: true, autoPlay: true, className: mediaClass })) : (_jsx("img", { src: src, srcSet: srcset, alt: alt, className: mediaClass }))) : (_jsxs("div", { className: "flex aspect-video h-full w-full flex-col items-center justify-center gap-1 rounded bg-base-accent text-base-contrast-light/50", children: [_jsx(ImageIcon, { size: 24 }), _jsx("span", { className: "text-sm", children: "No Image" })] })) }));
+}

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

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+import type { PresetName } from "./tiptap-presets";
+interface RichTextToolbarProps {
+    editor: Editor;
+    preset: PresetName;
+}
+export declare function RichTextToolbar({ editor, preset }: RichTextToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RichTextToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/RichTextToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,UAAU,CAAC;CACpB;AAoCD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,oBAAoB,2CAuGvE"}

package/dist/components/primitives/RichTextToolbar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/cn";
+import { LinkPopover } from "./LinkPopover";
+function ToolbarButton({ isActive, onClick, title, children }) {
+    return (_jsx("button", { type: "button", title: title, "aria-label": title, "aria-pressed": isActive, onMouseDown: (e) => {
+            e.preventDefault();
+            onClick();
+        }, className: cn("cursor-pointer rounded px-2 py-1 text-sm font-medium transition-colors", isActive
+            ? "bg-primary text-primary-contrast"
+            : "bg-base-accent text-base-contrast hover:opacity-80"), children: children }));
+}
+function Separator() {
+    return _jsx("div", { className: "mx-1 h-5 w-px bg-base-contrast/20" });
+}
+export function RichTextToolbar({ editor, preset }) {
+    const [showLinkPopover, setShowLinkPopover] = useState(false);
+    const paragraphClass = editor.getAttributes("paragraph").class;
+    const isLargeActive = paragraphClass === "large";
+    const isLeadInActive = paragraphClass === "lead-in";
+    const toggleParagraphClass = (cls) => {
+        const next = paragraphClass === cls ? null : cls;
+        editor.chain().focus().updateAttributes("paragraph", { class: next }).run();
+    };
+    return (_jsxs("div", { "data-testid": "rich-text-toolbar", className: "flex items-center gap-1 rounded border border-base-contrast/10 bg-base-accent p-1 shadow-md", children: [_jsx(ToolbarButton, { isActive: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), title: "Bold", children: _jsx("strong", { children: "B" }) }), _jsx(ToolbarButton, { isActive: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), title: "Italic", children: _jsx("em", { children: "I" }) }), _jsx(ToolbarButton, { isActive: editor.isActive("underline"), onClick: () => editor.chain().focus().toggleUnderline().run(), title: "Underline", children: _jsx("span", { className: "underline", children: "U" }) }), preset === "rich" && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "relative", children: [_jsx(ToolbarButton, { isActive: editor.isActive("link") || showLinkPopover, onClick: () => setShowLinkPopover((prev) => !prev), title: "Link", children: "\uD83D\uDD17" }), showLinkPopover && (_jsx("div", { className: "absolute left-0 top-full z-50 mt-1", children: _jsx(LinkPopover, { editor: editor, onClose: () => setShowLinkPopover(false) }) }))] }), _jsx(Separator, {}), _jsx(ToolbarButton, { isActive: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run(), title: "Bullet List", children: "\u2022\u2261" }), _jsx(ToolbarButton, { isActive: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run(), title: "Ordered List", children: "1\u2261" }), _jsx(Separator, {}), _jsx(ToolbarButton, { isActive: isLargeActive, onClick: () => toggleParagraphClass("large"), title: "Large Paragraph", children: "Lg" }), _jsx(ToolbarButton, { isActive: isLeadInActive, onClick: () => toggleParagraphClass("lead-in"), title: "Lead-In", children: "Li" })] }))] }));
+}

package/dist/components/primitives/tiptap-presets.d.ts

@@ -0,0 +1,4 @@
+import type { Extensions } from "@tiptap/core";
+export type PresetName = "basic" | "rich";
+export declare const presets: Record<PresetName, Extensions>;
+//# sourceMappingURL=tiptap-presets.d.ts.map

package/dist/components/primitives/tiptap-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiptap-presets.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/tiptap-presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+C/C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,UAAU,CAAmB,CAAC"}

package/dist/components/primitives/tiptap-presets.js

@@ -0,0 +1,44 @@
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import { CustomParagraph } from "./CustomParagraph";
+/**
+ * Basic preset: inline formatting only.
+ * Bold, italic, underline. No lists, links, or structural elements.
+ */
+const basic = [
+    StarterKit.configure({
+        paragraph: false,
+        heading: false,
+        blockquote: false,
+        bulletList: false,
+        orderedList: false,
+        listItem: false,
+        codeBlock: false,
+        horizontalRule: false,
+        code: false,
+        strike: false,
+    }),
+    CustomParagraph,
+    Underline,
+];
+/**
+ * Rich preset: full prose editing.
+ * Everything in basic + links, bullet lists, ordered lists,
+ * large paragraph and lead-in variants (via CustomParagraph).
+ */
+const rich = [
+    StarterKit.configure({
+        paragraph: false,
+        heading: false,
+        blockquote: false,
+        codeBlock: false,
+        horizontalRule: false,
+        code: false,
+        strike: false,
+    }),
+    CustomParagraph,
+    Underline,
+    Link.configure({ openOnClick: false }),
+];
+export const presets = { basic, rich };

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

@@ -0,0 +1,19 @@
+interface WrappedItem<T> {
+    id: string;
+    data: T;
+}
+interface UseEditableCollectionOptions<T> {
+    items: T[];
+    onChange: (items: T[]) => void;
+    createItem: () => T;
+}
+interface UseEditableCollectionReturn<T> {
+    wrappedItems: WrappedItem<T>[];
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    onAdd: () => void;
+    onInsert: (index: number) => void;
+    onRemove: (id: string) => void;
+}
+export declare function useEditableCollection<T>({ items, onChange, createItem, }: UseEditableCollectionOptions<T>): UseEditableCollectionReturn<T>;
+export {};
+//# sourceMappingURL=useEditableCollection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableCollection.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/useEditableCollection.ts"],"names":[],"mappings":"AAEA,UAAU,WAAW,CAAC,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,CAAC,CAAC;CACT;AAED,UAAU,4BAA4B,CAAC,CAAC;IACtC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC,CAAC;CACrB;AAED,UAAU,2BAA2B,CAAC,CAAC;IACrC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAaD,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,EACvC,KAAK,EACL,QAAQ,EACR,UAAU,GACX,EAAE,4BAA4B,CAAC,CAAC,CAAC,GAAG,2BAA2B,CAAC,CAAC,CAAC,CAmElE"}

package/dist/components/primitives/useEditableCollection.js

@@ -0,0 +1,61 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+let nextId = 0;
+function uid() {
+    return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? crypto.randomUUID()
+        : `_id_${nextId++}_${Date.now()}`;
+}
+function wrapItems(items) {
+    return items.map((data) => ({ id: uid(), data }));
+}
+export function useEditableCollection({ items, onChange, createItem, }) {
+    const [wrappedItems, setWrappedItems] = useState(() => wrapItems(items));
+    const prevItemsRef = useRef(items);
+    useEffect(() => {
+        if (items === prevItemsRef.current)
+            return;
+        prevItemsRef.current = items;
+        setWrappedItems((prev) => {
+            return items.map((data, i) => {
+                if (i < prev.length) {
+                    return { id: prev[i].id, data };
+                }
+                return { id: uid(), data };
+            });
+        });
+    }, [items]);
+    const onReorder = useCallback((fromIndex, toIndex) => {
+        setWrappedItems((prev) => {
+            const next = [...prev];
+            const [moved] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, moved);
+            onChange(next.map((w) => w.data));
+            return next;
+        });
+    }, [onChange]);
+    const onAdd = useCallback(() => {
+        const newItem = createItem();
+        setWrappedItems((prev) => {
+            const next = [...prev, { id: uid(), data: newItem }];
+            onChange(next.map((w) => w.data));
+            return next;
+        });
+    }, [createItem, onChange]);
+    const onInsert = useCallback((index) => {
+        const newItem = createItem();
+        setWrappedItems((prev) => {
+            const next = [...prev];
+            next.splice(index, 0, { id: uid(), data: newItem });
+            onChange(next.map((w) => w.data));
+            return next;
+        });
+    }, [createItem, onChange]);
+    const onRemove = useCallback((id) => {
+        setWrappedItems((prev) => {
+            const next = prev.filter((w) => w.id !== id);
+            onChange(next.map((w) => w.data));
+            return next;
+        });
+    }, [onChange]);
+    return { wrappedItems, onReorder, onAdd, onInsert, onRemove };
+}

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

@@ -0,0 +1,14 @@
+interface UseEditablePlainTextOptions {
+    value: string;
+    onChange: (value: string) => void;
+    multiline?: boolean;
+}
+interface UseEditablePlainTextReturn {
+    value: string;
+    handleInput: (text: string) => void;
+    handleBlur: () => void;
+    shouldPreventEnter: boolean;
+}
+export declare function useEditablePlainText({ value: propValue, onChange, multiline, }: UseEditablePlainTextOptions): UseEditablePlainTextReturn;
+export {};
+//# sourceMappingURL=useEditablePlainText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditablePlainText.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/useEditablePlainText.ts"],"names":[],"mappings":"AAEA,UAAU,2BAA2B;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,0BAA0B;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,SAAiB,GAClB,EAAE,2BAA2B,GAAG,0BAA0B,CA6B1D"}

package/dist/components/primitives/useEditablePlainText.js

@@ -0,0 +1,27 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+export function useEditablePlainText({ value: propValue, onChange, multiline = false, }) {
+    const [value, setValue] = useState(propValue);
+    const lastPropValue = useRef(propValue);
+    // Sync with external prop changes
+    useEffect(() => {
+        if (propValue !== lastPropValue.current) {
+            setValue(propValue);
+            lastPropValue.current = propValue;
+        }
+    }, [propValue]);
+    const handleInput = useCallback((text) => {
+        setValue(text);
+    }, []);
+    const handleBlur = useCallback(() => {
+        if (value !== propValue) {
+            onChange(value);
+            lastPropValue.current = value;
+        }
+    }, [value, propValue, onChange]);
+    return {
+        value,
+        handleInput,
+        handleBlur,
+        shouldPreventEnter: !multiline,
+    };
+}

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

@@ -0,0 +1,16 @@
+import { Editor } from "@tiptap/core";
+import { type PresetName } from "./tiptap-presets";
+interface UseEditableRichTextOptions {
+    value: string;
+    onChange: (html: string) => void;
+    preset: PresetName;
+}
+interface UseEditableRichTextReturn {
+    isEditorActive: boolean;
+    editor: Editor | null;
+    activate: () => void;
+    deactivate: () => void;
+}
+export declare function useEditableRichText({ value, onChange, preset, }: UseEditableRichTextOptions): UseEditableRichTextReturn;
+export {};
+//# sourceMappingURL=useEditableRichText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableRichText.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/useEditableRichText.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE5D,UAAU,0BAA0B;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,UAAU,yBAAyB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE,0BAA0B,GAAG,yBAAyB,CAoDxD"}

package/dist/components/primitives/useEditableRichText.js

@@ -0,0 +1,52 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Editor } from "@tiptap/core";
+import { presets } from "./tiptap-presets";
+export function useEditableRichText({ value, onChange, preset, }) {
+    // Dual ref+state: ref for stable callback access, state for re-renders
+    const editorRef = useRef(null);
+    const [editor, setEditor] = useState(null);
+    // Refs for latest prop values (avoids stale closures in callbacks)
+    const valueRef = useRef(value);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const activate = useCallback(() => {
+        if (editorRef.current)
+            return;
+        const ed = new Editor({
+            extensions: presets[preset],
+            content: valueRef.current,
+        });
+        editorRef.current = ed;
+        setEditor(ed);
+    }, [preset]);
+    const deactivate = useCallback(() => {
+        const ed = editorRef.current;
+        if (!ed)
+            return;
+        const html = ed.getHTML();
+        ed.destroy();
+        editorRef.current = null;
+        setEditor(null);
+        if (html !== valueRef.current) {
+            onChangeRef.current(html);
+        }
+    }, []);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            editorRef.current?.destroy();
+            editorRef.current = null;
+        };
+    }, []);
+    return {
+        isEditorActive: editor !== null,
+        editor,
+        activate,
+        deactivate,
+    };
+}