@_davideast/stitch-mcp 0.5.3 → 0.5.5

package/dist/chunk-d92ngrr6.js

@@ -0,0 +1,680 @@
+import {
+  openUrl,
+  require_jsx_dev_runtime
+} from "./chunk-x1tt02n9.js";
+import {
+  Box_default,
+  Text,
+  use_app_default,
+  use_input_default
+} from "./chunk-zcc6seqb.js";
+import {
+  require_react
+} from "./chunk-b43pzs3z.js";
+import {
+  copyJson,
+  copyText,
+  downloadAndCopyImage,
+  downloadAndCopyText
+} from "./chunk-fkzq5m59.js";
+import"./chunk-q6sv0243.js";
+import"./chunk-3sfn889r.js";
+import {
+  __toESM
+} from "./chunk-9wyra8hs.js";
+
+// src/ui/InteractiveViewer.tsx
+var import_react2 = __toESM(require_react(), 1);
+
+// src/ui/JsonTree.tsx
+var import_react = __toESM(require_react(), 1);
+
+// src/ui/copy-behaviors/handlers.ts
+var defaultCopyHandler = {
+  async copy(ctx) {
+    try {
+      await copyJson(ctx.value);
+      const preview = typeof ctx.value === "string" ? `"${ctx.value.slice(0, 50)}${ctx.value.length > 50 ? "..." : ""}"` : JSON.stringify(ctx.value).slice(0, 50);
+      return { success: true, message: `Copied: ${preview}` };
+    } catch (error) {
+      return { success: false, message: `Copy failed: ${error}` };
+    }
+  },
+  async copyExtended(ctx) {
+    try {
+      const obj = { [ctx.key]: ctx.value };
+      await copyJson(obj);
+      return { success: true, message: `Copied: { ${ctx.key}: ... }` };
+    } catch (error) {
+      return { success: false, message: `Copy failed: ${error}` };
+    }
+  }
+};
+var imageUrlCopyHandler = {
+  async copy(ctx) {
+    try {
+      if (typeof ctx.value !== "string") {
+        return { success: false, message: "Value is not a URL string" };
+      }
+      await copyText(ctx.value);
+      return { success: true, message: `Copied URL: ${ctx.value.slice(0, 60)}...` };
+    } catch (error) {
+      return { success: false, message: `Copy failed: ${error}` };
+    }
+  },
+  async copyExtended(ctx) {
+    try {
+      if (typeof ctx.value !== "string") {
+        return { success: false, message: "Value is not a URL string" };
+      }
+      ctx.onProgress?.("\uD83D\uDCF7 Downloading image...");
+      await downloadAndCopyImage(ctx.value);
+      return { success: true, message: "\uD83D\uDCF7 Image copied to clipboard!" };
+    } catch (error) {
+      return { success: false, message: `Image copy failed: ${error}` };
+    }
+  }
+};
+var htmlCodeCopyHandler = {
+  async copy(ctx) {
+    try {
+      if (typeof ctx.value !== "string") {
+        return { success: false, message: "Value is not a URL string" };
+      }
+      await copyText(ctx.value);
+      return { success: true, message: `Copied URL: ${ctx.value.slice(0, 60)}...` };
+    } catch (error) {
+      return { success: false, message: `Copy failed: ${error}` };
+    }
+  },
+  async copyExtended(ctx) {
+    try {
+      if (typeof ctx.value !== "string") {
+        return { success: false, message: "Value is not a URL string" };
+      }
+      ctx.onProgress?.("\uD83D\uDCDD Downloading HTML code...");
+      await downloadAndCopyText(ctx.value);
+      return { success: true, message: "\uD83D\uDCDD HTML code copied to clipboard!" };
+    } catch (error) {
+      return { success: false, message: `HTML copy failed: ${error}` };
+    }
+  }
+};
+
+// src/ui/copy-behaviors/registry.ts
+var registrations = [];
+function registerHandler(matcher, handler) {
+  registrations.push({ matcher, handler });
+}
+function getHandler(path) {
+  for (let i = registrations.length - 1;i >= 0; i--) {
+    const registration = registrations[i];
+    if (registration && registration.matcher(path)) {
+      return registration.handler;
+    }
+  }
+  return defaultCopyHandler;
+}
+function endsWith(suffix) {
+  return (path) => path.endsWith(suffix);
+}
+registerHandler(endsWith(".thumbnailScreenshot.downloadUrl"), imageUrlCopyHandler);
+registerHandler(endsWith(".screenshot.downloadUrl"), imageUrlCopyHandler);
+registerHandler(endsWith(".htmlCode.downloadUrl"), htmlCodeCopyHandler);
+
+// src/ui/navigation-behaviors/handler.ts
+function screenInstanceNavigationHandler(ctx) {
+  if (!ctx.path.includes("screenInstances")) {
+    return { shouldNavigate: false };
+  }
+  if (ctx.value && typeof ctx.value === "object" && ctx.value.sourceScreen) {
+    return {
+      shouldNavigate: true,
+      target: ctx.value.sourceScreen,
+      type: "screen"
+    };
+  }
+  if (ctx.key === "sourceScreen" && typeof ctx.value === "string") {
+    return {
+      shouldNavigate: true,
+      target: ctx.value,
+      type: "screen"
+    };
+  }
+  return { shouldNavigate: false };
+}
+var navigationHandlers = [
+  screenInstanceNavigationHandler
+];
+function getNavigationTarget(ctx) {
+  for (const handler of navigationHandlers) {
+    const result = handler(ctx);
+    if (result.shouldNavigate) {
+      return result;
+    }
+  }
+  return { shouldNavigate: false };
+}
+
+// src/ui/serve-behaviors/server.ts
+import { createServer } from "node:http";
+import { randomBytes } from "node:crypto";
+async function serveHtmlInMemory(html, options) {
+  const timeout = options?.timeout ?? 5 * 60 * 1000;
+  const openBrowser = options?.openBrowser ?? true;
+  return new Promise((resolve, reject) => {
+    const server = createServer((req, res) => {
+      const nonce = randomBytes(16).toString("base64");
+      const csp = [
+        "default-src 'self' data: https:;",
+        `script-src 'self' 'nonce-${nonce}';`,
+        "style-src 'self' 'unsafe-inline';",
+        "object-src 'none';",
+        "base-uri 'self';"
+      ].join(" ");
+      res.writeHead(200, {
+        "Content-Type": "text/html; charset=utf-8",
+        "Content-Security-Policy": csp,
+        "X-Content-Type-Options": "nosniff",
+        "Referrer-Policy": "no-referrer"
+      });
+      const htmlWithNonces = html.replace(/<script(\b[^>]*)>/gi, `<script$1 nonce="${nonce}">`);
+      res.end(htmlWithNonces);
+    });
+    server.listen(0, "127.0.0.1", () => {
+      const address = server.address();
+      if (!address || typeof address === "string") {
+        reject(new Error("Failed to get server address"));
+        return;
+      }
+      const url = `http://127.0.0.1:${address.port}`;
+      const timer = setTimeout(() => server.close(), timeout);
+      const stop = () => {
+        clearTimeout(timer);
+        server.close();
+      };
+      if (openBrowser) {
+        openUrl(url);
+      }
+      resolve({ url, stop });
+    });
+    server.on("error", reject);
+  });
+}
+
+// src/ui/serve-behaviors/handlers.ts
+var deps = {
+  serveHtmlInMemory
+};
+var htmlCodeServeHandler = {
+  async serve(ctx) {
+    try {
+      let url;
+      if (typeof ctx.value === "string") {
+        url = ctx.value;
+      } else if (typeof ctx.value === "object" && ctx.value?.downloadUrl) {
+        url = ctx.value.downloadUrl;
+      } else {
+        return { success: false, message: "No download URL found" };
+      }
+      ctx.onProgress?.("\uD83D\uDCE5 Downloading HTML...");
+      const response = await fetch(url);
+      if (!response.ok) {
+        return { success: false, message: `Download failed: ${response.status} ${response.statusText}` };
+      }
+      const html = await response.text();
+      ctx.onProgress?.("\uD83D\uDE80 Starting local server...");
+      const { url: serveUrl } = await deps.serveHtmlInMemory(html);
+      ctx.onProgress?.("\uD83C\uDF10 Opening browser...");
+      return { success: true, message: `\uD83C\uDF10 Preview at ${serveUrl} (auto-closes in 5 min)`, url: serveUrl };
+    } catch (error) {
+      return { success: false, message: `Serve failed: ${error instanceof Error ? error.message : String(error)}` };
+    }
+  }
+};
+
+// src/ui/serve-behaviors/registry.ts
+var registrations2 = [];
+function registerServeHandler(matcher, handler) {
+  registrations2.push({ matcher, handler });
+}
+function getServeHandler(path) {
+  for (let i = registrations2.length - 1;i >= 0; i--) {
+    const reg = registrations2[i];
+    if (reg && reg.matcher(path))
+      return reg.handler;
+  }
+  return null;
+}
+function endsWith2(suffix) {
+  return (path) => path.endsWith(suffix);
+}
+registerServeHandler(endsWith2(".htmlCode"), htmlCodeServeHandler);
+registerServeHandler(endsWith2(".htmlCode.downloadUrl"), htmlCodeServeHandler);
+
+// src/ui/JsonTree.tsx
+var jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
+function getType(value) {
+  if (value === null)
+    return "null";
+  if (Array.isArray(value))
+    return "array";
+  return typeof value;
+}
+function buildVisibleTree(data, expandedIds, prefix = "", depth = 0, rootLabel) {
+  const nodes = [];
+  const type = getType(data);
+  if (rootLabel && prefix === "" && depth === 0) {
+    const isExpanded = expandedIds.has(rootLabel);
+    nodes.push({
+      id: rootLabel,
+      key: rootLabel,
+      value: data,
+      depth: 0,
+      isLeaf: false,
+      isExpanded,
+      hasChildren: true
+    });
+    if (isExpanded) {
+      nodes.push(...buildVisibleTree(data, expandedIds, rootLabel, 1));
+    }
+    return nodes;
+  }
+  if (type === "object" || type === "array") {
+    const keys = Object.keys(data);
+    for (const key of keys) {
+      const value = data[key];
+      const id = prefix ? `${prefix}.${key}` : key;
+      const valueType = getType(value);
+      const isLeaf = valueType !== "object" && valueType !== "array";
+      const hasChildren = !isLeaf && Object.keys(value).length > 0;
+      const isExpanded = expandedIds.has(id);
+      nodes.push({
+        id,
+        key,
+        value,
+        depth,
+        isLeaf,
+        isExpanded,
+        hasChildren
+      });
+      if (hasChildren && isExpanded) {
+        nodes.push(...buildVisibleTree(value, expandedIds, id, depth + 1));
+      }
+    }
+  }
+  return nodes;
+}
+var JsonTree = ({ data, rootLabel, onNavigate, onBack }) => {
+  const [expandedIds, setExpandedIds] = import_react.useState(() => {
+    const ids = new Set;
+    if (rootLabel) {
+      ids.add(rootLabel);
+    } else if (data && typeof data === "object") {
+      Object.keys(data).forEach((key) => ids.add(key));
+    }
+    return ids;
+  });
+  const [selectedIndex, setSelectedIndex] = import_react.useState(0);
+  const [feedbackMessage, setFeedbackMessage] = import_react.useState(null);
+  const lastCPressTime = import_react.useRef(0);
+  const feedbackTimeout = import_react.useRef(null);
+  const visibleNodes = import_react.useMemo(() => {
+    return buildVisibleTree(data, expandedIds, "", 0, rootLabel);
+  }, [data, expandedIds, rootLabel]);
+  const { exit } = use_app_default();
+  use_input_default((input, key) => {
+    if (input === "q") {
+      exit();
+    }
+    if (input === "c") {
+      const node = visibleNodes[selectedIndex];
+      if (!node)
+        return;
+      const now = Date.now();
+      const timeSinceLastC = now - lastCPressTime.current;
+      lastCPressTime.current = now;
+      const isDoubleTap = timeSinceLastC < 300;
+      const handler = getHandler(node.id);
+      const onProgress = (message) => {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(message);
+      };
+      const ctx = { key: node.key, value: node.value, path: node.id, onProgress };
+      const showFeedback = (result) => {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(result.message);
+        feedbackTimeout.current = setTimeout(() => setFeedbackMessage(null), 3000);
+      };
+      if (isDoubleTap) {
+        handler.copyExtended(ctx).then(showFeedback);
+      } else {
+        setTimeout(() => {
+          if (Date.now() - lastCPressTime.current >= 280) {
+            handler.copy(ctx).then(showFeedback);
+          }
+        }, 300);
+      }
+      return;
+    }
+    if (input === "s") {
+      const node = visibleNodes[selectedIndex];
+      if (!node)
+        return;
+      const handler = getServeHandler(node.id);
+      if (!handler) {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage("⚠️ No preview available for this path");
+        feedbackTimeout.current = setTimeout(() => setFeedbackMessage(null), 3000);
+        return;
+      }
+      const onProgress = (message) => {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(message);
+      };
+      const ctx = { key: node.key, value: node.value, path: node.id, onProgress };
+      handler.serve(ctx).then((result) => {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(result.message);
+        feedbackTimeout.current = setTimeout(() => setFeedbackMessage(null), 1e4);
+      });
+      return;
+    }
+    if (input === "o") {
+      const node = visibleNodes[selectedIndex];
+      if (!node)
+        return;
+      let projectId;
+      const projectsMatch = node.id.match(/projects\.(\d+)/);
+      if (projectsMatch && projectsMatch[1]) {
+        const projectIndex = parseInt(projectsMatch[1], 10);
+        const project = data.projects?.[projectIndex];
+        if (project?.name) {
+          projectId = project.name.replace("projects/", "");
+        }
+      }
+      if (!projectId && typeof node.value === "object" && node.value?.name) {
+        const nameMatch = node.value.name.match(/projects\/(\d+)/);
+        if (nameMatch) {
+          projectId = nameMatch[1];
+        }
+      }
+      if (!projectId && node.key === "name" && typeof node.value === "string") {
+        const nameMatch = node.value.match(/projects\/(\d+)/);
+        if (nameMatch) {
+          projectId = nameMatch[1];
+        }
+      }
+      if (!projectId && (rootLabel === "screen" || rootLabel === "resource")) {
+        const nameMatch = data.name?.match(/projects\/(\d+)/);
+        if (nameMatch) {
+          projectId = nameMatch[1];
+        }
+      }
+      if (projectId) {
+        const url = `https://stitch.withgoogle.com/projects/${projectId}`;
+        openUrl(url);
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(`\uD83D\uDD17 Opened project in browser`);
+        feedbackTimeout.current = setTimeout(() => setFeedbackMessage(null), 3000);
+      } else {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(`⚠️ No project found at this path`);
+        feedbackTimeout.current = setTimeout(() => setFeedbackMessage(null), 3000);
+      }
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+    }
+    if (key.downArrow) {
+      setSelectedIndex(Math.min(visibleNodes.length - 1, selectedIndex + 1));
+    }
+    if (key.rightArrow || key.return) {
+      const node = visibleNodes[selectedIndex];
+      if (node && node.hasChildren) {
+        if (!node.isExpanded) {
+          const newExpanded = new Set(expandedIds);
+          newExpanded.add(node.id);
+          setExpandedIds(newExpanded);
+        }
+      }
+      if (key.return && node && onNavigate) {
+        const navResult = getNavigationTarget({ path: node.id, value: node.value, key: node.key });
+        if (navResult.shouldNavigate) {
+          onNavigate(navResult);
+          return;
+        }
+      }
+    }
+    if ((key.delete || key.backspace) && onBack) {
+      onBack();
+      return;
+    }
+    if (key.leftArrow) {
+      const node = visibleNodes[selectedIndex];
+      if (node) {
+        if (node.isExpanded) {
+          const newExpanded = new Set(expandedIds);
+          newExpanded.delete(node.id);
+          setExpandedIds(newExpanded);
+        } else {
+          const lastDot = node.id.lastIndexOf(".");
+          if (lastDot !== -1) {
+            const parentId = node.id.substring(0, lastDot);
+            const parentIndex = visibleNodes.findIndex((n) => n.id === parentId);
+            if (parentIndex !== -1) {
+              setSelectedIndex(parentIndex);
+            }
+          } else {}
+        }
+      }
+    }
+  });
+  const viewportHeight = 20;
+  const startRow = Math.max(0, Math.min(selectedIndex - 2, visibleNodes.length - viewportHeight));
+  const endRow = Math.min(startRow + viewportHeight, visibleNodes.length);
+  const viewportNodes = visibleNodes.slice(startRow, endRow);
+  if (!data || typeof data !== "object") {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+      children: [
+        "Invalid data: ",
+        String(data)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (Object.keys(data).length === 0) {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+      children: "Empty object"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Box_default, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        color: "blue",
+        bold: true,
+        children: "JSON Viewer (Use Arrows to Navigate, 'q' to Quit)"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Box_default, {
+        flexDirection: "column",
+        borderStyle: "single",
+        children: [
+          viewportNodes.map((node, index) => {
+            const absoluteIndex = startRow + index;
+            const isSelected = absoluteIndex === selectedIndex;
+            const indentation = "  ".repeat(node.depth);
+            let prefixChar = " ";
+            if (node.hasChildren) {
+              prefixChar = node.isExpanded ? "▼" : "▶";
+            }
+            let valueDisplay = "";
+            if (node.isLeaf) {
+              const valType = getType(node.value);
+              if (valType === "string")
+                valueDisplay = `"${node.value}"`;
+              else
+                valueDisplay = String(node.value);
+            } else {
+              const type = Array.isArray(node.value) ? "[]" : "{}";
+              const itemCount = Object.keys(node.value).length;
+              const label = node.value.title || node.value.name || node.value.displayName || node.value.id || null;
+              if (label && typeof label === "string") {
+                valueDisplay = `${type} "${label}" (${itemCount})`;
+              } else {
+                valueDisplay = `${type} ${itemCount} items`;
+              }
+            }
+            return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Box_default, {
+              children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+                backgroundColor: isSelected ? "blue" : undefined,
+                color: isSelected ? "white" : undefined,
+                wrap: "truncate",
+                children: [
+                  indentation,
+                  /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+                    color: "green",
+                    children: [
+                      prefixChar,
+                      " ",
+                      node.key
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+                    children: ": "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+                    color: "yellow",
+                    children: valueDisplay
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, node.id, false, undefined, this);
+          }),
+          visibleNodes.length > viewportHeight && /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+            color: "gray",
+            children: [
+              "... ",
+              visibleNodes.length - endRow,
+              " more items ..."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        color: "gray",
+        children: [
+          "Selected Path: ",
+          visibleNodes[selectedIndex]?.id || "none",
+          " | 'c' copy, 'cc' extended, 's' preview"
+        ]
+      }, undefined, true, undefined, this),
+      feedbackMessage && /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
+        color: "cyan",
+        bold: true,
+        children: feedbackMessage
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/ui/InteractiveViewer.tsx
+var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
+var InteractiveViewer = ({
+  initialData,
+  initialRootLabel,
+  initialHistory,
+  onFetch,
+  onExit
+}) => {
+  const [history, setHistory] = import_react2.useState(() => {
+    if (initialHistory && initialHistory.length > 0) {
+      return [...initialHistory, { data: initialData, rootLabel: initialRootLabel }];
+    }
+    return [{ data: initialData, rootLabel: initialRootLabel }];
+  });
+  const [isLoading, setIsLoading] = import_react2.useState(false);
+  const [error, setError] = import_react2.useState(null);
+  const currentState = history[history.length - 1];
+  const handleNavigate = import_react2.useCallback(async (result) => {
+    if (!result.target)
+      return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await onFetch(result.target);
+      let rootLabel;
+      if (result.type === "screen") {
+        rootLabel = "screen";
+      } else if (result.type === "project") {
+        rootLabel = "project";
+      } else {
+        rootLabel = "resource";
+      }
+      setHistory((prev) => [...prev, { data, rootLabel, resourcePath: result.target }]);
+    } catch (err) {
+      setError(`Navigation failed: ${err}`);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onFetch]);
+  const handleBack = import_react2.useCallback(() => {
+    if (history.length > 1) {
+      setHistory((prev) => prev.slice(0, -1));
+      setError(null);
+    }
+  }, [history.length]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+      flexDirection: "column",
+      children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        color: "blue",
+        children: "Loading..."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (!currentState) {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+      color: "red",
+      children: "No data to display"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+    flexDirection: "column",
+    children: [
+      history.length > 1 && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        color: "gray",
+        dimColor: true,
+        children: [
+          "← Press Backspace to go back (",
+          history.length - 1,
+          " level",
+          history.length > 2 ? "s" : "",
+          " deep)"
+        ]
+      }, undefined, true, undefined, this),
+      error && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+        color: "red",
+        children: error
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(JsonTree, {
+        data: currentState.data,
+        rootLabel: currentState.rootLabel,
+        onNavigate: handleNavigate,
+        onBack: history.length > 1 ? handleBack : undefined
+      }, history.length, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  InteractiveViewer
+};
+
+//# debugId=5616FED4529C741864756E2164756E21