@drawnagency/primitives 0.1.0 → 0.2.0

package/dist/components/sections/IconList/index.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import IconList from "./IconList";
-import { IconListSettings } from "./IconListSettings";
-const schema = z.object({
-    type: z.literal("icon_list"),
-    content: z.object({
-        items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional() })),
-    }),
-    options: z.object({
-        icon: z.string().nullable().optional(),
-        showLabel: z.boolean().optional(),
-        stackText: z.boolean().optional(),
-    }).optional(),
-});
-export default defineSection({
-    type: "icon_list",
-    label: "Icon List",
-    schema,
-    component: ({ content, options, onChange }) => (_jsx(IconList, { items: content.content.items, icon: options?.icon, showLabel: options?.showLabel, stackText: options?.stackText, onChange: onChange ? (c) => onChange(c) : undefined })),
-    defaults: () => ({
-        type: "icon_list",
-        content: { items: [{ label: "", text: "" }] },
-    }),
-    settingsForm: IconListSettings,
-});

package/dist/components/sections/LinkHeading/index.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { HeadingSection } from "../../primitives/HeadingSection";
-const schema = z.object({
-    type: z.literal("link_heading"),
-    content: z.object({ heading: z.string() }),
-});
-export default defineSection({
-    type: "link_heading",
-    label: "Link Heading",
-    schema,
-    component: ({ content, onChange }) => (_jsx(HeadingSection, { heading: content.content.heading, tag: "h2", placeholder: "Section heading", className: "text-primary", onChange: onChange ? (heading) => onChange({ type: "link_heading", content: { heading } }) : undefined })),
-    defaults: () => ({ type: "link_heading", content: { heading: "New Section" } }),
-});

