pagiera 0.2.0-alpha.39 → 0.2.0-alpha.40

package/dist/full-editor.js

@@ -37,11 +37,11 @@ import {
 import { AnimatePresence as AnimatePresence7, motion as motion7, useReducedMotion } from "motion/react";
 import {
   useCallback as useCallback3,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo3,
-  useRef as useRef4,
-  useState as useState13,
+  useMemo as useMemo4,
+  useRef as useRef5,
+  useState as useState14,
   useTransition as useTransition2
 } from "react";
 
@@ -3861,6 +3861,18 @@ function overrideChain(cascade, targetId) {
   between.sort((a, b) => goingNarrower ? b.width - a.width : a.width - b.width);
   return between.map((item) => item.id);
 }
+function mediaPlan(cascade) {
+  const base = baseOf(cascade);
+  const narrower = cascade.breakpoints.filter((item) => item.id !== base.id && item.width < base.width).sort((a, b) => b.width - a.width).map((item) => {
+    const ceiling = cascade.breakpoints.filter((other) => other.width > item.width).reduce(
+      (lowest, other) => Math.min(lowest, other.width),
+      Number.POSITIVE_INFINITY
+    );
+    return { id: item.id, query: `(max-width: ${ceiling - 1}px)` };
+  });
+  const wider = cascade.breakpoints.filter((item) => item.id !== base.id && item.width > base.width).sort((a, b) => a.width - b.width).map((item) => ({ id: item.id, query: `(min-width: ${item.width}px)` }));
+  return [...narrower, ...wider];
+}
 var chainCache = /* @__PURE__ */ new WeakMap();
 function chainFor(cascade, targetId) {
   let byTarget = chainCache.get(cascade);
@@ -4418,12 +4430,112 @@ function isNote(element, byId, breakpoint, frameWidth, rootLayout = "absolute",
   const right = x + (style.widthMode === "fixed" ? style.w : 0);
   return right <= 0 || x >= frameWidth;
 }
+function noteIds(elements, byId, breakpoint, frameWidth, rootLayout = "absolute", cascade = DEFAULT_CASCADE) {
+  const notes = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (isNote(element, byId, breakpoint, frameWidth, rootLayout, cascade)) {
+      for (const id of subtreeIds(elements, element.id)) notes.add(id);
+    }
+  }
+  return notes;
+}
 
 // src/internal/lib/render/css.ts
+var UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "zIndex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "lineHeight",
+  "order",
+  "fontWeight",
+  "columns"
+]);
+function kebab(property) {
+  return property.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+function declarationsToCss(css) {
+  return Object.entries(css).filter(([, value]) => value !== void 0 && value !== null && value !== "").map(([property, value]) => {
+    const rendered = typeof value === "number" && !UNITLESS.has(property) ? `${value}px` : String(value);
+    return `${kebab(property)}:${rendered}`;
+  }).join(";");
+}
+function classFor(id) {
+  return `pg-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
 var DEFAULT_PAGE_FONT = "ui-sans-serif, system-ui, sans-serif";
+function pageTransitionCss(rootStyle) {
+  const kind = rootStyle.pageTransition ?? "smooth";
+  if (kind === "none") return "html{scrollbar-gutter:stable}";
+  const duration = Math.max(120, Math.min(1200, rootStyle.pageTransitionDuration ?? 380));
+  const leaveDuration = Math.max(90, Math.round(duration * 0.48));
+  const frames = kind === "fade" ? {
+    leave: "to{opacity:0}",
+    enter: "from{opacity:0}to{opacity:1}"
+  } : kind === "slide" ? {
+    leave: "to{opacity:0;transform:translateX(-20px)}",
+    enter: "from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}"
+  } : {
+    leave: "to{opacity:0;transform:translateY(-6px);filter:blur(3px)}",
+    enter: "from{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}"
+  };
+  return `
+@view-transition{navigation:auto}
+html{scrollbar-gutter:stable}
+::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-fill-mode:both}
+::view-transition-old(root){animation:pg-page-leave ${leaveDuration}ms cubic-bezier(.4,0,1,1) both}
+::view-transition-new(root){animation:pg-page-enter ${duration}ms cubic-bezier(.16,1,.3,1) both}
+@keyframes pg-page-leave{${frames.leave}}
+@keyframes pg-page-enter{${frames.enter}}
+@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
+`;
+}
 function resolveFont(fontFamily) {
   return fontFamily === "inherit" || fontFamily === "" ? DEFAULT_PAGE_FONT : fontFamily;
 }
+function rulesFor(element, byId, breakpoint, rootStyle, cascade) {
+  const parent = element.parentId ? byId.get(element.parentId) : void 0;
+  const parentStyle = parent ? resolveStyle(parent, breakpoint, cascade) : void 0;
+  const style = resolveStyle(element, breakpoint, cascade);
+  const css = styleToCss(
+    style,
+    {
+      parentLayout: parentStyle?.layout ?? "stack",
+      parentDirection: parentStyle?.direction ?? "column",
+      parentAlign: parentStyle?.align ?? rootStyle.align
+    },
+    element
+  );
+  if (style.hidden) css.display = "none";
+  if (!isBand(element.type, style, rootStyle) || style.hidden) {
+    return [["", declarationsToCss(css)]];
+  }
+  const { shell, inner } = splitBand(css, rootStyle.maxWidth);
+  return [
+    ["", declarationsToCss(shell)],
+    [">.pg-inner", declarationsToCss(inner)]
+  ];
+}
+function interactionDeclarations(element, byId, breakpoint, rootStyle, cascade, patch) {
+  const parent = element.parentId ? byId.get(element.parentId) : void 0;
+  const parentStyle = parent ? resolveStyle(parent, breakpoint, cascade) : void 0;
+  const context = {
+    parentLayout: parentStyle?.layout ?? "stack",
+    parentDirection: parentStyle?.direction ?? "column",
+    parentAlign: parentStyle?.align ?? rootStyle.align
+  };
+  const resting = resolveStyle(element, breakpoint, cascade);
+  const restingCss = styleToCss(resting, context, element);
+  const activeCss = styleToCss({ ...resting, ...patch }, context, element);
+  const delta = {};
+  for (const property of Object.keys(activeCss)) {
+    if (activeCss[property] !== restingCss[property]) {
+      delta[property] = activeCss[property];
+    }
+  }
+  return declarationsToCss(delta);
+}
 var ENTRANCE_KEYFRAMES = `
 @keyframes pg-fade{from{opacity:0}to{opacity:1}}
 @keyframes pg-up{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@@ -4471,6 +4583,88 @@ var ENTRANCE_SCRIPT = `
   setTimeout(all,3000);
 })();
 `.trim();
+function hasEntrances(elements, cascade = DEFAULT_CASCADE) {
+  const baseId = baseOf(cascade).id;
+  return elements.some(
+    (el) => resolveStyle(el, baseId, cascade).entrance !== "none"
+  );
+}
+function stylesheetFor(elements, rootStyle) {
+  const byId = new Map(elements.map((el) => [el.id, el]));
+  const cascade = cascadeOf(rootStyle.breakpoints, rootStyle.baseBreakpointId);
+  const baseId = baseOf(cascade).id;
+  const parts = [];
+  parts.push(pageTransitionCss(rootStyle));
+  for (const font of rootStyle.customFonts ?? []) {
+    const family = font.name.replace(/["'{};]/g, "");
+    const rawUrl = font.url.replace(/["'()\\]/g, "");
+    const url = rawUrl === "/fonts/manrope-variable.woff2" ? "/api/pagiera/assets/manrope-variable.woff2" : rawUrl;
+    parts.push(`@font-face{font-family:"${family}";src:url("${url}") format("woff2");font-weight:${font.weight};font-style:${font.style};font-display:swap}`);
+  }
+  parts.push(`html,body{margin:0;padding:0;background:${rootStyle.bg}}`);
+  parts.push(`html{scroll-behavior:smooth}.pg-root{${declarationsToCss(rootStyleToCss(rootStyle))}}`);
+  parts.push(
+    // The font is pinned on `.pg-root` rather than on <body>: the app's
+    // layout puts a font class on <body>, which would out-specify an
+    // element selector and leak the editor's typeface into the site.
+    // The shell spans the viewport; the content width is applied by each
+    // band's inner box, so section backgrounds reach both edges.
+    `.pg-root{font-family:${resolveFont(rootStyle.fontFamily)}}.pg-node{box-sizing:border-box}.pg-node:is(input,textarea,button){font:inherit}.pg-node:is(input,textarea){outline:none}.pg-node:is(textarea){resize:none}.pg-form-status:empty{display:none}.pg-form-status{font-size:12px;line-height:1.4}.pg-node[data-pg-state=success] .pg-form-status{color:#22c55e}.pg-node[data-pg-state=error] .pg-form-status{color:#ef4444}.pg-node img{display:block;width:100%;height:100%}.pg-link{text-decoration:none;color:inherit}`
+  );
+  for (const element of elements) {
+    const emitted = rulesFor(element, byId, baseId, rootStyle, cascade).map(([suffix, decl]) => `.${classFor(element.id)}${suffix}{${decl}}`).join("");
+    parts.push(emitted);
+  }
+  for (const plan of mediaPlan(cascade)) {
+    const breakpoint = plan.id;
+    const affected = elements.filter((el) => {
+      if (el.overrides?.[breakpoint]) return true;
+      const parent = el.parentId ? byId.get(el.parentId) : void 0;
+      return Boolean(parent?.overrides?.[breakpoint]);
+    });
+    if (affected.length === 0) continue;
+    const rules = affected.flatMap(
+      (el) => rulesFor(el, byId, breakpoint, rootStyle, cascade).map(
+        ([suffix, decl]) => `.${classFor(el.id)}${suffix}{${decl}}`
+      )
+    ).join("");
+    parts.push(`@media ${plan.query}{${rules}}`);
+  }
+  if (hasEntrances(elements, cascade)) {
+    parts.push(ENTRANCE_KEYFRAMES);
+    for (const element of elements) {
+      const style = resolveStyle(element, baseId, cascade);
+      if (style.entrance === "none") continue;
+      parts.push(
+        `.pg-ready .${classFor(element.id)}.pg-in{animation:pg-${style.entrance} ${style.entranceDuration}ms ${style.entranceCurve === "spring" ? `cubic-bezier(.16,${1 + Math.max(0, 45 - style.springDamping) / 100},${Math.max(0.12, Math.min(0.52, 120 / style.springStiffness))},1)` : `cubic-bezier(${style.entranceBezier})`} ${style.entranceDelay}ms both}`
+      );
+    }
+  }
+  for (const element of elements) {
+    if (element.hover || element.press) parts.push(`.${classFor(element.id)}{transition:transform .42s cubic-bezier(.16,1,.3,1),scale .42s cubic-bezier(.16,1,.3,1),rotate .42s cubic-bezier(.16,1,.3,1),translate .42s cubic-bezier(.16,1,.3,1),background-color .32s ease,color .32s ease,border-color .32s ease,box-shadow .42s cubic-bezier(.16,1,.3,1),opacity .32s ease,filter .42s ease;will-change:transform}`);
+    if (element.hover && Object.keys(element.hover).length) parts.push(`.${classFor(element.id)}:hover{${interactionDeclarations(element, byId, baseId, rootStyle, cascade, element.hover)}}`);
+    if (element.press && Object.keys(element.press).length) parts.push(`.${classFor(element.id)}:active{${interactionDeclarations(element, byId, baseId, rootStyle, cascade, element.press)}}`);
+    if (element.loop) {
+      const name = element.loop.type;
+      parts.push(`.${classFor(element.id)}{animation:pg-loop-${name} ${element.loop.duration}ms ease-in-out infinite}`);
+    }
+  }
+  for (const plan of mediaPlan(cascade)) {
+    const rules = elements.flatMap((element) => {
+      if (!element.hover && !element.press) return [];
+      const parent = element.parentId ? byId.get(element.parentId) : void 0;
+      if (!element.overrides?.[plan.id] && !parent?.overrides?.[plan.id]) return [];
+      const selector = `.${classFor(element.id)}`;
+      return [
+        element.hover && Object.keys(element.hover).length ? `${selector}:hover{${interactionDeclarations(element, byId, plan.id, rootStyle, cascade, element.hover)}}` : "",
+        element.press && Object.keys(element.press).length ? `${selector}:active{${interactionDeclarations(element, byId, plan.id, rootStyle, cascade, element.press)}}` : ""
+      ].filter(Boolean);
+    }).join("");
+    if (rules) parts.push(`@media ${plan.query}{${rules}}`);
+  }
+  if (elements.some((element) => element.loop)) parts.push(`@keyframes pg-loop-pulse{0%,100%{scale:1}50%{scale:1.06}}@keyframes pg-loop-float{0%,100%{translate:0 0}50%{translate:0 -12px}}@keyframes pg-loop-spin{to{rotate:360deg}}@media(prefers-reduced-motion:reduce){.pg-node{animation:none!important}}`);
+  return parts.join("\n");
+}
 
 // src/internal/lib/editor/snap.ts
 var SNAP_THRESHOLD = 6;
@@ -9251,8 +9445,8 @@ function VariablesPanel({ rootStyle, selectedElement, setRootStyle, setElements
 // src/internal/app/p/editor/templates-panel.tsx
 import { IconAlertTriangle as IconAlertTriangle2, IconArrowUpRight, IconCheck as IconCheck5, IconRefresh, IconSearch as IconSearch4, IconSparkles as IconSparkles4, IconTemplate, IconX as IconX5 } from "@tabler/icons-react";
 import { AnimatePresence as AnimatePresence6, motion as motion6 } from "motion/react";
-import { useEffect as useEffect9, useMemo as useMemo2, useState as useState12 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { useEffect as useEffect10, useMemo as useMemo3, useState as useState13 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
 import { usePagieraFonts as usePagieraFonts2 } from "pagiera/provider";
 
 // src/internal/lib/editor/template-registry.ts
@@ -9381,8 +9575,370 @@ async function loadTemplateRegistry(url = DEFAULT_TEMPLATE_REGISTRY_URL, force =
   }
 }
 
+// src/internal/app/p/editor/template-preview.tsx
+import { useEffect as useEffect9, useMemo as useMemo2, useRef as useRef4, useState as useState12 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+
+// src/internal/lib/render/page-render.tsx
+import React2 from "react";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function RenderedPage({
+  elements: all,
+  rootStyle,
+  data = {}
+}) {
+  const frameWidth = rootStyle.fullWidth ? Number.POSITIVE_INFINITY : rootStyle.maxWidth;
+  const cascade = cascadeOf(rootStyle.breakpoints, rootStyle.baseBreakpointId);
+  const baseId = baseOf(cascade).id;
+  const notes = noteIds(all, indexById(all), baseId, frameWidth, rootStyle.layout, cascade);
+  const elements = all.filter((element) => !notes.has(element.id) && element.componentRole !== "master");
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx11(
+      "style",
+      {
+        dangerouslySetInnerHTML: { __html: stylesheetFor(elements, rootStyle) }
+      }
+    ),
+    /* @__PURE__ */ jsx11("main", { className: "pg-root", children: childrenOf(elements, void 0).map((el) => /* @__PURE__ */ jsx11(
+      RenderedNode,
+      {
+        element: el,
+        elements,
+        rootStyle,
+        data
+      },
+      el.id
+    )) }),
+    hasEntrances(elements) && /* @__PURE__ */ jsx11(
+      "script",
+      {
+        dangerouslySetInnerHTML: { __html: ENTRANCE_SCRIPT }
+      }
+    ),
+    elements.some((element) => element.draggable) && /* @__PURE__ */ jsx11("script", { dangerouslySetInnerHTML: { __html: DRAG_SCRIPT } }),
+    elements.some((element) => element.interaction && ["toggle-layer", "show-layer", "hide-layer"].includes(element.interaction.action)) && /* @__PURE__ */ jsx11("script", { dangerouslySetInnerHTML: { __html: ACTION_SCRIPT } }),
+    elements.some((element) => element.type === "Form" && element.formSubmitMode !== "native") && /* @__PURE__ */ jsx11("script", { dangerouslySetInnerHTML: { __html: FORM_SCRIPT } })
+  ] });
+}
+function RenderedNode({
+  element: raw,
+  elements,
+  rootStyle,
+  data,
+  row
+}) {
+  const cascade = cascadeOf(rootStyle.breakpoints, rootStyle.baseBreakpointId);
+  const baseId = baseOf(cascade).id;
+  const directRow = row ?? (raw.sourceId ? data[raw.sourceId]?.[0] : void 0);
+  const element = bindElement(raw, directRow);
+  const children = childrenOf(elements, element.id);
+  const style = resolveStyle(element, baseId, cascade);
+  const band = isBand(element.type, style, rootStyle);
+  const className = `pg-node ${classFor(element.id)}` + (band ? " pg-band" : "") + (style.entrance === "none" ? "" : " pg-anim");
+  const renderChildren = () => element.type === "Repeat" ? rowsFor(element, data, true).flatMap(
+    (dataRow, index) => children.map((child) => /* @__PURE__ */ jsx11(
+      RenderedNode,
+      {
+        element: child,
+        elements,
+        rootStyle,
+        data,
+        row: dataRow
+      },
+      `${index}:${child.id}`
+    ))
+  ) : children.map((child) => /* @__PURE__ */ jsx11(
+    RenderedNode,
+    {
+      element: child,
+      elements,
+      rootStyle,
+      data,
+      row: element.type === "Request" ? data[element.sourceId ?? ""]?.[0] : row
+    },
+    child.id
+  ));
+  const content = /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx11(ElementContent, { element }),
+    renderChildren(),
+    element.type === "Form" && /* @__PURE__ */ jsx11("span", { className: "pg-form-status", "data-pg-form-status": true, "aria-live": "polite" })
+  ] });
+  const body = band ? /* @__PURE__ */ jsx11("div", { className: "pg-inner", children: content }) : content;
+  const interactionHref = element.interaction?.action === "scroll-to" ? `#${classFor(element.interaction.value)}` : element.interaction?.action === "navigate" ? element.interaction.value : void 0;
+  const href = interactionHref || element.href;
+  const target = element.interaction?.target || element.target;
+  if (element.type === "Input") {
+    return /* @__PURE__ */ jsx11(
+      "input",
+      {
+        id: classFor(element.id),
+        className,
+        type: element.inputType ?? "text",
+        name: element.fieldName,
+        placeholder: element.placeholder,
+        required: element.required
+      }
+    );
+  }
+  if (element.type === "Textarea") {
+    return /* @__PURE__ */ jsx11(
+      "textarea",
+      {
+        id: classFor(element.id),
+        className,
+        name: element.fieldName,
+        placeholder: element.placeholder,
+        required: element.required,
+        defaultValue: element.content
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx11(
+      "a",
+      {
+        id: classFor(element.id),
+        "data-pg-drag": element.draggable ? "true" : void 0,
+        "data-pg-action": element.interaction?.action,
+        "data-pg-target": element.interaction && !["navigate", "scroll-to"].includes(element.interaction.action) ? classFor(element.interaction.value) : void 0,
+        className: `${className} pg-link`,
+        href,
+        target,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        children: body
+      }
+    );
+  }
+  const tag = semanticTag(element);
+  return React2.createElement(tag, {
+    id: classFor(element.id),
+    type: tag === "button" ? element.buttonType ?? "button" : void 0,
+    "data-pg-drag": element.draggable ? "true" : void 0,
+    "data-pg-action": element.interaction?.action,
+    "data-pg-target": element.interaction && !["navigate", "scroll-to"].includes(element.interaction.action) ? classFor(element.interaction.value) : void 0,
+    "data-pg-display": element.type === "Grid" || element.type === "Repeat" ? "grid" : isContainerType(element.type) || element.type === "Section" ? "flex" : "block",
+    className,
+    action: tag === "form" ? element.formAction : void 0,
+    method: tag === "form" ? element.formMethod === "GET" ? "get" : "post" : void 0,
+    "data-pg-form-mode": tag === "form" ? element.formSubmitMode ?? "request" : void 0,
+    "data-pg-form-method": tag === "form" ? element.formMethod ?? "POST" : void 0,
+    "data-pg-form-content": tag === "form" ? element.formContentType ?? "json" : void 0,
+    "data-pg-form-body": tag === "form" ? element.formBody : void 0,
+    "data-pg-form-headers": tag === "form" ? element.formHeaders : void 0,
+    "data-pg-form-success": tag === "form" ? element.formSuccessMessage ?? "Sent successfully." : void 0,
+    "data-pg-form-error": tag === "form" ? element.formErrorMessage ?? "Something went wrong." : void 0,
+    "data-pg-form-reset": tag === "form" && element.formResetOnSuccess ? "true" : void 0
+  }, body);
+}
+function semanticTag(element) {
+  const name = (element.name ?? "").toLowerCase();
+  if (element.type === "Button") return "button";
+  if (element.type === "Form") return "form";
+  if (element.type === "Heading") {
+    const level = name.match(/(?:^|\s)h([1-6])(?:\s|$)/)?.[1] ?? "2";
+    return `h${level}`;
+  }
+  if (element.type === "Text") return "p";
+  if (name.includes("navbar") || name === "nav" || name.includes("navigation")) return "nav";
+  if (name.includes("footer")) return "footer";
+  if (name.includes("header")) return "header";
+  if (element.type === "Section") return "section";
+  return "div";
+}
+var DRAG_SCRIPT = `(function(){document.querySelectorAll('[data-pg-drag]').forEach(function(n){n.style.touchAction='none';n.style.cursor='grab';n.addEventListener('pointerdown',function(e){if(e.button!==0)return;e.preventDefault();var sx=e.clientX,sy=e.clientY,ox=Number(n.dataset.dx||0),oy=Number(n.dataset.dy||0);n.setPointerCapture(e.pointerId);n.style.cursor='grabbing';var move=function(p){var x=ox+p.clientX-sx,y=oy+p.clientY-sy;n.dataset.dx=String(x);n.dataset.dy=String(y);n.style.translate=x+'px '+y+'px'};var up=function(){n.style.cursor='grab';n.removeEventListener('pointermove',move);n.removeEventListener('pointerup',up)};n.addEventListener('pointermove',move);n.addEventListener('pointerup',up)})})})();`;
+var ACTION_SCRIPT = `(function(){document.querySelectorAll('[data-pg-target]').forEach(function(trigger){trigger.style.cursor='pointer';trigger.addEventListener('click',function(event){var target=document.getElementById(trigger.dataset.pgTarget);if(!target)return;event.preventDefault();var action=trigger.dataset.pgAction;var open=target.dataset.pgOpen==='true';var next=action==='show-layer'?true:action==='hide-layer'?false:!open;target.dataset.pgOpen=next?'true':'false';target.style.setProperty('display',next?(target.dataset.pgDisplay||'flex'):'none','important');trigger.setAttribute('aria-expanded',String(next));target.setAttribute('aria-hidden',String(!next))})})})();`;
+var FORM_SCRIPT = `(function(){function headers(raw){var out={};String(raw||'').split(/\\r?\\n/).forEach(function(line){var at=line.indexOf(':');if(at>0)out[line.slice(0,at).trim()]=line.slice(at+1).trim()});return out}function fields(data){var out={};data.forEach(function(value,key){var next=value instanceof File?value.name:String(value);if(out[key]===undefined)out[key]=next;else if(Array.isArray(out[key]))out[key].push(next);else out[key]=[out[key],next]});return out}function tokens(value,map){return String(value||'').replace(/{{\\s*form\\.([A-Za-z0-9_.-]+)\\s*}}/g,function(_,key){var found=map[key];return found==null?'':Array.isArray(found)?found.join(','):String(found)})}document.querySelectorAll('form[data-pg-form-mode="request"]').forEach(function(form){if(form.dataset.pgFormBound)return;form.dataset.pgFormBound='true';form.addEventListener('submit',async function(event){event.preventDefault();var status=form.querySelector('[data-pg-form-status]');var submit=form.querySelector('[type="submit"]');var data=new FormData(form),map=fields(data),method=form.dataset.pgFormMethod||'POST',kind=form.dataset.pgFormContent||'json',url=form.getAttribute('action')||location.href,custom=tokens(form.dataset.pgFormBody,map),requestHeaders=headers(tokens(form.dataset.pgFormHeaders,map)),options={method:method,headers:requestHeaders};if(method==='GET'){var query=new URLSearchParams(custom||Object.entries(map).flatMap(function(pair){return Array.isArray(pair[1])?pair[1].map(function(value){return [pair[0],value]}):[[pair[0],pair[1]]] }));var target=new URL(url,location.href);query.forEach(function(value,key){target.searchParams.append(key,value)});url=target.href}else if(kind==='form-data'){if(custom){try{var parsed=JSON.parse(custom);Object.keys(parsed).forEach(function(key){data.set(key,String(parsed[key]))})}catch(_){data.set('_body',custom)}}options.body=data}else if(kind==='urlencoded'){options.body=custom||new URLSearchParams(Object.entries(map).flatMap(function(pair){return Array.isArray(pair[1])?pair[1].map(function(value){return [pair[0],value]}):[[pair[0],pair[1]]] })).toString();if(!requestHeaders['Content-Type'])requestHeaders['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'}else{options.body=custom||JSON.stringify(map);if(!requestHeaders['Content-Type'])requestHeaders['Content-Type']='application/json'}form.setAttribute('aria-busy','true');form.dataset.pgState='loading';if(submit)submit.disabled=true;if(status)status.textContent='';try{var response=await fetch(url,options);if(!response.ok)throw new Error('HTTP '+response.status);form.dataset.pgState='success';if(status)status.textContent=form.dataset.pgFormSuccess||'Sent successfully.';if(form.dataset.pgFormReset==='true')form.reset();form.dispatchEvent(new CustomEvent('pagiera:form-success',{bubbles:true,detail:{response:response}}))}catch(error){form.dataset.pgState='error';if(status)status.textContent=form.dataset.pgFormError||'Something went wrong.';form.dispatchEvent(new CustomEvent('pagiera:form-error',{bubbles:true,detail:{error:error}}))}finally{form.removeAttribute('aria-busy');if(submit)submit.disabled=false}})})})();`;
+function isContainerType(type) {
+  return ["Frame", "Stack", "Container", "Form", "Request", "Repeat"].includes(type);
+}
+function ElementContent({ element }) {
+  if (element.code) return /* @__PURE__ */ jsx11("iframe", { title: element.name ?? "Code component", srcDoc: element.code, sandbox: "", style: { width: "100%", height: "100%", border: 0, borderRadius: "inherit" } });
+  if (element.type === "Image") {
+    if (!element.src) return null;
+    return (
+      // biome-ignore lint/performance/noImgElement: the src is author-supplied at runtime and cannot be statically optimised
+      /* @__PURE__ */ jsx11(
+        "img",
+        {
+          src: element.src,
+          alt: element.alt ?? "",
+          style: { objectFit: element.objectFit ?? "cover", borderRadius: "inherit" }
+        }
+      )
+    );
+  }
+  if (element.type === "Video") {
+    if (!element.src) return null;
+    return /* @__PURE__ */ jsx11(
+      "iframe",
+      {
+        src: element.src,
+        title: element.name ?? "Video",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture",
+        allowFullScreen: true,
+        style: { width: "100%", height: "100%", border: 0, borderRadius: "inherit" }
+      }
+    );
+  }
+  if (element.type === "Icon") return /* @__PURE__ */ jsx11(IconGlyph, { element });
+  if (!element.content) return null;
+  return /* @__PURE__ */ jsx11("span", { style: { display: "block", width: "100%", whiteSpace: "pre-wrap" }, children: element.content });
+}
+
+// src/internal/app/p/editor/template-preview.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var FALLBACK_DEVICES = [
+  { id: "desktop", name: "Desktop", width: 1440 },
+  { id: "tablet", name: "Tablet", width: 834 },
+  { id: "mobile", name: "Mobile", width: 390 }
+];
+function previewUrlFor(templateId) {
+  return `${DEFAULT_TEMPLATE_REGISTRY_URL.replace(/registry\.json$/, "")}${encodeURIComponent(templateId)}/preview`;
+}
+function useTemplatePreview(templateId) {
+  const [pages, setPages] = useState12();
+  const [error, setError] = useState12("");
+  const [loading, setLoading] = useState12(false);
+  const cache = useRef4(/* @__PURE__ */ new Map());
+  useEffect9(() => {
+    if (!templateId) return;
+    const cached = cache.current.get(templateId);
+    if (cached) {
+      setPages(cached);
+      setError("");
+      return;
+    }
+    let active = true;
+    setLoading(true);
+    setError("");
+    setPages(void 0);
+    fetch(previewUrlFor(templateId), { headers: { Accept: "application/json" } }).then(async (response) => {
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(payload?.error ?? `Preview returned ${response.status}.`);
+      if (!Array.isArray(payload?.pages) || payload.pages.length === 0) {
+        throw new Error("This template has no previewable pages.");
+      }
+      return payload.pages;
+    }).then((result) => {
+      cache.current.set(templateId, result);
+      if (!active) return;
+      setPages(result);
+    }).catch((reason) => {
+      if (!active) return;
+      setError(reason instanceof Error ? reason.message : "Could not load the preview.");
+    }).finally(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [templateId]);
+  return { pages, loading, error };
+}
+function devicesFor(page) {
+  const defined = page?.rootStyle.breakpoints;
+  if (!defined?.length) return FALLBACK_DEVICES;
+  return [...defined].sort((a, b) => b.width - a.width).map((item) => ({ id: item.id, name: item.name, width: item.width }));
+}
+function TemplatePreviewStage({
+  page,
+  width,
+  className = ""
+}) {
+  const containerRef = useRef4(null);
+  const [body, setBody] = useState12(null);
+  const [box, setBox] = useState12({ width: 0, height: 0 });
+  useEffect9(() => {
+    const node2 = containerRef.current;
+    if (!node2) return;
+    const observer = new ResizeObserver(([entry]) => {
+      setBox({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height
+      });
+    });
+    observer.observe(node2);
+    return () => observer.disconnect();
+  }, []);
+  const scale = box.width > 0 ? Math.min(1, box.width / width) : 0;
+  return /* @__PURE__ */ jsxs11("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, children: [
+    scale > 0 && /* @__PURE__ */ jsx12(
+      "iframe",
+      {
+        title: `${page.name} preview`,
+        sandbox: "allow-same-origin",
+        srcDoc: "<!doctype html><html><head><meta charset='utf-8'></head><body></body></html>",
+        onLoad: (event) => setBody(event.currentTarget.contentDocument?.body ?? null),
+        style: {
+          width,
+          height: box.height / scale,
+          border: 0,
+          transform: `scale(${scale})`,
+          transformOrigin: "top left"
+        }
+      },
+      `${page.slug}:${width}`
+    ),
+    body && createPortal3(
+      /* @__PURE__ */ jsx12(RenderedPage, { elements: page.elements, rootStyle: page.rootStyle }),
+      body
+    )
+  ] });
+}
+function TemplatePreview({
+  pages,
+  loading,
+  error,
+  className = "",
+  controlsClassName = ""
+}) {
+  const [slug, setSlug] = useState12();
+  const [deviceId, setDeviceId] = useState12();
+  const page = useMemo2(
+    () => pages?.find((item) => item.slug === slug) ?? pages?.[0],
+    [pages, slug]
+  );
+  const devices = useMemo2(() => devicesFor(page), [page]);
+  const device = devices.find((item) => item.id === deviceId) ?? devices[0];
+  useEffect9(() => {
+    if (deviceId && !devices.some((item) => item.id === deviceId)) setDeviceId(void 0);
+  }, [deviceId, devices]);
+  return /* @__PURE__ */ jsxs11("div", { className: `flex min-h-0 flex-col ${className}`, children: [
+    /* @__PURE__ */ jsxs11("div", { className: `flex shrink-0 items-center gap-2 ${controlsClassName}`, children: [
+      /* @__PURE__ */ jsx12("div", { className: "flex min-w-0 flex-1 gap-1 overflow-x-auto scrollbar-none", children: (pages ?? []).map((item) => /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSlug(item.slug),
+          className: `h-7 shrink-0 rounded-full px-3 text-[10px] font-medium transition-colors ${item.slug === page?.slug ? "bg-ed-field-hover text-ed-text" : "text-ed-faint hover:text-ed-muted"}`,
+          children: item.name
+        },
+        item.slug
+      )) }),
+      /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 gap-1 rounded-full bg-ed-subtle p-1", children: devices.map((item) => /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          onClick: () => setDeviceId(item.id),
+          title: `${item.name} \xB7 ${item.width}px`,
+          className: `h-6 rounded-full px-2.5 text-[9px] font-medium transition-colors ${item.id === device?.id ? "bg-ed-surface text-ed-text" : "text-ed-faint hover:text-ed-muted"}`,
+          children: item.name
+        },
+        item.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "relative mt-2 min-h-0 flex-1 overflow-hidden rounded-2xl bg-ed-subtle", children: [
+      page && device && /* @__PURE__ */ jsx12(TemplatePreviewStage, { page, width: device.width, className: "h-full w-full" }),
+      (loading || error || !page) && /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 flex items-center justify-center bg-ed-subtle px-6 text-center", children: loading ? /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-2 text-[10px] text-ed-faint", children: [
+        /* @__PURE__ */ jsx12("span", { className: "size-1.5 animate-pulse rounded-full bg-ed-accent" }),
+        "Loading preview\u2026"
+      ] }) : /* @__PURE__ */ jsx12("p", { className: "max-w-[280px] text-[10px] leading-relaxed text-ed-muted", children: error || "This template cannot be previewed." }) })
+    ] })
+  ] });
+}
+
 // src/internal/app/p/editor/templates-panel.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var INSTALL_STEPS = [
   { id: "fetching", label: "Fetching template", detail: "Loading the latest bundle on the server" },
   { id: "replacing", label: "Replacing pages", detail: "Removing the previous site inside one transaction" },
