@drawnagency/primitives 0.1.0

package/dist/components/sections/Button/CTAButton.d.ts

@@ -0,0 +1,11 @@
+import type { SectionContent } from "../../../schemas/sections";
+interface Props {
+    text: string;
+    href?: string;
+    target?: string;
+    download?: boolean;
+    onChange?: (content: SectionContent) => void;
+}
+export default function Button({ text, href, target, download, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CTAButton.d.ts.map

package/dist/components/sections/Button/CTAButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTAButton.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Button/CTAButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAoC/E"}

package/dist/components/sections/Button/CTAButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/cn";
+import { Download } from "lucide-react";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+export default function Button({ text, href, target, download, onChange }) {
+    const base = "inline-block rounded-md px-6 py-3 font-bold transition-colors";
+    const variant = "border-2 border-primary text-primary hover:bg-primary hover:text-primary-contrast";
+    if (onChange) {
+        return (_jsxs("span", { className: cn(base, variant, "inline-flex items-center gap-2"), children: [download && _jsx(Download, { size: 16, className: "shrink-0" }), _jsx(EditablePlainText, { tag: "span", value: text, onChange: (newText) => onChange({
+                        type: "button",
+                        content: { text: newText, href, target, download },
+                    }), isEditMode: true, placeholder: "Button text" })] }));
+    }
+    if (href) {
+        return (_jsxs("a", { href: href, target: target, download: download ? "" : undefined, className: cn(base, variant, download && "inline-flex items-center gap-2"), children: [download && _jsx(Download, { size: 16, className: "shrink-0" }), text] }));
+    }
+    return (_jsx("button", { className: cn("cursor-pointer", base, variant), children: text }));
+}

package/dist/components/sections/Button/index.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("../../..").SectionDefinition<{
+    type: "button";
+    content: {
+        text: string;
+        href?: string | undefined;
+        target?: string | undefined;
+        download?: boolean | undefined;
+    };
+}>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sections/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Button/index.tsx"],"names":[],"mappings":";;;;;;;;;AAcA,wBAsBG"}

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import CTAButton from "./CTAButton";
+const schema = z.object({
+    type: z.literal("button"),
+    content: z.object({
+        text: z.string(),
+        href: z.string().optional(),
+        target: z.string().optional(),
+        download: z.boolean().optional(),
+    }),
+});
+export default defineSection({
+    type: "button",
+    label: "Button",
+    schema,
+    component: ({ content, onChange }) => (_jsx(CTAButton, { text: content.content.text, href: content.content.href, target: content.content.target, download: content.content.download, onChange: onChange ? (c) => onChange(c) : undefined })),
+    defaults: () => ({ type: "button", content: { text: "Button" } }),
+    settings: {
+        href: { type: "text", label: "URL", default: "", target: "content", placeholder: "https://..." },
+        target: {
+            type: "select", label: "Target", default: "_self", target: "content",
+            options: [{ label: "Same tab (_self)", value: "_self" }, { label: "New tab (_blank)", value: "_blank" }],
+        },
+        download: { type: "checkbox", label: "Download link", default: false, target: "content" },
+    },
+});

package/dist/components/sections/Colors/index.d.ts

@@ -0,0 +1,22 @@
+declare const _default: import("../../..").SectionDefinition<{
+    type: "colors";
+    content: {
+        colors: {
+            spaces: {
+                hex?: string | undefined;
+                rgb?: string | undefined;
+                cmyk?: string | undefined;
+                pantone?: string | undefined;
+            }[];
+            name?: string | undefined;
+        }[];
+    };
+    options?: {
+        label?: string | undefined;
+        columns?: number | undefined;
+        collapsing?: boolean | undefined;
+        showLabel?: boolean | undefined;
+    } | undefined;
+}>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sections/Colors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Colors/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBA,wBA4BG"}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { ColorItemSchema } from "../../../schemas/shared";
+import Colors from "../../brandguide/Colors";
+const schema = z.object({
+    type: z.literal("colors"),
+    content: z.object({ colors: z.array(ColorItemSchema) }),
+    options: z.object({
+        label: z.string().optional(),
+        columns: z.number().int().min(2).max(4).optional(),
+        collapsing: z.boolean().optional(),
+        showLabel: z.boolean().optional(),
+    }).optional(),
+});
+export default defineSection({
+    type: "colors",
+    label: "Colors",
+    schema,
+    component: ({ content, options, onChange, openModal }) => (_jsx(Colors, { colors: content.content.colors, columns: options?.columns, label: options?.label, collapsing: options?.collapsing, showLabel: options?.showLabel, onChange: onChange ? (c) => onChange(c) : undefined, openModal: openModal })),
+    defaults: () => ({
+        type: "colors",
+        content: { colors: [{ spaces: [{ hex: "#000000" }] }] },
+    }),
+    settings: {
+        columns: {
+            type: "select", label: "Columns", default: "3", coerce: "number",
+            options: [{ label: "2", value: "2" }, { label: "3", value: "3" }, { label: "4", value: "4" }],
+        },
+        label: { type: "text", label: "Label", default: "", placeholder: "Color Section Label" },
+        showLabel: { type: "checkbox", label: "Show label", default: true },
+        collapsing: { type: "checkbox", label: "Collapsing layout", default: false },
+    },
+});

package/dist/components/sections/DoDontList/index.d.ts

@@ -0,0 +1,21 @@
+declare const _default: import("../../..").SectionDefinition<{
+    type: "do_dont";
+    content: {
+        doItems: {
+            label: string;
+            text: string;
+            icon?: string | undefined;
+        }[];
+        dontItems: {
+            label: string;
+            text: string;
+            icon?: string | undefined;
+        }[];
+    };
+    options?: {
+        showLabel?: boolean | undefined;
+        stackText?: boolean | undefined;
+    } | undefined;
+}>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sections/DoDontList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/DoDontList/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,wBAwBG"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import DoDontList from "../../brandguide/DoDontList";
+const DoDontItemSchema = z.object({ label: z.string(), text: z.string(), icon: z.string().optional() });
+const schema = z.object({
+    type: z.literal("do_dont"),
+    content: z.object({
+        doItems: z.array(DoDontItemSchema),
+        dontItems: z.array(DoDontItemSchema),
+    }),
+    options: z.object({
+        showLabel: z.boolean().optional(),
+        stackText: z.boolean().optional(),
+    }).optional(),
+});
+export default defineSection({
+    type: "do_dont",
+    label: "Do / Don't",
+    schema,
+    component: ({ content, options, onChange }) => (_jsx(DoDontList, { doItems: content.content.doItems, dontItems: content.content.dontItems, showLabel: options?.showLabel, stackText: options?.stackText, onChange: onChange ? (c) => onChange(c) : undefined })),
+    defaults: () => ({
+        type: "do_dont",
+        content: {
+            doItems: [{ label: "Do", text: "" }],
+            dontItems: [{ label: "Don't", text: "" }],
+        },
+    }),
+    settings: {
+        showLabel: { type: "checkbox", label: "Show labels", default: true },
+        stackText: { type: "checkbox", label: "Stack label above text", default: false },
+    },
+});

package/dist/components/sections/DoDontMediaGrid/index.d.ts

@@ -0,0 +1,55 @@
+declare const _default: import("../../..").SectionDefinition<{
+    type: "do_dont_grid";
+    content: {
+        columns: number;
+        media: ({
+            imageId: string;
+            type: "image";
+            caption?: string | string[] | undefined;
+            background?: string | undefined;
+            invertFrom?: string | undefined;
+            border?: boolean | undefined;
+            objectFit?: "cover" | "contain" | undefined;
+        } | {
+            imageId: string;
+            type: "video";
+            caption?: string | string[] | undefined;
+            background?: string | undefined;
+            invertFrom?: string | undefined;
+            border?: boolean | undefined;
+            objectFit?: "cover" | "contain" | undefined;
+            poster?: string | undefined;
+            autoplay?: boolean | undefined;
+            loop?: boolean | undefined;
+            muted?: boolean | undefined;
+        } | {
+            imageId: string;
+            type: "doDontImage";
+            doDont: "do" | "dont";
+            caption?: string | string[] | undefined;
+            background?: string | undefined;
+            invertFrom?: string | undefined;
+            border?: boolean | undefined;
+            objectFit?: "cover" | "contain" | undefined;
+        } | {
+            imageId: string;
+            type: "linkedImage";
+            href: string;
+            caption?: string | string[] | undefined;
+            background?: string | undefined;
+            invertFrom?: string | undefined;
+            border?: boolean | undefined;
+            objectFit?: "cover" | "contain" | undefined;
+            target?: string | undefined;
+            linkText?: string | undefined;
+        })[];
+    };
+    options: {
+        square?: boolean | undefined;
+        border?: boolean | undefined;
+        crop?: boolean | undefined;
+        showCaptions?: boolean | undefined;
+    };
+}>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sections/DoDontMediaGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/DoDontMediaGrid/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,wBAqCG"}

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

@@ -0,0 +1,41 @@
+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 DoDontMediaGrid from "../../brandguide/DoDontMediaGrid";
+const schema = z.object({
+    type: z.literal("do_dont_grid"),
+    content: z.object({
+        columns: z.number().int().min(1).max(5),
+        media: z.array(MediaReferenceSchema),
+    }),
+    options: MediaGridOptionsSchema,
+});
+export default defineSection({
+    type: "do_dont_grid",
+    label: "Do / Don't Grid",
+    schema,
+    component: ({ content, options, onChange, openModal }) => (_jsx(DoDontMediaGrid, { 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: "do_dont_grid",
+        options: {},
+        content: {
+            columns: 2,
+            media: [
+                { type: "doDontImage", imageId: "", doDont: "do" },
+                { type: "doDontImage", imageId: "", doDont: "dont" },
+            ],
+        },
+    }),
+    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/IconList/IconList.d.ts

@@ -0,0 +1,20 @@
+import type { SectionContent } from "../../../schemas/sections";
+interface IconListItem {
+    label: string;
+    text: string;
+    icon?: string;
+}
+interface Props {
+    items: IconListItem[];
+    icon?: string | null;
+    showLabel?: boolean;
+    stackText?: boolean;
+    labelClassName?: string;
+    textClassName?: string;
+    iconClassName?: string;
+    onChange?: (content: SectionContent) => void;
+    onItemsChange?: (items: IconListItem[]) => void;
+}
+export default function IconList({ items, icon, showLabel, stackText, labelClassName, textClassName, iconClassName, onChange, onItemsChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconList.d.ts.map

package/dist/components/sections/IconList/IconList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconList.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/IconList/IconList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAShE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,IAAW,EACX,SAAgB,EAChB,SAAiB,EACjB,cAA+C,EAC/C,aAA0C,EAC1C,aAA8B,EAC9B,QAAQ,EACR,aAAa,GACd,EAAE,KAAK,2CAyCP"}

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

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from "react";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { cn } from "../../../lib/cn";
+import { getIcon } from "../../../lib/icons";
+import { useEditableCollection } from "../../primitives/useEditableCollection";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
+import { IconButton } from "../../shared/IconButton";
+import { IconPicker } from "../../primitives/IconPicker";
+export default function IconList({ items, icon = null, showLabel = true, stackText = false, labelClassName = "font-bold text-base-contrast", textClassName = "text-base-contrast-light", iconClassName = "text-primary", onChange, onItemsChange, }) {
+    const isEditMode = !!onChange || !!onItemsChange;
+    const emitItems = useCallback((newItems) => {
+        onChange?.({
+            type: "icon_list",
+            content: { items: newItems },
+            options: { icon, showLabel, stackText },
+        });
+        onItemsChange?.(newItems);
+    }, [onChange, onItemsChange, icon, showLabel, stackText]);
+    if (!isEditMode) {
+        return (_jsx(ViewIconList, { items: items, defaultIcon: icon, showLabel: showLabel, stackText: stackText, labelClassName: labelClassName, textClassName: textClassName, iconClassName: iconClassName }));
+    }
+    return (_jsx(EditIconList, { items: items, defaultIcon: icon, showLabel: showLabel, stackText: stackText, labelClassName: labelClassName, textClassName: textClassName, iconClassName: iconClassName, onItemsChange: emitItems }));
+}
+// ---------------------------------------------------------------------------
+// Resolve the effective icon for an item: per-item override > section default
+// ---------------------------------------------------------------------------
+function resolveIcon(item, defaultIcon) {
+    const id = item.icon ?? defaultIcon;
+    return id ? getIcon(id) : null;
+}
+// ---------------------------------------------------------------------------
+// View mode
+// ---------------------------------------------------------------------------
+function ViewIconList({ items, defaultIcon, showLabel, stackText, labelClassName, textClassName, iconClassName, }) {
+    const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+    return (_jsx("div", { className: "grid gap-4 pb-4", children: items.map((item, i) => {
+            const iconEntry = resolveIcon(item, defaultIcon);
+            return (_jsxs("div", { className: cn("grid gap-x-3", hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1"), children: [hasAnyIcon && (_jsx("div", { "data-testid": "icon-list-icon", className: cn("flex items-start pt-0.5", iconClassName), children: iconEntry && _jsx(iconEntry.icon, { size: 18 }) })), _jsxs("div", { "data-testid": "icon-list-content", className: stackText ? "flex flex-col" : undefined, children: [showLabel && (_jsxs("span", { className: labelClassName, children: [item.label, !stackText && " "] })), _jsx("span", { className: textClassName, children: item.text })] })] }, i));
+        }) }));
+}
+// ---------------------------------------------------------------------------
+// Edit mode
+// ---------------------------------------------------------------------------
+function EditIconList({ items, defaultIcon, showLabel, stackText, labelClassName, textClassName, iconClassName, onItemsChange, }) {
+    const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+        items,
+        onChange: onItemsChange,
+        createItem: () => ({ label: "", text: "" }),
+    });
+    const [dragState, setDragState] = useState({ sourceId: null, targetId: null });
+    const updateItem = useCallback((index, patch) => {
+        const updated = wrappedItems.map((w, i) => i === index ? { ...w.data, ...patch } : w.data);
+        onItemsChange(updated);
+    }, [wrappedItems, onItemsChange]);
+    const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+    return (_jsxs("div", { className: "group/list relative grid gap-4 pb-4", children: [wrappedItems.map((wrapped, index) => (_jsx(EditableRow, { id: wrapped.id, index: index, item: wrapped.data, defaultIcon: defaultIcon, hasAnyIcon: hasAnyIcon, showLabel: showLabel, stackText: stackText, labelClassName: labelClassName, textClassName: textClassName, iconClassName: iconClassName, dragState: dragState, setDragState: setDragState, onReorder: onReorder, onRemove: onRemove, onUpdateItem: (patch) => updateItem(index, patch) }, wrapped.id))), _jsx(TrailingDropZone, { index: wrappedItems.length, dragState: dragState, setDragState: setDragState, onReorder: onReorder }), _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/list:opacity-100" })] }));
+}
+function EditableRow({ id, index, item, defaultIcon, hasAnyIcon, showLabel, stackText, labelClassName, textClassName, iconClassName, dragState, setDragState, onReorder, onRemove, onUpdateItem, }) {
+    const rowRef = useRef(null);
+    const handleRef = useRef(null);
+    const [iconHover, setIconHover] = useState(false);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const iconEntry = resolveIcon(item, defaultIcon);
+    const effectiveIconId = item.icon ?? defaultIcon ?? null;
+    useEffect(() => {
+        const row = rowRef.current;
+        const handle = handleRef.current;
+        if (!row || !handle)
+            return;
+        const cleanupDraggable = draggable({
+            element: handle,
+            getInitialData: () => ({ dragType: "icon-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 === "icon-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 grid gap-x-3", hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1", isDropTarget && "border-t-2 border-primary"), children: [_jsx(IconButton, { ref: handleRef, icon: _jsx(DragHandle, { size: 16 }), label: "Drag to reorder", size: "sm", className: cn("absolute -left-7 top-0 shrink-0 cursor-grab rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast active:cursor-grabbing", iconHover
+                    ? "opacity-0 pointer-events-none"
+                    : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"), tabIndex: -1 }), hasAnyIcon && (_jsxs("div", { className: cn("relative flex items-start pt-0.5", iconClassName), onMouseEnter: () => setIconHover(true), onMouseLeave: () => setIconHover(false), children: [iconEntry ? (_jsx("button", { className: "cursor-pointer transition-opacity hover:opacity-70", "aria-label": "Change icon", onClick: () => setPickerOpen((prev) => !prev), children: _jsx(iconEntry.icon, { size: 18 }) })) : null, iconHover && !pickerOpen && iconEntry && (_jsx("span", { className: "pointer-events-none absolute right-full mr-3 top-0.5 whitespace-nowrap text-xs text-base-contrast-light/80", children: "Edit" })), pickerOpen && (_jsx("div", { className: "absolute top-full left-0 z-50 mt-1", children: _jsx(IconPicker, { selected: effectiveIconId, showRemove: false, onSelect: (newIcon) => {
+                                if (newIcon !== null)
+                                    onUpdateItem({ icon: newIcon });
+                                setPickerOpen(false);
+                                setIconHover(false);
+                            }, onClose: () => {
+                                setPickerOpen(false);
+                                setIconHover(false);
+                            } }) }))] })), _jsxs("div", { className: stackText ? "flex flex-col" : undefined, children: [showLabel && (_jsx(EditablePlainText, { tag: "span", value: item.label, onChange: (label) => onUpdateItem({ label }), isEditMode: true, placeholder: "Label", className: cn(labelClassName, !stackText && "mr-1") })), _jsx(EditablePlainText, { tag: "span", value: item.text, onChange: (text) => onUpdateItem({ text }), isEditMode: true, placeholder: "Text", className: textClassName })] }), _jsx(IconButton, { icon: _jsx(DeleteIcon, { size: 14 }), label: "Delete item", size: "sm", intent: "destructive", onClick: () => onRemove(id), className: "absolute -right-7 top-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100" })] }));
+}
+function TrailingDropZone({ index, dragState, setDragState, onReorder, }) {
+    const ref = useRef(null);
+    const trailingId = "__trailing__";
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const cleanup = dropTargetForElements({
+            element: el,
+            canDrop: ({ source }) => source.data.dragType === "icon-list-row",
+            getData: () => ({ id: trailingId, index }),
+            onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: trailingId })),
+            onDragLeave: () => setDragState((prev) => prev.targetId === trailingId ? { ...prev, targetId: null } : prev),
+            onDrop: ({ source }) => {
+                const fromIndex = source.data.index;
+                if (fromIndex !== index - 1)
+                    onReorder(fromIndex, index - 1);
+            },
+        });
+        return cleanup;
+    }, [index, onReorder, setDragState]);
+    const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
+    return (_jsx("div", { ref: ref, className: cn("absolute bottom-0 left-0 right-0 h-4", isDropTarget && "border-t-2 border-primary") }));
+}

package/dist/components/sections/IconList/IconListSettings.d.ts

@@ -0,0 +1,11 @@
+export declare function IconListSettings({ icon: initialIcon, showLabel: initialShowLabel, stackText: initialStackText, onChange, }: {
+    icon: string | null;
+    showLabel: boolean;
+    stackText: boolean;
+    onChange: (values: {
+        icon: string | null;
+        showLabel: boolean;
+        stackText: boolean;
+    }) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconListSettings.d.ts.map

package/dist/components/sections/IconList/IconListSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconListSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/IconList/IconListSettings.tsx"],"names":[],"mappings":"AAMA,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,SAAS,EAAE,OAAO,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7F,2CAgEA"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Checkbox } from "../../shared/Checkbox";
+import { FormLabel } from "../../shared/FormLabel";
+import { IconPicker } from "../../primitives/IconPicker";
+import { getIcon } from "../../../lib/icons";
+export function IconListSettings({ icon: initialIcon, showLabel: initialShowLabel, stackText: initialStackText, onChange, }) {
+    const [icon, setIcon] = useState(initialIcon);
+    const [showLabel, setShowLabel] = useState(initialShowLabel);
+    const [stackText, setStackText] = useState(initialStackText);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const emit = (overrides) => onChange({ icon, showLabel, stackText, ...overrides });
+    const showIcons = icon !== null;
+    const iconEntry = icon ? getIcon(icon) : null;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx(FormLabel, { htmlFor: "icon-picker-btn", children: "Default Icon" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { id: "icon-picker-btn", className: "cursor-pointer flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light hover:border-primary hover:text-primary", onClick: () => setPickerOpen((prev) => !prev), children: [iconEntry && _jsx(iconEntry.icon, { size: 16 }), _jsx("span", { children: iconEntry?.label ?? "None" })] }), icon && (_jsx("button", { className: "cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast", onClick: () => { setIcon(null); emit({ icon: null }); }, children: "Clear" }))] }), pickerOpen && (_jsx("div", { className: "absolute top-full left-0 z-50 mt-1", children: _jsx(IconPicker, { selected: icon, onSelect: (newIcon) => {
+                                if (newIcon !== null) {
+                                    setIcon(newIcon);
+                                    emit({ icon: newIcon });
+                                }
+                                setPickerOpen(false);
+                            }, onClose: () => setPickerOpen(false) }) }))] }), _jsx(Checkbox, { checked: showLabel, onChange: (v) => { setShowLabel(v); emit({ showLabel: v }); }, label: "Show labels" }), showLabel && (_jsx(Checkbox, { checked: stackText, onChange: (v) => { setStackText(v); emit({ stackText: v }); }, label: "Stack label above text" }))] }));
+}