package/dist/components/sections/MediaGrid/MediaGrid.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../lib/cn";
-import { gridColsClass } from "../../../lib/grid";
-import { EditableGrid } from "../../primitives/EditableGrid";
-import { ResolvedMedia } from "../../primitives/ResolvedMedia";
-import { ImageSettingsForm, DoDontImageSettingsForm } from "../../primitives/MediaSettingsForms";
-import { EditablePlainText } from "../../primitives/EditablePlainText";
-import { Check, X } from "lucide-react";
-import { useMediaLibrary } from "../../shell/MediaLibraryContext";
-export default function MediaGrid({ media, columns, square, border, crop, showCaptions, sectionType, onChange, openModal }) {
-    if (onChange && openModal) {
-        return (_jsx(MediaGridEditable, { media: media, columns: columns, square: square, border: border, crop: crop, showCaptions: showCaptions, sectionType: sectionType, onChange: onChange, openModal: openModal }));
-    }
-    return (_jsx("div", { className: cn("grid gap-4", gridColsClass[columns] || "grid-cols-1"), children: media.map((item, i) => (_jsx(MediaGridItem, { item: item, isEditMode: false, square: square, border: border, crop: crop, showCaptions: showCaptions }, i))) }));
-}
-function MediaGridEditable({ media, columns, square, border, crop, showCaptions, sectionType = "media_grid", onChange, openModal }) {
-    const mediaLibrary = useMediaLibrary();
-    const opts = square || border || crop || showCaptions
-        ? { options: { square, border, crop, showCaptions } }
-        : {};
-    const createItem = () => sectionType === "do_dont_grid"
-        ? { type: "doDontImage", imageId: "", doDont: "do" }
-        : { type: "image", imageId: "" };
-    const handleItemSettings = (index) => {
-        const item = media[index];
-        if (item.type === "doDontImage") {
-            openModal("Image Settings", _jsx(DoDontImageSettingsForm, { border: item.border, objectFit: item.objectFit, doDont: item.doDont, onChange: (updated) => {
-                    const newMedia = media.map((m, i) => i === index ? { ...m, ...updated } : m);
-                    onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts });
-                } }));
-        }
-        else {
-            openModal("Image Settings", _jsx(ImageSettingsForm, { border: item.border, objectFit: item.objectFit, onChange: (updated) => {
-                    const newMedia = media.map((m, i) => i === index ? { ...m, ...updated } : m);
-                    onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts });
-                } }));
-        }
-    };
-    const handleItemImageClick = (index) => {
-        mediaLibrary?.openSelectModal((imageId) => {
-            const newMedia = media.map((m, i) => i === index ? { ...m, imageId } : m);
-            onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts });
-        });
-    };
-    return (_jsx(EditableGrid, { items: media, columns: columns, onChange: (newMedia) => onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts }), createItem: createItem, isEditMode: true, onItemSettings: handleItemSettings, onItemImageClick: mediaLibrary ? handleItemImageClick : undefined, chromeTopClass: sectionType === "do_dont_grid" ? "top-[50px]" : undefined, renderItem: (item, { isEditMode, index }) => (_jsx(MediaGridItem, { item: item, isEditMode: isEditMode, square: square, border: border, crop: crop, showCaptions: showCaptions, onCaptionChange: (caption) => {
-                const newMedia = media.map((m, i) => i === index ? { ...m, caption: caption || undefined } : m);
-                onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts });
-            } })) }));
-}
-function MediaGridItem({ item, isEditMode, square, border, crop, showCaptions, onCaptionChange, }) {
-    const isDoDont = item.type === "doDontImage";
-    const showBorder = item.border ?? border;
-    const itemFit = item.objectFit ?? (crop ? "cover" : undefined);
-    const fitClass = itemFit === "cover" ? "object-cover" : "object-contain";
-    const captionStr = item.caption
-        ? (Array.isArray(item.caption) ? item.caption.join("\n") : item.caption)
-        : "";
-    const media = (_jsx(ResolvedMedia, { imageId: item.imageId || undefined, className: "h-full w-full", imgClassName: fitClass }));
-    return (_jsxs("figure", { children: [isDoDont && (_jsx("div", { className: "flex h-10 items-center justify-center pb-1", children: item.doDont === "do"
-                    ? _jsx(Check, { size: 28, className: "text-green-600" })
-                    : _jsx(X, { size: 28, className: "text-red-600" }) })), _jsx("div", { className: cn("overflow-hidden rounded-md", showBorder && "border border-base-200", square && "aspect-square"), children: item.type === "linkedImage" && !isEditMode ? (_jsxs("a", { href: item.href, target: item.target, className: "group block", children: [media, item.linkText && (_jsx("span", { className: "mt-2 block text-sm text-primary group-hover:underline", children: item.linkText }))] })) : media }), showCaptions && (_jsx("figcaption", { className: "mt-2 min-h-[1em] text-sm text-base-contrast-light", children: isEditMode && onCaptionChange ? (_jsx(EditablePlainText, { tag: "span", value: captionStr, onChange: onCaptionChange, isEditMode: true, placeholder: "Caption", className: "block min-h-[1em]" })) : (captionStr || " ") }))] }));
-}

package/dist/components/sections/MediaGrid/index.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { MediaReferenceSchema } from "../../../schemas/shared";
-import { MediaGridOptionsSchema } from "../../../schemas/media-grid-options";
-import MediaGrid from "./MediaGrid";
-const schema = z.object({
-    type: z.literal("media_grid"),
-    content: z.object({
-        columns: z.number().int().min(1).max(5),
-        media: z.array(MediaReferenceSchema),
-    }),
-    options: MediaGridOptionsSchema,
-});
-export default defineSection({
-    type: "media_grid",
-    label: "Media Grid",
-    schema,
-    component: ({ content, options, onChange, openModal }) => (_jsx(MediaGrid, { media: content.content.media, columns: content.content.columns, square: options?.square, border: options?.border, crop: options?.crop, showCaptions: options?.showCaptions, onChange: onChange ? (c) => onChange(c) : undefined, openModal: openModal })),
-    defaults: () => ({
-        type: "media_grid",
-        content: { columns: 2, media: [{ type: "image", imageId: "" }] },
-        options: {},
-    }),
-    settings: {
-        columns: {
-            type: "select", label: "Columns", default: "2", target: "content", coerce: "number",
-            options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }, { label: "4", value: "4" }],
-        },
-        border: { type: "checkbox", label: "Show border", default: false },
-        square: { type: "checkbox", label: "Square aspect ratio", default: false },
-        crop: { type: "checkbox", label: "Crop to fill", default: false },
-        showCaptions: { type: "checkbox", label: "Show captions", default: false },
-    },
-});

