@drawnagency/primitives 0.1.0

package/dist/components/shared/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ColorPicker.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAe,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAkB5F"}

package/dist/components/shared/ColorPicker.js

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

@@ -0,0 +1,24 @@
+import { Component, type ReactNode, type ErrorInfo } from "react";
+interface ErrorBoundaryProps {
+    /** Shown in the fallback UI to help identify which section failed */
+    label?: string;
+    children: ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * 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 declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    private handleRetry;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/shared/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,UAAU,kBAAkB;IAC1B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACtE,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS;IAQ/C,OAAO,CAAC,WAAW,CAEjB;IAEF,MAAM;CAiDP"}

package/dist/components/shared/ErrorBoundary.js

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

@@ -0,0 +1,8 @@
+interface FontPickerProps {
+    label: string;
+    value: string;
+    onChange: (family: string) => void;
+}
+export declare function FontPicker({ label, value, onChange }: FontPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FontPicker.d.ts.map

package/dist/components/shared/FontPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontPicker.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FontPicker.tsx"],"names":[],"mappings":"AAYA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqBD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAsQrE"}

package/dist/components/shared/FontPicker.js

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

@@ -0,0 +1,8 @@
+interface FormLabelProps {
+    htmlFor?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function FormLabel({ htmlFor, children, className }: FormLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FormLabel.d.ts.map

package/dist/components/shared/FormLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FormLabel.tsx"],"names":[],"mappings":"AAEA,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CASzE"}

package/dist/components/shared/FormLabel.js

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

package/dist/components/shared/IconButton.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+type Size = "sm" | "md" | "lg";
+type Intent = "default" | "destructive" | "primary";
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: ReactNode;
+    label: string;
+    size?: Size;
+    intent?: Intent;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/shared/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/shared/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/B,KAAK,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;AAEpD,UAAU,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACvE,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,eAAO,MAAM,UAAU,+GAmBtB,CAAC"}

package/dist/components/shared/IconButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/cn";
+const sizeClasses = {
+    sm: "h-chrome-sm w-chrome-sm",
+    md: "h-chrome-md w-chrome-md",
+    lg: "h-chrome-lg w-chrome-lg",
+};
+const intentClasses = {
+    default: "text-base-contrast-light hover:text-base-contrast",
+    destructive: "text-destructive hover:text-destructive-hover",
+    primary: "text-primary/60 hover:text-primary",
+};
+export const IconButton = forwardRef(function IconButton({ icon, label, size = "md", intent = "default", className, ...rest }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", className: cn("cursor-pointer flex items-center justify-center rounded transition-colors", sizeClasses[size], intentClasses[intent], className), "aria-label": label, ...rest, children: icon }));
+});

package/dist/components/shared/Input.d.ts

@@ -0,0 +1,8 @@
+import { type InputHTMLAttributes } from "react";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    label: string;
+    onChange: (value: string) => void;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/shared/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIpE,UAAU,UAAW,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAClF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,KAAK,yGAwBhB,CAAC"}

package/dist/components/shared/Input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+export const Input = forwardRef(function Input({ label, value, onChange, type = "text", className, disabled, ...rest }, ref) {
+    const id = useId();
+    return (_jsxs("div", { className: className, children: [_jsx(FormLabel, { htmlFor: id, children: label }), _jsx("input", { ref: ref, id: id, type: type, value: value, onChange: (e) => onChange(e.target.value), disabled: disabled, className: cn("w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast", "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast", disabled && "cursor-not-allowed opacity-50"), ...rest })] }));
+});

package/dist/components/shared/Navigation.d.ts

@@ -0,0 +1,9 @@
+import type { NavItem } from "../../lib/nav";
+interface Props {
+    navLinks: NavItem[];
+    siteName: string;
+    darkMode: "light" | "dark" | "optional";
+}
+export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Navigation.d.ts.map

package/dist/components/shared/Navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Navigation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAI7C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAsL1F"}

package/dist/components/shared/Navigation.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { cn } from "../../lib/cn";
+import { Toggle } from "./Toggle";
+import { editModeEvent, navChangeEvent, darkModeEvent } from "../../lib/events";
+import { useActiveHeadings } from "../../hooks/useActiveHeadings";
+export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isEditMode, setIsEditMode] = useState(false);
+    const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
+    const [isDark, setIsDark] = useState(false);
+    const [navLinks, setNavLinks] = useState(initialNavLinks);
+    useEffect(() => {
+        const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
+        const unlistenNav = navChangeEvent.listen((links) => setNavLinks(links));
+        const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode));
+        return () => { unlistenEdit(); unlistenNav(); unlistenDark(); };
+    }, []);
+    useEffect(() => {
+        const root = document.documentElement;
+        setIsDark(root.classList.contains("dark"));
+        const observer = new MutationObserver(() => {
+            setIsDark(root.classList.contains("dark"));
+        });
+        observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+        return () => observer.disconnect();
+    }, []);
+    const handleThemeToggle = useCallback((next) => {
+        const root = document.documentElement;
+        root.classList.add("theme-changing");
+        root.classList.toggle("dark", next);
+        localStorage.setItem("theme", next ? "dark" : "light");
+        setTimeout(() => root.classList.remove("theme-changing"), 200);
+    }, []);
+    // Build ID maps for scroll tracking
+    const parentIds = navLinks.map((item) => item.href.replace("#", ""));
+    const childIdsByParent = {};
+    const grandchildIdsByChild = {};
+    for (const parent of navLinks) {
+        const pid = parent.href.replace("#", "");
+        childIdsByParent[pid] = parent.children.map((c) => c.href.replace("#", ""));
+        for (const child of parent.children) {
+            const cid = child.href.replace("#", "");
+            grandchildIdsByChild[cid] = child.children.map((gc) => gc.href.replace("#", ""));
+        }
+    }
+    const { activeParentId, activeChildId, activeGrandchildId, setActiveSection } = useActiveHeadings(parentIds, childIdsByParent, grandchildIdsByChild);
+    const handleNav = useCallback((href) => {
+        const id = href.replace("#", "");
+        const el = document.getElementById(id);
+        if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+            setActiveSection(id);
+        }
+        setIsOpen(false);
+    }, [setActiveSection]);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "fixed top-0 left-0 right-0 z-50 flex h-16 items-center justify-between bg-base px-4 lg:hidden", children: [_jsx("span", { className: "text-lg font-bold text-primary", children: siteName }), _jsx("button", { onClick: () => setIsOpen(!isOpen), className: "cursor-pointer p-2 text-base-contrast", "aria-label": "Toggle navigation", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: isOpen
+                                ? _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+                                : _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })] }), isOpen && (_jsx("div", { className: "fixed inset-0 z-40 bg-black/50 lg:hidden", onClick: () => setIsOpen(false) })), _jsxs("nav", { className: cn("fixed top-0 left-0 z-40 h-full w-64 overflow-y-auto bg-base pt-16 transition-transform lg:translate-x-0", isOpen ? "translate-x-0" : "-translate-x-full"), children: [_jsx("div", { className: "hidden px-4 py-4 lg:block", children: _jsx("span", { className: "text-lg font-bold text-primary", children: siteName }) }), _jsx("ul", { className: "space-y-1 px-4 py-2", children: navLinks.map((parent) => {
+                            const pid = parent.href.replace("#", "");
+                            const isActiveParent = activeParentId === pid;
+                            return (_jsxs("li", { children: [_jsx("button", { onClick: () => handleNav(parent.href), className: cn("cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors", isActiveParent ? "text-primary" : "text-base-contrast hover:text-primary", !isEditMode && parent.status && parent.status !== "published" && "opacity-50"), children: parent.label }), isActiveParent && parent.children.length > 0 && (_jsx("ul", { className: "ml-3 mt-1 space-y-1 border-l border-base-200 pl-3", children: parent.children.map((child) => {
+                                            const cid = child.href.replace("#", "");
+                                            const isActiveChild = activeChildId === cid;
+                                            return (_jsxs("li", { children: [_jsx("button", { onClick: () => handleNav(child.href), className: cn("cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors", isActiveChild ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary", !isEditMode && child.status && child.status !== "published" && "opacity-50"), children: child.label }), isActiveChild && child.children.length > 0 && (_jsx("ul", { className: "ml-3 mt-1 space-y-1", children: child.children.map((gc) => {
+                                                            const gid = gc.href.replace("#", "");
+                                                            return (_jsx("li", { children: _jsx("button", { onClick: () => handleNav(gc.href), className: cn("cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors", activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary", !isEditMode && gc.status && gc.status !== "published" && "opacity-50"), children: gc.label }) }, gid));
+                                                        }) }))] }, cid));
+                                        }) }))] }, pid));
+                        }) }), currentDarkMode === "optional" && (_jsx("div", { className: "mt-auto border-t border-base-200 px-4 py-4", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-base-contrast-light", children: [_jsx("span", { className: cn(!isDark && "text-base-contrast"), children: "Light" }), _jsx(Toggle, { checked: isDark, onChange: handleThemeToggle, label: "Toggle dark mode" }), _jsx("span", { className: cn(isDark && "text-base-contrast"), children: "Dark" })] }) }))] })] }));
+}

package/dist/components/shared/PasswordInput.d.ts

@@ -0,0 +1,13 @@
+interface PasswordInputProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    autoComplete: "current-password" | "new-password";
+    placeholder?: string;
+    disabled?: boolean;
+    showToggle?: boolean;
+    className?: string;
+}
+export declare function PasswordInput({ label, value, onChange, autoComplete, placeholder, disabled, showToggle, className, }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/components/shared/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/components/shared/PasswordInput.tsx"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,kBAAkB,GAAG,cAAc,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,UAAkB,EAClB,SAAS,GACV,EAAE,kBAAkB,2CAqCpB"}

package/dist/components/shared/PasswordInput.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { IconButton } from "./IconButton";
+import { FormLabel } from "./FormLabel";
+export function PasswordInput({ label, value, onChange, autoComplete, placeholder, disabled, showToggle = false, className, }) {
+    const id = useId();
+    const [revealed, setRevealed] = useState(false);
+    return (_jsxs("div", { className: className, children: [_jsx(FormLabel, { htmlFor: id, children: label }), _jsxs("div", { className: "relative", children: [_jsx("input", { id: id, type: revealed ? "text" : "password", value: value, onChange: (e) => onChange(e.target.value), autoComplete: autoComplete, placeholder: placeholder, disabled: disabled, className: cn("w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast", "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast", showToggle && "pr-9", disabled && "cursor-not-allowed opacity-50") }), showToggle && (_jsx(IconButton, { icon: revealed ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }), label: revealed ? "Hide password" : "Show password", size: "sm", "aria-pressed": revealed, disabled: disabled, onClick: () => setRevealed((v) => !v), className: "absolute inset-y-0 right-0 my-auto px-2 disabled:cursor-not-allowed disabled:opacity-50" }))] })] }));
+}

package/dist/components/shared/Popover.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type RefObject } from "react";
+interface PopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    anchorRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    align?: "start" | "end";
+    className?: string;
+}
+export declare function Popover({ isOpen, onClose, anchorRef, children, align, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/shared/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1E,UAAU,YAAY;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAe,EACf,SAAS,GACV,EAAE,YAAY,kDAwCd"}

package/dist/components/shared/Popover.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { cn } from "../../lib/cn";
+export function Popover({ isOpen, onClose, anchorRef, children, align = "start", className, }) {
+    const panelRef = useRef(null);
+    useFocusTrap(panelRef, isOpen);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function onKeyDown(e) {
+            if (e.key === "Escape")
+                onClose();
+        }
+        function onMouseDown(e) {
+            const target = e.target;
+            if (panelRef.current?.contains(target))
+                return;
+            if (anchorRef.current?.contains(target))
+                return;
+            onClose();
+        }
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("mousedown", onMouseDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("mousedown", onMouseDown);
+        };
+    }, [isOpen, onClose, anchorRef]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "false", className: cn("absolute top-full z-50 mt-1 rounded-md border border-base-200 bg-base shadow-lg", align === "end" ? "right-0" : "left-0", className), children: children }));
+}

package/dist/components/shared/PopoverItem.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+interface PopoverItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+}
+export declare const PopoverItem: import("react").ForwardRefExoticComponent<PopoverItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=PopoverItem.d.ts.map

package/dist/components/shared/PopoverItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverItem.d.ts","sourceRoot":"","sources":["../../../src/components/shared/PopoverItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,UAAU,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,gHAgBvB,CAAC"}

package/dist/components/shared/PopoverItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/cn";
+export const PopoverItem = forwardRef(function PopoverItem({ className, children, ...rest }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", className: cn("flex w-full cursor-pointer items-center gap-3 px-3 py-1.5 text-left hover:bg-base-accent", className), ...rest, children: children }));
+});

package/dist/components/shared/Select.d.ts

@@ -0,0 +1,16 @@
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: SelectOption[];
+    disabled?: boolean;
+    className?: string;
+    selectClassName?: string;
+}
+export declare function Select({ label, value, onChange, options, disabled, className, selectClassName, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/shared/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Select.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,eAAe,GAChB,EAAE,WAAW,2CA+Bb"}

package/dist/components/shared/Select.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+export function Select({ label, value, onChange, options, disabled, className, selectClassName, }) {
+    const id = useId();
+    return (_jsxs("div", { className: className, children: [label && _jsx(FormLabel, { htmlFor: id, children: label }), _jsxs("div", { className: "relative", children: [_jsx("select", { id: id, value: value, onChange: (e) => onChange(e.target.value), disabled: disabled, className: cn("w-full appearance-none 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", disabled && "cursor-not-allowed opacity-50", selectClassName), children: options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) }), _jsx(ChevronDown, { size: 14, className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light" })] })] }));
+}

package/dist/components/shared/Textarea.d.ts

@@ -0,0 +1,8 @@
+import { type TextareaHTMLAttributes } from "react";
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    label: string;
+    onChange: (value: string) => void;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/shared/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAIvE,UAAU,aAAc,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,QAAQ,+GAwBnB,CAAC"}

package/dist/components/shared/Textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+export const Textarea = forwardRef(function Textarea({ label, value, onChange, rows = 3, className, disabled, ...rest }, ref) {
+    const id = useId();
+    return (_jsxs("div", { className: className, children: [_jsx(FormLabel, { htmlFor: id, children: label }), _jsx("textarea", { ref: ref, id: id, value: value, onChange: (e) => onChange(e.target.value), rows: rows, disabled: disabled, className: cn("w-full resize-none rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast", "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast", disabled && "cursor-not-allowed opacity-50"), ...rest })] }));
+});

package/dist/components/shared/Toggle.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function Toggle({ checked, onChange, label, disabled, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Toggle.d.ts.map