@adminide-stack/yantra-mobile 12.0.129-alpha.0 → 12.0.129-alpha.1

package/lib/features/design/surface/DesignPreview.js

@@ -0,0 +1,159 @@
+import {jsx,jsxs}from'react/jsx-runtime';import React__default,{forwardRef,useRef,useImperativeHandle,useMemo}from'react';import {View,StyleSheet,Text,Linking}from'react-native';var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const PREVIEW_DEVICES = [{
+  key: "desktop",
+  label: "Desktop",
+  width: 1280,
+  icon: "monitor"
+}, {
+  key: "tablet",
+  label: "Tablet",
+  width: 768,
+  icon: "tablet"
+}, {
+  key: "mobile",
+  label: "Mobile",
+  width: 390,
+  icon: "cellphone"
+}];
+let webViewModule;
+function loadWebView() {
+  if (webViewModule === void 0) {
+    try {
+      webViewModule = require("react-native-webview").WebView;
+    } catch (e) {
+      webViewModule = null;
+    }
+  }
+  return webViewModule;
+}
+function withViewport(html, width) {
+  const content = width === "device" ? "width=device-width, initial-scale=1" : `width=${width}`;
+  const meta = `<meta name="viewport" content="${content}">`;
+  const stripped = html.replace(/<meta[^>]+name=["']?viewport["']?[^>]*>/gi, "");
+  if (/<head[^>]*>/i.test(stripped)) return stripped.replace(/<head[^>]*>/i, (m) => `${m}${meta}`);
+  return `${meta}${stripped}`;
+}
+const PROBE = `(function(){
+  if (window.__yantraProbe) return; window.__yantraProbe = true; window.__yantraAnnotate = false;
+  function own(el){ var t=''; for (var i=0;i<el.childNodes.length;i++){ var n=el.childNodes[i]; if(n.nodeType===3) t+=n.textContent; } return t.replace(/\\s+/g,' ').trim().slice(0,120); }
+  function describe(el){
+    var text = own(el) || (el.innerText||'').replace(/\\s+/g,' ').trim().slice(0,120);
+    var label = el.getAttribute && (el.getAttribute('alt')||el.getAttribute('aria-label')||el.id||'');
+    var path=[]; var p=el.parentElement; while(p && p.tagName!=='BODY' && path.length<4){ path.push(p.tagName.toLowerCase()); p=p.parentElement; }
+    return { tag: el.tagName ? el.tagName.toLowerCase() : '', text: text, label: label||'', path: path.join(' > ') };
+  }
+  document.addEventListener('click', function(e){
+    if (!window.__yantraAnnotate) return;
+    e.preventDefault(); e.stopPropagation();
+    var doc = document.documentElement;
+    var x = (e.pageX / Math.max(1, doc.scrollWidth)) * 100;
+    var y = (e.pageY / Math.max(1, doc.scrollHeight)) * 100;
+    var target = e.target && e.target.nodeType===1 ? describe(e.target) : null;
+    window.ReactNativeWebView && window.ReactNativeWebView.postMessage(JSON.stringify({ type:'pick', xPct:x, yPct:y, target:target }));
+  }, true);
+})(); true;`;
+const DesignPreview = forwardRef(function DesignPreview2({
+  html,
+  device = "mobile",
+  thumbnail,
+  annotate,
+  onPick,
+  style
+}, ref) {
+  var _a, _b;
+  const WebView = loadWebView();
+  const web = useRef(null);
+  useImperativeHandle(ref, () => ({
+    reload: () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = web.current) == null ? void 0 : _a2.reload) == null ? void 0 : _b2.call(_a2);
+    }
+  }), []);
+  const width = thumbnail ? 1e3 : (_b = (_a = PREVIEW_DEVICES.find((d) => d.key === device)) == null ? void 0 : _a.width) != null ? _b : 390;
+  const source = useMemo(() => ({
+    html: withViewport(html, device === "mobile" && !thumbnail ? "device" : width),
+    baseUrl: ""
+  }), [html, device, thumbnail, width]);
+  if (!WebView) {
+    return /* @__PURE__ */ jsx(View, { style: [styles.missing, style], children: /* @__PURE__ */ jsx(Text, { style: styles.missingText, children: "This app build cannot show page previews." }) });
+  }
+  const setAnnotate = `window.__yantraAnnotate = ${annotate ? "true" : "false"}; true;`;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.fill, style], pointerEvents: thumbnail ? "none" : "auto", children: [
+    /* @__PURE__ */ jsx(WebView, { ref: web, originWhitelist: ["*"], source, javaScriptEnabled: true, domStorageEnabled: true, scalesPageToFit: true, scrollEnabled: !thumbnail, showsVerticalScrollIndicator: !thumbnail, setSupportMultipleWindows: false, allowsInlineMediaPlayback: true, injectedJavaScript: thumbnail ? void 0 : PROBE + setAnnotate, onLoadEnd: () => {
+      var _a2, _b2;
+      if (!thumbnail) (_b2 = (_a2 = web.current) == null ? void 0 : _a2.injectJavaScript) == null ? void 0 : _b2.call(_a2, setAnnotate);
+    }, onShouldStartLoadWithRequest: (req) => {
+      var _a2;
+      const url = (_a2 = req.url) != null ? _a2 : "";
+      if (!url || url.startsWith("about:") || url.startsWith("data:") || req.isTopFrame === false) return true;
+      if (/^https?:\/\//i.test(url) && !thumbnail) void Linking.openURL(url).catch(() => void 0);
+      return false;
+    }, onMessage: (e) => {
+      var _a2, _b2;
+      if (!onPick) return;
+      try {
+        const msg = JSON.parse(e.nativeEvent.data);
+        if (msg.type === "pick") {
+          onPick(__spreadValues({
+            xPct: (_a2 = msg.xPct) != null ? _a2 : 0,
+            yPct: (_b2 = msg.yPct) != null ? _b2 : 0
+          }, msg.target ? {
+            target: msg.target
+          } : {}));
+        }
+      } catch (e2) {
+      }
+    }, style: styles.web }),
+    annotate ? /* @__PURE__ */ jsx(AnnotateInjector, { web, annotate }) : null
+  ] });
+});
+function AnnotateInjector({
+  web,
+  annotate
+}) {
+  React__default.useEffect(() => {
+    var _a, _b;
+    (_b = (_a = web.current) == null ? void 0 : _a.injectJavaScript) == null ? void 0 : _b.call(_a, `window.__yantraAnnotate = ${annotate ? "true" : "false"}; true;`);
+    return () => {
+      var _a2, _b2;
+      (_b2 = (_a2 = web.current) == null ? void 0 : _a2.injectJavaScript) == null ? void 0 : _b2.call(_a2, "window.__yantraAnnotate = false; true;");
+    };
+  }, [web, annotate]);
+  return null;
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  web: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  missing: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16
+  },
+  missingText: {
+    fontSize: 13,
+    color: "#64748b",
+    textAlign: "center"
+  }
+});export{DesignPreview,PREVIEW_DEVICES,withViewport};//# sourceMappingURL=DesignPreview.js.map