package/dist/components/sections/Prose/Prose.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EditableRichText } from "../../primitives/EditableRichText";
-import { sanitizeHtml } from "../../../lib/sanitize";
-export default function Prose({ body, onChange }) {
-    if (onChange) {
-        return (_jsx("div", { className: "prose-content", children: _jsx(EditableRichText, { value: body, onChange: (html) => onChange({ type: "prose", content: { body: html } }), isEditMode: true, preset: "rich" }) }));
-    }
-    // View mode: renders server-side via Astro SSR; content comes from trusted project JSON files.
-    // eslint-disable-next-line react/no-danger
-    return (_jsx("div", { className: "prose-content", dangerouslySetInnerHTML: { __html: sanitizeHtml(body) } }));
-}

package/dist/components/sections/Prose/index.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import Prose from "./Prose";
-const schema = z.object({
-    type: z.literal("prose"),
-    content: z.object({ body: z.string() }),
-});
-export default defineSection({
-    type: "prose",
-    label: "Prose",
-    schema,
-    component: ({ content, onChange }) => (_jsx(Prose, { body: content.content.body, onChange: onChange ? (c) => onChange(c) : undefined })),
-    defaults: () => ({ type: "prose", content: { body: "<p></p>" } }),
-});

package/dist/components/sections/SectionLayout.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/cn";
-const categoryMap = {
-    link_heading: "section-heading",
-    sub_heading: "section-subheading",
-    sub_sub_heading: "section-subheading",
-};
-function getSectionCategory(type) {
-    return categoryMap[type] ?? "section-content";
-}
-export function SectionLayout({ type, status, dimNonPublished, children }) {
-    const isDimmed = dimNonPublished && status && status !== "published";
-    return (_jsx("div", { className: cn("section-wrapper group", getSectionCategory(type), isDimmed && "opacity-50"), children: children }));
-}
-export { getSectionCategory };

package/dist/components/sections/SplitContent/SplitContent.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../lib/cn";
-import { sanitizeHtml } from "../../../lib/sanitize";
-import { ResolvedMedia } from "../../primitives/ResolvedMedia";
-import { EditableRichText } from "../../primitives/EditableRichText";
-import { IconButton } from "../../shared/IconButton";
-import { useMediaLibrary } from "../../shell/MediaLibraryContext";
-import { ImageIcon } from "lucide-react";
-export default function SplitContent({ imageId, body, border, imagePosition = "left", onChange }) {
-    const mediaLibrary = useMediaLibrary();
-    const handleImageChange = (newImageId) => {
-        onChange?.({
-            type: "split_content",
-            content: { imageId: newImageId, body },
-            options: { border, imagePosition },
-        });
-    };
-    const handleBodyChange = (html) => {
-        onChange?.({
-            type: "split_content",
-            content: { imageId, body: html },
-            options: { border, imagePosition },
-        });
-    };
-    const handleImageClick = () => {
-        mediaLibrary?.openSelectModal(handleImageChange);
-    };
-    return (_jsxs("div", { className: cn("flex flex-col gap-6 lg:flex-row lg:items-start", imagePosition === "right" && "lg:flex-row-reverse"), children: [_jsxs("div", { className: cn("group/img relative flex-shrink-0 lg:w-1/2", border && "overflow-hidden rounded-md border border-base-200"), children: [_jsx(ResolvedMedia, { imageId: imageId, className: "w-full" }), onChange && mediaLibrary && (_jsx("div", { className: "absolute top-1.5 right-1.5 z-10 opacity-0 transition-opacity group-hover/img:opacity-100", children: _jsx(IconButton, { icon: _jsx(ImageIcon, { size: 16 }), label: "Change image", onClick: handleImageClick, className: "bg-base/80 shadow-sm" }) }))] }), _jsx("div", { className: "prose-content lg:w-1/2", children: onChange ? (_jsx(EditableRichText, { value: body, onChange: handleBodyChange, isEditMode: true, preset: "rich" })) : (
-                // eslint-disable-next-line react/no-danger
-                _jsx("div", { dangerouslySetInnerHTML: { __html: sanitizeHtml(body) } })) })] }));
-}

