@drawnagency/primitives 0.1.0

package/README.md

@@ -0,0 +1,28 @@
+# @drawnagency/primitives
+
+Schemas, components, utilities, and auth interfaces for the Drawn brand portal framework.
+
+## Installation
+
+```bash
+npm install @drawnagency/primitives
+```
+
+## What's included
+
+- **Schemas** — Zod schemas for sections, site config, media, and audiences
+- **Components** — React components for section rendering, navigation, and editor UI
+- **Auth** — `AuthProvider` interface and session management utilities
+- **Media** — Client-side image/video processing pipeline
+
+## Usage
+
+```typescript
+import { IndexSchema, SiteConfigSchema } from "@drawnagency/primitives/schemas";
+import { generateNavLinks } from "@drawnagency/primitives/lib";
+import type { AuthProvider } from "@drawnagency/primitives/auth";
+```
+
+## Part of the Drawn Portal Framework
+
+Built by [Drawn Agency](https://drawnagency.com). See [@drawnagency/core](https://www.npmjs.com/package/@drawnagency/core) for the full framework.

package/dist/auth/cookies.d.ts

@@ -0,0 +1,8 @@
+import type { Session, CookieLike } from "./types";
+export declare const SESSION_COOKIE = "bp-session";
+export declare const AUDIENCE_COOKIE = "bp-audience";
+export declare const SESSION_MAX_AGE_SECONDS: number;
+export declare function signSessionToken(session: Session): Promise<string>;
+export declare function verifySessionToken(token: string): Promise<Session | null>;
+export declare function setSessionCookie(cookies: CookieLike, token: string, isProduction: boolean): void;
+//# sourceMappingURL=cookies.d.ts.map

package/dist/auth/cookies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cookies.d.ts","sourceRoot":"","sources":["../../src/auth/cookies.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGnD,eAAO,MAAM,cAAc,eAAe,CAAC;AAC3C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,uBAAuB,QAAe,CAAC;AAEpD,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAWxE;AAED,wBAAsB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAe/E;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,OAAO,GACpB,IAAI,CAQN"}

package/dist/auth/cookies.js

@@ -0,0 +1,44 @@
+import * as jose from "jose";
+import { requireSessionSecret } from "./security";
+export const SESSION_COOKIE = "bp-session";
+export const AUDIENCE_COOKIE = "bp-audience";
+export const SESSION_MAX_AGE_SECONDS = 60 * 60 * 24;
+export async function signSessionToken(session) {
+    return new jose.SignJWT({
+        userId: session.userId,
+        email: session.email,
+        role: session.role,
+        siteId: session.siteId,
+    })
+        .setProtectedHeader({ alg: "HS256" })
+        .setExpirationTime(`${SESSION_MAX_AGE_SECONDS}s`)
+        .setIssuedAt()
+        .sign(requireSessionSecret());
+}
+export async function verifySessionToken(token) {
+    const secret = requireSessionSecret(); // throws on misconfiguration, before try
+    try {
+        const { payload } = await jose.jwtVerify(token, secret);
+        const role = payload.role;
+        if (role !== "owner" && role !== "editor")
+            return null;
+        return {
+            userId: payload.userId ?? null,
+            email: payload.email ?? null,
+            role,
+            siteId: payload.siteId,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+export function setSessionCookie(cookies, token, isProduction) {
+    cookies.set(SESSION_COOKIE, token, {
+        httpOnly: true,
+        secure: isProduction,
+        sameSite: "lax",
+        path: "/",
+        maxAge: SESSION_MAX_AGE_SECONDS,
+    });
+}

package/dist/auth/errors.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Thrown when a mutation would leave a site with zero owners.
+ * API routes should translate this to HTTP 409 Conflict with the message.
+ */
+export declare class LastOwnerError extends Error {
+    constructor(message?: string);
+}
+//# sourceMappingURL=errors.d.ts.map

package/dist/auth/errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/auth/errors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK;gBAC3B,OAAO,SAAiC;CAIrD"}

package/dist/auth/errors.js

@@ -0,0 +1,10 @@
+/**
+ * Thrown when a mutation would leave a site with zero owners.
+ * API routes should translate this to HTTP 409 Conflict with the message.
+ */
+export class LastOwnerError extends Error {
+    constructor(message = "Cannot remove the last owner") {
+        super(message);
+        this.name = "LastOwnerError";
+    }
+}

package/dist/auth/index.d.ts

@@ -0,0 +1,5 @@
+export type { Role, Session, SiteUser, Audience, SignInMethod, SignInResult, AuthProvider, CookieLike, AuthContext, } from "./types";
+export { requireSessionSecret, isSameOriginRequest, safeNextPath } from "./security";
+export { signSessionToken, verifySessionToken, setSessionCookie, SESSION_COOKIE, AUDIENCE_COOKIE, SESSION_MAX_AGE_SECONDS } from "./cookies";
+export { LastOwnerError } from "./errors";
+//# sourceMappingURL=index.d.ts.map

package/dist/auth/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAC7I,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/auth/index.js

@@ -0,0 +1,3 @@
+export { requireSessionSecret, isSameOriginRequest, safeNextPath } from "./security";
+export { signSessionToken, verifySessionToken, setSessionCookie, SESSION_COOKIE, AUDIENCE_COOKIE, SESSION_MAX_AGE_SECONDS } from "./cookies";
+export { LastOwnerError } from "./errors";

package/dist/auth/security.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared auth security primitives: session secret loader, same-origin check,
+ * redirect-path validator. Imported by cookies.ts, middleware, and auth API routes.
+ */
+export declare function requireSessionSecret(): Uint8Array;
+/**
+ * Same-origin check for CSRF protection on state-changing requests.
+ * Combine with an HTTP-method guard at the call site — this does not
+ * discriminate between safe (GET/HEAD) and unsafe methods.
+ */
+export declare function isSameOriginRequest(request: Request): boolean;
+export declare function safeNextPath(next: string | null | undefined): string | null;
+//# sourceMappingURL=security.d.ts.map

package/dist/auth/security.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"security.d.ts","sourceRoot":"","sources":["../../src/auth/security.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,wBAAgB,oBAAoB,IAAI,UAAU,CAUjD;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAY7D;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAO3E"}

package/dist/auth/security.js

@@ -0,0 +1,48 @@
+/**
+ * Shared auth security primitives: session secret loader, same-origin check,
+ * redirect-path validator. Imported by cookies.ts, middleware, and auth API routes.
+ */
+export function requireSessionSecret() {
+    const secret = import.meta.env.SESSION_SECRET;
+    if (!secret) {
+        throw new Error("SESSION_SECRET is required but not set");
+    }
+    const bytes = new TextEncoder().encode(secret);
+    if (bytes.byteLength < 32) {
+        throw new Error("SESSION_SECRET must be at least 32 bytes");
+    }
+    return bytes;
+}
+/**
+ * Same-origin check for CSRF protection on state-changing requests.
+ * Combine with an HTTP-method guard at the call site — this does not
+ * discriminate between safe (GET/HEAD) and unsafe methods.
+ */
+export function isSameOriginRequest(request) {
+    const origin = request.headers.get("Origin");
+    const referer = request.headers.get("Referer");
+    const source = origin ?? referer;
+    if (!source)
+        return false;
+    try {
+        const sourceOrigin = new URL(source).origin;
+        const requestOrigin = new URL(request.url).origin;
+        return sourceOrigin === requestOrigin;
+    }
+    catch {
+        return false;
+    }
+}
+export function safeNextPath(next) {
+    if (!next)
+        return null;
+    if (!next.startsWith("/"))
+        return null;
+    if (next.startsWith("//"))
+        return null;
+    if (next.includes("\\"))
+        return null;
+    if (/[\x00-\x1f]/.test(next))
+        return null;
+    return next;
+}

package/dist/auth/types.d.ts

@@ -0,0 +1,64 @@
+export type { Role, Session, SiteUser, Audience } from "../schemas/auth";
+import type { Role, Session, SiteUser, Audience } from "../schemas/auth";
+export type SignInMethod = {
+    type: "oauth";
+    provider: "google" | "github";
+} | {
+    type: "email";
+    email: string;
+    password: string;
+} | {
+    type: "password";
+    password: string;
+};
+export type SignInResult = {
+    success: true;
+    session: Session;
+    token: string;
+} | {
+    success: true;
+    redirectUrl: string;
+} | {
+    success: false;
+    error: string;
+};
+export interface AuthProvider {
+    capabilities: {
+        oauth: boolean;
+        emailPassword: boolean;
+        passwordOnly: boolean;
+        userManagement: boolean;
+        audienceManagement: boolean;
+        passwordToggle: boolean;
+    };
+    oauthProviders?: ("google" | "github")[];
+    resolveSession(ctx: AuthContext): Promise<Session | null>;
+    signIn(method: SignInMethod, ctx: AuthContext): Promise<SignInResult>;
+    signOut(ctx: AuthContext): Promise<void>;
+    listSiteUsers?(): Promise<SiteUser[]>;
+    inviteUser?(email: string, role: Role): Promise<void>;
+    revokeUser?(userId: string): Promise<void>;
+    listAudiences(): Promise<Audience[]>;
+    verifyAudiencePassword(name: string, password: string): Promise<boolean>;
+    getAudience?(name: string): Promise<Audience | null>;
+    createAudience?(displayName: string, color: string | null, password: string): Promise<void>;
+    setAudiencePassword?(name: string, password: string): Promise<void>;
+    setAudienceColor?(name: string, color: string | null): Promise<void>;
+    setAudienceDisplayName?(name: string, displayName: string): Promise<void>;
+    deleteAudience?(name: string): Promise<void>;
+    getPasswordEnabled(): Promise<boolean>;
+    setPasswordEnabled?(enabled: boolean): Promise<void>;
+    handleCallback?(request: Request, ctx: AuthContext): Promise<Response>;
+}
+export interface CookieLike {
+    get(name: string): {
+        value: string;
+    } | undefined;
+    set(name: string, value: string, options?: Record<string, unknown>): void;
+    delete(name: string): void;
+}
+export interface AuthContext {
+    cookies: CookieLike;
+    cookieHeader: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/auth/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/auth/types.ts"],"names":[],"mappings":"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"}

package/dist/auth/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/brandguide/ColorSwatchSettings.d.ts

@@ -0,0 +1,8 @@
+import type { ColorItem } from "../../schemas/shared";
+interface Props {
+    color: ColorItem;
+    onChange: (color: ColorItem) => void;
+}
+export default function ColorSwatchSettings({ color, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ColorSwatchSettings.d.ts.map

package/dist/components/brandguide/ColorSwatchSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatchSettings.d.ts","sourceRoot":"","sources":["../../../src/components/brandguide/ColorSwatchSettings.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,sBAAsB,CAAC;AAElE,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyBrE"}

package/dist/components/brandguide/ColorSwatchSettings.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../shared/Input";
+export default function ColorSwatchSettings({ color, onChange }) {
+    const space = color.spaces[0] || {};
+    const updateSpace = (key, value) => {
+        const newSpace = { ...space, [key]: value || undefined };
+        onChange({ ...color, spaces: [newSpace, ...color.spaces.slice(1)] });
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Name", value: color.name || "", onChange: (value) => onChange({ ...color, name: value }) }), ["hex", "rgb", "cmyk", "pantone"].map((key) => (_jsx(Input, { label: key.toUpperCase(), value: space[key] || "", onChange: (value) => updateSpace(key, value) }, key)))] }));
+}

package/dist/components/brandguide/Colors.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { ColorItem } from "../../schemas/shared";
+import type { SectionContent } from "../../schemas/sections";
+interface Props {
+    colors: ColorItem[];
+    columns?: number;
+    label?: string;
+    collapsing?: boolean;
+    showLabel?: boolean;
+    onChange?: (content: SectionContent) => void;
+    openModal?: (title: string, content: ReactNode) => void;
+}
+export default function Colors({ colors, columns, label, collapsing, showLabel, onChange, openModal }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Colors.d.ts.map

package/dist/components/brandguide/Colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../src/components/brandguide/Colors.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,KAAK;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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;AAgCD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,OAAW,EAAE,KAAK,EAAE,UAAU,EAAE,SAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,2CAgBtH"}

package/dist/components/brandguide/Colors.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { gridColsClass } from "../../lib/grid";
+import { EditableGrid } from "../primitives/EditableGrid";
+import { EditablePlainText } from "../primitives/EditablePlainText";
+import ColorSwatchSettings from "./ColorSwatchSettings";
+function getContrastClass(hex) {
+    if (!hex)
+        return "text-white";
+    const h = hex.replace("#", "");
+    if (h.length < 6)
+        return "text-white";
+    const r = parseInt(h.substring(0, 2), 16);
+    const g = parseInt(h.substring(2, 4), 16);
+    const b = parseInt(h.substring(4, 6), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? "text-black" : "text-white";
+}
+const createColorItem = () => ({
+    name: "",
+    spaces: [{ hex: "#cccccc" }],
+});
+function buildContent(colors, options) {
+    const { label, columns, collapsing, showLabel } = options;
+    return {
+        type: "colors",
+        content: { colors },
+        ...(label || columns || collapsing !== undefined || showLabel !== undefined
+            ? { options: { label, columns, collapsing, showLabel } }
+            : {}),
+    };
+}
+export default function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal }) {
+    if (onChange && openModal) {
+        return (_jsx(ColorsEditable, { colors: colors, columns: columns, label: label, collapsing: collapsing, showLabel: showLabel, onChange: onChange, openModal: openModal }));
+    }
+    return _jsx(ColorsView, { colors: colors, columns: columns, label: label, collapsing: collapsing, showLabel: showLabel });
+}
+function ColorsView({ colors, columns, label, collapsing, showLabel, }) {
+    const [expanded, setExpanded] = useState(!collapsing);
+    const [copiedValue, setCopiedValue] = useState(null);
+    const handleCopy = (value) => {
+        navigator.clipboard.writeText(value);
+        setCopiedValue(value);
+        setTimeout(() => setCopiedValue(null), 1500);
+    };
+    return (_jsxs("div", { children: [(showLabel && !!label || collapsing) && (_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [showLabel && !!label && (_jsx("span", { className: "text-lg font-bold", children: label })), collapsing && (_jsxs("button", { onClick: () => setExpanded(!expanded), className: "cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast", children: [_jsx("span", { children: expanded ? "Hide Details" : "Show Details" }), expanded ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 })] }))] })), _jsx("div", { className: cn("grid gap-4", gridColsClass[columns] || "grid-cols-3"), children: colors.map((color, i) => {
+                    const hex = color.spaces[0]?.hex;
+                    const contrast = getContrastClass(hex);
+                    return (_jsxs("div", { className: "overflow-hidden rounded-md border border-base-200", children: [_jsx("div", { className: cn("flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: color.name && _jsx("span", { className: "text-sm font-bold", children: color.name }) }), expanded && (_jsx("div", { className: "space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map((space, j) => Object.entries(space).map(([key, value]) => value ? (_jsxs("button", { onClick: () => handleCopy(value), className: "cursor-pointer flex w-full justify-between hover:text-primary", children: [_jsx("span", { className: "font-medium uppercase", children: key }), _jsx("span", { children: copiedValue === value ? "Copied!" : value })] }, `${j}-${key}`)) : null)) }))] }, i));
+                }) })] }));
+}
+function ColorsEditable({ colors, columns, label, collapsing, showLabel, onChange, openModal, }) {
+    const [expanded, setExpanded] = useState(!collapsing);
+    const options = { label, columns, collapsing, showLabel };
+    // Sync expanded state when collapsing option changes via settings
+    useEffect(() => {
+        setExpanded(!collapsing);
+    }, [collapsing]);
+    const handleItemSettings = (index) => {
+        const color = colors[index];
+        openModal("Color Settings", _jsx(ColorSwatchSettings, { color: color, onChange: (updated) => {
+                const newColors = colors.map((c, i) => (i === index ? updated : c));
+                onChange(buildContent(newColors, options));
+            } }));
+    };
+    return (_jsxs("div", { children: [(showLabel && !!label || collapsing) && (_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [showLabel && !!label && (_jsx(EditablePlainText, { tag: "span", value: label, onChange: (newLabel) => onChange(buildContent(colors, { ...options, label: newLabel })), isEditMode: true, className: "text-lg font-bold" })), collapsing && (_jsxs("button", { onClick: () => setExpanded(!expanded), className: "cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast", children: [_jsx("span", { children: expanded ? "Hide Details" : "Show Details" }), expanded ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 })] }))] })), _jsx(EditableGrid, { items: colors, columns: columns, onChange: (newColors) => onChange(buildContent(newColors, options)), createItem: createColorItem, isEditMode: true, onItemSettings: handleItemSettings, renderItem: (color, { index }) => (_jsx(ColorSwatchEditable, { color: color, index: index, colors: colors, options: options, onChange: onChange, expanded: expanded })) })] }));
+}
+function ColorSwatchEditable({ color, index, colors, options, onChange, expanded, }) {
+    const hex = color.spaces[0]?.hex;
+    const contrast = getContrastClass(hex);
+    const updateColor = (updated) => {
+        const newColors = colors.map((c, i) => (i === index ? updated : c));
+        onChange(buildContent(newColors, options));
+    };
+    return (_jsxs("div", { className: "overflow-hidden rounded-md border border-base-200", children: [_jsx("div", { className: cn("flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: _jsx(EditablePlainText, { tag: "span", value: color.name || "", onChange: (name) => updateColor({ ...color, name }), isEditMode: true, placeholder: "Color name", className: "text-sm font-bold" }) }), expanded && (_jsx("div", { className: "space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map((space, j) => Object.entries(space).map(([key, value]) => value ? (_jsxs("div", { className: "flex w-full justify-between", children: [_jsx("span", { className: "font-medium uppercase", children: key }), _jsx("span", { children: value })] }, `${j}-${key}`)) : null)) }))] }));
+}

