@selectwin/kit 0.1.67 → 0.1.68

package/dist/SelectPreviewFrame.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 type Device = 'desktop' | 'mobile';
 export interface SelectPreviewFrameProps {
     /** Preview URL. Empty/undefined shows the placeholder. */
@@ -23,6 +23,20 @@ export interface SelectPreviewFrameProps {
      * desatualizada. Então: avisa e oferece o botão — não age.
      */
     notice?: ReactNode;
+    /**
+     * Ref para o `<iframe>` INTERNO — o `ref` do componente aponta para o wrapper, e de um
+     * `<div>` não se alcança `contentWindow`.
+     *
+     * Existe para quem DIRIGE o conteúdo do frame por `postMessage` em vez de recarregá-lo: um
+     * builder que manda o desenho ao vivo precisa da janela do frame, e a alternativa — sair
+     * fazendo `querySelector('iframe')` no wrapper — amarraria a página à árvore interna deste
+     * componente, que é exatamente o que a prop existe para evitar.
+     *
+     * ⚠️ O frame REMONTA a cada recarga (o `key` do nonce), então o ref troca de nó. Quem
+     * dirige não deve guardar `contentWindow`: leia-o do ref na hora de mandar, e refaça o
+     * aperto de mão a cada `load`.
+     */
+    iframeRef?: Ref<HTMLIFrameElement>;
     initialDevice?: Device;
     showDeviceToggle?: boolean;
     emptyLabel?: string;

package/dist/index.js

@@ -4622,15 +4622,15 @@ function Lo() {
   if (!t) throw new Error("useSelectToast must be used within a SelectToastProvider");
   return t;
 }
-const ta = { desktop: "100%", mobile: 390 }, Ao = R(function({ src: n, title: l = "Pré-visualização", height: c = 560, fill: s = !1, initialDevice: a = "desktop", showDeviceToggle: o = !0, emptyLabel: i = "Salve para gerar a pré-visualização.", onReload: r, notice: d, className: u, ...h }, f) {
-  const [g, _] = W(a), [y, N] = W(0), [S, v] = W(!0), m = n ? `${n}${n.includes("?") ? "&" : "?"}_pv=${y}` : "", M = () => {
-    if (v(!0), r) {
+const ta = { desktop: "100%", mobile: 390 }, Ao = R(function({ src: n, title: l = "Pré-visualização", height: c = 560, fill: s = !1, initialDevice: a = "desktop", showDeviceToggle: o = !0, emptyLabel: i = "Salve para gerar a pré-visualização.", onReload: r, notice: d, iframeRef: u, className: h, ...f }, g) {
+  const [_, y] = W(a), [N, S] = W(0), [v, m] = W(!0), M = n ? `${n}${n.includes("?") ? "&" : "?"}_pv=${N}` : "", k = () => {
+    if (m(!0), r) {
       r();
       return;
     }
-    N((k) => k + 1);
+    S((w) => w + 1);
   };
-  return /* @__PURE__ */ p("div", { ref: f, ...h, className: `select-preview${s ? " select-preview--fill" : ""}${u ? " " + u : ""}`, children: [
+  return /* @__PURE__ */ p("div", { ref: g, ...f, className: `select-preview${s ? " select-preview--fill" : ""}${h ? " " + h : ""}`, children: [
     /* @__PURE__ */ p("div", { className: "select-preview__bar", children: [
       /* @__PURE__ */ e("span", { className: "select-preview__title", children: l }),
       d && /* @__PURE__ */ e("span", { className: "select-preview__notice", children: d }),
@@ -4642,8 +4642,8 @@ const ta = { desktop: "100%", mobile: 390 }, Ao = R(function({ src: n, title: l
               size: "sm",
               icon: /* @__PURE__ */ e(fl, {}),
               label: "Visualizar em desktop",
-              active: g === "desktop",
-              onClick: () => _("desktop")
+              active: _ === "desktop",
+              onClick: () => y("desktop")
             }
           ),
           /* @__PURE__ */ e(
@@ -4652,12 +4652,12 @@ const ta = { desktop: "100%", mobile: 390 }, Ao = R(function({ src: n, title: l
               size: "sm",
               icon: /* @__PURE__ */ e(_l, {}),
               label: "Visualizar em mobile",
-              active: g === "mobile",
-              onClick: () => _("mobile")
+              active: _ === "mobile",
+              onClick: () => y("mobile")
             }
           )
         ] }),
-        /* @__PURE__ */ e(De, { size: "sm", icon: /* @__PURE__ */ e(bc, {}), label: "Recarregar", onClick: M, disabled: !n }),
+        /* @__PURE__ */ e(De, { size: "sm", icon: /* @__PURE__ */ e(bc, {}), label: "Recarregar", onClick: k, disabled: !n }),
         n && /* @__PURE__ */ e(
           "a",
           {
@@ -4672,17 +4672,18 @@ const ta = { desktop: "100%", mobile: 390 }, Ao = R(function({ src: n, title: l
         )
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: "select-preview__stage", style: s ? void 0 : { height: c }, children: m ? /* @__PURE__ */ p("div", { className: "select-preview__device", style: { width: ta[g] }, children: [
-      S && /* @__PURE__ */ e("div", { className: "select-preview__loading", children: /* @__PURE__ */ e(Ns, {}) }),
+    /* @__PURE__ */ e("div", { className: "select-preview__stage", style: s ? void 0 : { height: c }, children: M ? /* @__PURE__ */ p("div", { className: "select-preview__device", style: { width: ta[_] }, children: [
+      v && /* @__PURE__ */ e("div", { className: "select-preview__loading", children: /* @__PURE__ */ e(Ns, {}) }),
       /* @__PURE__ */ e(
         "iframe",
         {
+          ref: u,
           title: l,
-          src: m,
-          onLoad: () => v(!1),
+          src: M,
+          onLoad: () => m(!1),
           className: "select-preview__iframe"
         },
-        y
+        N
       )
     ] }) : /* @__PURE__ */ e("p", { className: "select-preview__empty", children: i }) })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selectwin/kit",
-  "version": "0.1.67",
+  "version": "0.1.68",
   "description": "Selectwin design-system kit — primitivos React, charts SVG e tokens (theme-aware, sem dependência de biblioteca de chart).",
   "type": "module",
   "repository": {