package/dist/components/sections/SplitContent/SplitContentSettings.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Select } from "../../shared/Select";
-import { Checkbox } from "../../shared/Checkbox";
-export function SplitContentSettings({ imagePosition: initialPos, border: initialBorder, onChange, }) {
-    const [imagePosition, setImagePosition] = useState(initialPos);
-    const [border, setBorder] = useState(initialBorder);
-    const emit = (overrides) => onChange({ imagePosition, border, ...overrides });
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Select, { label: "Image Position", value: imagePosition, onChange: (val) => {
-                    const v = val;
-                    setImagePosition(v);
-                    emit({ imagePosition: v });
-                }, options: [
-                    { value: "left", label: "Left" },
-                    { value: "right", label: "Right" },
-                ] }), _jsx(Checkbox, { checked: border, onChange: (v) => { setBorder(v); emit({ border: v }); }, label: "Show border" })] }));
-}

package/dist/components/sections/SplitContent/index.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import SplitContent from "./SplitContent";
-import { SplitContentSettings } from "./SplitContentSettings";
-const schema = z.object({
-    type: z.literal("split_content"),
-    content: z.object({
-        imageId: z.string().optional(),
-        body: z.string(),
-    }),
-    options: z.object({
-        border: z.boolean().optional(),
-        imagePosition: z.enum(["left", "right"]).optional(),
-    }).optional(),
-});
-export default defineSection({
-    type: "split_content",
-    label: "Split Content",
-    schema,
-    component: ({ content, options, onChange }) => (_jsx(SplitContent, { imageId: content.content.imageId, body: content.content.body, border: options?.border, imagePosition: options?.imagePosition, onChange: onChange ? (c) => onChange(c) : undefined })),
-    defaults: () => ({
-        type: "split_content",
-        content: { imageId: undefined, body: "<p></p>" },
-    }),
-    settingsForm: SplitContentSettings,
-});

package/dist/components/sections/SubHeading/index.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { HeadingSection } from "../../primitives/HeadingSection";
-const schema = z.object({
-    type: z.literal("sub_heading"),
-    content: z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }),
-});
-export default defineSection({
-    type: "sub_heading",
-    label: "Sub Heading",
-    schema,
-    component: ({ content, onChange }) => (_jsx(HeadingSection, { heading: content.content.heading, tag: "h3", placeholder: "Sub heading", className: "text-base-contrast", onChange: onChange ? (heading) => onChange({ ...content, content: { ...content.content, heading } }) : undefined })),
-    defaults: () => ({ type: "sub_heading", content: { heading: "New Sub Heading" } }),
-    settings: {
-        excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
-    },
-});

package/dist/components/sections/SubSubHeading/index.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { HeadingSection } from "../../primitives/HeadingSection";
-const schema = z.object({
-    type: z.literal("sub_sub_heading"),
-    content: z.object({ heading: z.string(), excludeFromNav: z.boolean().optional() }),
-});
-export default defineSection({
-    type: "sub_sub_heading",
-    label: "Sub Sub Heading",
-    schema,
-    component: ({ content, onChange }) => (_jsx(HeadingSection, { heading: content.content.heading, tag: "h4", placeholder: "Sub sub heading", className: "text-lg font-bold text-base-contrast", onChange: onChange ? (heading) => onChange({ ...content, content: { ...content.content, heading } }) : undefined })),
-    defaults: () => ({ type: "sub_sub_heading", content: { heading: "New Sub Sub Heading" } }),
-    settings: {
-        excludeFromNav: { type: "checkbox", label: "Exclude from navigation", default: false, target: "content" },
-    },
-});