package/lib/features/design/surface/DesignPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignPreview.js","sources":["../../../../src/features/design/surface/DesignPreview.tsx"],"sourcesContent":["/**\n * One generated page, shown - the native twin of the web's sandboxed preview\n * iframe (CreationView / CreationTile + `previewSandbox.ts`).\n *\n * A creation IS an HTML document, so this frame is a WebView over that\n * document's string. It is the only web content in the surface: the screens,\n * boards, composer and pickers around it are native. It loads no surface and\n * no remote page, and nothing of the host reaches it.\n *\n *  - Device widths lay the page out as the web's selector does (Mobile 390,\n *    Tablet 768, Desktop 1280) through the viewport, scaled to fit.\n *  - A link never navigates the preview away: http(s) opens in the browser,\n *    anything else (a relative link into a page that does not exist) is dropped.\n *  - Annotate: a tap reports where it landed and what it landed on - tag, own\n *    text, alt/aria/id, ancestor path - the web shim's element probe.\n */\nimport React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Linking, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';\nimport type { AnnotationTarget } from './designChat';\n\nexport type PreviewDevice = 'mobile' | 'tablet' | 'desktop';\n\nexport const PREVIEW_DEVICES: ReadonlyArray<{ key: PreviewDevice; label: string; width: number; icon: string }> = [\n    { key: 'desktop', label: 'Desktop', width: 1280, icon: 'monitor' },\n    { key: 'tablet', label: 'Tablet', width: 768, icon: 'tablet' },\n    { key: 'mobile', label: 'Mobile', width: 390, icon: 'cellphone' },\n];\n\ntype WebViewComponent = React.ComponentType<Record<string, unknown>>;\n\nlet webViewModule: WebViewComponent | null | undefined;\n\nfunction loadWebView(): WebViewComponent | null {\n    if (webViewModule === undefined) {\n        try {\n            // eslint-disable-next-line @typescript-eslint/no-require-imports, global-require\n            webViewModule = require('react-native-webview').WebView as WebViewComponent;\n        } catch {\n            webViewModule = null;\n        }\n    }\n    return webViewModule;\n}\n\n/** The page at a layout width: its own viewport replaced, so the WebView lays it out there and scales to fit. */\nexport function withViewport(html: string, width: number | 'device'): string {\n    const content = width === 'device' ? 'width=device-width, initial-scale=1' : `width=${width}`;\n    const meta = `<meta name=\"viewport\" content=\"${content}\">`;\n    const stripped = html.replace(/<meta[^>]+name=[\"']?viewport[\"']?[^>]*>/gi, '');\n    if (/<head[^>]*>/i.test(stripped)) return stripped.replace(/<head[^>]*>/i, (m) => `${m}${meta}`);\n    return `${meta}${stripped}`;\n}\n\n/**\n * The probe: in annotate mode a tap is swallowed (no link fires, no button\n * acts) and reported instead. Same description the web shim returns.\n */\nconst PROBE = `(function(){\n  if (window.__yantraProbe) return; window.__yantraProbe = true; window.__yantraAnnotate = false;\n  function own(el){ var t=''; for (var i=0;i<el.childNodes.length;i++){ var n=el.childNodes[i]; if(n.nodeType===3) t+=n.textContent; } return t.replace(/\\\\s+/g,' ').trim().slice(0,120); }\n  function describe(el){\n    var text = own(el) || (el.innerText||'').replace(/\\\\s+/g,' ').trim().slice(0,120);\n    var label = el.getAttribute && (el.getAttribute('alt')||el.getAttribute('aria-label')||el.id||'');\n    var path=[]; var p=el.parentElement; while(p && p.tagName!=='BODY' && path.length<4){ path.push(p.tagName.toLowerCase()); p=p.parentElement; }\n    return { tag: el.tagName ? el.tagName.toLowerCase() : '', text: text, label: label||'', path: path.join(' > ') };\n  }\n  document.addEventListener('click', function(e){\n    if (!window.__yantraAnnotate) return;\n    e.preventDefault(); e.stopPropagation();\n    var doc = document.documentElement;\n    var x = (e.pageX / Math.max(1, doc.scrollWidth)) * 100;\n    var y = (e.pageY / Math.max(1, doc.scrollHeight)) * 100;\n    var target = e.target && e.target.nodeType===1 ? describe(e.target) : null;\n    window.ReactNativeWebView && window.ReactNativeWebView.postMessage(JSON.stringify({ type:'pick', xPct:x, yPct:y, target:target }));\n  }, true);\n})(); true;`;\n\nexport interface DesignPreviewHandle {\n    reload: () => void;\n}\n\nexport interface DesignPreviewProps {\n    html: string;\n    device?: PreviewDevice;\n    /** A tile: a still, scaled-down page that takes no touches. */\n    thumbnail?: boolean;\n    annotate?: boolean;\n    onPick?: (pick: { xPct: number; yPct: number; target?: AnnotationTarget }) => void;\n    style?: StyleProp<ViewStyle>;\n}\n\nexport const DesignPreview = forwardRef<DesignPreviewHandle, DesignPreviewProps>(function DesignPreview(\n    { html, device = 'mobile', thumbnail, annotate, onPick, style },\n    ref,\n) {\n    const WebView = loadWebView();\n    const web = useRef<{ reload?: () => void; injectJavaScript?: (js: string) => void } | null>(null);\n    useImperativeHandle(ref, () => ({ reload: () => web.current?.reload?.() }), []);\n    const width = thumbnail ? 1000 : (PREVIEW_DEVICES.find((d) => d.key === device)?.width ?? 390);\n    const source = useMemo(\n        () => ({ html: withViewport(html, device === 'mobile' && !thumbnail ? 'device' : width), baseUrl: '' }),\n        [html, device, thumbnail, width],\n    );\n    if (!WebView) {\n        return (\n            <View style={[styles.missing, style]}>\n                <Text style={styles.missingText}>This app build cannot show page previews.</Text>\n            </View>\n        );\n    }\n    const setAnnotate = `window.__yantraAnnotate = ${annotate ? 'true' : 'false'}; true;`;\n    return (\n        <View style={[styles.fill, style]} pointerEvents={thumbnail ? 'none' : 'auto'}>\n            <WebView\n                ref={web}\n                originWhitelist={['*']}\n                source={source}\n                javaScriptEnabled\n                domStorageEnabled\n                scalesPageToFit\n                scrollEnabled={!thumbnail}\n                showsVerticalScrollIndicator={!thumbnail}\n                setSupportMultipleWindows={false}\n                allowsInlineMediaPlayback\n                injectedJavaScript={thumbnail ? undefined : PROBE + setAnnotate}\n                onLoadEnd={() => {\n                    if (!thumbnail) web.current?.injectJavaScript?.(setAnnotate);\n                }}\n                onShouldStartLoadWithRequest={(req: { url: string; isTopFrame?: boolean }) => {\n                    const url = req.url ?? '';\n                    // The document itself (loaded from a string) and anything framed inside it.\n                    if (!url || url.startsWith('about:') || url.startsWith('data:') || req.isTopFrame === false)\n                        return true;\n                    // A followed link: the preview never navigates away from the design.\n                    if (/^https?:\\/\\//i.test(url) && !thumbnail) void Linking.openURL(url).catch(() => undefined);\n                    return false;\n                }}\n                onMessage={(e: { nativeEvent: { data: string } }) => {\n                    if (!onPick) return;\n                    try {\n                        const msg = JSON.parse(e.nativeEvent.data) as {\n                            type?: string;\n                            xPct?: number;\n                            yPct?: number;\n                            target?: AnnotationTarget | null;\n                        };\n                        if (msg.type === 'pick') {\n                            onPick({\n                                xPct: msg.xPct ?? 0,\n                                yPct: msg.yPct ?? 0,\n                                ...(msg.target ? { target: msg.target } : {}),\n                            });\n                        }\n                    } catch {\n                        // not ours\n                    }\n                }}\n                style={styles.web}\n            />\n            {annotate ? <AnnotateInjector web={web} annotate={annotate} /> : null}\n        </View>\n    );\n});\n\n/** Pushes the annotate flag into a page already loaded when the mode flips. */\nfunction AnnotateInjector({\n    web,\n    annotate,\n}: {\n    web: React.MutableRefObject<{ injectJavaScript?: (js: string) => void } | null>;\n    annotate: boolean;\n}) {\n    React.useEffect(() => {\n        web.current?.injectJavaScript?.(`window.__yantraAnnotate = ${annotate ? 'true' : 'false'}; true;`);\n        return () => {\n            web.current?.injectJavaScript?.('window.__yantraAnnotate = false; true;');\n        };\n    }, [web, annotate]);\n    return null;\n}\n\nconst styles = StyleSheet.create({\n    fill: { flex: 1, overflow: 'hidden' },\n    web: { flex: 1, backgroundColor: 'transparent' },\n    missing: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16 },\n    missingText: { fontSize: 13, color: '#64748b', textAlign: 'center' },\n});\n"],"names":["DesignPreview","_a","_b","e","React"],"mappings":"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"}

