@adminide-stack/yantra-mobile 12.0.125-alpha.1 → 12.0.126

package/lib/features/canvas/canvasUi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasUi.js","sources":["../../../src/features/canvas/canvasUi.tsx"],"sourcesContent":["/**\n * Canvas UI vocabulary - the shared spacing, radii, type ramp and the small\n * set of primitives every canvas screen builds from, so a section header, a\n * filter control or a primary button looks the same on the home, the board,\n * the generator and the panels.\n *\n * Colours come from `canvasTheme` (light / dark); this file only decides\n * shape and rhythm. Restrained by design: neutrals carry the surface, the\n * theme's primary (lime) marks the one main action, nothing else is accented.\n */\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    Animated,\n    Easing,\n    Pressable as RNPressable,\n    ScrollView,\n    StyleSheet,\n    Text,\n    View,\n    type StyleProp,\n    type TextStyle,\n    type ViewStyle,\n} from 'react-native';\nimport { themedStyles, useCanvasTheme, type CanvasPalette } from './canvasTheme';\n\ntype IconName = React.ComponentProps<typeof MaterialCommunityIcons>['name'];\n\ntype RNPressableProps = React.ComponentProps<typeof RNPressable>;\n\n/** `StyleSheet.flatten` where the runtime has it (a test double may not). */\nconst flattenStyle = (style: RNPressableProps['style']) =>\n    typeof StyleSheet.flatten === 'function' && typeof style !== 'function' ? StyleSheet.flatten(style) : style;\n\n/**\n * Drop-in `Pressable` for canvas screens. The host compiles JSX through\n * NativeWind (`jsxImportSource: 'nativewind'`), whose wrapper drops a style\n * passed as a FUNCTION (`style={({ pressed }) => [...]}`) inside this OTA\n * remote - the element then renders with no style at all (no width, no fill,\n * no row layout). This resolves function styles and children here, from its\n * own pressed state, and hands the wrapped Pressable plain values only.\n */\nexport const Pressable = forwardRef<React.ElementRef<typeof RNPressable>, RNPressableProps>(function Pressable(\n    { style, children, onPressIn, onPressOut, ...rest },\n    ref,\n) {\n    const [pressed, setPressed] = useState(false);\n    const handleIn = useCallback<NonNullable<RNPressableProps['onPressIn']>>(\n        (event) => {\n            setPressed(true);\n            onPressIn?.(event);\n        },\n        [onPressIn],\n    );\n    const handleOut = useCallback<NonNullable<RNPressableProps['onPressOut']>>(\n        (event) => {\n            setPressed(false);\n            onPressOut?.(event);\n        },\n        [onPressOut],\n    );\n    const state = { pressed, hovered: false };\n    const resolvedStyle = typeof style === 'function' ? style(state) : style;\n    const resolvedChildren = typeof children === 'function' ? children(state) : children;\n    return (\n        <RNPressable\n            ref={ref}\n            {...rest}\n            onPressIn={handleIn}\n            onPressOut={handleOut}\n            style={flattenStyle(resolvedStyle)}\n        >\n            {resolvedChildren}\n        </RNPressable>\n    );\n});\n\n/** 4pt rhythm; sections breathe more than the items inside them. */\nexport const SPACE = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, xxl: 32 } as const;\n\nexport const RADIUS = { sm: 8, md: 12, lg: 16, xl: 20, pill: 999 } as const;\n\n/** Product ramp, ~1.2 between steps. */\nexport const TYPE = {\n    caption: { fontSize: 12, lineHeight: 16, fontWeight: '500' },\n    label: { fontSize: 13, lineHeight: 18, fontWeight: '600' },\n    body: { fontSize: 15, lineHeight: 21, fontWeight: '400' },\n    title: { fontSize: 17, lineHeight: 22, fontWeight: '600' },\n    heading: { fontSize: 22, lineHeight: 28, fontWeight: '700' },\n    display: { fontSize: 28, lineHeight: 34, fontWeight: '700' },\n} as const satisfies Record<string, TextStyle>;\n\n/** Minimum comfortable touch target. */\nexport const HIT = 44;\n\n/** A section's title with an optional trailing action (\"See all\", a count). */\nexport function SectionHeader({\n    title,\n    detail,\n    action,\n    onAction,\n    style,\n}: {\n    title: string;\n    detail?: string;\n    action?: string;\n    onAction?: () => void;\n    style?: StyleProp<ViewStyle>;\n}) {\n    const styles = makeStyles(useCanvasTheme());\n    return (\n        <View style={[styles.sectionHeader, style]}>\n            <View style={styles.sectionTitleRow}>\n                <Text style={styles.sectionTitle} accessibilityRole=\"header\">\n                    {title}\n                </Text>\n                {detail ? <Text style={styles.sectionDetail}>{detail}</Text> : null}\n            </View>\n            {action && onAction ? (\n                <Pressable onPress={onAction} hitSlop={10} accessibilityRole=\"button\">\n                    <Text style={styles.sectionAction}>{action}</Text>\n                </Pressable>\n            ) : null}\n        </View>\n    );\n}\n\n/** A single-choice filter: one rounded track, the chosen option raised. */\nexport function Segmented<T extends string>({\n    options,\n    value,\n    onChange,\n    style,\n}: {\n    options: ReadonlyArray<{ id: T; label: string }>;\n    value: T;\n    onChange: (id: T) => void;\n    style?: StyleProp<ViewStyle>;\n}) {\n    const styles = makeStyles(useCanvasTheme());\n    return (\n        <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            // flexGrow 0: a horizontal ScrollView otherwise swells into any spare height.\n            style={[styles.segmentScroll, style]}\n            contentContainerStyle={styles.segmentTrack}\n        >\n            {options.map((option) => {\n                const on = option.id === value;\n                return (\n                    <Pressable\n                        key={option.id}\n                        onPress={() => onChange(option.id)}\n                        style={[styles.segment, on && styles.segmentOn]}\n                        accessibilityRole=\"tab\"\n                        accessibilityState={{ selected: on }}\n                    >\n                        <Text style={[styles.segmentLabel, on && styles.segmentLabelOn]}>{option.label}</Text>\n                    </Pressable>\n                );\n            })}\n        </ScrollView>\n    );\n}\n\n/** Round icon-only control (theme toggle, close, more). */\nexport function IconButton({\n    icon,\n    onPress,\n    label,\n    tone = 'plain',\n    size = 40,\n}: {\n    icon: IconName;\n    onPress: () => void;\n    label: string;\n    tone?: 'plain' | 'filled';\n    size?: number;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    return (\n        <Pressable\n            onPress={onPress}\n            hitSlop={Math.max(0, (HIT - size) / 2)}\n            style={({ pressed }) => [\n                styles.iconButton,\n                { width: size, height: size, borderRadius: size / 2 },\n                tone === 'filled' && styles.iconButtonFilled,\n                pressed && styles.pressed,\n            ]}\n            accessibilityRole=\"button\"\n            accessibilityLabel={label}\n        >\n            <MaterialCommunityIcons name={icon} size={Math.round(size * 0.5)} color={theme.foreground} />\n        </Pressable>\n    );\n}\n\n/** The one main action on a surface: lime, dark ink. `secondary` is the quiet neutral twin. */\nexport function ActionButton({\n    label,\n    icon,\n    onPress,\n    variant = 'primary',\n    disabled,\n    style,\n}: {\n    label: string;\n    icon?: IconName;\n    onPress: () => void;\n    variant?: 'primary' | 'secondary';\n    disabled?: boolean;\n    style?: StyleProp<ViewStyle>;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const primary = variant === 'primary';\n    const ink = primary ? theme.primaryForeground : theme.foreground;\n    return (\n        <Pressable\n            onPress={onPress}\n            disabled={disabled}\n            style={({ pressed }) => [\n                styles.action,\n                primary ? styles.actionPrimary : styles.actionSecondary,\n                disabled && styles.disabled,\n                pressed && !disabled && styles.pressed,\n                style,\n            ]}\n            accessibilityRole=\"button\"\n            accessibilityState={{ disabled: Boolean(disabled) }}\n        >\n            {icon ? <MaterialCommunityIcons name={icon} size={18} color={ink} /> : null}\n            <Text style={[styles.actionLabel, { color: ink }]}>{label}</Text>\n        </Pressable>\n    );\n}\n\n/**\n * A loading block that breathes (opacity 0.45 to 1, 900ms each way) in place\n * of the content it stands for. Absolute-fills its parent unless given a size.\n */\nexport function Skeleton({ style, radius = 0 }: { style?: StyleProp<ViewStyle>; radius?: number }) {\n    const theme = useCanvasTheme();\n    const pulse = useRef(new Animated.Value(0.45)).current;\n    useEffect(() => {\n        const loop = Animated.loop(\n            Animated.sequence([\n                Animated.timing(pulse, {\n                    toValue: 1,\n                    duration: 900,\n                    easing: Easing.out(Easing.quad),\n                    useNativeDriver: true,\n                }),\n                Animated.timing(pulse, {\n                    toValue: 0.45,\n                    duration: 900,\n                    easing: Easing.in(Easing.quad),\n                    useNativeDriver: true,\n                }),\n            ]),\n        );\n        loop.start();\n        return () => loop.stop();\n    }, [pulse]);\n    return (\n        <Animated.View\n            pointerEvents=\"none\"\n            style={[\n                style ?? StyleSheet.absoluteFillObject,\n                { borderRadius: radius, backgroundColor: theme.isDark ? '#262626' : '#e7e7ea', opacity: pulse },\n            ]}\n        />\n    );\n}\n\n/**\n * Soft cover washes for media that has no picture to show (a video whose frame\n * is not in, a link that will not load). Picked by a stable hash of `seed`, so\n * the same board always wears the same colour.\n */\nconst COVER_WASHES: Array<{ light: [string, string]; dark: [string, string] }> = [\n    { light: ['#fde7d9', '#c2410c'], dark: ['#3a2418', '#fdba74'] },\n    { light: ['#e0ecff', '#1d4ed8'], dark: ['#1a2540', '#93c5fd'] },\n    { light: ['#e6f6ec', '#047857'], dark: ['#15291f', '#6ee7b7'] },\n    { light: ['#efe7ff', '#6d28d9'], dark: ['#261d3d', '#c4b5fd'] },\n    { light: ['#fde4ec', '#be185d'], dark: ['#3a1a27', '#f9a8d4'] },\n    { light: ['#fdf3d4', '#a16207'], dark: ['#33290f', '#fcd34d'] },\n];\n\nexport function coverWash(seed: string, isDark: boolean): { wash: string; ink: string } {\n    let h = 0;\n    for (let i = 0; i < seed.length; i += 1) h = (h * 31 + seed.charCodeAt(i)) | 0;\n    const pick = COVER_WASHES[Math.abs(h) % COVER_WASHES.length];\n    const [wash, ink] = isDark ? pick.dark : pick.light;\n    return { wash, ink };\n}\n\n/** A tinted cover with a frosted icon badge: the \"no picture\" state that still looks intended. */\nexport function CoverPlaceholder({ seed, icon, label }: { seed: string; icon: IconName; label?: string }) {\n    const theme = useCanvasTheme();\n    const { wash, ink } = coverWash(seed, theme.isDark);\n    return (\n        <View style={[StyleSheet.absoluteFillObject, placeholderStyles.wrap, { backgroundColor: wash }]}>\n            <View\n                style={[\n                    placeholderStyles.badge,\n                    { backgroundColor: theme.isDark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)' },\n                ]}\n            >\n                <MaterialCommunityIcons name={icon} size={26} color={ink} />\n            </View>\n            {label ? <Text style={[placeholderStyles.label, { color: ink }]}>{label}</Text> : null}\n        </View>\n    );\n}\n\nconst placeholderStyles = StyleSheet.create({\n    wrap: { alignItems: 'center', justifyContent: 'center', gap: SPACE.sm },\n    badge: { width: 56, height: 56, borderRadius: 28, alignItems: 'center', justifyContent: 'center' },\n    label: { ...TYPE.caption, fontWeight: '600' },\n});\n\n/** Press feedback every canvas pressable shares. */\nexport const pressedStyle = (pressed: boolean): ViewStyle | null =>\n    pressed ? { opacity: 0.72, transform: [{ scale: 0.98 }] } : null;\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        sectionHeader: {\n            flexDirection: 'row',\n            alignItems: 'baseline',\n            justifyContent: 'space-between',\n            gap: SPACE.md,\n            marginBottom: SPACE.md,\n        },\n        sectionTitleRow: { flexDirection: 'row', alignItems: 'baseline', gap: SPACE.sm, flexShrink: 1 },\n        sectionTitle: { ...TYPE.title, color: theme.foreground },\n        sectionDetail: { ...TYPE.caption, color: theme.mutedForeground },\n        sectionAction: { ...TYPE.label, color: theme.mutedForeground },\n        segmentScroll: { flexGrow: 0, alignSelf: 'flex-start' },\n        segmentTrack: {\n            flexDirection: 'row',\n            padding: 3,\n            gap: 2,\n            borderRadius: RADIUS.pill,\n            backgroundColor: theme.card,\n        },\n        segment: {\n            minHeight: 34,\n            paddingHorizontal: SPACE.lg,\n            borderRadius: RADIUS.pill,\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n        segmentOn: {\n            backgroundColor: theme.isDark ? theme.secondary : theme.surface,\n            shadowColor: '#000',\n            shadowOpacity: theme.isDark ? 0 : 0.08,\n            shadowRadius: 4,\n            shadowOffset: { width: 0, height: 1 },\n            elevation: theme.isDark ? 0 : 1,\n        },\n        segmentLabel: { ...TYPE.label, color: theme.mutedForeground },\n        segmentLabelOn: { color: theme.foreground },\n        iconButton: { alignItems: 'center', justifyContent: 'center' },\n        iconButtonFilled: { backgroundColor: theme.card },\n        action: {\n            minHeight: HIT,\n            paddingHorizontal: SPACE.lg + 2,\n            borderRadius: RADIUS.pill,\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: SPACE.sm,\n        },\n        actionPrimary: { backgroundColor: theme.primary },\n        actionSecondary: { backgroundColor: theme.card },\n        actionLabel: { ...TYPE.label, fontSize: 15 },\n        disabled: { opacity: 0.4 },\n        pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] },\n    }),\n);\n"],"names":["Pressable","RNPressable"],"mappings":"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"}

