@saastro/studio 0.1.7 → 0.3.0

package/dist/chunk-D7L6LF5V.js

@@ -0,0 +1,62 @@
+// src/vite/meta-tag.ts
+var STUDIO_PROTOCOL_VERSION = "2";
+var PACKAGE_VERSION = "0.3.0".length > 0 ? "0.3.0" : "0.0.0+unknown";
+var META_TAGS = [
+  `<meta name="saastro:studio-version" content="${STUDIO_PROTOCOL_VERSION}">`,
+  `<meta name="saastro:studio-package" content="${PACKAGE_VERSION}">`
+].join("\n  ");
+function injectVersionMetaTag(html) {
+  if (html.includes("saastro:studio-version")) return html;
+  return html.replace(/<head([^>]*)>/i, `<head$1>
+  ${META_TAGS}`);
+}
+
+// src/visibility-css.ts
+import { readFileSync } from "fs";
+import { resolve } from "path";
+var CONFIG_FILENAME = "studio.config.json";
+var STYLE_ID = "saastro-studio-hidden";
+function readVisibilityConfig(projectRoot = ".") {
+  try {
+    const raw = readFileSync(resolve(projectRoot, CONFIG_FILENAME), "utf8");
+    if (!raw.trim()) return {};
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object") return parsed;
+    return {};
+  } catch {
+    return {};
+  }
+}
+function collectHiddenFieldPrefixes(config) {
+  const set = /* @__PURE__ */ new Set();
+  for (const prefixes of Object.values(config.hidden ?? {})) {
+    if (!Array.isArray(prefixes)) continue;
+    for (const p of prefixes) {
+      if (typeof p === "string" && p.length > 0) set.add(p);
+    }
+  }
+  return Array.from(set).sort();
+}
+function buildVisibilityStyleTag(config) {
+  const prefixes = collectHiddenFieldPrefixes(config);
+  if (prefixes.length === 0) return "";
+  const rules = prefixes.map((fp) => {
+    const safe = `sec:${fp}`.replace(/["\\]/g, "\\$&");
+    return `[data-saastro="${safe}"]{display:none !important}`;
+  }).join("");
+  return `<style id="${STYLE_ID}">${rules}</style>`;
+}
+function injectVisibilityStyle(html, projectRoot = ".") {
+  if (html.includes(`id="${STYLE_ID}"`)) return html;
+  const config = readVisibilityConfig(projectRoot);
+  const tag = buildVisibilityStyleTag(config);
+  if (!tag) return html;
+  return html.replace(/<head([^>]*)>/i, `<head$1>
+  ${tag}`);
+}
+
+export {
+  injectVersionMetaTag,
+  injectVisibilityStyle
+};
+//# sourceMappingURL=chunk-D7L6LF5V.js.map

package/dist/chunk-D7L6LF5V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vite/meta-tag.ts","../src/visibility-css.ts"],"sourcesContent":["/**\n * Injects two meta tags into the HTML <head>:\n *   - <meta name=\"saastro:studio-version\" content=\"2\">       — protocol version\n *   - <meta name=\"saastro:studio-package\" content=\"X.Y.Z\">  — npm package version\n *\n * B8 — spec v5.3 §2 bumps the postMessage protocol number to \"2\". The\n * `studio-version` field reads as the PROTOCOL version (the contract Hub\n * relies on when wiring overlay <-> host messages), not the npm package\n * version of `@saastro/studio`. The package version still ships in a\n * separate `saastro:studio-package` tag for telemetry.\n *\n * The package version comes from a tsup `define` substitution\n * (`__SAASTRO_STUDIO_VERSION__`) injected at build time. The previous\n * implementation used `createRequire(import.meta.url)` to read\n * `package.json` at runtime, but tsup's chunked output places dist\n * files at `dist/chunk-XXX.js` and `../../package.json` resolves\n * OUTSIDE the package — the require always threw and the catch fell\n * back to a hardcoded `'0.1.0'`. Build-time substitution is bullet-\n * proof regardless of how tsup chunks the bundle.\n *\n * This is separate from the auto-wrap transform hook —\n * transformIndexHtml runs on rendered HTML output, not on .astro\n * source files.\n */\n\n/**\n * postMessage protocol version. Bumped to \"2\" in spec v5.3 to add\n * `studio:sections:enumerate` + `studio:select:section` exchanges.\n * Increment when adding/changing the iframe⇄host wire format.\n */\nconst STUDIO_PROTOCOL_VERSION = '2'\n\ndeclare const __SAASTRO_STUDIO_VERSION__: string | undefined\n\nconst PACKAGE_VERSION =\n  typeof __SAASTRO_STUDIO_VERSION__ === 'string' && __SAASTRO_STUDIO_VERSION__.length > 0\n    ? __SAASTRO_STUDIO_VERSION__\n    : '0.0.0+unknown'\n\nconst META_TAGS = [\n  `<meta name=\"saastro:studio-version\" content=\"${STUDIO_PROTOCOL_VERSION}\">`,\n  `<meta name=\"saastro:studio-package\" content=\"${PACKAGE_VERSION}\">`,\n].join('\\n  ')\n\n/**\n * Inject the two studio meta tags into the HTML head. Idempotent —\n * skips injection if the protocol-version tag is already present\n * (matches both the new shape and the legacy single-tag shape, so\n * customer sites with old metadata aren't double-tagged on rebuild).\n */\nexport function injectVersionMetaTag(html: string): string {\n  if (html.includes('saastro:studio-version')) return html\n  return html.replace(/<head([^>]*)>/i, `<head$1>\\n  ${META_TAGS}`)\n}\n","/**\n * Read `studio.config.json` from a project root and build the\n * `<style>` block that hides sections flagged as `hidden`.\n *\n * The config shape is the one written by the Studio Hub at publish time:\n *\n *   {\n *     \"hidden\": {\n *       \"<pageFile>\": [\"<fieldPrefix>\", ...]\n *     }\n *   }\n *\n * The CSS targets the `data-saastro=\"sec:<fieldPrefix>\"` markers the\n * auto-wrap plugin emits — so hiding is \"exactly the section root,\n * nothing more\". Selectors are flattened across all `pageFile` entries:\n * Studio's `fieldPrefix` naming convention is `<sectionName>.<pageName>`\n * which keeps them unique site-wide, so this loses no precision.\n *\n * Both the Vite `transformIndexHtml` hook (static-build sites) and the\n * Astro middleware (SSR routes) call into the same helpers so the\n * injected CSS is identical regardless of render mode.\n */\n\nimport { readFileSync } from 'node:fs'\nimport { resolve } from 'node:path'\n\nconst CONFIG_FILENAME = 'studio.config.json'\nconst STYLE_ID = 'saastro-studio-hidden'\n\ninterface StudioConfig {\n  hidden?: Record<string, string[]>\n}\n\n/**\n * Read studio.config.json from `projectRoot`. Returns an empty config\n * if the file is missing or malformed — a publish that hasn't written\n * the config yet behaves like \"nothing hidden\".\n *\n * Defaulting `projectRoot` to `'.'` lets callers omit it when they\n * cannot easily determine the resolved Vite root — `node:path.resolve`\n * resolves relative to the current working directory, which is the\n * project root in every realistic deployment of the middleware.\n */\nexport function readVisibilityConfig(projectRoot: string = '.'): StudioConfig {\n  try {\n    const raw = readFileSync(resolve(projectRoot, CONFIG_FILENAME), 'utf8')\n    if (!raw.trim()) return {}\n    const parsed = JSON.parse(raw) as unknown\n    if (parsed && typeof parsed === 'object') return parsed as StudioConfig\n    return {}\n  } catch {\n    return {}\n  }\n}\n\n/**\n * Collect every fieldPrefix flagged as hidden across all pageFile\n * entries. Deduplicates so a prefix that appears under multiple\n * pageFiles only emits one selector.\n */\nexport function collectHiddenFieldPrefixes(config: StudioConfig): string[] {\n  const set = new Set<string>()\n  for (const prefixes of Object.values(config.hidden ?? {})) {\n    if (!Array.isArray(prefixes)) continue\n    for (const p of prefixes) {\n      if (typeof p === 'string' && p.length > 0) set.add(p)\n    }\n  }\n  return Array.from(set).sort()\n}\n\n/**\n * Build the `<style>` block. Returns an empty string when there's\n * nothing to hide so callers can no-op without conditional branching.\n */\nexport function buildVisibilityStyleTag(config: StudioConfig): string {\n  const prefixes = collectHiddenFieldPrefixes(config)\n  if (prefixes.length === 0) return ''\n  const rules = prefixes\n    .map(fp => {\n      // CSS attribute-selector grammar: only `\\` and `\"` need escaping\n      // inside `[attr=\"...\"]`. fieldPrefix is conventionally\n      // `[a-zA-Z0-9._-]+` so this is belt-and-braces.\n      const safe = `sec:${fp}`.replace(/[\"\\\\]/g, '\\\\$&')\n      return `[data-saastro=\"${safe}\"]{display:none !important}`\n    })\n    .join('')\n  return `<style id=\"${STYLE_ID}\">${rules}</style>`\n}\n\n/**\n * Inject the visibility `<style>` into an HTML document's `<head>`.\n * Idempotent: a page that already carries a `${STYLE_ID}` style is\n * returned unchanged.\n */\nexport function injectVisibilityStyle(html: string, projectRoot: string = '.'): string {\n  if (html.includes(`id=\"${STYLE_ID}\"`)) return html\n  const config = readVisibilityConfig(projectRoot)\n  const tag = buildVisibilityStyleTag(config)\n  if (!tag) return html\n  return html.replace(/<head([^>]*)>/i, `<head$1>\\n  ${tag}`)\n}\n"],"mappings":";AA8BA,IAAM,0BAA0B;AAIhC,IAAM,kBAC8C,QAA2B,SAAS,IAClF,UACA;AAEN,IAAM,YAAY;AAAA,EAChB,gDAAgD,uBAAuB;AAAA,EACvE,gDAAgD,eAAe;AACjE,EAAE,KAAK,MAAM;AAQN,SAAS,qBAAqB,MAAsB;AACzD,MAAI,KAAK,SAAS,wBAAwB,EAAG,QAAO;AACpD,SAAO,KAAK,QAAQ,kBAAkB;AAAA,IAAe,SAAS,EAAE;AAClE;;;AC9BA,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAExB,IAAM,kBAAkB;AACxB,IAAM,WAAW;AAgBV,SAAS,qBAAqB,cAAsB,KAAmB;AAC5E,MAAI;AACF,UAAM,MAAM,aAAa,QAAQ,aAAa,eAAe,GAAG,MAAM;AACtE,QAAI,CAAC,IAAI,KAAK,EAAG,QAAO,CAAC;AACzB,UAAM,SAAS,KAAK,MAAM,GAAG;AAC7B,QAAI,UAAU,OAAO,WAAW,SAAU,QAAO;AACjD,WAAO,CAAC;AAAA,EACV,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;AAOO,SAAS,2BAA2B,QAAgC;AACzE,QAAM,MAAM,oBAAI,IAAY;AAC5B,aAAW,YAAY,OAAO,OAAO,OAAO,UAAU,CAAC,CAAC,GAAG;AACzD,QAAI,CAAC,MAAM,QAAQ,QAAQ,EAAG;AAC9B,eAAW,KAAK,UAAU;AACxB,UAAI,OAAO,MAAM,YAAY,EAAE,SAAS,EAAG,KAAI,IAAI,CAAC;AAAA,IACtD;AAAA,EACF;AACA,SAAO,MAAM,KAAK,GAAG,EAAE,KAAK;AAC9B;AAMO,SAAS,wBAAwB,QAA8B;AACpE,QAAM,WAAW,2BAA2B,MAAM;AAClD,MAAI,SAAS,WAAW,EAAG,QAAO;AAClC,QAAM,QAAQ,SACX,IAAI,QAAM;AAIT,UAAM,OAAO,OAAO,EAAE,GAAG,QAAQ,UAAU,MAAM;AACjD,WAAO,kBAAkB,IAAI;AAAA,EAC/B,CAAC,EACA,KAAK,EAAE;AACV,SAAO,cAAc,QAAQ,KAAK,KAAK;AACzC;AAOO,SAAS,sBAAsB,MAAc,cAAsB,KAAa;AACrF,MAAI,KAAK,SAAS,OAAO,QAAQ,GAAG,EAAG,QAAO;AAC9C,QAAM,SAAS,qBAAqB,WAAW;AAC/C,QAAM,MAAM,wBAAwB,MAAM;AAC1C,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,KAAK,QAAQ,kBAAkB;AAAA,IAAe,GAAG,EAAE;AAC5D;","names":[]}

package/dist/{chunk-5LJXT5GH.js → chunk-LKNB6JHI.js}

@@ -1,33 +1,11 @@
 import {
-  injectVersionMetaTag
-} from "./chunk-3LBSAZCN.js";
+  injectVersionMetaTag,
+  injectVisibilityStyle
+} from "./chunk-D7L6LF5V.js";
 
 // src/vite/index.ts
 import { promises as fs } from "fs";
 
-// src/vite/auto-wrap.ts
-var FRONTMATTER_RE = /^\s*---\s*\n([\s\S]*?)\n---\s*\n/;
-var SAASTRO_ATTR_RE = /data-saastro/;
-var FIELD_PREFIX_REFERENCE_RE = /\bfieldPrefix\b/;
-var FIRST_OPEN_TAG_RE = /<([a-zA-Z][a-zA-Z0-9]*)\b([^<>]*?)\s*(\/?)>/;
-var INJECTION = ' {...(fieldPrefix ? { "data-saastro": `sec:${fieldPrefix}`, draggable: "true" } : {})}';
-function transformAstroSource(source) {
-  const fm = FRONTMATTER_RE.exec(source);
-  if (!fm) return source;
-  if (!FIELD_PREFIX_REFERENCE_RE.test(fm[1])) return source;
-  const template = source.slice(fm[0].length);
-  const tagMatch = FIRST_OPEN_TAG_RE.exec(template);
-  if (!tagMatch) return source;
-  const tagName = tagMatch[1];
-  if (tagName[0] !== tagName[0].toLowerCase()) return source;
-  const existingAttrs = tagMatch[2];
-  if (SAASTRO_ATTR_RE.test(existingAttrs)) return source;
-  const selfClose = tagMatch[3];
-  const replacement = `<${tagName}${existingAttrs}${INJECTION}${selfClose ? " " + selfClose : ""}>`;
-  const templateInjected = template.slice(0, tagMatch.index) + replacement + template.slice(tagMatch.index + tagMatch[0].length);
-  return source.slice(0, fm[0].length) + templateInjected;
-}
-
 // ../studio-core/dist/component-schema/index.js
 import {
   Project
@@ -47,11 +25,135 @@ var STUDIO_DIRECTIVE_KINDS = /* @__PURE__ */ new Set([
 var STUDIO_DIRECTIVE_RE = /@studio:([A-Za-z][A-Za-z0-9-]*)/g;
 var IMAGE_NAME_HINTS = /(^|_)(image|img|avatar|logo|icon|thumbnail|photo|picture|cover|background)($|_)/i;
 var IMAGE_SUFFIX_HINTS = /_(url|src)$/i;
-var FRONTMATTER_RE2 = /^\s*---\s*\n([\s\S]*?)\n---/;
+var FRONTMATTER_RE = /^\s*---\s*\n([\s\S]*?)\n---/;
 function extractFrontmatter(astroSource) {
-  const m = FRONTMATTER_RE2.exec(astroSource);
+  const m = FRONTMATTER_RE.exec(astroSource);
   return m ? m[1] ?? "" : null;
 }
+function extractPropsTypeBlock(tsxSource) {
+  const interfaceRe = /\b(?:export\s+)?interface\s+([A-Za-z_$][\w$]*)\s*\{/g;
+  const typeRe = /\b(?:export\s+)?type\s+([A-Za-z_$][\w$]*)\s*=\s*\{/g;
+  let match;
+  while ((match = interfaceRe.exec(tsxSource)) !== null) {
+    const name = match[1];
+    if (name === "Props" || name.endsWith("Props")) {
+      const braceOpenIdx = tsxSource.indexOf("{", match.index);
+      if (braceOpenIdx === -1) continue;
+      const close = readBalancedBrace(tsxSource, braceOpenIdx);
+      if (close === null) continue;
+      const block = tsxSource.slice(match.index, close + 1);
+      return normalizeInterfaceName(block, name);
+    }
+  }
+  while ((match = typeRe.exec(tsxSource)) !== null) {
+    const name = match[1];
+    if (name === "Props" || name.endsWith("Props")) {
+      const braceOpenIdx = tsxSource.indexOf("{", match.index);
+      if (braceOpenIdx === -1) continue;
+      const close = readBalancedBrace(tsxSource, braceOpenIdx);
+      if (close === null) continue;
+      const block = tsxSource.slice(match.index, close + 1);
+      return normalizeTypeAliasName(block, name);
+    }
+  }
+  return null;
+}
+function normalizeInterfaceName(block, name) {
+  if (name === "Props") return block;
+  return block.replace(/^(\s*(?:export\s+)?interface\s+)[A-Za-z_$][\w$]*/, "$1Props");
+}
+function normalizeTypeAliasName(block, name) {
+  if (name === "Props") return block;
+  return block.replace(/^(\s*(?:export\s+)?type\s+)[A-Za-z_$][\w$]*/, "$1Props");
+}
+function readBalancedBrace(s, open) {
+  if (s[open] !== "{") return null;
+  let depth = 0;
+  let i = open;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === '"' || ch === "'" || ch === "`") {
+      i = skipStringLiteral(s, i) + 1;
+      continue;
+    }
+    if (ch === "/" && s[i + 1] === "/") {
+      const eol = s.indexOf("\n", i + 2);
+      i = eol === -1 ? s.length : eol + 1;
+      continue;
+    }
+    if (ch === "/" && s[i + 1] === "*") {
+      const end = s.indexOf("*/", i + 2);
+      i = end === -1 ? s.length : end + 2;
+      continue;
+    }
+    if (ch === "{") depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) return i;
+    }
+    i++;
+  }
+  return null;
+}
+function skipStringLiteral(s, start) {
+  const quote = s[start];
+  let i = start + 1;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === "\\") {
+      i += 2;
+      continue;
+    }
+    if (quote === "`" && ch === "$" && s[i + 1] === "{") {
+      const close = readBalancedBrace(s, i + 1);
+      if (close === null) return s.length - 1;
+      i = close + 1;
+      continue;
+    }
+    if (ch === quote) return i;
+    i++;
+  }
+  return s.length - 1;
+}
+function extractAllTypeBlocks(tsxSource) {
+  const blocks = [];
+  const seen = /* @__PURE__ */ new Set();
+  const decl = /\b(?:export\s+)?(?:interface|type)\s+[A-Za-z_$][\w$]*/g;
+  let m;
+  while ((m = decl.exec(tsxSource)) !== null) {
+    const start = m.index;
+    if (seen.has(start)) continue;
+    seen.add(start);
+    const isType = /\btype\b/.test(m[0]);
+    const braceOpen = tsxSource.indexOf("{", start);
+    if (braceOpen < 0) continue;
+    const between = tsxSource.slice(start + m[0].length, braceOpen);
+    if (!/^[\s=]*(?:extends\s+[^{]+)?$/.test(between)) continue;
+    const close = readBalancedBrace(tsxSource, braceOpen);
+    if (close === null) continue;
+    let block = tsxSource.slice(start, close + 1);
+    if (isType) {
+      if (!block.trimEnd().endsWith(";")) block = block + ";";
+    }
+    blocks.push(block);
+    decl.lastIndex = close + 1;
+  }
+  return blocks;
+}
+function extractComponentSchemaFromTsx(tsxSource, options = {}) {
+  const propsBlock = extractPropsTypeBlock(tsxSource);
+  if (!propsBlock) return null;
+  const allBlocks = extractAllTypeBlocks(tsxSource);
+  const siblings = allBlocks.filter((b) => !looksLikeProps(b));
+  const synthetic = `---
+` + [...siblings, propsBlock].join("\n\n") + `
+---
+`;
+  return extractComponentSchema(synthetic, options);
+}
+function looksLikeProps(block) {
+  return /^\s*(?:export\s+)?(?:interface|type)\s+(?:Props\b|[A-Za-z_$][\w$]*Props\b)/.test(block);
+}
 function extractComponentSchema(astroSource, options = {}) {
   const frontmatter = extractFrontmatter(astroSource);
   if (frontmatter == null) return null;
@@ -385,6 +487,29 @@ function parseLiteral(rhs) {
   return trimmed;
 }
 
+// src/vite/auto-wrap.ts
+var FRONTMATTER_RE2 = /^\s*---\s*\n([\s\S]*?)\n---\s*\n/;
+var SAASTRO_ATTR_RE = /data-saastro/;
+var FIELD_PREFIX_REFERENCE_RE = /\bfieldPrefix\b/;
+var FIRST_OPEN_TAG_RE = /<([a-zA-Z][a-zA-Z0-9]*)\b([^<>]*?)\s*(\/?)>/;
+var INJECTION = ' {...(fieldPrefix ? { "data-saastro": `sec:${fieldPrefix}`, draggable: "true" } : {})}';
+function transformAstroSource(source) {
+  const fm = FRONTMATTER_RE2.exec(source);
+  if (!fm) return source;
+  if (!FIELD_PREFIX_REFERENCE_RE.test(fm[1])) return source;
+  const template = source.slice(fm[0].length);
+  const tagMatch = FIRST_OPEN_TAG_RE.exec(template);
+  if (!tagMatch) return source;
+  const tagName = tagMatch[1];
+  if (tagName[0] !== tagName[0].toLowerCase()) return source;
+  const existingAttrs = tagMatch[2];
+  if (SAASTRO_ATTR_RE.test(existingAttrs)) return source;
+  const selfClose = tagMatch[3];
+  const replacement = `<${tagName}${existingAttrs}${INJECTION}${selfClose ? " " + selfClose : ""}>`;
+  const templateInjected = template.slice(0, tagMatch.index) + replacement + template.slice(tagMatch.index + tagMatch[0].length);
+  return source.slice(0, fm[0].length) + templateInjected;
+}
+
 // src/vite/extract-props-schema.ts
 var CACHE_MAX = 500;
 var cache = /* @__PURE__ */ new Map();
@@ -502,6 +627,11 @@ function instrumentFields(source, schema, _options = {}) {
   const transformed = transformTemplate(head, schema.fields);
   return source.slice(0, templateStart) + transformed + tail;
 }
+function instrumentJsxFields(source, schema, _options = {}) {
+  if (!schema.fields.length) return source;
+  if (!/<[A-Za-z]/.test(source)) return source;
+  return transformTemplate(source, schema.fields);
+}
 function transformTemplate(template, fields) {
   let out = template;
   for (const field of fields) {
@@ -761,14 +891,81 @@ function stampArrayItem(jsx, fieldName, paramName, subFields) {
   return out;
 }
 function stampOuterElement(jsx, valueExpr) {
-  const m = /<([A-Za-z][A-Za-z0-9]*)\b([^<>]*?)(\/?)>/.exec(jsx);
-  if (!m) return jsx;
-  if (/data-saastro-field/.test(m[2])) return jsx;
-  const tag = m[1];
-  const attrs = m[2];
-  const selfClose = m[3];
-  const replacement = `<${tag}${attrs} data-saastro-field=${valueExpr}${selfClose}>`;
-  return jsx.slice(0, m.index) + replacement + jsx.slice(m.index + m[0].length);
+  const start = jsx.search(/<[A-Za-z]/);
+  if (start < 0) return jsx;
+  const tagInfo = readOpeningTag(jsx, start);
+  if (!tagInfo) return jsx;
+  if (/data-saastro-field/.test(tagInfo.attrs)) return jsx;
+  const inject = ` data-saastro-field=${valueExpr}`;
+  const insertAt = start + 1 + tagInfo.tag.length;
+  return jsx.slice(0, insertAt) + inject + jsx.slice(insertAt);
+}
+function readOpeningTag(s, start) {
+  if (s[start] !== "<") return null;
+  const nameMatch = /^[A-Za-z][A-Za-z0-9]*/.exec(s.slice(start + 1));
+  if (!nameMatch) return null;
+  const tag = nameMatch[0];
+  let i = start + 1 + tag.length;
+  const attrsStart = i;
+  let inString = null;
+  let braceDepth = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (inString) {
+      if (ch === "\\") {
+        i += 2;
+        continue;
+      }
+      if (inString === "`" && ch === "$" && s[i + 1] === "{") {
+        const close = readBalanced(s, i + 1, "{", "}");
+        if (close == null) return null;
+        i = close + 1;
+        continue;
+      }
+      if (ch === inString) inString = null;
+      i++;
+      continue;
+    }
+    if (braceDepth > 0) {
+      if (ch === '"' || ch === "'" || ch === "`") {
+        inString = ch;
+        i++;
+        continue;
+      }
+      if (ch === "{") braceDepth++;
+      else if (ch === "}") braceDepth--;
+      i++;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === "`") {
+      inString = ch;
+      i++;
+      continue;
+    }
+    if (ch === "{") {
+      braceDepth = 1;
+      i++;
+      continue;
+    }
+    if (ch === "/" && s[i + 1] === ">") {
+      return {
+        tag,
+        attrs: s.slice(attrsStart, i),
+        end: i + 2,
+        selfClose: true
+      };
+    }
+    if (ch === ">") {
+      return {
+        tag,
+        attrs: s.slice(attrsStart, i),
+        end: i + 1,
+        selfClose: false
+      };
+    }
+    i++;
+  }
+  return null;
 }
 function transformScalarField(template, name) {
   return transformDottedReference(template, name, null, JSON.stringify(name));
@@ -873,18 +1070,48 @@ function isInsideTag(s, pos) {
   return false;
 }
 function findEnclosingElement(s, pos) {
-  const tagRe = /<(\/?)([A-Za-z][A-Za-z0-9]*)\b([^<>]*?)(\/?)>/g;
   const tags = [];
-  let m;
-  while ((m = tagRe.exec(s)) !== null) {
-    tags.push({
-      isClose: m[1] === "/",
-      selfClose: m[4] === "/",
-      tagName: m[2],
-      attrs: m[3],
-      start: m.index,
-      end: m.index + m[0].length
-    });
+  for (let scan = 0; scan < s.length; ) {
+    const lt = s.indexOf("<", scan);
+    if (lt < 0) break;
+    const next = s[lt + 1];
+    if (next === "/") {
+      const nm = /^[A-Za-z][A-Za-z0-9]*/.exec(s.slice(lt + 2));
+      if (!nm) {
+        scan = lt + 1;
+        continue;
+      }
+      const gt = s.indexOf(">", lt + 2 + nm[0].length);
+      if (gt < 0) break;
+      tags.push({
+        isClose: true,
+        selfClose: false,
+        tagName: nm[0],
+        attrs: "",
+        start: lt,
+        end: gt + 1
+      });
+      scan = gt + 1;
+      continue;
+    }
+    if (typeof next === "string" && /[A-Za-z]/.test(next)) {
+      const ot = readOpeningTag(s, lt);
+      if (!ot) {
+        scan = lt + 1;
+        continue;
+      }
+      tags.push({
+        isClose: false,
+        selfClose: ot.selfClose,
+        tagName: ot.tag,
+        attrs: ot.attrs,
+        start: lt,
+        end: ot.end
+      });
+      scan = ot.end;
+      continue;
+    }
+    scan = lt + 1;
   }
   const stack = [];
   let bestOpen = null;
@@ -940,42 +1167,84 @@ function isMainAstroModule(id) {
   if (query && /[?&]astro([&=]|$)/.test(query)) return false;
   return true;
 }
+function isReactComponentModule(id) {
+  const { path, query } = splitId(id);
+  if (query) return false;
+  if (!/\.(tsx|jsx)$/.test(path)) return false;
+  if (/\.(test|spec|stories)\.[tj]sx$/.test(path)) return false;
+  return true;
+}
 function studioAutoWrap(opts = {}) {
   const enabled = opts.autoWrap === true;
-  const include = opts.include ?? ((id) => id.endsWith(".astro"));
+  const include = opts.include ?? defaultInclude;
+  const instrumentTsx = opts.instrumentTsx !== false;
+  let projectRoot;
   return {
     name: "@saastro/studio:auto-wrap",
     enforce: "pre",
+    configResolved(config) {
+      projectRoot = config.root;
+    },
     async load(id) {
       if (!enabled) return null;
-      if (!isMainAstroModule(id)) return null;
       const { path } = splitId(id);
-      if (!include(path)) return null;
-      let code;
-      try {
-        code = await fs.readFile(path, "utf8");
-      } catch {
-        return null;
+      if (isMainAstroModule(id)) {
+        if (!include(path)) return null;
+        return loadAstro(path);
       }
-      if (!hasFieldPrefixReference(code)) return null;
-      const wrapped = transformAstroSource(code);
-      const schema = extractPropsSchema(code, { componentPath: path });
-      let next = wrapped;
-      if (schema) {
-        next = injectSchema(next, schema);
-        next = instrumentFields(next, schema, { componentPath: path });
+      if (instrumentTsx && isReactComponentModule(id)) {
+        if (!include(path)) return null;
+        return loadTsx(path);
       }
-      if (next === code) return null;
-      return { code: next, map: null };
+      return null;
     },
     transformIndexHtml(html) {
       if (!enabled) return html;
-      return injectVersionMetaTag(html);
+      let next = injectVersionMetaTag(html);
+      next = injectVisibilityStyle(next, projectRoot);
+      return next;
     }
   };
 }
+var DEFAULT_INCLUDE_EXTS = /\.(astro|tsx|jsx)$/;
+function defaultInclude(id) {
+  return DEFAULT_INCLUDE_EXTS.test(id);
+}
+async function loadAstro(path) {
+  let code;
+  try {
+    code = await fs.readFile(path, "utf8");
+  } catch {
+    return null;
+  }
+  if (!hasFieldPrefixReference(code)) return null;
+  const wrapped = transformAstroSource(code);
+  const schema = extractPropsSchema(code, { componentPath: path });
+  let next = wrapped;
+  if (schema) {
+    next = injectSchema(next, schema);
+    next = instrumentFields(next, schema, { componentPath: path });
+  }
+  if (next === code) return null;
+  return { code: next, map: null };
+}
+async function loadTsx(path) {
+  let code;
+  try {
+    code = await fs.readFile(path, "utf8");
+  } catch {
+    return null;
+  }
+  if (!code.includes(".map(")) return null;
+  if (extractPropsTypeBlock(code) === null) return null;
+  const schema = extractComponentSchemaFromTsx(code, { componentPath: path });
+  if (!schema || !schema.fields.length) return null;
+  const next = instrumentJsxFields(code, schema, { componentPath: path });
+  if (next === code) return null;
+  return { code: next, map: null };
+}
 
 export {
   studioAutoWrap
 };
-//# sourceMappingURL=chunk-5LJXT5GH.js.map
+//# sourceMappingURL=chunk-LKNB6JHI.js.map