@drawnagency/primitives 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Toggle.tsx"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,2CAwB9E"}

package/dist/components/shared/Toggle.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn";
+export function Toggle({ checked, onChange, label, disabled, className }) {
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": label, disabled: disabled, onClick: () => onChange(!checked), className: cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors", checked ? "bg-primary" : "bg-base-200", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), children: _jsx("span", { className: cn("inline-block h-4 w-4 transform rounded-full bg-base shadow transition", checked ? "translate-x-[18px]" : "translate-x-0.5") }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+export declare function Tooltip({ content, children, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Kbd({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,YAAY;IACpB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,YAAY,2CAcrE;AAED,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAExD"}

package/dist/components/shared/Tooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn";
+export function Tooltip({ content, children, className }) {
+    return (_jsxs("div", { className: cn("group/tooltip relative inline-flex", className), children: [children, _jsx("span", { className: "pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100", role: "tooltip", children: _jsx("span", { className: "block whitespace-nowrap rounded bg-tooltip px-2 py-1 text-center text-xs leading-relaxed text-tooltip-muted", children: content }) })] }));
+}
+export function Kbd({ children }) {
+    return _jsx("strong", { className: "text-tooltip-contrast", children: children });
+}

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

@@ -0,0 +1,17 @@
+export declare function DragHandle({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AddIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RemoveIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DeleteIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsIcon({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export { GripVertical, Plus, Trash2, X, Settings } from "lucide-react";
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/shared/icons.tsx"],"names":[],"mappings":"AAOA,wBAAgB,UAAU,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAE1D;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAEvD;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAE1D;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAE1D;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAE5D;AAED,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/shared/icons.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Shared icon button presets used across editor chrome.
+ * Each returns a styled element ready to drop into any context.
+ * Sizing and visibility are left to the consumer via className.
+ */
+import { GripVertical, Plus, Trash2, X, Settings } from "lucide-react";
+export function DragHandle({ size = 16 }) {
+    return _jsx(GripVertical, { size: size });
+}
+export function AddIcon({ size = 14 }) {
+    return _jsx(Plus, { size: size });
+}
+export function RemoveIcon({ size = 14 }) {
+    return _jsx(X, { size: size });
+}
+export function DeleteIcon({ size = 14 }) {
+    return _jsx(Trash2, { size: size });
+}
+export function SettingsIcon({ size = 14 }) {
+    return _jsx(Settings, { size: size });
+}
+export { GripVertical, Plus, Trash2, X, Settings } from "lucide-react";

package/dist/components/shell/AudienceAddForm.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    onSubmit: (data: {
+        displayName: string;
+        color: string | null;
+        password: string;
+    }) => Promise<void>;
+    onCancel: () => void;
+}
+export declare function AudienceAddForm({ onSubmit, onCancel }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AudienceAddForm.d.ts.map

package/dist/components/shell/AudienceAddForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudienceAddForm.d.ts","sourceRoot":"","sources":["../../../src/components/shell/AudienceAddForm.tsx"],"names":[],"mappings":"AAOA,UAAU,KAAK;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnG,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA+E5D"}

package/dist/components/shell/AudienceAddForm.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AudienceColorSchema } from "../../schemas/audience";
+import { Input } from "../shared/Input";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { ColorPicker } from "../shared/ColorPicker";
+const DEFAULT_COLOR = "#3b82f6";
+export function AudienceAddForm({ onSubmit, onCancel }) {
+    const [name, setName] = useState("");
+    const [color, setColor] = useState(DEFAULT_COLOR);
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(null);
+    const [submitting, setSubmitting] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (name.trim().length === 0) {
+            setError("Name is required");
+            return;
+        }
+        const colorResult = AudienceColorSchema.safeParse(color);
+        if (!colorResult.success) {
+            setError("Invalid color");
+            return;
+        }
+        if (password.length === 0) {
+            setError("Password is required");
+            return;
+        }
+        setSubmitting(true);
+        try {
+            await onSubmit({ displayName: name, color, password });
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : "Add failed");
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit, autoComplete: "off", className: "space-y-3 rounded border border-base-200 px-3 py-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(ColorPicker, { value: color, onChange: setColor, className: "mt-[1.625rem]" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { label: "Name", value: name, onChange: setName }), _jsx(PasswordInput, { label: "Password", value: password, onChange: setPassword, autoComplete: "new-password", showToggle: true })] })] }), error && _jsx("p", { className: "text-xs text-red-600", children: error }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: submitting, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", isLoading: submitting, loadingLabel: "Adding...", children: "Add" })] })] }));
+}

package/dist/components/shell/AudienceRow.d.ts