@@ -9404,19 +9960,20 @@ function TemplatesPanel({
   onInstall,
   onInstalled
 }) {
-  const [templates, setTemplates] = useState12(FALLBACK_TEMPLATE_REGISTRY.templates);
-  const [status, setStatus] = useState12("loading");
-  const [error, setError] = useState12("");
-  const [query, setQuery] = useState12("");
-  const [category, setCategory] = useState12("All");
-  const [installing, setInstalling] = useState12();
-  const [installStage, setInstallStage] = useState12();
-  const [pendingTemplate, setPendingTemplate] = useState12();
-  const [installError, setInstallError] = useState12("");
-  const [selectedFont, setSelectedFont] = useState12("");
-  const [portalContainer, setPortalContainer] = useState12(null);
+  const [templates, setTemplates] = useState13(FALLBACK_TEMPLATE_REGISTRY.templates);
+  const [status, setStatus] = useState13("loading");
+  const [error, setError] = useState13("");
+  const [query, setQuery] = useState13("");
+  const [category, setCategory] = useState13("All");
+  const [installing, setInstalling] = useState13();
+  const [installStage, setInstallStage] = useState13();
+  const [pendingTemplate, setPendingTemplate] = useState13();
+  const [installError, setInstallError] = useState13("");
+  const [selectedFont, setSelectedFont] = useState13("");
+  const [portalContainer, setPortalContainer] = useState13(null);
   const providerFonts = usePagieraFonts2();
-  const fontOptions = useMemo2(() => {
+  const preview = useTemplatePreview(pendingTemplate?.id);
+  const fontOptions = useMemo3(() => {
     const options = [
       ...pendingTemplate?.font?.url ? [{ label: `${pendingTemplate.font.title} \xB7 Template`, value: pendingTemplate.font.family }] : [],
       ...providerFonts.map((font) => ({ label: font.title, value: font.family })),
@@ -9432,13 +9989,13 @@ function TemplatesPanel({
     setStatus(result.source);
     if (result.error) setError(result.error instanceof Error ? result.error.message : "Could not refresh templates.");
   };
-  useEffect9(() => {
+  useEffect10(() => {
     void refresh();
   }, [registryUrl]);
-  useEffect9(() => {
+  useEffect10(() => {
     setPortalContainer(document.querySelector(".pg-editor"));
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!pendingTemplate) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape" && !installing) setPendingTemplate(void 0);
@@ -9446,15 +10003,15 @@ function TemplatesPanel({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [installing, pendingTemplate]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!pendingTemplate) return;
     const preferred = pendingTemplate.font ? providerFonts.find((font) => font.title.toLowerCase() === pendingTemplate.font?.title.toLowerCase() || font.family === pendingTemplate.font?.family) : void 0;
     setSelectedFont(
       pendingTemplate.font?.url ? pendingTemplate.font.family : preferred?.family ?? providerFonts[0]?.family ?? FONT_STACKS.find((font) => font.label === "Sans")?.value ?? "ui-sans-serif, system-ui, sans-serif"
     );
   }, [pendingTemplate, providerFonts]);
-  const categories = useMemo2(() => ["All", ...new Set(templates.map((template) => template.category))], [templates]);
-  const visible = useMemo2(() => {
+  const categories = useMemo3(() => ["All", ...new Set(templates.map((template) => template.category))], [templates]);
+  const visible = useMemo3(() => {
     const needle = query.trim().toLowerCase();
     return templates.filter(
       (template) => (category === "All" || template.category === category) && (!needle || [template.name, template.description, template.category, ...template.tags].some((value) => value.toLowerCase().includes(needle)))
@@ -9490,85 +10047,85 @@ function TemplatesPanel({
       setInstallStage(void 0);
     }
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "min-h-full bg-ed-surface", children: [
-    /* @__PURE__ */ jsx11("div", { className: "sticky top-0 z-10 border-b border-ed-border bg-ed-surface/90 backdrop-blur-xl", children: /* @__PURE__ */ jsxs10("div", { className: "mx-auto max-w-[1480px] px-6 py-5 lg:px-10", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-start justify-between gap-5", children: [
-        /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 items-center gap-3.5", children: [
-          /* @__PURE__ */ jsx11("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-2xl bg-ed-accent-soft text-ed-accent", children: /* @__PURE__ */ jsx11(IconTemplate, { size: 18 }) }),
-          /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx11("h2", { className: "text-[18px] font-semibold tracking-[-.025em] text-ed-text", children: "Template marketplace" }),
-            /* @__PURE__ */ jsx11("p", { className: "mt-1 text-[11px] text-ed-faint", children: "Discover and install complete, responsive Pagiera sites." })
+  return /* @__PURE__ */ jsxs12("div", { className: "min-h-full bg-ed-surface", children: [
+    /* @__PURE__ */ jsx13("div", { className: "sticky top-0 z-10 border-b border-ed-border bg-ed-surface/90 backdrop-blur-xl", children: /* @__PURE__ */ jsxs12("div", { className: "mx-auto max-w-[1480px] px-6 py-5 lg:px-10", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 items-center gap-3.5", children: [
+          /* @__PURE__ */ jsx13("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-2xl bg-ed-accent-soft text-ed-accent", children: /* @__PURE__ */ jsx13(IconTemplate, { size: 18 }) }),
+          /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx13("h2", { className: "text-[18px] font-semibold tracking-[-.025em] text-ed-text", children: "Template marketplace" }),
+            /* @__PURE__ */ jsx13("p", { className: "mt-1 text-[11px] text-ed-faint", children: "Discover and install complete, responsive Pagiera sites." })
           ] })
         ] }),
-        /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => void refresh(true), disabled: status === "loading", className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-ed-field text-ed-muted transition-colors hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-40", title: "Refresh template catalog", children: /* @__PURE__ */ jsx11(IconRefresh, { size: 14, className: status === "loading" ? "animate-spin" : "" }) })
+        /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => void refresh(true), disabled: status === "loading", className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-ed-field text-ed-muted transition-colors hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-40", title: "Refresh template catalog", children: /* @__PURE__ */ jsx13(IconRefresh, { size: 14, className: status === "loading" ? "animate-spin" : "" }) })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "mt-5 flex max-w-[720px] gap-2.5", children: [
-        /* @__PURE__ */ jsxs10("div", { className: "flex h-10 min-w-0 flex-1 items-center gap-2.5 rounded-full bg-ed-field px-4 transition-colors focus-within:ring-1 focus-within:ring-ed-accent", children: [
-          /* @__PURE__ */ jsx11(IconSearch4, { size: 13, className: "shrink-0 text-ed-faint" }),
-          /* @__PURE__ */ jsx11("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search templates, styles and categories\u2026", className: "min-w-0 flex-1 bg-transparent text-[11px] text-ed-text outline-none placeholder:text-ed-faint" })
+      /* @__PURE__ */ jsxs12("div", { className: "mt-5 flex max-w-[720px] gap-2.5", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex h-10 min-w-0 flex-1 items-center gap-2.5 rounded-full bg-ed-field px-4 transition-colors focus-within:ring-1 focus-within:ring-ed-accent", children: [
+          /* @__PURE__ */ jsx13(IconSearch4, { size: 13, className: "shrink-0 text-ed-faint" }),
+          /* @__PURE__ */ jsx13("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search templates, styles and categories\u2026", className: "min-w-0 flex-1 bg-transparent text-[11px] text-ed-text outline-none placeholder:text-ed-faint" })
         ] }),
-        /* @__PURE__ */ jsxs10(Select, { value: category, onValueChange: setCategory, children: [
-          /* @__PURE__ */ jsx11(SelectTrigger, { "aria-label": "Template category", className: "h-10 min-w-0 w-[150px] rounded-full px-4 text-[10px]", children: /* @__PURE__ */ jsx11(SelectValue, {}) }),
-          /* @__PURE__ */ jsx11(SelectContent, { children: categories.map((item) => /* @__PURE__ */ jsx11(SelectItem, { value: item, children: item }, item)) })
+        /* @__PURE__ */ jsxs12(Select, { value: category, onValueChange: setCategory, children: [
+          /* @__PURE__ */ jsx13(SelectTrigger, { "aria-label": "Template category", className: "h-10 min-w-0 w-[150px] rounded-full px-4 text-[10px]", children: /* @__PURE__ */ jsx13(SelectValue, {}) }),
+          /* @__PURE__ */ jsx13(SelectContent, { children: categories.map((item) => /* @__PURE__ */ jsx13(SelectItem, { value: item, children: item }, item)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "mt-3 flex max-w-[720px] items-center justify-between px-1 text-[9px] text-ed-faint", children: [
-        /* @__PURE__ */ jsxs10("span", { children: [
+      /* @__PURE__ */ jsxs12("div", { className: "mt-3 flex max-w-[720px] items-center justify-between px-1 text-[9px] text-ed-faint", children: [
+        /* @__PURE__ */ jsxs12("span", { children: [
           visible.length,
           " templates available"
         ] }),
-        /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx11("i", { className: `size-1.5 rounded-full ${status === "local" || status === "network" ? "bg-emerald-400" : status === "loading" ? "animate-pulse bg-ed-accent" : "bg-amber-400"}` }),
+        /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx13("i", { className: `size-1.5 rounded-full ${status === "local" || status === "network" ? "bg-emerald-400" : status === "loading" ? "animate-pulse bg-ed-accent" : "bg-amber-400"}` }),
           status === "local" ? "Local templates" : status === "network" ? registryUrl.includes("/api/pagiera/templates/") ? "Package catalog" : registryUrl.includes("raw.githubusercontent.com") ? "GitHub catalog" : "Custom catalog" : status === "cache" ? "Cached catalog" : status === "loading" ? "Refreshing" : "Offline catalog"
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs10("div", { className: "mx-auto max-w-[1480px] px-6 py-7 lg:px-10", children: [
-      error && /* @__PURE__ */ jsx11("div", { className: "mb-5 rounded-2xl bg-amber-400/8 px-4 py-3 text-[10px] leading-relaxed text-amber-200", children: error }),
-      /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-2 2xl:grid-cols-3", children: visible.map((template, index) => /* @__PURE__ */ jsxs10(motion6.article, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: Math.min(index * 0.035, 0.16), duration: 0.28 }, className: "group overflow-hidden rounded-3xl bg-ed-subtle p-2 transition-colors hover:bg-ed-field", children: [
-        /* @__PURE__ */ jsxs10("div", { className: "relative aspect-[16/10] overflow-hidden rounded-[20px]", style: { background: template.preview.background, color: template.preview.foreground }, children: [
-          /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 opacity-75", style: { background: `radial-gradient(circle at 90% 0%, ${template.preview.accent}66, transparent 55%)` } }),
-          /* @__PURE__ */ jsx11("span", { className: "relative block px-6 pt-6 font-mono text-[8px] font-bold tracking-[.14em]", style: { color: template.preview.accent }, children: template.preview.eyebrow }),
-          /* @__PURE__ */ jsx11("p", { className: "relative mt-12 max-w-[88%] px-6 text-[28px] font-semibold leading-[.92] tracking-[-.05em]", children: template.preview.headline }),
-          template.thumbnail && /* @__PURE__ */ jsx11("img", { src: templateThumbnailUrl(template, registryUrl), alt: `${template.name} template preview`, className: "absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.025]", onError: (event) => {
+    /* @__PURE__ */ jsxs12("div", { className: "mx-auto max-w-[1480px] px-6 py-7 lg:px-10", children: [
+      error && /* @__PURE__ */ jsx13("div", { className: "mb-5 rounded-2xl bg-amber-400/8 px-4 py-3 text-[10px] leading-relaxed text-amber-200", children: error }),
+      /* @__PURE__ */ jsx13("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-2 2xl:grid-cols-3", children: visible.map((template, index) => /* @__PURE__ */ jsxs12(motion6.article, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: Math.min(index * 0.035, 0.16), duration: 0.28 }, className: "group overflow-hidden rounded-3xl bg-ed-subtle p-2 transition-colors hover:bg-ed-field", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "relative aspect-[16/10] overflow-hidden rounded-[20px]", style: { background: template.preview.background, color: template.preview.foreground }, children: [
+          /* @__PURE__ */ jsx13("div", { className: "absolute inset-0 opacity-75", style: { background: `radial-gradient(circle at 90% 0%, ${template.preview.accent}66, transparent 55%)` } }),
+          /* @__PURE__ */ jsx13("span", { className: "relative block px-6 pt-6 font-mono text-[8px] font-bold tracking-[.14em]", style: { color: template.preview.accent }, children: template.preview.eyebrow }),
+          /* @__PURE__ */ jsx13("p", { className: "relative mt-12 max-w-[88%] px-6 text-[28px] font-semibold leading-[.92] tracking-[-.05em]", children: template.preview.headline }),
+          template.thumbnail && /* @__PURE__ */ jsx13("img", { src: templateThumbnailUrl(template, registryUrl), alt: `${template.name} template preview`, className: "absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.025]", onError: (event) => {
             event.currentTarget.hidden = true;
           } }),
-          template.featured && /* @__PURE__ */ jsx11("span", { className: "absolute right-3 top-3 rounded-full bg-black/60 px-2.5 py-1 text-[8px] font-semibold text-white backdrop-blur", children: "Featured" })
+          template.featured && /* @__PURE__ */ jsx13("span", { className: "absolute right-3 top-3 rounded-full bg-black/60 px-2.5 py-1 text-[8px] font-semibold text-white backdrop-blur", children: "Featured" })
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "p-3 pb-2", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx11("h3", { className: "truncate text-[13px] font-semibold tracking-[-.015em] text-ed-text", children: template.name }),
-              /* @__PURE__ */ jsx11("p", { className: "mt-1 line-clamp-2 min-h-8 text-[10px] leading-[1.55] text-ed-muted", children: template.description })
+        /* @__PURE__ */ jsxs12("div", { className: "p-3 pb-2", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx13("h3", { className: "truncate text-[13px] font-semibold tracking-[-.015em] text-ed-text", children: template.name }),
+              /* @__PURE__ */ jsx13("p", { className: "mt-1 line-clamp-2 min-h-8 text-[10px] leading-[1.55] text-ed-muted", children: template.description })
             ] }),
-            /* @__PURE__ */ jsx11("button", { type: "button", disabled: busy || Boolean(installing), onClick: () => {
+            /* @__PURE__ */ jsx13("button", { type: "button", disabled: busy || Boolean(installing), onClick: () => {
               setError("");
               setInstallError("");
               setPendingTemplate(template);
-            }, className: "flex size-9 shrink-0 select-none items-center justify-center rounded-full bg-ed-surface text-ed-text transition-colors hover:bg-ed-accent hover:text-white disabled:cursor-wait disabled:opacity-45", "aria-label": `Review and install ${template.name}`, children: /* @__PURE__ */ jsx11(IconArrowUpRight, { size: 14 }) })
+            }, className: "flex size-9 shrink-0 select-none items-center justify-center rounded-full bg-ed-surface text-ed-text transition-colors hover:bg-ed-accent hover:text-white disabled:cursor-wait disabled:opacity-45", "aria-label": `Review and install ${template.name}`, children: /* @__PURE__ */ jsx13(IconArrowUpRight, { size: 14 }) })
           ] }),
-          /* @__PURE__ */ jsxs10("div", { className: "mt-3 flex items-center gap-2 text-[9px] text-ed-faint", children: [
-            /* @__PURE__ */ jsx11("span", { children: template.category }),
-            /* @__PURE__ */ jsx11("i", { className: "size-0.5 rounded-full bg-ed-faint" }),
-            /* @__PURE__ */ jsxs10("span", { children: [
+          /* @__PURE__ */ jsxs12("div", { className: "mt-3 flex items-center gap-2 text-[9px] text-ed-faint", children: [
+            /* @__PURE__ */ jsx13("span", { children: template.category }),
+            /* @__PURE__ */ jsx13("i", { className: "size-0.5 rounded-full bg-ed-faint" }),
+            /* @__PURE__ */ jsxs12("span", { children: [
               template.pages.length,
               " pages"
             ] }),
-            /* @__PURE__ */ jsx11("i", { className: "size-0.5 rounded-full bg-ed-faint" }),
-            /* @__PURE__ */ jsxs10("span", { children: [
+            /* @__PURE__ */ jsx13("i", { className: "size-0.5 rounded-full bg-ed-faint" }),
+            /* @__PURE__ */ jsxs12("span", { children: [
               "v",
               template.version
             ] })
           ] })
         ] })
       ] }, template.id)) }),
-      visible.length === 0 && /* @__PURE__ */ jsxs10("div", { className: "rounded-3xl bg-ed-subtle px-5 py-20 text-center", children: [
-        /* @__PURE__ */ jsx11(IconTemplate, { size: 22, className: "mx-auto text-ed-faint" }),
-        /* @__PURE__ */ jsx11("p", { className: "mt-3 text-[11px] font-medium text-ed-muted", children: "No templates match this search." })
+      visible.length === 0 && /* @__PURE__ */ jsxs12("div", { className: "rounded-3xl bg-ed-subtle px-5 py-20 text-center", children: [
+        /* @__PURE__ */ jsx13(IconTemplate, { size: 22, className: "mx-auto text-ed-faint" }),
+        /* @__PURE__ */ jsx13("p", { className: "mt-3 text-[11px] font-medium text-ed-muted", children: "No templates match this search." })
       ] })
     ] }),
-    portalContainer && createPortal3(
-      /* @__PURE__ */ jsx11(AnimatePresence6, { children: pendingTemplate && /* @__PURE__ */ jsx11(
+    portalContainer && createPortal4(
+      /* @__PURE__ */ jsx13(AnimatePresence6, { children: pendingTemplate && /* @__PURE__ */ jsx13(
         motion6.div,
         {
           className: "fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm",
@@ -9578,7 +10135,7 @@ function TemplatesPanel({
           onMouseDown: (event) => {
             if (event.target === event.currentTarget && !installing) setPendingTemplate(void 0);
           },
-          children: /* @__PURE__ */ jsxs10(
+          children: /* @__PURE__ */ jsxs12(
             motion6.div,
             {
               role: "dialog",
@@ -9588,17 +10145,17 @@ function TemplatesPanel({
               animate: { opacity: 1, y: 0, scale: 1 },
               exit: { opacity: 0, y: 6, scale: 0.98 },
               transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] },
-              className: "w-full max-w-[560px] rounded-3xl bg-ed-surface p-2 text-ed-text shadow-2xl",
+              className: "flex max-h-[min(880px,94vh)] w-full max-w-[1180px] flex-col rounded-3xl bg-ed-surface p-2 text-ed-text shadow-2xl",
               children: [
-                /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-4 py-3.5", children: [
-                  /* @__PURE__ */ jsx11("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-ed-field text-ed-accent", children: /* @__PURE__ */ jsx11(IconTemplate, { size: 17 }) }),
-                  /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxs10("h3", { id: "template-install-title", className: "truncate text-[14px] font-semibold", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "flex shrink-0 items-center gap-3 px-4 py-3.5", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-ed-field text-ed-accent", children: /* @__PURE__ */ jsx13(IconTemplate, { size: 17 }) }),
+                  /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs12("h3", { id: "template-install-title", className: "truncate text-[14px] font-semibold", children: [
                       installing ? "Installing" : "Install",
                       " ",
                       pendingTemplate.name
                     ] }),
-                    /* @__PURE__ */ jsxs10("p", { className: "mt-1 text-[10px] text-ed-faint", children: [
+                    /* @__PURE__ */ jsxs12("p", { className: "mt-1 text-[10px] text-ed-faint", children: [
                       pendingTemplate.pages.length,
                       " editable pages \xB7 v",
                       pendingTemplate.version,
@@ -9606,63 +10163,67 @@ function TemplatesPanel({
                       pendingTemplate.id
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "Close template confirmation", disabled: Boolean(installing), onClick: () => setPendingTemplate(void 0), className: "flex size-8 select-none items-center justify-center rounded-xl text-ed-muted transition-colors hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-40", children: /* @__PURE__ */ jsx11(IconX5, { size: 15 }) })
+                  /* @__PURE__ */ jsx13("button", { type: "button", "aria-label": "Close template confirmation", disabled: Boolean(installing), onClick: () => setPendingTemplate(void 0), className: "flex size-8 select-none items-center justify-center rounded-xl text-ed-muted transition-colors hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-40", children: /* @__PURE__ */ jsx13(IconX5, { size: 15 }) })
                 ] }),
-                /* @__PURE__ */ jsxs10("div", { className: "relative mx-1 aspect-[16/7] min-h-[190px] overflow-hidden rounded-2xl px-6 py-6", style: { background: pendingTemplate.preview.background, color: pendingTemplate.preview.foreground }, children: [
-                  /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 opacity-75", style: { background: `radial-gradient(circle at 88% 0%, ${pendingTemplate.preview.accent}66, transparent 48%)` } }),
-                  /* @__PURE__ */ jsx11("span", { className: "relative font-mono text-[7px] font-bold uppercase tracking-[.16em]", style: { color: pendingTemplate.preview.accent }, children: pendingTemplate.preview.eyebrow }),
-                  /* @__PURE__ */ jsx11("p", { className: "relative mt-7 max-w-[420px] text-[30px] font-semibold leading-[.92] tracking-[-.05em]", children: pendingTemplate.preview.headline }),
-                  pendingTemplate.thumbnail && /* @__PURE__ */ jsx11("img", { src: templateThumbnailUrl(pendingTemplate, registryUrl), alt: `${pendingTemplate.name} template preview`, className: "absolute inset-0 h-full w-full object-cover", onError: (event) => {
-                    event.currentTarget.hidden = true;
-                  } })
-                ] }),
-                /* @__PURE__ */ jsx11("div", { className: "p-4", children: /* @__PURE__ */ jsx11(AnimatePresence6, { mode: "wait", initial: false, children: installing && installStage ? /* @__PURE__ */ jsxs10(motion6.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 }, "aria-live": "polite", children: [
-                  /* @__PURE__ */ jsx11("div", { className: "overflow-hidden rounded-2xl bg-ed-subtle p-2", children: INSTALL_STEPS.map((step, index) => {
-                    const activeIndex = INSTALL_STEPS.findIndex((item) => item.id === installStage);
-                    const complete = index < activeIndex;
-                    const active = index === activeIndex;
-                    return /* @__PURE__ */ jsxs10("div", { className: `flex items-center gap-3 rounded-xl px-3 py-3 transition-colors ${active ? "bg-ed-field-hover" : ""}`, children: [
-                      /* @__PURE__ */ jsx11("span", { className: `flex size-7 shrink-0 items-center justify-center rounded-full ${complete ? "bg-ed-accent text-white" : active ? "bg-ed-accent-soft text-ed-accent" : "bg-ed-field text-ed-faint"}`, children: complete ? /* @__PURE__ */ jsx11(IconCheck5, { size: 13 }) : active ? /* @__PURE__ */ jsx11("span", { className: "size-2 animate-pulse rounded-full bg-current" }) : /* @__PURE__ */ jsx11("span", { className: "text-[9px] font-semibold", children: index + 1 }) }),
-                      /* @__PURE__ */ jsxs10("span", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsx11("span", { className: `block text-[10px] font-semibold ${active || complete ? "text-ed-text" : "text-ed-faint"}`, children: step.label }),
-                        /* @__PURE__ */ jsx11("span", { className: "mt-0.5 block truncate text-[9px] text-ed-faint", children: step.detail })
+                /* @__PURE__ */ jsxs12("div", { className: "grid min-h-0 flex-1 gap-2 px-1 pb-1 lg:grid-cols-[minmax(0,1fr)_380px]", children: [
+                  /* @__PURE__ */ jsx13(
+                    TemplatePreview,
+                    {
+                      pages: preview.pages,
+                      loading: preview.loading,
+                      error: preview.error,
+                      className: "min-h-[320px] lg:min-h-0",
+                      controlsClassName: "px-1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13("div", { className: "min-h-0 overflow-y-auto p-3 scrollbar-none lg:pl-2", children: /* @__PURE__ */ jsx13(AnimatePresence6, { mode: "wait", initial: false, children: installing && installStage ? /* @__PURE__ */ jsxs12(motion6.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 }, "aria-live": "polite", children: [
+                    /* @__PURE__ */ jsx13("div", { className: "overflow-hidden rounded-2xl bg-ed-subtle p-2", children: INSTALL_STEPS.map((step, index) => {
+                      const activeIndex = INSTALL_STEPS.findIndex((item) => item.id === installStage);
+                      const complete = index < activeIndex;
+                      const active = index === activeIndex;
+                      return /* @__PURE__ */ jsxs12("div", { className: `flex items-center gap-3 rounded-xl px-3 py-3 transition-colors ${active ? "bg-ed-field-hover" : ""}`, children: [
+                        /* @__PURE__ */ jsx13("span", { className: `flex size-7 shrink-0 items-center justify-center rounded-full ${complete ? "bg-ed-accent text-white" : active ? "bg-ed-accent-soft text-ed-accent" : "bg-ed-field text-ed-faint"}`, children: complete ? /* @__PURE__ */ jsx13(IconCheck5, { size: 13 }) : active ? /* @__PURE__ */ jsx13("span", { className: "size-2 animate-pulse rounded-full bg-current" }) : /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-semibold", children: index + 1 }) }),
+                        /* @__PURE__ */ jsxs12("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx13("span", { className: `block text-[10px] font-semibold ${active || complete ? "text-ed-text" : "text-ed-faint"}`, children: step.label }),
+                          /* @__PURE__ */ jsx13("span", { className: "mt-0.5 block truncate text-[9px] text-ed-faint", children: step.detail })
+                        ] }),
+                        active && /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-medium text-ed-accent", children: "Working\u2026" })
+                      ] }, step.id);
+                    }) }),
+                    /* @__PURE__ */ jsx13("div", { className: "mt-3 h-1 overflow-hidden rounded-full bg-ed-field", children: /* @__PURE__ */ jsx13(motion6.div, { className: "h-full rounded-full bg-ed-accent", animate: { width: `${(INSTALL_STEPS.findIndex((item) => item.id === installStage) + 1) / INSTALL_STEPS.length * 100}%` }, transition: { type: "spring", stiffness: 220, damping: 28 } }) }),
+                    /* @__PURE__ */ jsx13("p", { className: "mt-3 text-center text-[9px] text-ed-faint", children: "Keep this window open while the project is replaced." })
+                  ] }, "progress") : /* @__PURE__ */ jsxs12(motion6.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 }, children: [
+                    /* @__PURE__ */ jsxs12("div", { className: "mb-3 flex items-center gap-3 rounded-2xl bg-ed-subtle px-3.5 py-3", children: [
+                      /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx13("p", { className: "text-[10px] font-semibold text-ed-text", children: "Site font" }),
+                        /* @__PURE__ */ jsx13("p", { className: "mt-0.5 text-[9px] leading-relaxed text-ed-faint", children: pendingTemplate.font?.url ? `${pendingTemplate.font.title} is bundled with the template and downloads automatically.` : pendingTemplate.font && !providerFonts.some((font) => font.title.toLowerCase() === pendingTemplate.font?.title.toLowerCase() || font.family === pendingTemplate.font?.family) ? `${pendingTemplate.font.title} is not configured. Choose an available fallback.` : "Applied to every page installed by this template." })
                       ] }),
-                      active && /* @__PURE__ */ jsx11("span", { className: "text-[9px] font-medium text-ed-accent", children: "Working\u2026" })
-                    ] }, step.id);
-                  }) }),
-                  /* @__PURE__ */ jsx11("div", { className: "mt-3 h-1 overflow-hidden rounded-full bg-ed-field", children: /* @__PURE__ */ jsx11(motion6.div, { className: "h-full rounded-full bg-ed-accent", animate: { width: `${(INSTALL_STEPS.findIndex((item) => item.id === installStage) + 1) / INSTALL_STEPS.length * 100}%` }, transition: { type: "spring", stiffness: 220, damping: 28 } }) }),
-                  /* @__PURE__ */ jsx11("p", { className: "mt-3 text-center text-[9px] text-ed-faint", children: "Keep this window open while the project is replaced." })
-                ] }, "progress") : /* @__PURE__ */ jsxs10(motion6.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 }, children: [
-                  /* @__PURE__ */ jsxs10("div", { className: "mb-3 flex items-center gap-3 rounded-2xl bg-ed-subtle px-3.5 py-3", children: [
-                    /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx11("p", { className: "text-[10px] font-semibold text-ed-text", children: "Site font" }),
-                      /* @__PURE__ */ jsx11("p", { className: "mt-0.5 text-[9px] leading-relaxed text-ed-faint", children: pendingTemplate.font?.url ? `${pendingTemplate.font.title} is bundled with the template and downloads automatically.` : pendingTemplate.font && !providerFonts.some((font) => font.title.toLowerCase() === pendingTemplate.font?.title.toLowerCase() || font.family === pendingTemplate.font?.family) ? `${pendingTemplate.font.title} is not configured. Choose an available fallback.` : "Applied to every page installed by this template." })
+                      /* @__PURE__ */ jsxs12(Select, { value: selectedFont, onValueChange: setSelectedFont, children: [
+                        /* @__PURE__ */ jsx13(SelectTrigger, { "aria-label": "Template site font", className: "h-8 w-[170px] shrink-0 rounded-full px-3 text-[10px]", children: /* @__PURE__ */ jsx13(SelectValue, { placeholder: "Choose font" }) }),
+                        /* @__PURE__ */ jsx13(SelectContent, { children: fontOptions.map((font) => /* @__PURE__ */ jsx13(SelectItem, { value: font.value, children: font.label }, font.value)) })
+                      ] })
                     ] }),
-                    /* @__PURE__ */ jsxs10(Select, { value: selectedFont, onValueChange: setSelectedFont, children: [
-                      /* @__PURE__ */ jsx11(SelectTrigger, { "aria-label": "Template site font", className: "h-8 w-[170px] shrink-0 rounded-full px-3 text-[10px]", children: /* @__PURE__ */ jsx11(SelectValue, { placeholder: "Choose font" }) }),
-                      /* @__PURE__ */ jsx11(SelectContent, { children: fontOptions.map((font) => /* @__PURE__ */ jsx11(SelectItem, { value: font.value, children: font.label }, font.value)) })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-3 rounded-xl bg-amber-400/[.07] px-3.5 py-3", children: [
-                    /* @__PURE__ */ jsx11(IconAlertTriangle2, { size: 14, className: "mt-0.5 shrink-0 text-amber-300" }),
-                    /* @__PURE__ */ jsxs10("p", { className: "text-[10px] leading-relaxed text-ed-muted", children: [
-                      /* @__PURE__ */ jsx11("strong", { className: "font-semibold text-ed-text", children: "This replaces the current site." }),
-                      " Existing pages and revision history will be removed after installation succeeds."
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx11("div", { className: "mt-3 grid grid-cols-2 gap-1 rounded-xl bg-ed-subtle p-2", children: pendingTemplate.pages.slice(0, 6).map((page) => /* @__PURE__ */ jsxs10("span", { className: "flex h-8 min-w-0 items-center gap-2 rounded-lg px-2.5 text-[10px] text-ed-text", children: [
-                    /* @__PURE__ */ jsx11(IconCheck5, { size: 12, className: "shrink-0 text-ed-accent" }),
-                    /* @__PURE__ */ jsx11("span", { className: "truncate", children: page })
-                  ] }, page)) }),
-                  installError && /* @__PURE__ */ jsx11("div", { className: "mt-2 rounded-xl bg-red-400/8 px-3 py-2.5 text-[9px] leading-relaxed text-red-200", children: installError }),
-                  /* @__PURE__ */ jsxs10("div", { className: "mt-4 flex justify-end gap-2 pt-1", children: [
-                    /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => setPendingTemplate(void 0), className: "h-9 select-none rounded-xl px-4 text-[10px] font-medium text-ed-muted transition-colors hover:bg-ed-field-hover hover:text-ed-text", children: "Cancel" }),
-                    /* @__PURE__ */ jsxs10("button", { type: "button", onClick: () => void install(pendingTemplate), className: "flex h-9 min-w-[132px] select-none items-center justify-center gap-2 rounded-xl bg-ed-accent px-4 text-[10px] font-semibold text-white transition hover:brightness-110", children: [
-                      /* @__PURE__ */ jsx11(IconSparkles4, { size: 13 }),
-                      " Install template"
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 rounded-xl bg-amber-400/[.07] px-3.5 py-3", children: [
+                      /* @__PURE__ */ jsx13(IconAlertTriangle2, { size: 14, className: "mt-0.5 shrink-0 text-amber-300" }),
+                      /* @__PURE__ */ jsxs12("p", { className: "text-[10px] leading-relaxed text-ed-muted", children: [
+                        /* @__PURE__ */ jsx13("strong", { className: "font-semibold text-ed-text", children: "This replaces the current site." }),
+                        " Existing pages and revision history will be removed after installation succeeds."
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx13("div", { className: "mt-3 grid grid-cols-2 gap-1 rounded-xl bg-ed-subtle p-2", children: pendingTemplate.pages.slice(0, 6).map((page) => /* @__PURE__ */ jsxs12("span", { className: "flex h-8 min-w-0 items-center gap-2 rounded-lg px-2.5 text-[10px] text-ed-text", children: [
+                      /* @__PURE__ */ jsx13(IconCheck5, { size: 12, className: "shrink-0 text-ed-accent" }),
+                      /* @__PURE__ */ jsx13("span", { className: "truncate", children: page })
+                    ] }, page)) }),
+                    installError && /* @__PURE__ */ jsx13("div", { className: "mt-2 rounded-xl bg-red-400/8 px-3 py-2.5 text-[9px] leading-relaxed text-red-200", children: installError }),
+                    /* @__PURE__ */ jsxs12("div", { className: "mt-4 flex justify-end gap-2 pt-1", children: [
+                      /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => setPendingTemplate(void 0), className: "h-9 select-none rounded-xl px-4 text-[10px] font-medium text-ed-muted transition-colors hover:bg-ed-field-hover hover:text-ed-text", children: "Cancel" }),
+                      /* @__PURE__ */ jsxs12("button", { type: "button", onClick: () => void install(pendingTemplate), className: "flex h-9 min-w-[132px] select-none items-center justify-center gap-2 rounded-xl bg-ed-accent px-4 text-[10px] font-semibold text-white transition hover:brightness-110", children: [
+                        /* @__PURE__ */ jsx13(IconSparkles4, { size: 13 }),
+                        " Install template"
+                      ] })
                     ] })
-                  ] })
-                ] }, "confirm") }) })
+                  ] }, "confirm") }) })
+                ] })
               ]
             }
           )
@@ -9674,7 +10235,7 @@ function TemplatesPanel({
 }
 
 // src/internal/app/p/editor/editor.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var MIN_SIZE = 10;
 var COMPONENT_MIME = "application/pagiera-component";
 var EDITOR_TABS_STORAGE_KEY = "pagiera:editor-tabs";
@@ -9698,22 +10259,22 @@ function ComponentAssetCards({
   activeMasterId,
   onOpen
 }) {
-  if (assets.length === 0) return /* @__PURE__ */ jsx12("p", { className: "rounded-2xl border border-dashed border-ed-border p-5 text-center text-[10px] text-ed-faint", children: "Create a shared asset or add one from code." });
-  return /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: assets.map((asset) => /* @__PURE__ */ jsxs11("section", { className: "overflow-hidden rounded-2xl border border-ed-border bg-ed-subtle", children: [
-    /* @__PURE__ */ jsxs11("button", { type: "button", onClick: () => onOpen(asset.variants[0]), className: "flex w-full items-center gap-3 px-3 py-3 text-left hover:bg-ed-field", children: [
-      /* @__PURE__ */ jsx12("span", { className: "flex size-9 items-center justify-center rounded-xl bg-ed-field text-ed-accent", children: /* @__PURE__ */ jsx12(IconComponents2, { size: 16 }) }),
-      /* @__PURE__ */ jsxs11("span", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx12("span", { className: "block truncate text-[11px] font-semibold text-ed-text", children: asset.name }),
-        /* @__PURE__ */ jsxs11("span", { className: "block text-[9px] text-ed-faint", children: [
+  if (assets.length === 0) return /* @__PURE__ */ jsx14("p", { className: "rounded-2xl border border-dashed border-ed-border p-5 text-center text-[10px] text-ed-faint", children: "Create a shared asset or add one from code." });
+  return /* @__PURE__ */ jsx14("div", { className: "space-y-3", children: assets.map((asset) => /* @__PURE__ */ jsxs13("section", { className: "overflow-hidden rounded-2xl border border-ed-border bg-ed-subtle", children: [
+    /* @__PURE__ */ jsxs13("button", { type: "button", onClick: () => onOpen(asset.variants[0]), className: "flex w-full items-center gap-3 px-3 py-3 text-left hover:bg-ed-field", children: [
+      /* @__PURE__ */ jsx14("span", { className: "flex size-9 items-center justify-center rounded-xl bg-ed-field text-ed-accent", children: /* @__PURE__ */ jsx14(IconComponents2, { size: 16 }) }),
+      /* @__PURE__ */ jsxs13("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx14("span", { className: "block truncate text-[11px] font-semibold text-ed-text", children: asset.name }),
+        /* @__PURE__ */ jsxs13("span", { className: "block text-[9px] text-ed-faint", children: [
           asset.variants.length,
           " variant",
           asset.variants.length === 1 ? "" : "s",
           " \xB7 shared across pages"
         ] })
       ] }),
-      /* @__PURE__ */ jsx12(IconChevronRight6, { size: 14, className: "text-ed-faint" })
+      /* @__PURE__ */ jsx14(IconChevronRight6, { size: 14, className: "text-ed-faint" })
     ] }),
-    /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-2 gap-1.5 border-t border-ed-border p-2", children: asset.variants.map((variant) => /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-2 gap-1.5 border-t border-ed-border p-2", children: asset.variants.map((variant) => /* @__PURE__ */ jsxs13(
       "button",
       {
         type: "button",
@@ -9725,12 +10286,12 @@ function ComponentAssetCards({
         onClick: () => onOpen(variant),
         className: `group min-w-0 cursor-grab rounded-xl border p-1.5 text-left active:cursor-grabbing ${activeMasterId === variant.id ? "border-ed-accent bg-[var(--ed-accent-soft)]" : "border-transparent bg-ed-field hover:border-ed-border"}`,
         children: [
-          /* @__PURE__ */ jsx12("span", { className: "mb-1.5 flex h-12 items-center justify-center overflow-hidden rounded-lg border border-ed-border", style: { background: variant.base.gradient || variant.base.bg || "var(--ed-surface)" }, children: /* @__PURE__ */ jsxs11("span", { className: "rounded-full bg-black/35 px-2 py-1 font-mono text-[8px] text-white/80", children: [
+          /* @__PURE__ */ jsx14("span", { className: "mb-1.5 flex h-12 items-center justify-center overflow-hidden rounded-lg border border-ed-border", style: { background: variant.base.gradient || variant.base.bg || "var(--ed-surface)" }, children: /* @__PURE__ */ jsxs13("span", { className: "rounded-full bg-black/35 px-2 py-1 font-mono text-[8px] text-white/80", children: [
             Math.round(variant.base.w),
             "\xD7",
             Math.round(variant.base.h)
           ] }) }),
-          /* @__PURE__ */ jsx12("span", { className: "block truncate px-1 text-[9px] font-semibold text-ed-text", children: variant.variant ?? "Default" })
+          /* @__PURE__ */ jsx14("span", { className: "block truncate px-1 text-[9px] font-semibold text-ed-text", children: variant.variant ?? "Default" })
         ]
       },
       variant.id
@@ -9803,8 +10364,8 @@ function Editor({
       [adapters?.save]
     )
   });
-  const [chromeTheme, setChromeTheme] = useState13("dark");
-  useEffect10(() => {
+  const [chromeTheme, setChromeTheme] = useState14("dark");
+  useEffect11(() => {
     const stored = localStorage.getItem("pagiera:editor-theme");
     if (stored === "dark" || stored === "light") setChromeTheme(stored);
   }, []);
@@ -9818,11 +10379,11 @@ function Editor({
       return next;
     });
   }, []);
-  const [breakpoint, setBreakpoint] = useState13("desktop");
-  const [breakpointPanel, setBreakpointPanel] = useState13(false);
+  const [breakpoint, setBreakpoint] = useState14("desktop");
+  const [breakpointPanel, setBreakpointPanel] = useState14(false);
   const componentMode = rootStyle.documentMode === "component";
   const componentMasters = elements.filter((element) => element.componentRole === "master");
-  const componentAssets = useMemo3(() => {
+  const componentAssets = useMemo4(() => {
     const grouped = /* @__PURE__ */ new Map();
     for (const master of componentMasters) {
       const id = master.componentId ?? master.id;
@@ -9832,17 +10393,17 @@ function Editor({
     }
     return [...grouped.values()];
   }, [elements]);
-  const [activeComponentMasterId, setActiveComponentMasterId] = useState13(null);
+  const [activeComponentMasterId, setActiveComponentMasterId] = useState14(null);
   const activeComponentMaster = componentMasters.find((element) => element.id === activeComponentMasterId) ?? componentMasters[0];
   const activeComponentVariants = activeComponentMaster ? componentMasters.filter((element) => element.componentId === activeComponentMaster.componentId) : [];
   const breakpointDefs = rootStyle.breakpoints?.length ? rootStyle.breakpoints : DEFAULT_BREAKPOINTS;
-  const cascade = useMemo3(
+  const cascade = useMemo4(
     () => cascadeOf(rootStyle.breakpoints, rootStyle.baseBreakpointId),
     [rootStyle.breakpoints, rootStyle.baseBreakpointId]
   );
   const selectedBreakpoint = breakpointDefs.find((item) => item.id === breakpoint) ?? breakpointDefs[0];
   const frameWidthForBreakpoint = selectedBreakpoint.width;
-  const frames = useMemo3(
+  const frames = useMemo4(
     () => componentMode ? activeComponentVariants.map((variant) => ({ bp: "desktop", width: Math.max(1, variant.base.w), masterId: variant.id })) : breakpointDefs.map((item) => ({ bp: item.id, width: item.width })),
     [activeComponentVariants, breakpointDefs, componentMode]
   );
@@ -9861,12 +10422,12 @@ function Editor({
     recenter
   } = useCanvasView(fitWidth);
   const serverLeftTab = tabForDocumentMode(leftTabFromValue(initialPanel ?? null) ?? "Layers", componentMode);
-  const [leftTab, setLeftTab] = useState13(serverLeftTab);
-  const [rightTab, setRightTab] = useState13("Design");
-  const [tabsRestored, setTabsRestored] = useState13(false);
-  const [isLeftCollapsed, setIsLeftCollapsed] = useState13(serverLeftTab === "Templates");
-  const [isRightCollapsed, setIsRightCollapsed] = useState13(true);
-  const [search, setSearch] = useState13("");
+  const [leftTab, setLeftTab] = useState14(serverLeftTab);
+  const [rightTab, setRightTab] = useState14("Design");
+  const [tabsRestored, setTabsRestored] = useState14(false);
+  const [isLeftCollapsed, setIsLeftCollapsed] = useState14(serverLeftTab === "Templates");
+  const [isRightCollapsed, setIsRightCollapsed] = useState14(true);
+  const [search, setSearch] = useState14("");
   useLayoutEffect2(() => {
     try {
       const routed = leftTabFromValue(initialPanel ?? null) ?? leftTabFromPath(window.location.pathname);
@@ -9885,10 +10446,10 @@ function Editor({
       setTabsRestored(true);
     }
   }, [initialPanel]);
-  useEffect10(() => {
+  useEffect11(() => {
     setLeftTab((current) => tabForDocumentMode(current, componentMode));
   }, [componentMode]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!tabsRestored) return;
     try {
       localStorage.setItem(EDITOR_TABS_STORAGE_KEY, JSON.stringify({ left: leftTab, right: rightTab }));
@@ -9904,7 +10465,7 @@ function Editor({
     } catch {
     }
   }, [adapters?.editorHref, leftTab, page.id, rightTab, tabsRestored]);
-  useEffect10(() => {
+  useEffect11(() => {
     const restoreTabFromHistory = () => {
       const routed = leftTabFromPath(window.location.pathname);
       const queried = leftTabFromValue(new URLSearchParams(window.location.search).get("tab"));
@@ -9918,23 +10479,23 @@ function Editor({
     window.addEventListener("popstate", restoreTabFromHistory);
     return () => window.removeEventListener("popstate", restoreTabFromHistory);
   }, [componentMode]);
-  const [selectedIds, setSelectedIds] = useState13([]);
+  const [selectedIds, setSelectedIds] = useState14([]);
   const hasElementSelection = selectedIds.length > 0;
-  const [editingId, setEditingId] = useState13(null);
-  const [hoveredEffectIds, setHoveredEffectIds] = useState13(() => /* @__PURE__ */ new Set());
-  const [pressedEffectId, setPressedEffectId] = useState13(null);
-  const [effectsPreview, setEffectsPreview] = useState13(false);
-  const [previewVisibility, setPreviewVisibility] = useState13({});
-  const [marquee, setMarquee] = useState13(null);
-  const [codeComposerOpen, setCodeComposerOpen] = useState13(false);
-  const [codeComponentName, setCodeComponentName] = useState13("Code Component");
-  const [codeComponentSource, setCodeComponentSource] = useState13("<style>body{margin:0;font-family:system-ui;display:grid;place-items:center;height:100vh}button{border:0;border-radius:12px;padding:14px 22px;background:#4f8cff;color:white;font-weight:600}</style><button>Button</button>");
-  const [draggedBreakpointId, setDraggedBreakpointId] = useState13(null);
-  const [editingBreakpointId, setEditingBreakpointId] = useState13(null);
-  const marqueePageRef = useRef4(null);
-  const marqueeBaseRef = useRef4([]);
-  const [contextMenu, setContextMenu] = useState13(null);
-  useEffect10(() => {
+  const [editingId, setEditingId] = useState14(null);
+  const [hoveredEffectIds, setHoveredEffectIds] = useState14(() => /* @__PURE__ */ new Set());
+  const [pressedEffectId, setPressedEffectId] = useState14(null);
+  const [effectsPreview, setEffectsPreview] = useState14(false);
+  const [previewVisibility, setPreviewVisibility] = useState14({});
+  const [marquee, setMarquee] = useState14(null);
+  const [codeComposerOpen, setCodeComposerOpen] = useState14(false);
+  const [codeComponentName, setCodeComponentName] = useState14("Code Component");
+  const [codeComponentSource, setCodeComponentSource] = useState14("<style>body{margin:0;font-family:system-ui;display:grid;place-items:center;height:100vh}button{border:0;border-radius:12px;padding:14px 22px;background:#4f8cff;color:white;font-weight:600}</style><button>Button</button>");
+  const [draggedBreakpointId, setDraggedBreakpointId] = useState14(null);
+  const [editingBreakpointId, setEditingBreakpointId] = useState14(null);
+  const marqueePageRef = useRef5(null);
+  const marqueeBaseRef = useRef5([]);
+  const [contextMenu, setContextMenu] = useState14(null);
+  useEffect11(() => {
     setIsRightCollapsed(!hasElementSelection);
   }, [hasElementSelection]);
   const updateBreakpoints = (next) => setRootStyle({
@@ -10207,18 +10768,18 @@ function Editor({
       });
     });
   };
-  const [dragInfo, setDragInfo] = useState13(null);
-  const [resizeInfo, setResizeInfo] = useState13(null);
-  const [guides, setGuides] = useState13({ origin: { x: 0, y: 0 }, lines: [] });
-  const [ghost, setGhost] = useState13(null);
-  const [dropTargetId, setDropTargetId] = useState13(
+  const [dragInfo, setDragInfo] = useState14(null);
+  const [resizeInfo, setResizeInfo] = useState14(null);
+  const [guides, setGuides] = useState14({ origin: { x: 0, y: 0 }, lines: [] });
+  const [ghost, setGhost] = useState14(null);
+  const [dropTargetId, setDropTargetId] = useState14(
     void 0
   );
-  const [clipboard, setClipboard] = useState13(null);
-  const [samples, setSamples] = useState13({});
-  const [pageError, setPageError] = useState13(null);
-  const [pageSwitchTarget, setPageSwitchTarget] = useState13(null);
-  useEffect10(() => {
+  const [clipboard, setClipboard] = useState14(null);
+  const [samples, setSamples] = useState14({});
+  const [pageError, setPageError] = useState14(null);
+  const [pageSwitchTarget, setPageSwitchTarget] = useState14(null);
+  useEffect11(() => {
     setSelectedIds([]);
     setEditingId(null);
     setHoveredEffectIds(/* @__PURE__ */ new Set());
@@ -10228,21 +10789,21 @@ function Editor({
     setContextMenu(null);
     setPageSwitchTarget(null);
   }, [page.id]);
-  const canvasRef = useRef4(null);
-  const [canvasHeight, setCanvasHeight] = useState13(rootStyle.canvasHeight);
-  const [contentHeight, setContentHeight] = useState13(rootStyle.canvasHeight);
+  const canvasRef = useRef5(null);
+  const [canvasHeight, setCanvasHeight] = useState14(rootStyle.canvasHeight);
+  const [contentHeight, setContentHeight] = useState14(rootStyle.canvasHeight);
   const displayCanvasHeight = Math.max(canvasHeight, contentHeight);
-  const byId = useMemo3(() => indexById(elements), [elements]);
-  const componentAssetIds = useMemo3(() => {
+  const byId = useMemo4(() => indexById(elements), [elements]);
+  const componentAssetIds = useMemo4(() => {
     const ids = /* @__PURE__ */ new Set();
     for (const master of elements.filter((element) => element.componentRole === "master")) for (const id of subtreeIds(elements, master.id)) ids.add(id);
     return ids;
   }, [elements]);
-  const activeComponentIds = useMemo3(
+  const activeComponentIds = useMemo4(
     () => activeComponentMaster ? subtreeIds(elements, activeComponentMaster.id) : /* @__PURE__ */ new Set(),
     [activeComponentMaster, elements]
   );
-  const visibleEditorElements = useMemo3(() => elements.filter((element) => componentMode ? activeComponentIds.has(element.id) : !componentAssetIds.has(element.id)), [activeComponentIds, componentAssetIds, componentMode, elements]);
+  const visibleEditorElements = useMemo4(() => elements.filter((element) => componentMode ? activeComponentIds.has(element.id) : !componentAssetIds.has(element.id)), [activeComponentIds, componentAssetIds, componentMode, elements]);
   const componentInstanceFor = useCallback3((element) => {
     if (componentMode) return void 0;
     let cursor = element;
@@ -10258,13 +10819,13 @@ function Editor({
   const selectedElement = selectedId ? byId.get(selectedId) : void 0;
   const deviceWidth = frameWidthForBreakpoint;
   const frameWidth = rootStyle.fullWidth ? deviceWidth : Math.min(deviceWidth, rootStyle.maxWidth);
-  useEffect10(() => setCanvasHeight(rootStyle.canvasHeight), [rootStyle.canvasHeight]);
-  useEffect10(() => {
+  useEffect11(() => setCanvasHeight(rootStyle.canvasHeight), [rootStyle.canvasHeight]);
+  useEffect11(() => {
     if (!componentMode || !activeComponentMaster) return;
     setCanvasHeight(Math.max(1, activeComponentMaster.base.h));
     setContentHeight(Math.max(1, activeComponentMaster.base.h));
   }, [activeComponentMaster?.base.h, activeComponentMaster?.id, componentMode]);
-  useEffect10(() => {
+  useEffect11(() => {
     const node2 = canvasRef.current;
     if (!node2) return;
     const observer = new ResizeObserver(([entry]) => {
@@ -10594,7 +11155,7 @@ function Editor({
     });
   }, []);
   const gesturing = dragInfo !== null || resizeInfo !== null;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!gesturing) return;
     const handleMouseMove = (event) => {
       const gestureBreakpoint = dragInfo?.breakpoint ?? resizeInfo?.breakpoint ?? breakpoint;
@@ -10773,7 +11334,7 @@ function Editor({
     setEditingId(null);
     setMarquee({ startX: event.clientX, startY: event.clientY, x: event.clientX, y: event.clientY });
   };
-  useEffect10(() => {
+  useEffect11(() => {
     if (!marquee) return;
     const move = (event) => {
       const left = Math.min(marquee.startX, event.clientX);
@@ -10846,7 +11407,7 @@ function Editor({
     setElements((els) => [...els, element]);
     setSelectedIds([element.id]);
   };
-  useEffect10(() => {
+  useEffect11(() => {
     const handler = (event) => {
       const target = event.target;
       const typing = !!target && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
@@ -10955,7 +11516,7 @@ function Editor({
     undo,
     zoomTo
   ]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!contextMenu) return;
     const close = () => setContextMenu(null);
     window.addEventListener("click", close);
@@ -11012,7 +11573,7 @@ function Editor({
       else adapters?.refresh?.();
     });
   }, [adapters, page.id, saveNow]);
-  const enclosingDataBlock = useMemo3(() => {
+  const enclosingDataBlock = useMemo4(() => {
     if (!selectedElement) return void 0;
     let cursor = selectedElement.parentId ? byId.get(selectedElement.parentId) : void 0;
     const guard = /* @__PURE__ */ new Set([selectedElement.id]);
@@ -11025,7 +11586,7 @@ function Editor({
   }, [byId, selectedElement]);
   const bindingSourceId = enclosingDataBlock?.sourceId ?? selectedElement?.sourceId;
   const bindingKeys = bindingSourceId ? samples[bindingSourceId]?.keys ?? [] : [];
-  const canvasData = useMemo3(
+  const canvasData = useMemo4(
     () => Object.fromEntries(
       Object.entries(samples).map(([id, sample]) => [id, sample.rows])
     ),
@@ -11080,7 +11641,7 @@ function Editor({
     return (
       // A canvas node is manipulated by pointer; the Layers panel is its keyboard equivalent.
       // biome-ignore lint/a11y/noStaticElementInteractions: pointer-driven canvas node
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs13(
         "div",
         {
           "data-canvas-element": el.id,
@@ -11126,7 +11687,7 @@ function Editor({
           onDragLeave: container ? () => setDropTargetId((c) => c === el.id ? void 0 : c) : void 0,
           onDrop: container ? (event) => handleDrop(event, el.id) : void 0,
           children: [
-            isEditing ? /* @__PURE__ */ jsx12(
+            isEditing ? /* @__PURE__ */ jsx14(
               "textarea",
               {
                 ref: (node2) => node2?.focus(),
@@ -11145,9 +11706,9 @@ function Editor({
                   lineHeight: "inherit"
                 }
               }
-            ) : /* @__PURE__ */ jsx12(ElementBody, { element: el }),
-            split ? /* @__PURE__ */ jsx12("div", { style: split.inner, children: renderChildren() }) : renderChildren(),
-            isSelected && !note && /* @__PURE__ */ jsxs11(
+            ) : /* @__PURE__ */ jsx14(ElementBody, { element: el }),
+            split ? /* @__PURE__ */ jsx14("div", { style: split.inner, children: renderChildren() }) : renderChildren(),
+            isSelected && !note && /* @__PURE__ */ jsxs13(
               "span",
               {
                 className: "pointer-events-none absolute -bottom-1 left-1/2 z-[70] translate-y-full whitespace-nowrap rounded px-1.5 py-0.5 font-mono text-[10px] font-medium text-white shadow-sm",
@@ -11165,7 +11726,7 @@ function Editor({
                 ]
               }
             ),
-            note && /* @__PURE__ */ jsx12(
+            note && /* @__PURE__ */ jsx14(
               "span",
               {
                 className: "pointer-events-none absolute -top-5 left-0 whitespace-nowrap rounded px-1.5 py-0.5 text-[10px] font-medium",
@@ -11176,7 +11737,7 @@ function Editor({
                 children: "Note \xB7 not published"
               }
             ),
-            isSelected && !el.locked && selectedIds.length === 1 && /* @__PURE__ */ jsx12(
+            isSelected && !el.locked && selectedIds.length === 1 && /* @__PURE__ */ jsx14(
               ResizeHandles,
               {
                 element: el,
@@ -11192,7 +11753,7 @@ function Editor({
   };
   const rootCss = rootStyleToCss(rootStyle);
   const customFontCss = (rootStyle.customFonts ?? []).map((font) => `@font-face{font-family:"${font.name.replace(/["'{};]/g, "")}";src:url("${font.url.replace(/["'()\\]/g, "")}");font-weight:${font.weight};font-style:${font.style};font-display:swap}`).join("\n");
-  const arrangeable = useMemo3(() => {
+  const arrangeable = useMemo4(() => {
     if (selectedIds.length < 2) return false;
     const parents = new Set(
       selectedIds.map((id) => byId.get(id)?.parentId ?? "__root__")
@@ -11243,7 +11804,7 @@ function Editor({
   const renderRailTab = (tab) => {
     const Icon = iconForRailTab(tab);
     const active = leftTab === tab && (tab === "Templates" || !isLeftCollapsed);
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs13(
       "button",
       {
         type: "button",
@@ -11253,50 +11814,50 @@ function Editor({
         "aria-label": tab,
         "aria-pressed": active,
         children: [
-          /* @__PURE__ */ jsx12(Icon, { size: 15, stroke: 1.65 }),
-          /* @__PURE__ */ jsx12("span", { className: "pointer-events-none absolute left-[calc(100%+10px)] z-[100] whitespace-nowrap rounded-full bg-[var(--ed-tooltip)] px-2.5 py-1.5 text-[10px] font-medium text-[var(--ed-tooltip-text)] opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:opacity-100", children: tab })
+          /* @__PURE__ */ jsx14(Icon, { size: 15, stroke: 1.65 }),
+          /* @__PURE__ */ jsx14("span", { className: "pointer-events-none absolute left-[calc(100%+10px)] z-[100] whitespace-nowrap rounded-full bg-[var(--ed-tooltip)] px-2.5 py-1.5 text-[10px] font-medium text-[var(--ed-tooltip-text)] opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:opacity-100", children: tab })
         ]
       },
       tab
     );
   };
   const ActiveLeftIcon = iconForRailTab(leftTab);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: "pg-editor flex h-screen w-full flex-col overflow-hidden bg-ed-surface font-sans text-xs text-ed-text selection:bg-blue-500/30",
       "data-ed-theme": chromeTheme === "light" ? "light" : void 0,
       children: [
-        /* @__PURE__ */ jsxs11("header", { className: "relative z-30 grid h-12 shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 border-b border-ed-border bg-ed-surface/95 px-2.5 backdrop-blur-xl", children: [
-          /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setIsLeftCollapsed((current) => !current), title: "Toggle sidebar", className: "w-fit select-none rounded-full px-2 py-1 text-[12px] font-semibold tracking-[-.02em] text-ed-text transition-colors hover:bg-ed-field", children: "Pagiera" }),
-          /* @__PURE__ */ jsx12("div", { className: "flex h-8 items-center gap-1 rounded-full bg-ed-subtle p-0.5", children: leftTab === "Templates" ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 px-3 text-[10px] font-semibold text-ed-text", children: [
-            /* @__PURE__ */ jsx12(IconTemplate2, { size: 13, className: "text-ed-accent" }),
-            /* @__PURE__ */ jsx12("span", { children: "Template marketplace" }),
-            /* @__PURE__ */ jsx12("span", { className: "rounded-full bg-ed-field px-2 py-0.5 text-[8px] font-medium text-ed-faint", children: "Discover" })
-          ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 text-[10px] font-medium text-ed-muted", children: [
-              componentMode && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-                /* @__PURE__ */ jsxs11(Select, { value: activeComponentMaster?.id, onValueChange: (id) => {
+        /* @__PURE__ */ jsxs13("header", { className: "relative z-30 grid h-12 shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 border-b border-ed-border bg-ed-surface/95 px-2.5 backdrop-blur-xl", children: [
+          /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setIsLeftCollapsed((current) => !current), title: "Toggle sidebar", className: "w-fit select-none rounded-full px-2 py-1 text-[12px] font-semibold tracking-[-.02em] text-ed-text transition-colors hover:bg-ed-field", children: "Pagiera" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex h-8 items-center gap-1 rounded-full bg-ed-subtle p-0.5", children: leftTab === "Templates" ? /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 px-3 text-[10px] font-semibold text-ed-text", children: [
+            /* @__PURE__ */ jsx14(IconTemplate2, { size: 13, className: "text-ed-accent" }),
+            /* @__PURE__ */ jsx14("span", { children: "Template marketplace" }),
+            /* @__PURE__ */ jsx14("span", { className: "rounded-full bg-ed-field px-2 py-0.5 text-[8px] font-medium text-ed-faint", children: "Discover" })
+          ] }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1 text-[10px] font-medium text-ed-muted", children: [
+              componentMode && /* @__PURE__ */ jsxs13(Fragment5, { children: [
+                /* @__PURE__ */ jsxs13(Select, { value: activeComponentMaster?.id, onValueChange: (id) => {
                   setActiveComponentMasterId(id);
                   setSelectedIds([id]);
                 }, children: [
-                  /* @__PURE__ */ jsx12(SelectTrigger, { "aria-label": "Variant", children: /* @__PURE__ */ jsx12(SelectValue, { placeholder: "Select variant" }) }),
-                  /* @__PURE__ */ jsx12(SelectContent, { children: activeComponentVariants.map((master) => /* @__PURE__ */ jsx12(SelectItem, { value: master.id, children: master.variant ?? "Default" }, master.id)) })
+                  /* @__PURE__ */ jsx14(SelectTrigger, { "aria-label": "Variant", children: /* @__PURE__ */ jsx14(SelectValue, { placeholder: "Select variant" }) }),
+                  /* @__PURE__ */ jsx14(SelectContent, { children: activeComponentVariants.map((master) => /* @__PURE__ */ jsx14(SelectItem, { value: master.id, children: master.variant ?? "Default" }, master.id)) })
                 ] }),
-                /* @__PURE__ */ jsx12("button", { type: "button", onClick: createComponentVariant, disabled: !activeComponentMaster, title: "Add variant", className: "flex size-6 items-center justify-center rounded-full text-ed-muted hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-30", children: /* @__PURE__ */ jsx12(IconPlus8, { size: 12 }) })
+                /* @__PURE__ */ jsx14("button", { type: "button", onClick: createComponentVariant, disabled: !activeComponentMaster, title: "Add variant", className: "flex size-6 items-center justify-center rounded-full text-ed-muted hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-30", children: /* @__PURE__ */ jsx14(IconPlus8, { size: 12 }) })
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-0.5", children: [
-                /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-0.5", children: [
+                /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
                     title: "Zoom out (Ctrl -)",
                     onClick: () => stepZoom(-1),
                     className: "flex size-6 items-center justify-center rounded-full transition-colors hover:bg-ed-field-hover hover:text-ed-text",
-                    children: /* @__PURE__ */ jsx12(IconMinus2, { size: 12 })
+                    children: /* @__PURE__ */ jsx14(IconMinus2, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ jsxs11(
+                /* @__PURE__ */ jsxs13(
                   "button",
                   {
                     type: "button",
@@ -11309,20 +11870,20 @@ function Editor({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
                     title: "Zoom in (Ctrl +)",
                     onClick: () => stepZoom(1),
                     className: "flex size-6 items-center justify-center rounded-full transition-colors hover:bg-ed-field-hover hover:text-ed-text",
-                    children: /* @__PURE__ */ jsx12(IconPlus8, { size: 12 })
+                    children: /* @__PURE__ */ jsx14(IconPlus8, { size: 12 })
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-0.5 border-l border-ed-border pl-1 text-ed-muted", children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-0.5 border-l border-ed-border pl-1 text-ed-muted", children: [
+              /* @__PURE__ */ jsx14(
                 "button",
                 {
                   type: "button",
@@ -11330,10 +11891,10 @@ function Editor({
                   onClick: undo,
                   disabled: !canUndo,
                   className: "flex size-6 items-center justify-center rounded-full transition-colors hover:bg-ed-field-hover hover:text-ed-text disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-ed-muted",
-                  children: /* @__PURE__ */ jsx12(IconArrowBackUp, { size: 14 })
+                  children: /* @__PURE__ */ jsx14(IconArrowBackUp, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx14(
                 "button",
                 {
                   type: "button",
@@ -11341,18 +11902,18 @@ function Editor({
                   onClick: redo,
                   disabled: !canRedo,
                   className: "flex size-6 items-center justify-center rounded-full transition-colors hover:bg-ed-field-hover hover:text-ed-text disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-ed-muted",
-                  children: /* @__PURE__ */ jsx12(IconArrowForwardUp, { size: 14 })
+                  children: /* @__PURE__ */ jsx14(IconArrowForwardUp, { size: 14 })
                 }
               )
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx12("div", { className: "flex min-w-0 items-center justify-end gap-1", children: leftTab === "Templates" ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
-            /* @__PURE__ */ jsx12("span", { className: "hidden text-[9px] text-ed-faint lg:block", children: "Curated responsive starting points" }),
-            /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => openLeftPanel("Layers"), className: "h-7 select-none rounded-full bg-ed-field px-3 text-[9px] font-semibold text-ed-text transition-colors hover:bg-ed-field-hover", children: "Back to canvas" }),
-            /* @__PURE__ */ jsx12("button", { type: "button", title: chromeTheme === "dark" ? "Switch to light editor" : "Switch to dark editor", "aria-label": "Toggle editor theme", onClick: toggleChromeTheme, className: "flex size-7 items-center justify-center rounded-full text-ed-muted transition-colors hover:bg-ed-field hover:text-ed-text", children: chromeTheme === "dark" ? /* @__PURE__ */ jsx12(IconSun, { size: 14 }) : /* @__PURE__ */ jsx12(IconMoon, { size: 14 }) })
-          ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
-            /* @__PURE__ */ jsx12("span", { className: "mr-1 hidden lg:block", children: /* @__PURE__ */ jsx12(SaveIndicator, { status: saveStatus, error: saveError }) }),
-            componentMode ? /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx14("div", { className: "flex min-w-0 items-center justify-end gap-1", children: leftTab === "Templates" ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsx14("span", { className: "hidden text-[9px] text-ed-faint lg:block", children: "Curated responsive starting points" }),
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => openLeftPanel("Layers"), className: "h-7 select-none rounded-full bg-ed-field px-3 text-[9px] font-semibold text-ed-text transition-colors hover:bg-ed-field-hover", children: "Back to canvas" }),
+            /* @__PURE__ */ jsx14("button", { type: "button", title: chromeTheme === "dark" ? "Switch to light editor" : "Switch to dark editor", "aria-label": "Toggle editor theme", onClick: toggleChromeTheme, className: "flex size-7 items-center justify-center rounded-full text-ed-muted transition-colors hover:bg-ed-field hover:text-ed-text", children: chromeTheme === "dark" ? /* @__PURE__ */ jsx14(IconSun, { size: 14 }) : /* @__PURE__ */ jsx14(IconMoon, { size: 14 }) })
+          ] }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsx14("span", { className: "mr-1 hidden lg:block", children: /* @__PURE__ */ jsx14(SaveIndicator, { status: saveStatus, error: saveError }) }),
+            componentMode ? /* @__PURE__ */ jsx14(
               "button",
               {
                 type: "button",
@@ -11365,8 +11926,8 @@ function Editor({
                 className: "h-7 select-none rounded-full bg-ed-field px-3 text-[10px] font-semibold text-ed-text transition-colors hover:bg-ed-field-hover",
                 children: "Back to pages"
               }
-            ) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
-              page.publishedAt && /* @__PURE__ */ jsx12(
+            ) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+              page.publishedAt && /* @__PURE__ */ jsx14(
                 "a",
                 {
                   href: (adapters?.publishedHref ?? defaultPublishedHref)(page.slug),
@@ -11374,10 +11935,10 @@ function Editor({
                   rel: "noopener noreferrer",
                   className: "hidden size-7 items-center justify-center rounded-full text-emerald-500 transition-colors hover:bg-emerald-500/10 hover:text-emerald-400 xl:flex",
                   title: (adapters?.publishedHref ?? defaultPublishedHref)(page.slug),
-                  children: /* @__PURE__ */ jsx12(IconWorld2, { size: 14 })
+                  children: /* @__PURE__ */ jsx14(IconWorld2, { size: 14 })
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx14(
                 "button",
                 {
                   type: "button",
@@ -11388,7 +11949,7 @@ function Editor({
                   children: isPending ? "Working\u2026" : page.publishedAt ? "Republish" : "Publish"
                 }
               ),
-              page.publishedAt && /* @__PURE__ */ jsx12(
+              page.publishedAt && /* @__PURE__ */ jsx14(
                 "button",
                 {
                   type: "button",
@@ -11398,7 +11959,7 @@ function Editor({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx14(
               "button",
               {
                 type: "button",
@@ -11406,10 +11967,10 @@ function Editor({
                 "aria-label": "Toggle editor theme",
                 onClick: toggleChromeTheme,
                 className: "flex size-7 items-center justify-center rounded-full text-ed-muted transition-colors hover:bg-ed-field hover:text-ed-text",
-                children: chromeTheme === "dark" ? /* @__PURE__ */ jsx12(IconSun, { size: 14 }) : /* @__PURE__ */ jsx12(IconMoon, { size: 14 })
+                children: chromeTheme === "dark" ? /* @__PURE__ */ jsx14(IconSun, { size: 14 }) : /* @__PURE__ */ jsx14(IconMoon, { size: 14 })
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx14(
               "button",
               {
                 type: "button",
@@ -11418,37 +11979,37 @@ function Editor({
                 title: hasElementSelection ? "Toggle properties panel" : "Select an element to open properties",
                 "aria-label": "Toggle properties panel",
                 className: "flex size-7 items-center justify-center rounded-full text-ed-faint transition-colors hover:bg-ed-field hover:text-ed-text disabled:cursor-not-allowed disabled:opacity-25 disabled:hover:bg-transparent",
-                children: isRightCollapsed ? /* @__PURE__ */ jsx12(IconLayoutSidebarLeftCollapse, { size: 15 }) : /* @__PURE__ */ jsx12(IconLayoutSidebarRightCollapse, { size: 15 })
+                children: isRightCollapsed ? /* @__PURE__ */ jsx14(IconLayoutSidebarLeftCollapse, { size: 15 }) : /* @__PURE__ */ jsx14(IconLayoutSidebarRightCollapse, { size: 15 })
               }
             )
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 overflow-hidden bg-ed-canvas", children: [
-          /* @__PURE__ */ jsxs11("aside", { className: "z-20 flex w-12 shrink-0 flex-col items-center border-r border-ed-border bg-ed-surface p-1.5", children: [
-            /* @__PURE__ */ jsx12("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ jsxs11("button", { type: "button", title: "Insert elements (A)", "aria-label": "Insert elements", "aria-pressed": leftTab === "Elements" && !isLeftCollapsed, className: `group relative flex size-8 items-center justify-center rounded-full transition-colors ${leftTab === "Elements" && !isLeftCollapsed ? "bg-ed-accent text-white" : "text-ed-muted hover:bg-ed-field-hover hover:text-ed-text"}`, onClick: () => {
+        /* @__PURE__ */ jsxs13("div", { className: "flex flex-1 overflow-hidden bg-ed-canvas", children: [
+          /* @__PURE__ */ jsxs13("aside", { className: "z-20 flex w-12 shrink-0 flex-col items-center border-r border-ed-border bg-ed-surface p-1.5", children: [
+            /* @__PURE__ */ jsx14("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ jsxs13("button", { type: "button", title: "Insert elements (A)", "aria-label": "Insert elements", "aria-pressed": leftTab === "Elements" && !isLeftCollapsed, className: `group relative flex size-8 items-center justify-center rounded-full transition-colors ${leftTab === "Elements" && !isLeftCollapsed ? "bg-ed-accent text-white" : "text-ed-muted hover:bg-ed-field-hover hover:text-ed-text"}`, onClick: () => {
               setLeftTab("Elements");
               setIsLeftCollapsed(false);
             }, children: [
-              /* @__PURE__ */ jsx12(IconPlus8, { size: 14, stroke: 1.8 }),
-              /* @__PURE__ */ jsx12("span", { className: "pointer-events-none absolute left-[calc(100%+10px)] z-[100] whitespace-nowrap rounded-full bg-[var(--ed-tooltip)] px-2.5 py-1.5 text-[10px] font-medium text-[var(--ed-tooltip-text)] opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:opacity-100", children: "Insert \xB7 A" })
+              /* @__PURE__ */ jsx14(IconPlus8, { size: 14, stroke: 1.8 }),
+              /* @__PURE__ */ jsx14("span", { className: "pointer-events-none absolute left-[calc(100%+10px)] z-[100] whitespace-nowrap rounded-full bg-[var(--ed-tooltip)] px-2.5 py-1.5 text-[10px] font-medium text-[var(--ed-tooltip-text)] opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:opacity-100", children: "Insert \xB7 A" })
             ] }) }),
-            /* @__PURE__ */ jsx12("div", { className: "my-1.5 h-px w-5 bg-ed-border" }),
-            /* @__PURE__ */ jsx12("nav", { "aria-label": "Project panels", className: "flex w-full flex-col items-center gap-1 rounded-full bg-ed-subtle p-0.5", children: projectRailTabs.map(renderRailTab) }),
-            /* @__PURE__ */ jsx12("div", { className: "my-1.5 h-px w-5 bg-ed-border" }),
-            /* @__PURE__ */ jsx12("nav", { "aria-label": "Editor tools", className: "flex w-full flex-col items-center gap-1 rounded-full bg-ed-subtle p-0.5", children: utilityRailTabs.map(renderRailTab) }),
-            !componentMode && /* @__PURE__ */ jsx12("nav", { "aria-label": "Site settings", className: "mt-auto flex w-full justify-center rounded-full bg-ed-subtle p-0.5", children: renderRailTab("Settings") })
+            /* @__PURE__ */ jsx14("div", { className: "my-1.5 h-px w-5 bg-ed-border" }),
+            /* @__PURE__ */ jsx14("nav", { "aria-label": "Project panels", className: "flex w-full flex-col items-center gap-1 rounded-full bg-ed-subtle p-0.5", children: projectRailTabs.map(renderRailTab) }),
+            /* @__PURE__ */ jsx14("div", { className: "my-1.5 h-px w-5 bg-ed-border" }),
+            /* @__PURE__ */ jsx14("nav", { "aria-label": "Editor tools", className: "flex w-full flex-col items-center gap-1 rounded-full bg-ed-subtle p-0.5", children: utilityRailTabs.map(renderRailTab) }),
+            !componentMode && /* @__PURE__ */ jsx14("nav", { "aria-label": "Site settings", className: "mt-auto flex w-full justify-center rounded-full bg-ed-subtle p-0.5", children: renderRailTab("Settings") })
           ] }),
-          /* @__PURE__ */ jsx12(AnimatePresence7, { initial: false, children: !isLeftCollapsed && leftTab !== "Templates" && /* @__PURE__ */ jsxs11(motion7.aside, { initial: { width: 0, opacity: 0, x: -12 }, animate: { width: leftTab === "AI" ? 380 : 292, opacity: 1, x: 0 }, exit: { width: 0, opacity: 0, x: -12 }, transition: { type: "spring", stiffness: 420, damping: 38 }, className: "relative z-10 flex shrink-0 flex-col overflow-hidden border-r border-ed-border bg-ed-surface/95 backdrop-blur-xl", children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex h-12 shrink-0 items-center justify-between border-b border-ed-border px-3.5", children: [
-              /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 items-center gap-2.5", children: [
-                /* @__PURE__ */ jsx12("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-ed-accent-soft text-ed-accent", children: /* @__PURE__ */ jsx12(ActiveLeftIcon, { size: 13, stroke: 1.7 }) }),
-                /* @__PURE__ */ jsx12("span", { className: "truncate text-[11px] font-semibold text-ed-text", children: leftTab })
+          /* @__PURE__ */ jsx14(AnimatePresence7, { initial: false, children: !isLeftCollapsed && leftTab !== "Templates" && /* @__PURE__ */ jsxs13(motion7.aside, { initial: { width: 0, opacity: 0, x: -12 }, animate: { width: leftTab === "AI" ? 380 : 292, opacity: 1, x: 0 }, exit: { width: 0, opacity: 0, x: -12 }, transition: { type: "spring", stiffness: 420, damping: 38 }, className: "relative z-10 flex shrink-0 flex-col overflow-hidden border-r border-ed-border bg-ed-surface/95 backdrop-blur-xl", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "flex h-12 shrink-0 items-center justify-between border-b border-ed-border px-3.5", children: [
+              /* @__PURE__ */ jsxs13("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx14("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-ed-accent-soft text-ed-accent", children: /* @__PURE__ */ jsx14(ActiveLeftIcon, { size: 13, stroke: 1.7 }) }),
+                /* @__PURE__ */ jsx14("span", { className: "truncate text-[11px] font-semibold text-ed-text", children: leftTab })
               ] }),
-              /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setIsLeftCollapsed(true), className: "rounded-full p-1 text-ed-faint transition-colors hover:bg-ed-field hover:text-ed-muted", children: /* @__PURE__ */ jsx12(IconX6, { size: 16 }) })
+              /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setIsLeftCollapsed(true), className: "rounded-full p-1 text-ed-faint transition-colors hover:bg-ed-field hover:text-ed-muted", children: /* @__PURE__ */ jsx14(IconX6, { size: 16 }) })
             ] }),
-            leftTab !== "Pages" && leftTab !== "Components" && leftTab !== "Assets" && leftTab !== "Library" && leftTab !== "Variables" && leftTab !== "Data" && leftTab !== "AI" && /* @__PURE__ */ jsx12("div", { className: "border-b border-ed-border p-3 bg-ed-subtle", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 rounded-md border border-ed-border bg-ed-surface px-2.5 py-1.5 transition-all focus-within:border-ed-accent/50 focus-within:ring-1 focus-within:ring-blue-500/20", children: [
-              /* @__PURE__ */ jsx12(IconSearch5, { size: 14, className: "text-ed-faint" }),
-              /* @__PURE__ */ jsx12(
+            leftTab !== "Pages" && leftTab !== "Components" && leftTab !== "Assets" && leftTab !== "Library" && leftTab !== "Variables" && leftTab !== "Data" && leftTab !== "AI" && /* @__PURE__ */ jsx14("div", { className: "border-b border-ed-border p-3 bg-ed-subtle", children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 rounded-md border border-ed-border bg-ed-surface px-2.5 py-1.5 transition-all focus-within:border-ed-accent/50 focus-within:ring-1 focus-within:ring-blue-500/20", children: [
+              /* @__PURE__ */ jsx14(IconSearch5, { size: 14, className: "text-ed-faint" }),
+              /* @__PURE__ */ jsx14(
                 "input",
                 {
                   type: "text",
@@ -11458,9 +12019,9 @@ function Editor({
                   className: "w-full bg-transparent text-xs text-ed-text outline-none placeholder:text-ed-faint"
                 }
               ),
-              /* @__PURE__ */ jsx12(IconCommand, { size: 12, className: "text-ed-faint" })
+              /* @__PURE__ */ jsx14(IconCommand, { size: 12, className: "text-ed-faint" })
             ] }) }),
-            /* @__PURE__ */ jsx12("div", { className: "custom-scrollbar flex-1 overflow-y-auto", children: leftTab === "Layers" ? /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx14("div", { className: "custom-scrollbar flex-1 overflow-y-auto", children: leftTab === "Layers" ? /* @__PURE__ */ jsx14(
               LayersPanel,
               {
                 elements: visibleEditorElements,
@@ -11486,7 +12047,7 @@ function Editor({
                 onReparent: doReparent,
                 onOpenComponent: openComponentEditor
               }
-            ) : leftTab === "Elements" ? /* @__PURE__ */ jsx12(ElementsPanel, { search, onInsert: insertElement }) : leftTab === "Icons" ? /* @__PURE__ */ jsx12(IconsPanel, { search, onInsert: (iconName) => insertElement("Icon", { iconName }) }) : leftTab === "Data" ? /* @__PURE__ */ jsx12(
+            ) : leftTab === "Elements" ? /* @__PURE__ */ jsx14(ElementsPanel, { search, onInsert: insertElement }) : leftTab === "Icons" ? /* @__PURE__ */ jsx14(IconsPanel, { search, onInsert: (iconName) => insertElement("Icon", { iconName }) }) : leftTab === "Data" ? /* @__PURE__ */ jsx14(
               DataPanel,
               {
                 sources: dataSources,
@@ -11495,40 +12056,40 @@ function Editor({
                 onSample: (id, sample) => setSamples((prev) => ({ ...prev, [id]: sample })),
                 preview: adapters?.previewSource ?? (async () => ({ status: "error", message: "No data preview adapter configured." }))
               }
-            ) : leftTab === "Library" ? /* @__PURE__ */ jsx12(
+            ) : leftTab === "Library" ? /* @__PURE__ */ jsx14(
               LibraryPanel,
               {
                 pages: library,
                 currentPageId: page.id,
                 onInsert: insertFromLibrary
               }
-            ) : leftTab === "Assets" ? /* @__PURE__ */ jsxs11("div", { className: "p-3", children: [
-              /* @__PURE__ */ jsxs11("div", { className: "mb-3 rounded-2xl border border-ed-border bg-ed-subtle p-3", children: [
-                /* @__PURE__ */ jsx12("p", { className: "text-[11px] font-semibold text-ed-text", children: "Assets" }),
-                /* @__PURE__ */ jsx12("p", { className: "mt-1 text-[9px] leading-relaxed text-ed-faint", children: "Navbar, sidebar, footer and reusable components live here once. Drag the exact variant you need onto any page." })
+            ) : leftTab === "Assets" ? /* @__PURE__ */ jsxs13("div", { className: "p-3", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "mb-3 rounded-2xl border border-ed-border bg-ed-subtle p-3", children: [
+                /* @__PURE__ */ jsx14("p", { className: "text-[11px] font-semibold text-ed-text", children: "Assets" }),
+                /* @__PURE__ */ jsx14("p", { className: "mt-1 text-[9px] leading-relaxed text-ed-faint", children: "Navbar, sidebar, footer and reusable components live here once. Drag the exact variant you need onto any page." })
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "mb-2.5 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs11("span", { className: "text-[10px] font-semibold text-ed-muted", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "mb-2.5 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs13("span", { className: "text-[10px] font-semibold text-ed-muted", children: [
                   componentAssets.length,
                   " shared asset",
                   componentAssets.length === 1 ? "" : "s"
                 ] }),
-                /* @__PURE__ */ jsxs11("span", { className: "flex gap-1", children: [
-                  /* @__PURE__ */ jsxs11("button", { type: "button", onClick: createBlankComponent, className: "flex items-center gap-1 rounded-full bg-ed-field px-2.5 py-1.5 text-[9px] text-ed-muted hover:text-ed-text", children: [
-                    /* @__PURE__ */ jsx12(IconPlus8, { size: 10 }),
+                /* @__PURE__ */ jsxs13("span", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ jsxs13("button", { type: "button", onClick: createBlankComponent, className: "flex items-center gap-1 rounded-full bg-ed-field px-2.5 py-1.5 text-[9px] text-ed-muted hover:text-ed-text", children: [
+                    /* @__PURE__ */ jsx14(IconPlus8, { size: 10 }),
                     " New"
                   ] }),
-                  /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setCodeComposerOpen(true), className: "rounded-full bg-ed-field px-2.5 py-1.5 text-[9px] text-ed-muted hover:text-ed-text", children: "Code" })
+                  /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setCodeComposerOpen(true), className: "rounded-full bg-ed-field px-2.5 py-1.5 text-[9px] text-ed-muted hover:text-ed-text", children: "Code" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx12(ComponentAssetCards, { assets: componentAssets, activeMasterId: activeComponentMaster?.id, onOpen: (master) => {
+              /* @__PURE__ */ jsx14(ComponentAssetCards, { assets: componentAssets, activeMasterId: activeComponentMaster?.id, onOpen: (master) => {
                 setRootStyle({ ...rootStyle, documentMode: "component" });
                 setActiveComponentMasterId(master.id);
                 setSelectedIds([master.id]);
                 setBreakpoint("desktop");
                 setLeftTab("Components");
               } })
-            ] }) : leftTab === "Variables" ? /* @__PURE__ */ jsx12(
+            ] }) : leftTab === "Variables" ? /* @__PURE__ */ jsx14(
               VariablesPanel,
               {
                 rootStyle,
@@ -11536,7 +12097,7 @@ function Editor({
                 setRootStyle,
                 setElements
               }
-            ) : leftTab === "AI" ? /* @__PURE__ */ jsx12(
+            ) : leftTab === "AI" ? /* @__PURE__ */ jsx14(
               AiPanel,
               {
                 pageId: page.id,
@@ -11546,37 +12107,37 @@ function Editor({
                 onApply: applyAiPlan,
                 generate: adapters?.generate
               }
-            ) : leftTab === "Components" ? /* @__PURE__ */ jsxs11("div", { className: "p-3", children: [
-              /* @__PURE__ */ jsxs11("div", { className: "mb-3 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs11("div", { children: [
-                  /* @__PURE__ */ jsx12("p", { className: "text-[11px] font-semibold text-ed-text", children: "Asset canvas" }),
-                  /* @__PURE__ */ jsx12("p", { className: "mt-1 text-[9px] text-ed-faint", children: "One asset, multiple variants\u2014similar to its own breakpoint set." })
+            ) : leftTab === "Components" ? /* @__PURE__ */ jsxs13("div", { className: "p-3", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "mb-3 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs13("div", { children: [
+                  /* @__PURE__ */ jsx14("p", { className: "text-[11px] font-semibold text-ed-text", children: "Asset canvas" }),
+                  /* @__PURE__ */ jsx14("p", { className: "mt-1 text-[9px] text-ed-faint", children: "One asset, multiple variants\u2014similar to its own breakpoint set." })
                 ] }),
-                /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => {
+                /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => {
                   setRootStyle({ ...rootStyle, documentMode: "page" });
                   setLeftTab("Assets");
                 }, className: "rounded-full bg-ed-field px-2.5 py-1.5 text-[9px] text-ed-muted hover:text-ed-text", children: "Back to page" })
               ] }),
-              activeComponentMaster && /* @__PURE__ */ jsxs11("div", { className: "mb-3 space-y-2 rounded-2xl border border-ed-border bg-ed-subtle p-2.5", children: [
-                /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 text-[9px] text-ed-faint", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "w-16", children: "Asset" }),
-                  /* @__PURE__ */ jsx12("input", { value: activeComponentMaster.name ?? "", placeholder: "Asset name", onChange: (event) => patchProps(activeComponentMaster.id, { name: event.target.value }), className: "h-8 min-w-0 flex-1 rounded-xl bg-ed-field px-2.5 text-[10px] text-ed-text outline-none focus:ring-1 focus:ring-ed-accent" })
+              activeComponentMaster && /* @__PURE__ */ jsxs13("div", { className: "mb-3 space-y-2 rounded-2xl border border-ed-border bg-ed-subtle p-2.5", children: [
+                /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 text-[9px] text-ed-faint", children: [
+                  /* @__PURE__ */ jsx14("span", { className: "w-16", children: "Asset" }),
+                  /* @__PURE__ */ jsx14("input", { value: activeComponentMaster.name ?? "", placeholder: "Asset name", onChange: (event) => patchProps(activeComponentMaster.id, { name: event.target.value }), className: "h-8 min-w-0 flex-1 rounded-xl bg-ed-field px-2.5 text-[10px] text-ed-text outline-none focus:ring-1 focus:ring-ed-accent" })
                 ] }),
-                /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 text-[9px] text-ed-faint", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "w-16", children: "Variant" }),
-                  /* @__PURE__ */ jsx12("input", { value: activeComponentMaster.variant ?? "Default", onChange: (event) => patchProps(activeComponentMaster.id, { variant: event.target.value }), className: "h-8 min-w-0 flex-1 rounded-xl bg-ed-field px-2.5 text-[10px] text-ed-text outline-none focus:ring-1 focus:ring-ed-accent" })
+                /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 text-[9px] text-ed-faint", children: [
+                  /* @__PURE__ */ jsx14("span", { className: "w-16", children: "Variant" }),
+                  /* @__PURE__ */ jsx14("input", { value: activeComponentMaster.variant ?? "Default", onChange: (event) => patchProps(activeComponentMaster.id, { variant: event.target.value }), className: "h-8 min-w-0 flex-1 rounded-xl bg-ed-field px-2.5 text-[10px] text-ed-text outline-none focus:ring-1 focus:ring-ed-accent" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx12(ComponentAssetCards, { assets: componentAssets, activeMasterId: activeComponentMaster?.id, onOpen: (master) => {
+              /* @__PURE__ */ jsx14(ComponentAssetCards, { assets: componentAssets, activeMasterId: activeComponentMaster?.id, onOpen: (master) => {
                 setActiveComponentMasterId(master.id);
                 setSelectedIds([master.id]);
               } }),
-              /* @__PURE__ */ jsxs11("button", { type: "button", onClick: createComponentVariant, disabled: !activeComponentMaster, className: "mt-3 flex w-full items-center justify-center gap-1.5 rounded-full bg-ed-accent px-3 py-2 text-[10px] font-semibold text-white disabled:opacity-30", children: [
-                /* @__PURE__ */ jsx12(IconPlus8, { size: 12 }),
+              /* @__PURE__ */ jsxs13("button", { type: "button", onClick: createComponentVariant, disabled: !activeComponentMaster, className: "mt-3 flex w-full items-center justify-center gap-1.5 rounded-full bg-ed-accent px-3 py-2 text-[10px] font-semibold text-white disabled:opacity-30", children: [
+                /* @__PURE__ */ jsx14(IconPlus8, { size: 12 }),
                 " Add variant to ",
                 activeComponentMaster?.name ?? "asset"
               ] })
-            ] }) : leftTab === "Settings" ? /* @__PURE__ */ jsx12("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx12(PageInspector, { rootStyle, onChange: updatePageSettings }) }) : /* @__PURE__ */ jsx12(
+            ] }) : leftTab === "Settings" ? /* @__PURE__ */ jsx14("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx14(PageInspector, { rootStyle, onChange: updatePageSettings }) }) : /* @__PURE__ */ jsx14(
               PagesPanel,
               {
                 pages,
@@ -11595,14 +12156,14 @@ function Editor({
                 publishedHref: adapters?.publishedHref ?? defaultPublishedHref
               }
             ) }),
-            leftTab === "Layers" && /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between border-t border-ed-border p-2 px-3 text-ed-muted", children: [
-              /* @__PURE__ */ jsxs11("span", { className: "text-[10px] tabular-nums", children: [
+            leftTab === "Layers" && /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-t border-ed-border p-2 px-3 text-ed-muted", children: [
+              /* @__PURE__ */ jsxs13("span", { className: "text-[10px] tabular-nums", children: [
                 elements.length,
                 " element",
                 elements.length === 1 ? "" : "s"
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
@@ -11610,10 +12171,10 @@ function Editor({
                     disabled: selectedIds.length === 0,
                     onClick: () => duplicateElements(selectedIds),
                     className: "rounded-full p-1.5 transition-colors hover:bg-ed-field hover:text-ed-text disabled:pointer-events-none disabled:opacity-30",
-                    children: /* @__PURE__ */ jsx12(IconCopy3, { size: 16 })
+                    children: /* @__PURE__ */ jsx14(IconCopy3, { size: 16 })
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
@@ -11621,13 +12182,13 @@ function Editor({
                     disabled: selectedIds.length === 0,
                     onClick: () => deleteElements(selectedIds),
                     className: "rounded-full p-1.5 transition-colors hover:bg-ed-field hover:text-ed-text disabled:pointer-events-none disabled:opacity-30",
-                    children: /* @__PURE__ */ jsx12(IconTrash8, { size: 16 })
+                    children: /* @__PURE__ */ jsx14(IconTrash8, { size: 16 })
                   }
                 )
               ] })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs13(
             "main",
             {
               className: "relative flex flex-1 flex-col overflow-hidden bg-ed-canvas",
@@ -11642,7 +12203,7 @@ function Editor({
                 if (event.target === event.currentTarget) setSelectedIds([]);
               },
               children: [
-                leftTab === "Templates" && /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 z-50 overflow-y-auto bg-ed-surface", children: /* @__PURE__ */ jsx12(
+                leftTab === "Templates" && /* @__PURE__ */ jsx14("div", { className: "absolute inset-0 z-50 overflow-y-auto bg-ed-surface", children: /* @__PURE__ */ jsx14(
                   TemplatesPanel,
                   {
                     busy: isPending,
@@ -11654,7 +12215,7 @@ function Editor({
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx14(
                   "div",
                   {
                     ref: viewportRef,
@@ -11676,7 +12237,7 @@ function Editor({
                         canvasY: rect ? Math.round((event.clientY - rect.top) / scale) : 0
                       });
                     },
-                    children: /* @__PURE__ */ jsx12(AnimatePresence7, { initial: false, mode: "wait", children: /* @__PURE__ */ jsx12(
+                    children: /* @__PURE__ */ jsx14(AnimatePresence7, { initial: false, mode: "wait", children: /* @__PURE__ */ jsx14(
                       motion7.div,
                       {
                         initial: reduceMotion ? false : { opacity: 0, y: 12, filter: "blur(5px)" },
@@ -11699,8 +12260,8 @@ function Editor({
                           const showFrameWidth = frameHeaderWidth >= 160;
                           const showFrameRange = frameHeaderWidth >= 330;
                           const showFrameActions = frameHeaderWidth >= 210;
-                          return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-                            /* @__PURE__ */ jsxs11(
+                          return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
+                            /* @__PURE__ */ jsxs13(
                               "div",
                               {
                                 draggable: !componentMode,
@@ -11723,7 +12284,7 @@ function Editor({
                                 className: `flex h-8 min-w-0 cursor-grab items-center gap-2 overflow-hidden rounded-lg border px-2 active:cursor-grabbing ${draggedBreakpointId === frame.bp ? "border-ed-accent bg-ed-accent/10 opacity-60" : "border-ed-border bg-ed-subtle"}`,
                                 style: { width: frameHeaderWidth },
                                 children: [
-                                  editingBreakpointId === frame.bp && !componentMode ? /* @__PURE__ */ jsx12(
+                                  editingBreakpointId === frame.bp && !componentMode ? /* @__PURE__ */ jsx14(
                                     "input",
                                     {
                                       ref: (node2) => node2?.select(),
@@ -11740,7 +12301,7 @@ function Editor({
                                       },
                                       className: "min-w-0 flex-1 rounded bg-ed-field px-1 text-[11px] font-medium text-ed-text outline-none ring-1 ring-ed-accent"
                                     }
-                                  ) : /* @__PURE__ */ jsx12(
+                                  ) : /* @__PURE__ */ jsx14(
                                     "button",
                                     {
                                       type: "button",
@@ -11758,7 +12319,7 @@ function Editor({
                                       children: componentMode ? `${frameMaster?.name ?? "Asset"} / ${frameMaster?.variant ?? "Default"}` : definition?.name ?? frame.bp
                                     }
                                   ),
-                                  componentMode && showFrameWidth ? /* @__PURE__ */ jsx12("span", { className: "font-mono text-[10px] text-ed-faint", children: `${frame.width} \xD7 ${frameCanvasHeight}` }) : !componentMode && showFrameWidth ? /* @__PURE__ */ jsx12(
+                                  componentMode && showFrameWidth ? /* @__PURE__ */ jsx14("span", { className: "font-mono text-[10px] text-ed-faint", children: `${frame.width} \xD7 ${frameCanvasHeight}` }) : !componentMode && showFrameWidth ? /* @__PURE__ */ jsx14(
                                     "input",
                                     {
                                       type: "number",
@@ -11769,9 +12330,9 @@ function Editor({
                                       className: "w-12 bg-transparent font-mono text-[10px] text-ed-faint outline-none hover:text-ed-muted focus:text-ed-text [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
                                     }
                                   ) : null,
-                                  !componentMode && showFrameRange && /* @__PURE__ */ jsx12("span", { className: "shrink-0 font-mono text-[10px] text-ed-faint/60", children: breakpointRange(frame.bp) }),
-                                  showFrameActions && /* @__PURE__ */ jsxs11("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [
-                                    !componentMode && /* @__PURE__ */ jsx12(
+                                  !componentMode && showFrameRange && /* @__PURE__ */ jsx14("span", { className: "shrink-0 font-mono text-[10px] text-ed-faint/60", children: breakpointRange(frame.bp) }),
+                                  showFrameActions && /* @__PURE__ */ jsxs13("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [
+                                    !componentMode && /* @__PURE__ */ jsx14(
                                       "button",
                                       {
                                         type: "button",
@@ -11782,10 +12343,10 @@ function Editor({
                                         disabled: isBaseFrame,
                                         title: isBaseFrame ? "Main breakpoint \u2014 its edits are shared" : "Make main breakpoint",
                                         className: `flex size-5 items-center justify-center rounded-md ${isBaseFrame ? "bg-ed-accent/15 text-ed-accent" : "bg-ed-field text-ed-muted hover:bg-ed-field-hover hover:text-ed-text"}`,
-                                        children: isBaseFrame ? /* @__PURE__ */ jsx12(IconPinFilled, { size: 11 }) : /* @__PURE__ */ jsx12(IconPin, { size: 11 })
+                                        children: isBaseFrame ? /* @__PURE__ */ jsx14(IconPinFilled, { size: 11 }) : /* @__PURE__ */ jsx14(IconPin, { size: 11 })
                                       }
                                     ),
-                                    !componentMode && breakpointDefs.length > 1 && /* @__PURE__ */ jsx12(
+                                    !componentMode && breakpointDefs.length > 1 && /* @__PURE__ */ jsx14(
                                       "button",
                                       {
                                         type: "button",
@@ -11795,19 +12356,19 @@ function Editor({
                                         },
                                         title: "Remove breakpoint",
                                         className: "flex size-5 items-center justify-center rounded-md bg-ed-field text-ed-muted hover:bg-red-500/15 hover:text-red-400",
-                                        children: /* @__PURE__ */ jsx12(IconTrash8, { size: 11 })
+                                        children: /* @__PURE__ */ jsx14(IconTrash8, { size: 11 })
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx12("button", { type: "button", onClick: (event) => {
+                                    /* @__PURE__ */ jsx14("button", { type: "button", onClick: (event) => {
                                       event.stopPropagation();
                                       if (componentMode) createComponentVariant();
                                       else addBreakpoint();
-                                    }, disabled: componentMode && !activeComponentMaster, className: "flex size-5 items-center justify-center rounded-md bg-ed-field text-ed-muted hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-30", title: componentMode ? "Add variant" : "Add breakpoint", children: /* @__PURE__ */ jsx12(IconPlus8, { size: 12 }) })
+                                    }, disabled: componentMode && !activeComponentMaster, className: "flex size-5 items-center justify-center rounded-md bg-ed-field text-ed-muted hover:bg-ed-field-hover hover:text-ed-text disabled:opacity-30", title: componentMode ? "Add variant" : "Add breakpoint", children: /* @__PURE__ */ jsx14(IconPlus8, { size: 12 }) })
                                   ] })
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsxs11(
+                            /* @__PURE__ */ jsxs13(
                               "div",
                               {
                                 className: "group/frame relative",
@@ -11817,7 +12378,7 @@ function Editor({
                                   flexShrink: 0
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx12(
+                                  /* @__PURE__ */ jsx14(
                                     "div",
                                     {
                                       ref: primary ? frameRef : void 0,
@@ -11837,7 +12398,7 @@ function Editor({
                                         if (event.target === event.currentTarget)
                                           beginMarquee(event, frame.bp);
                                       },
-                                      children: /* @__PURE__ */ jsxs11(
+                                      children: /* @__PURE__ */ jsxs13(
                                         "div",
                                         {
                                           ref: primary ? canvasRef : void 0,
@@ -11867,7 +12428,7 @@ function Editor({
                                               beginMarquee(event, frame.bp);
                                           },
                                           children: [
-                                            frameElements.length === 0 && /* @__PURE__ */ jsx12("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-ed-muted", children: "Drag an element here to start" }),
+                                            frameElements.length === 0 && /* @__PURE__ */ jsx14("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-ed-muted", children: "Drag an element here to start" }),
                                             childrenOf(frameElements, void 0).map(
                                               (el) => renderNode(
                                                 el,
@@ -11876,7 +12437,7 @@ function Editor({
                                                 `${frame.bp}:`
                                               )
                                             ),
-                                            primary && guides.lines.map((guide) => /* @__PURE__ */ jsx12(
+                                            primary && guides.lines.map((guide) => /* @__PURE__ */ jsx14(
                                               "div",
                                               {
                                                 className: "pointer-events-none absolute z-[9999] bg-fuchsia-500",
@@ -11899,14 +12460,14 @@ function Editor({
                                       )
                                     }
                                   ),
-                                  componentMode && /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": "Resize component width", onMouseDown: (event) => {
+                                  componentMode && /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": "Resize component width", onMouseDown: (event) => {
                                     if (frameMaster && frameMaster.id !== activeComponentMaster?.id) {
                                       setActiveComponentMasterId(frameMaster.id);
                                       setSelectedIds([frameMaster.id]);
                                     }
                                     beginComponentWidthResize(event, frameMaster);
-                                  }, className: "absolute -right-1.5 inset-y-0 z-30 w-3 cursor-ew-resize opacity-0 transition-opacity group-hover/frame:opacity-100", children: /* @__PURE__ */ jsx12("span", { className: "absolute inset-y-1/2 left-1/2 h-12 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-ed-accent shadow-[0_0_0_3px_var(--ed-accent-soft)]" }) }),
-                                  primary && /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": `Resize ${componentMode ? "component" : "page"} canvas height`, onMouseDown: beginCanvasResize, className: "absolute -bottom-1.5 inset-x-0 z-30 h-3 cursor-ns-resize opacity-0 transition-opacity group-hover/frame:opacity-100", children: /* @__PURE__ */ jsx12("span", { className: "absolute left-1/2 top-1/2 h-1 w-14 -translate-x-1/2 -translate-y-1/2 rounded-full bg-ed-accent shadow-[0_0_0_3px_var(--ed-accent-soft)]" }) })
+                                  }, className: "absolute -right-1.5 inset-y-0 z-30 w-3 cursor-ew-resize opacity-0 transition-opacity group-hover/frame:opacity-100", children: /* @__PURE__ */ jsx14("span", { className: "absolute inset-y-1/2 left-1/2 h-12 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-ed-accent shadow-[0_0_0_3px_var(--ed-accent-soft)]" }) }),
+                                  primary && /* @__PURE__ */ jsx14("button", { type: "button", "aria-label": `Resize ${componentMode ? "component" : "page"} canvas height`, onMouseDown: beginCanvasResize, className: "absolute -bottom-1.5 inset-x-0 z-30 h-3 cursor-ns-resize opacity-0 transition-opacity group-hover/frame:opacity-100", children: /* @__PURE__ */ jsx14("span", { className: "absolute left-1/2 top-1/2 h-1 w-14 -translate-x-1/2 -translate-y-1/2 rounded-full bg-ed-accent shadow-[0_0_0_3px_var(--ed-accent-soft)]" }) })
                                 ]
                               }
                             )
@@ -11917,7 +12478,7 @@ function Editor({
                     ) })
                   }
                 ),
-                /* @__PURE__ */ jsx12("div", { className: "absolute bottom-0 left-0 z-20 flex h-8 w-full items-center gap-2 border-t border-ed-border bg-ed-surface px-4 text-[11px] text-ed-muted shadow-sm", children: /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx14("div", { className: "absolute bottom-0 left-0 z-20 flex h-8 w-full items-center gap-2 border-t border-ed-border bg-ed-surface px-4 text-[11px] text-ed-muted shadow-sm", children: /* @__PURE__ */ jsx14(
                   Breadcrumbs,
                   {
                     byId,
@@ -11925,24 +12486,24 @@ function Editor({
                     onSelect: (id) => setSelectedIds([id])
                   }
                 ) }),
-                /* @__PURE__ */ jsxs11("div", { className: "absolute bottom-12 right-6 z-20 flex items-center gap-0.5 rounded-lg border border-ed-border bg-ed-surface/90 p-1 backdrop-blur", children: [
-                  /* @__PURE__ */ jsx12("button", { type: "button", title: effectsPreview ? "Stop interaction preview" : "Preview hover, press and layer actions", onClick: () => {
+                /* @__PURE__ */ jsxs13("div", { className: "absolute bottom-12 right-6 z-20 flex items-center gap-0.5 rounded-lg border border-ed-border bg-ed-surface/90 p-1 backdrop-blur", children: [
+                  /* @__PURE__ */ jsx14("button", { type: "button", title: effectsPreview ? "Stop interaction preview" : "Preview hover, press and layer actions", onClick: () => {
                     setEffectsPreview((value) => !value);
                     setHoveredEffectIds(/* @__PURE__ */ new Set());
                     setPressedEffectId(null);
                     setPreviewVisibility({});
-                  }, className: `rounded-md p-1.5 transition-colors ${effectsPreview ? "bg-ed-accent text-white" : "text-ed-faint hover:bg-ed-field hover:text-ed-text"}`, children: /* @__PURE__ */ jsx12(IconPlayerPlay5, { size: 14, stroke: 1.5 }) }),
-                  /* @__PURE__ */ jsx12(
+                  }, className: `rounded-md p-1.5 transition-colors ${effectsPreview ? "bg-ed-accent text-white" : "text-ed-faint hover:bg-ed-field hover:text-ed-text"}`, children: /* @__PURE__ */ jsx14(IconPlayerPlay5, { size: 14, stroke: 1.5 }) }),
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
                       title: "Recentre the canvas",
                       onClick: recenter,
                       className: "rounded-md p-1.5 text-ed-faint transition-colors hover:bg-ed-field hover:text-ed-text",
-                      children: /* @__PURE__ */ jsx12(IconFocusCentered, { size: 16, stroke: 1.5 })
+                      children: /* @__PURE__ */ jsx14(IconFocusCentered, { size: 16, stroke: 1.5 })
                     }
                   ),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
@@ -11952,22 +12513,22 @@ function Editor({
                       children: "1:1"
                     }
                   ),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
                       title: "Fit to width",
                       onClick: () => zoomToFit(),
                       className: "rounded-md p-1.5 text-ed-faint transition-colors hover:bg-ed-field hover:text-ed-text",
-                      children: /* @__PURE__ */ jsx12(IconArrowsMaximize, { size: 16, stroke: 1.5 })
+                      children: /* @__PURE__ */ jsx14(IconArrowsMaximize, { size: 16, stroke: 1.5 })
                     }
                   )
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx12(AnimatePresence7, { initial: false, children: leftTab !== "Templates" && !isRightCollapsed && hasElementSelection && /* @__PURE__ */ jsxs11(motion7.aside, { initial: { width: 0, opacity: 0, x: 14 }, animate: { width: 312, opacity: 1, x: 0 }, exit: { width: 0, opacity: 0, x: 14 }, transition: { type: "spring", stiffness: 420, damping: 38 }, className: "z-10 flex w-[312px] shrink-0 flex-col overflow-hidden border-l border-ed-border bg-ed-surface/95 backdrop-blur-xl", children: [
-            /* @__PURE__ */ jsx12("div", { className: "flex h-11 shrink-0 items-end gap-0.5 border-b border-ed-border px-2", children: ["Design", "Content", "Hover", "Interact"].map((tab) => /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsx14(AnimatePresence7, { initial: false, children: leftTab !== "Templates" && !isRightCollapsed && hasElementSelection && /* @__PURE__ */ jsxs13(motion7.aside, { initial: { width: 0, opacity: 0, x: 14 }, animate: { width: 312, opacity: 1, x: 0 }, exit: { width: 0, opacity: 0, x: 14 }, transition: { type: "spring", stiffness: 420, damping: 38 }, className: "z-10 flex w-[312px] shrink-0 flex-col overflow-hidden border-l border-ed-border bg-ed-surface/95 backdrop-blur-xl", children: [
+            /* @__PURE__ */ jsx14("div", { className: "flex h-11 shrink-0 items-end gap-0.5 border-b border-ed-border px-2", children: ["Design", "Content", "Hover", "Interact"].map((tab) => /* @__PURE__ */ jsxs13(
               "button",
               {
                 type: "button",
@@ -11976,7 +12537,7 @@ function Editor({
                 className: `relative flex-1 px-2 pb-3 pt-2 text-[11px] font-medium transition-colors disabled:opacity-30 ${rightTab === tab ? "text-ed-text" : "text-ed-muted hover:text-ed-text"}`,
                 children: [
                   tab === "Hover" ? "Effects" : tab === "Interact" ? "Actions" : tab,
-                  rightTab === tab && selectedElement && /* @__PURE__ */ jsx12(
+                  rightTab === tab && selectedElement && /* @__PURE__ */ jsx14(
                     motion7.span,
                     {
                       layoutId: "inspector-tab",
@@ -11988,36 +12549,36 @@ function Editor({
               },
               tab
             )) }),
-            selectedElement && breakpoint !== "desktop" && /* @__PURE__ */ jsxs11("p", { className: "border-b border-ed-border bg-amber-500/10 px-5 py-2.5 text-[11px] leading-relaxed text-amber-500", children: [
+            selectedElement && breakpoint !== "desktop" && /* @__PURE__ */ jsxs13("p", { className: "border-b border-ed-border bg-amber-500/10 px-5 py-2.5 text-[11px] leading-relaxed text-amber-500", children: [
               "Editing the ",
-              /* @__PURE__ */ jsx12("b", { children: breakpoint }),
+              /* @__PURE__ */ jsx14("b", { children: breakpoint }),
               " breakpoint. Changes here override desktop and only apply at this size."
             ] }),
-            /* @__PURE__ */ jsx12("div", { className: "custom-scrollbar flex flex-1 flex-col overflow-y-auto px-4 py-3", children: selectedElement ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
-              /* @__PURE__ */ jsxs11("div", { className: "mb-1 flex items-baseline justify-between", children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-[15px] font-semibold tracking-tight text-ed-text", children: selectedElement.type }),
-                /* @__PURE__ */ jsx12("span", { className: "font-mono text-[10px] text-ed-faint", children: selectedElement.id.slice(0, 6) })
+            /* @__PURE__ */ jsx14("div", { className: "custom-scrollbar flex flex-1 flex-col overflow-y-auto px-4 py-3", children: selectedElement ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+              /* @__PURE__ */ jsxs13("div", { className: "mb-1 flex items-baseline justify-between", children: [
+                /* @__PURE__ */ jsx14("span", { className: "text-[15px] font-semibold tracking-tight text-ed-text", children: selectedElement.type }),
+                /* @__PURE__ */ jsx14("span", { className: "font-mono text-[10px] text-ed-faint", children: selectedElement.id.slice(0, 6) })
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "mb-3 flex items-center gap-1.5", children: [
-                !componentMode && rootStyle.layout === "absolute" && selectedElement.parentId && /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => doReparent(selectedElement.id, void 0), className: "flex-1 rounded-lg border border-ed-border bg-ed-subtle px-2.5 py-2 text-[10px] font-medium text-ed-muted hover:border-ed-accent/50 hover:bg-ed-field hover:text-ed-text", children: "Detach to canvas" }),
-                selectedElement.componentRole === "master" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-                  /* @__PURE__ */ jsxs11("span", { className: "rounded-md bg-ed-accent/15 px-2 py-1 text-[9px] font-semibold uppercase text-ed-accent", children: [
+              /* @__PURE__ */ jsxs13("div", { className: "mb-3 flex items-center gap-1.5", children: [
+                !componentMode && rootStyle.layout === "absolute" && selectedElement.parentId && /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => doReparent(selectedElement.id, void 0), className: "flex-1 rounded-lg border border-ed-border bg-ed-subtle px-2.5 py-2 text-[10px] font-medium text-ed-muted hover:border-ed-accent/50 hover:bg-ed-field hover:text-ed-text", children: "Detach to canvas" }),
+                selectedElement.componentRole === "master" && /* @__PURE__ */ jsxs13(Fragment5, { children: [
+                  /* @__PURE__ */ jsxs13("span", { className: "rounded-md bg-ed-accent/15 px-2 py-1 text-[9px] font-semibold uppercase text-ed-accent", children: [
                     "Master \xB7 ",
                     selectedElement.variant
                   ] }),
-                  /* @__PURE__ */ jsx12("button", { type: "button", onClick: createComponentInstance, className: "rounded-lg bg-ed-field px-2 py-1.5 text-[9px] text-ed-text hover:bg-ed-field-hover", children: "Instance" }),
-                  /* @__PURE__ */ jsx12("button", { type: "button", onClick: createComponentVariant, className: "rounded-lg bg-ed-field px-2 py-1.5 text-[9px] text-ed-text hover:bg-ed-field-hover", children: "+ Variant" })
+                  /* @__PURE__ */ jsx14("button", { type: "button", onClick: createComponentInstance, className: "rounded-lg bg-ed-field px-2 py-1.5 text-[9px] text-ed-text hover:bg-ed-field-hover", children: "Instance" }),
+                  /* @__PURE__ */ jsx14("button", { type: "button", onClick: createComponentVariant, className: "rounded-lg bg-ed-field px-2 py-1.5 text-[9px] text-ed-text hover:bg-ed-field-hover", children: "+ Variant" })
                 ] }),
-                selectedElement.componentRole === "instance" && /* @__PURE__ */ jsxs11(
+                selectedElement.componentRole === "instance" && /* @__PURE__ */ jsxs13(
                   Select,
                   {
                     value: selectedElement.variant ?? "Default",
                     onValueChange: switchInstanceVariant,
                     children: [
-                      /* @__PURE__ */ jsx12(SelectTrigger, { className: "h-8 min-w-0 flex-1", "aria-label": "Component variant", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
-                      /* @__PURE__ */ jsx12(SelectContent, { children: elements.filter(
+                      /* @__PURE__ */ jsx14(SelectTrigger, { className: "h-8 min-w-0 flex-1", "aria-label": "Component variant", children: /* @__PURE__ */ jsx14(SelectValue, {}) }),
+                      /* @__PURE__ */ jsx14(SelectContent, { children: elements.filter(
                         (element) => element.componentRole === "master" && element.componentId === selectedElement.componentId
-                      ).map((element) => /* @__PURE__ */ jsx12(
+                      ).map((element) => /* @__PURE__ */ jsx14(
                         SelectItem,
                         {
                           value: element.variant ?? "Default",
@@ -12029,13 +12590,13 @@ function Editor({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx14(
                 motion7.div,
                 {
                   initial: { opacity: 0, y: 7 },
                   animate: { opacity: 1, y: 0 },
                   transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] },
-                  children: /* @__PURE__ */ jsx12(
+                  children: /* @__PURE__ */ jsx14(
                     Inspector,
                     {
                       tab: rightTab,
@@ -12057,7 +12618,7 @@ function Editor({
                 },
                 rightTab
               )
-            ] }) : selectedIds.length > 1 ? /* @__PURE__ */ jsx12(
+            ] }) : selectedIds.length > 1 ? /* @__PURE__ */ jsx14(
               MultiSelectPanel,
               {
                 count: selectedIds.length,
@@ -12072,45 +12633,45 @@ function Editor({
             ) : null })
           ] }) })
         ] }),
-        codeComposerOpen && /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/65 p-6 backdrop-blur-sm", onMouseDown: () => setCodeComposerOpen(false), children: /* @__PURE__ */ jsxs11("div", { className: "flex h-[min(720px,85vh)] w-[min(820px,92vw)] flex-col overflow-hidden rounded-2xl border border-ed-border bg-ed-surface shadow-2xl", onMouseDown: (event) => event.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs11("div", { className: "flex h-12 items-center justify-between border-b border-ed-border px-4", children: [
-            /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx12("p", { className: "text-xs font-semibold text-ed-text", children: "New code component" }),
-              /* @__PURE__ */ jsx12("p", { className: "text-[9px] text-ed-faint", children: "Sandboxed HTML and CSS \u2014 scripts stay disabled." })
+        codeComposerOpen && /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/65 p-6 backdrop-blur-sm", onMouseDown: () => setCodeComposerOpen(false), children: /* @__PURE__ */ jsxs13("div", { className: "flex h-[min(720px,85vh)] w-[min(820px,92vw)] flex-col overflow-hidden rounded-2xl border border-ed-border bg-ed-surface shadow-2xl", onMouseDown: (event) => event.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs13("div", { className: "flex h-12 items-center justify-between border-b border-ed-border px-4", children: [
+            /* @__PURE__ */ jsxs13("div", { children: [
+              /* @__PURE__ */ jsx14("p", { className: "text-xs font-semibold text-ed-text", children: "New code component" }),
+              /* @__PURE__ */ jsx14("p", { className: "text-[9px] text-ed-faint", children: "Sandboxed HTML and CSS \u2014 scripts stay disabled." })
             ] }),
-            /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setCodeComposerOpen(false), className: "rounded-md p-1.5 text-ed-muted hover:bg-ed-field hover:text-ed-text", children: /* @__PURE__ */ jsx12(IconX6, { size: 15 }) })
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setCodeComposerOpen(false), className: "rounded-md p-1.5 text-ed-muted hover:bg-ed-field hover:text-ed-text", children: /* @__PURE__ */ jsx14(IconX6, { size: 15 }) })
           ] }),
-          /* @__PURE__ */ jsxs11("div", { className: "grid min-h-0 flex-1 grid-cols-2", children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex min-h-0 flex-col gap-3 border-r border-ed-border p-4", children: [
-              /* @__PURE__ */ jsxs11("label", { className: "text-[10px] font-medium text-ed-muted", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "grid min-h-0 flex-1 grid-cols-2", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "flex min-h-0 flex-col gap-3 border-r border-ed-border p-4", children: [
+              /* @__PURE__ */ jsxs13("label", { className: "text-[10px] font-medium text-ed-muted", children: [
                 "Name",
-                /* @__PURE__ */ jsx12("input", { value: codeComponentName, onChange: (event) => setCodeComponentName(event.target.value), className: "mt-1.5 h-9 w-full rounded-lg border border-ed-border bg-ed-field px-3 text-[11px] text-ed-text outline-none focus:border-ed-accent" })
+                /* @__PURE__ */ jsx14("input", { value: codeComponentName, onChange: (event) => setCodeComponentName(event.target.value), className: "mt-1.5 h-9 w-full rounded-lg border border-ed-border bg-ed-field px-3 text-[11px] text-ed-text outline-none focus:border-ed-accent" })
               ] }),
-              /* @__PURE__ */ jsxs11("label", { className: "flex min-h-0 flex-1 flex-col text-[10px] font-medium text-ed-muted", children: [
+              /* @__PURE__ */ jsxs13("label", { className: "flex min-h-0 flex-1 flex-col text-[10px] font-medium text-ed-muted", children: [
                 "HTML / CSS",
-                /* @__PURE__ */ jsx12("textarea", { value: codeComponentSource, onChange: (event) => setCodeComponentSource(event.target.value), spellCheck: false, className: "mt-1.5 min-h-0 flex-1 resize-none rounded-xl border border-ed-border bg-[#101114] p-3 font-mono text-[11px] leading-relaxed text-zinc-300 outline-none focus:border-ed-accent" })
+                /* @__PURE__ */ jsx14("textarea", { value: codeComponentSource, onChange: (event) => setCodeComponentSource(event.target.value), spellCheck: false, className: "mt-1.5 min-h-0 flex-1 resize-none rounded-xl border border-ed-border bg-[#101114] p-3 font-mono text-[11px] leading-relaxed text-zinc-300 outline-none focus:border-ed-accent" })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: "flex min-h-0 flex-col bg-ed-canvas p-4", children: [
-              /* @__PURE__ */ jsx12("span", { className: "mb-2 text-[10px] font-medium text-ed-muted", children: "Preview" }),
-              /* @__PURE__ */ jsx12("iframe", { title: "Code component preview", srcDoc: codeComponentSource, sandbox: "", className: "min-h-0 flex-1 rounded-xl border border-ed-border bg-white" })
+            /* @__PURE__ */ jsxs13("div", { className: "flex min-h-0 flex-col bg-ed-canvas p-4", children: [
+              /* @__PURE__ */ jsx14("span", { className: "mb-2 text-[10px] font-medium text-ed-muted", children: "Preview" }),
+              /* @__PURE__ */ jsx14("iframe", { title: "Code component preview", srcDoc: codeComponentSource, sandbox: "", className: "min-h-0 flex-1 rounded-xl border border-ed-border bg-white" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex h-14 items-center justify-end gap-2 border-t border-ed-border px-4", children: [
-            /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setCodeComposerOpen(false), className: "rounded-lg px-3 py-2 text-[10px] text-ed-muted hover:bg-ed-field", children: "Cancel" }),
-            /* @__PURE__ */ jsx12("button", { type: "button", onClick: createCodeComponent, disabled: !codeComponentSource.trim(), className: "rounded-lg bg-ed-accent px-3 py-2 text-[10px] font-semibold text-white disabled:opacity-30", children: "Create component" })
+          /* @__PURE__ */ jsxs13("div", { className: "flex h-14 items-center justify-end gap-2 border-t border-ed-border px-4", children: [
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setCodeComposerOpen(false), className: "rounded-lg px-3 py-2 text-[10px] text-ed-muted hover:bg-ed-field", children: "Cancel" }),
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: createCodeComponent, disabled: !codeComponentSource.trim(), className: "rounded-lg bg-ed-accent px-3 py-2 text-[10px] font-semibold text-white disabled:opacity-30", children: "Create component" })
           ] })
         ] }) }),
-        breakpointPanel && !componentMode && /* @__PURE__ */ jsxs11("div", { className: "fixed left-1/2 top-16 z-[80] w-[420px] -translate-x-1/2 rounded-2xl border border-ed-border bg-ed-surface p-4 shadow-2xl", children: [
-          /* @__PURE__ */ jsxs11("div", { className: "mb-4 flex items-start justify-between", children: [
-            /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-ed-text", children: "Breakpoints" }),
-              /* @__PURE__ */ jsx12("p", { className: "mt-1 text-[11px] text-ed-muted", children: "Rename, resize and reorder the viewports. Main values are shared by every other size." })
+        breakpointPanel && !componentMode && /* @__PURE__ */ jsxs13("div", { className: "fixed left-1/2 top-16 z-[80] w-[420px] -translate-x-1/2 rounded-2xl border border-ed-border bg-ed-surface p-4 shadow-2xl", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "mb-4 flex items-start justify-between", children: [
+            /* @__PURE__ */ jsxs13("div", { children: [
+              /* @__PURE__ */ jsx14("h3", { className: "text-sm font-semibold text-ed-text", children: "Breakpoints" }),
+              /* @__PURE__ */ jsx14("p", { className: "mt-1 text-[11px] text-ed-muted", children: "Rename, resize and reorder the viewports. Main values are shared by every other size." })
             ] }),
-            /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setBreakpointPanel(false), className: "rounded p-1 text-ed-muted hover:bg-ed-field", children: /* @__PURE__ */ jsx12(IconX6, { size: 15 }) })
+            /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setBreakpointPanel(false), className: "rounded p-1 text-ed-muted hover:bg-ed-field", children: /* @__PURE__ */ jsx14(IconX6, { size: 15 }) })
           ] }),
-          /* @__PURE__ */ jsx12("div", { className: "flex max-h-[360px] flex-col gap-2 overflow-y-auto scrollbar-none", children: breakpointDefs.map((item, index) => /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-[1fr_86px_auto] items-center gap-2 rounded-xl border border-ed-border bg-ed-subtle p-2", children: [
-            /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx14("div", { className: "flex max-h-[360px] flex-col gap-2 overflow-y-auto scrollbar-none", children: breakpointDefs.map((item, index) => /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-[1fr_86px_auto] items-center gap-2 rounded-xl border border-ed-border bg-ed-subtle p-2", children: [
+            /* @__PURE__ */ jsx14(
               "input",
               {
                 "aria-label": "Breakpoint name",
@@ -12120,8 +12681,8 @@ function Editor({
                 className: "min-w-0 rounded-lg border border-ed-border bg-ed-field px-2.5 py-2 text-xs text-ed-text outline-none focus:border-ed-accent"
               }
             ),
-            /* @__PURE__ */ jsxs11("label", { className: "flex items-center rounded-lg border border-ed-border bg-ed-field px-2 py-2 text-xs text-ed-muted", children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs13("label", { className: "flex items-center rounded-lg border border-ed-border bg-ed-field px-2 py-2 text-xs text-ed-muted", children: [
+              /* @__PURE__ */ jsx14(
                 "input",
                 {
                   "aria-label": "Breakpoint width",
@@ -12135,23 +12696,23 @@ function Editor({
               ),
               "px"
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-0.5", children: [
-              item.id === cascade.baseId ? /* @__PURE__ */ jsx12("span", { className: "rounded-md bg-ed-accent/15 px-2 py-1.5 text-[10px] font-semibold text-ed-accent", children: "MAIN" }) : /* @__PURE__ */ jsx12("button", { type: "button", title: "Make main", onClick: () => setBaseBreakpoint(item.id), className: "rounded-md px-2 py-1.5 text-[10px] font-semibold text-ed-muted hover:bg-ed-field hover:text-ed-text", children: "MAIN" }),
-              /* @__PURE__ */ jsx12("button", { type: "button", disabled: index === 0, title: "Move left", onClick: () => {
+            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-0.5", children: [
+              item.id === cascade.baseId ? /* @__PURE__ */ jsx14("span", { className: "rounded-md bg-ed-accent/15 px-2 py-1.5 text-[10px] font-semibold text-ed-accent", children: "MAIN" }) : /* @__PURE__ */ jsx14("button", { type: "button", title: "Make main", onClick: () => setBaseBreakpoint(item.id), className: "rounded-md px-2 py-1.5 text-[10px] font-semibold text-ed-muted hover:bg-ed-field hover:text-ed-text", children: "MAIN" }),
+              /* @__PURE__ */ jsx14("button", { type: "button", disabled: index === 0, title: "Move left", onClick: () => {
                 const next = [...breakpointDefs];
                 [next[index - 1], next[index]] = [next[index], next[index - 1]];
                 updateBreakpoints(next);
-              }, className: "rounded p-1 text-ed-faint hover:bg-ed-field disabled:opacity-20", children: /* @__PURE__ */ jsx12(IconChevronLeft2, { size: 13 }) }),
-              /* @__PURE__ */ jsx12("button", { type: "button", disabled: index === breakpointDefs.length - 1, title: "Move right", onClick: () => {
+              }, className: "rounded p-1 text-ed-faint hover:bg-ed-field disabled:opacity-20", children: /* @__PURE__ */ jsx14(IconChevronLeft2, { size: 13 }) }),
+              /* @__PURE__ */ jsx14("button", { type: "button", disabled: index === breakpointDefs.length - 1, title: "Move right", onClick: () => {
                 const next = [...breakpointDefs];
                 [next[index], next[index + 1]] = [next[index + 1], next[index]];
                 updateBreakpoints(next);
-              }, className: "rounded p-1 text-ed-faint hover:bg-ed-field disabled:opacity-20", children: /* @__PURE__ */ jsx12(IconChevronRight6, { size: 13 }) }),
-              item.id !== cascade.baseId && breakpointDefs.length > 1 && /* @__PURE__ */ jsx12("button", { type: "button", title: "Delete", onClick: () => removeBreakpoint(item.id), className: "rounded p-1 text-ed-faint hover:bg-red-500/10 hover:text-red-400", children: /* @__PURE__ */ jsx12(IconTrash8, { size: 13 }) })
+              }, className: "rounded p-1 text-ed-faint hover:bg-ed-field disabled:opacity-20", children: /* @__PURE__ */ jsx14(IconChevronRight6, { size: 13 }) }),
+              item.id !== cascade.baseId && breakpointDefs.length > 1 && /* @__PURE__ */ jsx14("button", { type: "button", title: "Delete", onClick: () => removeBreakpoint(item.id), className: "rounded p-1 text-ed-faint hover:bg-red-500/10 hover:text-red-400", children: /* @__PURE__ */ jsx14(IconTrash8, { size: 13 }) })
             ] })
           ] }, item.id)) })
         ] }),
-        contextMenu && menuElementId && /* @__PURE__ */ jsx12(
+        contextMenu && menuElementId && /* @__PURE__ */ jsx14(
           ContextMenu,
           {
             x: contextMenu.x,
@@ -12190,45 +12751,45 @@ function Editor({
             onDelete: () => deleteElements([menuElementId])
           }
         ),
-        contextMenu && !contextMenu.elementId && /* @__PURE__ */ jsxs11("div", { className: "fixed z-[90] w-48 overflow-hidden rounded-xl border border-ed-border bg-ed-surface p-1.5 shadow-2xl", style: { left: contextMenu.x, top: contextMenu.y }, children: [
-          ["Text", "Heading", "Button", "Container"].map((type) => /* @__PURE__ */ jsxs11("button", { type: "button", onClick: () => {
+        contextMenu && !contextMenu.elementId && /* @__PURE__ */ jsxs13("div", { className: "fixed z-[90] w-48 overflow-hidden rounded-xl border border-ed-border bg-ed-surface p-1.5 shadow-2xl", style: { left: contextMenu.x, top: contextMenu.y }, children: [
+          ["Text", "Heading", "Button", "Container"].map((type) => /* @__PURE__ */ jsxs13("button", { type: "button", onClick: () => {
             const created = createElement(type, { x: contextMenu.canvasX ?? 0, y: contextMenu.canvasY ?? 0, z: nextZ(elements) });
             if (type === "Text") created.content = "Canvas note";
             setElements((current) => [...current, created]);
             setSelectedIds([created.id]);
             setContextMenu(null);
           }, className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs text-ed-muted hover:bg-ed-field hover:text-ed-text", children: [
-            /* @__PURE__ */ jsx12(IconPlus8, { size: 13 }),
+            /* @__PURE__ */ jsx14(IconPlus8, { size: 13 }),
             " Add ",
             type
           ] }, type)),
-          /* @__PURE__ */ jsx12("div", { className: "my-1 h-px bg-ed-border" }),
-          componentMode ? /* @__PURE__ */ jsxs11("button", { type: "button", onClick: () => {
+          /* @__PURE__ */ jsx14("div", { className: "my-1 h-px bg-ed-border" }),
+          componentMode ? /* @__PURE__ */ jsxs13("button", { type: "button", onClick: () => {
             createComponentVariant();
             setContextMenu(null);
           }, disabled: !activeComponentMaster, className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs font-medium text-ed-muted hover:bg-ed-field hover:text-ed-text disabled:opacity-30", children: [
-            /* @__PURE__ */ jsx12(IconComponents2, { size: 13 }),
+            /* @__PURE__ */ jsx14(IconComponents2, { size: 13 }),
             " Add variant"
-          ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
-            /* @__PURE__ */ jsxs11("button", { type: "button", onClick: () => {
+          ] }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+            /* @__PURE__ */ jsxs13("button", { type: "button", onClick: () => {
               addBreakpoint();
               setBreakpointPanel(true);
               setContextMenu(null);
             }, className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs font-medium text-ed-muted hover:bg-ed-field hover:text-ed-text", children: [
-              /* @__PURE__ */ jsx12(IconLayoutColumns, { size: 13 }),
+              /* @__PURE__ */ jsx14(IconLayoutColumns, { size: 13 }),
               " Add breakpoint"
             ] }),
-            /* @__PURE__ */ jsxs11("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsxs13("button", { type: "button", onClick: () => {
               setBreakpointPanel(true);
               setContextMenu(null);
             }, className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs text-ed-muted hover:bg-ed-field hover:text-ed-text", children: [
-              /* @__PURE__ */ jsx12(IconBox3, { size: 13 }),
+              /* @__PURE__ */ jsx14(IconBox3, { size: 13 }),
               " Breakpoint settings"
             ] })
           ] })
         ] }),
-        marquee && /* @__PURE__ */ jsx12("div", { className: "pointer-events-none fixed z-[110] border border-blue-400 bg-blue-500/20 shadow-[0_0_0_1px_rgba(59,130,246,.15)]", style: { left: Math.min(marquee.startX, marquee.x), top: Math.min(marquee.startY, marquee.y), width: Math.abs(marquee.x - marquee.startX), height: Math.abs(marquee.y - marquee.startY) } }),
-        /* @__PURE__ */ jsx12(
+        marquee && /* @__PURE__ */ jsx14("div", { className: "pointer-events-none fixed z-[110] border border-blue-400 bg-blue-500/20 shadow-[0_0_0_1px_rgba(59,130,246,.15)]", style: { left: Math.min(marquee.startX, marquee.x), top: Math.min(marquee.startY, marquee.y), width: Math.abs(marquee.x - marquee.startX), height: Math.abs(marquee.y - marquee.startY) } }),
+        /* @__PURE__ */ jsx14(
           "style",
           {
             dangerouslySetInnerHTML: {