@nextlyhq/plugin-page-builder 0.0.2-alpha.31

package/dist/admin/index.js

@@ -0,0 +1,2463 @@
+import {
+  EDITOR_MODE_FIELD,
+  PAGE_BUILDER_CONTENT_FIELD,
+  PAGE_BUILDER_TYPE
+} from "../chunk-EGU6QGUC.js";
+import {
+  QUERY_LOOP_TYPE,
+  RenderNode,
+  loopGridStyle
+} from "../chunk-R7YHOSL2.js";
+import {
+  DEFAULT_SLOT,
+  compileDocumentCss,
+  compileTokensCss,
+  defaultBlockRegistry,
+  defaultControlRegistry,
+  duplicateNode,
+  findNode,
+  getPath,
+  insertNode,
+  makeNode,
+  moveNode,
+  nodeClass,
+  removeNode,
+  updateNode
+} from "../chunk-ABMSYCSD.js";
+import {
+  BlockErrorBoundary
+} from "../chunk-E4G7NNXW.js";
+
+// src/admin/index.ts
+import {
+  registerComponents,
+  registerKnownPlugin
+} from "@nextlyhq/plugin-sdk/admin";
+
+// src/admin/controls/registerDefaultControls.tsx
+import { createElement } from "react";
+
+// src/admin/controls/ColorControl.tsx
+import { Input as Input2 } from "@nextlyhq/ui";
+
+// src/admin/icons.tsx
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  GripVertical,
+  Heading,
+  Image,
+  LayoutGrid,
+  Link2,
+  Monitor,
+  MousePointerClick,
+  Plus,
+  Repeat,
+  Search,
+  Smartphone,
+  Square,
+  Tablet,
+  Trash2,
+  Type,
+  Video,
+  X
+} from "lucide-react";
+var BLOCK_ICONS = {
+  Heading,
+  Image,
+  LayoutGrid,
+  MousePointerClick,
+  Repeat,
+  Square,
+  Type,
+  Video
+};
+function blockIcon(name) {
+  return name && BLOCK_ICONS[name] || Square;
+}
+
+// src/admin/controls/primitives.tsx
+import {
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Textarea
+} from "@nextlyhq/ui";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UNITS = ["px", "%", "rem", "em", "vw", "vh"];
+function ControlRow({
+  label,
+  htmlFor,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4, marginBottom: 10 }, children: [
+    label ? /* @__PURE__ */ jsx(Label, { htmlFor, className: "nx-pb-control-label", children: label }) : null,
+    children
+  ] });
+}
+var str = (v) => typeof v === "string" ? v : "";
+function TextControl({ value, onChange, label, field }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(ControlRow, { label, htmlFor: id, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      value: str(value),
+      placeholder: field?.placeholder,
+      onChange: (e) => onChange(e.target.value)
+    }
+  ) });
+}
+function TextareaControl({
+  value,
+  onChange,
+  label,
+  field
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(ControlRow, { label, htmlFor: id, children: /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      id,
+      rows: 3,
+      value: str(value),
+      placeholder: field?.placeholder,
+      onChange: (e) => onChange(e.target.value)
+    }
+  ) });
+}
+function NumberControl({ value, onChange, label }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(ControlRow, { label, htmlFor: id, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      type: "number",
+      value: typeof value === "number" ? value : str(value),
+      onChange: (e) => onChange(e.target.value === "" ? void 0 : Number(e.target.value))
+    }
+  ) });
+}
+function BooleanControl({ value, onChange, label }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: 10
+      },
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: id, className: "nx-pb-control-label", children: label }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id,
+            checked: value === true,
+            onCheckedChange: (checked) => onChange(checked)
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectControl({ value, onChange, label, field }) {
+  const options = field?.options ?? [];
+  return /* @__PURE__ */ jsx(ControlRow, { label, children: /* @__PURE__ */ jsxs(Select, { value: str(value), onValueChange: (v) => onChange(v), children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select\u2026" }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
+  ] }) });
+}
+var ALIGN = [
+  { value: "left", label: "Left" },
+  { value: "center", label: "Center" },
+  { value: "right", label: "Right" },
+  { value: "justify", label: "Justify" }
+];
+function AlignControl({ value, onChange, label }) {
+  return /* @__PURE__ */ jsx(ControlRow, { label, children: /* @__PURE__ */ jsx("div", { className: "nx-pb-choice", role: "group", "aria-label": label, children: ALIGN.map((a) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "nx-pb-choice-btn",
+      "aria-pressed": value === a.value,
+      onClick: () => onChange(value === a.value ? void 0 : a.value),
+      children: a.label
+    },
+    a.value
+  )) }) });
+}
+function splitLength(v) {
+  const s = str(v).trim();
+  const m = /^(-?\d*\.?\d+)(px|%|rem|em|vw|vh)?$/.exec(s);
+  if (!m) return { n: "", unit: "px" };
+  return { n: m[1], unit: m[2] ?? "px" };
+}
+function DimensionControl({ value, onChange, label }) {
+  const { n, unit } = splitLength(value);
+  const emit = (nextN, nextUnit) => onChange(nextN === "" ? void 0 : `${nextN}${nextUnit}`);
+  return /* @__PURE__ */ jsx(ControlRow, { label, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "number",
+        value: n,
+        style: { flex: 1 },
+        onChange: (e) => emit(e.target.value, unit)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Select, { value: unit, onValueChange: (u) => emit(n, u), children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { style: { width: 80 }, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: UNITS.map((u) => /* @__PURE__ */ jsx(SelectItem, { value: u, children: u }, u)) })
+    ] })
+  ] }) });
+}
+function LinkControl({ value, onChange, label }) {
+  const v = value ?? {};
+  const id = useId();
+  return /* @__PURE__ */ jsxs(ControlRow, { label, htmlFor: id, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        value: str(v.href),
+        placeholder: "https://\u2026",
+        onChange: (e) => onChange({ ...v, href: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "nx-pb-control-label",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          marginTop: 4
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: v.target === "_blank",
+              onChange: (e) => onChange({ ...v, target: e.target.checked ? "_blank" : void 0 })
+            }
+          ),
+          "Open in new tab"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/admin/controls/ColorControl.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function isToken(v) {
+  return typeof v === "object" && v !== null && "token" in v;
+}
+function ColorControl({ value, onChange, label, tokens }) {
+  const token = isToken(value) ? value.token : void 0;
+  const hex = typeof value === "string" ? value : "";
+  return /* @__PURE__ */ jsxs2(ControlRow, { label, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "nx-pb-color-row", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "color",
+          className: "nx-pb-color-swatch",
+          "aria-label": `${label ?? "color"} picker`,
+          value: /^#[0-9a-fA-F]{6}$/.test(hex) ? hex : "#000000",
+          onChange: (e) => onChange(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Input2,
+        {
+          value: token ? `token:${token}` : hex,
+          placeholder: "#000000",
+          onChange: (e) => onChange(e.target.value),
+          style: { flex: 1 }
+        }
+      ),
+      value !== void 0 ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "nx-pb-icon-btn",
+          "aria-label": "Clear color",
+          onClick: () => onChange(void 0),
+          style: { padding: "6px 8px" },
+          children: /* @__PURE__ */ jsx2(X, { size: 14, "aria-hidden": true })
+        }
+      ) : null
+    ] }),
+    tokens && tokens.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "nx-pb-color-tokens", children: tokens.map((t) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "nx-pb-color-token",
+        "data-active": token === t.name || void 0,
+        title: t.label,
+        "aria-label": t.label,
+        onClick: () => onChange({ token: t.name }),
+        style: { background: t.preview }
+      },
+      t.name
+    )) }) : null
+  ] });
+}
+
+// src/admin/controls/MediaControl.tsx
+import { MediaPickerDialog } from "@nextlyhq/admin";
+import { Button, Input as Input3 } from "@nextlyhq/ui";
+import { useState } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var str2 = (v) => typeof v === "string" ? v : "";
+function MediaControl({ value, onChange, label }) {
+  const v = value ?? {};
+  const [open, setOpen] = useState(false);
+  const onSelect = (media) => {
+    const m = media[0];
+    if (m) {
+      onChange({
+        mediaId: m.id,
+        url: m.url,
+        alt: m.altText ?? "",
+        width: m.width ?? void 0,
+        height: m.height ?? void 0
+      });
+    }
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs3(ControlRow, { label, children: [
+    v.url ? /* @__PURE__ */ jsx3(
+      "img",
+      {
+        src: v.url,
+        alt: v.alt ?? "",
+        style: {
+          maxWidth: "100%",
+          maxHeight: 120,
+          borderRadius: "var(--radius)",
+          border: "1px solid hsl(var(--border))",
+          marginBottom: 6
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 6, marginBottom: 4 }, children: [
+      /* @__PURE__ */ jsx3(Button, { variant: "outline", onClick: () => setOpen(true), children: v.url ? "Replace" : "Choose from library" }),
+      v.url ? /* @__PURE__ */ jsx3(Button, { variant: "ghost", onClick: () => onChange(void 0), children: "Remove" }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(
+      Input3,
+      {
+        value: str2(v.url),
+        placeholder: "\u2026or paste an image URL",
+        "aria-label": `${label ?? "media"} url`,
+        onChange: (e) => onChange({ ...v, url: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Input3,
+      {
+        value: str2(v.alt),
+        placeholder: "Alt text (describe the image)",
+        "aria-label": `${label ?? "media"} alt text`,
+        style: { marginTop: 4 },
+        onChange: (e) => onChange({ ...v, alt: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      MediaPickerDialog,
+      {
+        mode: "single",
+        open,
+        onOpenChange: setOpen,
+        onSelect,
+        accept: "image/*",
+        title: "Select media"
+      }
+    )
+  ] });
+}
+
+// src/admin/controls/SpacingControl.tsx
+import { Input as Input4 } from "@nextlyhq/ui";
+import { useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIDES = [
+  { key: "top", label: "T" },
+  { key: "right", label: "R" },
+  { key: "bottom", label: "B" },
+  { key: "left", label: "L" }
+];
+function num(v) {
+  if (!v) return "";
+  const m = /^(-?\d*\.?\d+)/.exec(v);
+  return m ? m[1] : "";
+}
+function SpacingControl({ value, onChange, label }) {
+  const sides = value ?? {};
+  const [linked, setLinked] = useState2(false);
+  const emit = (side, raw) => {
+    if (linked) {
+      if (raw === "") return onChange(void 0);
+      const all = `${raw}px`;
+      return onChange({ top: all, right: all, bottom: all, left: all });
+    }
+    const next = { ...sides };
+    if (raw === "") delete next[side];
+    else next[side] = `${raw}px`;
+    onChange(Object.keys(next).length ? next : void 0);
+  };
+  return /* @__PURE__ */ jsx4(ControlRow, { label, children: /* @__PURE__ */ jsxs4("div", { className: "nx-pb-box", children: [
+    SIDES.map((s) => /* @__PURE__ */ jsxs4("div", { className: "nx-pb-box-side", children: [
+      /* @__PURE__ */ jsx4(
+        Input4,
+        {
+          type: "number",
+          "aria-label": `${label ?? "spacing"} ${s.key}`,
+          value: num(sides[s.key]),
+          onChange: (e) => emit(s.key, e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { children: s.label })
+    ] }, s.key)),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: "nx-pb-box-link",
+        "aria-label": "Link all sides",
+        "aria-pressed": linked,
+        title: "Edit all sides together",
+        onClick: () => setLinked((l) => !l),
+        children: /* @__PURE__ */ jsx4(Link2, { size: 15, "aria-hidden": true })
+      }
+    )
+  ] }) });
+}
+
+// src/admin/controls/registerDefaultControls.tsx
+var CONTROLS = {
+  text: TextControl,
+  textarea: TextareaControl,
+  number: NumberControl,
+  boolean: BooleanControl,
+  select: SelectControl,
+  align: AlignControl,
+  dimension: DimensionControl,
+  link: LinkControl,
+  spacing: SpacingControl,
+  color: ColorControl,
+  media: MediaControl
+};
+var registered = false;
+function registerDefaultControls() {
+  if (registered) return;
+  registered = true;
+  for (const [type, Component] of Object.entries(CONTROLS)) {
+    defaultControlRegistry.register({ type, Component });
+  }
+}
+function renderControl(type, props) {
+  const def = defaultControlRegistry.get(type);
+  const Component = def?.Component ?? TextControl;
+  return createElement(Component, props);
+}
+
+// src/admin/EditorSurface.tsx
+import { DragDropProvider, DragOverlay } from "@dnd-kit/react";
+
+// src/admin/store/EditorProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useReducer,
+  useRef
+} from "react";
+
+// src/admin/store/editorStore.ts
+var HISTORY_LIMIT = 50;
+var BASE_BREAKPOINT = "base";
+function initialState(document) {
+  return {
+    document,
+    selectedId: null,
+    activeBreakpoint: BASE_BREAKPOINT,
+    past: [],
+    future: [],
+    dirty: false
+  };
+}
+function keepValidSelection(document, selectedId) {
+  if (!selectedId) return null;
+  return findNode(document.root, selectedId) ? selectedId : null;
+}
+function createNodeFromType(nodeType) {
+  const def = defaultBlockRegistry.get(nodeType);
+  const props = def ? structuredClone(def.defaultProps) : {};
+  const style = def?.defaultStyle ? structuredClone(def.defaultStyle) : void 0;
+  const slots = def?.isContainer ? { default: [] } : void 0;
+  return makeNode(nodeType, props, style, slots);
+}
+function commit(state, root, selectedId = state.selectedId) {
+  const past = [...state.past, state.document].slice(-HISTORY_LIMIT);
+  return {
+    ...state,
+    document: { ...state.document, root },
+    past,
+    future: [],
+    dirty: true,
+    selectedId
+  };
+}
+function editorReducer(state, action) {
+  const root = state.document.root;
+  switch (action.type) {
+    case "SELECT":
+      return { ...state, selectedId: action.id };
+    case "SET_BREAKPOINT":
+      return { ...state, activeBreakpoint: action.breakpoint };
+    case "ADD": {
+      const node = createNodeFromType(action.nodeType);
+      return commit(
+        state,
+        insertNode(root, action.parentId, action.slot, node, action.index),
+        node.id
+      );
+    }
+    case "MOVE":
+      return commit(
+        state,
+        moveNode(root, action.id, action.parentId, action.slot, action.index)
+      );
+    case "REMOVE": {
+      const next = removeNode(root, action.id);
+      return { ...commit(state, next), selectedId: null };
+    }
+    case "DUPLICATE":
+      return commit(state, duplicateNode(root, action.id));
+    case "UPDATE_PROPS": {
+      const node = findNode(root, action.id);
+      const props = { ...node?.props ?? {}, ...action.props };
+      return commit(state, updateNode(root, action.id, { props }));
+    }
+    case "UPDATE_STYLE": {
+      const node = findNode(root, action.id);
+      const key = action.styleState === "hover" ? "styleHover" : "style";
+      const style = { ...node?.[key] ?? {} };
+      style[action.breakpoint] = {
+        ...style[action.breakpoint] ?? {},
+        ...action.style
+      };
+      return commit(state, updateNode(root, action.id, { [key]: style }));
+    }
+    case "SET_BINDING": {
+      const node = findNode(root, action.id);
+      const bindings = { ...node?.bindings ?? {} };
+      if (action.binding) bindings[action.prop] = action.binding;
+      else delete bindings[action.prop];
+      return commit(state, updateNode(root, action.id, { bindings }));
+    }
+    case "SET_CUSTOM_CLASS": {
+      const customClass = action.customClass.trim() || void 0;
+      return commit(state, updateNode(root, action.id, { customClass }));
+    }
+    case "REPLACE":
+      return {
+        ...initialState(action.document),
+        activeBreakpoint: state.activeBreakpoint
+      };
+    case "MARK_SAVED":
+      return { ...state, dirty: false };
+    case "UNDO": {
+      if (!state.past.length) return state;
+      const prev = state.past[state.past.length - 1];
+      return {
+        ...state,
+        document: prev,
+        selectedId: keepValidSelection(prev, state.selectedId),
+        past: state.past.slice(0, -1),
+        future: [state.document, ...state.future],
+        dirty: true
+      };
+    }
+    case "REDO": {
+      if (!state.future.length) return state;
+      const next = state.future[0];
+      return {
+        ...state,
+        document: next,
+        selectedId: keepValidSelection(next, state.selectedId),
+        past: [...state.past, state.document],
+        future: state.future.slice(1),
+        dirty: true
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+// src/admin/store/EditorProvider.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var EditorContext = createContext(null);
+function useEditor() {
+  const ctx = useContext(EditorContext);
+  if (!ctx) throw new Error("useEditor must be used inside <EditorProvider>");
+  return ctx;
+}
+function draftKeyFor(collectionSlug, entryId) {
+  return `nx-pb-draft:${collectionSlug}:${entryId ?? "new"}`;
+}
+function EditorProvider({
+  document: doc,
+  draftKey,
+  onDocumentChange,
+  children
+}) {
+  const [state, dispatch] = useReducer(editorReducer, doc, initialState);
+  const timer = useRef(null);
+  const firstRender = useRef(true);
+  const onDocumentChangeRef = useRef(onDocumentChange);
+  onDocumentChangeRef.current = onDocumentChange;
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    onDocumentChangeRef.current?.(state.document);
+  }, [state.document]);
+  useEffect(() => {
+    if (!state.dirty) return;
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      try {
+        localStorage.setItem(draftKey, JSON.stringify(state.document));
+      } catch {
+      }
+    }, 800);
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [state.document, state.dirty, draftKey]);
+  return /* @__PURE__ */ jsx5(EditorContext.Provider, { value: { state, dispatch }, children });
+}
+
+// src/admin/canvas/CanvasNode.tsx
+import { useDraggable, useDroppable as useDroppable2 } from "@dnd-kit/react";
+import {
+  cloneElement,
+  isValidElement
+} from "react";
+
+// src/admin/logic/dragSensors.ts
+import {
+  KeyboardSensor,
+  PointerActivationConstraints,
+  PointerSensor
+} from "@dnd-kit/dom";
+var dragSensors = [
+  PointerSensor.configure({
+    activationConstraints: [
+      new PointerActivationConstraints.Distance({ value: 4 })
+    ]
+  }),
+  KeyboardSensor
+];
+
+// src/admin/canvas/CanvasQueryLoop.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/admin/api/collectionsApi.ts
+var BASE = "/admin/api";
+var asArray = (v) => Array.isArray(v) ? v : [];
+var str3 = (v, fallback = "") => typeof v === "string" ? v : fallback;
+function normalizeCollections(body) {
+  const items = asArray(body?.items);
+  const out = [];
+  for (const c of items) {
+    const admin = c.admin;
+    if (admin?.hidden === true) continue;
+    const slug = str3(c.name) || str3(c.slug);
+    if (!slug) continue;
+    const labels = c.labels;
+    const label = str3(c.label) || str3(labels?.plural) || slug;
+    out.push({ slug, label });
+  }
+  return out;
+}
+function normalizeFields(body) {
+  const fields = asArray(body?.fields);
+  const out = [];
+  for (const f of fields) {
+    const name = str3(f.name);
+    if (!name) continue;
+    out.push({ name, type: str3(f.type, "text"), label: str3(f.label) || name });
+  }
+  return out;
+}
+async function getJson(url) {
+  const res = await fetch(url, {
+    credentials: "same-origin",
+    headers: { Accept: "application/json" }
+  });
+  if (!res.ok) throw new Error(`Request failed (${res.status})`);
+  return res.json();
+}
+async function listCollections() {
+  return normalizeCollections(await getJson(`${BASE}/collections`));
+}
+async function getCollectionFields(slug) {
+  if (!slug) return [];
+  return normalizeFields(
+    await getJson(`${BASE}/collections/schema/${encodeURIComponent(slug)}`)
+  );
+}
+async function getSampleEntries(slug, opts = {}) {
+  if (!slug) return [];
+  const params = new URLSearchParams();
+  params.set("limit", String(opts.limit ?? 5));
+  params.set("depth", "1");
+  if (opts.sort) params.set("sort", opts.sort);
+  if (opts.where !== void 0 && opts.where !== null) {
+    params.set("where", JSON.stringify(opts.where));
+  }
+  const body = await getJson(
+    `${BASE}/collections/${encodeURIComponent(slug)}/entries?${params.toString()}`
+  );
+  return asArray(body?.items);
+}
+
+// src/admin/canvas/CanvasQueryLoop.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var PREVIEW_ROWS = 4;
+function QueryLoopSamplePreview({ node }) {
+  const collection = typeof node.props.collection === "string" ? node.props.collection : "";
+  const sort = typeof node.props.sort === "string" ? node.props.sort : void 0;
+  const where = node.props.where;
+  const [rows, setRows] = useState3(null);
+  const [error, setError] = useState3(false);
+  useEffect2(() => {
+    let alive = true;
+    if (!collection) {
+      setRows(null);
+      return;
+    }
+    setError(false);
+    getSampleEntries(collection, { limit: PREVIEW_ROWS, sort, where }).then((r) => alive && setRows(r)).catch(() => alive && setError(true));
+    return () => {
+      alive = false;
+    };
+  }, [collection, sort, where]);
+  if (!collection) return null;
+  const template = node.slots?.[DEFAULT_SLOT] ?? [];
+  return /* @__PURE__ */ jsxs5("div", { style: { gridColumn: "1 / -1", pointerEvents: "none" }, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx6("div", { style: labelStyle, children: error ? "Preview unavailable" : rows == null ? "Loading sample preview\u2026" : rows.length === 0 ? "No entries found" : `Live preview \u2014 ${collection}` }),
+    rows && rows.length > 0 ? /* @__PURE__ */ jsx6("div", { style: loopGridStyle(node.props) ?? { display: "grid", gap: 12 }, children: rows.map((item, i) => /* @__PURE__ */ jsx6("div", { "data-nx-loop-item": i, children: template.map((child) => /* @__PURE__ */ jsx6(
+      RenderNode,
+      {
+        node: child,
+        registry: defaultBlockRegistry,
+        item
+      },
+      child.id
+    )) }, i)) }) : null
+  ] });
+}
+var labelStyle = {
+  fontSize: 11,
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  color: "#94a3b8",
+  margin: "10px 0 6px",
+  borderTop: "1px dashed #cbd5e1",
+  paddingTop: 8
+};
+
+// src/admin/canvas/DropZone.tsx
+import { useDragDropMonitor, useDroppable } from "@dnd-kit/react";
+import { useState as useState4 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var BLOCK_TYPE = "nx-block";
+function DropZone({
+  parentId,
+  slot,
+  index,
+  empty = false
+}) {
+  const [dragging, setDragging] = useState4(false);
+  useDragDropMonitor({
+    onDragStart() {
+      setDragging(true);
+    },
+    onDragEnd() {
+      setDragging(false);
+    }
+  });
+  const { ref, isDropTarget } = useDroppable({
+    id: `dz:${parentId}:${slot}:${index}`,
+    type: BLOCK_TYPE,
+    accept: BLOCK_TYPE,
+    data: { kind: "dropzone", parentId, slot, index }
+  });
+  if (empty) {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref,
+        className: "nx-pb-dropzone-empty",
+        "data-active": isDropTarget || void 0,
+        children: "Drop a block here"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      className: "nx-pb-dropzone",
+      "data-drag": dragging || void 0,
+      "data-active": isDropTarget || void 0
+    }
+  );
+}
+
+// src/admin/canvas/CanvasNode.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var BLOCK_TYPE2 = "nx-block";
+var placeholderStyle = {
+  padding: "14px 16px",
+  fontSize: 13,
+  color: "#6b7280",
+  border: "1px dashed #cbd5e1",
+  borderRadius: 6,
+  textAlign: "center",
+  background: "#f8fafc"
+};
+function isHorizontal(node) {
+  return node.type === "core/grid";
+}
+function mergeRefs(...refs) {
+  return (el) => {
+    for (const r of refs) r?.(el);
+  };
+}
+function classFor(node, selected, extra = []) {
+  return [
+    nodeClass(node.id),
+    node.customClass,
+    selected && "nx-pb-selected",
+    ...extra
+  ].filter(Boolean).join(" ");
+}
+function renderSlot(node, slotName) {
+  const children = node.slots?.[slotName] ?? [];
+  if (children.length === 0) {
+    return /* @__PURE__ */ jsx8(
+      DropZone,
+      {
+        parentId: node.id,
+        slot: slotName,
+        index: 0,
+        empty: true
+      },
+      "dz-empty"
+    );
+  }
+  if (isHorizontal(node)) {
+    return children.map((child, i) => /* @__PURE__ */ jsx8(
+      DraggableNode,
+      {
+        node: child,
+        parentId: node.id,
+        slot: slotName,
+        index: i,
+        dropBeforeIndex: i
+      },
+      child.id
+    ));
+  }
+  const out = [];
+  children.forEach((child, i) => {
+    out.push(
+      /* @__PURE__ */ jsx8(DropZone, { parentId: node.id, slot: slotName, index: i }, `dz-${i}`)
+    );
+    out.push(
+      /* @__PURE__ */ jsx8(
+        DraggableNode,
+        {
+          node: child,
+          parentId: node.id,
+          slot: slotName,
+          index: i
+        },
+        child.id
+      )
+    );
+  });
+  out.push(
+    /* @__PURE__ */ jsx8(
+      DropZone,
+      {
+        parentId: node.id,
+        slot: slotName,
+        index: children.length
+      },
+      `dz-${children.length}`
+    )
+  );
+  return out;
+}
+function buildSlots(node) {
+  const slots = {};
+  if (node.slots) {
+    for (const name of Object.keys(node.slots)) {
+      slots[name] = renderSlot(node, name);
+    }
+  }
+  return slots;
+}
+function CanvasNode({ node }) {
+  const { state } = useEditor();
+  const def = defaultBlockRegistry.get(node.type);
+  const selected = state.selectedId === node.id;
+  const className = classFor(node, selected);
+  if (!def) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        "data-nx-id": node.id,
+        "data-nx-unknown": node.type,
+        className
+      }
+    );
+  }
+  const element = def.render({
+    props: node.props,
+    node,
+    slots: buildSlots(node),
+    className
+  });
+  if (!isValidElement(element)) {
+    return /* @__PURE__ */ jsxs6("div", { className, "data-nx-id": node.id, style: placeholderStyle, children: [
+      def.label,
+      " \u2014 click to configure"
+    ] });
+  }
+  return cloneElement(element, {
+    "data-nx-id": node.id
+  });
+}
+function DraggableNode({
+  node,
+  parentId,
+  slot,
+  index,
+  dropBeforeIndex
+}) {
+  const { state } = useEditor();
+  const def = defaultBlockRegistry.get(node.type);
+  const selected = state.selectedId === node.id;
+  const { ref: dragRef, isDragging } = useDraggable({
+    id: node.id,
+    type: BLOCK_TYPE2,
+    data: { kind: "node", nodeId: node.id, parentId, slot, index },
+    sensors: dragSensors
+  });
+  const before = useDroppable2({
+    id: `before:${node.id}`,
+    type: BLOCK_TYPE2,
+    accept: BLOCK_TYPE2,
+    disabled: dropBeforeIndex == null,
+    data: { kind: "dropzone", parentId, slot, index: dropBeforeIndex ?? 0 }
+  });
+  const grid = isHorizontal(node);
+  const appendIndex = node.slots?.default?.length ?? 0;
+  const append = useDroppable2({
+    id: `append:${node.id}`,
+    type: BLOCK_TYPE2,
+    accept: BLOCK_TYPE2,
+    disabled: !grid,
+    data: {
+      kind: "dropzone",
+      parentId: node.id,
+      slot: "default",
+      index: appendIndex
+    }
+  });
+  const className = classFor(node, selected, [
+    isDragging && "nx-pb-dragging",
+    before.isDropTarget && "nx-pb-drop-before",
+    append.isDropTarget && "nx-pb-drop-append"
+  ]);
+  const ref = mergeRefs(dragRef, before.ref, grid ? append.ref : void 0);
+  if (!def) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref,
+        "data-nx-id": node.id,
+        "data-nx-unknown": node.type,
+        className
+      }
+    );
+  }
+  const element = def.render({
+    props: node.props,
+    node,
+    slots: buildSlots(node),
+    className
+  });
+  if (!isValidElement(element)) {
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref,
+        className,
+        "data-nx-id": node.id,
+        style: placeholderStyle,
+        children: [
+          def.label,
+          " \u2014 click to configure"
+        ]
+      }
+    );
+  }
+  const el = element;
+  const augmented = node.type === QUERY_LOOP_TYPE ? cloneElement(
+    el,
+    { "data-nx-id": node.id, ref },
+    el.props.children,
+    /* @__PURE__ */ jsx8(QueryLoopSamplePreview, { node }, "__nx-sample")
+  ) : cloneElement(el, { "data-nx-id": node.id, ref });
+  return /* @__PURE__ */ jsx8(
+    BlockErrorBoundary,
+    {
+      fallback: /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          ref,
+          "data-nx-id": node.id,
+          className,
+          style: {
+            padding: 8,
+            fontSize: 12,
+            color: "#b91c1c",
+            border: "1px dashed #fca5a5",
+            borderRadius: 6
+          },
+          children: [
+            def.label,
+            " failed to render."
+          ]
+        }
+      ),
+      children: augmented
+    }
+  );
+}
+
+// src/admin/canvas/IframeCanvas.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
+import { createPortal } from "react-dom";
+
+// src/core/responsive.ts
+var BREAKPOINT_WIDTHS = {
+  base: 1280,
+  tablet: 768,
+  mobile: 375
+};
+function readStyleValue(style, styleKey, breakpoint) {
+  return style?.[breakpoint]?.[styleKey];
+}
+
+// src/admin/canvas/IframeCanvas.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var OVERLAY_CSS = [
+  "body{margin:0;font-family:system-ui,-apple-system,sans-serif}",
+  // Blocks are grabbable; hovering hints the boundary (Elementor-like).
+  "[data-nx-id]{cursor:grab}",
+  "[data-nx-id]:active{cursor:grabbing}",
+  "[data-nx-id]:hover{outline:1px dashed #a5b4fc;outline-offset:-1px}",
+  // Selected block: solid ring + a small grip badge (top-left) as a grab cue.
+  ".nx-pb-selected,[data-nx-id].nx-pb-selected:hover{outline:2px solid #6366f1;outline-offset:-2px;position:relative}",
+  ".nx-pb-selected::before{content:'\\283F';position:absolute;top:-2px;left:-2px;transform:translateY(-100%);font-size:12px;line-height:1;padding:2px 5px;background:#6366f1;color:#fff;border-radius:4px 4px 0 0;pointer-events:none;z-index:2}",
+  ".nx-pb-dragging{opacity:.4}",
+  ".nx-pb-empty{color:#9ca3af;padding:32px;text-align:center;font-size:14px}",
+  // Between-item drop zones: collapsed at rest, a hint while dragging, a bold blue
+  // insertion bar when they are the active drop target.
+  ".nx-pb-dropzone{height:0;border-radius:3px;transition:height .1s ease,background .1s ease}",
+  ".nx-pb-dropzone[data-drag]{height:6px;margin:3px 0;background:rgba(99,102,241,.12)}",
+  ".nx-pb-dropzone[data-active]{height:6px;margin:4px 0;background:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.15)}",
+  // Empty-container placeholder.
+  ".nx-pb-dropzone-empty{border:2px dashed #c7d2fe;border-radius:8px;padding:20px 12px;margin:6px;text-align:center;color:#6366f1;font-size:13px;background:#f8f9ff}",
+  ".nx-pb-dropzone-empty[data-active]{border-color:#4f46e5;background:#eef2ff;color:#4338ca}",
+  // Grid drop targets (layout-safe: inset shadow / outline, no box).
+  ".nx-pb-drop-before{box-shadow:inset 3px 0 0 #4f46e5}",
+  ".nx-pb-drop-append{outline:2px dashed #4f46e5;outline-offset:-2px}"
+].join("");
+function IframeCanvas({ children }) {
+  const { state, dispatch } = useEditor();
+  const ref = useRef2(null);
+  const [body, setBody] = useState5(null);
+  const width = state.activeBreakpoint === "base" ? 0 : BREAKPOINT_WIDTHS[state.activeBreakpoint] || 0;
+  const attach = () => {
+    const doc = ref.current?.contentDocument;
+    if (doc?.body) setBody(doc.body);
+  };
+  useEffect3(() => {
+    attach();
+  }, []);
+  useEffect3(() => {
+    const doc = ref.current?.contentDocument;
+    if (!doc?.head) return;
+    let overlay = doc.getElementById("nx-pb-overlay");
+    if (!overlay) {
+      overlay = doc.createElement("style");
+      overlay.id = "nx-pb-overlay";
+      overlay.textContent = OVERLAY_CSS;
+      doc.head.appendChild(overlay);
+    }
+    let pageStyle = doc.getElementById(
+      "nx-pb-style"
+    );
+    if (!pageStyle) {
+      pageStyle = doc.createElement("style");
+      pageStyle.id = "nx-pb-style";
+      doc.head.appendChild(pageStyle);
+    }
+    pageStyle.textContent = compileTokensCss("nx-pb-page") + "\n" + compileDocumentCss(state.document);
+  }, [state.document, body]);
+  useEffect3(() => {
+    const doc = ref.current?.contentDocument;
+    if (!doc) return;
+    const onClick = (e) => {
+      const target = e.target;
+      const el = target?.closest?.("[data-nx-id]") ?? null;
+      dispatch({ type: "SELECT", id: el?.getAttribute("data-nx-id") ?? null });
+    };
+    doc.addEventListener("click", onClick);
+    return () => doc.removeEventListener("click", onClick);
+  }, [body, dispatch]);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        display: "flex",
+        // "safe center" centers the device frame but falls back to the start edge when it
+        // would overflow — so a narrow pane scrolls from the left instead of clipping it.
+        justifyContent: "safe center",
+        height: "100%",
+        background: "hsl(var(--muted))",
+        overflow: "auto",
+        padding: width ? 16 : 0
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "iframe",
+          {
+            ref,
+            title: "Page preview",
+            onLoad: attach,
+            style: {
+              border: "none",
+              background: "#fff",
+              height: "100%",
+              width: width ? `${width}px` : "100%",
+              // A fixed device width must NOT be capped to the pane — the canvas scrolls
+              // instead, so the preview stays a faithful WYSIWYG at that width.
+              maxWidth: width ? "none" : "100%",
+              flexShrink: 0,
+              boxShadow: width ? "0 0 0 1px #e5e7eb" : "none",
+              borderRadius: width ? 8 : 0
+            }
+          }
+        ),
+        body ? createPortal(/* @__PURE__ */ jsx9("div", { className: "nx-pb-page", children }), body) : null
+      ]
+    }
+  );
+}
+
+// src/admin/canvas/Canvas.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Canvas() {
+  const { state } = useEditor();
+  return /* @__PURE__ */ jsx10(IframeCanvas, { children: /* @__PURE__ */ jsx10(CanvasNode, { node: state.document.root }) });
+}
+
+// src/admin/logic/dragLabel.ts
+function dragLabel(data, root, registry) {
+  if (data.kind === "library" && data.blockType) {
+    return registry.get(data.blockType)?.label ?? data.blockType;
+  }
+  if (data.kind === "node" && data.nodeId) {
+    const node = findNode(root, data.nodeId);
+    const label = node ? registry.get(node.type)?.label : void 0;
+    return label ?? "Block";
+  }
+  return "Block";
+}
+
+// src/admin/logic/dropRules.ts
+function canDrop(parentType, slotName, childType, registry) {
+  const parent = registry.get(parentType);
+  if (!parent) return { ok: false, reason: "unknown-parent" };
+  if (!parent.isContainer) return { ok: false, reason: "not-a-container" };
+  const slot = (parent.slots ?? []).find((s) => s.name === slotName);
+  if (!slot) return { ok: false, reason: "unknown-slot" };
+  if (slot.allowedBlocks && !slot.allowedBlocks.includes(childType)) {
+    return { ok: false, reason: "not-allowed-in-slot" };
+  }
+  return { ok: true };
+}
+
+// src/admin/logic/locate.ts
+function locateNode(root, id) {
+  const stack = [root];
+  while (stack.length) {
+    const node = stack.pop();
+    if (node.slots) {
+      for (const [slot, children] of Object.entries(node.slots)) {
+        const index = children.findIndex((c) => c.id === id);
+        if (index !== -1) {
+          return { parentId: node.id, slot, index, count: children.length };
+        }
+        stack.push(...children);
+      }
+    }
+  }
+  return null;
+}
+
+// src/admin/logic/dropPlan.ts
+function planDrop(source, target, root, registry) {
+  if (target.kind !== "dropzone" || target.parentId == null || target.slot == null) {
+    return null;
+  }
+  const parent = findNode(root, target.parentId);
+  if (!parent) return null;
+  const index = target.index ?? 0;
+  if (source.kind === "library" && source.blockType) {
+    if (!canDrop(parent.type, target.slot, source.blockType, registry).ok)
+      return null;
+    return {
+      type: "ADD",
+      parentId: target.parentId,
+      slot: target.slot,
+      nodeType: source.blockType,
+      index
+    };
+  }
+  if (source.kind === "node" && source.nodeId) {
+    const moving = findNode(root, source.nodeId);
+    if (!moving) return null;
+    if (findNode(moving, target.parentId)) return null;
+    if (!canDrop(parent.type, target.slot, moving.type, registry).ok)
+      return null;
+    let toIndex = index;
+    const loc = locateNode(root, source.nodeId);
+    if (loc && loc.parentId === target.parentId && loc.slot === target.slot) {
+      if (index === loc.index || index === loc.index + 1) return null;
+      if (index > loc.index) toIndex = index - 1;
+    }
+    return {
+      type: "MOVE",
+      id: source.nodeId,
+      parentId: target.parentId,
+      slot: target.slot,
+      index: toIndex
+    };
+  }
+  return null;
+}
+
+// src/admin/panels/BlockLibrary.tsx
+import { useDraggable as useDraggable2 } from "@dnd-kit/react";
+import { useMemo, useState as useState6 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var CATEGORY_ORDER = ["basic", "layout", "media", "dynamic"];
+function LibraryItem({ def }) {
+  const { state, dispatch } = useEditor();
+  const { ref, isDragging } = useDraggable2({
+    id: `lib:${def.type}`,
+    type: "nx-block",
+    data: { kind: "library", blockType: def.type },
+    sensors: dragSensors
+  });
+  const Icon = blockIcon(def.icon);
+  const insert = () => {
+    const root = state.document.root;
+    const selected = state.selectedId ? findNode(root, state.selectedId) : void 0;
+    const container = selected && defaultBlockRegistry.get(selected.type)?.isContainer ? selected : root;
+    const slot = DEFAULT_SLOT;
+    const index = container.slots?.[slot]?.length ?? 0;
+    dispatch({
+      type: "ADD",
+      parentId: container.id,
+      slot,
+      nodeType: def.type,
+      index
+    });
+  };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ref,
+      className: "nx-pb-lib-item",
+      "data-dragging": isDragging || void 0,
+      title: `Drag ${def.label} onto the canvas`,
+      children: [
+        /* @__PURE__ */ jsx11(Icon, { "aria-hidden": true }),
+        /* @__PURE__ */ jsx11("span", { className: "nx-pb-lib-item-label", children: def.label }),
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            className: "nx-pb-lib-item-insert",
+            onClick: insert,
+            "aria-label": `Insert ${def.label}`,
+            children: "Insert"
+          }
+        )
+      ]
+    }
+  );
+}
+function Category({ name, defs }) {
+  const [open, setOpen] = useState6(true);
+  const Chevron = open ? ChevronDown : ChevronRight;
+  return /* @__PURE__ */ jsxs8("div", { className: "nx-pb-lib-cat", children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        className: "nx-pb-lib-cat-btn",
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsx11(Chevron, { "aria-hidden": true }),
+          name
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx11("div", { className: "nx-pb-lib-grid", children: defs.map((def) => /* @__PURE__ */ jsx11(LibraryItem, { def }, def.type)) }) : null
+  ] });
+}
+function BlockLibrary() {
+  const [query, setQuery] = useState6("");
+  const categories = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const byCategory = /* @__PURE__ */ new Map();
+    for (const def of defaultBlockRegistry.all()) {
+      if (q && !def.label.toLowerCase().includes(q)) continue;
+      const list = byCategory.get(def.category) ?? [];
+      list.push(def);
+      byCategory.set(def.category, list);
+    }
+    return [...byCategory.keys()].sort((a, b) => CATEGORY_ORDER.indexOf(a) - CATEGORY_ORDER.indexOf(b)).map((name) => ({ name, defs: byCategory.get(name) }));
+  }, [query]);
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx11("div", { className: "nx-pb-pane-header", children: "Blocks" }),
+    /* @__PURE__ */ jsxs8("div", { className: "nx-pb-lib-search", children: [
+      /* @__PURE__ */ jsx11(Search, { "aria-hidden": true }),
+      /* @__PURE__ */ jsx11(
+        "input",
+        {
+          type: "search",
+          value: query,
+          placeholder: "Search blocks",
+          "aria-label": "Search blocks",
+          onChange: (e) => setQuery(e.target.value)
+        }
+      )
+    ] }),
+    categories.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "nx-pb-lib-empty", children: [
+      "No blocks match \u201C",
+      query,
+      "\u201D."
+    ] }) : categories.map(({ name, defs }) => (
+      // Remount per query so a filtered category always shows expanded.
+      /* @__PURE__ */ jsx11(
+        Category,
+        {
+          name,
+          defs
+        },
+        `${name}:${query ? "q" : ""}`
+      )
+    ))
+  ] });
+}
+
+// src/admin/panels/Inspector.tsx
+import {
+  Input as Input6,
+  Label as Label2,
+  Select as Select3,
+  SelectContent as SelectContent3,
+  SelectItem as SelectItem3,
+  SelectTrigger as SelectTrigger3,
+  SelectValue as SelectValue3,
+  Switch as Switch2,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "@nextlyhq/ui";
+import { useEffect as useEffect5, useState as useState8 } from "react";
+
+// src/admin/content/contentFields.ts
+var TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "textarea",
+  "select",
+  "number",
+  "boolean",
+  "link",
+  "media"
+]);
+function narrowContentFields(fields) {
+  if (!Array.isArray(fields)) return [];
+  const out = [];
+  for (const f of fields) {
+    if (!f || typeof f !== "object") continue;
+    const r = f;
+    if (typeof r.name !== "string") continue;
+    if (typeof r.type !== "string" || !TYPES.has(r.type)) {
+      continue;
+    }
+    out.push({
+      name: r.name,
+      type: r.type,
+      label: typeof r.label === "string" ? r.label : r.name,
+      default: r.default,
+      options: Array.isArray(r.options) ? r.options : void 0,
+      placeholder: typeof r.placeholder === "string" ? r.placeholder : void 0,
+      bindable: r.bindable === true
+    });
+  }
+  return out;
+}
+
+// src/admin/logic/queryLoop.ts
+function findEnclosingLoop(root, id) {
+  let found;
+  const visit = (node, loop) => {
+    if (node.id === id) {
+      found = loop;
+      return true;
+    }
+    const nextLoop = node.type === QUERY_LOOP_TYPE ? node : loop;
+    if (node.slots) {
+      for (const children of Object.values(node.slots)) {
+        for (const child of children) {
+          if (visit(child, nextLoop)) return true;
+        }
+      }
+    }
+    return false;
+  };
+  visit(root, void 0);
+  return found;
+}
+function buildSort(field, dir) {
+  if (!field) return "";
+  return dir === "desc" ? `-${field}` : field;
+}
+function parseSort(sort) {
+  if (!sort) return { field: "", dir: "asc" };
+  return sort.startsWith("-") ? { field: sort.slice(1), dir: "desc" } : { field: sort, dir: "asc" };
+}
+
+// src/admin/panels/inspectorTabs.ts
+function firstPopulatedTab(def) {
+  if ((def?.contentFields?.length ?? 0) > 0) return "content";
+  if ((def?.styleControls?.length ?? 0) > 0) return "style";
+  return "advanced";
+}
+
+// src/admin/panels/QueryLoopSettings.tsx
+import {
+  Input as Input5,
+  Select as Select2,
+  SelectContent as SelectContent2,
+  SelectItem as SelectItem2,
+  SelectTrigger as SelectTrigger2,
+  SelectValue as SelectValue2
+} from "@nextlyhq/ui";
+import { useEffect as useEffect4, useState as useState7 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var NONE = "__none__";
+function str4(v) {
+  return typeof v === "string" ? v : "";
+}
+function QueryLoopSettings({ node }) {
+  const { dispatch } = useEditor();
+  const props = node.props;
+  const collection = str4(props.collection);
+  const [collections, setCollections] = useState7([]);
+  const [fields, setFields] = useState7([]);
+  const [error, setError] = useState7(null);
+  const set = (patch) => dispatch({ type: "UPDATE_PROPS", id: node.id, props: patch });
+  useEffect4(() => {
+    let alive = true;
+    listCollections().then((c) => alive && setCollections(c)).catch((e) => alive && setError(e.message));
+    return () => {
+      alive = false;
+    };
+  }, []);
+  useEffect4(() => {
+    let alive = true;
+    if (!collection) {
+      setFields([]);
+      return;
+    }
+    getCollectionFields(collection).then((f) => alive && setFields(f)).catch(() => alive && setFields([]));
+    return () => {
+      alive = false;
+    };
+  }, [collection]);
+  const sort = parseSort(str4(props.sort));
+  const limit = typeof props.limit === "number" ? props.limit : 10;
+  const columns = typeof props.columns === "number" ? props.columns : 1;
+  const where = props.where ?? {};
+  const filterField = Object.keys(where)[0] ?? "";
+  const filterValue = filterField ? str4(where[filterField]?.equals) : "";
+  const setSort = (field, dir) => set({ sort: buildSort(field === NONE ? "" : field, dir) });
+  const setFilter = (field, value) => {
+    if (!field || field === NONE || value === "")
+      return set({ where: void 0 });
+    set({ where: { [field]: { equals: value } } });
+  };
+  return /* @__PURE__ */ jsxs9("div", { style: { display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ jsx12("div", { className: "nx-pb-section-label", children: "Data source" }),
+    /* @__PURE__ */ jsx12("label", { className: "nx-pb-control-label", children: "Collection" }),
+    /* @__PURE__ */ jsxs9(
+      Select2,
+      {
+        value: collection || NONE,
+        onValueChange: (v) => set({ collection: v === NONE ? "" : v }),
+        children: [
+          /* @__PURE__ */ jsx12(SelectTrigger2, { "aria-label": "Collection", children: /* @__PURE__ */ jsx12(SelectValue2, { placeholder: "Choose a collection\u2026" }) }),
+          /* @__PURE__ */ jsxs9(SelectContent2, { children: [
+            /* @__PURE__ */ jsx12(SelectItem2, { value: NONE, children: "Choose a collection\u2026" }),
+            collections.map((c) => /* @__PURE__ */ jsx12(SelectItem2, { value: c.slug, children: c.label }, c.slug))
+          ] })
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsxs9("p", { className: "nx-pb-empty", style: { color: "hsl(var(--destructive))" }, children: [
+      "Couldn\u2019t load collections: ",
+      error
+    ] }) : null,
+    /* @__PURE__ */ jsx12("div", { className: "nx-pb-section-label", children: "Order & layout" }),
+    /* @__PURE__ */ jsx12("label", { className: "nx-pb-control-label", children: "Sort by" }),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ jsxs9(
+        Select2,
+        {
+          value: sort.field || NONE,
+          onValueChange: (v) => setSort(v, sort.dir),
+          children: [
+            /* @__PURE__ */ jsx12(SelectTrigger2, { "aria-label": "Sort field", style: { flex: 1 }, children: /* @__PURE__ */ jsx12(SelectValue2, { placeholder: "Default" }) }),
+            /* @__PURE__ */ jsxs9(SelectContent2, { children: [
+              /* @__PURE__ */ jsx12(SelectItem2, { value: NONE, children: "Default order" }),
+              fields.map((f) => /* @__PURE__ */ jsx12(SelectItem2, { value: f.name, children: f.label }, f.name))
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs9(
+        Select2,
+        {
+          value: sort.dir,
+          onValueChange: (v) => setSort(sort.field, v),
+          children: [
+            /* @__PURE__ */ jsx12(SelectTrigger2, { "aria-label": "Sort direction", style: { width: 110 }, children: /* @__PURE__ */ jsx12(SelectValue2, {}) }),
+            /* @__PURE__ */ jsxs9(SelectContent2, { children: [
+              /* @__PURE__ */ jsx12(SelectItem2, { value: "asc", children: "Asc" }),
+              /* @__PURE__ */ jsx12(SelectItem2, { value: "desc", children: "Desc" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ jsxs9("label", { className: "nx-pb-control-label", style: { flex: 1 }, children: [
+        "Items",
+        /* @__PURE__ */ jsx12(
+          Input5,
+          {
+            type: "number",
+            min: 1,
+            value: limit,
+            "aria-label": "Limit",
+            onChange: (e) => set({
+              limit: e.target.value === "" ? void 0 : Number(e.target.value)
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs9("label", { className: "nx-pb-control-label", style: { flex: 1 }, children: [
+        "Columns",
+        /* @__PURE__ */ jsx12(
+          Input5,
+          {
+            type: "number",
+            min: 1,
+            max: 12,
+            value: columns,
+            "aria-label": "Columns",
+            onChange: (e) => set({
+              columns: e.target.value === "" ? 1 : Number(e.target.value)
+            })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "nx-pb-section-label", children: "Filter" }),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ jsxs9(
+        Select2,
+        {
+          value: filterField || NONE,
+          onValueChange: (v) => setFilter(v, v === NONE ? "" : filterValue),
+          children: [
+            /* @__PURE__ */ jsx12(SelectTrigger2, { "aria-label": "Filter field", style: { flex: 1 }, children: /* @__PURE__ */ jsx12(SelectValue2, { placeholder: "No filter" }) }),
+            /* @__PURE__ */ jsxs9(SelectContent2, { children: [
+              /* @__PURE__ */ jsx12(SelectItem2, { value: NONE, children: "No filter" }),
+              fields.map((f) => /* @__PURE__ */ jsx12(SelectItem2, { value: f.name, children: f.label }, f.name))
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        Input5,
+        {
+          value: filterValue,
+          placeholder: "equals\u2026",
+          "aria-label": "Filter value",
+          disabled: !filterField,
+          style: { flex: 1 },
+          onChange: (e) => setFilter(filterField, e.target.value)
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/admin/panels/Inspector.tsx
+import { Fragment, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var NONE2 = "__none__";
+registerDefaultControls();
+var BASE2 = "base";
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx13("div", { className: "nx-pb-section-label", children });
+}
+function Empty({ children }) {
+  return /* @__PURE__ */ jsx13("p", { className: "nx-pb-empty", children });
+}
+function Segmented({
+  value,
+  options,
+  onChange,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx13("div", { className: "nx-pb-seg", role: "group", "aria-label": ariaLabel, children: options.map((o) => /* @__PURE__ */ jsx13(
+    "button",
+    {
+      type: "button",
+      className: "nx-pb-seg-btn",
+      "aria-pressed": value === o.value,
+      onClick: () => onChange(o.value),
+      children: o.label
+    },
+    o.value
+  )) });
+}
+function previewText(v) {
+  if (v == null) return "\u2014";
+  let s;
+  if (typeof v === "string") s = v;
+  else if (typeof v === "number" || typeof v === "boolean") s = String(v);
+  else s = JSON.stringify(v) ?? "\u2014";
+  return s.length > 40 ? `${s.slice(0, 40)}\u2026` : s;
+}
+function BindingPathEditor({
+  node,
+  field,
+  binding
+}) {
+  const { state, dispatch } = useEditor();
+  const loop = findEnclosingLoop(state.document.root, node.id);
+  const collection = loop && typeof loop.props.collection === "string" ? loop.props.collection : "";
+  const [fields, setFields] = useState8([]);
+  const [sample, setSample] = useState8(null);
+  const setPath = (path) => dispatch({
+    type: "SET_BINDING",
+    id: node.id,
+    prop: field.name,
+    binding: { source: "field", path }
+  });
+  useEffect5(() => {
+    let alive = true;
+    if (!collection) {
+      setFields([]);
+      setSample(null);
+      return;
+    }
+    getCollectionFields(collection).then((f) => alive && setFields(f)).catch(() => alive && setFields([]));
+    getSampleEntries(collection, { limit: 1 }).then((rows) => alive && setSample(rows[0] ?? null)).catch(() => alive && setSample(null));
+    return () => {
+      alive = false;
+    };
+  }, [collection]);
+  if (!collection || fields.length === 0) {
+    return /* @__PURE__ */ jsxs10(Fragment, { children: [
+      /* @__PURE__ */ jsx13(
+        Input6,
+        {
+          value: binding.path,
+          placeholder: "field path, e.g. title or author.name",
+          "aria-label": `${field.label} binding path`,
+          onChange: (e) => setPath(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx13("p", { className: "nx-pb-empty", style: { marginTop: 2 }, children: "Resolves from the current Query Loop item." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsxs10(
+      Select3,
+      {
+        value: binding.path || NONE2,
+        onValueChange: (v) => setPath(v === NONE2 ? "" : v),
+        children: [
+          /* @__PURE__ */ jsx13(SelectTrigger3, { "aria-label": `${field.label} field`, children: /* @__PURE__ */ jsx13(SelectValue3, { placeholder: "Choose a field\u2026" }) }),
+          /* @__PURE__ */ jsxs10(SelectContent3, { children: [
+            /* @__PURE__ */ jsx13(SelectItem3, { value: NONE2, children: "Choose a field\u2026" }),
+            fields.map((f) => /* @__PURE__ */ jsx13(SelectItem3, { value: f.name, children: f.label }, f.name))
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx13("p", { className: "nx-pb-empty", style: { marginTop: 2 }, children: binding.path ? /* @__PURE__ */ jsxs10(Fragment, { children: [
+      "Preview:",
+      " ",
+      /* @__PURE__ */ jsx13("strong", { children: previewText(getPath(sample ?? {}, binding.path)) })
+    ] }) : "Pick a field from the loop collection." })
+  ] });
+}
+function BindableField({
+  node,
+  field
+}) {
+  const { dispatch } = useEditor();
+  const bound = node.bindings?.[field.name];
+  if (!field.bindable) {
+    return renderControl(field.type, {
+      label: field.label,
+      field,
+      value: node.props[field.name],
+      onChange: (value) => dispatch({
+        type: "UPDATE_PROPS",
+        id: node.id,
+        props: { [field.name]: value }
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs10("div", { style: { marginBottom: 10 }, children: [
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 4
+        },
+        children: [
+          /* @__PURE__ */ jsx13(Label2, { className: "nx-pb-control-label", children: field.label }),
+          /* @__PURE__ */ jsxs10(
+            "label",
+            {
+              className: "nx-pb-control-label",
+              style: { display: "flex", alignItems: "center", gap: 6 },
+              children: [
+                "Bind",
+                /* @__PURE__ */ jsx13(
+                  Switch2,
+                  {
+                    checked: !!bound,
+                    onCheckedChange: (on) => dispatch({
+                      type: "SET_BINDING",
+                      id: node.id,
+                      prop: field.name,
+                      binding: on ? { source: "field", path: "" } : null
+                    })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    bound ? /* @__PURE__ */ jsx13(BindingPathEditor, { node, field, binding: bound }) : renderControl(field.type, {
+      field,
+      value: node.props[field.name],
+      onChange: (value) => dispatch({
+        type: "UPDATE_PROPS",
+        id: node.id,
+        props: { [field.name]: value }
+      })
+    })
+  ] });
+}
+function ContentTab({ node }) {
+  if (node.type === QUERY_LOOP_TYPE) {
+    return /* @__PURE__ */ jsx13(QueryLoopSettings, { node });
+  }
+  const def = defaultBlockRegistry.get(node.type);
+  const fields = narrowContentFields(def?.contentFields);
+  if (fields.length === 0) {
+    return /* @__PURE__ */ jsx13(Empty, { children: "This block has no content options." });
+  }
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsx13(SectionLabel, { children: "Content" }),
+    fields.map((field) => /* @__PURE__ */ jsx13(BindableField, { node, field }, field.name))
+  ] });
+}
+function StyleTab({
+  node,
+  styleState,
+  setStyleState
+}) {
+  const { state, dispatch } = useEditor();
+  const def = defaultBlockRegistry.get(node.type);
+  const controls = def?.styleControls ?? [];
+  const bp = state.activeBreakpoint;
+  const tree = styleState === "hover" ? node.styleHover : node.style;
+  if (controls.length === 0) {
+    return /* @__PURE__ */ jsx13(Empty, { children: "This block has no style options." });
+  }
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 12
+        },
+        children: [
+          /* @__PURE__ */ jsx13(
+            Segmented,
+            {
+              value: styleState,
+              onChange: setStyleState,
+              ariaLabel: "Style state",
+              options: [
+                { value: "normal", label: "Normal" },
+                { value: "hover", label: "Hover" }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: "nx-pb-device-badge",
+              "data-active": bp !== BASE2 || void 0,
+              title: "Editing styles for this device (change with the toolbar)",
+              children: bp === BASE2 ? "Desktop" : bp
+            }
+          )
+        ]
+      }
+    ),
+    styleState === "hover" ? /* @__PURE__ */ jsxs10("p", { className: "nx-pb-empty", style: { margin: "0 0 10px" }, children: [
+      "Applied on ",
+      /* @__PURE__ */ jsx13("strong", { children: ":hover" }),
+      "; empty values fall back to Normal."
+    ] }) : null,
+    /* @__PURE__ */ jsx13(SectionLabel, { children: "Style" }),
+    controls.map((ref) => /* @__PURE__ */ jsx13("div", { children: renderControl(ref.control, {
+      label: ref.label,
+      value: readStyleValue(tree, ref.styleKey, bp),
+      onChange: (value) => dispatch({
+        type: "UPDATE_STYLE",
+        id: node.id,
+        breakpoint: bp,
+        styleState,
+        style: { [ref.styleKey]: value }
+      })
+    }) }, `${ref.control}:${ref.styleKey}`))
+  ] });
+}
+function AdvancedTab({ node }) {
+  const { state, dispatch } = useEditor();
+  const loc = locateNode(state.document.root, node.id);
+  const move = (delta) => {
+    if (!loc) return;
+    const next = loc.index + delta;
+    if (next < 0 || next >= loc.count) return;
+    dispatch({
+      type: "MOVE",
+      id: node.id,
+      parentId: loc.parentId,
+      slot: loc.slot,
+      index: next
+    });
+  };
+  return /* @__PURE__ */ jsxs10("div", { style: { display: "grid", gap: 14 }, children: [
+    loc ? /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx13(SectionLabel, { children: "Arrange" }),
+      /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 6 }, children: [
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            className: "nx-pb-icon-btn",
+            disabled: loc.index <= 0,
+            "aria-label": "Move block up",
+            onClick: () => move(-1),
+            children: [
+              /* @__PURE__ */ jsx13(ArrowUp, { size: 15, "aria-hidden": true }),
+              " Up"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            className: "nx-pb-icon-btn",
+            disabled: loc.index >= loc.count - 1,
+            "aria-label": "Move block down",
+            onClick: () => move(1),
+            children: [
+              /* @__PURE__ */ jsx13(ArrowDown, { size: 15, "aria-hidden": true }),
+              " Down"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            className: "nx-pb-icon-btn",
+            "aria-label": "Duplicate block",
+            onClick: () => dispatch({ type: "DUPLICATE", id: node.id }),
+            children: [
+              /* @__PURE__ */ jsx13(Copy, { size: 15, "aria-hidden": true }),
+              " Duplicate"
+            ]
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx13(SectionLabel, { children: "Custom CSS class" }),
+      renderControl("text", {
+        value: node.customClass ?? "",
+        onChange: (value) => dispatch({
+          type: "SET_CUSTOM_CLASS",
+          id: node.id,
+          customClass: typeof value === "string" ? value : ""
+        })
+      })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "nx-pb-empty", children: [
+      "Type ",
+      /* @__PURE__ */ jsx13("code", { children: node.type })
+    ] }),
+    /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        type: "button",
+        className: "nx-pb-icon-btn",
+        "aria-label": "Delete block",
+        style: {
+          color: "hsl(var(--destructive))",
+          borderColor: "hsl(var(--destructive) / 0.4)"
+        },
+        onClick: () => dispatch({ type: "REMOVE", id: node.id }),
+        children: [
+          /* @__PURE__ */ jsx13(Trash2, { size: 15, "aria-hidden": true }),
+          " Delete block"
+        ]
+      }
+    )
+  ] });
+}
+function Inspector() {
+  const { state } = useEditor();
+  const [tab, setTab] = useState8("content");
+  const [styleState, setStyleState] = useState8("normal");
+  const node = state.selectedId ? findNode(state.document.root, state.selectedId) : void 0;
+  const def = node ? defaultBlockRegistry.get(node.type) : void 0;
+  useEffect5(() => {
+    const initial = node?.type === QUERY_LOOP_TYPE ? "content" : firstPopulatedTab(def);
+    setTab(initial);
+    setStyleState("normal");
+  }, [state.selectedId]);
+  if (!node) {
+    return /* @__PURE__ */ jsxs10(Fragment, { children: [
+      /* @__PURE__ */ jsx13("div", { className: "nx-pb-pane-header", children: "Settings" }),
+      /* @__PURE__ */ jsx13("div", { className: "nx-pb-inspector-empty", children: "Select a block on the canvas to edit its content and style." })
+    ] });
+  }
+  const Icon = blockIcon(def?.icon);
+  return /* @__PURE__ */ jsxs10("div", { className: "nx-pb-inspector", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "nx-pb-inspector-header", children: [
+      /* @__PURE__ */ jsx13("span", { className: "nx-pb-block-icon", children: /* @__PURE__ */ jsx13(Icon, { size: 16, "aria-hidden": true }) }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx13("div", { className: "nx-pb-inspector-title", children: def?.label ?? node.type }),
+        /* @__PURE__ */ jsx13("div", { className: "nx-pb-inspector-sub", children: def?.category ?? "block" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs10(
+      Tabs,
+      {
+        value: tab,
+        onValueChange: (v) => setTab(v),
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          minHeight: 0
+        },
+        children: [
+          /* @__PURE__ */ jsxs10(TabsList, { style: { margin: "10px 12px 0" }, children: [
+            /* @__PURE__ */ jsx13(TabsTrigger, { value: "content", children: "Content" }),
+            /* @__PURE__ */ jsx13(TabsTrigger, { value: "style", children: "Style" }),
+            /* @__PURE__ */ jsx13(TabsTrigger, { value: "advanced", children: "Advanced" })
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { style: { padding: 12, overflow: "auto", flex: 1 }, children: [
+            /* @__PURE__ */ jsx13(TabsContent, { value: "content", children: /* @__PURE__ */ jsx13(ContentTab, { node }) }),
+            /* @__PURE__ */ jsx13(TabsContent, { value: "style", children: /* @__PURE__ */ jsx13(
+              StyleTab,
+              {
+                node,
+                styleState,
+                setStyleState
+              }
+            ) }),
+            /* @__PURE__ */ jsx13(TabsContent, { value: "advanced", children: /* @__PURE__ */ jsx13(AdvancedTab, { node }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/admin/EditorSurface.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var BREAKPOINTS = [
+  { id: "base", label: "Desktop", Icon: Monitor },
+  { id: "tablet", label: "Tablet", Icon: Tablet },
+  { id: "mobile", label: "Mobile", Icon: Smartphone }
+];
+function EditorSurface() {
+  const { state, dispatch } = useEditor();
+  const root = state.document.root;
+  const onDragEnd = (event) => {
+    if (event.canceled) return;
+    const { source, target } = event.operation;
+    if (!source || !target) return;
+    const action = planDrop(
+      source.data ?? {},
+      target.data ?? {},
+      root,
+      defaultBlockRegistry
+    );
+    if (action) dispatch(action);
+  };
+  return /* @__PURE__ */ jsxs11(DragDropProvider, { onDragEnd, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "nx-pb-editor", children: [
+      /* @__PURE__ */ jsx14("div", { className: "nx-pb-toolbar", children: /* @__PURE__ */ jsx14("div", { className: "nx-pb-seg", role: "group", "aria-label": "Preview device", children: BREAKPOINTS.map(({ id, label, Icon }) => /* @__PURE__ */ jsxs11(
+        "button",
+        {
+          type: "button",
+          className: "nx-pb-seg-btn",
+          "aria-pressed": state.activeBreakpoint === id,
+          "aria-label": label,
+          onClick: () => dispatch({ type: "SET_BREAKPOINT", breakpoint: id }),
+          children: [
+            /* @__PURE__ */ jsx14(Icon, { size: 15, "aria-hidden": true }),
+            label
+          ]
+        },
+        id
+      )) }) }),
+      /* @__PURE__ */ jsxs11("div", { className: "nx-pb-body", children: [
+        /* @__PURE__ */ jsx14("aside", { className: "nx-pb-pane nx-pb-pane--left", children: /* @__PURE__ */ jsx14(BlockLibrary, {}) }),
+        /* @__PURE__ */ jsx14("main", { className: "nx-pb-pane--center", children: /* @__PURE__ */ jsx14(Canvas, {}) }),
+        /* @__PURE__ */ jsx14("aside", { className: "nx-pb-pane nx-pb-pane--right", children: /* @__PURE__ */ jsx14(Inspector, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14(DragOverlay, { children: (source) => /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "6px 12px",
+          borderRadius: "var(--radius)",
+          background: "hsl(var(--primary))",
+          color: "hsl(var(--primary-foreground))",
+          fontSize: 13,
+          fontWeight: 600,
+          boxShadow: "0 8px 24px rgb(0 0 0 / 0.25)",
+          pointerEvents: "none",
+          whiteSpace: "nowrap"
+        },
+        children: [
+          /* @__PURE__ */ jsx14("span", { "aria-hidden": true, children: "\u283F" }),
+          dragLabel(source?.data ?? {}, root, defaultBlockRegistry)
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/admin/SaveShell.tsx
+import { Button as Button2, Input as Input7, Label as Label3 } from "@nextlyhq/ui";
+import { useState as useState9 } from "react";
+
+// src/admin/api/adminFetch.ts
+var ENTRIES = "/admin/api/collections/pages/entries";
+async function handle(res) {
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const message = typeof body.error === "string" && body.error || typeof body.message === "string" && body.message || `Request failed (${res.status})`;
+    throw new Error(message);
+  }
+  return body.item ?? body;
+}
+async function savePage(input) {
+  const { id, ...payload } = input;
+  const res = await fetch(id ? `${ENTRIES}/${id}` : ENTRIES, {
+    method: id ? "PATCH" : "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "same-origin",
+    body: JSON.stringify(payload)
+  });
+  return handle(res);
+}
+async function deletePage(id) {
+  const res = await fetch(`${ENTRIES}/${id}`, {
+    method: "DELETE",
+    credentials: "same-origin"
+  });
+  await handle(res);
+}
+
+// src/admin/SaveShell.tsx
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function SaveShell({ props }) {
+  const { state, dispatch } = useEditor();
+  const data = props.initialData ?? {};
+  const str5 = (v) => typeof v === "string" ? v : "";
+  const [title, setTitle] = useState9(str5(data.title));
+  const [slug, setSlug] = useState9(str5(data.slug));
+  const customCss = str5(data.customCss);
+  const [busy, setBusy] = useState9(false);
+  const [error, setError] = useState9(null);
+  async function save(status) {
+    if (!title.trim() || !slug.trim()) {
+      setError("Title and slug are required.");
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const entry = await savePage({
+        id: props.entryId,
+        title,
+        slug,
+        content: state.document,
+        customCss,
+        status
+      });
+      dispatch({ type: "MARK_SAVED" });
+      props.onSuccess?.(entry);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function remove() {
+    if (!props.entryId) {
+      props.onCancel?.();
+      return;
+    }
+    setBusy(true);
+    try {
+      await deletePage(props.entryId);
+      props.onDelete?.();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 12,
+        alignItems: "flex-end",
+        flexWrap: "wrap"
+      },
+      children: [
+        /* @__PURE__ */ jsxs12("div", { children: [
+          /* @__PURE__ */ jsx15(Label3, { htmlFor: "nx-pb-title", children: "Title" }),
+          /* @__PURE__ */ jsx15(
+            Input7,
+            {
+              id: "nx-pb-title",
+              value: title,
+              onChange: (e) => setTitle(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { children: [
+          /* @__PURE__ */ jsx15(Label3, { htmlFor: "nx-pb-slug", children: "Slug" }),
+          /* @__PURE__ */ jsx15(
+            Input7,
+            {
+              id: "nx-pb-slug",
+              value: slug,
+              onChange: (e) => setSlug(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 8, marginLeft: "auto" }, children: [
+          /* @__PURE__ */ jsx15(
+            Button2,
+            {
+              variant: "outline",
+              disabled: busy,
+              onClick: () => void save("draft"),
+              children: "Save Draft"
+            }
+          ),
+          /* @__PURE__ */ jsx15(Button2, { disabled: busy, onClick: () => void save("published"), children: "Publish" }),
+          /* @__PURE__ */ jsx15(Button2, { variant: "ghost", disabled: busy, onClick: () => void remove(), children: props.entryId ? "Delete" : "Cancel" })
+        ] }),
+        error ? /* @__PURE__ */ jsx15(
+          "p",
+          {
+            style: { color: "hsl(var(--destructive))", width: "100%", margin: 0 },
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/admin/PageBuilderEditView.tsx
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function emptyDoc() {
+  return {
+    version: 1,
+    root: makeNode("core/container", {}, void 0, { default: [] })
+  };
+}
+function PageBuilderEditView(props) {
+  const data = props.initialData ?? {};
+  const doc = data.content ?? emptyDoc();
+  return /* @__PURE__ */ jsx16(
+    EditorProvider,
+    {
+      document: doc,
+      draftKey: draftKeyFor(props.collectionSlug, props.entryId),
+      children: /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+        /* @__PURE__ */ jsx16(SaveShell, { props }),
+        /* @__PURE__ */ jsx16(EditorSurface, {})
+      ] })
+    }
+  );
+}
+
+// src/admin/PageBuilderField.tsx
+import { useController } from "react-hook-form";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function emptyDoc2() {
+  return {
+    version: 1,
+    root: makeNode("core/container", {}, void 0, { default: [] })
+  };
+}
+function isDocument(v) {
+  return typeof v === "object" && v !== null && "root" in v && typeof v.root === "object";
+}
+function PageBuilderField({ name, control }) {
+  const { field } = useController({ control, name });
+  const doc = isDocument(field.value) ? field.value : emptyDoc2();
+  return /* @__PURE__ */ jsx17(
+    EditorProvider,
+    {
+      document: doc,
+      draftKey: draftKeyFor("field", name),
+      onDocumentChange: (next) => field.onChange(next),
+      children: /* @__PURE__ */ jsx17(EditorSurface, {})
+    }
+  );
+}
+
+// src/admin/PageBuilderModeToggle.tsx
+import { Button as Button3 } from "@nextlyhq/ui";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function PageBuilderModeToggle({
+  controllerField,
+  value,
+  onChange
+}) {
+  if (!controllerField) return null;
+  const isBuilder = value === "builder";
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Editor mode",
+      className: "inline-flex items-center gap-0.5 rounded-md border border-border p-0.5",
+      children: [
+        /* @__PURE__ */ jsx18(
+          Button3,
+          {
+            type: "button",
+            size: "sm",
+            variant: isBuilder ? "ghost" : "default",
+            "aria-pressed": !isBuilder,
+            onClick: () => onChange?.("default"),
+            children: "Normal"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Button3,
+          {
+            type: "button",
+            size: "sm",
+            variant: isBuilder ? "default" : "ghost",
+            "aria-pressed": isBuilder,
+            onClick: () => onChange?.("builder"),
+            children: "Page Builder"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/admin/PageBuilderToggle.tsx
+import { Label as Label4, Switch as Switch3 } from "@nextlyhq/ui";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function isCanvasField(f) {
+  if (f.type === PAGE_BUILDER_TYPE) return true;
+  const component = f.admin?.component;
+  return typeof component === "string" && component.includes("plugin-page-builder");
+}
+function hasPageBuilderFields(fields) {
+  return fields.some((f) => f.name === EDITOR_MODE_FIELD) && fields.some(isCanvasField);
+}
+function addPageBuilderFields(fields) {
+  if (hasPageBuilderFields(fields)) return fields;
+  const editormode = {
+    id: "pb-editormode",
+    name: EDITOR_MODE_FIELD,
+    label: "Editor",
+    type: "select",
+    validation: {},
+    defaultValue: "default",
+    options: [
+      { value: "default", label: "Default" },
+      { value: "builder", label: "Page Builder" }
+    ],
+    // Hidden: stores the per-entry mode but never shows as a field. The choice is
+    // a toolbar toggle; it's also filtered out of the schema-builder field list.
+    admin: { hidden: true }
+  };
+  const content = {
+    id: "pb-content",
+    name: PAGE_BUILDER_CONTENT_FIELD,
+    label: "Page Builder",
+    type: PAGE_BUILDER_TYPE,
+    validation: {},
+    admin: { condition: { field: EDITOR_MODE_FIELD, equals: "builder" } }
+  };
+  return [...fields, editormode, content];
+}
+function removePageBuilderFields(fields) {
+  return fields.filter((f) => f.name !== EDITOR_MODE_FIELD && !isCanvasField(f));
+}
+function PageBuilderToggle({
+  fields,
+  setFields,
+  disabled
+}) {
+  const on = hasPageBuilderFields(fields);
+  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3 py-2", children: [
+    /* @__PURE__ */ jsx19(
+      Switch3,
+      {
+        checked: on,
+        disabled,
+        "aria-label": "Use Page Builder",
+        onCheckedChange: (next) => setFields(
+          next ? addPageBuilderFields(fields) : removePageBuilderFields(fields)
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx19(Label4, { className: "cursor-pointer", children: "Use Page Builder" }),
+    /* @__PURE__ */ jsx19("span", { className: "text-xs text-muted-foreground", children: "Let entries choose a visual Page Builder canvas instead of the fields." })
+  ] });
+}
+
+// src/admin/index.ts
+registerDefaultControls();
+var EDIT_VIEW_PATH = "@nextlyhq/plugin-page-builder/admin#PageBuilderEditView";
+var FIELD_PATH = "@nextlyhq/plugin-page-builder/admin#PageBuilderField";
+var TOGGLE_PATH = "@nextlyhq/plugin-page-builder/admin#PageBuilderToggle";
+var MODE_TOGGLE_PATH = "@nextlyhq/plugin-page-builder/admin#PageBuilderModeToggle";
+var COMPONENTS = {
+  [EDIT_VIEW_PATH]: PageBuilderEditView,
+  [FIELD_PATH]: PageBuilderField,
+  [TOGGLE_PATH]: PageBuilderToggle,
+  [MODE_TOGGLE_PATH]: PageBuilderModeToggle
+};
+registerComponents(COMPONENTS);
+registerKnownPlugin("@nextlyhq/plugin-page-builder", () => {
+  registerComponents(COMPONENTS);
+  return Promise.resolve();
+});
+export {
+  PageBuilderEditView,
+  PageBuilderField,
+  PageBuilderModeToggle,
+  PageBuilderToggle
+};
+//# sourceMappingURL=index.js.map