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

package/dist/vite-preview.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkONJMPO3Pcjs = require('./chunk-ONJMPO3P.cjs');
+var _chunkEW54H7CRcjs = require('./chunk-EW54H7CR.cjs');
 
 
 
@@ -9,16 +9,16 @@ var _chunkNN263PGQcjs = require('./chunk-NN263PGQ.cjs');
 
 
 
-var _chunkBPCGXXMDcjs = require('./chunk-BPCGXXMD.cjs');
-require('./chunk-GAUZYBXE.cjs');
+var _chunkNFUPPCX4cjs = require('./chunk-NFUPPCX4.cjs');
+require('./chunk-5AAPD5WV.cjs');
 
 
 
-var _chunkVV7ELNRWcjs = require('./chunk-VV7ELNRW.cjs');
-require('./chunk-PRCZMOLD.cjs');
-require('./chunk-A74HCO6T.cjs');
-require('./chunk-7YKH4LZN.cjs');
-require('./chunk-6HETNZJY.cjs');
+var _chunkJMUK3K47cjs = require('./chunk-JMUK3K47.cjs');
+require('./chunk-OPPYEA7F.cjs');
+require('./chunk-G7XZSN2Q.cjs');
+require('./chunk-PYJMJF44.cjs');
+require('./chunk-2DBSVKAU.cjs');
 require('./chunk-Q7SFCCGT.cjs');
 
 // src/vite-preview.tsx
@@ -28,18 +28,13 @@ var _client = require('react-dom/client');
 var _reactquery = require('@tanstack/react-query'); var TanstackQuery = _interopRequireWildcard(_reactquery);
 var _react = require('react'); var React = _interopRequireWildcard(_react);
 
-
-
-
-
-
 var _reactdom = require('react-dom'); var ReactDom = _interopRequireWildcard(_reactdom);
 var _jsxruntime = require('react/jsx-runtime'); var JsxRuntime = _interopRequireWildcard(_jsxruntime);
 
 // package.json
 var package_default = {
   name: "@tappify/extension-sdk",
-  version: "2.1.0-beta.2",
+  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"
   },
@@ -392,7 +377,7 @@ function previewProps(contribution, state) {
     case "widget":
       return { config: {} };
     case "rowAction":
-      return { row: { ..._chunkBPCGXXMDcjs.fixtureKeywords[0] } };
+      return { row: { ..._chunkNFUPPCX4cjs.fixtureKeywords[0] } };
     case "settings":
       return {
         values: state.settings,
@@ -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; }
 }
 `;
 
@@ -546,7 +457,7 @@ async function federationFor(extensionId, remote) {
         },
         "@tappify/extension-sdk": {
           version: package_default.version,
-          lib: () => _chunkONJMPO3Pcjs.src_exports,
+          lib: () => _chunkEW54H7CRcjs.src_exports,
           shareConfig: SINGLETON
         }
       }
@@ -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(_nullishCoalesce(_optionalChain([manifest, 'access', _ => _.server, 'optionalAccess', _2 => _2.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__ */ _jsxruntime.jsx.call(void 0, "span", { children })
   ] });
 }
-function PreviewSurface({
-  portal,
-  styles,
-  children
-}) {
-  const [nodes, setNodes] = _react.useState.call(void 0, null);
-  const attachHost = _react.useCallback.call(void 0, (host) => {
-    if (host === null) return;
-    const root = _nullishCoalesce(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 });
-  }, []);
-  _react.useEffect.call(void 0, () => {
-    if (nodes === null) return;
-    nodes.root.appendChild(portal);
-    return () => portal.remove();
-  }, [nodes, portal]);
-  _react.useEffect.call(void 0, () => {
-    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__ */ _jsxruntime.jsx.call(void 0, 
-    "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,
@@ -670,7 +509,7 @@ function LocalPreview({
 }) {
   const selections = _react.useMemo.call(void 0, () => previewSelections(manifest), [manifest]);
   const [expose, setExpose] = _react.useState.call(void 0, 
-    _nullishCoalesce(_optionalChain([selections, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.contribution, 'access', _5 => _5.expose]), () => ( ""))
+    _nullishCoalesce(_optionalChain([selections, 'access', _ => _[0], 'optionalAccess', _2 => _2.contribution, 'access', _3 => _3.expose]), () => ( ""))
   );
   const [theme, setTheme] = _react.useState.call(void 0, "light");
   const [viewport, setViewport] = _react.useState.call(void 0, "desktop");
@@ -682,8 +521,8 @@ function LocalPreview({
     status: "loading"
   });
   const selection = _nullishCoalesce(selections.find((item) => item.contribution.expose === expose), () => ( selections[0]));
-  const contribution = _optionalChain([selection, 'optionalAccess', _6 => _6.contribution]);
-  const loadKey = `${remote}|${_nullishCoalesce(_optionalChain([contribution, 'optionalAccess', _7 => _7.expose]), () => ( ""))}`;
+  const contribution = _optionalChain([selection, 'optionalAccess', _4 => _4.contribution]);
+  const loadKey = `${remote}|${_nullishCoalesce(_optionalChain([contribution, 'optionalAccess', _5 => _5.expose]), () => ( ""))}`;
   _react.useEffect.call(void 0, () => {
     if (contribution === void 0) return;
     let cancelled = false;
@@ -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;
@@ -714,18 +552,17 @@ function LocalPreview({
   }, [contribution, loadKey, loader, manifest.id, remote]);
   const host = _react.useMemo.call(void 0, () => {
     void generation;
-    return _chunkBPCGXXMDcjs.createTapMock.call(void 0, {
+    return _chunkNFUPPCX4cjs.createTapMock.call(void 0, {
       extensionId: manifest.id,
       extensionName: manifest.name,
-      project: _chunkBPCGXXMDcjs.fixtures.project.project,
+      project: _chunkNFUPPCX4cjs.fixtures.project.project,
       theme,
-      size,
-      server: localProcedureStubs(manifest)
+      size
     });
-  }, [generation, manifest, size, theme]);
+  }, [generation, manifest.id, manifest.name, size, theme]);
   const queryClient = _react.useMemo.call(void 0, () => {
     void generation;
-    return _chunkVV7ELNRWcjs.createHostQueryClient.call(void 0, );
+    return _chunkJMUK3K47cjs.createHostQueryClient.call(void 0, );
   }, [generation]);
   const current = loaded.key === loadKey ? loaded : { key: loadKey, status: "loading" };
   let content;
@@ -742,7 +579,7 @@ function LocalPreview({
       settings,
       onSettingsChange: setSettings
     });
-    content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVV7ELNRWcjs.TapHostProvider, { tap: host.tap, queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PreviewSurface, { portal: host.portal, styles: current.styles, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PreviewErrorBoundary, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, { ...props }) }, `${loadKey}|${String(generation)}`) }) });
+    content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJMUK3K47cjs.TapHostProvider, { tap: host.tap, queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PreviewErrorBoundary, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "tap-preview-surface", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, { ...props }) }) }, `${loadKey}|${String(generation)}`) });
   } else {
     content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Message, { title: "Loading contribution", children: [
       "Loading ",
@@ -754,105 +591,99 @@ function LocalPreview({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { children: previewStyles }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "header", { className: "tap-preview-bar", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tap-preview-brand", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: `/${manifest.icon.replace(/^\.\//, "")}`, alt: "" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: manifest.name }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "i", { "aria-hidden": "true" }),
-            isExternalRemote(remote) ? "External remote" : "Local preview",
-            " \xB7 Fixture data"
-          ] })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: manifest.name }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+          isExternalRemote(remote) ? "External remote" : "Local preview",
+          " \xB7 Fixture data"
         ] })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tap-preview-controls", children: [