package/dist/components/sections/ViewRenderer.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import "./register";
-import { getSection } from "../../lib/registry";
-import { SectionLayout } from "./SectionLayout";
-export default function ViewRenderer({ sections }) {
-    return (_jsx(_Fragment, { children: sections.map(({ section, meta }) => {
-            const def = getSection(section.type);
-            if (!def)
-                return null;
-            const Component = def.component;
-            return (_jsx(SectionLayout, { type: section.type, status: meta.status, dimNonPublished: true, children: _jsx(Component, { content: section, options: "options" in section ? section.options : undefined, isEditMode: false }) }, section.id));
-        }) }));
-}

package/dist/components/sections/register-schemas.js

@@ -1,15 +0,0 @@
-import { registerSchema } from "../../lib/registry";
-import linkHeading from "./LinkHeading";
-import subHeading from "./SubHeading";
-import subSubHeading from "./SubSubHeading";
-import prose from "./Prose";
-import mediaGrid from "./MediaGrid";
-import splitContent from "./SplitContent";
-import button from "./Button";
-import colors from "./Colors";
-import doDontList from "./DoDontList";
-import doDontImageGrid from "./DoDontMediaGrid";
-import iconList from "./IconList";
-[linkHeading, subHeading, subSubHeading, prose, mediaGrid,
-    splitContent, button, colors, doDontList, doDontImageGrid, iconList,
-].forEach((def) => registerSchema(def.type, def.schema));

package/dist/components/sections/register.js

@@ -1,15 +0,0 @@
-import { registerSection } from "../../lib/registry";
-import linkHeading from "./LinkHeading";
-import subHeading from "./SubHeading";
-import subSubHeading from "./SubSubHeading";
-import prose from "./Prose";
-import mediaGrid from "./MediaGrid";
-import splitContent from "./SplitContent";
-import button from "./Button";
-import colors from "./Colors";
-import doDontList from "./DoDontList";
-import doDontImageGrid from "./DoDontMediaGrid";
-import iconList from "./IconList";
-[linkHeading, subHeading, subSubHeading, prose, mediaGrid,
-    splitContent, button, colors, doDontList, doDontImageGrid, iconList,
-].forEach(registerSection);

package/dist/components/shared/Button.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { cn } from "../../lib/cn";
-const boxSize = {
-    sm: "rounded px-3 py-1.5 text-xs font-medium",
-    md: "rounded px-4 py-2 text-sm font-medium",
-};
-const ghostSize = {
-    sm: "text-xs font-medium",
-    md: "text-sm font-medium",
-};
-const variantClasses = {
-    primary: "bg-base-contrast text-base-accent hover:bg-base-contrast/90",
-    brand: "bg-primary text-primary-contrast hover:opacity-90",
-    secondary: "border border-base-200 text-base-contrast hover:bg-base-accent",
-    destructive: "border border-red-600 text-red-600 hover:bg-red-600 hover:text-white",
-};
-const ghostToneClasses = {
-    neutral: "text-base-contrast-light hover:text-base-contrast",
-    destructive: "text-red-600 hover:text-red-800",
-};
-export const Button = forwardRef(function Button({ variant = "primary", size = "sm", tone = "neutral", fullWidth = false, isLoading = false, loadingLabel, disabled, className, children, ...rest }, ref) {
-    const isGhost = variant === "ghost";
-    const resolvedDisabled = disabled || isLoading;
-    const label = isLoading && loadingLabel ? loadingLabel : children;
-    return (_jsx("button", { ref: ref, disabled: resolvedDisabled, className: cn("inline-flex items-center justify-center transition-colors", isGhost ? ghostSize[size] : boxSize[size], isGhost ? ghostToneClasses[tone] : variantClasses[variant], fullWidth && "w-full", resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), ...rest, children: label }));
-});