@@ -0,0 +1,15 @@
+import type { Audience } from "../../auth/types";
+interface Props {
+    audience: Audience;
+    isDefault: boolean;
+    canMutate: boolean;
+    onSave: (patch: {
+        displayName?: string;
+        color?: string | null;
+        password?: string;
+    }) => Promise<void>;
+    onDelete: () => Promise<void>;
+}
+export declare function AudienceRow({ audience, isDefault, canMutate, onSave, onDelete, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AudienceRow.d.ts.map

package/dist/components/shell/AudienceRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudienceRow.d.ts","sourceRoot":"","sources":["../../../src/components/shell/AudienceRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMjD,UAAU,KAAK;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrG,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/B;AAID,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,KAAK,2CAmJP"}

package/dist/components/shell/AudienceRow.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Input } from "../shared/Input";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { ColorPicker } from "../shared/ColorPicker";
+const PLACEHOLDER_COLOR = "#94a3b8";
+export function AudienceRow({ audience, isDefault, canMutate, onSave, onDelete, }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [draftDisplayName, setDraftDisplayName] = useState(audience.displayName);
+    const [draftColor, setDraftColor] = useState(audience.color ?? PLACEHOLDER_COLOR);
+    const [draftPassword, setDraftPassword] = useState("");
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    function startEdit() {
+        setIsEditing(true);
+        setDraftColor(audience.color ?? PLACEHOLDER_COLOR);
+        setDraftDisplayName(audience.displayName);
+        setDraftPassword("");
+        setError(null);
+    }
+    function cancelEdit() {
+        setIsEditing(false);
+        setError(null);
+    }
+    async function save() {
+        setError(null);
+        setSaving(true);
+        const patch = {};
+        if (draftDisplayName.trim().length === 0) {
+            setError("Name is required");
+            setSaving(false);
+            return;
+        }
+        if (draftDisplayName !== audience.displayName) {
+            patch.displayName = draftDisplayName;
+        }
+        if (draftColor !== (audience.color ?? PLACEHOLDER_COLOR)) {
+            patch.color = draftColor;
+        }
+        if (draftPassword.length > 0) {
+            patch.password = draftPassword;
+        }
+        if (Object.keys(patch).length === 0) {
+            setIsEditing(false);
+            setSaving(false);
+            return;
+        }
+        try {
+            await onSave(patch);
+            setIsEditing(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : "Save failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    async function remove() {
+        if (!confirm(`Remove audience "${audience.displayName}"?`))
+            return;
+        try {
+            await onDelete();
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : "Delete failed");
+        }
+    }
+    if (isEditing) {
+        return (_jsxs("div", { className: "space-y-3 rounded border border-base-200 px-3 py-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(ColorPicker, { value: draftColor, onChange: setDraftColor, className: "mt-[1.625rem]" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { label: "Display name", value: draftDisplayName, onChange: setDraftDisplayName }), _jsx(PasswordInput, { label: "New password", value: draftPassword, onChange: setDraftPassword, autoComplete: "new-password", placeholder: audience.hasPassword ? "Leave blank to keep current" : "Required", showToggle: true }), _jsx("span", { className: "block text-[11px] text-base-contrast-light", children: "Passwords are hashed \u2014 the existing one can't be recovered, only replaced." })] })] }), error && _jsx("p", { className: "text-xs text-red-600", children: error }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: cancelEdit, disabled: saving, children: "Cancel" }), _jsx(Button, { type: "button", variant: "primary", onClick: save, isLoading: saving, loadingLabel: "Saving...", children: "Save" })] })] }));
+    }
+    return (_jsx("div", { className: "rounded border border-base-200 px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "inline-block h-4 w-4 rounded-full border border-base-200", style: { backgroundColor: audience.color ?? PLACEHOLDER_COLOR } }), _jsxs("span", { className: "flex flex-1 items-center gap-2 text-sm text-base-contrast", children: [audience.displayName, isDefault && (_jsx("span", { className: "rounded bg-base-accent px-1.5 py-0.5 text-xs text-base-contrast-light", children: "Default" }))] }), audience.hasPassword ? (_jsx("span", { "aria-label": "Password is set", title: "Passwords are hashed and can't be shown. Edit to set a new one.", className: "text-xs tracking-widest text-base-contrast-light", children: "\u2022\u2022\u2022\u2022" })) : canMutate ? (_jsx(Button, { variant: "ghost", onClick: startEdit, children: "Set password" })) : null, canMutate && (_jsx(Button, { variant: "ghost", onClick: startEdit, children: "Edit" })), canMutate && !isDefault && (_jsx(Button, { variant: "ghost", tone: "destructive", onClick: remove, children: "Remove" }))] }) }));
+}

package/dist/components/shell/EditorContext.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+interface EditorContextValue {
+    isEditMode: boolean;
+    showAllChrome: boolean;
+    toggleEditMode: () => void;
+    toggleShowAllChrome: () => void;
+}
+interface EditorProviderProps {
+    children: ReactNode;
+}
+export declare function EditorProvider({ children }: EditorProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useEditorContext(): EditorContextValue;
+export {};
+//# sourceMappingURL=EditorContext.d.ts.map

package/dist/components/shell/EditorContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzF,UAAU,kBAAkB;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAID,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAmB/D;AAED,wBAAgB,gBAAgB,IAAI,kBAAkB,CAMrD"}

package/dist/components/shell/EditorContext.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from "react";
+import { editModeEvent } from "../../lib/events";
+const EditorContext = createContext(null);
+export function EditorProvider({ children }) {
+    const [isEditMode, setIsEditMode] = useState(true);
+    const [showAllChrome, setShowAllChrome] = useState(false);
+    const toggleEditMode = useCallback(() => {
+        setIsEditMode((prev) => {
+            const next = !prev;
+            editModeEvent.dispatch({ isEditMode: next });
+            return next;
+        });
+    }, []);
+    const toggleShowAllChrome = useCallback(() => setShowAllChrome((prev) => !prev), []);
+    return (_jsx(EditorContext.Provider, { value: { isEditMode, showAllChrome, toggleEditMode, toggleShowAllChrome }, children: children }));
+}
+export function useEditorContext() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error("useEditorContext must be used within an EditorProvider");
+    }
+    return context;
+}

package/dist/components/shell/EditorLoginForm.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    capabilities: {
+        oauth: boolean;
+        emailPassword: boolean;
+        passwordOnly: boolean;
+        userManagement: boolean;
+    };
+    oauthProviders?: ("google" | "github")[];
+    next?: string | null;
+}
+export declare function EditorLoginForm({ capabilities, oauthProviders, next }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorLoginForm.d.ts.map

package/dist/components/shell/EditorLoginForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLoginForm.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorLoginForm.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAAE,YAAY,EAAE,cAAmB,EAAE,IAAI,EAAE,EAAE,KAAK,2CAiHjF"}

package/dist/components/shell/EditorLoginForm.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { safeRedirect } from "../../lib/safeRedirect";
+export function EditorLoginForm({ capabilities, oauthProviders = [], next }) {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    async function handlePasswordSubmit(e) {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        const base = capabilities.passwordOnly
+            ? { type: "password", password }
+            : { type: "email", email, password };
+        const body = next ? { ...base, next } : base;
+        try {
+            const response = await fetch("/api/auth/sign-in", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body),
+            });
+            if (!response.ok) {
+                const data = await response.json().catch(() => ({}));
+                setError(data.error || "Sign-in failed");
+                return;
+            }
+            const data = await response.json().catch(() => ({}));
+            window.location.assign(safeRedirect(data.redirectTo, "/edit"));
+        }
+        catch {
+            setError("Network error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function handleOAuth(provider) {
+        // OAuth is handled client-side via Supabase SDK
+        // Implementation depends on Supabase adapter (Task 11)
+        // For now, this is a placeholder that will be wired up later
+    }
+    return (_jsxs("div", { className: "mx-auto max-w-sm space-y-6", children: [capabilities.oauth && oauthProviders.length > 0 && (_jsxs("div", { className: "space-y-2", children: [oauthProviders.map((provider) => (_jsxs(Button, { type: "button", variant: "secondary", size: "md", onClick: () => handleOAuth(provider), className: "w-full", children: ["Continue with ", provider.charAt(0).toUpperCase() + provider.slice(1)] }, provider))), _jsxs("div", { className: "relative py-2", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "w-full border-t border-base-200" }) }), _jsx("div", { className: "relative flex justify-center text-xs", children: _jsx("span", { className: "bg-base px-2 text-base-contrast-light", children: "or" }) })] })] })), _jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-4", children: [capabilities.emailPassword && (_jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "mb-1.5 block text-sm font-medium text-base-contrast", children: "Email" }), _jsx("input", { id: "email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", className: "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" })] })), _jsx(PasswordInput, { label: "Password", value: password, onChange: setPassword, autoComplete: "current-password" }), error && (_jsx("p", { className: "text-sm text-red-600", children: error })), _jsx(Button, { type: "submit", variant: "primary", size: "md", isLoading: loading, loadingLabel: "Signing in...", className: "w-full", children: "Sign In" })] })] }));
+}

package/dist/components/shell/EditorModal.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+interface EditorModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    blocking?: boolean;
+    size?: "standard" | "large" | "settings";
+    noPadding?: boolean;
+    children: ReactNode;
+}
+export declare function EditorModal({ isOpen, onClose, title, blocking, size, noPadding, children }: EditorModalProps): import("react").ReactPortal | null;
+export {};
+//# sourceMappingURL=EditorModal.d.ts.map

package/dist/components/shell/EditorModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOjE,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAgB,EAAE,IAAiB,EAAE,SAAiB,EAAE,QAAQ,EAAE,EAAE,gBAAgB,sCA2EzI"}

package/dist/components/shell/EditorModal.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+import { RemoveIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { cn } from "../../lib/cn";
+export function EditorModal({ isOpen, onClose, title, blocking = false, size = "standard", noPadding = false, children }) {
+    const panelRef = useRef(null);
+    const titleId = useId();
+    useFocusTrap(panelRef, isOpen);
+    useEffect(() => {
+        if (!isOpen || blocking)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, blocking, onClose]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const original = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = original;
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return createPortal(_jsx("div", { "data-testid": "modal-backdrop", className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onMouseDown: blocking
+            ? undefined
+            : (e) => {
+                if (e.target === e.currentTarget)
+                    onClose();
+            }, children: _jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, className: cn("mx-4 w-full rounded-lg bg-base shadow-lg", size === "large"
+                ? "max-w-[1400px] max-h-[900px] h-[90vh] flex flex-col"
+                : size === "settings"
+                    ? "max-w-lg flex flex-col min-h-[32rem] max-h-[calc(100vh-4rem)]"
+                    : "max-w-md"), children: [_jsxs("div", { className: "flex items-center justify-between border-b border-base-200 px-6 py-4", children: [_jsx("h3", { id: titleId, className: "text-lg font-semibold text-base-contrast", children: title }), !blocking && (_jsx(IconButton, { icon: _jsx(RemoveIcon, { size: 18 }), label: "Close modal", size: "lg", onClick: onClose, className: "rounded-md hover:bg-base-accent" }))] }), _jsx("div", { className: cn(!noPadding && "px-6 py-4", size === "large" && "flex-1 overflow-y-auto", size === "settings" && "flex-1 flex flex-col overflow-hidden"), children: children })] }) }), document.body);
+}

package/dist/components/shell/EditorModalContext.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+interface ModalState {
+    title: string;
+    content: ReactNode;
+}
+interface EditorModalContextValue {
+    modalState: ModalState | null;
+    openModal: (title: string, content: ReactNode) => void;
+    closeModal: () => void;
+}
+export declare function EditorModalProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useEditorModal(): EditorModalContextValue;
+export {};
+//# sourceMappingURL=EditorModalContext.d.ts.map

package/dist/components/shell/EditorModalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorModalContext.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorModalContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAID,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAgBxE;AAED,wBAAgB,cAAc,IAAI,uBAAuB,CAMxD"}

package/dist/components/shell/EditorModalContext.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from "react";
+const EditorModalContext = createContext(null);
+export function EditorModalProvider({ children }) {
+    const [modalState, setModalState] = useState(null);
+    const openModal = useCallback((title, content) => {
+        setModalState({ title, content });
+    }, []);
+    const closeModal = useCallback(() => {
+        setModalState(null);
+    }, []);
+    return (_jsx(EditorModalContext.Provider, { value: { modalState, openModal, closeModal }, children: children }));
+}
+export function useEditorModal() {
+    const context = useContext(EditorModalContext);
+    if (!context) {
+        throw new Error("useEditorModal must be used within an EditorModalProvider");
+    }
+    return context;
+}

package/dist/components/shell/EditorShell.d.ts

@@ -0,0 +1,22 @@
+import type { Audience } from "../../auth/types";
+import "../sections/register";
+export { useMediaLibrary } from "./MediaLibraryContext";
+interface Props {
+    headSha: string;
+    siteId: string;
+    audiences: Audience[];
+    capabilities: {
+        oauth: boolean;
+        emailPassword: boolean;
+        passwordOnly: boolean;
+        userManagement: boolean;
+        audienceManagement: boolean;
+        passwordToggle: boolean;
+    };
+    currentUser: {
+        email: string;
+        role: "owner" | "editor";
+    } | null;
+}
+export default function EditorShell({ headSha, siteId, audiences: initialAudiences, capabilities, currentUser, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorShell.d.ts.map

package/dist/components/shell/EditorShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAYjD,OAAO,sBAAsB,CAAC;AA8B9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAcxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CA+hBP"}