package/lib/features/design/surface/DesignSurfaceExperience.js

@@ -0,0 +1,80 @@
+import {jsx}from'react/jsx-runtime';import {useState,useEffect,useMemo}from'react';import {View,StyleSheet}from'react-native';import {CanvasThemeProvider}from'../../canvas/canvasTheme.js';import {createRemoteUploadMedia}from'../../canvas/videoEditor/remoteMediaClient.js';import {BoardScreen}from'./BoardScreen.js';import {DesignBoards}from'./DesignBoards.js';import {designPalette}from'./designPalette.js';import {publishDesign}from'./designExport.js';import {pickReferenceFiles}from'./pickReferenceFiles.js';import {TemplatesGallery}from'./TemplatesGallery.js';import {useDesignSurface}from'./useDesignSurface.js';var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function Surface({
+  token,
+  indexUrl,
+  onClose,
+  uploadMedia,
+  sessionError,
+  openTemplates,
+  renderConnectorCard,
+  testID
+}) {
+  var _a;
+  const s = useDesignSurface({
+    token,
+    indexUrl
+  });
+  const [gallery, setGallery] = useState(Boolean(openTemplates));
+  const [galleryQuery, setGalleryQuery] = useState(openTemplates == null ? void 0 : openTemplates.query);
+  useEffect(() => {
+    if (!openTemplates) return;
+    setGalleryQuery(openTemplates.query);
+    setGallery(true);
+    s.closeBoard();
+  }, [openTemplates]);
+  const [templateRequest, setTemplateRequest] = useState(null);
+  const upload = useMemo(() => uploadMedia != null ? uploadMedia : token && indexUrl ? createRemoteUploadMedia(token, indexUrl) : void 0, [uploadMedia, token, indexUrl]);
+  const uploadAttachment = useMemo(() => upload ? async (file) => {
+    const src = file.url || file.dataUrl;
+    if (!src) throw new Error("the file has no contents");
+    return /^https:\/\//.test(src) ? src : upload(src);
+  } : void 0, [upload]);
+  if (s.openBoardId) {
+    const id = s.openBoardId;
+    return /* @__PURE__ */ jsx(View, { style: styles.fill, testID, children: /* @__PURE__ */ jsx(BoardScreen, { boardId: id, creations: s.creations, loading: s.boardLoading, run: s.runs[id], error: s.errors[id], saveError: s.saveError, transcript: (_a = s.transcripts[id]) != null ? _a : [], priorVersions: s.priorVersions, onBack: s.closeBoard, onSend: s.send, onStop: () => s.stop(id), onRevert: s.revert, onPublish: token ? (creation) => publishDesign(creation.html, token) : void 0, onAddFiles: upload ? () => pickReferenceFiles(upload) : void 0, agentProps: {
+      templates: s.templates,
+      systems: s.systems,
+      tools: s.tools,
+      onExtractSystem: s.addSystemFromSite,
+      uploadAttachment,
+      initialTemplateId: (templateRequest == null ? void 0 : templateRequest.boardId) === id ? templateRequest.templateId : void 0,
+      renderConnectorCard
+    } }) });
+  }
+  if (gallery) {
+    return /* @__PURE__ */ jsx(View, { style: styles.fill, testID, children: /* @__PURE__ */ jsx(TemplatesGallery, { defaultQuery: galleryQuery, templates: s.templates, onClose: () => setGallery(false), onPick: (template) => {
+      setGallery(false);
+      const boardId = s.newBoard();
+      setTemplateRequest({
+        boardId,
+        templateId: template.id
+      });
+    } }, galleryQuery != null ? galleryQuery : "") });
+  }
+  return /* @__PURE__ */ jsx(View, { style: styles.fill, testID, children: /* @__PURE__ */ jsx(DesignBoards, { boards: s.boards, loading: s.boardsLoading && s.ready, runningBoardIds: Object.keys(s.runs), notice: sessionError || (!s.ready ? "Sign in to see and make designs." : s.boardsError), canStart: s.ready, onOpen: s.openBoard, onNewDesign: () => {
+    s.newBoard();
+  }, onBrowseTemplates: () => setGallery(true), onDelete: (board) => void s.deleteBoard(board.id), onRefresh: s.refreshBoards, onClose }) });
+}
+function DesignSurfaceExperience(props) {
+  return /* @__PURE__ */ jsx(CanvasThemeProvider, { palette: designPalette, children: /* @__PURE__ */ jsx(Surface, __spreadValues({}, props)) });
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});export{DesignSurfaceExperience,DesignSurfaceExperience as default};//# sourceMappingURL=DesignSurfaceExperience.js.map