package/dist/components/shared/Checkbox.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { Check } from "lucide-react";
-import { cn } from "../../lib/cn";
-export function Checkbox({ checked, onChange, label, description, disabled, className, startAdornment, align = "start", }) {
-    const id = useId();
-    return (_jsxs("label", { htmlFor: id, className: cn("flex cursor-pointer gap-3 select-none hover:opacity-80", align === "start" ? "items-start" : "items-center", disabled && "cursor-not-allowed opacity-50", className), children: [_jsxs("span", { className: cn("relative flex h-5 w-5 shrink-0 items-center justify-center", align === "start" && "mt-0.5"), children: [_jsx("input", { id: id, type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), className: "sr-only" }), _jsx("span", { "aria-hidden": "true", className: cn("flex h-5 w-5 items-center justify-center rounded border transition-colors", checked
-                            ? "border-primary bg-primary text-primary-contrast"
-                            : "border-base-300 bg-base hover:border-primary", disabled && "pointer-events-none"), children: checked && _jsx(Check, { size: 14, strokeWidth: 3 }) })] }), startAdornment, _jsxs("div", { className: "text-sm", children: [_jsx("span", { className: "font-medium text-base-contrast", children: label }), description && (_jsx("span", { className: "block text-base-contrast-light", children: description }))] })] }));
-}

package/dist/components/shared/ColorPicker.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/cn";
-export function ColorPicker({ value, onChange, label = "Color", className }) {
-    return (_jsx("label", { className: cn("inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-base-200 focus-within:outline focus-within:outline-2 focus-within:outline-base-contrast", className), style: { backgroundColor: value }, children: _jsx("input", { type: "color", "aria-label": label, value: value, onChange: (e) => onChange(e.target.value), className: "sr-only" }) }));
-}