package/lib/features/canvas/recorder/CameraRecorderExperience.js

@@ -1,8 +1,29 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState}from'react';import {StyleSheet,View,Pressable,Text,ActivityIndicator}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useSafeAreaInsets}from'react-native-safe-area-context';import {friendlyMediaError}from'../videoEditor/mediaActions.js';function CameraRecorderExperience({
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState}from'react';import {View,Text,ActivityIndicator,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useSafeAreaInsets}from'react-native-safe-area-context';import {friendlyMediaError}from'../videoEditor/mediaActions.js';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Pressable,pressedStyle,RADIUS,SPACE,HIT,TYPE}from'../canvasUi.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 CameraRecorderExperience({
   onClose,
   onPick,
   onPlaced
 }) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
   const insets = useSafeAreaInsets();
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(null);
@@ -28,82 +49,118 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState}from'react';i
     paddingBottom: insets.bottom + 16
   }], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
-      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#e2e8f0" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, style: ({
+        pressed
+      }) => [styles.close, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk }) }),
       /* @__PURE__ */ jsx(Text, { style: styles.title, children: "Record" }),
-      /* @__PURE__ */ jsx(View, { style: {
-        width: 22
-      } })
+      /* @__PURE__ */ jsx(View, { style: styles.close })
     ] }),