package/dist/components/brandguide/DoDontList.d.ts

@@ -0,0 +1,16 @@
+import type { SectionContent } from "../../schemas/sections";
+interface DoDontItem {
+    label: string;
+    text: string;
+    icon?: string;
+}
+interface Props {
+    doItems: DoDontItem[];
+    dontItems: DoDontItem[];
+    showLabel?: boolean;
+    stackText?: boolean;
+    onChange?: (content: SectionContent) => void;
+}
+export default function DoDontList({ doItems, dontItems, showLabel, stackText, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DoDontList.d.ts.map

package/dist/components/brandguide/DoDontList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoDontList.d.ts","sourceRoot":"","sources":["../../../src/components/brandguide/DoDontList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,OAAO,EACP,SAAS,EACT,SAAgB,EAChB,SAAiB,EACjB,QAAQ,GACT,EAAE,KAAK,2CA0CP"}

package/dist/components/brandguide/DoDontList.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import IconList from "../sections/IconList/IconList";
+export default function DoDontList({ doItems, dontItems, showLabel = true, stackText = false, onChange, }) {
+    const doRef = useRef(doItems);
+    const dontRef = useRef(dontItems);
+    useEffect(() => { doRef.current = doItems; }, [doItems]);
+    useEffect(() => { dontRef.current = dontItems; }, [dontItems]);
+    return (_jsxs("div", { className: "grid gap-16 lg:grid-cols-2", children: [_jsx(IconList, { items: doItems, icon: "check", showLabel: showLabel, stackText: stackText, labelClassName: "font-bold text-base-contrast", textClassName: "text-base-contrast", iconClassName: "text-green-600", onItemsChange: onChange ? (items) => {
+                    onChange({
+                        type: "do_dont",
+                        content: { doItems: items, dontItems: dontRef.current },
+                        options: { showLabel, stackText },
+                    });
+                } : undefined }), _jsx(IconList, { items: dontItems, icon: "x", showLabel: showLabel, stackText: stackText, labelClassName: "font-bold text-base-contrast", textClassName: "text-base-contrast", iconClassName: "text-red-600", onItemsChange: onChange ? (items) => {
+                    onChange({
+                        type: "do_dont",
+                        content: { doItems: doRef.current, dontItems: items },
+                        options: { showLabel, stackText },
+                    });
+                } : undefined })] }));
+}

package/dist/components/brandguide/DoDontMediaGrid.d.ts

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

package/dist/components/brandguide/DoDontMediaGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoDontMediaGrid.d.ts","sourceRoot":"","sources":["../../../src/components/brandguide/DoDontMediaGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,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,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,eAAe,CAAC,KAAK,EAAE,KAAK,2CAEnD"}

package/dist/components/brandguide/DoDontMediaGrid.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MediaGrid from "../sections/MediaGrid/MediaGrid";
+export default function DoDontMediaGrid(props) {
+    return _jsx(MediaGrid, { ...props, sectionType: "do_dont_grid" });
+}

package/dist/components/editor/AudiencePicker.d.ts

@@ -0,0 +1,9 @@
+import type { Audience } from "../../auth/types";
+interface Props {
+    access: string[];
+    audiences: Audience[];
+    onChange: (access: string[]) => void;
+}
+export declare function AudiencePicker({ access, audiences, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AudiencePicker.d.ts.map

package/dist/components/editor/AudiencePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudiencePicker.d.ts","sourceRoot":"","sources":["../../../src/components/editor/AudiencePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyFpE"}

package/dist/components/editor/AudiencePicker.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+export function AudiencePicker({ access, audiences, onChange }) {
+    const [open, setOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const selected = audiences.filter((a) => access.includes(a.name));
+    const visibleCircles = selected.slice(0, 3);
+    function toggle(name) {
+        const next = access.includes(name)
+            ? access.filter((n) => n !== name)
+            : [...access, name];
+        onChange(next);
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: buttonRef, type: "button", onClick: () => setOpen((v) => !v), className: cn("cursor-pointer inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium", "border border-base-200 hover:bg-base-accent", selected.length === 0 && "text-base-contrast-light"), children: [selected.length === 0 && _jsx("span", { children: "No audience" }), selected.length >= 1 && (_jsx("span", { className: "flex -space-x-1.5", children: visibleCircles.map((a) => (_jsx("span", { className: "h-3 w-3 rounded-full border border-base", style: { backgroundColor: a.color ?? "#9ca3af" } }, a.name))) })), selected.length === 1 && _jsx("span", { children: selected[0].displayName }), selected.length >= 2 && _jsxs("span", { children: [selected.length, " audiences"] })] }), _jsx(Popover, { isOpen: open, onClose: () => setOpen(false), anchorRef: buttonRef, align: "end", className: "w-56", children: audiences.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-xs text-base-contrast-light", children: "No audiences configured. Add audiences in Site Settings \u2192 Viewer Access." })) : (_jsx("ul", { role: "list", className: "py-1", children: audiences.map((a) => {
+                        const checked = access.includes(a.name);
+                        return (_jsx("li", { children: _jsxs(PopoverItem, { role: "checkbox", "aria-checked": checked, onClick: () => toggle(a.name), children: [_jsx("span", { "aria-hidden": "true", className: cn("flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors", checked
+                                            ? "border-primary bg-primary text-primary-contrast"
+                                            : "border-base-300 bg-base"), children: checked && _jsx(Check, { size: 14, strokeWidth: 3 }) }), _jsx("span", { className: "h-3 w-3 shrink-0 rounded-full border border-base-200", style: { backgroundColor: a.color ?? "#9ca3af" } }), _jsx("span", { className: "text-sm font-medium text-base-contrast", children: a.displayName })] }) }, a.name));
+                    }) })) })] }));
+}