package/lib/features/design/surface/DesignSurfaceExperience.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignSurfaceExperience.js","sources":["../../../../src/features/design/surface/DesignSurfaceExperience.tsx"],"sourcesContent":["/**\n * Native Design - the phone's port of the web Design surface\n * (`yantra-surface/packages/design`, `@yantra/design-surface`): AI web design.\n *\n *   boards     screen one: the wet-paint hero with New design and Start from a\n *              template, above every saved board (web DesignBoards + WetPaint)\n *   templates  the design templates, full screen (web TemplatesGallery)\n *   a board    its creations as live page tiles, the page being written on top,\n *              the transcript and the composer (web project canvas + agent pane)\n *   a design   Preview / Code / Compare, device widths, annotate, revert\n *              (web CreationView)\n *\n * Same boards (`design` surface rows), same connector (`yantra-web-design`),\n * same prompts and the surface's own teal theme, so either side opens the\n * other's work and looks like it. Everything is native except the frame that\n * shows a generated page - that page is HTML, and only a web view can lay HTML\n * out (DesignPreview).\n */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { CanvasThemeProvider } from '../../canvas/canvasTheme';\nimport type { CanvasItem } from '../../canvas/canvasCore';\nimport { createRemoteUploadMedia } from '../../canvas/videoEditor/remoteMediaClient';\nimport type { MessageAttachment } from '../../../hooks/useChatStream';\nimport { BoardScreen } from './BoardScreen';\nimport type { RenderDesignConnectorCard } from './DesignAgentChatPane';\nimport { DesignBoards } from './DesignBoards';\nimport { designPalette } from './designPalette';\nimport { publishDesign } from './designExport';\nimport { pickReferenceFiles } from './pickReferenceFiles';\nimport { TemplatesGallery } from './TemplatesGallery';\nimport { useDesignSurface } from './useDesignSurface';\n\nexport interface DesignSurfaceExperienceProps {\n    /** A bearer the surface index and the cdecli agent both accept. */\n    token?: string | null;\n    indexUrl: string;\n    onClose?: () => void;\n    onPickLocalMedia?: () => Promise<CanvasItem[]>;\n    uploadMedia?: (localUri: string) => Promise<string>;\n    sessionError?: string | null;\n    /** Accepted from hosts written against the studio's props; the surface runs its own connector lane. */\n    runMediaAction?: unknown;\n    /** Open on the template gallery - a chat card or link asked for design templates. */\n    openTemplates?: { query?: string } | null;\n    /** The host's `[CONNECTOR_CONNECT]` card for a board's chat; without it no connect card shows. */\n    renderConnectorCard?: RenderDesignConnectorCard;\n    testID?: string;\n}\n\nfunction Surface({\n    token,\n    indexUrl,\n    onClose,\n    uploadMedia,\n    sessionError,\n    openTemplates,\n    renderConnectorCard,\n    testID,\n}: DesignSurfaceExperienceProps) {\n    const s = useDesignSurface({ token, indexUrl });\n    const [gallery, setGallery] = useState(Boolean(openTemplates));\n    const [galleryQuery, setGalleryQuery] = useState(openTemplates?.query);\n    // A later card or link (the screen is reused) opens the gallery again on its own search.\n    useEffect(() => {\n        if (!openTemplates) return;\n        setGalleryQuery(openTemplates.query);\n        setGallery(true);\n        s.closeBoard();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [openTemplates]);\n    /** A landing template pick: the board it opened starts with it selected in the composer. */\n    const [templateRequest, setTemplateRequest] = useState<{ boardId: string; templateId: string } | null>(null);\n\n    const upload = useMemo(\n        () => uploadMedia ?? (token && indexUrl ? createRemoteUploadMedia(token, indexUrl) : undefined),\n        [uploadMedia, token, indexUrl],\n    );\n    /** An Agent attachment, hosted so the generator can open it (it arrives as a data: or file: URI). */\n    const uploadAttachment = useMemo(\n        () =>\n            upload\n                ? async (file: MessageAttachment) => {\n                      const src = file.url || file.dataUrl;\n                      if (!src) throw new Error('the file has no contents');\n                      return /^https:\\/\\//.test(src) ? src : upload(src);\n                  }\n                : undefined,\n        [upload],\n    );\n\n    if (s.openBoardId) {\n        const id = s.openBoardId;\n        return (\n            <View style={styles.fill} testID={testID}>\n                <BoardScreen\n                    boardId={id}\n                    creations={s.creations}\n                    loading={s.boardLoading}\n                    run={s.runs[id]}\n                    error={s.errors[id]}\n                    saveError={s.saveError}\n                    transcript={s.transcripts[id] ?? []}\n                    priorVersions={s.priorVersions}\n                    onBack={s.closeBoard}\n                    onSend={s.send}\n                    onStop={() => s.stop(id)}\n                    onRevert={s.revert}\n                    onPublish={token ? (creation) => publishDesign(creation.html, token) : undefined}\n                    onAddFiles={upload ? () => pickReferenceFiles(upload) : undefined}\n                    agentProps={{\n                        templates: s.templates,\n                        systems: s.systems,\n                        tools: s.tools,\n                        onExtractSystem: s.addSystemFromSite,\n                        uploadAttachment,\n                        initialTemplateId: templateRequest?.boardId === id ? templateRequest.templateId : undefined,\n                        renderConnectorCard,\n                    }}\n                />\n            </View>\n        );\n    }\n\n    if (gallery) {\n        return (\n            <View style={styles.fill} testID={testID}>\n                <TemplatesGallery\n                    key={galleryQuery ?? ''}\n                    defaultQuery={galleryQuery}\n                    templates={s.templates}\n                    onClose={() => setGallery(false)}\n                    onPick={(template) => {\n                        setGallery(false);\n                        const boardId = s.newBoard();\n                        setTemplateRequest({ boardId, templateId: template.id });\n                    }}\n                />\n            </View>\n        );\n    }\n\n    return (\n        <View style={styles.fill} testID={testID}>\n            <DesignBoards\n                boards={s.boards}\n                loading={s.boardsLoading && s.ready}\n                runningBoardIds={Object.keys(s.runs)}\n                notice={sessionError || (!s.ready ? 'Sign in to see and make designs.' : s.boardsError)}\n                canStart={s.ready}\n                onOpen={s.openBoard}\n                onNewDesign={() => {\n                    s.newBoard();\n                }}\n                onBrowseTemplates={() => setGallery(true)}\n                onDelete={(board) => void s.deleteBoard(board.id)}\n                onRefresh={s.refreshBoards}\n                onClose={onClose}\n            />\n        </View>\n    );\n}\n\nexport function DesignSurfaceExperience(props: DesignSurfaceExperienceProps) {\n    return (\n        <CanvasThemeProvider palette={designPalette}>\n            <Surface {...props} />\n        </CanvasThemeProvider>\n    );\n}\n\nexport default DesignSurfaceExperience;\n\nconst styles = StyleSheet.create({\n    fill: { flex: 1 },\n});\n"],"names":[],"mappings":"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"}

package/lib/features/design/surface/FullScreenPreview.js

@@ -0,0 +1,59 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {useState}from'react';import {Modal,StatusBar,View,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Pressable,SPACE}from'../../canvas/canvasUi.js';import {useSafeInsets}from'../../canvas/withRemoteSafeArea.js';import {DesignPreview,PREVIEW_DEVICES}from'./DesignPreview.js';function FullScreenPreview({
+  creation,
+  onClose
+}) {
+  const insets = useSafeInsets();
+  const [device, setDevice] = useState("mobile");
+  return /* @__PURE__ */ jsxs(Modal, { visible: Boolean(creation), animationType: "slide", presentationStyle: "fullScreen", onRequestClose: onClose, children: [
+    /* @__PURE__ */ jsx(StatusBar, { hidden: true }),
+    /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
+      creation ? /* @__PURE__ */ jsx(DesignPreview, { html: creation.html, device }) : null,
+      /* @__PURE__ */ jsxs(View, { style: [styles.bar, {
+        top: insets.top + SPACE.sm
+      }], pointerEvents: "box-none", children: [
+        /* @__PURE__ */ jsx(View, { style: styles.pill, children: PREVIEW_DEVICES.map((d) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setDevice(d.key), style: [styles.device, device === d.key && styles.deviceOn], accessibilityRole: "button", accessibilityLabel: d.label, accessibilityState: {
+          selected: device === d.key
+        }, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: d.icon, size: 16, color: device === d.key ? "#0b1215" : "#ffffff" }) }, d.key)) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: onClose, style: styles.close, accessibilityRole: "button", accessibilityLabel: "Close", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 20, color: "#ffffff" }) })
+      ] })
+    ] })
+  ] });
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+    backgroundColor: "#000000"
+  },
+  bar: {
+    position: "absolute",
+    left: SPACE.md,
+    right: SPACE.md,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  pill: {
+    flexDirection: "row",
+    padding: 3,
+    borderRadius: 999,
+    backgroundColor: "rgba(11,18,21,0.72)"
+  },
+  device: {
+    width: 34,
+    height: 30,
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  deviceOn: {
+    backgroundColor: "#ffffff"
+  },
+  close: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(11,18,21,0.72)"
+  }
+});export{FullScreenPreview};//# sourceMappingURL=FullScreenPreview.js.map