-    /* @__PURE__ */ jsx(Text, { style: styles.fine, children: "Capture camera video or a still for the board. Full desktop screen share stays on web." }),
-    /* @__PURE__ */ jsx(Pressable, { onPress: () => void capture("camera-video"), disabled: busy, style: [styles.cta, busy && styles.ctaOff], children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#0f172a" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video-outline", size: 20, color: "#0f172a" }),
-      /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Record video" })
-    ] }) }),
-    /* @__PURE__ */ jsxs(Pressable, { onPress: () => void capture("camera-photo"), disabled: busy, style: [styles.secondary, busy && styles.ctaOff], children: [
-      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "camera-outline", size: 20, color: "#F7F7FA" }),
-      /* @__PURE__ */ jsx(Text, { style: styles.secondaryLabel, children: "Take photo" })
+    /* @__PURE__ */ jsxs(View, { style: styles.stage, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.stageWell, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "record-circle-outline", size: 40, color: "#f7f7fa" }) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.fine, children: "Capture camera video or a still for the board. Full desktop screen share stays on web." })
     ] }),
-    error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: error }) : null
+    error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: error }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => void capture("camera-video"), disabled: busy, style: ({
+        pressed
+      }) => [styles.cta, busy && styles.ctaOff, pressedStyle(pressed && !busy)], children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.primaryForeground }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video-outline", size: 20, color: theme.primaryForeground }),
+        /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: "Record video" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: () => void capture("camera-photo"), disabled: busy, style: ({
+        pressed
+      }) => [styles.secondary, busy && styles.ctaOff, pressedStyle(pressed && !busy)], children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "camera-outline", size: 20, color: theme.edInk }),
+        /* @__PURE__ */ jsx(Text, { style: styles.secondaryLabel, children: "Take photo" })
+      ] })
+    ] })
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: "#0B0B0E",
-    paddingHorizontal: 16
+    backgroundColor: theme.edBg,
+    paddingHorizontal: SPACE.lg
   },
   head: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    marginBottom: 10
