@adminide-stack/yantra-mobile 12.0.108 → 12.0.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/lib/compute.js +57 -1
  2. package/lib/compute.js.map +1 -1
  3. package/lib/config/env-config.js +8 -0
  4. package/lib/config/env-config.js.map +1 -1
  5. package/lib/features/apps/AppsCatalog.js +10 -0
  6. package/lib/features/apps/AppsCatalog.js.map +1 -1
  7. package/lib/features/apps/appArt.js +2 -1
  8. package/lib/features/apps/appArt.js.map +1 -1
  9. package/lib/features/apps/mobileAppCatalog.js +11 -0
  10. package/lib/features/apps/mobileAppCatalog.js.map +1 -1
  11. package/lib/features/apps/nativeAppHandoff.js +2 -1
  12. package/lib/features/apps/nativeAppHandoff.js.map +1 -1
  13. package/lib/features/health/healthSyncStore.js +7 -1
  14. package/lib/features/health/healthSyncStore.js.map +1 -1
  15. package/lib/features/messaging/useChatViewer.js +3 -2
  16. package/lib/features/messaging/useChatViewer.js.map +1 -1
  17. package/lib/features/webbuilder/WebBuilderExperience.js +474 -0
  18. package/lib/features/webbuilder/WebBuilderExperience.js.map +1 -0
  19. package/lib/features/webbuilder/brandKitStorage.js +69 -0
  20. package/lib/features/webbuilder/brandKitStorage.js.map +1 -0
  21. package/lib/features/webbuilder/buildFragments.js +360 -0
  22. package/lib/features/webbuilder/buildFragments.js.map +1 -0
  23. package/lib/features/webbuilder/components/BottomTabs.js +65 -0
  24. package/lib/features/webbuilder/components/BottomTabs.js.map +1 -0
  25. package/lib/features/webbuilder/components/BrandKitSheet.js +197 -0
  26. package/lib/features/webbuilder/components/BrandKitSheet.js.map +1 -0
  27. package/lib/features/webbuilder/components/CodeView.js +99 -0
  28. package/lib/features/webbuilder/components/CodeView.js.map +1 -0
  29. package/lib/features/webbuilder/components/Composer.js +217 -0
  30. package/lib/features/webbuilder/components/Composer.js.map +1 -0
  31. package/lib/features/webbuilder/components/PreviewFrame.js +72 -0
  32. package/lib/features/webbuilder/components/PreviewFrame.js.map +1 -0
  33. package/lib/features/webbuilder/components/PreviewPlaceholder.js +107 -0
  34. package/lib/features/webbuilder/components/PreviewPlaceholder.js.map +1 -0
  35. package/lib/features/webbuilder/components/PreviewScreen.js +200 -0
  36. package/lib/features/webbuilder/components/PreviewScreen.js.map +1 -0
  37. package/lib/features/webbuilder/components/ProjectChat.js +580 -0
  38. package/lib/features/webbuilder/components/ProjectChat.js.map +1 -0
  39. package/lib/features/webbuilder/components/ProjectsScreen.js +339 -0
  40. package/lib/features/webbuilder/components/ProjectsScreen.js.map +1 -0
  41. package/lib/features/webbuilder/components/PublishSheet.js +143 -0
  42. package/lib/features/webbuilder/components/PublishSheet.js.map +1 -0
  43. package/lib/features/webbuilder/components/SiteScoreSheet.js +73 -0
  44. package/lib/features/webbuilder/components/SiteScoreSheet.js.map +1 -0
  45. package/lib/features/webbuilder/components/StudioHome.js +367 -0
  46. package/lib/features/webbuilder/components/StudioHome.js.map +1 -0
  47. package/lib/features/webbuilder/components/TemplateCard.js +73 -0
  48. package/lib/features/webbuilder/components/TemplateCard.js.map +1 -0
  49. package/lib/features/webbuilder/components/TemplatesSheet.js +178 -0
  50. package/lib/features/webbuilder/components/TemplatesSheet.js.map +1 -0
  51. package/lib/features/webbuilder/components/VersionsSheet.js +57 -0
  52. package/lib/features/webbuilder/components/VersionsSheet.js.map +1 -0
  53. package/lib/features/webbuilder/components/ui.js +291 -0
  54. package/lib/features/webbuilder/components/ui.js.map +1 -0
  55. package/lib/features/webbuilder/nativeWebBuilderRegistry.js +15 -0
  56. package/lib/features/webbuilder/nativeWebBuilderRegistry.js.map +1 -0
  57. package/lib/features/webbuilder/studioCatalog.js +147 -0
  58. package/lib/features/webbuilder/studioCatalog.js.map +1 -0
  59. package/lib/features/webbuilder/webbuilderPrompts.js +42 -0
  60. package/lib/features/webbuilder/webbuilderPrompts.js.map +1 -0
  61. package/lib/features/webbuilder/webbuilderTheme.js +63 -0
  62. package/lib/features/webbuilder/webbuilderTheme.js.map +1 -0
  63. package/lib/features/webbuilder/workflow.js +540 -0
  64. package/lib/features/webbuilder/workflow.js.map +1 -0
  65. package/lib/hooks/useChatApi.js +7 -2
  66. package/lib/hooks/useChatApi.js.map +1 -1
  67. package/lib/hooks/useChatStream.js +1 -1
  68. package/lib/hooks/useChatStream.js.map +1 -1
  69. package/lib/index.js +1 -1
  70. package/lib/index.js.map +1 -1
  71. package/lib/routes.json +106 -0
  72. package/lib/screens/WebBuilderNative/index.js +71 -0
  73. package/lib/screens/WebBuilderNative/index.js.map +1 -0
  74. package/lib/screens/WebBuilderNative/useCodeAssistantCatalog.js +45 -0
  75. package/lib/screens/WebBuilderNative/useCodeAssistantCatalog.js.map +1 -0
  76. package/lib/screens/WebBuilderNative/useWebBuilderGallery.js +125 -0
  77. package/lib/screens/WebBuilderNative/useWebBuilderGallery.js.map +1 -0
  78. package/lib/screens/WebBuilderNative/useWebBuilderHost.js +408 -0
  79. package/lib/screens/WebBuilderNative/useWebBuilderHost.js.map +1 -0
  80. package/lib/screens/WebBuilderNative/webbuilderTransport.js +88 -0
  81. package/lib/screens/WebBuilderNative/webbuilderTransport.js.map +1 -0
  82. package/package.json +4 -4