package/dist/components/editor/DeleteButton.d.ts

@@ -0,0 +1,6 @@
+interface DeleteButtonProps {
+    onDelete: () => void;
+}
+export declare function DeleteButton({ onDelete }: DeleteButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DeleteButton.d.ts.map

package/dist/components/editor/DeleteButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../src/components/editor/DeleteButton.tsx"],"names":[],"mappings":"AAGA,UAAU,iBAAiB;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAU3D"}

package/dist/components/editor/DeleteButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DeleteIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+export function DeleteButton({ onDelete }) {
+    return (_jsx(IconButton, { icon: _jsx(DeleteIcon, { size: 16 }), label: "Delete section", intent: "destructive", onClick: onDelete, className: "pointer-events-auto" }));
+}

package/dist/components/editor/DragHandle.d.ts

@@ -0,0 +1,2 @@
+export declare const DragHandle: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=DragHandle.d.ts.map

package/dist/components/editor/DragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/editor/DragHandle.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,6FAYrB,CAAC"}

package/dist/components/editor/DragHandle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DragHandle as DragHandleIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { Tooltip, Kbd } from "../shared/Tooltip";
+export const DragHandle = forwardRef(function DragHandle(_, ref) {
+    return (_jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx(Kbd, { children: "Drag" }), " to move"] }), className: "-ml-[34px]", children: _jsx(IconButton, { ref: ref, icon: _jsx(DragHandleIcon, { size: 18 }), label: "Drag to reorder section", className: "pointer-events-auto cursor-grab active:cursor-grabbing rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast", tabIndex: -1 }) }));
+});

