@adminide-stack/yantra-mobile 12.0.108-alpha.0 → 12.0.109-alpha.0

package/lib/features/webbuilder/components/Composer.js

@@ -0,0 +1,217 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {forwardRef}from'react';import {View,StyleSheet,TextInput,Text,ScrollView}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Tap,DIM}from'../../inbox/components/Tap.js';import {hostLabel}from'../studioCatalog.js';function Tool({
+  icon,
+  label,
+  value,
+  onPress,
+  onClear,
+  theme,
+  leading,
+  testID
+}) {
+  if (!value) {
+    return /* @__PURE__ */ jsx(Tap, { onPress, accessibilityRole: "button", accessibilityLabel: label, hitSlop: 4, style: [styles.toolIcon, {
+      borderColor: theme.border
+    }], pressedStyle: DIM, testID, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 19, color: theme.muted }) });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.toolChip, {
+    backgroundColor: theme.accentSoft,
+    borderColor: theme.accentBorder
+  }], children: [
+    /* @__PURE__ */ jsxs(Tap, { onPress, accessibilityRole: "button", accessibilityLabel: `${label}: ${value}`, style: styles.toolChipMain, pressedStyle: DIM, testID, children: [
+      leading != null ? leading : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 16, color: theme.accent }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.toolChipLabel, {
+        color: theme.accent
+      }], numberOfLines: 1, children: value })
+    ] }),
+    onClear ? /* @__PURE__ */ jsx(Tap, { onPress: onClear, accessibilityRole: "button", accessibilityLabel: `Remove ${label.toLowerCase()}`, hitSlop: 8, style: styles.toolChipClear, pressedStyle: DIM, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close-circle", size: 16, color: theme.accent }) }) : /* @__PURE__ */ jsx(View, { style: styles.toolChipEnd })
+  ] });
+}
+const Composer = forwardRef(function Composer2({
+  value,
+  onChangeText,
+  onSubmit,
+  template,
+  onTemplate,
+  onClearTemplate,
+  lookUrl,
+  onLookUrl,
+  lookInvalid,
+  lookOpen,
+  onLookOpen,
+  brand,
+  onBrand,
+  connecting = null,
+  canSubmit,
+  theme
+}, ref) {
+  const lookHost = lookUrl && !lookInvalid ? hostLabel(lookUrl) : null;
+  const ready = canSubmit && !connecting;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.box, {
+    backgroundColor: theme.card,
+    borderColor: theme.border,
+    shadowColor: theme.isDark ? "#000" : "#7c2d12"
+  }], children: [
+    /* @__PURE__ */ jsx(TextInput, { ref, value, onChangeText, placeholder: "Describe the site you want to build\u2026", placeholderTextColor: theme.faint, multiline: true, style: [styles.input, {
+      color: theme.ink
+    }], accessibilityLabel: "Describe what you want to build", testID: "webbuilder-brief" }),
+    lookOpen ? /* @__PURE__ */ jsxs(View, { style: [styles.look, {
+      backgroundColor: theme.chip,
+      borderColor: lookInvalid ? theme.crit : "transparent"
+    }], children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "web", size: 16, color: theme.muted }),
+      /* @__PURE__ */ jsx(TextInput, { value: lookUrl, onChangeText: onLookUrl, placeholder: "Look like\u2026 https://stripe.com", placeholderTextColor: theme.faint, autoCapitalize: "none", autoCorrect: false, keyboardType: "url", autoFocus: !lookUrl, onSubmitEditing: () => onLookOpen(false), style: [styles.lookInput, {
+        color: theme.ink
+      }], accessibilityLabel: "Make it look like this site", testID: "webbuilder-look" }),
+      /* @__PURE__ */ jsx(Tap, { onPress: () => {
+        onLookUrl("");
+        onLookOpen(false);
+      }, accessibilityRole: "button", accessibilityLabel: "Remove the look-alike site", hitSlop: 8, pressedStyle: DIM, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 16, color: theme.muted }) })
+    ] }) : null,
+    connecting ? /* @__PURE__ */ jsxs(View, { style: styles.status, accessibilityLiveRegion: "polite", children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.statusDot, {
+        backgroundColor: theme.warn
+      }] }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.statusText, {
+        color: theme.muted
+      }], numberOfLines: 1, children: connecting })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(View, { style: [styles.toolbar, {
+      borderTopColor: theme.border
+    }], children: [
+      /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: styles.tools, contentContainerStyle: styles.toolsContent, children: [
+        /* @__PURE__ */ jsx(Tool, { icon: "view-grid-plus-outline", label: "Template", value: template == null ? void 0 : template.title, onPress: onTemplate, onClear: onClearTemplate, theme, testID: "webbuilder-composer-template" }),
+        /* @__PURE__ */ jsx(Tool, { icon: "web", label: "Look like", value: lookOpen ? null : lookHost, onPress: () => onLookOpen(true), onClear: () => onLookUrl(""), theme, testID: "webbuilder-composer-look" }),
+        /* @__PURE__ */ jsx(Tool, { icon: "palette-outline", label: "Brand kit", value: brand ? brand.name || "Brand" : null, onPress: onBrand, theme, leading: (brand == null ? void 0 : brand.colors.length) ? /* @__PURE__ */ jsx(View, { style: styles.dots, children: brand.colors.slice(0, 3).map((c) => /* @__PURE__ */ jsx(View, { style: [styles.dot, {
+          backgroundColor: c,
+          borderColor: theme.card
+        }] }, c)) }) : void 0, testID: "webbuilder-composer-brand" })
+      ] }),
+      /* @__PURE__ */ jsx(Tap, { onPress: onSubmit, disabled: !ready, accessibilityRole: "button", accessibilityLabel: "Start building", accessibilityState: {
+        disabled: !ready
+      }, style: [styles.send, {
+        backgroundColor: ready ? theme.accent : theme.chip
+      }], pressedStyle: DIM, testID: "webbuilder-start", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-up", size: 21, color: ready ? theme.accentInk : theme.faint }) })
+    ] })
+  ] });
+});
+const styles = StyleSheet.create({
+  box: {
+    borderRadius: 22,
+    borderWidth: StyleSheet.hairlineWidth,
+    paddingTop: 14,
+    paddingHorizontal: 14,
+    paddingBottom: 10,
+    gap: 10,
+    shadowOpacity: 0.07,
+    shadowRadius: 16,
+    shadowOffset: {
+      width: 0,
+      height: 6
+    },
+    elevation: 3
+  },
+  input: {
+    minHeight: 64,
+    maxHeight: 160,
+    fontSize: 17,
+    lineHeight: 24,
+    padding: 0,
+    textAlignVertical: "top"
+  },
+  look: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 10
+  },
+  lookInput: {
+    flex: 1,
+    fontSize: 15,
+    paddingVertical: 9
+  },
+  status: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  statusDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4
+  },
+  statusText: {
+    flex: 1,
+    fontSize: 13
+  },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingTop: 10,
+    borderTopWidth: StyleSheet.hairlineWidth
+  },
+  tools: {
+    flex: 1
+  },
+  toolsContent: {
+    gap: 8,
+    alignItems: "center"
+  },
+  toolIcon: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toolChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 38,
+    maxWidth: 200,
+    borderRadius: 19,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  toolChipMain: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingLeft: 12,
+    flexShrink: 1
+  },
+  toolChipLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    flexShrink: 1
+  },
+  toolChipClear: {
+    paddingLeft: 6,
+    paddingRight: 10,
+    height: 38,
+    justifyContent: "center"
+  },
+  toolChipEnd: {
+    width: 12
+  },
+  dots: {
+    flexDirection: "row",
+    marginRight: 4
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    borderWidth: 1.5,
+    marginRight: -4
+  },
+  send: {
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});export{Composer};//# sourceMappingURL=Composer.js.map