package/dist/components/sections/IconList/index.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("../../..").SectionDefinition<{
+    type: "icon_list";
+    content: {
+        items: {
+            label: string;
+            text: string;
+            icon?: string | undefined;
+        }[];
+    };
+    options?: {
+        icon?: string | null | undefined;
+        showLabel?: boolean | undefined;
+        stackText?: boolean | undefined;
+    } | undefined;
+}>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sections/IconList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/IconList/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBA,wBAkBG"}

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

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

@@ -0,0 +1,8 @@
+declare const _default: import("../../..").SectionDefinition<{
+    type: "link_heading";
+    content: {
+        heading: string;
+    };
+}>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sections/LinkHeading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/LinkHeading/index.tsx"],"names":[],"mappings":";;;;;;AASA,wBAcG"}

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

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

@@ -0,0 +1,17 @@
+import type { MediaReference } from "../../../schemas/shared";
+import type { SectionContent } from "../../../schemas/sections";
+import type { ReactNode } from "react";
+interface Props {
+    media: MediaReference[];
+    columns: number;
+    square?: boolean;
+    border?: boolean;
+    crop?: boolean;
+    showCaptions?: boolean;
+    sectionType?: string;
+    onChange?: (content: SectionContent) => void;
+    openModal?: (title: string, content: ReactNode) => void;
+}
+export default function MediaGrid({ media, columns, square, border, crop, showCaptions, sectionType, onChange, openModal }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MediaGrid.d.ts.map

package/dist/components/sections/MediaGrid/MediaGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/MediaGrid/MediaGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAOhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,2CAgChI"}