+    minHeight: HIT + SPACE.xs,
+    marginHorizontal: -8,
+    marginBottom: SPACE.md
   },
-  title: {
-    fontSize: 17,
-    fontWeight: "700",
-    color: "#F7F7FA"
+  close: {
+    width: HIT,
+    height: HIT,
+    borderRadius: HIT / 2,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  fine: {
-    color: "#7A7A88",
-    fontSize: 12,
-    lineHeight: 16,
-    marginBottom: 20
+  title: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.edInk
+  }),
+  stage: {
+    flex: 1,
+    borderRadius: RADIUS.xl,
+    backgroundColor: "#050506",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: SPACE.xl,
+    gap: SPACE.lg
+  },
+  stageWell: {
+    width: 84,
+    height: 84,
+    borderRadius: 42,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(255,255,255,0.08)"
+  },
+  fine: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    lineHeight: 20,
+    color: "rgba(247,247,250,0.72)",
+    textAlign: "center"
+  }),
+  actions: {
+    gap: SPACE.sm,
+    marginTop: SPACE.lg
   },
   cta: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8,
-    paddingVertical: 14,
-    borderRadius: 12,
-    backgroundColor: "#F7F7FA",
-    marginBottom: 10
+    gap: SPACE.sm,
+    minHeight: 52,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.primary
   },
   secondary: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8,
