@tappify/extension-sdk 2.1.0-beta.1 → 2.1.0

package/dist/vite-preview.mjs

@@ -1,6 +1,6 @@
 import {
   src_exports
-} from "./chunk-2CY5HVY7.mjs";
+} from "./chunk-EX3NFXDK.mjs";
 import {
   remoteName,
   uiContributions
@@ -9,16 +9,16 @@ import {
   createTapMock,
   fixtureKeywords,
   fixtures
-} from "./chunk-SWG7CNTZ.mjs";
-import "./chunk-SGEYDV3K.mjs";
+} from "./chunk-CTSZ5D7S.mjs";
+import "./chunk-BDCX6LRQ.mjs";
 import {
   TapHostProvider,
   createHostQueryClient
-} from "./chunk-RBIQT75L.mjs";
-import "./chunk-QA5AL3VZ.mjs";
-import "./chunk-KZ5NGFUP.mjs";
-import "./chunk-SGCYEEXD.mjs";
-import "./chunk-QXD7WVKK.mjs";
+} from "./chunk-GG3IX52W.mjs";
+import "./chunk-QHM7XNRK.mjs";
+import "./chunk-C3YNVHBP.mjs";
+import "./chunk-MNDVYPEP.mjs";
+import "./chunk-CSTYBKZC.mjs";
 import "./chunk-J5LGTIGS.mjs";
 
 // src/vite-preview.tsx
@@ -27,19 +27,14 @@ import { createRoot } from "react-dom/client";
 // src/vite/preview/client.tsx
 import * as TanstackQuery from "@tanstack/react-query";
 import * as React from "react";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from "react";