package/lib/features/webbuilder/components/Composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.js","sources":["../../../../src/features/webbuilder/components/Composer.tsx"],"sourcesContent":["/**\n * The prompt box - what to build, and in one toolbar row the three ways the web\n * studio lets you shape it: a starter template, a site to look like, the brand\n * kit. A tool shows as a small icon until it is set, then as a chip naming the\n * choice, with a way to remove it. Send is the only filled control; while the\n * builder is still connecting it rests disabled and the box says so.\n */\nimport React, { forwardRef } from 'react';\nimport { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { DIM, Tap } from '../../inbox/components/Tap';\nimport { hostLabel, type BrandKit } from '../studioCatalog';\nimport type { WebBuilderTemplate } from '../workflow';\nimport type { WebBuilderTheme } from '../webbuilderTheme';\nimport type { IconName } from './ui';\n\nfunction Tool({\n    icon,\n    label,\n    value,\n    onPress,\n    onClear,\n    theme,\n    leading,\n    testID,\n}: {\n    icon: IconName;\n    /** What the tool does, for screen readers. */\n    label: string;\n    /** The choice once made (a template name, a host, a brand); unset when empty. */\n    value?: string | null;\n    onPress: () => void;\n    onClear?: () => void;\n    theme: WebBuilderTheme;\n    leading?: React.ReactNode;\n    testID?: string;\n}) {\n    if (!value) {\n        return (\n            <Tap\n                onPress={onPress}\n                accessibilityRole=\"button\"\n                accessibilityLabel={label}\n                hitSlop={4}\n                style={[styles.toolIcon, { borderColor: theme.border }]}\n                pressedStyle={DIM}\n                testID={testID}\n            >\n                <MaterialCommunityIcons name={icon} size={19} color={theme.muted} />\n            </Tap>\n        );\n    }\n    return (\n        <View style={[styles.toolChip, { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder }]}>\n            <Tap\n                onPress={onPress}\n                accessibilityRole=\"button\"\n                accessibilityLabel={`${label}: ${value}`}\n                style={styles.toolChipMain}\n                pressedStyle={DIM}\n                testID={testID}\n            >\n                {leading ?? <MaterialCommunityIcons name={icon} size={16} color={theme.accent} />}\n                <Text style={[styles.toolChipLabel, { color: theme.accent }]} numberOfLines={1}>\n                    {value}\n                </Text>\n            </Tap>\n            {onClear ? (\n                <Tap\n                    onPress={onClear}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={`Remove ${label.toLowerCase()}`}\n                    hitSlop={8}\n                    style={styles.toolChipClear}\n                    pressedStyle={DIM}\n                >\n                    <MaterialCommunityIcons name=\"close-circle\" size={16} color={theme.accent} />\n                </Tap>\n            ) : (\n                <View style={styles.toolChipEnd} />\n            )}\n        </View>\n    );\n}\n\nexport interface ComposerProps {\n    value: string;\n    onChangeText: (text: string) => void;\n    onSubmit: () => void;\n    template: WebBuilderTemplate | null;\n    onTemplate: () => void;\n    onClearTemplate: () => void;\n    lookUrl: string;\n    onLookUrl: (url: string) => void;\n    lookInvalid: boolean;\n    /** The look-alike field is open (the home's \"A site you love\" card opens it too). */\n    lookOpen: boolean;\n    onLookOpen: (open: boolean) => void;\n    brand: BrandKit | null;\n    onBrand: () => void;\n    /** The builder is still connecting: send waits, and this sentence says why. */\n    connecting?: string | null;\n    canSubmit: boolean;\n    theme: WebBuilderTheme;\n}\n\nexport const Composer = forwardRef<TextInput, ComposerProps>(function Composer(\n    {\n        value,\n        onChangeText,\n        onSubmit,\n        template,\n        onTemplate,\n        onClearTemplate,\n        lookUrl,\n        onLookUrl,\n        lookInvalid,\n        lookOpen,\n        onLookOpen,\n        brand,\n        onBrand,\n        connecting = null,\n        canSubmit,\n        theme,\n    },\n    ref,\n) {\n    const lookHost = lookUrl && !lookInvalid ? hostLabel(lookUrl) : null;\n    const ready = canSubmit && !connecting;\n    return (\n        <View\n            style={[\n                styles.box,\n                {\n                    backgroundColor: theme.card,\n                    borderColor: theme.border,\n                    shadowColor: theme.isDark ? '#000' : '#7c2d12',\n                },\n            ]}\n        >\n            <TextInput\n                ref={ref}\n                value={value}\n                onChangeText={onChangeText}\n                placeholder=\"Describe the site you want to build…\"\n                placeholderTextColor={theme.faint}\n                multiline\n                style={[styles.input, { color: theme.ink }]}\n                accessibilityLabel=\"Describe what you want to build\"\n                testID=\"webbuilder-brief\"\n            />\n\n            {lookOpen ? (\n                <View\n                    style={[\n                        styles.look,\n                        { backgroundColor: theme.chip, borderColor: lookInvalid ? theme.crit : 'transparent' },\n                    ]}\n                >\n                    <MaterialCommunityIcons name=\"web\" size={16} color={theme.muted} />\n                    <TextInput\n                        value={lookUrl}\n                        onChangeText={onLookUrl}\n                        placeholder=\"Look like… https://stripe.com\"\n                        placeholderTextColor={theme.faint}\n                        autoCapitalize=\"none\"\n                        autoCorrect={false}\n                        keyboardType=\"url\"\n                        autoFocus={!lookUrl}\n                        onSubmitEditing={() => onLookOpen(false)}\n                        style={[styles.lookInput, { color: theme.ink }]}\n                        accessibilityLabel=\"Make it look like this site\"\n                        testID=\"webbuilder-look\"\n                    />\n                    <Tap\n                        onPress={() => {\n                            onLookUrl('');\n                            onLookOpen(false);\n                        }}\n                        accessibilityRole=\"button\"\n                        accessibilityLabel=\"Remove the look-alike site\"\n                        hitSlop={8}\n                        pressedStyle={DIM}\n                    >\n                        <MaterialCommunityIcons name=\"close\" size={16} color={theme.muted} />\n                    </Tap>\n                </View>\n            ) : null}\n\n            {connecting ? (\n                <View style={styles.status} accessibilityLiveRegion=\"polite\">\n                    <View style={[styles.statusDot, { backgroundColor: theme.warn }]} />\n                    <Text style={[styles.statusText, { color: theme.muted }]} numberOfLines={1}>\n                        {connecting}\n                    </Text>\n                </View>\n            ) : null}\n\n            <View style={[styles.toolbar, { borderTopColor: theme.border }]}>\n                <ScrollView\n                    horizontal\n                    showsHorizontalScrollIndicator={false}\n                    keyboardShouldPersistTaps=\"handled\"\n                    style={styles.tools}\n                    contentContainerStyle={styles.toolsContent}\n                >\n                    <Tool\n                        icon=\"view-grid-plus-outline\"\n                        label=\"Template\"\n                        value={template?.title}\n                        onPress={onTemplate}\n                        onClear={onClearTemplate}\n                        theme={theme}\n                        testID=\"webbuilder-composer-template\"\n                    />\n                    <Tool\n                        icon=\"web\"\n                        label=\"Look like\"\n                        value={lookOpen ? null : lookHost}\n                        onPress={() => onLookOpen(true)}\n                        onClear={() => onLookUrl('')}\n                        theme={theme}\n                        testID=\"webbuilder-composer-look\"\n                    />\n                    <Tool\n                        icon=\"palette-outline\"\n                        label=\"Brand kit\"\n                        value={brand ? brand.name || 'Brand' : null}\n                        onPress={onBrand}\n                        theme={theme}\n                        leading={\n                            brand?.colors.length ? (\n                                <View style={styles.dots}>\n                                    {brand.colors.slice(0, 3).map((c) => (\n                                        <View\n                                            key={c}\n                                            style={[styles.dot, { backgroundColor: c, borderColor: theme.card }]}\n                                        />\n                                    ))}\n                                </View>\n                            ) : undefined\n                        }\n                        testID=\"webbuilder-composer-brand\"\n                    />\n                </ScrollView>\n                <Tap\n                    onPress={onSubmit}\n                    disabled={!ready}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Start building\"\n                    accessibilityState={{ disabled: !ready }}\n                    style={[styles.send, { backgroundColor: ready ? theme.accent : theme.chip }]}\n                    pressedStyle={DIM}\n                    testID=\"webbuilder-start\"\n                >\n                    <MaterialCommunityIcons name=\"arrow-up\" size={21} color={ready ? theme.accentInk : theme.faint} />\n                </Tap>\n            </View>\n        </View>\n    );\n});\n\nconst styles = StyleSheet.create({\n    box: {\n        borderRadius: 22,\n        borderWidth: StyleSheet.hairlineWidth,\n        paddingTop: 14,\n        paddingHorizontal: 14,\n        paddingBottom: 10,\n        gap: 10,\n        shadowOpacity: 0.07,\n        shadowRadius: 16,\n        shadowOffset: { width: 0, height: 6 },\n        elevation: 3,\n    },\n    input: {\n        minHeight: 64,\n        maxHeight: 160,\n        fontSize: 17,\n        lineHeight: 24,\n        padding: 0,\n        textAlignVertical: 'top',\n    },\n    look: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 8,\n        borderRadius: 12,\n        borderWidth: 1,\n        paddingHorizontal: 10,\n    },\n    lookInput: { flex: 1, fontSize: 15, paddingVertical: 9 },\n    status: { flexDirection: 'row', alignItems: 'center', gap: 8 },\n    statusDot: { width: 7, height: 7, borderRadius: 4 },\n    statusText: { flex: 1, fontSize: 13 },\n    toolbar: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 10,\n        paddingTop: 10,\n        borderTopWidth: StyleSheet.hairlineWidth,\n    },\n    tools: { flex: 1 },\n    toolsContent: { gap: 8, alignItems: 'center' },\n    toolIcon: {\n        width: 38,\n        height: 38,\n        borderRadius: 19,\n        borderWidth: StyleSheet.hairlineWidth,\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    toolChip: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        height: 38,\n        maxWidth: 200,\n        borderRadius: 19,\n        borderWidth: StyleSheet.hairlineWidth,\n    },\n    toolChipMain: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingLeft: 12, flexShrink: 1 },\n    toolChipLabel: { fontSize: 14, fontWeight: '600', flexShrink: 1 },\n    toolChipClear: { paddingLeft: 6, paddingRight: 10, height: 38, justifyContent: 'center' },\n    toolChipEnd: { width: 12 },\n    dots: { flexDirection: 'row', marginRight: 4 },\n    dot: { width: 12, height: 12, borderRadius: 6, borderWidth: 1.5, marginRight: -4 },\n    send: { width: 42, height: 42, borderRadius: 21, alignItems: 'center', justifyContent: 'center' },\n});\n"],"names":["Composer"],"mappings":"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"}

package/lib/features/webbuilder/components/PreviewFrame.js

@@ -0,0 +1,72 @@
+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;
+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 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;`;
+function PreviewFrame({
+  url,
+  nonce,
+  viewport,
+  theme,
+  onWake,
+  waking = false
+}) {
+  const [state, setState] = useState("loading");
+  const [retry, setRetry] = useState(0);
+  const source = useMemo(() => ({
+    uri: nonce || retry ? cacheBustedUrl(url, `${nonce}-${retry}`) : url
+  }), [url, nonce, retry]);
+  useEffect(() => setState("loading"), [source.uri, viewport]);
+  useEffect(() => {
+    if (state === "asleep") onWake == null ? void 0 : onWake();
+  }, [state]);
+  if (state === "asleep" || state === "failed") {
+    const trying = state === "asleep" && waking;
+    return /* @__PURE__ */ jsxs(View, { style: [styles.fill, {
+      backgroundColor: theme.card
+    }], testID: "webbuilder-preview-down", children: [
+      /* @__PURE__ */ jsx(PreviewPlaceholder, { theme, label: trying || state === "asleep" ? "Loading preview, please wait\u2026" : "The preview didn't load. Check your connection." }),
+      !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, {
+        color: theme.accent
+      }], children: "Try again" }) }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.fill, {
+    backgroundColor: theme.card
+  }], children: [
+    /* @__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) => {
+      if (event.nativeEvent.statusCode >= 500) setState("asleep");
+    }, testID: "webbuilder-preview" }, `${source.uri}-${viewport}`),
+    state === "loading" ? /* @__PURE__ */ jsx(View, { style: [styles.loading, {
+      backgroundColor: theme.card
+    }], pointerEvents: "none", children: /* @__PURE__ */ jsx(PreviewPlaceholder, { theme, label: "Loading preview, please wait\u2026" }) }) : null
+  ] });
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  loading: __spreadValues({}, StyleSheet.absoluteFillObject),
+  retry: {
+    position: "absolute",
+    bottom: 40,
+    alignSelf: "center",
+    padding: 10
+  },
+  retryText: {
+    fontSize: 15,
+    fontWeight: "600"
+  }
+});export{DESKTOP_VIEWPORT_SCRIPT,PreviewFrame};//# sourceMappingURL=PreviewFrame.js.map

package/lib/features/webbuilder/components/PreviewFrame.js.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;AAoBO,MAAM,uBAA0B,GAAA,CAAA,sQAAA;AAEhC,SAAS,YAAa,CAAA;AAAA,EAC3B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAS,GAAA;AACX,CASG,EAAA;AACD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAqB,SAAS,CAAA;AACxD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA;AACpC,EAAM,MAAA,MAAA,GAAS,QAAQ,OAAO;AAAA,IAC5B,GAAA,EAAK,KAAS,IAAA,KAAA,GAAQ,cAAe,CAAA,GAAA,EAAK,GAAG,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAI,GAAA;AAAA,GAC/D,CAAA,EAAA,CAAC,GAAK,EAAA,KAAA,EAAO,KAAK,CAAC,CAAA;AACvB,EAAU,SAAA,CAAA,MAAM,SAAS,SAAS,CAAA,EAAG,CAAC,MAAO,CAAA,GAAA,EAAK,QAAQ,CAAC,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAU,QAAU,EAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,EAAA;AAAA,GAE1B,EAAG,CAAC,KAAK,CAAC,CAAA;AACV,EAAI,IAAA,KAAA,KAAU,QAAY,IAAA,KAAA,KAAU,QAAU,EAAA;AAG5C,IAAM,MAAA,MAAA,GAAS,UAAU,QAAY,IAAA,MAAA;AACrC,IAAA,uBAAQ,IAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,CAAC,OAAO,IAAM,EAAA;AAAA,MAChC,iBAAiB,KAAM,CAAA;AAAA,KACxB,CAAG,EAAA,MAAA,EAAO,yBACC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,sBAAmB,KAAc,EAAA,KAAA,EAAO,UAAU,KAAU,KAAA,QAAA,GAAW,uCAAkC,iDAAmD,EAAA,CAAA;AAAA,MAC5J,CAAC,MAAS,mBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAS,MAAM,QAAS,CAAA,CAAA,CAAA,KAAK,CAAI,GAAA,CAAC,CAAG,EAAA,iBAAA,EAAkB,UAAS,KAAO,EAAA,MAAA,CAAO,KAAO,EAAA,YAAA,EAAc,GAAK,EAAA,MAAA,EAAO,0BACvH,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAO,CAAC,MAAA,CAAO,SAAW,EAAA;AAAA,QAC9C,OAAO,KAAM,CAAA;AAAA,OACd,CAAA,EAAG,QAAS,EAAA,WAAA,EAAA,CAAA,EACD,CAAS,GAAA;AAAA,KACjB,EAAA,CAAA;AAAA;AAEV,EAAA,uBAAQ,IAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,CAAC,OAAO,IAAM,EAAA;AAAA,IAChC,iBAAiB,KAAM,CAAA;AAAA,GACxB,CACS,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAA0C,MAAgB,EAAA,KAAA,EAAO,OAAO,IAAM,EAAA,eAAA,EAAiB,CAAC,GAAG,CAAA,EAAG,iBAAiB,EAAA,IAAA,EAAC,mBAAiB,IAAC,EAAA,yBAAA,EAAyB,MAAC,yBAA2B,EAAA,KAAA,EAAO,iBAAiB,QAAa,KAAA,SAAA,EAAW,kBAAoB,EAAA,QAAA,KAAa,YAAY,uBAA0B,GAAA,MAAA,EAAW,WAAW,MAAM,QAAA,CAAS,OAAK,CAAM,KAAA,SAAA,GAAY,OAAU,GAAA,CAAC,GAAG,OAAS,EAAA,MAAM,SAAS,QAAQ,CAAA,EAAG,aAAa,CAAS,KAAA,KAAA;AAChc,MAAA,IAAI,KAAM,CAAA,WAAA,CAAY,UAAc,IAAA,GAAA,WAAc,QAAQ,CAAA;AAAA,KAC5D,EAAG,QAAO,oBAFY,EAAA,EAAA,CAAA,EAAG,OAAO,GAAG,CAAA,CAAA,EAAI,QAAQ,CAEhB,CAAA,CAAA;AAAA,IACtB,UAAU,SAAY,mBAAA,GAAA,CAAC,QAAK,KAAO,EAAA,CAAC,OAAO,OAAS,EAAA;AAAA,MAC3D,iBAAiB,KAAM,CAAA;AAAA,KACxB,CAAG,EAAA,aAAA,EAAc,MACF,EAAA,QAAA,kBAAA,GAAA,CAAC,sBAAmB,KAAc,EAAA,KAAA,EAAM,oCAAgC,EAAA,CAAA,EAC5E,CAAU,GAAA;AAAA,GAClB,EAAA,CAAA;AACR;AACA,MAAM,MAAA,GAAS,WAAW,MAAO,CAAA;AAAA,EAC/B,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA;AAAA,GACR;AAAA,EACA,OAAA,EAAS,mBACJ,UAAW,CAAA,kBAAA,CAAA;AAAA,EAEhB,KAAO,EAAA;AAAA,IACL,QAAU,EAAA,UAAA;AAAA,IACV,MAAQ,EAAA,EAAA;AAAA,IACR,SAAW,EAAA,QAAA;AAAA,IACX,OAAS,EAAA;AAAA,GACX;AAAA,EACA,SAAW,EAAA;AAAA,IACT,QAAU,EAAA,EAAA;AAAA,IACV,UAAY,EAAA;AAAA;AAEhB,CAAC,CAAA"}

package/lib/features/webbuilder/components/PreviewPlaceholder.js

@@ -0,0 +1,107 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {StyleSheet,View,Text}from'react-native';function PreviewPlaceholder({
+  theme,
+  label,
+  compact = false
+}) {
+  const block = {
+    backgroundColor: theme.chip
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.center, accessibilityLabel: label != null ? label : "Loading preview", children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.window, compact && styles.windowCompact, {
+      borderColor: theme.border,
+      backgroundColor: theme.card
+    }], children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.chrome, {
+        borderBottomColor: theme.border
+      }], children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(View, { style: [styles.dot, {
+        borderColor: theme.border
+      }] }, i)) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+          /* @__PURE__ */ jsx(View, { style: [styles.tile, styles.tileSmall, block] }),
+          /* @__PURE__ */ jsx(View, { style: [styles.tile, styles.tileWide, block] })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.lines, children: [
+            /* @__PURE__ */ jsx(View, { style: [styles.line, block] }),
+            /* @__PURE__ */ jsx(View, { style: [styles.line, block] }),
+            /* @__PURE__ */ jsx(View, { style: [styles.line, styles.lineShort, block] })
+          ] }),
+          /* @__PURE__ */ jsx(View, { style: [styles.tile, styles.tileSide, block] })
+        ] })
+      ] })
+    ] }),
+    label ? /* @__PURE__ */ jsx(Text, { style: [styles.label, {
+      color: theme.muted
+    }], children: label }) : null
+  ] });
+}
+const styles = StyleSheet.create({
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+    gap: 22
+  },
+  window: {
+    width: 220,
+    borderRadius: 14,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  windowCompact: {
+    width: 180
+  },
+  chrome: {
+    flexDirection: "row",
+    gap: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderBottomWidth: 1
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    borderWidth: 1
+  },
+  body: {
+    padding: 14,
+    gap: 10
+  },
+  row: {
+    flexDirection: "row",
+    gap: 8
+  },
+  tile: {
+    height: 42,
+    borderRadius: 8
+  },
+  tileSmall: {
+    flex: 4
+  },
+  tileWide: {
+    flex: 5
+  },
+  tileSide: {
+    flex: 4,
+    height: 44
+  },
+  lines: {
+    flex: 5,
+    gap: 6,
+    justifyContent: "center"
+  },
+  line: {
+    height: 9,
+    borderRadius: 5
+  },
+  lineShort: {
+    width: "55%"
+  },
+  label: {
+    fontSize: 15,
+    textAlign: "center"
+  }
+});export{PreviewPlaceholder};//# sourceMappingURL=PreviewPlaceholder.js.map

package/lib/features/webbuilder/components/PreviewPlaceholder.js.map

@@ -0,0 +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":"yFAQO,SAAS,kBAAmB,CAAA;AAAA,EACjC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAU,GAAA;AACZ,CAMG,EAAA;AACD,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,iBAAiB,KAAM,CAAA;AAAA,GACzB;AACA,EAAA,4BAAQ,IAAK,EAAA,EAAA,KAAA,EAAO,OAAO,MAAQ,EAAA,kBAAA,EAAoB,wBAAS,iBACtD,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAK,KAAO,EAAA,CAAC,OAAO,MAAQ,EAAA,OAAA,IAAW,OAAO,aAAe,EAAA;AAAA,MACpE,aAAa,KAAM,CAAA,MAAA;AAAA,MACnB,iBAAiB,KAAM,CAAA;AAAA,KACxB,CACW,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAO,CAAC,MAAA,CAAO,MAAQ,EAAA;AAAA,QACrC,mBAAmB,KAAM,CAAA;AAAA,OAC1B,CAAA,EACc,QAAC,EAAA,CAAA,CAAA,EAAG,GAAG,CAAC,CAAA,CAAE,GAAI,CAAA,CAAA,CAAA,qBAAM,GAAA,CAAA,IAAA,EAAA,EAAa,KAAO,EAAA,CAAC,OAAO,GAAK,EAAA;AAAA,QAChE,aAAa,KAAM,CAAA;AAAA,OACpB,CAAA,EAAA,EAF0C,CAEvC,CAAE,CACE,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,MAAA,CAAO,IAChB,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,MAAA,CAAO,GAChB,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,EAAA,EAAK,OAAO,CAAC,MAAA,CAAO,MAAM,MAAO,CAAA,SAAA,EAAW,KAAK,CAAG,EAAA,CAAA;AAAA,0BACrD,GAAA,CAAC,QAAK,KAAO,EAAA,CAAC,OAAO,IAAM,EAAA,MAAA,CAAO,QAAU,EAAA,KAAK,CAAG,EAAA;AAAA,SACxD,EAAA,CAAA;AAAA,wBACC,IAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,MAAA,CAAO,GAChB,EAAA,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,MAAA,CAAO,KAChB,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAK,KAAO,EAAA,CAAC,MAAO,CAAA,IAAA,EAAM,KAAK,CAAG,EAAA,CAAA;AAAA,gCAClC,IAAK,EAAA,EAAA,KAAA,EAAO,CAAC,MAAO,CAAA,IAAA,EAAM,KAAK,CAAG,EAAA,CAAA;AAAA,4BACnC,GAAA,CAAC,QAAK,KAAO,EAAA,CAAC,OAAO,IAAM,EAAA,MAAA,CAAO,SAAW,EAAA,KAAK,CAAG,EAAA;AAAA,WACzD,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,QAAK,KAAO,EAAA,CAAC,OAAO,IAAM,EAAA,MAAA,CAAO,QAAU,EAAA,KAAK,CAAG,EAAA;AAAA,SACxD,EAAA;AAAA,OACJ,EAAA;AAAA,KACJ,EAAA,CAAA;AAAA,IACC,wBAAS,GAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,CAAC,OAAO,KAAO,EAAA;AAAA,MAC3C,OAAO,KAAM,CAAA;AAAA,KACd,CAAI,EAAA,QAAA,EAAA,KAAA,EAAM,CAAU,GAAA;AAAA,GACjB,EAAA,CAAA;AACR;AACA,MAAM,MAAA,GAAS,WAAW,MAAO,CAAA;AAAA,EAC/B,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,CAAA;AAAA,IACN,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,EAAA;AAAA,IACT,GAAK,EAAA;AAAA,GACP;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,GAAA;AAAA,IACP,YAAc,EAAA,EAAA;AAAA,IACd,WAAa,EAAA,CAAA;AAAA,IACb,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,aAAe,EAAA;AAAA,IACb,KAAO,EAAA;AAAA,GACT;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,aAAe,EAAA,KAAA;AAAA,IACf,GAAK,EAAA,CAAA;AAAA,IACL,iBAAmB,EAAA,EAAA;AAAA,IACnB,eAAiB,EAAA,CAAA;AAAA,IACjB,iBAAmB,EAAA;AAAA,GACrB;AAAA,EACA,GAAK,EAAA;AAAA,IACH,KAAO,EAAA,CAAA;AAAA,IACP,MAAQ,EAAA,CAAA;AAAA,IACR,YAAc,EAAA,CAAA;AAAA,IACd,WAAa,EAAA;AAAA,GACf;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA,EAAA;AAAA,IACT,GAAK,EAAA;AAAA,GACP;AAAA,EACA,GAAK,EAAA;AAAA,IACH,aAAe,EAAA,KAAA;AAAA,IACf,GAAK,EAAA;AAAA,GACP;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,EAAA;AAAA,IACR,YAAc,EAAA;AAAA,GAChB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,IAAM,EAAA;AAAA,GACR;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,GACR;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,CAAA;AAAA,IACN,MAAQ,EAAA;AAAA,GACV;AAAA,EACA,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,CAAA;AAAA,IACN,GAAK,EAAA,CAAA;AAAA,IACL,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,CAAA;AAAA,IACR,YAAc,EAAA;AAAA,GAChB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAO,EAAA;AAAA,GACT;AAAA,EACA,KAAO,EAAA;AAAA,IACL,QAAU,EAAA,EAAA;AAAA,IACV,SAAW,EAAA;AAAA;AAEf,CAAC,CAAA"}