@@ -0,0 +1,72 @@
1
+ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useMemo,useEffect}from'react';import {StyleSheet,View,Text}from'react-native';import {WebView}from'react-native-webview';import {cacheBustedUrl}from'../buildFragments.js';import {Tap,DIM}from'../../inbox/components/Tap.js';import {PreviewPlaceholder}from'./PreviewPlaceholder.js';var __defProp = Object.defineProperty;
2
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
4
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
+ var __spreadValues = (a, b) => {
7
+ for (var prop in b || (b = {}))
8
+ if (__hasOwnProp.call(b, prop))
9
+ __defNormalProp(a, prop, b[prop]);
10
+ if (__getOwnPropSymbols)
11
+ for (var prop of __getOwnPropSymbols(b)) {
12
+ if (__propIsEnum.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ }
15
+ return a;
16
+ };
17
+ const DESKTOP_VIEWPORT_SCRIPT = `(function(){try{var m=document.querySelector('meta[name="viewport"]');if(!m){m=document.createElement('meta');m.setAttribute('name','viewport');(document.head||document.documentElement).appendChild(m);}m.setAttribute('content','width=1280');}catch(e){}})();true;`;
18
+ function PreviewFrame({
19
+ url,
20
+ nonce,
21
+ viewport,
22
+ theme,
23
+ onWake,
24
+ waking = false
25
+ }) {
26
+ const [state, setState] = useState("loading");
27
+ const [retry, setRetry] = useState(0);
28
+ const source = useMemo(() => ({
29
+ uri: nonce || retry ? cacheBustedUrl(url, `${nonce}-${retry}`) : url
30
+ }), [url, nonce, retry]);
31
+ useEffect(() => setState("loading"), [source.uri, viewport]);
32
+ useEffect(() => {
33
+ if (state === "asleep") onWake == null ? void 0 : onWake();
34
+ }, [state]);
35
+ if (state === "asleep" || state === "failed") {
36
+ const trying = state === "asleep" && waking;
37
+ return /* @__PURE__ */ jsxs(View, { style: [styles.fill, {
38
+ backgroundColor: theme.card
39
+ }], testID: "webbuilder-preview-down", children: [
40
+ /* @__PURE__ */ jsx(PreviewPlaceholder, { theme, label: trying || state === "asleep" ? "Loading preview, please wait\u2026" : "The preview didn't load. Check your connection." }),
41
+ !trying ? /* @__PURE__ */ jsx(Tap, { onPress: () => setRetry((n) => n + 1), accessibilityRole: "button", style: styles.retry, pressedStyle: DIM, testID: "webbuilder-preview-retry", children: /* @__PURE__ */ jsx(Text, { style: [styles.retryText, {
42
+ color: theme.accent
43
+ }], children: "Try again" }) }) : null
44
+ ] });
45
+ }
46
+ return /* @__PURE__ */ jsxs(View, { style: [styles.fill, {
47
+ backgroundColor: theme.card
48
+ }], children: [
49
+ /* @__PURE__ */ jsx(WebView, { source, style: styles.fill, originWhitelist: ["*"], javaScriptEnabled: true, domStorageEnabled: true, allowsInlineMediaPlayback: true, setSupportMultipleWindows: false, scalesPageToFit: viewport === "desktop", injectedJavaScript: viewport === "desktop" ? DESKTOP_VIEWPORT_SCRIPT : void 0, onLoadEnd: () => setState((s) => s === "loading" ? "ready" : s), onError: () => setState("failed"), onHttpError: (event) => {
50
+ if (event.nativeEvent.statusCode >= 500) setState("asleep");
51
+ }, testID: "webbuilder-preview" }, `${source.uri}-${viewport}`),
52
+ state === "loading" ? /* @__PURE__ */ jsx(View, { style: [styles.loading, {
53
+ backgroundColor: theme.card
54
+ }], pointerEvents: "none", children: /* @__PURE__ */ jsx(PreviewPlaceholder, { theme, label: "Loading preview, please wait\u2026" }) }) : null
55
+ ] });
56
+ }
57
+ const styles = StyleSheet.create({
58
+ fill: {
59
+ flex: 1
60
+ },
61
+ loading: __spreadValues({}, StyleSheet.absoluteFillObject),
62
+ retry: {
63
+ position: "absolute",
64
+ bottom: 40,
65
+ alignSelf: "center",
66
+ padding: 10
67
+ },
68
+ retryText: {
69
+ fontSize: 15,
70
+ fontWeight: "600"
71
+ }
72
+ });export{DESKTOP_VIEWPORT_SCRIPT,PreviewFrame};//# sourceMappingURL=PreviewFrame.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewFrame.js","sources":["../../../../src/features/webbuilder/components/PreviewFrame.tsx"],"sourcesContent":["/**\n * The live preview: the build's sandbox dev server in a WebView, the phone\n * twin of the web CreationView iframe. `nonce` re-fetches it (the web\n * `?wb=<n>` cache-bust); `viewport` 'desktop' lays the page out at 1280px and\n * fits it to the screen, the way the web device toggle shows a wide layout.\n *\n * A sandbox that slept or whose dev server stopped answers 5xx from the\n * sandbox host (\"Closed Port\", \"Sandbox not found\"). That reads as asleep,\n * with a way to wake it, not as an error page inside the frame.\n */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { WebView } from 'react-native-webview';\nimport { cacheBustedUrl } from '../buildFragments';\nimport type { WebBuilderTheme } from '../webbuilderTheme';\nimport { DIM, Tap } from '../../inbox/components/Tap';\nimport { PreviewPlaceholder } from './PreviewPlaceholder';\n\nexport type PreviewViewport = 'phone' | 'desktop';\n\n/** Lays the page out at desktop width; the WebView then fits it to the frame. */\nexport const DESKTOP_VIEWPORT_SCRIPT = `(function(){try{var m=document.querySelector('meta[name=\"viewport\"]');if(!m){m=document.createElement('meta');m.setAttribute('name','viewport');(document.head||document.documentElement).appendChild(m);}m.setAttribute('content','width=1280');}catch(e){}})();true;`;\n\ntype FrameState = 'loading' | 'ready' | 'asleep' | 'failed';\n\nexport function PreviewFrame({\n url,\n nonce,\n viewport,\n theme,\n onWake,\n waking = false,\n}: {\n url: string;\n nonce: number;\n viewport: PreviewViewport;\n theme: WebBuilderTheme;\n /** Ask the agent to restart the preview. */\n onWake?: () => void;\n /** A wake (or any build) is running; the asleep state shows progress instead of the button. */\n waking?: boolean;\n}) {\n const [state, setState] = useState<FrameState>('loading');\n const [retry, setRetry] = useState(0);\n const source = useMemo(\n () => ({ uri: nonce || retry ? cacheBustedUrl(url, `${nonce}-${retry}`) : url }),\n [url, nonce, retry],\n );\n\n useEffect(() => setState('loading'), [source.uri, viewport]);\n // A sandbox that answers 5xx slept or stopped: start it right away, once per page load.\n useEffect(() => {\n if (state === 'asleep') onWake?.();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state]);\n\n if (state === 'asleep' || state === 'failed') {\n // Asleep is not an error the person has to deal with: the wake already started\n // (effect above), so they see the page on its way, not the sandbox host's 502.\n const trying = state === 'asleep' && waking;\n return (\n <View style={[styles.fill, { backgroundColor: theme.card }]} testID=\"webbuilder-preview-down\">\n <PreviewPlaceholder\n theme={theme}\n label={\n trying || state === 'asleep'\n ? 'Loading preview, please wait…'\n : \"The preview didn't load. Check your connection.\"\n }\n />\n {!trying ? (\n <Tap\n onPress={() => setRetry((n) => n + 1)}\n accessibilityRole=\"button\"\n style={styles.retry}\n pressedStyle={DIM}\n testID=\"webbuilder-preview-retry\"\n >\n <Text style={[styles.retryText, { color: theme.accent }]}>Try again</Text>\n </Tap>\n ) : null}\n </View>\n );\n }\n\n return (\n <View style={[styles.fill, { backgroundColor: theme.card }]}>\n <WebView\n key={`${source.uri}-${viewport}`}\n source={source}\n style={styles.fill}\n originWhitelist={['*']}\n javaScriptEnabled\n domStorageEnabled\n allowsInlineMediaPlayback\n setSupportMultipleWindows={false}\n scalesPageToFit={viewport === 'desktop'}\n injectedJavaScript={viewport === 'desktop' ? DESKTOP_VIEWPORT_SCRIPT : undefined}\n onLoadEnd={() => setState((s) => (s === 'loading' ? 'ready' : s))}\n onError={() => setState('failed')}\n onHttpError={(event) => {\n if (event.nativeEvent.statusCode >= 500) setState('asleep');\n }}\n testID=\"webbuilder-preview\"\n />\n {state === 'loading' ? (\n <View style={[styles.loading, { backgroundColor: theme.card }]} pointerEvents=\"none\">\n <PreviewPlaceholder theme={theme} label=\"Loading preview, please wait…\" />\n </View>\n ) : null}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n fill: { flex: 1 },\n loading: { ...StyleSheet.absoluteFillObject },\n retry: { position: 'absolute', bottom: 40, alignSelf: 'center', padding: 10 },\n retryText: { fontSize: 15, fontWeight: '600' },\n});\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,107 @@
1
+ import {jsxs,jsx}from'react/jsx-runtime';import {StyleSheet,View,Text}from'react-native';function PreviewPlaceholder({
2
+ theme,
3
+ label,
4
+ compact = false
5
+ }) {
6
+ const block = {
7
+ backgroundColor: theme.chip
8
+ };
9
+ return /* @__PURE__ */ jsxs(View, { style: styles.center, accessibilityLabel: label != null ? label : "Loading preview", children: [
10
+ /* @__PURE__ */ jsxs(View, { style: [styles.window, compact && styles.windowCompact, {
11
+ borderColor: theme.border,
12
+ backgroundColor: theme.card
13
+ }], children: [
14
+ /* @__PURE__ */ jsx(View, { style: [styles.chrome, {
15
+ borderBottomColor: theme.border
16
+ }], children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(View, { style: [styles.dot, {
17
+ borderColor: theme.border
18
+ }] }, i)) }),
19
+ /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
20
+ /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
21
+ /* @__PURE__ */ jsx(View, { style: [styles.tile, styles.tileSmall, block] }),
22
+ /* @__PURE__ */ jsx(View, { style: [styles.tile, styles.tileWide, block] })
23
+ ] }),
24
+ /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
25
+ /* @__PURE__ */ jsxs(View, { style: styles.lines, children: [
26
+ /* @__PURE__ */ jsx(View, { style: [styles.line, block] }),
27
+ /* @__PURE__ */ jsx(View, { style: [styles.line, block] }),
28
+ /* @__PURE__ */ jsx(View, { style: [styles.line, styles.lineShort, block] })
29
+ ] }),
30
+ /* @__PURE__ */ jsx(View, { style: [styles.tile, styles.tileSide, block] })
31
+ ] })
32
+ ] })
33
+ ] }),
34
+ label ? /* @__PURE__ */ jsx(Text, { style: [styles.label, {
35
+ color: theme.muted
36
+ }], children: label }) : null
37
+ ] });
38
+ }
39
+ const styles = StyleSheet.create({
40
+ center: {
41
+ flex: 1,
42
+ alignItems: "center",
43
+ justifyContent: "center",
44
+ padding: 24,
45
+ gap: 22
46
+ },
47
+ window: {
48
+ width: 220,
49
+ borderRadius: 14,
50
+ borderWidth: 1,
51
+ overflow: "hidden"
52
+ },
53
+ windowCompact: {
54
+ width: 180
55
+ },
56
+ chrome: {
57
+ flexDirection: "row",
58
+ gap: 5,
59
+ paddingHorizontal: 10,
60
+ paddingVertical: 8,
61
+ borderBottomWidth: 1
62
+ },
63
+ dot: {
64
+ width: 8,
65
+ height: 8,
66
+ borderRadius: 4,
67
+ borderWidth: 1
68
+ },
69
+ body: {
70
+ padding: 14,
71
+ gap: 10
72
+ },
73
+ row: {
74
+ flexDirection: "row",
75
+ gap: 8
76
+ },
77
+ tile: {
78
+ height: 42,
79
+ borderRadius: 8
80
+ },
81
+ tileSmall: {
82
+ flex: 4
83
+ },
84
+ tileWide: {
85
+ flex: 5
86
+ },
87
+ tileSide: {
88
+ flex: 4,
89
+ height: 44
90
+ },
91
+ lines: {
92
+ flex: 5,
93
+ gap: 6,
94
+ justifyContent: "center"
95
+ },
96
+ line: {
97
+ height: 9,
98
+ borderRadius: 5
99
+ },
100
+ lineShort: {
101
+ width: "55%"
102
+ },
103
+ label: {
104
+ fontSize: 15,
105
+ textAlign: "center"
106
+ }
107
+ });export{PreviewPlaceholder};//# sourceMappingURL=PreviewPlaceholder.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewPlaceholder.js","sources":["../../../../src/features/webbuilder/components/PreviewPlaceholder.tsx"],"sourcesContent":["/**\n * A page that is not there yet: a quiet wireframe of a browser window, the way\n * Manus waits for a preview. Shown while a sleeping sandbox is being started,\n * so the person sees \"it is coming\", never the sandbox host's error page.\n */\nimport React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport type { WebBuilderTheme } from '../webbuilderTheme';\n\nexport function PreviewPlaceholder({\n theme,\n label,\n compact = false,\n}: {\n theme: WebBuilderTheme;\n /** One line under the wireframe, e.g. \"Loading preview, please wait…\". */\n label?: string | null;\n /** The chat card's smaller version. */\n compact?: boolean;\n}) {\n const block = { backgroundColor: theme.chip };\n return (\n <View style={styles.center} accessibilityLabel={label ?? 'Loading preview'}>\n <View\n style={[\n styles.window,\n compact && styles.windowCompact,\n { borderColor: theme.border, backgroundColor: theme.card },\n ]}\n >\n <View style={[styles.chrome, { borderBottomColor: theme.border }]}>\n {[0, 1, 2].map((i) => (\n <View key={i} style={[styles.dot, { borderColor: theme.border }]} />\n ))}\n </View>\n <View style={styles.body}>\n <View style={styles.row}>\n <View style={[styles.tile, styles.tileSmall, block]} />\n <View style={[styles.tile, styles.tileWide, block]} />\n </View>\n <View style={styles.row}>\n <View style={styles.lines}>\n <View style={[styles.line, block]} />\n <View style={[styles.line, block]} />\n <View style={[styles.line, styles.lineShort, block]} />\n </View>\n <View style={[styles.tile, styles.tileSide, block]} />\n </View>\n </View>\n </View>\n {label ? <Text style={[styles.label, { color: theme.muted }]}>{label}</Text> : null}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24, gap: 22 },\n window: { width: 220, borderRadius: 14, borderWidth: 1, overflow: 'hidden' },\n windowCompact: { width: 180 },\n chrome: { flexDirection: 'row', gap: 5, paddingHorizontal: 10, paddingVertical: 8, borderBottomWidth: 1 },\n dot: { width: 8, height: 8, borderRadius: 4, borderWidth: 1 },\n body: { padding: 14, gap: 10 },\n row: { flexDirection: 'row', gap: 8 },\n tile: { height: 42, borderRadius: 8 },\n tileSmall: { flex: 4 },\n tileWide: { flex: 5 },\n tileSide: { flex: 4, height: 44 },\n lines: { flex: 5, gap: 6, justifyContent: 'center' },\n line: { height: 9, borderRadius: 5 },\n lineShort: { width: '55%' },\n label: { fontSize: 15, textAlign: 'center' },\n});\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,200 @@
1
+ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useEffect}from'react';import {StyleSheet,View,Text,ActivityIndicator,Linking,Platform,ActionSheetIOS,Alert}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Tap,DIM}from'../../inbox/components/Tap.js';import {PreviewFrame}from'./PreviewFrame.js';import {CenteredState}from'./ui.js';function BarButton({
2
+ icon,
3
+ label,
4
+ onPress,
5
+ theme,
6
+ active = false,
7
+ disabled = false
8
+ }) {
9
+ return /* @__PURE__ */ jsx(Tap, { onPress, disabled, accessibilityRole: "button", accessibilityLabel: label, accessibilityState: {
10
+ selected: active,
11
+ disabled
12
+ }, hitSlop: 6, style: [styles.barButton, disabled && styles.disabled], pressedStyle: DIM, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 20, color: active ? theme.accent : theme.ink }) });
13
+ }
14
+ function pathOf(url) {
15
+ const match = /^https?:\/\/[^/]+(\/[^?#]*)?/i.exec(url != null ? url : "");
16
+ return (match == null ? void 0 : match[1]) || "/";
17
+ }
18
+ function PreviewScreen({
19
+ build,
20
+ building,
21
+ loading,
22
+ previewNonce,
23
+ onReload,
24
+ onHome,
25
+ onWake,
26
+ waking = false,
27
+ onPublish,
28
+ publishLabel = "Publish",
29
+ error,
30
+ theme,
31
+ bottomInset
32
+ }) {
33
+ var _a;
34
+ const [viewport, setViewport] = useState("phone");
35
+ const url = (_a = build == null ? void 0 : build.previewUrl) != null ? _a : null;
36
+ const canPublish = Boolean(build == null ? void 0 : build.sandboxId);
37
+ useEffect(() => setViewport("phone"), [build == null ? void 0 : build.key]);
38
+ let stage;
39
+ if (url) {
40
+ stage = /* @__PURE__ */ jsx(PreviewFrame, { url, nonce: previewNonce, viewport, theme, onWake, waking });
41
+ } else if (building || loading) {
42
+ stage = /* @__PURE__ */ jsx(CenteredState, { icon: "web", title: building ? "Building your site" : "Loading preview", body: building ? `${building.statusText} The preview appears here when it is ready.` : "Please wait\u2026", theme, busy: true });
43
+ } else {
44
+ stage = /* @__PURE__ */ jsx(CenteredState, { icon: error ? "alert-circle-outline" : "application-outline", title: error ? "The build didn't finish" : "No preview yet", body: error != null ? error : "Ask the agent to build the site; the preview shows up here.", theme });
45
+ }
46
+ const pickDevice = () => {
47
+ const options = [{
48
+ label: "Phone",
49
+ value: "phone"
50
+ }, {
51
+ label: "Desktop",
52
+ value: "desktop"
53
+ }];
54
+ if (Platform.OS === "ios") {
55
+ ActionSheetIOS.showActionSheetWithOptions({
56
+ title: "Preview as",
57
+ options: [...options.map((o) => o.value === viewport ? `\u2713 ${o.label}` : o.label), "Cancel"],
58
+ cancelButtonIndex: options.length
59
+ }, (index) => {
60
+ const picked = options[index];
61
+ if (picked) setViewport(picked.value);
62
+ });
63
+ return;
64
+ }
65
+ Alert.alert("Preview as", void 0, [...options.map((o) => ({
66
+ text: o.label,
67
+ onPress: () => setViewport(o.value)
68
+ })), {
69
+ text: "Cancel",
70
+ style: "cancel"
71
+ }]);
72
+ };
73
+ return /* @__PURE__ */ jsxs(View, { style: [styles.fill, {
74
+ backgroundColor: theme.stage
75
+ }], children: [
76
+ /* @__PURE__ */ jsxs(View, { style: [styles.toolbar, {
77
+ backgroundColor: theme.card,
78
+ borderBottomColor: theme.border
79
+ }], children: [
80
+ /* @__PURE__ */ jsxs(Tap, { onPress: pickDevice, disabled: !url, accessibilityRole: "button", accessibilityLabel: `Preview as ${viewport}`, style: [styles.device, {
81
+ borderColor: theme.border,
82
+ backgroundColor: theme.card
83
+ }, !url && styles.disabled], pressedStyle: DIM, testID: "webbuilder-preview-device", children: [
84
+ /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: viewport === "phone" ? "cellphone" : "monitor", size: 20, color: theme.ink }),
85
+ /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 18, color: theme.muted })
86
+ ] }),
87
+ /* @__PURE__ */ jsxs(View, { style: [styles.bar, {
88
+ borderColor: theme.border,
89
+ backgroundColor: theme.screen
90
+ }], children: [
91
+ /* @__PURE__ */ jsx(Tap, { onPress: onHome, disabled: !url, accessibilityRole: "button", accessibilityLabel: "Back to the home page", style: styles.pathTap, pressedStyle: DIM, children: /* @__PURE__ */ jsx(Text, { style: [styles.path, {
92
+ color: theme.ink
93
+ }], numberOfLines: 1, children: pathOf(url) }) }),
94
+ building && url ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accent, style: styles.barSpin }) : null,
95
+ /* @__PURE__ */ jsx(BarButton, { icon: "open-in-new", label: "Open in the browser", onPress: () => {
96
+ if (url) Linking.openURL(url).catch(() => void 0);
97
+ }, theme, disabled: !url }),
98
+ /* @__PURE__ */ jsx(BarButton, { icon: "refresh", label: "Reload", onPress: onReload, theme, disabled: !url })
99
+ ] }),
100
+ /* @__PURE__ */ jsxs(Tap, { onPress: onPublish, disabled: !canPublish, accessibilityRole: "button", accessibilityLabel: "Publish", style: [styles.publish, {
101
+ backgroundColor: theme.ink
102
+ }, !canPublish && styles.disabled], pressedStyle: DIM, testID: "webbuilder-preview-publish", children: [
103
+ /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "export-variant", size: 17, color: theme.card }),
104
+ /* @__PURE__ */ jsx(Text, { style: [styles.publishText, {
105
+ color: theme.card
106
+ }], children: publishLabel })
107
+ ] })
108
+ ] }),
109
+ /* @__PURE__ */ jsx(View, { style: [styles.stage, {
110
+ paddingBottom: bottomInset + 10
111
+ }], children: /* @__PURE__ */ jsx(View, { style: [styles.frame, {
112
+ backgroundColor: theme.card,
113
+ borderColor: theme.border,
114
+ shadowColor: theme.isDark ? "#000" : "#1c1917"
115
+ }], children: stage }) })
116
+ ] });
117
+ }
118
+ const styles = StyleSheet.create({
119
+ fill: {
120
+ flex: 1
121
+ },
122
+ toolbar: {
123
+ flexDirection: "row",
124
+ alignItems: "center",
125
+ gap: 8,
126
+ paddingHorizontal: 12,
127
+ paddingVertical: 10,
128
+ borderBottomWidth: StyleSheet.hairlineWidth
129
+ },
130
+ device: {
131
+ flexDirection: "row",
132
+ alignItems: "center",
133
+ gap: 4,
134
+ height: 44,
135
+ paddingHorizontal: 10,
136
+ borderRadius: 12,
137
+ borderWidth: StyleSheet.hairlineWidth
138
+ },
139
+ bar: {
140
+ flex: 1,
141
+ flexDirection: "row",
142
+ alignItems: "center",
143
+ height: 44,
144
+ paddingLeft: 14,
145
+ paddingRight: 4,
146
+ borderRadius: 22,
147
+ borderWidth: StyleSheet.hairlineWidth
148
+ },
149
+ pathTap: {
150
+ flex: 1,
151
+ justifyContent: "center",
152
+ height: 44
153
+ },
154
+ path: {
155
+ fontSize: 15,
156
+ fontWeight: "500"
157
+ },
158
+ barButton: {
159
+ width: 36,
160
+ height: 36,
161
+ borderRadius: 18,
162
+ alignItems: "center",
163
+ justifyContent: "center"
164
+ },
165
+ barSpin: {
166
+ marginRight: 4
167
+ },
168
+ publish: {
169
+ flexDirection: "row",
170
+ alignItems: "center",
171
+ gap: 6,
172
+ height: 44,
173
+ paddingHorizontal: 14,
174
+ borderRadius: 12
175
+ },
176
+ publishText: {
177
+ fontSize: 15,
178
+ fontWeight: "700"
179
+ },
180
+ disabled: {
181
+ opacity: 0.35
182
+ },
183
+ stage: {
184
+ flex: 1,
185
+ padding: 12
186
+ },
187
+ frame: {
188
+ flex: 1,
189
+ borderRadius: 22,
190
+ borderWidth: StyleSheet.hairlineWidth,
191
+ overflow: "hidden",
192
+ shadowOpacity: 0.06,
193
+ shadowRadius: 14,
194
+ shadowOffset: {
195
+ width: 0,
196
+ height: 4
197
+ },
198
+ elevation: 2
199
+ }
200
+ });export{PreviewScreen};//# sourceMappingURL=PreviewScreen.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewScreen.js","sources":["../../../../src/features/webbuilder/components/PreviewScreen.tsx"],"sourcesContent":["/**\n * The site, full screen - what the chat's site card opens, as Manus shows it: a\n * slim address bar (home, the page, open in the browser, reload) over the live\n * preview. While the agent is still building it says so instead of a blank page.\n */\nimport React, { useEffect, useState } from 'react';\nimport { ActionSheetIOS, ActivityIndicator, Alert, Linking, Platform, StyleSheet, Text, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { DIM, Tap } from '../../inbox/components/Tap';\nimport type { WebBuilderBuild, WebBuilderBuilding } from '../types';\nimport type { WebBuilderTheme } from '../webbuilderTheme';\nimport { PreviewFrame, type PreviewViewport } from './PreviewFrame';\nimport { CenteredState, type IconName } from './ui';\n\nfunction BarButton({\n icon,\n label,\n onPress,\n theme,\n active = false,\n disabled = false,\n}: {\n icon: IconName;\n label: string;\n onPress: () => void;\n theme: WebBuilderTheme;\n active?: boolean;\n disabled?: boolean;\n}) {\n return (\n <Tap\n onPress={onPress}\n disabled={disabled}\n accessibilityRole=\"button\"\n accessibilityLabel={label}\n accessibilityState={{ selected: active, disabled }}\n hitSlop={6}\n style={[styles.barButton, disabled && styles.disabled]}\n pressedStyle={DIM}\n >\n <MaterialCommunityIcons name={icon} size={20} color={active ? theme.accent : theme.ink} />\n </Tap>\n );\n}\n\nfunction pathOf(url: string | null): string {\n const match = /^https?:\\/\\/[^/]+(\\/[^?#]*)?/i.exec(url ?? '');\n return match?.[1] || '/';\n}\n\nexport function PreviewScreen({\n build,\n building,\n loading,\n previewNonce,\n onReload,\n onHome,\n onWake,\n waking = false,\n onPublish,\n publishLabel = 'Publish',\n error,\n theme,\n bottomInset,\n}: {\n build: WebBuilderBuild | null;\n building: WebBuilderBuilding | null;\n loading: boolean;\n previewNonce: number;\n onReload: () => void;\n onHome: () => void;\n onWake: () => void;\n /** A wake is running: the page stays \"on its way\". */\n waking?: boolean;\n onPublish: () => void;\n /** \"Publish\", or \"Publishing…\" while it runs. */\n publishLabel?: string;\n error?: string | null;\n theme: WebBuilderTheme;\n bottomInset: number;\n}) {\n const [viewport, setViewport] = useState<PreviewViewport>('phone');\n const url = build?.previewUrl ?? null;\n const canPublish = Boolean(build?.sandboxId);\n useEffect(() => setViewport('phone'), [build?.key]);\n\n let stage: React.ReactNode;\n if (url) {\n stage = (\n <PreviewFrame\n url={url}\n nonce={previewNonce}\n viewport={viewport}\n theme={theme}\n onWake={onWake}\n waking={waking}\n />\n );\n } else if (building || loading) {\n stage = (\n <CenteredState\n icon=\"web\"\n title={building ? 'Building your site' : 'Loading preview'}\n body={building ? `${building.statusText} The preview appears here when it is ready.` : 'Please wait…'}\n theme={theme}\n busy\n />\n );\n } else {\n stage = (\n <CenteredState\n icon={error ? 'alert-circle-outline' : 'application-outline'}\n title={error ? \"The build didn't finish\" : 'No preview yet'}\n body={error ?? 'Ask the agent to build the site; the preview shows up here.'}\n theme={theme}\n />\n );\n }\n\n const pickDevice = () => {\n const options: Array<{ label: string; value: PreviewViewport }> = [\n { label: 'Phone', value: 'phone' },\n { label: 'Desktop', value: 'desktop' },\n ];\n if (Platform.OS === 'ios') {\n ActionSheetIOS.showActionSheetWithOptions(\n {\n title: 'Preview as',\n options: [...options.map((o) => (o.value === viewport ? `✓ ${o.label}` : o.label)), 'Cancel'],\n cancelButtonIndex: options.length,\n },\n (index) => {\n const picked = options[index];\n if (picked) setViewport(picked.value);\n },\n );\n return;\n }\n Alert.alert('Preview as', undefined, [\n ...options.map((o) => ({ text: o.label, onPress: () => setViewport(o.value) })),\n { text: 'Cancel', style: 'cancel' as const },\n ]);\n };\n\n return (\n <View style={[styles.fill, { backgroundColor: theme.stage }]}>\n <View style={[styles.toolbar, { backgroundColor: theme.card, borderBottomColor: theme.border }]}>\n <Tap\n onPress={pickDevice}\n disabled={!url}\n accessibilityRole=\"button\"\n accessibilityLabel={`Preview as ${viewport}`}\n style={[\n styles.device,\n { borderColor: theme.border, backgroundColor: theme.card },\n !url && styles.disabled,\n ]}\n pressedStyle={DIM}\n testID=\"webbuilder-preview-device\"\n >\n <MaterialCommunityIcons\n name={viewport === 'phone' ? 'cellphone' : 'monitor'}\n size={20}\n color={theme.ink}\n />\n <MaterialCommunityIcons name=\"chevron-down\" size={18} color={theme.muted} />\n </Tap>\n <View style={[styles.bar, { borderColor: theme.border, backgroundColor: theme.screen }]}>\n <Tap\n onPress={onHome}\n disabled={!url}\n accessibilityRole=\"button\"\n accessibilityLabel=\"Back to the home page\"\n style={styles.pathTap}\n pressedStyle={DIM}\n >\n <Text style={[styles.path, { color: theme.ink }]} numberOfLines={1}>\n {pathOf(url)}\n </Text>\n </Tap>\n {building && url ? (\n <ActivityIndicator size=\"small\" color={theme.accent} style={styles.barSpin} />\n ) : null}\n <BarButton\n icon=\"open-in-new\"\n label=\"Open in the browser\"\n onPress={() => {\n if (url) Linking.openURL(url).catch(() => undefined);\n }}\n theme={theme}\n disabled={!url}\n />\n <BarButton icon=\"refresh\" label=\"Reload\" onPress={onReload} theme={theme} disabled={!url} />\n </View>\n <Tap\n onPress={onPublish}\n disabled={!canPublish}\n accessibilityRole=\"button\"\n accessibilityLabel=\"Publish\"\n style={[styles.publish, { backgroundColor: theme.ink }, !canPublish && styles.disabled]}\n pressedStyle={DIM}\n testID=\"webbuilder-preview-publish\"\n >\n <MaterialCommunityIcons name=\"export-variant\" size={17} color={theme.card} />\n <Text style={[styles.publishText, { color: theme.card }]}>{publishLabel}</Text>\n </Tap>\n </View>\n <View style={[styles.stage, { paddingBottom: bottomInset + 10 }]}>\n <View\n style={[\n styles.frame,\n {\n backgroundColor: theme.card,\n borderColor: theme.border,\n shadowColor: theme.isDark ? '#000' : '#1c1917',\n },\n ]}\n >\n {stage}\n </View>\n </View>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n fill: { flex: 1 },\n toolbar: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n paddingHorizontal: 12,\n paddingVertical: 10,\n borderBottomWidth: StyleSheet.hairlineWidth,\n },\n device: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n height: 44,\n paddingHorizontal: 10,\n borderRadius: 12,\n borderWidth: StyleSheet.hairlineWidth,\n },\n bar: {\n flex: 1,\n flexDirection: 'row',\n alignItems: 'center',\n height: 44,\n paddingLeft: 14,\n paddingRight: 4,\n borderRadius: 22,\n borderWidth: StyleSheet.hairlineWidth,\n },\n pathTap: { flex: 1, justifyContent: 'center', height: 44 },\n path: { fontSize: 15, fontWeight: '500' },\n barButton: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },\n barSpin: { marginRight: 4 },\n publish: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 6,\n height: 44,\n paddingHorizontal: 14,\n borderRadius: 12,\n },\n publishText: { fontSize: 15, fontWeight: '700' },\n disabled: { opacity: 0.35 },\n stage: { flex: 1, padding: 12 },\n frame: {\n flex: 1,\n borderRadius: 22,\n borderWidth: StyleSheet.hairlineWidth,\n overflow: 'hidden',\n shadowOpacity: 0.06,\n shadowRadius: 14,\n shadowOffset: { width: 0, height: 4 },\n elevation: 2,\n },\n});\n"],"names":[],"mappings":"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"}