package/lib/features/design/surface/FullScreenPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenPreview.js","sources":["../../../../src/features/design/surface/FullScreenPreview.tsx"],"sourcesContent":["/**\n * A design on its own, full screen - the native answer to the web's \"New\n * Browser\" (the newest design in a fresh tab) and \"Open\" (the page by itself).\n * The web hands those to the browser; the phone keeps the page in the app:\n * edge to edge, its own device width, nothing around it but a close and the\n * device switch.\n */\nimport React, { useState } from 'react';\nimport { Modal, StatusBar, StyleSheet, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { Pressable, SPACE } from '../../canvas/canvasUi';\nimport { useSafeInsets } from '../../canvas/withRemoteSafeArea';\nimport type { DesignArtifact } from './designBoard';\nimport { DesignPreview, PREVIEW_DEVICES, type PreviewDevice } from './DesignPreview';\n\nexport function FullScreenPreview({ creation, onClose }: { creation: DesignArtifact | null; onClose: () => void }) {\n    const insets = useSafeInsets();\n    // Full screen is the phone's own width: the page as a visitor on this device sees it.\n    const [device, setDevice] = useState<PreviewDevice>('mobile');\n    return (\n        <Modal\n            visible={Boolean(creation)}\n            animationType=\"slide\"\n            presentationStyle=\"fullScreen\"\n            onRequestClose={onClose}\n        >\n            <StatusBar hidden />\n            <View style={styles.fill}>\n                {creation ? <DesignPreview html={creation.html} device={device} /> : null}\n                <View style={[styles.bar, { top: insets.top + SPACE.sm }]} pointerEvents=\"box-none\">\n                    <View style={styles.pill}>\n                        {PREVIEW_DEVICES.map((d) => (\n                            <Pressable\n                                key={d.key}\n                                onPress={() => setDevice(d.key)}\n                                style={[styles.device, device === d.key && styles.deviceOn]}\n                                accessibilityRole=\"button\"\n                                accessibilityLabel={d.label}\n                                accessibilityState={{ selected: device === d.key }}\n                            >\n                                <MaterialCommunityIcons\n                                    name={d.icon as React.ComponentProps<typeof MaterialCommunityIcons>['name']}\n                                    size={16}\n                                    color={device === d.key ? '#0b1215' : '#ffffff'}\n                                />\n                            </Pressable>\n                        ))}\n                    </View>\n                    <Pressable\n                        onPress={onClose}\n                        style={styles.close}\n                        accessibilityRole=\"button\"\n                        accessibilityLabel=\"Close\"\n                    >\n                        <MaterialCommunityIcons name=\"close\" size={20} color=\"#ffffff\" />\n                    </Pressable>\n                </View>\n            </View>\n        </Modal>\n    );\n}\n\nconst styles = StyleSheet.create({\n    fill: { flex: 1, backgroundColor: '#000000' },\n    bar: {\n        position: 'absolute',\n        left: SPACE.md,\n        right: SPACE.md,\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n    },\n    pill: { flexDirection: 'row', padding: 3, borderRadius: 999, backgroundColor: 'rgba(11,18,21,0.72)' },\n    device: { width: 34, height: 30, borderRadius: 999, alignItems: 'center', justifyContent: 'center' },\n    deviceOn: { backgroundColor: '#ffffff' },\n    close: {\n        width: 38,\n        height: 38,\n        borderRadius: 19,\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: 'rgba(11,18,21,0.72)',\n    },\n});\n"],"names":[],"mappings":"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"}

package/lib/features/design/surface/NewSystemDialog.js

@@ -0,0 +1,122 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {useState}from'react';import {Modal,View,Text,TextInput,ActivityIndicator,StyleSheet}from'react-native';import {useCanvasTheme,themedStyles}from'../../canvas/canvasTheme.js';import {Pressable,SPACE,TYPE}from'../../canvas/canvasUi.js';import {normalizeSiteUrl}from'./designChat.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function NewSystemDialog({
+  visible,
+  onExtract,
+  onCreated,
+  onClose
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [url, setUrl] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const target = normalizeSiteUrl(url);
+  const create = async () => {
+    if (!target || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const system = await onExtract(target);
+      setUrl("");
+      setBusy(false);
+      onCreated(system);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not read that site.");
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(View, { style: styles.scrim, children: /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.title, children: "Create design system" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.subtitle, children: "Builds a design system from a site's palette, type and spacing." }),
+    /* @__PURE__ */ jsx(TextInput, { autoFocus: true, value: url, onChangeText: setUrl, editable: !busy, placeholder: "github.com", placeholderTextColor: theme.mutedForeground, autoCapitalize: "none", autoCorrect: false, keyboardType: "url", returnKeyType: "go", onSubmitEditing: () => void create(), style: styles.input, accessibilityLabel: "Site URL" }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.note, error ? {
+      color: theme.destructiveText
+    } : null], children: error != null ? error : busy ? "Reading the site and building a design system \u2014 up to a minute." : "It is added to the Design system picker in the Agent." }),
+    /* @__PURE__ */ jsxs(View, { style: styles.buttons, children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, style: [styles.button, styles.secondary], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.buttonLabel, {
+        color: theme.foreground
+      }], children: "Cancel" }) }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: () => void create(), disabled: !target || busy, style: [styles.button, styles.primary, (!target || busy) && styles.disabled], accessibilityRole: "button", children: [
+        busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.primaryForeground }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles.buttonLabel, {
+          color: theme.primaryForeground
+        }], children: busy ? "Reading\u2026" : "Create" })
+      ] })
+    ] })
+  ] }) }) });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  scrim: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.45)",
+    justifyContent: "center",
+    padding: SPACE.xl
+  },
+  card: {
+    padding: SPACE.lg,
+    gap: SPACE.md,
+    backgroundColor: theme.background,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border
+  },
+  title: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground
+  }),
+  subtitle: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    color: theme.mutedForeground
+  }),
+  input: __spreadValues({
+    height: 44,
+    paddingHorizontal: SPACE.md,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.input,
+    backgroundColor: theme.card,
+    color: theme.foreground
+  }, TYPE.body),
+  note: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.mutedForeground
+  }),
+  buttons: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: SPACE.sm
+  },
+  button: {
+    height: 40,
+    paddingHorizontal: SPACE.lg,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPACE.sm
+  },
+  secondary: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.borderStrong
+  },
+  primary: {
+    backgroundColor: theme.primary
+  },
+  buttonLabel: __spreadValues({}, TYPE.label),
+  disabled: {
+    opacity: 0.4
+  }
+}));export{NewSystemDialog};//# sourceMappingURL=NewSystemDialog.js.map

