@ecomiq/storefront 2.0.18 → 2.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomiq/storefront",
-  "version": "2.0.18",
+  "version": "2.0.20",
   "description": "Micro framework SSR de Ecomiq para storefronts. Páginas, datos y deploy sin configurar nada.",
   "type": "module",
   "license": "MIT",
@@ -44,12 +44,15 @@
     "./internal/thank-you": "./src/pages/thank-you.tsx",
     "./internal/cms-page": "./src/pages/pages.$pageSlug.tsx",
     "./internal/account": "./src/pages/account.tsx",
+    "./internal/api-proxy": "./src/pages/api.$.ts",
+    "./internal/auth-api": "./src/pages/api.auth.$.ts",
     "./package.json": "./package.json"
   },
   "files": [
     "bin",
     "src",
     "templates",
+    "public",
     "README.md"
   ],
   "sideEffects": [
@@ -79,7 +82,7 @@
     "vite": "^8.1.0",
     "wrangler": "^4.100.0",
     "zod": "^3.25.0",
-    "@ecomiq/core": "^0.1.6"
+    "@ecomiq/core": "^0.1.7"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/public/design-bridge.js

@@ -0,0 +1,318 @@
+/**
+ * Puente de modo design (solo dev). El parent (frontend) envía postMessage;
+ * este script pinta hover/select y devuelve metadata del nodo.
+ */
+(function () {
+  if (typeof window === 'undefined' || window.parent === window) return;
+
+  var enabled = false;
+  var selectedEl = null;
+  var selectionLocked = false;
+  var previewStyles = {};
+  var hoverBox = null;
+  var hoverLabel = null;
+  var selectBox = null;
+  var selectLabel = null;
+
+  function ensureOverlay() {
+    if (hoverBox) return;
+    var style = document.createElement('style');
+    style.textContent =
+      '#__design_hover__,#__design_select__{pointer-events:none;position:fixed;z-index:2147483646;box-sizing:border-box;transition:top .05s,left .05s,width .05s,height .05s}' +
+      '#__design_hover__{border:2px solid #6366f1;background:rgba(99,102,241,.1)}' +
+      '#__design_select__{border:2px solid #c8a96e;background:rgba(200,169,110,.12)}' +
+      '.__design_lbl{position:fixed;z-index:2147483647;font:11px/1.3 ui-monospace,monospace;padding:2px 6px;border-radius:4px;white-space:nowrap;pointer-events:none}' +
+      '.__design_lbl_hover{background:#6366f1;color:#fff}' +
+      '.__design_lbl_select{background:#c8a96e;color:#1a1714}';
+    document.head.appendChild(style);
+
+    hoverBox = document.createElement('div');
+    hoverBox.id = '__design_hover__';
+    hoverBox.hidden = true;
+    hoverLabel = document.createElement('div');
+    hoverLabel.className = '__design_lbl __design_lbl_hover';
+    hoverLabel.hidden = true;
+
+    selectBox = document.createElement('div');
+    selectBox.id = '__design_select__';
+    selectBox.hidden = true;
+    selectLabel = document.createElement('div');
+    selectLabel.className = '__design_lbl __design_lbl_select';
+    selectLabel.hidden = true;
+
+    document.body.appendChild(hoverBox);
+    document.body.appendChild(hoverLabel);
+    document.body.appendChild(selectBox);
+    document.body.appendChild(selectLabel);
+  }
+
+  function escapeCss(value) {
+    if (typeof CSS !== 'undefined' && CSS.escape) return CSS.escape(value);
+    return value.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+  }
+
+  function pickElement(raw) {
+    if (!raw || raw === document.body || raw === document.documentElement) return null;
+    if (raw.id === '__design_hover__' || raw.id === '__design_select__') return null;
+    if (raw.classList && raw.classList.contains('__design_lbl')) return null;
+    return raw;
+  }
+
+  function getLabel(el) {
+    var tag = el.tagName.toLowerCase();
+    var classes = Array.from(el.classList || []).filter(function (c) {
+      return !c.startsWith('__design');
+    });
+    if (classes.length) return tag + '.' + classes.slice(0, 2).join('.');
+    return tag;
+  }
+
+  function getSelector(el) {
+    if (el.id) return '#' + escapeCss(el.id);
+    var parts = [];
+    var current = el;
+    while (current && current !== document.body && current !== document.documentElement) {
+      var part = current.tagName.toLowerCase();
+      if (current.id) {
+        parts.unshift('#' + escapeCss(current.id));
+        break;
+      }
+      var parent = current.parentElement;
+      if (parent) {
+        var siblings = Array.from(parent.children).filter(function (c) {
+          return c.tagName === current.tagName;
+        });
+        if (siblings.length > 1) {
+          var idx = siblings.indexOf(current) + 1;
+          part += ':nth-of-type(' + idx + ')';
+        }
+      }
+      var cls = Array.from(current.classList || []).find(function (c) {
+        return !c.startsWith('__design') && !c.startsWith('design-');
+      });
+      if (cls) part += '.' + escapeCss(cls);
+      parts.unshift(part);
+      current = parent;
+    }
+    return parts.join(' > ');
+  }
+
+  function textSnippet(el) {
+    var text = (el.innerText || el.textContent || '').replace(/\s+/g, ' ').trim();
+    if (!text) return undefined;
+    return text.length > 80 ? text.slice(0, 80) + '…' : text;
+  }
+
+  function camelToKebab(key) {
+    return key.replace(/[A-Z]/g, function (m) {
+      return '-' + m.toLowerCase();
+    });
+  }
+
+  function computedSnapshot(el) {
+    var cs = window.getComputedStyle(el);
+    return {
+      display: cs.display,
+      paddingTop: cs.paddingTop,
+      paddingRight: cs.paddingRight,
+      paddingBottom: cs.paddingBottom,
+      paddingLeft: cs.paddingLeft,
+      marginTop: cs.marginTop,
+      marginRight: cs.marginRight,
+      marginBottom: cs.marginBottom,
+      marginLeft: cs.marginLeft,
+      fontSize: cs.fontSize,
+      fontWeight: cs.fontWeight,
+      lineHeight: cs.lineHeight,
+      letterSpacing: cs.letterSpacing,
+      color: cs.color,
+      backgroundColor: cs.backgroundColor,
+      borderWidth: cs.borderWidth,
+      borderStyle: cs.borderStyle,
+      borderColor: cs.borderColor,
+      borderRadius: cs.borderRadius,
+      opacity: cs.opacity,
+      boxShadow: cs.boxShadow,
+      textAlign: cs.textAlign,
+    };
+  }
+
+  function elementRect(el) {
+    var r = el.getBoundingClientRect();
+    return {
+      top: r.top,
+      left: r.left,
+      width: r.width,
+      height: r.height,
+    };
+  }
+
+  function elementPayload(el) {
+    return {
+      selector: getSelector(el),
+      tag: el.tagName.toLowerCase(),
+      label: getLabel(el),
+      classes: Array.from(el.classList || []).filter(function (c) {
+        return !c.startsWith('__design');
+      }),
+      textSnippet: textSnippet(el),
+      computedStyles: computedSnapshot(el),
+      rect: elementRect(el),
+    };
+  }
+
+  var rectRaf = null;
+  function postSelectionRect() {
+    if (!selectionLocked || !selectedEl) return;
+    if (rectRaf) return;
+    rectRaf = requestAnimationFrame(function () {
+      rectRaf = null;
+      post('DESIGN_RECT', { rect: elementRect(selectedEl) });
+    });
+  }
+
+  function clearPreviewStyles() {
+    if (!selectedEl) return;
+    Object.keys(previewStyles).forEach(function (key) {
+      selectedEl.style.removeProperty(camelToKebab(key));
+    });
+    previewStyles = {};
+    updateSelectOverlay();
+  }
+
+  function applyPreviewStyles(styles) {
+    if (!selectedEl || !styles) return;
+    Object.keys(styles).forEach(function (key) {
+      var val = styles[key];
+      if (val === '' || val == null) {
+        selectedEl.style.removeProperty(camelToKebab(key));
+        delete previewStyles[key];
+      } else {
+        selectedEl.style.setProperty(camelToKebab(key), String(val));
+        previewStyles[key] = String(val);
+      }
+    });
+    updateSelectOverlay();
+  }
+
+  function placeBox(box, label, el) {
+    var rect = el.getBoundingClientRect();
+    box.style.top = rect.top + 'px';
+    box.style.left = rect.left + 'px';
+    box.style.width = rect.width + 'px';
+    box.style.height = rect.height + 'px';
+    box.hidden = false;
+
+    label.textContent = getLabel(el);
+    label.style.top = Math.max(4, rect.top - 22) + 'px';
+    label.style.left = rect.left + 'px';
+    label.hidden = false;
+  }
+
+  function hideHover() {
+    if (hoverBox) hoverBox.hidden = true;
+    if (hoverLabel) hoverLabel.hidden = true;
+  }
+
+  function updateSelectOverlay() {
+    if (selectionLocked && selectedEl) {
+      placeBox(selectBox, selectLabel, selectedEl);
+      postSelectionRect();
+    }
+  }
+
+  function post(type, payload) {
+    window.parent.postMessage(
+      { source: 'design-bridge', type: type, payload: payload || {} },
+      '*',
+    );
+  }
+
+  function clearSelection(notifyParent) {
+    clearPreviewStyles();
+    selectedEl = null;
+    selectionLocked = false;
+    if (selectBox) selectBox.hidden = true;
+    if (selectLabel) selectLabel.hidden = true;
+    if (notifyParent) post('DESIGN_DESELECT');
+  }
+
+  function onMouseMove(e) {
+    if (!enabled) return;
+
+    if (selectionLocked && selectedEl) {
+      updateSelectOverlay();
+      hideHover();
+      return;
+    }
+
+    var el = pickElement(document.elementFromPoint(e.clientX, e.clientY));
+    if (!el) {
+      hideHover();
+      return;
+    }
+    placeBox(hoverBox, hoverLabel, el);
+    post('DESIGN_HOVER', elementPayload(el));
+  }
+
+  function onClick(e) {
+    if (!enabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    var el = pickElement(document.elementFromPoint(e.clientX, e.clientY));
+    if (!el) return;
+
+    if (selectionLocked && selectedEl) {
+      if (el === selectedEl) {
+        clearSelection(true);
+        return;
+      }
+      // Click fuera del popover / en otro nodo ya no deselecciona.
+      // clearSelection(true);
+      return;
+    }
+
+    selectedEl = el;
+    selectionLocked = true;
+    placeBox(selectBox, selectLabel, el);
+    hideHover();
+    post('DESIGN_SELECT', elementPayload(el));
+  }
+
+  function enable() {
+    if (enabled) return;
+    enabled = true;
+    ensureOverlay();
+    document.addEventListener('mousemove', onMouseMove, true);
+    document.addEventListener('click', onClick, true);
+    window.addEventListener('scroll', updateSelectOverlay, true);
+    window.addEventListener('resize', updateSelectOverlay);
+    document.body.style.cursor = 'crosshair';
+    post('DESIGN_READY');
+  }
+
+  function disable() {
+    if (!enabled) return;
+    enabled = false;
+    clearSelection(false);
+    document.removeEventListener('mousemove', onMouseMove, true);
+    document.removeEventListener('click', onClick, true);
+    window.removeEventListener('scroll', updateSelectOverlay, true);
+    window.removeEventListener('resize', updateSelectOverlay);
+    document.body.style.cursor = '';
+    hideHover();
+  }
+
+  window.addEventListener('message', function (event) {
+    var data = event.data;
+    if (!data || data.target !== 'design-bridge') return;
+    if (data.type === 'DESIGN_ENABLE') enable();
+    if (data.type === 'DESIGN_DISABLE') disable();
+    if (data.type === 'DESIGN_CLEAR_SELECTION') clearSelection(false);
+    if (data.type === 'DESIGN_APPLY_STYLES') applyPreviewStyles(data.payload && data.payload.styles);
+    if (data.type === 'DESIGN_CLEAR_PREVIEW') clearPreviewStyles();
+  });
+
+  post('DESIGN_READY');
+})();

package/src/auth/ecomiq-oauth-password-types.ts

@@ -2,7 +2,6 @@ import { z } from "zod";
 
 export const customerLoginCustomerSchema = z.object({
   id: z.coerce.number(),
-  publicId: z.union([z.coerce.number(), z.string()]),
   status: z.string(),
   isVerified: z.boolean(),
 });

package/src/auth/storefront-auth.ts

@@ -0,0 +1,7 @@
+/**
+ * Instancia Better Auth del storefront (servidor).
+ * Singleton usado por la ruta cerrada `/api/auth/$`.
+ */
+import { createStorefrontAuth } from './create-storefront-auth'
+
+export const storefrontAuth = createStorefrontAuth()

package/src/codegen.mjs

@@ -17,6 +17,8 @@
  *   /checkout/$checkoutId  ← flujo de checkout
  *   /thank-you             ← post-compra
  *   /account/*             ← área de cuenta (login/register en template: /login, /register)
+ *   /api/$                 ← proxy BFF same-origin
+ *   /api/auth/$            ← Better Auth (handlers del framework)
  */
 import {
   mkdirSync,
@@ -90,6 +92,20 @@ const FRAMEWORK_LOCKED_PAGES = [
   },
 ]
 
+/** Server routes cerradas del framework (proxy BFF, Better Auth, etc.). */
+const FRAMEWORK_LOCKED_API_ROUTES = [
+  {
+    rel: 'api/$.ts',
+    routeId: '/api/$',
+    importFrom: '@ecomiq/storefront/internal/api-proxy',
+  },
+  {
+    rel: 'api/auth.$.ts',
+    routeId: '/api/auth/$',
+    importFrom: '@ecomiq/storefront/internal/auth-api',
+  },
+]
+
 export async function generateApp({ cwd, appDir, frameworkRoot, config }) {
   const pagesDir = resolve(cwd, 'pages')
   if (!existsSync(pagesDir)) {
@@ -209,11 +225,13 @@ export async function generateApp({ cwd, appDir, frameworkRoot, config }) {
   }
 
   assertNoFrameworkPageOverrides(pageEntries)
+  assertNoFrameworkApiOverrides(apiEntries)
 
   const desiredRoutes = [
     ...pageEntries.map((entry) => entry.rel.replace(/\.jsx$/, '.tsx')),
     ...apiEntries.map((entry) => entry.rel),
     ...FRAMEWORK_LOCKED_PAGES.map((page) => page.rel),
+    ...FRAMEWORK_LOCKED_API_ROUTES.map((route) => route.rel),
   ].sort()
 
   for (const entry of pageEntries) {
@@ -244,6 +262,15 @@ export async function generateApp({ cwd, appDir, frameworkRoot, config }) {
     )
   }
 
+  for (const locked of FRAMEWORK_LOCKED_API_ROUTES) {
+    const outFile = join(routesDir, locked.rel)
+    mkdirSync(dirname(outFile), { recursive: true })
+    writeGeneratedFile(
+      outFile,
+      apiRouteFileSource(locked.routeId, locked.importFrom),
+    )
+  }
+
   reconcileGeneratedRoutes(appDir, routesDir, desiredRoutes)
 
   // ── 9. wrangler.jsonc para deploy en Cloudflare Workers ──
@@ -521,6 +548,23 @@ function assertNoFrameworkPageOverrides(pageEntries) {
   }
 }
 
+function assertNoFrameworkApiOverrides(apiEntries) {
+  const reserved = new Map(
+    FRAMEWORK_LOCKED_API_ROUTES.map((route) => [route.routeId, route.rel]),
+  )
+
+  for (const entry of apiEntries) {
+    const routeId = fileToRouteId(entry.rel)
+    if (!reserved.has(routeId)) continue
+    throw new Error(
+      `La ruta ${routeId} es reservada por Ecomiq. ` +
+        `Elimina pages/${entry.rel}; ya la genera @ecomiq/storefront ` +
+        `(proxy BFF /api/$ y Better Auth /api/auth/$). ` +
+        `Puedes añadir otras rutas en pages/api/.`,
+    )
+  }
+}
+
 /** Server route: reexporta GET/POST/... del módulo del usuario. */
 function apiRouteFileSource(routeId, importPath) {
   return (

package/src/index.ts

@@ -31,6 +31,9 @@ export {
   DepartmentsSchema,
   DistrictSchema,
   DistrictsSchema,
+  EntityIdSchema,
+  NullableEntityIdSchema,
+  OptionalEntityIdSchema,
   GeoDivisionSchema,
   GeoDivisionTypeSchema,
   GetDepartmentsParamsSchema,
@@ -43,6 +46,7 @@ export {
   StorefrontMenuItemSchema,
   getMenuItems,
 } from '@ecomiq/core'
+export type { EntityId } from '@ecomiq/core'
 export { getCountries, getDepartments, getDistricts, getProvinces } from '@ecomiq/core'
 export {
   AddCartItemParamsSchema,

package/src/pages/api.$.ts

@@ -0,0 +1,20 @@
+/**
+ * Proxy catch-all same-origin: `/api/*` → storefront `/v1/*`.
+ * Ruta cerrada del framework (no hace falta en pages/ del usuario).
+ */
+import { proxyStorefrontRequest } from '../api-proxy'
+
+type ApiHandlerArgs = {
+  request: Request
+  params: { _splat?: string }
+}
+
+async function handle({ request, params }: ApiHandlerArgs) {
+  return proxyStorefrontRequest(request, params._splat)
+}
+
+export const GET = handle
+export const POST = handle
+export const PUT = handle
+export const PATCH = handle
+export const DELETE = handle

package/src/pages/api.auth.$.ts

@@ -0,0 +1,16 @@
+/**
+ * Better Auth catch-all: `/api/auth/*`.
+ * Ruta cerrada del framework (no hace falta en pages/ del usuario).
+ */
+import { storefrontAuth } from '../auth/storefront-auth'
+
+type ApiHandlerArgs = {
+  request: Request
+}
+
+async function handle({ request }: ApiHandlerArgs) {
+  return storefrontAuth.handler(request)
+}
+
+export const GET = handle
+export const POST = handle

package/src/providers/auth.tsx

@@ -1,12 +1,10 @@
 /**
  * Auth storefront: Better Auth client + sesión via context.
  *
- * ```tsx
- * const client = createStorefrontAuthClient()
- * <AuthProvider client={client}>
- *   <App />
- * </AuthProvider>
+ * El framework monta `<AuthProvider>` en `__root` (cliente por defecto).
+ * Puedes pasar un `client` propio si necesitas opciones custom.
  *
+ * ```tsx
  * const { session, signIn, signOut } = useAuth()
  * ```
  */
@@ -39,14 +37,29 @@ export type StorefrontSession = StorefrontAuthClientInstance['$Infer']['Session'
 
 const AuthContext = createContext<StorefrontAuthClientInstance | null>(null)
 
+/** Cliente por defecto del framework (una instancia por bundle). */
+let defaultAuthClient: StorefrontAuthClientInstance | null = null
+
+function getDefaultAuthClient(): StorefrontAuthClientInstance {
+  if (!defaultAuthClient) {
+    defaultAuthClient = createStorefrontAuthClient()
+  }
+  return defaultAuthClient
+}
+
 export function AuthProvider({
   client,
   children,
 }: {
-  client: StorefrontAuthClientInstance
+  /** Si se omite, usa el cliente por defecto del storefront. */
+  client?: StorefrontAuthClientInstance
   children: ReactNode
 }) {
-  return <AuthContext.Provider value={client}>{children}</AuthContext.Provider>
+  return (
+    <AuthContext.Provider value={client ?? getDefaultAuthClient()}>
+      {children}
+    </AuthContext.Provider>
+  )
 }
 
 /** Acceso a sesión y acciones de auth. Requiere `<AuthProvider>` + `<AppEcomiqProvider>`. */

package/src/providers/cart.tsx

@@ -17,14 +17,14 @@ import {
   useState,
   type ReactNode,
 } from 'react'
-import { type StorefrontCart } from '@ecomiq/core'
+import { type StorefrontCart, EntityIdSchema } from '@ecomiq/core'
 import { z } from 'zod'
 import { serverApi } from '../server'
 
 const CartSessionSchema = z.object({
   version: z.literal(1),
   storeId: z.string().min(1),
-  cartId: z.string().uuid(),
+  cartId: EntityIdSchema,
 })
 
 export type CartLoadStatus = 'loading' | 'ready' | 'error'

package/src/runtime/context.ts

@@ -1 +1,2 @@
 export { AppEcomiqContext, AppEcomiqProvider, type AppEcomiqValue } from '../providers/ecomiq'
+export { AuthProvider } from '../providers/auth'

package/src/server.ts

@@ -58,6 +58,8 @@ import {
   type RemoveCartItemParams,
   type UpdateCartItemQuantityParams,
   type UploadPaymentReceiptParams,
+  EntityIdSchema,
+  OptionalEntityIdSchema,
 } from '@ecomiq/core'
 import { z } from 'zod'
 import { getStorefrontClient } from './client'
@@ -133,7 +135,7 @@ const removeCartItemFn = createServerFn({ method: 'POST' })
   .handler(({ data }) => submitCartItemRemoval(getStorefrontClient(), data))
 
 const AddProductToCartServerSchema = z.object({
-  cartId: z.string().uuid().optional(),
+  cartId: OptionalEntityIdSchema,
   currencyCode: z.string().length(3),
   variantId: z.string().regex(/^[1-9]\d*$/),
   quantity: z.number().int().positive(),
@@ -172,7 +174,7 @@ const checkoutCartFn = createServerFn({ method: 'POST' })
   .handler(({ data }) => getStorefrontClient().checkoutCart(data))
 
 const CartPaymentReceiptServerSchema = z.object({
-  cartId: z.string().uuid(),
+  cartId: EntityIdSchema,
   fileBase64: z.string().min(1),
   fileName: z.string().min(1),
   mimeType: z.string().min(1).optional(),

package/src/vite-inline.mjs

@@ -21,7 +21,28 @@ const postcssBrowserStub = fileURLToPath(
 )
 
 const frameworkRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+const designBridgePath = resolve(frameworkRoot, 'public', 'design-bridge.js')
 
+/** Sirve /design-bridge.js desde el package (no desde public/ del usuario). */
+function designBridgePlugin() {
+  return {
+    name: 'ecomiq:design-bridge',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url?.split('?')[0]
+        if (url !== '/design-bridge.js') return next()
+        try {
+          const body = readFileSync(designBridgePath)
+          res.setHeader('Content-Type', 'application/javascript; charset=utf-8')
+          res.setHeader('Cache-Control', 'no-store')
+          res.end(body)
+        } catch (error) {
+          next(error)
+        }
+      })
+    },
+  }
+}
 function resolveSanitizeHtmlPostcss(source, importer) {
   if (source !== 'postcss') return null
   if (!importer?.includes('/sanitize-html/')) return null
@@ -160,7 +181,7 @@ export function createViteConfig({ appDir, config, projectRoot, runtime }) {
   const resolvedRuntime = resolveDevRuntime({ config, runtime })
   const resolvedHttps = resolveDevHttps({ config, projectRoot: root, appDir })
 
-  const plugins = [tailwindcss()]
+  const plugins = [tailwindcss(), designBridgePlugin()]
 
   if (resolvedHttps.plugin) {
     plugins.push(resolvedHttps.plugin)

package/templates/__root.tsx

@@ -2,7 +2,7 @@
 import { useState, type ReactNode } from 'react'
 import { createRootRoute, HeadContent, Scripts, Outlet, Link } from '@tanstack/react-router'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { AppEcomiqProvider } from '@ecomiq/storefront/internal/context'
+import { AppEcomiqProvider, AuthProvider } from '@ecomiq/storefront/internal/context'
 import { buildRootHead } from '@ecomiq/storefront/internal/head'
 import { serverApi } from '@ecomiq/storefront'
 import { StorefrontError } from '@ecomiq/storefront/ui'
@@ -33,9 +33,11 @@ function RootComponent() {
     <RootDocument language={settings.store.language}>
       <QueryClientProvider client={queryClient}>
         <AppEcomiqProvider config={publicConfig} settings={settings}>
-          <Layout config={publicConfig} settings={settings}>
-            <Outlet />
-          </Layout>
+          <AuthProvider>
+            <Layout config={publicConfig} settings={settings}>
+              <Outlet />
+            </Layout>
+          </AuthProvider>
         </AppEcomiqProvider>
       </QueryClientProvider>
     </RootDocument>
@@ -50,6 +52,10 @@ function RootDocument({ children, language }: { children: ReactNode; language: s
       </head>
       <body className="bg-background text-foreground antialiased">
         {children}
+        {/* Puente de design mode (solo dev): el parent (admin) pinta hover/select. */}
+        {import.meta.env.DEV ? (
+          <script src="/design-bridge.js?v=1.0.0" defer />
+        ) : null}
         <Scripts />
       </body>
     </html>