@fayz-ai/app-builder 1.0.0

package/dist/chunk-45SFS6FV.js

@@ -0,0 +1,721 @@
+import { Loader2, Check, ChevronsUpDown, ChevronLeft, Search, Folder, ChevronRight, House, FileText, Eye, Code2, Monitor, Smartphone, ExternalLink, RotateCw, AlertTriangle, Globe } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React3 from 'react';
+
+// src/components/PublishButton.tsx
+function PublishButton({
+  publish,
+  labels
+}) {
+  const label = labels?.publish ?? "Publicar";
+  const state = publish?.state ?? "idle";
+  const busy = state === "publishing";
+  const disabled = !publish || busy;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => publish?.publish(),
+      disabled,
+      title: publish ? publish.error ?? label : labels?.publishUnavailable ?? "Publicar ainda n\xE3o est\xE1 ligado neste ambiente",
+      className: "flex h-9 items-center gap-1.5 rounded-full bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40",
+      children: [
+        busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : null,
+        state === "published" && !busy ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : null,
+        label
+      ]
+    }
+  );
+}
+
+// src/lib/pages.ts
+var HOME_LABELS = { "/": "In\xEDcio" };
+function normalizeRoute(route) {
+  const clean = route.split("?")[0].replace(/^#/, "");
+  return clean.startsWith("/") ? clean : `/${clean}`;
+}
+function isHomeRoute(route) {
+  return normalizeRoute(route) === "/";
+}
+var KNOWN = {
+  produtos: "Produtos",
+  products: "Produtos",
+  carrinho: "Carrinho",
+  cart: "Carrinho",
+  checkout: "Checkout",
+  contato: "Contato",
+  contact: "Contato",
+  sobre: "Sobre",
+  about: "Sobre",
+  blog: "Blog",
+  colecoes: "Cole\xE7\xF5es",
+  collections: "Cole\xE7\xF5es",
+  cardapio: "Card\xE1pio",
+  conta: "Conta",
+  account: "Conta",
+  pedidos: "Pedidos",
+  catalog: "Cat\xE1logo",
+  catalogo: "Cat\xE1logo",
+  privacy: "Privacidade",
+  terms: "Termos",
+  refunds: "Reembolsos",
+  receitas: "Receitas",
+  product: "Produtos",
+  collection: "Cole\xE7\xF5es"
+};
+function labelForRoute(route) {
+  const clean = normalizeRoute(route);
+  if (HOME_LABELS[clean]) return HOME_LABELS[clean];
+  const segments = clean.split("/").filter(Boolean);
+  if (!segments.length) return HOME_LABELS["/"];
+  return segments.map((segment) => {
+    const key = segment.toLowerCase();
+    if (KNOWN[key]) return KNOWN[key];
+    const words = segment.replace(/^:/, "").replace(/[-_]+/g, " ");
+    return words.charAt(0).toUpperCase() + words.slice(1);
+  }).join(" \u203A ");
+}
+var GROUP_FROM = 3;
+function toPageGroups(routes) {
+  const bySegment = /* @__PURE__ */ new Map();
+  for (const route of routes) {
+    const segment = normalizeRoute(route).split("/").filter(Boolean)[0] ?? "";
+    const list = bySegment.get(segment) ?? [];
+    list.push({ route, label: labelForRoute(route) });
+    bySegment.set(segment, list);
+  }
+  const groups = [];
+  for (const [segment, pages] of bySegment) {
+    if (pages.length < GROUP_FROM || !segment) {
+      groups.push(...pages.map((page) => ({ key: page.route, label: page.label, route: page.route, children: [] })));
+      continue;
+    }
+    groups.push({
+      key: segment,
+      label: labelForRoute(`/${segment}`),
+      children: pages.map((page) => ({
+        route: page.route,
+        // Inside the folder the section name is the folder's, not each row's.
+        label: page.label.split(" \u203A ").slice(1).join(" \u203A ") || page.label
+      }))
+    });
+  }
+  const rank = (g) => g.route && isHomeRoute(g.route) ? 0 : 1;
+  return groups.sort((a, b) => rank(a) - rank(b) || a.label.localeCompare(b.label));
+}
+function toPages(routes) {
+  return routes.map((route) => ({ route, label: labelForRoute(route) }));
+}
+
+// src/lib/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function PagePicker({
+  routes,
+  currentPath,
+  onNavigate,
+  fallback,
+  leading,
+  searchLabel = "Buscar p\xE1gina",
+  emptyLabel = "Nenhuma p\xE1gina com esse nome"
+}) {
+  const [open, setOpen] = React3.useState(false);
+  const [query, setQuery] = React3.useState("");
+  const boxRef = React3.useRef(null);
+  const inputRef = React3.useRef(null);
+  const [section, setSection] = React3.useState(null);
+  const pages = React3.useMemo(() => toPages(routes), [routes]);
+  const groups = React3.useMemo(() => toPageGroups(routes), [routes]);
+  const openSection = React3.useMemo(() => groups.find((g) => g.key === section) ?? null, [groups, section]);
+  const matches = React3.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q) return pages.filter((p) => p.label.toLowerCase().includes(q) || p.route.toLowerCase().includes(q));
+    if (openSection) return openSection.children;
+    return null;
+  }, [pages, query, openSection]);
+  React3.useEffect(() => {
+    if (!open) return;
+    const onDown = (event) => {
+      if (!boxRef.current?.contains(event.target)) setOpen(false);
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    inputRef.current?.focus();
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const label = pages.length ? labelForRoute(currentPath) : fallback;
+  if (!pages.length) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-full bg-muted/60 px-2", children: [
+      leading,
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs text-muted-foreground", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: boxRef, className: "relative flex h-9 min-w-0 flex-1 items-center gap-2 rounded-full bg-muted/60 px-2", children: [
+    leading,
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setQuery("");
+          setSection(null);
+          setOpen((v) => !v);
+        },
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-full py-1 text-left text-xs font-medium text-foreground",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "listbox",
+        className: "absolute left-0 top-[calc(100%+6px)] z-50 w-[min(22rem,100%)] overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+        children: [
+          openSection && !query ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSection(null),
+              className: "flex w-full items-center gap-2 border-b border-border px-3 py-2 text-sm font-medium text-foreground hover:bg-muted/60",
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                openSection.label
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                value: query,
+                onChange: (event) => setQuery(event.target.value),
+                placeholder: searchLabel,
+                "aria-label": searchLabel,
+                className: "w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto p-1", children: !matches ? groups.map((group) => {
+            if (!group.route) {
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSection(group.key),
+                  className: "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm text-foreground transition-colors hover:bg-muted/60",
+                  children: [
+                    /* @__PURE__ */ jsx(Folder, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: group.label }),
+                    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: group.children.length }),
+                    /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground" })
+                  ]
+                },
+                group.key
+              );
+            }
+            const active = normalizeRoute(group.route) === normalizeRoute(currentPath);
+            const Icon = isHomeRoute(group.route) ? House : FileText;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": active,
+                onClick: () => {
+                  onNavigate(group.route);
+                  setOpen(false);
+                },
+                className: cn(
+                  "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors",
+                  active ? "bg-muted font-medium text-foreground" : "text-foreground hover:bg-muted/60"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: group.label }),
+                  active ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null
+                ]
+              },
+              group.key
+            );
+          }) : matches.length ? matches.map((page) => {
+            const active = normalizeRoute(page.route) === normalizeRoute(currentPath);
+            const Icon = isHomeRoute(page.route) ? House : FileText;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": active,
+                onClick: () => {
+                  onNavigate(page.route);
+                  setOpen(false);
+                },
+                className: cn(
+                  "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors",
+                  active ? "bg-muted font-medium text-foreground" : "text-foreground hover:bg-muted/60"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: page.label }),
+                  active ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null
+                ]
+              },
+              page.route
+            );
+          }) : /* @__PURE__ */ jsx("p", { className: "px-2.5 py-6 text-center text-xs text-muted-foreground", children: emptyLabel }) })
+        ]
+      }
+    ) : null
+  ] });
+}
+var iconButton = "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+function addressOf(url, path) {
+  if (!url) return path;
+  try {
+    const parsed = new URL(url);
+    const base = parsed.host + parsed.pathname.replace(/\/+$/, "");
+    return path === "/" ? base + "/" : base + path;
+  } catch {
+    return path;
+  }
+}
+function TrafficLights({
+  onClose,
+  onToggleChat,
+  onToggleWide,
+  labels
+}) {
+  const lights = [
+    { id: "close", color: "bg-[#ff5f57]", label: labels?.close ?? "Sair", onClick: onClose },
+    { id: "minimize", color: "bg-[#febc2e]", label: labels?.toggleChat ?? "Recolher a conversa", onClick: onToggleChat },
+    { id: "zoom", color: "bg-[#28c840]", label: labels?.toggleWide ?? "Dar a tela toda ao app", onClick: onToggleWide }
+  ].filter((light) => !!light.onClick);
+  if (!lights.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5 pl-1", children: lights.map((light) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: light.label,
+      "aria-label": light.label,
+      onClick: light.onClick,
+      className: "flex h-4 w-4 items-center justify-center rounded-full transition-transform hover:scale-125 active:scale-95",
+      children: /* @__PURE__ */ jsx("span", { className: cn("h-3 w-3 rounded-full", light.color) })
+    },
+    light.id
+  )) });
+}
+function BuilderChrome({
+  target,
+  currentPath,
+  routes,
+  onNavigate,
+  viewport,
+  onViewportChange,
+  onReload,
+  mode,
+  onModeChange,
+  publish,
+  onClose,
+  onToggleChat,
+  onToggleWide,
+  chromeEnd,
+  labels
+}) {
+  const address = addressOf(target.url, currentPath);
+  const openTarget = target.liveUrl ?? target.url;
+  const Device = viewport === "desktop" ? Monitor : Smartphone;
+  const deviceLabel = viewport === "desktop" ? "Ver no celular" : "Ver no computador";
+  return (
+    // Same 56px as the companion column's header (RightRail), so the two read
+    // as one window bar rather than two rows that nearly line up.
+    /* @__PURE__ */ jsxs("div", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-3", children: [
+      viewport === "desktop" ? /* @__PURE__ */ jsx(
+        TrafficLights,
+        {
+          onClose,
+          onToggleChat,
+          onToggleWide,
+          labels
+        }
+      ) : null,
+      onModeChange ? /* @__PURE__ */ jsx("div", { className: "ml-1 flex shrink-0 items-center gap-0.5 rounded-full bg-muted/60 p-0.5", children: [
+        { id: "preview", icon: Eye, title: labels?.preview ?? "Visual" },
+        { id: "code", icon: Code2, title: labels?.code ?? "C\xF3digo" }
+      ].map(({ id, icon: Icon, title }) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          title,
+          "aria-label": title,
+          "aria-pressed": mode === id,
+          onClick: () => onModeChange(id),
+          className: cn(
+            "flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium transition-colors",
+            mode === id ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+            title
+          ]
+        },
+        id
+      )) }) : null,
+      /* @__PURE__ */ jsx(
+        PagePicker,
+        {
+          routes,
+          currentPath,
+          onNavigate,
+          fallback: address,
+          searchLabel: labels?.searchPage,
+          emptyLabel: labels?.noPage,
+          leading: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: deviceLabel,
+              "aria-label": deviceLabel,
+              onClick: () => onViewportChange(viewport === "desktop" ? "mobile" : "desktop"),
+              className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Device, { className: "h-4 w-4" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: labels?.viewLive ?? "Abrir em uma aba",
+          "aria-label": labels?.viewLive ?? "Abrir em uma aba",
+          disabled: !openTarget,
+          onClick: () => openTarget && window.open(openTarget, "_blank", "noopener,noreferrer"),
+          className: iconButton,
+          children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: labels?.reload ?? "Recarregar",
+          "aria-label": labels?.reload ?? "Recarregar",
+          onClick: onReload,
+          className: iconButton,
+          children: /* @__PURE__ */ jsx(RotateCw, { className: "h-4 w-4" })
+        }
+      ),
+      chromeEnd,
+      /* @__PURE__ */ jsx(PublishButton, { publish, labels })
+    ] })
+  );
+}
+var FRAME = "h-full w-full";
+function BuilderCanvas({
+  target,
+  frame,
+  labels
+}) {
+  const [dragging, setDragging] = React3.useState(false);
+  React3.useEffect(() => {
+    const down = (event) => {
+      const el = event.target;
+      if (el?.closest('[role="separator"]')) setDragging(true);
+    };
+    const up = () => setDragging(false);
+    window.addEventListener("pointerdown", down, true);
+    window.addEventListener("pointerup", up, true);
+    return () => {
+      window.removeEventListener("pointerdown", down, true);
+      window.removeEventListener("pointerup", up, true);
+    };
+  }, []);
+  if (!frame.src) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 justify-center overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref: frame.frameRef,
+        src: frame.src,
+        title: target.name,
+        onLoad: frame.onLoad,
+        className: cn("border-0 bg-white", FRAME, dragging && "pointer-events-none"),
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
+      },
+      `${frame.src}#${frame.nonce}`
+    ),
+    frame.loading && !frame.failed && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }),
+    frame.failed && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/95 p-6 text-center", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: labels?.loadFailed ?? "N\xE3o foi poss\xEDvel carregar o app aqui dentro." }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-sm text-xs text-muted-foreground", children: labels?.loadFailedHint ?? "O servidor pode estar bloqueando a exibi\xE7\xE3o em outra p\xE1gina. Abra em uma nova aba enquanto isso." }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => frame.src && window.open(frame.src, "_blank", "noopener,noreferrer"),
+          className: "mt-1 rounded-full border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted",
+          children: labels?.openInTab ?? "Abrir em nova aba"
+        }
+      )
+    ] })
+  ] });
+}
+function BuilderEmpty({ labels, onAction }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(Globe, { className: "h-6 w-6 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: labels?.emptyTitle ?? "Nenhum app vinculado ainda" }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-sm text-xs text-muted-foreground", children: labels?.emptyBody ?? "Vincule o projeto para edit\xE1-lo aqui, conversando com o assistente." }),
+    onAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onAction,
+        className: "mt-1 rounded-full border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted",
+        children: labels?.emptyAction ?? "Vincular em Configura\xE7\xF5es"
+      }
+    ) : null
+  ] });
+}
+
+// src/lib/bridge.ts
+var BUILDER_MESSAGES = {
+  activate: "ACTIVATE_ELEMENT_PICKER",
+  deactivate: "DEACTIVATE_ELEMENT_PICKER",
+  ready: "ELEMENT_PICKER_READY",
+  picked: "ELEMENT_PICKED",
+  cancelled: "ELEMENT_PICKER_CANCELLED",
+  navigation: "NAVIGATION_CHANGE"
+};
+var ROUTES_SOURCE = "fayz-routes";
+var ROUTES_PARENT_SOURCE = "fayz-routes-parent";
+function connectBuilderBridge(frame, origin, handlers) {
+  const win = typeof window === "undefined" ? void 0 : window;
+  if (!win) return () => {
+  };
+  const onMessage = (event) => {
+    if (event.origin !== origin) return;
+    if (event.source !== frame.contentWindow) return;
+    const data = event.data;
+    if (data?.source === ROUTES_SOURCE) {
+      if (data.type === "ROUTES_DISCOVERED" && Array.isArray(data.routes)) handlers.onRoutes?.(data.routes);
+      else if (data.type === "ROUTE_CHANGED" && typeof data.route === "string") handlers.onNavigate?.(data.route);
+      return;
+    }
+    switch (data?.type) {
+      case BUILDER_MESSAGES.navigation:
+        if (typeof data.path === "string") handlers.onNavigate?.(data.path);
+        break;
+      case BUILDER_MESSAGES.ready:
+        handlers.onReady?.();
+        break;
+      case BUILDER_MESSAGES.picked:
+        if (data.data) handlers.onPicked?.(data.data);
+        break;
+      case BUILDER_MESSAGES.cancelled:
+        handlers.onCancelled?.();
+        break;
+    }
+  };
+  win.addEventListener("message", onMessage);
+  return () => win.removeEventListener("message", onMessage);
+}
+function navigateBuilder(frame, origin, route) {
+  postToBuilder(frame, origin, { source: ROUTES_PARENT_SOURCE, type: "NAVIGATE", route });
+}
+function postToBuilder(frame, origin, message) {
+  if (!frame?.contentWindow || !origin) return;
+  frame.contentWindow.postMessage(message, origin);
+}
+
+// src/lib/url.ts
+function getBaseUrl(url) {
+  return url.split("?")[0].split("#")[0].replace(/\/$/, "");
+}
+function getQueryString(url) {
+  const parts = url.split("?");
+  return parts.length > 1 ? parts[1].split("#")[0] : "";
+}
+function buildIframeUrl(baseUrl, route) {
+  const cleanBase = getBaseUrl(baseUrl);
+  const queryString = getQueryString(baseUrl);
+  if (route.startsWith("#/")) {
+    return `${cleanBase}${queryString ? "?" + queryString : ""}${route}`;
+  }
+  const hashIndex = route.indexOf("#");
+  const routePath = hashIndex === -1 ? route : route.substring(0, hashIndex);
+  const hashFragment = hashIndex === -1 ? "" : route.substring(hashIndex);
+  let result = `${cleanBase}${routePath === "/" ? "" : routePath}`;
+  if (queryString) result += `?${queryString}`;
+  if (hashFragment) result += hashFragment;
+  return result;
+}
+function addCacheBuster(url, now = Date.now()) {
+  return `${url}${url.includes("?") ? "&" : "?"}_cb=${now}`;
+}
+function extractRouteFromUrl(fullUrl, baseUrl) {
+  try {
+    const full = new URL(fullUrl);
+    const base = new URL(baseUrl);
+    if (full.host !== base.host) return "/";
+    let pathname = full.pathname;
+    if (base.pathname !== "/" && pathname.startsWith(base.pathname)) {
+      pathname = pathname.slice(base.pathname.length);
+    }
+    if (!pathname.startsWith("/")) pathname = "/" + pathname;
+    return pathname || "/";
+  } catch {
+    return "/";
+  }
+}
+function isValidPreviewUrl(url) {
+  if (!url) return false;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function getUrlOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return null;
+  }
+}
+var LOAD_TIMEOUT_MS = 8e3;
+function useBuilderFrame(url, handlers) {
+  const frameRef = React3.useRef(null);
+  const [nonce, setNonce] = React3.useState(0);
+  const [loading, setLoading] = React3.useState(true);
+  const [failed, setFailed] = React3.useState(false);
+  const [currentPath, setCurrentPath] = React3.useState("/");
+  const [routes, setRoutes] = React3.useState([]);
+  const origin = React3.useMemo(() => url ? getUrlOrigin(url) : null, [url]);
+  const src = React3.useMemo(() => url ? buildIframeUrl(url, "/") : null, [url]);
+  const cb = React3.useRef(handlers);
+  cb.current = handlers;
+  React3.useEffect(() => {
+    setLoading(true);
+    setFailed(false);
+  }, [src, nonce]);
+  React3.useEffect(() => {
+    if (!loading) return;
+    const timer = setTimeout(() => setFailed(true), LOAD_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [loading, src, nonce]);
+  React3.useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame || !origin) return;
+    return connectBuilderBridge(frame, origin, {
+      onRoutes: setRoutes,
+      onNavigate: (path) => {
+        setCurrentPath(path);
+        cb.current?.onNavigate?.(path);
+      },
+      onPicked: (block) => cb.current?.onPick?.({ selector: block.path, tagName: block.type })
+    });
+  }, [origin, nonce]);
+  const reload = React3.useCallback(() => setNonce((n) => n + 1), []);
+  const navigate = React3.useCallback(
+    (path) => {
+      setCurrentPath(path);
+      navigateBuilder(frameRef.current, origin, path);
+    },
+    [origin]
+  );
+  const onLoad = React3.useCallback(() => {
+    setLoading(false);
+    setFailed(false);
+  }, []);
+  return { frameRef, nonce, src, origin, loading, failed, currentPath, routes, onLoad, reload, navigate };
+}
+function AppBuilder({
+  target,
+  mode = "preview",
+  onModeChange,
+  code,
+  chat,
+  publish,
+  onClose,
+  onToggleChat,
+  onToggleWide,
+  onNavigate,
+  onPick,
+  viewport: viewportProp,
+  onViewportChange,
+  empty,
+  labels,
+  slots,
+  className,
+  frame: frameProp
+}) {
+  const [internalViewport, setInternalViewport] = React3.useState("desktop");
+  const viewport = viewportProp ?? internalViewport;
+  const setViewport = onViewportChange ?? setInternalViewport;
+  const handlePick = React3.useCallback(
+    (context) => onPick?.(context),
+    [onPick]
+  );
+  const ownFrame = useBuilderFrame(frameProp ? null : target.url, { onNavigate, onPick: handlePick });
+  const frame = frameProp ?? ownFrame;
+  const body = !target.url ? empty ?? /* @__PURE__ */ jsx(BuilderEmpty, { labels }) : mode === "code" && code ? /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: code }) : /* @__PURE__ */ jsx(BuilderCanvas, { target, frame, labels });
+  const mobile = viewport === "mobile" && !!target.url;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", mobile && "items-center bg-muted/30 py-3"), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex min-h-0 w-full flex-1 flex-col overflow-hidden",
+            mobile && "max-w-[420px] rounded-2xl border border-border bg-card shadow-xl"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              BuilderChrome,
+              {
+                target,
+                currentPath: frame.currentPath,
+                routes: frame.routes,
+                onNavigate: frame.navigate,
+                viewport,
+                onViewportChange: setViewport,
+                onReload: frame.reload,
+                mode,
+                onModeChange: code ? onModeChange : void 0,
+                publish,
+                onClose,
+                onToggleChat,
+                onToggleWide,
+                chromeEnd: slots?.chromeEnd,
+                labels
+              }
+            ),
+            body
+          ]
+        }
+      ),
+      slots?.belowCanvas
+    ] }),
+    chat ? /* @__PURE__ */ jsx("div", { className: "hidden w-[min(28rem,32%)] shrink-0 border-l border-border md:flex md:flex-col md:overflow-hidden", children: chat }) : null
+  ] });
+}
+
+export { AppBuilder, BUILDER_MESSAGES, BuilderCanvas, BuilderChrome, BuilderEmpty, PagePicker, PublishButton, addCacheBuster, buildIframeUrl, connectBuilderBridge, extractRouteFromUrl, getBaseUrl, getQueryString, getUrlOrigin, isHomeRoute, isValidPreviewUrl, labelForRoute, navigateBuilder, normalizeRoute, postToBuilder, toPageGroups, toPages, useBuilderFrame };
+//# sourceMappingURL=chunk-45SFS6FV.js.map
+//# sourceMappingURL=chunk-45SFS6FV.js.map