package/lib/features/design/surface/NewSystemDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewSystemDialog.js","sources":["../../../../src/features/design/surface/NewSystemDialog.tsx"],"sourcesContent":["/**\n * \"Create design system\" - native twin of design-surface\n * `components/NewSystemDialog.tsx`: builds one from a site's palette, type and\n * spacing into the Agent's design-system list - no agent turn.\n */\nimport React, { useState } from 'react';\nimport { ActivityIndicator, Modal, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { themedStyles, useCanvasTheme, type CanvasPalette } from '../../canvas/canvasTheme';\nimport { Pressable, SPACE, TYPE } from '../../canvas/canvasUi';\nimport { normalizeSiteUrl } from './designChat';\nimport type { SystemOption } from './designConnector';\n\nexport function NewSystemDialog({\n    visible,\n    onExtract,\n    onCreated,\n    onClose,\n}: {\n    visible: boolean;\n    onExtract: (url: string) => Promise<SystemOption>;\n    onCreated: (system: SystemOption) => void;\n    onClose: () => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const [url, setUrl] = useState('');\n    const [busy, setBusy] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n    const target = normalizeSiteUrl(url);\n\n    const create = async () => {\n        if (!target || busy) return;\n        setBusy(true);\n        setError(null);\n        try {\n            const system = await onExtract(target);\n            setUrl('');\n            setBusy(false);\n            onCreated(system);\n        } catch (e) {\n            setError(e instanceof Error ? e.message : 'Could not read that site.');\n            setBusy(false);\n        }\n    };\n\n    return (\n        <Modal visible={visible} transparent animationType=\"fade\" onRequestClose={onClose}>\n            <View style={styles.scrim}>\n                <View style={styles.card}>\n                    <Text style={styles.title}>Create design system</Text>\n                    <Text style={styles.subtitle}>Builds a design system from a site's palette, type and spacing.</Text>\n                    <TextInput\n                        autoFocus\n                        value={url}\n                        onChangeText={setUrl}\n                        editable={!busy}\n                        placeholder=\"github.com\"\n                        placeholderTextColor={theme.mutedForeground}\n                        autoCapitalize=\"none\"\n                        autoCorrect={false}\n                        keyboardType=\"url\"\n                        returnKeyType=\"go\"\n                        onSubmitEditing={() => void create()}\n                        style={styles.input}\n                        accessibilityLabel=\"Site URL\"\n                    />\n                    <Text style={[styles.note, error ? { color: theme.destructiveText } : null]}>\n                        {error ??\n                            (busy\n                                ? 'Reading the site and building a design system — up to a minute.'\n                                : 'It is added to the Design system picker in the Agent.')}\n                    </Text>\n                    <View style={styles.buttons}>\n                        <Pressable\n                            onPress={onClose}\n                            style={[styles.button, styles.secondary]}\n                            accessibilityRole=\"button\"\n                        >\n                            <Text style={[styles.buttonLabel, { color: theme.foreground }]}>Cancel</Text>\n                        </Pressable>\n                        <Pressable\n                            onPress={() => void create()}\n                            disabled={!target || busy}\n                            style={[styles.button, styles.primary, (!target || busy) && styles.disabled]}\n                            accessibilityRole=\"button\"\n                        >\n                            {busy ? <ActivityIndicator color={theme.primaryForeground} /> : null}\n                            <Text style={[styles.buttonLabel, { color: theme.primaryForeground }]}>\n                                {busy ? 'Reading…' : 'Create'}\n                            </Text>\n                        </Pressable>\n                    </View>\n                </View>\n            </View>\n        </Modal>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        scrim: { flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'center', padding: SPACE.xl },\n        card: {\n            padding: SPACE.lg,\n            gap: SPACE.md,\n            backgroundColor: theme.background,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: theme.border,\n        },\n        title: { ...TYPE.title, color: theme.foreground },\n        subtitle: { ...TYPE.body, fontSize: 14, color: theme.mutedForeground },\n        input: {\n            height: 44,\n            paddingHorizontal: SPACE.md,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: theme.input,\n            backgroundColor: theme.card,\n            color: theme.foreground,\n            ...TYPE.body,\n        },\n        note: { ...TYPE.caption, color: theme.mutedForeground },\n        buttons: { flexDirection: 'row', justifyContent: 'flex-end', gap: SPACE.sm },\n        button: {\n            height: 40,\n            paddingHorizontal: SPACE.lg,\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: SPACE.sm,\n        },\n        secondary: { borderWidth: StyleSheet.hairlineWidth, borderColor: theme.borderStrong },\n        primary: { backgroundColor: theme.primary },\n        buttonLabel: { ...TYPE.label },\n        disabled: { opacity: 0.4 },\n    }),\n);\n"],"names":[],"mappings":"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"}