-        selections.length > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field tap-preview-field--contribution", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Contribution" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "select",
-            {
-              value: _nullishCoalesce(_optionalChain([contribution, 'optionalAccess', _8 => _8.expose]), () => ( "")),
-              onChange: (event) => setExpose(event.target.value),
-              children: selections.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "option",
-                {
-                  value: item.contribution.expose,
-                  children: item.label
-                },
-                item.contribution.expose
-              ))
-            }
-          )
-        ] }) : null,
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Theme" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "select",
-            {
-              value: theme,
-              onChange: (event) => setTheme(event.target.value),
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "light", children: "Light" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "dark", children: "Dark" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Viewport" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "select",
-            {
-              value: viewport,
-              onChange: (event) => setViewport(event.target.value),
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "desktop", children: "Desktop" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "tablet", children: "Tablet" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "mobile", children: "Mobile" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Surface" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "select",
-            {
-              value: size,
-              "aria-label": "Surface size",
-              onChange: (event) => setSize(event.target.value),
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "slot", children: "Slot" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "panel", children: "Panel" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "page", children: "Page" })
-              ]
-            }
-          )
-        ] }),
+      selections.length > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field", children: [
+        "Contribution",
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "button",
+          "select",
+          {
+            value: _nullishCoalesce(_optionalChain([contribution, 'optionalAccess', _6 => _6.expose]), () => ( "")),
+            onChange: (event) => setExpose(event.target.value),
+            children: selections.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "option",
+              {
+                value: item.contribution.expose,
+                children: item.label
+              },
+              item.contribution.expose
+            ))
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field", children: [
+        "Theme",
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "select",
           {
-            className: "tap-preview-reset",
-            type: "button",
-            "aria-label": "Reset fixtures",
-            onClick: () => {
-              setSettings({});
-              setGeneration((value) => value + 1);
-            },
-            children: "Reset"
+            value: theme,
+            onChange: (event) => setTheme(event.target.value),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "light", children: "Light" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "dark", children: "Dark" })
+            ]
           }
         )
-      ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field", children: [
+        "Viewport",
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "select",
+          {
+            value: viewport,
+            onChange: (event) => setViewport(event.target.value),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "desktop", children: "Desktop" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "tablet", children: "Tablet" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "mobile", children: "Mobile" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "tap-preview-field", children: [
+        "Surface size",
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "select",
+          {
+            value: size,
+            onChange: (event) => setSize(event.target.value),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "slot", children: "Slot" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "panel", children: "Panel" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "page", children: "Page" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          className: "tap-preview-reset",
+          type: "button",
+          onClick: () => {
+            setSettings({});
+            setGeneration((value) => value + 1);
+          },
+          children: "Reset fixtures"
+        }
+      )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "section", { className: "tap-preview-stage", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        className: "tap-preview-canvas",
-        "data-viewport": viewport,
-        "data-size": size,
-        "aria-label": "Preview canvas",
-        children: content
-      }
-    ) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "tap-preview-stage", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "tap-preview-canvas",
+          "data-viewport": viewport,
+          "aria-label": "Preview canvas",
+          children: content
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "tap-preview-note", children: "Server procedures are unavailable locally. Use `tappify extension dev --live` for real host and server behavior." })
+    ] })
   ] });
 }