package/dist/components/shared/ErrorBoundary.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component } from "react";
-import { cn } from "../../lib/cn";
-import { Button } from "./Button";
-/**
- * Catches render errors in children and shows a recoverable fallback UI.
- * Designed to wrap individual section components so a single broken section
- * doesn't take down the entire editor.
- */
-export class ErrorBoundary extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-    }
-    componentDidCatch(error, info) {
-        console.error(`[ErrorBoundary${this.props.label ? `: ${this.props.label}` : ""}] Render error:`, error, info.componentStack);
-    }
-    handleRetry = () => {
-        this.setState({ hasError: false, error: null });
-    };
-    render() {
-        if (this.state.hasError) {
-            return (_jsxs("div", { role: "alert", className: cn("flex flex-col items-center justify-center gap-3 rounded border border-red-200 bg-red-50 px-6 py-10 text-center", "dark:border-red-900/40 dark:bg-red-950/20"), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "h-6 w-6 text-red-500", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z", clipRule: "evenodd" }) }), _jsx("p", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: "This section couldn't be rendered" }), this.props.label && (_jsxs("p", { className: "text-xs text-red-500 dark:text-red-500/80", children: ["Section: ", this.props.label] })), this.state.error && (_jsx("p", { className: "max-w-md text-xs text-red-400 dark:text-red-500/60", children: this.state.error.message })), _jsx(Button, { variant: "secondary", size: "sm", onClick: this.handleRetry, className: "mt-1", children: "Try again" })] }));
-        }
-        return this.props.children;
-    }
-}

package/dist/components/shared/FontPicker.js

@@ -1,190 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useId, useCallback, useMemo } from "react";
-import { createPortal } from "react-dom";
-import { ChevronDown } from "lucide-react";
-import { cn } from "../../lib/cn";
-import { FormLabel } from "./FormLabel";
-import fontCatalog from "../../data/google-fonts.json";
-const fonts = fontCatalog;
-function displayValue(value) {
-    return value === "system-ui" ? "System Default" : value;
-}
-function loadFontPreview(families) {
-    if (families.length === 0)
-        return;
-    const params = families.map((f) => `family=${f.replace(/ /g, "+")}:wght@400;700`).join("&");
-    const href = `https://fonts.googleapis.com/css2?${params}&display=swap`;
-    if (document.querySelector(`link[href="${href}"]`))
-        return;
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = href;
-    document.head.appendChild(link);
-}
-export function FontPicker({ label, value, onChange }) {
-    const id = useId();
-    const [open, setOpen] = useState(false);
-    const [query, setQuery] = useState("");
-    const [debouncedQuery, setDebouncedQuery] = useState("");
-    const [highlightIndex, setHighlightIndex] = useState(0);
-    const containerRef = useRef(null);
-    const inputWrapRef = useRef(null);
-    const listRef = useRef(null);
-    const loadedRef = useRef(new Set());
-    const batchRef = useRef([]);
-    const timerRef = useRef(undefined);
-    const debounceRef = useRef(undefined);
-    const [dropdownPos, setDropdownPos] = useState({
-        top: 0,
-        left: 0,
-        width: 0,
-    });
-    useEffect(() => {
-        clearTimeout(debounceRef.current);
-        if (!query) {
-            setDebouncedQuery("");
-            return;
-        }
-        debounceRef.current = setTimeout(() => setDebouncedQuery(query), 150);
-        return () => clearTimeout(debounceRef.current);
-    }, [query]);
-    const filtered = useMemo(() => debouncedQuery
-        ? fonts.filter((f) => f.family.toLowerCase().includes(debouncedQuery.toLowerCase()))
-        : [], [debouncedQuery]);
-    const options = [
-        { family: "system-ui", display: "System Default" },
-        ...filtered.map((f) => ({ family: f.family, display: f.family })),
-    ];
-    const scheduleLoad = useCallback((family) => {
-        if (family === "system-ui" || loadedRef.current.has(family))
-            return;
-        loadedRef.current.add(family);
-        batchRef.current.push(family);
-        clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => {
-            const batch = batchRef.current.splice(0);
-            if (batch.length > 0)
-                loadFontPreview(batch);
-        }, 100);
-    }, []);
-    const observerRef = useRef(undefined);
-    useEffect(() => {
-        return () => {
-            clearTimeout(timerRef.current);
-            clearTimeout(debounceRef.current);
-        };
-    }, []);
-    useEffect(() => {
-        if (!open || typeof IntersectionObserver === "undefined")
-            return;
-        observerRef.current = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    const family = entry.target.dataset.family;
-                    if (family)
-                        scheduleLoad(family);
-                }
-            }
-        }, { root: listRef.current, threshold: 0 });
-        const items = listRef.current?.querySelectorAll("[data-family]");
-        items?.forEach((el) => observerRef.current.observe(el));
-        return () => observerRef.current?.disconnect();
-    }, [open, debouncedQuery, scheduleLoad]);
-    const dropdownRef = useRef(null);
-    useEffect(() => {
-        if (!open || !inputWrapRef.current)
-            return;
-        function updatePosition() {
-            const rect = inputWrapRef.current.getBoundingClientRect();
-            setDropdownPos({
-                top: rect.bottom + 4,
-                left: rect.left,
-                width: rect.width,
-            });
-        }
-        updatePosition();
-        window.addEventListener("scroll", updatePosition, true);
-        window.addEventListener("resize", updatePosition);
-        return () => {
-            window.removeEventListener("scroll", updatePosition, true);
-            window.removeEventListener("resize", updatePosition);
-        };
-    }, [open]);
-    useEffect(() => {
-        if (!open)
-            return;
-        function handleClickOutside(e) {
-            const target = e.target;
-            if (containerRef.current && !containerRef.current.contains(target) &&
-                dropdownRef.current && !dropdownRef.current.contains(target)) {
-                setOpen(false);
-                setQuery("");
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [open]);
-    useEffect(() => {
-        setHighlightIndex(0);
-    }, [debouncedQuery]);
-    function handleSelect(family) {
-        onChange(family);
-        setOpen(false);
-        setQuery("");
-    }
-    function handleKeyDown(e) {
-        if (!open) {
-            if (e.key === "ArrowDown" || e.key === "Enter") {
-                setOpen(true);
-                e.preventDefault();
-            }
-            return;
-        }
-        switch (e.key) {
-            case "ArrowDown":
-                e.preventDefault();
-                setHighlightIndex((i) => Math.min(i + 1, options.length - 1));
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                setHighlightIndex((i) => Math.max(i - 1, 0));
-                break;
-            case "Enter":
-                e.preventDefault();
-                if (options[highlightIndex])
-                    handleSelect(options[highlightIndex].family);
-                break;
-            case "Escape":
-                e.preventDefault();
-                setOpen(false);
-                setQuery("");
-                break;
-        }
-    }
-    useEffect(() => {
-        if (!open || !listRef.current)
-            return;
-        const el = listRef.current.children[highlightIndex];
-        el?.scrollIntoView?.({ block: "nearest" });
-    }, [highlightIndex, open]);
-    return (_jsxs("div", { ref: containerRef, className: "relative", children: [_jsx(FormLabel, { htmlFor: id, children: label }), _jsxs("div", { ref: inputWrapRef, className: "relative", children: [_jsx("input", { id: id, type: "text", role: "combobox", autoComplete: "off", "aria-expanded": open, "aria-haspopup": "listbox", "aria-autocomplete": "list", "aria-controls": `${id}-listbox`, "aria-activedescendant": open ? `${id}-option-${highlightIndex}` : undefined, value: open ? query : displayValue(value), onChange: (e) => {
-                            setQuery(e.target.value);
-                            if (!open)
-                                setOpen(true);
-                        }, onFocus: () => {
-                            setOpen(true);
-                            setQuery("");
-                        }, onKeyDown: handleKeyDown, placeholder: "Search fonts...", className: cn("w-full rounded border border-base-200 bg-base py-2 pr-8 pl-3 text-sm text-base-contrast", "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast"), style: !open && value !== "system-ui" ? { fontFamily: `"${value}", system-ui, sans-serif` } : undefined }), _jsx(ChevronDown, { size: 14, className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light" })] }), open &&
-                createPortal(_jsx("div", { ref: dropdownRef, className: "rounded border border-base-200 bg-base shadow-lg", style: {
-                        position: "fixed",
-                        top: dropdownPos.top,
-                        left: dropdownPos.left,
-                        width: dropdownPos.width,
-                        zIndex: 9999,
-                    }, children: _jsxs("ul", { ref: listRef, id: `${id}-listbox`, role: "listbox", className: "max-h-64 overflow-y-auto py-1", children: [options.map((opt, i) => (_jsx("li", { id: `${id}-option-${i}`, role: "option", "aria-selected": opt.family === value, "data-family": opt.family, onMouseDown: (e) => {
-                                    e.preventDefault();
-                                    handleSelect(opt.family);
-                                }, onMouseEnter: () => setHighlightIndex(i), className: cn("cursor-pointer px-3 py-1.5 text-sm", i === highlightIndex && "bg-base-100", opt.family === value && "font-medium text-base-contrast"), style: opt.family !== "system-ui"
-                                    ? { fontFamily: `"${opt.family}", system-ui, sans-serif` }
-                                    : undefined, children: opt.display }, opt.family))), debouncedQuery && filtered.length === 0 && (_jsx("li", { className: "px-3 py-1.5 text-sm text-base-contrast-light", children: "No fonts found" })), !debouncedQuery && (_jsx("li", { className: "px-3 py-1.5 text-sm text-base-contrast-light", children: "Type to search fonts..." }))] }) }), document.body)] }));
-}

package/dist/components/shared/FormLabel.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/cn";
-export function FormLabel({ htmlFor, children, className }) {
-    return (_jsx("label", { htmlFor: htmlFor, className: cn("mb-1.5 block text-sm font-medium text-base-contrast", className), children: children }));
-}