-    paddingVertical: 14,
-    borderRadius: 12,
-    backgroundColor: "#1F1F24"
+    gap: SPACE.sm,
+    minHeight: 52,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised
   },
   ctaOff: {
     opacity: 0.45
   },
-  ctaLabel: {
-    fontWeight: "700",
-    color: "#0f172a",
-    fontSize: 15
-  },
-  secondaryLabel: {
-    fontWeight: "600",
-    color: "#F7F7FA",
-    fontSize: 15
-  },
-  error: {
-    color: "#FECACA",
-    fontSize: 12,
-    marginTop: 14
-  }
-});export{CameraRecorderExperience};//# sourceMappingURL=CameraRecorderExperience.js.map
+  ctaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 16,
+    color: theme.primaryForeground
+  }),
+  secondaryLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 16,
+    color: theme.edInk
+  }),
+  error: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edDanger,
+    marginTop: SPACE.md,
+    padding: SPACE.md,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edDangerSoft
+  })
+}));export{CameraRecorderExperience};//# sourceMappingURL=CameraRecorderExperience.js.map

package/lib/features/canvas/recorder/CameraRecorderExperience.js.map

@@ -1 +1 @@
-{"version":3,"file":"CameraRecorderExperience.js","sources":["../../../../src/features/canvas/recorder/CameraRecorderExperience.tsx"],"sourcesContent":["/**\n * Phone twin of web ScreenRecorder — camera (+ optional mic) capture onto the board.\n * True display capture (getDisplayMedia / ReplayKit broadcast) stays system-level;\n * this ships the in-app recording studio path.\n */\nimport React, { useState } from 'react';\nimport { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport type { CanvasItem } from '../canvasCore';\nimport type { MediaPickSource } from '../CanvasToolDock';\nimport { friendlyMediaError } from '../videoEditor/mediaActions';\n\nexport function CameraRecorderExperience({\n    onClose,\n    onPick,\n    onPlaced,\n}: {\n    onClose: () => void;\n    onPick: (source: MediaPickSource) => Promise<CanvasItem[]>;\n    onPlaced: (items: CanvasItem[]) => void;\n}) {\n    const insets = useSafeAreaInsets();\n    const [busy, setBusy] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n\n    const capture = async (source: MediaPickSource) => {\n        setBusy(true);\n        setError(null);\n        try {\n            const items = await onPick(source);\n            if (!items.length) {\n                setError('No recording captured.');\n                return;\n            }\n            onPlaced(items);\n            onClose();\n        } catch (err: unknown) {\n            setError(friendlyMediaError(err, 'record'));\n        } finally {\n            setBusy(false);\n        }\n    };\n\n    return (\n        <View style={[styles.root, { paddingTop: insets.top + 8, paddingBottom: insets.bottom + 16 }]}>\n            <View style={styles.head}>\n                <Pressable onPress={onClose} hitSlop={10}>\n                    <MaterialCommunityIcons name=\"close\" size={22} color=\"#e2e8f0\" />\n                </Pressable>\n                <Text style={styles.title}>Record</Text>\n                <View style={{ width: 22 }} />\n            </View>\n            <Text style={styles.fine}>\n                Capture camera video or a still for the board. Full desktop screen share stays on web.\n            </Text>\n            <Pressable\n                onPress={() => void capture('camera-video')}\n                disabled={busy}\n                style={[styles.cta, busy && styles.ctaOff]}\n            >\n                {busy ? (\n                    <ActivityIndicator color=\"#0f172a\" />\n                ) : (\n                    <>\n                        <MaterialCommunityIcons name=\"video-outline\" size={20} color=\"#0f172a\" />\n                        <Text style={styles.ctaLabel}>Record video</Text>\n                    </>\n                )}\n            </Pressable>\n            <Pressable\n                onPress={() => void capture('camera-photo')}\n                disabled={busy}\n                style={[styles.secondary, busy && styles.ctaOff]}\n            >\n                <MaterialCommunityIcons name=\"camera-outline\" size={20} color=\"#F7F7FA\" />\n                <Text style={styles.secondaryLabel}>Take photo</Text>\n            </Pressable>\n            {error ? <Text style={styles.error}>{error}</Text> : null}\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    root: { flex: 1, backgroundColor: '#0B0B0E', paddingHorizontal: 16 },\n    head: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        marginBottom: 10,\n    },\n    title: { fontSize: 17, fontWeight: '700', color: '#F7F7FA' },\n    fine: { color: '#7A7A88', fontSize: 12, lineHeight: 16, marginBottom: 20 },\n    cta: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 8,\n        paddingVertical: 14,\n        borderRadius: 12,\n        backgroundColor: '#F7F7FA',\n        marginBottom: 10,\n    },\n    secondary: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 8,\n        paddingVertical: 14,\n        borderRadius: 12,\n        backgroundColor: '#1F1F24',\n    },\n    ctaOff: { opacity: 0.45 },\n    ctaLabel: { fontWeight: '700', color: '#0f172a', fontSize: 15 },\n    secondaryLabel: { fontWeight: '600', color: '#F7F7FA', fontSize: 15 },\n    error: { color: '#FECACA', fontSize: 12, marginTop: 14 },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CameraRecorderExperience.js","sources":["../../../../src/features/canvas/recorder/CameraRecorderExperience.tsx"],"sourcesContent":["/**\n * Phone twin of web ScreenRecorder — camera (+ optional mic) capture onto the board.\n * True display capture (getDisplayMedia / ReplayKit broadcast) stays system-level;\n * this ships the in-app recording studio path.\n */\nimport React, { useState } from 'react';\nimport { ActivityIndicator, StyleSheet, Text, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport type { CanvasItem } from '../canvasCore';\nimport type { MediaPickSource } from '../CanvasToolDock';\nimport { friendlyMediaError } from '../videoEditor/mediaActions';\nimport { themedStyles, useCanvasTheme, type CanvasPalette } from '../canvasTheme';\nimport { Pressable, HIT, RADIUS, SPACE, TYPE, pressedStyle } from '../canvasUi';\n\nexport function CameraRecorderExperience({\n    onClose,\n    onPick,\n    onPlaced,\n}: {\n    onClose: () => void;\n    onPick: (source: MediaPickSource) => Promise<CanvasItem[]>;\n    onPlaced: (items: CanvasItem[]) => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const insets = useSafeAreaInsets();\n    const [busy, setBusy] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n\n    const capture = async (source: MediaPickSource) => {\n        setBusy(true);\n        setError(null);\n        try {\n            const items = await onPick(source);\n            if (!items.length) {\n                setError('No recording captured.');\n                return;\n            }\n            onPlaced(items);\n            onClose();\n        } catch (err: unknown) {\n            setError(friendlyMediaError(err, 'record'));\n        } finally {\n            setBusy(false);\n        }\n    };\n\n    return (\n        <View style={[styles.root, { paddingTop: insets.top + 8, paddingBottom: insets.bottom + 16 }]}>\n            <View style={styles.head}>\n                <Pressable\n                    onPress={onClose}\n                    hitSlop={10}\n                    style={({ pressed }) => [styles.close, pressedStyle(pressed)]}\n                >\n                    <MaterialCommunityIcons name=\"close\" size={22} color={theme.edInk} />\n                </Pressable>\n                <Text style={styles.title}>Record</Text>\n                <View style={styles.close} />\n            </View>\n            <View style={styles.stage}>\n                <View style={styles.stageWell}>\n                    <MaterialCommunityIcons name=\"record-circle-outline\" size={40} color=\"#f7f7fa\" />\n                </View>\n                <Text style={styles.fine}>\n                    Capture camera video or a still for the board. Full desktop screen share stays on web.\n                </Text>\n            </View>\n            {error ? <Text style={styles.error}>{error}</Text> : null}\n            <View style={styles.actions}>\n                <Pressable\n                    onPress={() => void capture('camera-video')}\n                    disabled={busy}\n                    style={({ pressed }) => [styles.cta, busy && styles.ctaOff, pressedStyle(pressed && !busy)]}\n                >\n                    {busy ? (\n                        <ActivityIndicator color={theme.primaryForeground} />\n                    ) : (\n                        <>\n                            <MaterialCommunityIcons name=\"video-outline\" size={20} color={theme.primaryForeground} />\n                            <Text style={styles.ctaLabel}>Record video</Text>\n                        </>\n                    )}\n                </Pressable>\n                <Pressable\n                    onPress={() => void capture('camera-photo')}\n                    disabled={busy}\n                    style={({ pressed }) => [styles.secondary, busy && styles.ctaOff, pressedStyle(pressed && !busy)]}\n                >\n                    <MaterialCommunityIcons name=\"camera-outline\" size={20} color={theme.edInk} />\n                    <Text style={styles.secondaryLabel}>Take photo</Text>\n                </Pressable>\n            </View>\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        root: { flex: 1, backgroundColor: theme.edBg, paddingHorizontal: SPACE.lg },\n        head: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            minHeight: HIT + SPACE.xs,\n            marginHorizontal: -SPACE.sm,\n            marginBottom: SPACE.md,\n        },\n        close: { width: HIT, height: HIT, borderRadius: HIT / 2, alignItems: 'center', justifyContent: 'center' },\n        title: { ...TYPE.title, color: theme.edInk },\n        stage: {\n            flex: 1,\n            borderRadius: RADIUS.xl,\n            backgroundColor: '#050506',\n            alignItems: 'center',\n            justifyContent: 'center',\n            paddingHorizontal: SPACE.xl,\n            gap: SPACE.lg,\n        },\n        stageWell: {\n            width: 84,\n            height: 84,\n            borderRadius: 42,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: 'rgba(255,255,255,0.08)',\n        },\n        fine: { ...TYPE.body, fontSize: 14, lineHeight: 20, color: 'rgba(247,247,250,0.72)', textAlign: 'center' },\n        actions: { gap: SPACE.sm, marginTop: SPACE.lg },\n        cta: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: SPACE.sm,\n            minHeight: 52,\n            borderRadius: RADIUS.pill,\n            backgroundColor: theme.primary,\n        },\n        secondary: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: SPACE.sm,\n            minHeight: 52,\n            borderRadius: RADIUS.pill,\n            backgroundColor: theme.edRaised,\n        },\n        ctaOff: { opacity: 0.45 },\n        ctaLabel: { ...TYPE.label, fontSize: 16, color: theme.primaryForeground },\n        secondaryLabel: { ...TYPE.label, fontSize: 16, color: theme.edInk },\n        error: {\n            ...TYPE.caption,\n            color: theme.edDanger,\n            marginTop: SPACE.md,\n            padding: SPACE.md,\n            borderRadius: RADIUS.md,\n            backgroundColor: theme.edDangerSoft,\n        },\n    }),\n);\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/serverTasks.js

@@ -254,7 +254,7 @@ function canvasTaskToJob(task) {
   var _a, _b, _c, _d;
   const t = task;
   const isExport = isExportTask(task);
-  const handle = (_a = t.handle) != null ? _a : {};
+  const handle = (_a = isExport ? t.render : t.handle) != null ? _a : {};
   const request = (_b = t.request) != null ? _b : {};
   const resultTitle = !isExport ? (_c = t.result) == null ? void 0 : _c.title : void 0;
   return __spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({