package/dist/components/editor/InsertButton.d.ts

@@ -0,0 +1,7 @@
+interface InsertButtonProps {
+    index: number;
+    onInsert: (index: number) => void;
+}
+export declare function InsertButton({ index, onInsert }: InsertButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InsertButton.d.ts.map

package/dist/components/editor/InsertButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsertButton.d.ts","sourceRoot":"","sources":["../../../src/components/editor/InsertButton.tsx"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAYlE"}

package/dist/components/editor/InsertButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { Tooltip, Kbd } from "../shared/Tooltip";
+export function InsertButton({ index, onInsert }) {
+    return (_jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx(Kbd, { children: "Click" }), " to add below", _jsx("br", {}), _jsx(Kbd, { children: "Alt+Click" }), " to add above"] }), children: _jsx(IconButton, { icon: _jsx(AddIcon, { size: 18 }), label: "Add section", className: "pointer-events-auto rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast", tabIndex: -1, onClick: (e) => onInsert(e.altKey ? index : index + 1) }) }));
+}

package/dist/components/editor/SectionWrapper.d.ts

@@ -0,0 +1,3 @@
+import type { WrapperProps } from "../../lib/registry";
+export declare function SectionWrapper({ sectionId, sectionType, status, dirty, index, isLast, definition, options, audiences, access, onAccessChange, onStatusChange, onSectionChange, onReorder, onRequestInsert, onDelete, children, }: WrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SectionWrapper.d.ts.map

package/dist/components/editor/SectionWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SectionWrapper.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,WAAW,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,cAAc,EACd,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,QAAQ,GACT,EAAE,YAAY,2CA6Od"}