+import { useEffect, useMemo, useState } from "react";
 import * as ReactDom from "react-dom";
 import * as JsxRuntime from "react/jsx-runtime";
 
 // package.json
 var package_default = {
   name: "@tappify/extension-sdk",
-  version: "2.1.0-beta.1",
+  version: "2.1.0",
   description: "Build extensions that run inside Tappify",
   author: "Tappify Team",
   license: "MIT",
@@ -65,11 +60,6 @@ var package_default = {
       import: "./dist/host.mjs",
       require: "./dist/host.cjs"
     },
-    "./ui": {
-      types: "./dist/ui.d.ts",
-      import: "./dist/ui.mjs",
-      require: "./dist/ui.cjs"
-    },
     "./vite": {
       types: "./dist/vite.d.ts",
       import: "./dist/vite.mjs",
@@ -80,11 +70,6 @@ var package_default = {
       import: "./dist/vite-preview.mjs",
       require: "./dist/vite-preview.cjs"
     },
-    "./vite/preview/bootstrap": {
-      types: "./dist/vite-preview-bootstrap.d.ts",
-      import: "./dist/vite-preview-bootstrap.mjs",
-      require: "./dist/vite-preview-bootstrap.cjs"
-    },
     "./testing": {
       types: "./dist/testing/index.d.ts",
       import: "./dist/testing/index.mjs",
@@ -105,7 +90,7 @@ var package_default = {
       import: "./dist/codegen.mjs",
       require: "./dist/codegen.cjs"
     },
-    "./ui/styles.css": "./dist/ui/styles.css",
+    "./styles.css": "./dist/styles.css",
     "./schema/extension-v2.json": "./schema/extension-v2.json",
     "./package.json": "./package.json"
   },
@@ -405,106 +390,32 @@ function previewProps(contribution, state) {
 var previewStyles = `
 :root {
   color-scheme: light;
-  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: #f2f3ee;
-  color: #121212;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  background: #f4f5ef;
+  color: #142012;
 }
 * { box-sizing: border-box; }
-body { margin: 0; min-width: 320px; background: #f2f3ee; }
+body { margin: 0; min-width: 320px; }
 button, select { font: inherit; }
-.tap-preview {
-  --preview-canvas: #f2f3ee;
-  --preview-paper: #fdfdfd;
-  --preview-ink: #121212;
-  --preview-muted: #686b66;
-  --preview-border: #d5d7d1;
-  --preview-control: #f7f8f4;
-  --preview-green: #235027;
-  min-height: 100vh;
-  display: grid;
-  grid-template-rows: auto 1fr;
-  background: var(--preview-canvas);
-  color: var(--preview-ink);
-}
-.tap-preview[data-theme="dark"] {
-  color-scheme: dark;
-  --preview-canvas: #111216;
-  --preview-paper: #181920;
-  --preview-ink: #f4f5f1;
-  --preview-muted: #a7aaa4;
-  --preview-border: #303239;
-  --preview-control: #202229;
-  --preview-green: #b4d773;
-}
-.tap-preview-bar {
-  min-height: 68px;
-  display: flex;
-  gap: 24px;
-  align-items: center;
-  padding: 12px 20px;
-  border-bottom: 1px solid var(--preview-border);
-  background: var(--preview-paper);
-}
-.tap-preview-brand { min-width: 210px; margin-right: auto; display: flex; align-items: center; gap: 10px; }
-.tap-preview-brand img { width: 36px; height: 36px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--preview-border); border-radius: 8px; background: #fff; }
+.tap-preview { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
+.tap-preview[data-theme="dark"] { color-scheme: dark; background: #111710; color: #f2f5ec; }
+.tap-preview-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); background: color-mix(in srgb, Canvas 94%, transparent); }
+.tap-preview-brand { margin-right: auto; min-width: 190px; }
 .tap-preview-brand strong, .tap-preview-brand span { display: block; }
-.tap-preview-brand strong { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
-.tap-preview-brand span { margin-top: 2px; color: var(--preview-muted); font-size: 11px; }
-.tap-preview-brand i { width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; background: #64a75f; box-shadow: 0 0 0 2px rgb(100 167 95 / 14%); }
-.tap-preview-controls { display: flex; align-items: end; gap: 8px; }
-.tap-preview-field { min-width: 104px; display: grid; gap: 4px; color: var(--preview-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; }
-.tap-preview-field--contribution { min-width: 190px; }
-.tap-preview-field select, .tap-preview-reset {
-  height: 32px;
-  border: 1px solid var(--preview-border);
-  border-radius: 6px;
-  outline: none;
-  background: var(--preview-control);
-  color: var(--preview-ink);
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: normal;
-  text-transform: none;
-}
-.tap-preview-field select { width: 100%; padding: 0 28px 0 9px; cursor: pointer; }
-.tap-preview-field select:focus, .tap-preview-reset:focus-visible { border-color: var(--preview-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--preview-green) 18%, transparent); }
-.tap-preview-reset { padding: 0 12px; cursor: pointer; }
-.tap-preview-reset:hover { border-color: color-mix(in srgb, var(--preview-ink) 34%, var(--preview-border)); background: var(--preview-paper); }
-.tap-preview-stage { min-width: 0; padding: 22px 24px 14px; overflow: auto; }
-.tap-preview-canvas {
-  width: 100%;
-  max-width: 1440px;
-  height: max(380px, calc(100vh - 118px));
-  margin: 0 auto;
-  border: 1px solid var(--preview-border);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--preview-paper);
-  color: var(--preview-ink);
-  box-shadow: 0 2px 8px rgb(20 24 18 / 5%);
-  transition: max-width 160ms ease;
-}
+.tap-preview-brand span, .tap-preview-note { color: color-mix(in srgb, currentColor 62%, transparent); font-size: 12px; }
+.tap-preview-field { display: grid; gap: 5px; font-size: 12px; }
+.tap-preview-field select, .tap-preview-reset { min-height: 34px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 7px; background: Canvas; color: CanvasText; padding: 6px 9px; }
+.tap-preview-reset { cursor: pointer; }
+.tap-preview-stage { padding: 24px; overflow: auto; }
+.tap-preview-canvas { width: 100%; min-height: 520px; margin: 0 auto; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 12px; background: Canvas; color: CanvasText; box-shadow: 0 12px 36px rgb(20 32 18 / 9%); transition: max-width 160ms ease; }
 .tap-preview-canvas[data-viewport="tablet"] { max-width: 768px; }
 .tap-preview-canvas[data-viewport="mobile"] { max-width: 390px; }
-.tap-preview-canvas[data-size="slot"] { width: min(100%, 680px); height: 380px; }
-.tap-preview-canvas[data-size="panel"] { width: min(100%, 960px); height: clamp(420px, calc(100vh - 118px), 620px); }
-.tap-preview-canvas[data-size="page"] { height: max(380px, calc(100vh - 118px)); }
-.tap-preview-surface { display: block; height: 100%; min-height: 0; }
+.tap-preview-surface { min-height: 100%; padding: 24px; }
 .tap-preview-message { min-height: 360px; display: grid; place-content: center; gap: 8px; padding: 32px; text-align: center; }
-.tap-preview-message span { max-width: 62ch; color: var(--preview-muted); }
+.tap-preview-message span { max-width: 62ch; color: color-mix(in srgb, currentColor 68%, transparent); }
 @media (max-width: 640px) {
   .tap-preview-stage { padding: 12px; }
-  .tap-preview-bar { align-items: flex-start; padding: 12px; }
-  .tap-preview-brand { min-width: 0; }
-  .tap-preview-controls { width: 100%; overflow-x: auto; padding-bottom: 2px; }
-  .tap-preview-field { min-width: 100px; }
-  .tap-preview-field--contribution { min-width: 180px; }
-}
-@media (max-width: 900px) {
-  .tap-preview-bar { flex-wrap: wrap; gap: 12px; }
-  .tap-preview-controls { flex: 1 1 100%; }
+  .tap-preview-bar { padding: 12px; }
 }
 `;
 
@@ -564,14 +475,6 @@ function componentFromModule(module, expose) {
   }
   return candidate;
 }
-function stylesFromModule(module) {
-  if (typeof module !== "object" || module === null || !("styles" in module) || !Array.isArray(module.styles)) {
-    return [];
-  }
-  return module.styles.filter(
-    (style) => typeof style === "string"
-  );
-}
 async function loadContribution({
   extensionId,
   remote,
@@ -590,18 +493,6 @@ function isExternalRemote(remote) {
     return true;
   }
 }
-function localProcedureStubs(manifest) {
-  return Object.fromEntries(
-    Object.keys(manifest.server?.procedures ?? {}).map((name) => [
-      name,
-      () => {
-        throw new Error(
-          "This view needs live server data. Run tappify extension dev --live to connect it."
-        );
-      }
-    ])
-  );
-}
 function Message({
   title,
   children
@@ -611,58 +502,6 @@ function Message({
     /* @__PURE__ */ jsx2("span", { children })
   ] });
 }
-function PreviewSurface({
-  portal,
-  styles,
-  children
-}) {
-  const [nodes, setNodes] = useState(null);
-  const attachHost = useCallback((host) => {
-    if (host === null) return;
-    const root = host.shadowRoot ?? host.attachShadow({ mode: "open" });
-    let content = root.querySelector("[data-tap-content]");
-    if (content === null) {
-      content = document.createElement("div");
-      content.className = "tap-root";
-      content.setAttribute("data-tap-content", "");
-      root.appendChild(content);
-    }
-    setNodes({ root, content });
-  }, []);
-  useEffect(() => {
-    if (nodes === null) return;
-    nodes.root.appendChild(portal);
-    return () => portal.remove();
-  }, [nodes, portal]);
-  useEffect(() => {
-    if (nodes === null) return;
-    const injected = [];
-    const inject = (kind, css) => {
-      const element = document.createElement("style");
-      element.setAttribute("data-tap-style", kind);
-      element.textContent = css;
-      nodes.root.insertBefore(element, nodes.content);
-      injected.push(element);
-    };
-    inject(
-      "preview",
-      ":host { display: block; height: 100%; min-height: 0; overflow: auto; } .tap-root { box-sizing: border-box; height: 100%; min-height: 100%; padding: 24px; }"
-    );
-    for (const css of styles) inject("remote", css);
-    return () => {
-      for (const element of injected) element.remove();
-    };
-  }, [nodes, styles]);
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ref: attachHost,
-      className: "tap-preview-surface",
-      "data-tap-preview-surface": true,
-      children: nodes === null ? null : ReactDom.createPortal(children, nodes.content)
-    }
-  );
-}
 function LocalPreview({
   manifest,
   remote,
@@ -697,8 +536,7 @@ function LocalPreview({
       setLoaded({
         key: loadKey,
         status: "ready",
-        Component: componentFromModule(module, contribution.expose),
-        styles: stylesFromModule(module)
+        Component: componentFromModule(module, contribution.expose)
       });
     }).catch((error) => {
       if (cancelled) return;
@@ -719,10 +557,9 @@ function LocalPreview({
       extensionName: manifest.name,
       project: fixtures.project.project,
       theme,
-      size,
-      server: localProcedureStubs(manifest)
+      size
     });
-  }, [generation, manifest, size, theme]);
+  }, [generation, manifest.id, manifest.name, size, theme]);
   const queryClient = useMemo(() => {
     void generation;
     return createHostQueryClient();
@@ -742,7 +579,7 @@ function LocalPreview({
       settings,
       onSettingsChange: setSettings
     });
-    content = /* @__PURE__ */ jsx2(TapHostProvider, { tap: host.tap, queryClient, children: /* @__PURE__ */ jsx2(PreviewSurface, { portal: host.portal, styles: current.styles, children: /* @__PURE__ */ jsx2(PreviewErrorBoundary, { children: /* @__PURE__ */ jsx2(Component2, { ...props }) }, `${loadKey}|${String(generation)}`) }) });
+    content = /* @__PURE__ */ jsx2(TapHostProvider, { tap: host.tap, queryClient, children: /* @__PURE__ */ jsx2(PreviewErrorBoundary, { children: /* @__PURE__ */ jsx2("div", { className: "tap-preview-surface", children: /* @__PURE__ */ jsx2(Component2, { ...props }) }) }, `${loadKey}|${String(generation)}`) });
   } else {
     content = /* @__PURE__ */ jsxs2(Message, { title: "Loading contribution", children: [
       "Loading ",
@@ -754,105 +591,99 @@ function LocalPreview({
     /* @__PURE__ */ jsx2("style", { children: previewStyles }),
     /* @__PURE__ */ jsxs2("header", { className: "tap-preview-bar", children: [
       /* @__PURE__ */ jsxs2("div", { className: "tap-preview-brand", children: [
-        /* @__PURE__ */ jsx2("img", { src: `/${manifest.icon.replace(/^\.\//, "")}`, alt: "" }),
-        /* @__PURE__ */ jsxs2("div", { children: [
-          /* @__PURE__ */ jsx2("strong", { children: manifest.name }),
-          /* @__PURE__ */ jsxs2("span", { children: [
-            /* @__PURE__ */ jsx2("i", { "aria-hidden": "true" }),
-            isExternalRemote(remote) ? "External remote" : "Local preview",
-            " \xB7 Fixture data"
-          ] })
+        /* @__PURE__ */ jsx2("strong", { children: manifest.name }),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          isExternalRemote(remote) ? "External remote" : "Local preview",
+          " \xB7 Fixture data"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "tap-preview-controls", children: [
-        selections.length > 0 ? /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field tap-preview-field--contribution", children: [
-          /* @__PURE__ */ jsx2("span", { children: "Contribution" }),
-          /* @__PURE__ */ jsx2(
-            "select",
-            {
-              value: contribution?.expose ?? "",
-              onChange: (event) => setExpose(event.target.value),
-              children: selections.map((item) => /* @__PURE__ */ jsx2(
-                "option",
-                {
-                  value: item.contribution.expose,
-                  children: item.label
-                },
-                item.contribution.expose
-              ))
-            }
-          )
-        ] }) : null,
-        /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field", children: [
-          /* @__PURE__ */ jsx2("span", { children: "Theme" }),
-          /* @__PURE__ */ jsxs2(
-            "select",
-            {
-              value: theme,
-              onChange: (event) => setTheme(event.target.value),
-              children: [
-                /* @__PURE__ */ jsx2("option", { value: "light", children: "Light" }),
-                /* @__PURE__ */ jsx2("option", { value: "dark", children: "Dark" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field", children: [
-          /* @__PURE__ */ jsx2("span", { children: "Viewport" }),
-          /* @__PURE__ */ jsxs2(
-            "select",
-            {
-              value: viewport,
-              onChange: (event) => setViewport(event.target.value),
-              children: [
-                /* @__PURE__ */ jsx2("option", { value: "desktop", children: "Desktop" }),
-                /* @__PURE__ */ jsx2("option", { value: "tablet", children: "Tablet" }),
-                /* @__PURE__ */ jsx2("option", { value: "mobile", children: "Mobile" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field", children: [
-          /* @__PURE__ */ jsx2("span", { children: "Surface" }),
-          /* @__PURE__ */ jsxs2(
-            "select",
-            {
-              value: size,
-              "aria-label": "Surface size",
-              onChange: (event) => setSize(event.target.value),
-              children: [
-                /* @__PURE__ */ jsx2("option", { value: "slot", children: "Slot" }),
-                /* @__PURE__ */ jsx2("option", { value: "panel", children: "Panel" }),
-                /* @__PURE__ */ jsx2("option", { value: "page", children: "Page" })
-              ]
-            }
-          )
-        ] }),
+      selections.length > 0 ? /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field", children: [
+        "Contribution",
         /* @__PURE__ */ jsx2(
-          "button",
+          "select",
           {
-            className: "tap-preview-reset",
-            type: "button",
-            "aria-label": "Reset fixtures",
-            onClick: () => {
-              setSettings({});
-              setGeneration((value) => value + 1);
-            },
-            children: "Reset"
+            value: contribution?.expose ?? "",
+            onChange: (event) => setExpose(event.target.value),
+            children: selections.map((item) => /* @__PURE__ */ jsx2(
+              "option",
+              {
+                value: item.contribution.expose,
+                children: item.label
+              },
+              item.contribution.expose
+            ))
           }
         )
-      ] })
+      ] }) : null,
+      /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field", children: [
+        "Theme",
+        /* @__PURE__ */ jsxs2(
+          "select",
+          {
+            value: theme,
+            onChange: (event) => setTheme(event.target.value),
+            children: [
+              /* @__PURE__ */ jsx2("option", { value: "light", children: "Light" }),
+              /* @__PURE__ */ jsx2("option", { value: "dark", children: "Dark" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field", children: [
+        "Viewport",
+        /* @__PURE__ */ jsxs2(
+          "select",
+          {
+            value: viewport,
+            onChange: (event) => setViewport(event.target.value),
+            children: [
+              /* @__PURE__ */ jsx2("option", { value: "desktop", children: "Desktop" }),
+              /* @__PURE__ */ jsx2("option", { value: "tablet", children: "Tablet" }),
+              /* @__PURE__ */ jsx2("option", { value: "mobile", children: "Mobile" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "tap-preview-field", children: [
+        "Surface size",
+        /* @__PURE__ */ jsxs2(
+          "select",
+          {
+            value: size,
+            onChange: (event) => setSize(event.target.value),
+            children: [
+              /* @__PURE__ */ jsx2("option", { value: "slot", children: "Slot" }),
+              /* @__PURE__ */ jsx2("option", { value: "panel", children: "Panel" }),
+              /* @__PURE__ */ jsx2("option", { value: "page", children: "Page" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: "tap-preview-reset",
+          type: "button",
+          onClick: () => {
+            setSettings({});
+            setGeneration((value) => value + 1);
+          },
+          children: "Reset fixtures"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx2("section", { className: "tap-preview-stage", children: /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "tap-preview-canvas",
-        "data-viewport": viewport,
-        "data-size": size,
-        "aria-label": "Preview canvas",
-        children: content
-      }
-    ) })
+    /* @__PURE__ */ jsxs2("section", { className: "tap-preview-stage", children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "tap-preview-canvas",
+          "data-viewport": viewport,
+          "aria-label": "Preview canvas",
+          children: content
+        }
+      ),
+      /* @__PURE__ */ jsx2("p", { className: "tap-preview-note", children: "Server procedures are unavailable locally. Use `tappify extension dev --live` for real host and server behavior." })
+    ] })
   ] });
 }