@bacano/sdk 1.0.1 → 1.1.8

package/react/preview.js

@@ -0,0 +1,730 @@
+// libs/sdk/src/react/preview/context.ts
+import { useContext } from "react";
+
+// libs/sdk/src/react/context-registry.ts
+import { createContext } from "react";
+var REACT_CONTEXT_REGISTRY = /* @__PURE__ */ Symbol.for(
+  "@bacano/sdk/react-context-registry/v1"
+);
+function getReactContextRegistry() {
+  const globalRegistry = globalThis;
+  const existing = globalRegistry[REACT_CONTEXT_REGISTRY];
+  if (existing instanceof Map) {
+    return existing;
+  }
+  const registry = /* @__PURE__ */ new Map();
+  globalRegistry[REACT_CONTEXT_REGISTRY] = registry;
+  return registry;
+}
+function getOrCreateReactContext(key, defaultValue) {
+  const registry = getReactContextRegistry();
+  const existing = registry.get(key);
+  if (existing) {
+    return existing;
+  }
+  const context = createContext(defaultValue);
+  registry.set(key, context);
+  return context;
+}
+
+// libs/sdk/src/react/preview/context.ts
+var BacanoPreviewModeContext = getOrCreateReactContext(
+  "bacano-preview-mode-v1",
+  false
+);
+var BacanoPreviewContext = getOrCreateReactContext(
+  "bacano-preview-state-v1",
+  null
+);
+function useBacanoPreview() {
+  const context = useContext(BacanoPreviewContext);
+  if (!context) {
+    throw new Error(
+      "useBacanoPreview must be used inside BacanoPreviewProvider."
+    );
+  }
+  return context;
+}
+function useBacanoPreviewMode() {
+  return useContext(BacanoPreviewModeContext);
+}
+
+// libs/sdk/src/react/preview/navigation.ts
+function normalizePreviewRoute(value) {
+  if (!value) return "/";
+  let decoded = value.trim();
+  try {
+    decoded = decodeURIComponent(decoded);
+  } catch {
+    return "/";
+  }
+  if (!decoded.startsWith("/") || decoded.startsWith("//")) return "/";
+  const [pathname] = decoded.split(/[?#]/, 1);
+  if (!pathname || pathname.includes("\\") || Array.from(pathname).some((character) => character.charCodeAt(0) < 32)) {
+    return "/";
+  }
+  return pathname === "/" ? pathname : pathname.replace(/\/+$/, "");
+}
+function interceptPreviewLink(event, options) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || typeof Element === "undefined") {
+    return false;
+  }
+  if (!(event.target instanceof Element)) return false;
+  const anchor = event.target.closest("a");
+  if (!(anchor instanceof HTMLAnchorElement) || anchor.target === "_blank" || anchor.hasAttribute("download")) {
+    return false;
+  }
+  const currentOrigin = options.origin ?? (typeof window === "undefined" ? void 0 : window.location.origin);
+  if (!currentOrigin) return false;
+  const url = new URL(anchor.href, currentOrigin);
+  if (url.origin !== currentOrigin) return false;
+  const normalize = options.normalizeRoute ?? normalizePreviewRoute;
+  const route = normalize(url.pathname);
+  if (options.isPreviewableRoute?.(route) === false) return false;
+  event.preventDefault();
+  options.navigate(route);
+  return true;
+}
+
+// libs/sdk/src/react/preview/provider.tsx
+import {
+  useCallback,
+  useContext as useContext2,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// libs/sdk/src/react/context.ts
+var BacanoReactContext = getOrCreateReactContext("bacano-client-v1", {
+  client: null,
+  loading: true,
+  error: null
+});
+
+// libs/sdk/src/react/marketing-context.ts
+var NOOP_MARKETING_RUNTIME = {
+  enabled: false,
+  track: () => void 0,
+  captureAttribution: () => null,
+  getAttribution: () => null,
+  destroy: () => void 0
+};
+var BacanoMarketingContext = getOrCreateReactContext(
+  "bacano-marketing-v1",
+  NOOP_MARKETING_RUNTIME
+);
+
+// libs/sdk/src/react/preview/cache.ts
+var PreviewRouteCache = class {
+  constructor(maxEntries) {
+    this.maxEntries = maxEntries;
+  }
+  maxEntries;
+  values = /* @__PURE__ */ new Map();
+  inFlight = /* @__PURE__ */ new Map();
+  load(input) {
+    const pending = this.inFlight.get(input.route);
+    if (pending) return pending;
+    if (!input.force) {
+      const cached = this.values.get(input.route);
+      if (cached) {
+        this.values.delete(input.route);
+        this.values.set(input.route, cached);
+        return Promise.resolve(cached);
+      }
+    }
+    const request = input.loader({
+      route: input.route,
+      force: input.force,
+      client: input.client
+    }).then((document) => {
+      if (document === null || document === void 0) {
+        throw new EmptyPreviewDocumentError();
+      }
+      const value = { document, refreshedAt: /* @__PURE__ */ new Date() };
+      this.values.delete(input.route);
+      this.values.set(input.route, value);
+      this.trim();
+      return value;
+    });
+    this.inFlight.set(input.route, request);
+    const clearInFlight = () => {
+      if (this.inFlight.get(input.route) === request) {
+        this.inFlight.delete(input.route);
+      }
+    };
+    void request.then(clearInFlight, clearInFlight);
+    return request;
+  }
+  clear() {
+    this.values.clear();
+    this.inFlight.clear();
+  }
+  trim() {
+    while (this.values.size > this.maxEntries) {
+      const oldestKey = this.values.keys().next().value;
+      if (typeof oldestKey !== "string") return;
+      this.values.delete(oldestKey);
+    }
+  }
+};
+var EmptyPreviewDocumentError = class extends Error {
+  constructor() {
+    super("Preview loader returned an empty document.");
+    this.name = "EmptyPreviewDocumentError";
+  }
+};
+
+// libs/sdk/src/react/preview/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_CACHE_MAX_ENTRIES = 50;
+function createInitialState() {
+  return {
+    status: "idle",
+    document: null,
+    error: null,
+    refreshedAt: null
+  };
+}
+function getStorageKey(websiteSlug) {
+  return `@bacano/sdk:preview:${encodeURIComponent(websiteSlug)}:ui:v1`;
+}
+function isToolbarPosition(value) {
+  return value === "top-left" || value === "top-right" || value === "bottom-left" || value === "bottom-right";
+}
+function readPersistedToolbarState(websiteSlug) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(getStorageKey(websiteSlug));
+    if (!raw) return null;
+    const value = JSON.parse(raw);
+    return {
+      expanded: typeof value.expanded === "boolean" ? value.expanded : void 0,
+      position: isToolbarPosition(value.position) ? value.position : void 0
+    };
+  } catch {
+    return null;
+  }
+}
+function persistToolbarState(websiteSlug, state) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(
+      getStorageKey(websiteSlug),
+      JSON.stringify(state)
+    );
+  } catch {
+  }
+}
+function safeLoaderError(error) {
+  if (error instanceof EmptyPreviewDocumentError) {
+    return {
+      code: "EMPTY_DOCUMENT",
+      message: "No encontramos contenido publicado para esta ruta."
+    };
+  }
+  return {
+    code: "LOADER_FAILED",
+    message: "No pudimos consultar el contenido publicado de Bacano."
+  };
+}
+function BacanoPreviewProvider({
+  websiteSlug,
+  route: requestedRoute,
+  loadRoute,
+  navigate: navigateStorefront,
+  normalizeRoute = normalizePreviewRoute,
+  isPreviewableRoute,
+  initialExpanded = true,
+  initialPosition = "top-right",
+  cacheMaxEntries = DEFAULT_CACHE_MAX_ENTRIES,
+  children
+}) {
+  const clientState = useContext2(BacanoReactContext);
+  const route = useMemo(
+    () => normalizeRoute(requestedRoute),
+    [normalizeRoute, requestedRoute]
+  );
+  const [state, setState] = useState(createInitialState);
+  const [isExpanded, setExpandedState] = useState(initialExpanded);
+  const [position, setPositionState] = useState(initialPosition);
+  const mountedRef = useRef(false);
+  const requestSequenceRef = useRef(0);
+  const cacheRef = useRef(null);
+  const cacheSizeRef = useRef(cacheMaxEntries);
+  if (!cacheRef.current || cacheSizeRef.current !== cacheMaxEntries) {
+    cacheRef.current = new PreviewRouteCache(
+      Math.max(1, cacheMaxEntries)
+    );
+    cacheSizeRef.current = cacheMaxEntries;
+  }
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      requestSequenceRef.current += 1;
+    };
+  }, []);
+  useEffect(() => {
+    const persisted = readPersistedToolbarState(websiteSlug);
+    setExpandedState(persisted?.expanded ?? initialExpanded);
+    setPositionState(persisted?.position ?? initialPosition);
+  }, [initialExpanded, initialPosition, websiteSlug]);
+  const load = useCallback(
+    async (force, preserveDocument) => {
+      const client = clientState.client;
+      if (!client) {
+        if (!clientState.loading) {
+          setState({
+            status: "error",
+            document: null,
+            error: {
+              code: "CLIENT_UNAVAILABLE",
+              message: "No pudimos inicializar la conexi\xF3n con Bacano."
+            },
+            refreshedAt: null
+          });
+        }
+        return;
+      }
+      if (isPreviewableRoute?.(route) === false) {
+        setState({
+          status: "error",
+          document: null,
+          error: {
+            code: "ROUTE_NOT_PREVIEWABLE",
+            message: "Esta ruta no est\xE1 disponible en la vista previa."
+          },
+          refreshedAt: null
+        });
+        return;
+      }
+      const sequence = ++requestSequenceRef.current;
+      setState((current) => ({
+        ...current,
+        status: "loading",
+        document: preserveDocument ? current.document : null,
+        error: null
+      }));
+      try {
+        const cache = cacheRef.current;
+        if (!cache) return;
+        const result = await cache.load({
+          route,
+          force,
+          client,
+          loader: loadRoute
+        });
+        if (!mountedRef.current || sequence !== requestSequenceRef.current) {
+          return;
+        }
+        setState({
+          status: "ready",
+          document: result.document,
+          error: null,
+          refreshedAt: result.refreshedAt
+        });
+      } catch (error) {
+        if (!mountedRef.current || sequence !== requestSequenceRef.current)
+          return;
+        setState((current) => ({
+          ...current,
+          status: "error",
+          document: preserveDocument ? current.document : null,
+          error: safeLoaderError(error)
+        }));
+      }
+    },
+    [
+      clientState.client,
+      clientState.loading,
+      isPreviewableRoute,
+      loadRoute,
+      route
+    ]
+  );
+  useEffect(() => {
+    if (clientState.loading) {
+      setState((current) => ({ ...current, status: "idle", error: null }));
+      return;
+    }
+    void load(false, false);
+    return () => {
+      requestSequenceRef.current += 1;
+    };
+  }, [clientState.loading, load]);
+  const refresh = useCallback(() => load(true, true), [load]);
+  const navigate = useCallback(
+    (nextRoute) => {
+      const normalized = normalizeRoute(nextRoute);
+      if (isPreviewableRoute?.(normalized) === false) {
+        setState((current) => ({
+          ...current,
+          status: "error",
+          error: {
+            code: "ROUTE_NOT_PREVIEWABLE",
+            message: "Esta ruta no est\xE1 disponible en la vista previa."
+          }
+        }));
+        return;
+      }
+      navigateStorefront(normalized);
+    },
+    [isPreviewableRoute, navigateStorefront, normalizeRoute]
+  );
+  const setExpanded = useCallback(
+    (expanded) => {
+      setExpandedState(expanded);
+      persistToolbarState(websiteSlug, { expanded, position });
+    },
+    [position, websiteSlug]
+  );
+  const setPosition = useCallback(
+    (nextPosition) => {
+      setPositionState(nextPosition);
+      persistToolbarState(websiteSlug, {
+        expanded: isExpanded,
+        position: nextPosition
+      });
+    },
+    [isExpanded, websiteSlug]
+  );
+  const value = useMemo(
+    () => ({
+      isPreview: true,
+      websiteSlug,
+      route,
+      ...state,
+      isExpanded,
+      position,
+      refresh,
+      navigate,
+      setExpanded,
+      setPosition
+    }),
+    [
+      isExpanded,
+      navigate,
+      position,
+      refresh,
+      route,
+      setExpanded,
+      setPosition,
+      state,
+      websiteSlug
+    ]
+  );
+  return /* @__PURE__ */ jsx(BacanoPreviewModeContext.Provider, { value: true, children: /* @__PURE__ */ jsx(BacanoMarketingContext.Provider, { value: NOOP_MARKETING_RUNTIME, children: /* @__PURE__ */ jsx(
+    BacanoPreviewContext.Provider,
+    {
+      value,
+      children
+    }
+  ) }) });
+}
+
+// libs/sdk/src/react/preview/toolbar.tsx
+import {
+  useEffect as useEffect2,
+  useId,
+  useState as useState2
+} from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var positionOptions = [
+  { value: "top-left", label: "Arriba a la izquierda", symbol: "\u2196" },
+  { value: "top-right", label: "Arriba a la derecha", symbol: "\u2197" },
+  { value: "bottom-left", label: "Abajo a la izquierda", symbol: "\u2199" },
+  { value: "bottom-right", label: "Abajo a la derecha", symbol: "\u2198" }
+];
+function BacanoPreviewToolbar({
+  websiteName,
+  logo,
+  primaryColor = "#172033",
+  accentColor = "#2f80ed",
+  backgroundColor = "#ffffff",
+  locale = "es-CO",
+  zIndex = 2147483e3,
+  suggestedRoutes = []
+}) {
+  const preview = useBacanoPreview();
+  const [routeInput, setRouteInput] = useState2(preview.route);
+  const [positionMenuOpen, setPositionMenuOpen] = useState2(false);
+  const controlsId = useId();
+  const positionMenuId = useId();
+  const routesListId = useId();
+  const style = {
+    "--bacano-preview-primary": primaryColor,
+    "--bacano-preview-accent": accentColor,
+    "--bacano-preview-background": backgroundColor,
+    zIndex
+  };
+  useEffect2(() => setRouteInput(preview.route), [preview.route]);
+  if (!preview.isExpanded) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2("style", { children: previewToolbarStyles }),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "bacano-preview-root bacano-preview-root--collapsed",
+          "data-position": preview.position,
+          style,
+          children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "bacano-preview-tab",
+              "aria-controls": controlsId,
+              "aria-expanded": "false",
+              "aria-label": `Mostrar vista previa de ${preview.route}`,
+              title: "Mostrar barra de vista previa",
+              onClick: () => preview.setExpanded(true),
+              children: [
+                /* @__PURE__ */ jsx2(PreviewIcon, {}),
+                /* @__PURE__ */ jsx2("span", { children: "Vista previa" }),
+                /* @__PURE__ */ jsx2(ChevronIcon, { direction: "down" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+  const statusMessage = getStatusMessage(
+    preview.status,
+    preview.error?.message
+  );
+  function submitRoute(event) {
+    event.preventDefault();
+    preview.navigate(routeInput);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("style", { children: previewToolbarStyles }),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "bacano-preview-root",
+        "data-position": preview.position,
+        style,
+        children: /* @__PURE__ */ jsxs(
+          "section",
+          {
+            id: controlsId,
+            className: "bacano-preview-toolbar",
+            "aria-label": "Controles de vista previa de Bacano",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "bacano-preview-summary", children: [
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    className: "bacano-preview-logo",
+                    "aria-hidden": logo ? void 0 : true,
+                    children: logo ?? /* @__PURE__ */ jsx2(PreviewIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "bacano-preview-copy", children: [
+                  /* @__PURE__ */ jsxs("strong", { children: [
+                    "Vista en vivo",
+                    websiteName ? ` \xB7 ${websiteName}` : "",
+                    ":",
+                    " ",
+                    preview.route
+                  ] }),
+                  /* @__PURE__ */ jsx2("span", { role: "status", "aria-live": "polite", children: preview.refreshedAt && preview.status !== "error" ? `Contenido p\xFAblico consultado a las ${formatTime(
+                    preview.refreshedAt,
+                    locale
+                  )}.` : statusMessage })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("form", { className: "bacano-preview-route", onSubmit: submitRoute, children: [
+                /* @__PURE__ */ jsx2("label", { htmlFor: `${controlsId}-route`, children: "Ruta para visualizar" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx2(
+                    "input",
+                    {
+                      id: `${controlsId}-route`,
+                      type: "text",
+                      value: routeInput,
+                      list: suggestedRoutes.length > 0 ? routesListId : void 0,
+                      autoComplete: "off",
+                      onChange: (event) => setRouteInput(event.target.value)
+                    }
+                  ),
+                  suggestedRoutes.length > 0 ? /* @__PURE__ */ jsx2("datalist", { id: routesListId, children: suggestedRoutes.map((route) => /* @__PURE__ */ jsx2("option", { value: route }, route)) }) : null,
+                  /* @__PURE__ */ jsx2("button", { type: "submit", "aria-label": "Abrir ruta", title: "Abrir ruta", children: /* @__PURE__ */ jsx2(ArrowIcon, {}) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2("div", { className: "bacano-preview-actions", children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: preview.status === "loading",
+                  onClick: () => void preview.refresh(),
+                  children: [
+                    /* @__PURE__ */ jsx2(RefreshIcon, { spinning: preview.status === "loading" }),
+                    /* @__PURE__ */ jsx2("span", { children: preview.status === "loading" ? "Actualizando" : "Actualizar" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "bacano-preview-corner-actions", children: [
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Cambiar posici\xF3n de la barra",
+                    "aria-controls": positionMenuId,
+                    "aria-expanded": positionMenuOpen,
+                    title: "Cambiar posici\xF3n",
+                    onClick: () => setPositionMenuOpen((current) => !current),
+                    children: /* @__PURE__ */ jsx2(MoveIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Ocultar barra de vista previa",
+                    "aria-controls": controlsId,
+                    "aria-expanded": "true",
+                    title: "Ocultar barra",
+                    onClick: () => {
+                      setPositionMenuOpen(false);
+                      preview.setExpanded(false);
+                    },
+                    children: /* @__PURE__ */ jsx2(ChevronIcon, { direction: "up" })
+                  }
+                )
+              ] }),
+              positionMenuOpen ? /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  id: positionMenuId,
+                  className: "bacano-preview-position-menu",
+                  role: "group",
+                  "aria-label": "Posici\xF3n de la barra",
+                  onKeyDown: (event) => {
+                    if (event.key === "Escape") setPositionMenuOpen(false);
+                  },
+                  children: positionOptions.map((option) => /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": option.label,
+                      "aria-pressed": preview.position === option.value,
+                      title: option.label,
+                      onClick: () => {
+                        preview.setPosition(option.value);
+                        setPositionMenuOpen(false);
+                      },
+                      children: option.symbol
+                    },
+                    option.value
+                  ))
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function getStatusMessage(status, error) {
+  if (status === "error") return error ?? "No pudimos actualizar el contenido.";
+  if (status === "loading") return "Consultando el contenido p\xFAblico actual.";
+  if (status === "ready") return "Contenido p\xFAblico actualizado.";
+  return "Preparando la conexi\xF3n con Bacano.";
+}
+function formatTime(value, locale) {
+  try {
+    return new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit"
+    }).format(value);
+  } catch {
+    return value.toLocaleTimeString();
+  }
+}
+function SvgIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", ...props, children: props.children });
+}
+function PreviewIcon() {
+  return /* @__PURE__ */ jsxs(SvgIcon, { "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "2.5" })
+  ] });
+}
+function RefreshIcon({ spinning }) {
+  return /* @__PURE__ */ jsxs(
+    SvgIcon,
+    {
+      "aria-hidden": "true",
+      className: spinning ? "is-spinning" : void 0,
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M20 6v5h-5M4 18v-5h5" }),
+        /* @__PURE__ */ jsx2("path", { d: "M18 9a7 7 0 0 0-12-2L4 11M6 15a7 7 0 0 0 12 2l2-4" })
+      ]
+    }
+  );
+}
+function ArrowIcon() {
+  return /* @__PURE__ */ jsx2(SvgIcon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M5 12h14M13 6l6 6-6 6" }) });
+}
+function MoveIcon() {
+  return /* @__PURE__ */ jsx2(SvgIcon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "m12 2 3 3-3 3M12 2 9 5M22 12l-3-3-3 3M22 12l-3 3M12 22l3-3-3-3M12 22l-3-3M2 12l3-3 3 3M2 12l3 3" }) });
+}
+function ChevronIcon({ direction }) {
+  return /* @__PURE__ */ jsx2(SvgIcon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: direction === "up" ? "m6 15 6-6 6 6" : "m6 9 6 6 6-6" }) });
+}
+var previewToolbarStyles = `
+.bacano-preview-root{position:fixed;pointer-events:none;width:calc(100% - 24px);max-width:1240px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--bacano-preview-primary);line-height:1.35}
+.bacano-preview-root[data-position="top-left"]{top:12px;left:12px}.bacano-preview-root[data-position="top-right"]{top:12px;right:12px}.bacano-preview-root[data-position="bottom-left"]{bottom:12px;left:12px}.bacano-preview-root[data-position="bottom-right"]{right:12px;bottom:12px}
+.bacano-preview-root--collapsed{width:auto;max-width:calc(100% - 24px)}
+.bacano-preview-toolbar,.bacano-preview-tab{pointer-events:auto;border:1px solid color-mix(in srgb,var(--bacano-preview-accent) 34%,transparent);background:color-mix(in srgb,var(--bacano-preview-background) 96%,transparent);box-shadow:0 16px 42px color-mix(in srgb,var(--bacano-preview-primary) 18%,transparent);backdrop-filter:blur(16px)}
+.bacano-preview-toolbar{position:relative;display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,460px) auto;align-items:center;gap:12px;border-radius:16px;padding:14px 92px 14px 16px}
+.bacano-preview-summary{display:flex;min-width:0;align-items:center;gap:10px}.bacano-preview-logo{display:grid;width:34px;height:34px;flex:0 0 auto;place-items:center;overflow:hidden;border-radius:10px;background:color-mix(in srgb,var(--bacano-preview-accent) 12%,transparent);color:var(--bacano-preview-accent)}.bacano-preview-logo>svg{width:20px;height:20px;stroke-width:1.8}.bacano-preview-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
+.bacano-preview-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.bacano-preview-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.bacano-preview-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;opacity:.68}
+.bacano-preview-route label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.bacano-preview-route>div{display:flex;gap:6px}.bacano-preview-route input{min-width:0;min-height:42px;flex:1;border:1px solid color-mix(in srgb,var(--bacano-preview-primary) 20%,transparent);border-radius:10px;background:var(--bacano-preview-background);padding:0 12px;color:var(--bacano-preview-primary);font:inherit;font-size:14px}.bacano-preview-route button,.bacano-preview-actions button,.bacano-preview-corner-actions button,.bacano-preview-position-menu button,.bacano-preview-tab{border:0;font:inherit;cursor:pointer}
+.bacano-preview-route button{display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border-radius:10px;background:var(--bacano-preview-primary);color:var(--bacano-preview-background)}.bacano-preview-route svg,.bacano-preview-actions svg,.bacano-preview-corner-actions svg,.bacano-preview-tab svg{width:18px;height:18px;stroke-width:1.8}
+.bacano-preview-actions button{display:flex;min-height:42px;align-items:center;justify-content:center;gap:8px;border-radius:10px;background:var(--bacano-preview-accent);padding:0 16px;color:var(--bacano-preview-background);font-weight:700}.bacano-preview-actions button:disabled{cursor:wait;opacity:.68}
+.bacano-preview-corner-actions{position:absolute;top:8px;right:8px;display:flex;gap:2px}.bacano-preview-corner-actions button{display:grid;width:36px;height:36px;place-items:center;border-radius:9px;background:transparent;color:var(--bacano-preview-primary)}.bacano-preview-corner-actions button:hover{background:color-mix(in srgb,var(--bacano-preview-primary) 7%,transparent)}
+.bacano-preview-position-menu{position:absolute;right:48px;top:48px;display:grid;grid-template-columns:repeat(2,44px);gap:4px;border:1px solid color-mix(in srgb,var(--bacano-preview-primary) 16%,transparent);border-radius:12px;background:var(--bacano-preview-background);padding:6px;box-shadow:0 12px 30px color-mix(in srgb,var(--bacano-preview-primary) 18%,transparent)}.bacano-preview-root[data-position^="bottom"] .bacano-preview-position-menu{top:auto;bottom:48px}.bacano-preview-position-menu button{width:44px;height:40px;border-radius:8px;background:transparent;color:var(--bacano-preview-primary);font-size:18px}.bacano-preview-position-menu button[aria-pressed="true"]{background:color-mix(in srgb,var(--bacano-preview-accent) 14%,transparent);color:var(--bacano-preview-accent)}
+.bacano-preview-tab{display:flex;min-height:44px;max-width:100%;align-items:center;gap:8px;border-radius:999px;padding:0 16px;color:var(--bacano-preview-primary);font-weight:750}.bacano-preview-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.bacano-preview-root button:focus-visible,.bacano-preview-root input:focus-visible{outline:3px solid color-mix(in srgb,var(--bacano-preview-accent) 42%,transparent);outline-offset:2px}.bacano-preview-root svg.is-spinning{animation:bacano-preview-spin .8s linear infinite}@keyframes bacano-preview-spin{to{transform:rotate(360deg)}}
+@media(max-width:900px){.bacano-preview-toolbar{grid-template-columns:1fr auto;padding-right:88px}.bacano-preview-route{grid-column:1/-1;grid-row:2}.bacano-preview-actions{grid-column:2;grid-row:1}.bacano-preview-copy span{white-space:normal}.bacano-preview-actions button span{display:none}}
+@media(max-width:520px){.bacano-preview-root{width:calc(100% - 16px)}.bacano-preview-root[data-position="top-left"],.bacano-preview-root[data-position="top-right"]{top:8px;left:8px;right:auto}.bacano-preview-root[data-position="bottom-left"],.bacano-preview-root[data-position="bottom-right"]{bottom:8px;left:8px;right:auto}.bacano-preview-toolbar{grid-template-columns:minmax(0,1fr);gap:10px;border-radius:14px;padding:12px 80px 12px 12px}.bacano-preview-actions{grid-column:1;grid-row:3}.bacano-preview-actions button{width:100%}.bacano-preview-actions button span{display:inline}.bacano-preview-route{grid-column:1;grid-row:2}}
+@media(prefers-reduced-motion:reduce){.bacano-preview-root *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
+`;
+
+// libs/sdk/src/react/preview/shell.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function BacanoPreviewShell({
+  toolbar = {},
+  children,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsx3(BacanoPreviewProvider, { ...providerProps, children: /* @__PURE__ */ jsx3(BacanoPreviewShellContent, { toolbar, render: children }) });
+}
+function BacanoPreviewShellContent({
+  toolbar,
+  render
+}) {
+  const preview = useBacanoPreview();
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    toolbar === false ? null : /* @__PURE__ */ jsx3(BacanoPreviewToolbar, { ...toolbar }),
+    render(preview)
+  ] });
+}
+export {
+  BacanoPreviewContext,
+  BacanoPreviewModeContext,
+  BacanoPreviewProvider,
+  BacanoPreviewShell,
+  BacanoPreviewToolbar,
+  interceptPreviewLink,
+  normalizePreviewRoute,
+  useBacanoPreview,
+  useBacanoPreviewMode
+};