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

package/dist/vite-preview.cjs

@@ -0,0 +1,876 @@
+"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 _chunkNN263PGQcjs = require('./chunk-NN263PGQ.cjs');
+
+
+
+
+var _chunkBPCGXXMDcjs = require('./chunk-BPCGXXMD.cjs');
+require('./chunk-GAUZYBXE.cjs');
+
+
+
+var _chunkVV7ELNRWcjs = require('./chunk-VV7ELNRW.cjs');
+require('./chunk-PRCZMOLD.cjs');
+require('./chunk-A74HCO6T.cjs');
+require('./chunk-7YKH4LZN.cjs');
+require('./chunk-6HETNZJY.cjs');
+require('./chunk-Q7SFCCGT.cjs');
+
+// src/vite-preview.tsx
+var _client = require('react-dom/client');
+
+// src/vite/preview/client.tsx
+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",
+  description: "Build extensions that run inside Tappify",
+  author: "Tappify Team",
+  license: "MIT",
+  type: "module",
+  exports: {
+    ".": {
+      types: "./dist/index.d.ts",
+      import: "./dist/index.mjs",
+      require: "./dist/index.cjs"
+    },
+    "./manifest": {
+      types: "./dist/manifest.d.ts",
+      import: "./dist/manifest.mjs",
+      require: "./dist/manifest.cjs"
+    },
+    "./server": {
+      types: "./dist/server.d.ts",
+      import: "./dist/server.mjs",
+      require: "./dist/server.cjs"
+    },
+    "./host": {
+      types: "./dist/host.d.ts",
+      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",
+      require: "./dist/vite.cjs"
+    },
+    "./vite/preview": {
+      types: "./dist/vite-preview.d.ts",
+      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",
+      require: "./dist/testing/index.cjs"
+    },
+    "./testing/vitest": {
+      types: "./dist/testing/vitest.d.ts",
+      import: "./dist/testing/vitest.mjs",
+      require: "./dist/testing/vitest.cjs"
+    },
+    "./testing/jest": {
+      types: "./dist/testing/jest.d.ts",
+      import: "./dist/testing/jest.mjs",
+      require: "./dist/testing/jest.cjs"
+    },
+    "./codegen": {
+      types: "./dist/codegen.d.ts",
+      import: "./dist/codegen.mjs",
+      require: "./dist/codegen.cjs"
+    },
+    "./ui/styles.css": "./dist/ui/styles.css",
+    "./schema/extension-v2.json": "./schema/extension-v2.json",
+    "./package.json": "./package.json"
+  },
+  engines: {
+    node: ">=20"
+  },
+  main: "./dist/index.cjs",
+  module: "./dist/index.mjs",
+  types: "./dist/index.d.ts",
+  sideEffects: [
+    "*.css",
+    "./dist/testing/vitest.*",
+    "./dist/testing/jest.*"
+  ],
+  files: [
+    "dist",
+    "schema"
+  ],
+  repository: {
+    type: "git",
+    url: "https://github.com/tappify-dev/extension-sdk.git"
+  },
+  bugs: {
+    url: "https://github.com/tappify-dev/extension-sdk/issues"
+  },
+  homepage: "https://docs.tappify.ai/extensions",
+  keywords: [
+    "tappify",
+    "extension",
+    "extension-sdk",
+    "react",
+    "module-federation"
+  ],
+  scripts: {
+    build: "rm -rf dist && tsup && node scripts/copy-styles.mjs",
+    "build:schema": "tsx scripts/build-json-schema.ts",
+    "build:manifest-reference": "tsx scripts/build-manifest-reference.ts",
+    "build:api-reference": "tsx scripts/build-api-reference.ts",
+    "check:hosted-schema": "node scripts/check-hosted-schema.mjs",
+    "docs:examples": "tsx scripts/check-tsdoc-examples.ts && tsc -p tsconfig.examples.json",
+    "docs:validate": "typedoc --options typedoc.frontend.json --emit none && typedoc --options typedoc.server.json --emit none && typedoc --options typedoc.testing.json --emit none",
+    "docs:reference": "pnpm docs:examples && pnpm docs:validate && pnpm build:schema && pnpm build:manifest-reference && pnpm build:api-reference",
+    dev: "tsup --watch",
+    "type-check": "tsc --noEmit",
+    format: 'prettier --write "src/**/*.{ts,tsx}" "test/**/*.{ts,tsx}" "*.{json,md,mjs,cjs}"',
+    "format:check": 'prettier --check "src/**/*.{ts,tsx}" "test/**/*.{ts,tsx}" "*.{json,md,mjs,cjs}"',
+    lint: 'eslint "{src,test}/**/*.{ts,tsx}" --fix',
+    test: "vitest run --passWithNoTests --coverage",
+    "test:watch": "vitest --watch",
+    prepare: "husky",
+    commit: "cz",
+    prepublishOnly: "npm run build && npm test",
+    spellcheck: 'cspell "src/**/*.{ts,tsx}" "test/**/*.{ts,tsx}" "*.{json,md,yml,mjs,cjs}" ".github/**/*.yml"',
+    "semantic-release": "semantic-release"
+  },
+  peerDependencies: {
+    "@module-federation/vite": ">=1.16.0",
+    "@tanstack/react-query": "^5.100.0",
+    "@testing-library/react": ">=16.0.0",
+    react: "^19.0.0",
+    "react-dom": "^19.0.0",
+    vite: ">=8.0.0",
+    vitest: ">=3.0.0"
+  },
+  peerDependenciesMeta: {
+    "@module-federation/vite": {
+      optional: true
+    },
+    "@tanstack/react-query": {
+      optional: true
+    },
+    "@testing-library/react": {
+      optional: true
+    },
+    react: {
+      optional: true
+    },
+    "react-dom": {
+      optional: true
+    },
+    vite: {
+      optional: true
+    },
+    vitest: {
+      optional: true
+    }
+  },
+  dependencies: {
+    "@module-federation/runtime": "~2.5.1",
+    clsx: "^2.1.1",
+    jose: "^6.2.12",
+    "json-schema-to-typescript": "^16.0.0",
+    zod: "^4.3.6"
+  },
+  devDependencies: {
+    "@commitlint/cli": "^20.4.3",
+    "@commitlint/config-conventional": "^20.4.3",
+    "@eslint/js": "^10.0.1",
+    "@module-federation/vite": "~1.16.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.5",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@tanstack/react-query": "^5.100.14",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/json-schema": "^7.0.15",
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.7",
+    "@vitest/coverage-v8": "^3.0.0",
+    commitizen: "^4.3.1",
+    "conventional-changelog-conventionalcommits": "^9.3.0",
+    cspell: "^9.7.0",
+    "cz-conventional-changelog": "^3.3.0",
+    eslint: "^10.0.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    globals: "^17.4.0",
+    "happy-dom": "^17.0.0",
+    husky: "^9.1.7",
+    "lint-staged": "^16.3.2",
+    prettier: "^3.8.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    react: "^19.0.0",
+    "react-dom": "^19.0.0",
+    "semantic-release": "^25.0.3",
+    tsup: "^8.3.0",
+    tsx: "^4.20.0",
+    typedoc: "^0.28.20",
+    "typedoc-plugin-markdown": "^4.13.0",
+    typescript: "^5.7.0",
+    "typescript-eslint": "^8.56.1",
+    vite: "^8.0.14",
+    vitest: "^3.0.0"
+  },
+  config: {
+    commitizen: {
+      path: "cz-conventional-changelog",
+      types: {
+        feat: {
+          description: "New feature",
+          title: "Features"
+        },
+        fix: {
+          description: "Bug fix",
+          title: "Fixes"
+        },
+        docs: {
+          description: "Documentation changes",
+          title: "Documentation"
+        },
+        style: {
+          description: "Code style changes (formatting, etc.)",
+          title: "Styles"
+        },
+        refactor: {
+          description: "Code refactoring",
+          title: "Refactoring"
+        },
+        perf: {
+          description: "Performance improvements",
+          title: "Performance"
+        },
+        test: {
+          description: "Adding or updating tests",
+          title: "Tests"
+        },
+        build: {
+          description: "Build system or dependencies",
+          title: "Build"
+        },
+        ci: {
+          description: "CI/CD changes",
+          title: "CI/CD"
+        },
+        chore: {
+          description: "Chore",
+          title: "Chores"
+        },
+        revert: {
+          description: "Revert previous commit",
+          title: "Reverts"
+        },
+        wip: {
+          description: "Work in progress / continuing a feature",
+          title: "Work in Progress"
+        },
+        cont: {
+          description: "Continue/complete a feature",
+          title: "Continue Feature"
+        },
+        improve: {
+          description: "Small improvements or enhancements",
+          title: "Improvements"
+        }
+      }
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write",
+      "cspell --no-must-find-files"
+    ],
+    "*.{json,md}": [
+      "prettier --write",
+      "cspell --no-must-find-files"
+    ]
+  }
+};
+
+// src/vite/preview/error-boundary.tsx
+
+
+var PreviewErrorBoundary = class extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(_error, _info) {
+  }
+  render() {
+    if (this.state.error !== null) {
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tap-preview-message", role: "alert", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: "The contribution could not render." }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: this.state.error.message })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// src/vite/preview/model.ts
+var kindLabel = {
+  page: "page",
+  tab: "tab",
+  widget: "widget",
+  rowAction: "row action",
+  settings: "settings"
+};
+function titleByExpose(manifest) {
+  const titles = /* @__PURE__ */ new Map();
+  const contributes = manifest.contributes;
+  for (const page of _nullishCoalesce(contributes.pages, () => ( []))) {
+    titles.set(`./pages/${page.id}`, page.title);
+  }
+  for (const tab of _nullishCoalesce(contributes.tabs, () => ( []))) {
+    titles.set(`./tabs/${tab.id}`, tab.title);
+  }
+  for (const widget of _nullishCoalesce(contributes.widgets, () => ( []))) {
+    titles.set(`./widgets/${widget.id}`, widget.title);
+  }
+  for (const action of _nullishCoalesce(contributes.rowActions, () => ( []))) {
+    titles.set(`./rowActions/${action.id}`, action.title);
+  }
+  if (contributes.settings) titles.set("./settings", "Settings");
+  return titles;
+}
+function previewSelections(manifest) {
+  const titles = titleByExpose(manifest);
+  return _chunkNN263PGQcjs.uiContributions.call(void 0, manifest).map((contribution) => {
+    const title = _nullishCoalesce(titles.get(contribution.expose), () => ( contribution.id));
+    return {
+      contribution,
+      label: contribution.kind === "settings" ? title : `${title} (${kindLabel[contribution.kind]})`
+    };
+  });
+}
+function previewProps(contribution, state) {
+  switch (contribution.kind) {
+    case "page":
+      return { params: { pageId: contribution.id, path: "/" } };
+    case "tab":
+      return {};
+    case "widget":
+      return { config: {} };
+    case "rowAction":
+      return { row: { ..._chunkBPCGXXMDcjs.fixtureKeywords[0] } };
+    case "settings":
+      return {
+        values: state.settings,
+        onChange: (values) => state.onSettingsChange(values)
+      };
+  }
+}
+
+// src/vite/preview/styles.ts
+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;
+}
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; background: #f2f3ee; }
+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-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-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-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); }
+@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%; }
+}
+`;
+
+// src/vite/preview/client.tsx
+
+var SINGLETON = { singleton: true, requiredVersion: false };
+var federationInstances = /* @__PURE__ */ new Map();
+var federationSequence = 0;
+async function federationFor(extensionId, remote) {
+  const key = `${extensionId}|${remote}`;
+  const existing = federationInstances.get(key);
+  if (existing !== void 0) return existing;
+  federationSequence += 1;
+  const name = _chunkNN263PGQcjs.remoteName.call(void 0, extensionId);
+  const created = Promise.resolve().then(() => _interopRequireWildcard(require("@module-federation/runtime"))).then(
+    ({ createInstance }) => createInstance({
+      name: `tappify_local_preview_${String(federationSequence)}`,
+      remotes: [{ name, alias: name, entry: remote, type: "module" }],
+      shared: {
+        react: {
+          version: React.version,
+          lib: () => React,
+          shareConfig: SINGLETON
+        },
+        "react-dom": {
+          version: ReactDom.version,
+          lib: () => ReactDom,
+          shareConfig: SINGLETON
+        },
+        "react/jsx-runtime": {
+          version: React.version,
+          lib: () => JsxRuntime,
+          shareConfig: SINGLETON
+        },
+        "@tanstack/react-query": {
+          version: package_default.peerDependencies["@tanstack/react-query"].replace(/^[^\d]*/, ""),
+          lib: () => TanstackQuery,
+          shareConfig: SINGLETON
+        },
+        "@tappify/extension-sdk": {
+          version: package_default.version,
+          lib: () => _chunkONJMPO3Pcjs.src_exports,
+          shareConfig: SINGLETON
+        }
+      }
+    })
+  );
+  federationInstances.set(key, created);
+  return created;
+}
+function componentFromModule(module, expose) {
+  const candidate = typeof module === "object" && module !== null && "default" in module ? module.default : module;
+  if (typeof candidate !== "function") {
+    throw new Error(
+      `${expose} did not default-export a React component. Export the contribution component as default.`
+    );
+  }
+  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,
+  expose
+}) {
+  const federation = await federationFor(extensionId, remote);
+  return federation.loadRemote(
+    `${_chunkNN263PGQcjs.remoteName.call(void 0, extensionId)}/${expose.replace(/^\.\//, "")}`
+  );
+}
+function isExternalRemote(remote) {
+  try {
+    const host = new URL(remote).hostname;
+    return host !== "localhost" && host !== "127.0.0.1" && host !== "[::1]";
+  } catch (e) {
+    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
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tap-preview-message", role: "status", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { children: title }),
+    /* @__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,
+  loader = loadContribution
+}) {
+  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]), () => ( ""))
+  );
+  const [theme, setTheme] = _react.useState.call(void 0, "light");
+  const [viewport, setViewport] = _react.useState.call(void 0, "desktop");
+  const [size, setSize] = _react.useState.call(void 0, "slot");
+  const [generation, setGeneration] = _react.useState.call(void 0, 0);
+  const [settings, setSettings] = _react.useState.call(void 0, {});
+  const [loaded, setLoaded] = _react.useState.call(void 0, {
+    key: "",
+    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]), () => ( ""))}`;
+  _react.useEffect.call(void 0, () => {
+    if (contribution === void 0) return;
+    let cancelled = false;
+    setLoaded({ key: loadKey, status: "loading" });
+    void loader({
+      extensionId: manifest.id,
+      remote,
+      expose: contribution.expose
+    }).then((module) => {
+      if (cancelled) return;
+      setLoaded({
+        key: loadKey,
+        status: "ready",
+        Component: componentFromModule(module, contribution.expose),
+        styles: stylesFromModule(module)
+      });
+    }).catch((error) => {
+      if (cancelled) return;
+      setLoaded({
+        key: loadKey,
+        status: "failed",
+        message: error instanceof Error ? error.message : "The remote entry could not be loaded."
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [contribution, loadKey, loader, manifest.id, remote]);
+  const host = _react.useMemo.call(void 0, () => {
+    void generation;
+    return _chunkBPCGXXMDcjs.createTapMock.call(void 0, {
+      extensionId: manifest.id,
+      extensionName: manifest.name,
+      project: _chunkBPCGXXMDcjs.fixtures.project.project,
+      theme,
+      size,
+      server: localProcedureStubs(manifest)
+    });
+  }, [generation, manifest, size, theme]);
+  const queryClient = _react.useMemo.call(void 0, () => {
+    void generation;
+    return _chunkVV7ELNRWcjs.createHostQueryClient.call(void 0, );
+  }, [generation]);
+  const current = loaded.key === loadKey ? loaded : { key: loadKey, status: "loading" };
+  let content;
+  if (contribution === void 0) {
+    content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { title: "No UI contributions", children: "Run `tappify extension add` and choose a page, tab, widget, row action, or settings panel." });
+  } else if (current.status === "failed") {
+    content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "tap-preview-message", role: "alert", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: "The remote entry could not load." }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: current.message })
+    ] });
+  } else if (current.status === "ready") {
+    const Component2 = current.Component;
+    const props = previewProps(contribution, {
+      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)}`) }) });
+  } else {
+    content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Message, { title: "Loading contribution", children: [
+      "Loading ",
+      selection.label,
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "main", { className: "tap-preview", "data-theme": theme, children: [
+    /* @__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.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" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            className: "tap-preview-reset",
+            type: "button",
+            "aria-label": "Reset fixtures",
+            onClick: () => {
+              setSettings({});
+              setGeneration((value) => value + 1);
+            },
+            children: "Reset"
+          }
+        )
+      ] })
+    ] }),
+    /* @__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
+      }
+    ) })
+  ] });
+}
+
+// src/vite-preview.tsx
+
+function mountLocalPreview({
+  manifest,
+  remote,
+  mount
+}) {
+  const root = _client.createRoot.call(void 0, mount);
+  root.render(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LocalPreview, { manifest, remote }));
+  return () => root.unmount();
+}
+
+
+
+
+
+exports.LocalPreview = LocalPreview; exports.componentFromModule = componentFromModule; exports.loadContribution = loadContribution; exports.mountLocalPreview = mountLocalPreview;
+//# sourceMappingURL=vite-preview.cjs.map