@echoform/echo-ui 0.1.0 → 0.2.0

package/dist/components/EchoSyncPanel.js

@@ -0,0 +1,913 @@
+"use strict";
+/**
+ * EchoSyncPanel
+ *
+ * Presentation-only Echo Profile Sync panel.
+ * Extracted from components/feature/SyncPanel.tsx in the Echo UI Reference.
+ *
+ * ARCHITECTURE
+ * ────────────
+ * This component is PURE PRESENTATION. It owns:
+ *  • Rendering all sync states (signed-out, loading, active, result)
+ *  • Deriving button/badge display state from supplied props
+ *  • Accessibility labels, roles, live regions
+ *
+ * It does NOT own:
+ *  • Authentication
+ *  • useFocusEffect
+ *  • Server/status fetching
+ *  • Upload / download operations
+ *  • Reconciliation planning
+ *  • Guest-partition detection or cleanup
+ *  • Sync queue operations
+ *  • Storage operations
+ *  • Supabase / EchoBrain RPC calls
+ *
+ * All host-owned operations are supplied via callback props.
+ *
+ * DATA LABEL
+ * ──────────
+ * The `dataLabel` prop names the records being synchronized in ALL visible
+ * and accessibility wording. Examples: "Demo App Data", "Rig Vault Data".
+ * There is no hard-coded "Demo App", "Rig Vault", or "Guest Vault" in this
+ * package component.
+ *
+ * GUEST ADOPTION
+ * ──────────────
+ * All wording for the guest-adoption card is supplied through the optional
+ * `guestAdoption` prop. When neither `guestAdoption` nor `onAdoptGuest` is
+ * supplied the section is simply not rendered.
+ *
+ * DEVELOPMENT CONTROLS
+ * ────────────────────
+ * `showDevelopmentControls` replaces `__DEV__` so the host decides when
+ * dev-only UI (Force Sync, raw conflict JSON) is visible.
+ *
+ * SIGNED-OUT STATE
+ * ────────────────
+ * Deliberately names EchoBrain in the signed-out message:
+ *   "Echo Profile Sync requires an Echo Profile.
+ *    Sign in to enable upload to EchoBrain."
+ * This is an intentional product-level decision; EchoBrain is the public
+ * cloud sync service name.
+ *
+ * No Expo Router, no auth context, no services, no AsyncStorage, no Supabase,
+ * no @/ aliases.
+ * Canonical shared component for @echoform/echo-ui.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EchoSyncPanel = EchoSyncPanel;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const theme_1 = require("../theme");
+// ─────────────────────────────────────────────────────────────────────────────
+// Internal sub-components
+// ─────────────────────────────────────────────────────────────────────────────
+function StatusBadge({ count, label, color, }) {
+    return (<react_native_1.View style={[
+            styles.badge,
+            { borderColor: color + '44', backgroundColor: color + '15' },
+        ]} accessible accessibilityLabel={`${count} ${label}`}>
+      <react_native_1.Text style={[styles.badgeCount, { color }]}>{count}</react_native_1.Text>
+      <react_native_1.Text style={[styles.badgeLabel, { color: color + 'CC' }]}>{label}</react_native_1.Text>
+    </react_native_1.View>);
+}
+function ConflictDetailRow({ conflict, showRaw, }) {
+    var _a, _b;
+    const [rawExpanded, setRawExpanded] = (0, react_1.useState)(false);
+    return (<react_native_1.View style={styles.conflictBlock}>
+      <react_native_1.View style={styles.detailRow}>
+        <vector_icons_1.MaterialIcons name="warning-amber" size={13} color={theme_1.COLORS.warning}/>
+        <react_native_1.Text style={[styles.detailText, { color: theme_1.COLORS.warning, fontWeight: '700' }]} selectable>
+          CONFLICT: {conflict.reason}
+        </react_native_1.Text>
+      </react_native_1.View>
+      <react_native_1.View style={styles.conflictField}>
+        <react_native_1.Text style={styles.conflictLabel}>record_id</react_native_1.Text>
+        <react_native_1.Text style={styles.conflictValue} selectable>
+          {conflict.id}
+        </react_native_1.Text>
+      </react_native_1.View>
+      {conflict.presetId ? (<react_native_1.View style={styles.conflictField}>
+          <react_native_1.Text style={styles.conflictLabel}>preset_id</react_native_1.Text>
+          <react_native_1.Text style={styles.conflictValue} selectable>
+            {conflict.presetId}
+          </react_native_1.Text>
+        </react_native_1.View>) : null}
+      {conflict.controlId ? (<react_native_1.View style={styles.conflictField}>
+          <react_native_1.Text style={styles.conflictLabel}>control_id</react_native_1.Text>
+          <react_native_1.Text style={styles.conflictValue} selectable>
+            {conflict.controlId}
+          </react_native_1.Text>
+        </react_native_1.View>) : null}
+      {conflict.serverRevision !== undefined ||
+            conflict.submittedBaseRevision !== undefined ? (<react_native_1.View style={styles.conflictField}>
+          <react_native_1.Text style={styles.conflictLabel}>revisions</react_native_1.Text>
+          <react_native_1.Text style={styles.conflictValue} selectable>
+            {`local sent: ${(_a = conflict.submittedBaseRevision) !== null && _a !== void 0 ? _a : '?'}  ·  server has: ${(_b = conflict.serverRevision) !== null && _b !== void 0 ? _b : '?'}`}
+          </react_native_1.Text>
+        </react_native_1.View>) : null}
+      {showRaw && conflict.raw ? (<react_native_1.Pressable onPress={() => setRawExpanded(v => !v)} style={styles.rawToggle} accessibilityRole="button" accessibilityLabel={rawExpanded ? 'Collapse raw conflict JSON' : 'Expand raw conflict JSON'} accessibilityState={{ expanded: rawExpanded }} hitSlop={6}>
+          <vector_icons_1.MaterialIcons name={rawExpanded ? 'expand-less' : 'expand-more'} size={12} color={theme_1.COLORS.textMuted}/>
+          <react_native_1.Text style={styles.rawToggleLabel}>raw JSON</react_native_1.Text>
+        </react_native_1.Pressable>) : null}
+      {showRaw && rawExpanded && conflict.raw ? (<react_native_1.Text style={styles.rawJson} selectable>
+          {conflict.raw}
+        </react_native_1.Text>) : null}
+    </react_native_1.View>);
+}
+function EntityRow({ entity, uploaded, skipped, conflicts, failed, errors, conflictDetails, firstError, showDevelopmentControls, }) {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const hasDetails = Object.keys(errors).length > 0 ||
+        conflictDetails.length > 0 ||
+        Boolean(firstError);
+    const total = uploaded + skipped + conflicts + failed;
+    if (total === 0 && !hasDetails)
+        return null;
+    const label = entity.replace(/_/g, ' ');
+    return (<react_native_1.View style={styles.entityRow}>
+      <react_native_1.Pressable onPress={hasDetails ? () => setExpanded(v => !v) : undefined} style={({ pressed }) => [
+            styles.entityRowHeader,
+            pressed && hasDetails && { opacity: 0.75 },
+        ]} accessibilityLabel={`${label}: ${uploaded} uploaded, ${skipped} skipped, ${conflicts} conflicts, ${failed} failed`} accessibilityRole={hasDetails ? 'button' : 'text'} accessibilityHint={hasDetails
+            ? `Double tap to ${expanded ? 'collapse' : 'expand'} error details`
+            : undefined} accessibilityState={hasDetails ? { expanded } : undefined}>
+        <react_native_1.Text style={styles.entityName}>{label}</react_native_1.Text>
+        <react_native_1.View style={styles.entityCounts}>
+          {uploaded > 0 ? (<react_native_1.Text style={[styles.entityCount, { color: theme_1.COLORS.neonGreen }]}>
+              ↑{uploaded}
+            </react_native_1.Text>) : null}
+          {skipped > 0 ? (<react_native_1.Text style={[styles.entityCount, { color: theme_1.COLORS.textMuted }]}>
+              ={skipped}
+            </react_native_1.Text>) : null}
+          {conflicts > 0 ? (<react_native_1.Text style={[styles.entityCount, { color: theme_1.COLORS.warning }]}>
+              ⚡{conflicts}
+            </react_native_1.Text>) : null}
+          {failed > 0 ? (<react_native_1.Text style={[styles.entityCount, { color: theme_1.COLORS.error }]}>
+              ✗{failed}
+            </react_native_1.Text>) : null}
+        </react_native_1.View>
+        {hasDetails ? (<vector_icons_1.MaterialIcons name={expanded ? 'expand-less' : 'expand-more'} size={18} color={theme_1.COLORS.textMuted}/>) : null}
+      </react_native_1.Pressable>
+
+      {expanded && hasDetails ? (<react_native_1.View style={styles.entityDetails} accessibilityLiveRegion="polite">
+          {firstError ? (<react_native_1.View style={styles.detailRow}>
+              <vector_icons_1.MaterialIcons name="bug-report" size={13} color={theme_1.COLORS.error}/>
+              <react_native_1.Text style={[styles.detailText, { color: theme_1.COLORS.error }]} selectable>
+                RPC error: {firstError}
+              </react_native_1.Text>
+            </react_native_1.View>) : null}
+          {Object.entries(errors).map(([id, msg]) => (<react_native_1.View key={id} style={styles.detailRow}>
+              <vector_icons_1.MaterialIcons name="error-outline" size={13} color={theme_1.COLORS.error}/>
+              <react_native_1.Text style={styles.detailText} selectable>
+                <react_native_1.Text style={styles.detailId}>{id.slice(0, 8)}…</react_native_1.Text>: {msg}
+              </react_native_1.Text>
+            </react_native_1.View>))}
+          {conflictDetails.map(c => (<ConflictDetailRow key={c.id} conflict={c} showRaw={showDevelopmentControls}/>))}
+        </react_native_1.View>) : null}
+    </react_native_1.View>);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Result card helpers
+// ─────────────────────────────────────────────────────────────────────────────
+function resultCardStyle(outcome) {
+    switch (outcome) {
+        case 'adoption_complete':
+        case 'complete':
+        case 'empty':
+            return styles.resultCardSuccess;
+        case 'partial':
+        case 'unable_to_verify':
+            return styles.resultCardWarning;
+        case 'failed':
+        case 'fatal':
+            return styles.resultCardError;
+    }
+}
+function resultIconName(outcome) {
+    switch (outcome) {
+        case 'adoption_complete':
+        case 'complete':
+        case 'empty':
+            return 'check-circle-outline';
+        case 'partial':
+        case 'unable_to_verify':
+            return 'warning-amber';
+        case 'failed':
+        case 'fatal':
+            return 'error-outline';
+    }
+}
+function resultIconColor(outcome) {
+    switch (outcome) {
+        case 'adoption_complete':
+        case 'complete':
+        case 'empty':
+            return theme_1.COLORS.neonGreen;
+        case 'partial':
+        case 'unable_to_verify':
+            return theme_1.COLORS.warning;
+        case 'failed':
+        case 'fatal':
+            return theme_1.COLORS.error;
+    }
+}
+function buildResultHeadline(result, dataLabel) {
+    switch (result.outcome) {
+        case 'adoption_complete':
+            return `${dataLabel} added to Echo Profile Sync.`;
+        case 'complete':
+            return `${dataLabel} Sync Complete`;
+        case 'empty':
+            return `${dataLabel} Up to Date`;
+        case 'partial':
+            return `${dataLabel} Sync Partially Completed`;
+        case 'failed':
+            return `${dataLabel} Sync Failed`;
+        case 'fatal':
+            return result.fatalError
+                ? `${dataLabel} Sync Failed: ${result.fatalError}`
+                : `${dataLabel} Sync Failed`;
+        case 'unable_to_verify':
+            return `Unable to Verify ${dataLabel} Sync`;
+    }
+}
+function buildResultA11yLabel(result, dataLabel) {
+    var _a, _b;
+    const remaining = result.remainingUnsynced && result.remainingUnsynced > 0
+        ? ` ${result.remainingUnsynced} records still need synchronization.`
+        : '';
+    switch (result.outcome) {
+        case 'adoption_complete':
+            return `${dataLabel} successfully added to Echo Profile Sync.${remaining}`;
+        case 'complete':
+            return `${dataLabel} sync complete. ${result.totalUploaded} uploaded, ${result.totalSkipped} already synced.${remaining}`;
+        case 'empty':
+            return `${dataLabel} is already up to date.${remaining}`;
+        case 'partial':
+            return `${dataLabel} sync partially completed. ${result.totalUploaded} uploaded, ${result.totalFailed} failed.${remaining}`;
+        case 'failed':
+            return `${dataLabel} sync failed. ${(_a = result.firstError) !== null && _a !== void 0 ? _a : 'See error details below.'}${remaining}`;
+        case 'fatal':
+            return `${dataLabel} sync failed. ${(_b = result.fatalError) !== null && _b !== void 0 ? _b : 'See error details below.'}${remaining}`;
+        case 'unable_to_verify':
+            return `Unable to verify ${dataLabel} sync.${remaining}`;
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Main component
+// ─────────────────────────────────────────────────────────────────────────────
+function EchoSyncPanel({ hasEchoProfile, dataLabel, status, statusLoading = false, syncing = false, guestAdoption, result, showDevelopmentControls = false, onRefresh, onSync, onForceSync, onAdoptGuest, onDismissResult, }) {
+    var _a, _b, _c, _d;
+    // ── Signed-out state ────────────────────────────────────────────────────
+    if (!hasEchoProfile) {
+        return (<react_native_1.View style={styles.guestNotice} accessible accessibilityRole="text" accessibilityLabel="Echo Profile Sync requires an Echo Profile. Sign in or create an Echo Profile to enable upload to EchoBrain.">
+        <vector_icons_1.MaterialIcons name="cloud-off" size={20} color={theme_1.COLORS.textMuted}/>
+        <react_native_1.Text style={styles.guestNoticeText}>
+          {'Echo Profile Sync requires an Echo Profile.\n'}
+          {'Sign in to enable upload to EchoBrain.'}
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    // ── Derived display state ───────────────────────────────────────────────
+    const unsyncedCount = (_a = status === null || status === void 0 ? void 0 : status.unsynced) !== null && _a !== void 0 ? _a : null;
+    const needsSync = unsyncedCount !== null && unsyncedCount > 0;
+    // canVerify: only true when we have a confirmed, reachable server response.
+    // status === null (no fetch yet) is treated as unable to verify, not reachable.
+    const canVerify = status !== null && status.serverReachable;
+    const syncDisabled = syncing || (canVerify && !needsSync);
+    // ── Refresh handler with accessibility announcement ─────────────────────
+    const handleRefresh = async () => {
+        if (statusLoading)
+            return;
+        await onRefresh();
+        react_native_1.AccessibilityInfo.announceForAccessibility(`${dataLabel} sync status refreshed.`);
+    };
+    // ── Render ───────────────────────────────────────────────────────────────
+    return (<react_native_1.View style={styles.root}>
+
+      {/* ── Scope note ──────────────────────────────────────────────────── */}
+      <react_native_1.Text style={styles.scopeNote} accessible accessibilityRole="text" accessibilityLabel={`This section shows and syncs ${dataLabel} only.`}>
+        {`This section shows and syncs ${dataLabel} only.`}
+      </react_native_1.Text>
+
+      {/* ── Status summary row ──────────────────────────────────────────── */}
+      <react_native_1.View style={styles.statusRow} accessible accessibilityLabel={status
+            ? `${dataLabel} sync status: ${status.unsynced} unsynced, ${status.synced} synced` +
+                (!status.serverReachable ? ', Echo Profile Sync unavailable' : '')
+            : `Loading ${dataLabel} sync status`}>
+        {statusLoading ? (<react_native_1.ActivityIndicator size="small" color={theme_1.COLORS.neonCyan} style={{ marginRight: theme_1.SPACING.sm }}/>) : status ? (<>
+            <StatusBadge count={status.unsynced} label="unsynced" color={status.unsynced > 0 ? theme_1.COLORS.neonCyan : theme_1.COLORS.textMuted}/>
+            <StatusBadge count={status.synced} label="synced" color={theme_1.COLORS.neonGreen}/>
+            {!status.serverReachable ? (<react_native_1.View style={styles.offlineTag} accessible accessibilityLabel={`Echo Profile Sync unavailable — ${dataLabel} sync status unverified`}>
+                <vector_icons_1.MaterialIcons name="cloud-off" size={11} color={theme_1.COLORS.warning}/>
+                <react_native_1.Text style={[styles.offlineTagText, { color: theme_1.COLORS.warning }]}>
+                  offline
+                </react_native_1.Text>
+              </react_native_1.View>) : null}
+          </>) : null}
+
+        <react_native_1.Pressable onPress={handleRefresh} disabled={statusLoading} style={({ pressed }) => [
+            styles.refreshBtn,
+            pressed && !statusLoading && { opacity: 0.7 },
+        ]} accessibilityLabel={`Refresh ${dataLabel} Sync Status`} accessibilityRole="button" accessibilityHint={`Checks for changes and updates the ${dataLabel} sync status.`} accessibilityState={{ busy: statusLoading, disabled: statusLoading }} hitSlop={12}>
+          {statusLoading ? (<react_native_1.ActivityIndicator size="small" color={theme_1.COLORS.neonCyan}/>) : (<vector_icons_1.MaterialIcons name="refresh" size={20} color={theme_1.COLORS.neonCyan} importantForAccessibility="no" accessibilityElementsHidden/>)}
+        </react_native_1.Pressable>
+      </react_native_1.View>
+
+      {/* ── Main sync button ─────────────────────────────────────────────── */}
+      <react_native_1.Pressable onPress={() => onSync()} disabled={syncDisabled} style={({ pressed }) => [
+            styles.uploadBtn,
+            pressed && { opacity: 0.8 },
+            needsSync || !canVerify ? styles.uploadBtnActive : styles.uploadBtnDisabled,
+            !canVerify && !syncing ? styles.uploadBtnWarning : null,
+        ]} accessibilityLabel={syncing
+            ? `Syncing ${dataLabel}, please wait`
+            : !canVerify
+                ? `Unable to verify ${dataLabel} sync — tap to retry`
+                : !needsSync
+                    ? `${dataLabel} is up to date`
+                    : `Sync ${dataLabel} — ${unsyncedCount} record${unsyncedCount !== 1 ? 's' : ''} need synchronization`} accessibilityRole="button" accessibilityHint={!canVerify
+            ? `Echo Profile Sync could not be reached to verify ${dataLabel} sync state. Tap to retry.`
+            : needsSync
+                ? `Uploads pending ${dataLabel} changes and downloads newer ${dataLabel} cloud records through Echo Profile Sync`
+                : `No ${dataLabel} changes need to be synchronized right now`} accessibilityState={{ busy: syncing, disabled: syncDisabled }}>
+        {syncing ? (<react_native_1.ActivityIndicator size="small" color={theme_1.COLORS.neonGreen}/>) : (<vector_icons_1.MaterialIcons name={!canVerify ? 'cloud-off' : needsSync ? 'sync' : 'cloud-done'} size={20} color={!canVerify
+                ? theme_1.COLORS.warning
+                : needsSync
+                    ? theme_1.COLORS.neonGreen
+                    : theme_1.COLORS.textMuted}/>)}
+        <react_native_1.Text style={[
+            styles.uploadBtnText,
+            canVerify && !needsSync ? styles.uploadBtnTextDisabled : null,
+            !canVerify && !syncing ? styles.uploadBtnTextWarning : null,
+        ]}>
+          {syncing
+            ? `Syncing ${dataLabel}\u2026`
+            : !canVerify
+                ? `Unable to Verify ${dataLabel} Sync`
+                : needsSync
+                    ? `Sync ${dataLabel} (${unsyncedCount})`
+                    : `${dataLabel} Up to Date`}
+        </react_native_1.Text>
+      </react_native_1.Pressable>
+
+      {/* ── Force Sync (dev only, host-controlled) ─────────────────────── */}
+      {showDevelopmentControls && onForceSync ? (<react_native_1.Pressable onPress={() => onForceSync()} disabled={syncing} style={({ pressed }) => [styles.forceBtn, pressed && { opacity: 0.7 }]} accessibilityLabel="Force full re-sync — upload all then download" accessibilityRole="button" accessibilityHint="Development only: re-uploads all local records regardless of sync status, then downloads" accessibilityState={{ busy: syncing }}>
+          <vector_icons_1.MaterialIcons name="refresh" size={14} color={theme_1.COLORS.textMuted}/>
+          <react_native_1.Text style={styles.forceBtnText}>Force full re-sync (dev)</react_native_1.Text>
+        </react_native_1.Pressable>) : null}
+
+      {/* ── Guest-data adoption ─────────────────────────────────────────── */}
+      {guestAdoption && onAdoptGuest ? (<react_native_1.View style={styles.guestAdoptSection}>
+          <react_native_1.View style={styles.dividerRow} accessible={false}>
+            <react_native_1.View style={styles.dividerLine}/>
+            <react_native_1.Text style={styles.dividerLabel}>OR</react_native_1.Text>
+            <react_native_1.View style={styles.dividerLine}/>
+          </react_native_1.View>
+
+          <react_native_1.View style={styles.guestAdoptCard}>
+            <react_native_1.View style={styles.guestAdoptHeader}>
+              <vector_icons_1.MaterialIcons name="account-circle" size={15} color={theme_1.COLORS.neonCyan}/>
+              <react_native_1.Text style={styles.guestAdoptTitle} accessibilityRole="header">
+                {guestAdoption.title}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.Text style={styles.guestAdoptSubtitle}>
+              {guestAdoption.description}
+            </react_native_1.Text>
+
+            <react_native_1.Pressable onPress={() => onAdoptGuest()} disabled={syncing} style={({ pressed }) => [
+                styles.guestAdoptBtn,
+                pressed && !syncing && { opacity: 0.8 },
+                syncing && styles.uploadBtnDisabled,
+            ]} accessibilityLabel={syncing
+                ? `Adding ${guestAdoption.title}, please wait`
+                : guestAdoption.accessibilityLabel} accessibilityRole="button" accessibilityHint={guestAdoption.accessibilityHint} accessibilityState={{ busy: syncing, disabled: syncing }}>
+              {syncing ? (<react_native_1.ActivityIndicator size="small" color={theme_1.COLORS.neonCyan}/>) : (<vector_icons_1.MaterialIcons name="cloud-upload" size={20} color={theme_1.COLORS.neonCyan}/>)}
+              <react_native_1.Text style={styles.guestAdoptBtnText}>
+                {syncing
+                ? ((_b = guestAdoption.loadingLabel) !== null && _b !== void 0 ? _b : `${guestAdoption.buttonLabel}\u2026`)
+                : guestAdoption.buttonLabel}
+              </react_native_1.Text>
+            </react_native_1.Pressable>
+
+            <react_native_1.View style={styles.guestAdoptNote} accessible accessibilityRole="text" accessibilityLabel={guestAdoption.note}>
+              <vector_icons_1.MaterialIcons name="info-outline" size={13} color={theme_1.COLORS.neonBlue}/>
+              <react_native_1.Text style={styles.guestAdoptNoteText}>{guestAdoption.note}</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>) : null}
+
+      {/* ── Sync result card ─────────────────────────────────────────────── */}
+      {result ? (<react_native_1.View style={[styles.resultCard, resultCardStyle(result.outcome)]} accessible accessibilityRole="text" accessibilityLiveRegion="polite" accessibilityLabel={buildResultA11yLabel(result, dataLabel)}>
+          {/* Headline */}
+          <react_native_1.View style={styles.resultHeader}>
+            <vector_icons_1.MaterialIcons name={resultIconName(result.outcome)} size={18} color={resultIconColor(result.outcome)}/>
+            <react_native_1.Text style={[styles.resultTitle, { color: resultIconColor(result.outcome) }]}>
+              {buildResultHeadline(result, dataLabel)}
+            </react_native_1.Text>
+          </react_native_1.View>
+
+          {/* First RPC error */}
+          {(result.outcome === 'failed' || result.outcome === 'partial') &&
+                result.firstError ? (<react_native_1.View style={styles.rpcErrorBox}>
+              <vector_icons_1.MaterialIcons name="bug-report" size={13} color={theme_1.COLORS.error}/>
+              <react_native_1.Text style={styles.rpcErrorText} selectable>
+                {result.firstError}
+              </react_native_1.Text>
+            </react_native_1.View>) : null}
+
+          {/* Counts summary */}
+          {result.outcome !== 'fatal' ? (<react_native_1.Text style={styles.resultLegend}>
+              {`↑${result.totalUploaded} uploaded`}
+              {result.totalSkipped > 0
+                    ? `  =${result.totalSkipped} already synced`
+                    : ''}
+              {result.totalConflicts > 0
+                    ? `  ⚡${result.totalConflicts} conflict`
+                    : ''}
+              {result.totalFailed > 0 ? `  ✗${result.totalFailed} failed` : ''}
+            </react_native_1.Text>) : null}
+
+          {/* Source partition (dev diagnostic) */}
+          {showDevelopmentControls && result.sourcePartition ? (<react_native_1.Text style={[styles.resultLegend, { color: theme_1.COLORS.neonCyan + '99' }]}>
+              Source partition: {result.sourcePartition}
+            </react_native_1.Text>) : null}
+
+          {/* Remaining unsynced */}
+          {result.remainingUnsynced && result.remainingUnsynced > 0 ? (<react_native_1.Text style={[styles.resultLegend, { color: theme_1.COLORS.warning }]}>
+              {`${result.remainingUnsynced} record${result.remainingUnsynced !== 1 ? 's' : ''} still need synchronization`}
+            </react_native_1.Text>) : null}
+
+          {/* Image sync summary */}
+          {result.imageSummary && result.imageSummary.attempted > 0 ? (<react_native_1.View style={styles.imageSyncRow}>
+              <vector_icons_1.MaterialIcons name={result.imageSummary.failed > 0 ? 'broken-image' : 'photo-camera'} size={12} color={result.imageSummary.failed > 0
+                    ? theme_1.COLORS.error
+                    : theme_1.COLORS.neonGreen}/>
+              <react_native_1.Text style={[styles.resultLegend, { flex: 1 }]}>
+                {`Photos: ${result.imageSummary.succeeded}/${result.imageSummary.attempted} uploaded`}
+                {result.imageSummary.failed > 0
+                    ? `  ✗${result.imageSummary.failed} failed`
+                    : ''}
+              </react_native_1.Text>
+            </react_native_1.View>) : result.imageSummary && result.imageSummary.attempted === 0 ? (<react_native_1.View style={styles.imageSyncRow}>
+              <vector_icons_1.MaterialIcons name="photo-camera" size={12} color={theme_1.COLORS.textMuted}/>
+              <react_native_1.Text style={[styles.resultLegend, { flex: 1 }]}>
+                {'Photos: 0 eligible (no local photos found)'}
+              </react_native_1.Text>
+            </react_native_1.View>) : null}
+
+          {/* First image error */}
+          {((_c = result.imageSummary) === null || _c === void 0 ? void 0 : _c.failed) ? (<react_native_1.View style={styles.rpcErrorBox}>
+              <vector_icons_1.MaterialIcons name="broken-image" size={13} color={theme_1.COLORS.error}/>
+              <react_native_1.Text style={styles.rpcErrorText} selectable>
+                {`Photo error: ${(_d = result.imageSummary.firstError) !== null && _d !== void 0 ? _d : 'unknown'}${result.imageSummary.timeoutFailures
+                    ? ` (${result.imageSummary.timeoutFailures} timed out)`
+                    : ''}${result.imageSummary.missingSourceFiles
+                    ? ` (${result.imageSummary.missingSourceFiles} missing local files)`
+                    : ''}${result.imageSummary.storageFailures
+                    ? ` (${result.imageSummary.storageFailures} storage failures)`
+                    : ''}${result.imageSummary.metaFailures
+                    ? ` (${result.imageSummary.metaFailures} metadata failures)`
+                    : ''}`}
+              </react_native_1.Text>
+            </react_native_1.View>) : null}
+
+          {/* Per-entity breakdown */}
+          <react_native_1.View style={styles.entityList}>
+            {result.entities.map(e => (<EntityRow key={e.entity} entity={e.entity} uploaded={e.uploaded} skipped={e.skipped} conflicts={e.conflicts} failed={e.failed} errors={e.errors} conflictDetails={e.conflictDetails} firstError={e.firstError} showDevelopmentControls={showDevelopmentControls}/>))}
+          </react_native_1.View>
+
+          {/* Timestamp */}
+          <react_native_1.Text style={styles.resultTimestamp}>
+            {new Date(result.completedAt).toLocaleTimeString()}
+          </react_native_1.Text>
+
+          {/* Dismiss */}
+          <react_native_1.Pressable onPress={onDismissResult} accessibilityRole="button" accessibilityLabel="Dismiss sync result" accessibilityHint="Hides this sync result" style={({ pressed }) => [
+                styles.dismissResultButton,
+                pressed ? { opacity: 0.7 } : null,
+            ]}>
+            <vector_icons_1.MaterialIcons name="close" size={18} color={theme_1.COLORS.textMuted}/>
+            <react_native_1.Text style={styles.dismissResultText}>Dismiss</react_native_1.Text>
+          </react_native_1.Pressable>
+        </react_native_1.View>) : null}
+    </react_native_1.View>);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+const styles = react_native_1.StyleSheet.create({
+    root: { gap: theme_1.SPACING.sm },
+    // Scope note
+    scopeNote: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        lineHeight: 18,
+        marginBottom: theme_1.SPACING.xs,
+    },
+    // Guest notice (signed-out)
+    guestNotice: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: theme_1.SPACING.sm,
+        backgroundColor: theme_1.COLORS.surfaceHigh,
+        borderRadius: theme_1.RADIUS.md,
+        borderWidth: 1,
+        borderColor: theme_1.COLORS.border,
+        padding: theme_1.SPACING.md,
+    },
+    guestNoticeText: {
+        flex: 1,
+        fontSize: theme_1.FONTS.sm,
+        color: theme_1.COLORS.textMuted,
+        lineHeight: 20,
+    },
+    // Status row
+    statusRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme_1.SPACING.sm,
+        flexWrap: 'wrap',
+    },
+    badge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        borderRadius: 100,
+        borderWidth: 1,
+        paddingHorizontal: theme_1.SPACING.sm,
+        paddingVertical: 4,
+    },
+    badgeCount: {
+        fontSize: theme_1.FONTS.sm,
+        fontWeight: '700',
+        lineHeight: 18,
+    },
+    badgeLabel: {
+        fontSize: theme_1.FONTS.xs,
+        fontWeight: '500',
+    },
+    offlineTag: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        borderRadius: 100,
+        borderWidth: 1,
+        borderColor: theme_1.COLORS.warning + '55',
+        backgroundColor: theme_1.COLORS.warning + '12',
+        paddingHorizontal: theme_1.SPACING.sm,
+        paddingVertical: 4,
+    },
+    offlineTagText: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        fontWeight: '500',
+    },
+    refreshBtn: {
+        width: 44,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: 'auto',
+        borderRadius: theme_1.RADIUS.sm,
+    },
+    // Main sync button
+    uploadBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme_1.SPACING.sm,
+        backgroundColor: theme_1.COLORS.neonGreen + '18',
+        borderRadius: theme_1.RADIUS.lg,
+        borderWidth: 1.5,
+        borderColor: theme_1.COLORS.neonGreen + '55',
+        paddingVertical: theme_1.SPACING.md,
+        minHeight: 52,
+    },
+    uploadBtnActive: {
+        opacity: 1,
+    },
+    uploadBtnDisabled: {
+        opacity: 0.45,
+    },
+    uploadBtnWarning: {
+        backgroundColor: theme_1.COLORS.warning + '12',
+        borderColor: theme_1.COLORS.warning + '55',
+    },
+    uploadBtnText: {
+        fontSize: theme_1.FONTS.md,
+        fontWeight: '700',
+        color: theme_1.COLORS.neonGreen,
+        letterSpacing: 0.2,
+    },
+    uploadBtnTextDisabled: {
+        color: theme_1.COLORS.textMuted,
+    },
+    uploadBtnTextWarning: {
+        color: theme_1.COLORS.warning,
+    },
+    // Force sync (dev)
+    forceBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme_1.SPACING.xs,
+        paddingVertical: theme_1.SPACING.xs,
+        minHeight: 36,
+    },
+    forceBtnText: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        fontStyle: 'italic',
+    },
+    // Guest adoption
+    guestAdoptSection: {
+        gap: theme_1.SPACING.sm,
+    },
+    dividerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme_1.SPACING.sm,
+        marginVertical: theme_1.SPACING.xs,
+    },
+    dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: theme_1.COLORS.border,
+    },
+    dividerLabel: {
+        fontSize: theme_1.FONTS.xs,
+        fontWeight: '700',
+        color: theme_1.COLORS.textMuted,
+        letterSpacing: 1.2,
+    },
+    guestAdoptCard: {
+        backgroundColor: theme_1.COLORS.neonCyan + '0A',
+        borderRadius: theme_1.RADIUS.lg,
+        borderWidth: 1,
+        borderColor: theme_1.COLORS.neonCyan + '33',
+        padding: theme_1.SPACING.md,
+        gap: theme_1.SPACING.sm,
+    },
+    guestAdoptHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme_1.SPACING.xs,
+    },
+    guestAdoptTitle: {
+        fontSize: theme_1.FONTS.sm,
+        fontWeight: '700',
+        color: theme_1.COLORS.neonCyan,
+        letterSpacing: 0.3,
+    },
+    guestAdoptSubtitle: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textSecondary,
+        lineHeight: 18,
+    },
+    guestAdoptBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme_1.SPACING.sm,
+        backgroundColor: theme_1.COLORS.neonCyan + '18',
+        borderRadius: theme_1.RADIUS.lg,
+        borderWidth: 1.5,
+        borderColor: theme_1.COLORS.neonCyan + '55',
+        paddingVertical: theme_1.SPACING.md,
+        minHeight: 52,
+    },
+    guestAdoptBtnText: {
+        fontSize: theme_1.FONTS.md,
+        fontWeight: '700',
+        color: theme_1.COLORS.neonCyan,
+        letterSpacing: 0.2,
+    },
+    guestAdoptNote: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: theme_1.SPACING.xs,
+    },
+    guestAdoptNoteText: {
+        flex: 1,
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        lineHeight: 18,
+    },
+    // Result card
+    resultCard: {
+        borderRadius: theme_1.RADIUS.lg,
+        borderWidth: 1,
+        padding: theme_1.SPACING.md,
+        gap: theme_1.SPACING.xs,
+    },
+    resultCardSuccess: {
+        backgroundColor: theme_1.COLORS.neonGreen + '0C',
+        borderColor: theme_1.COLORS.neonGreen + '44',
+    },
+    resultCardWarning: {
+        backgroundColor: theme_1.COLORS.warning + '0C',
+        borderColor: theme_1.COLORS.warning + '44',
+    },
+    resultCardError: {
+        backgroundColor: theme_1.COLORS.error + '0C',
+        borderColor: theme_1.COLORS.error + '44',
+    },
+    resultHeader: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: theme_1.SPACING.sm,
+    },
+    resultTitle: {
+        flex: 1,
+        fontSize: theme_1.FONTS.sm,
+        fontWeight: '700',
+        lineHeight: 20,
+    },
+    rpcErrorBox: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: theme_1.SPACING.xs,
+        backgroundColor: theme_1.COLORS.error + '12',
+        borderRadius: theme_1.RADIUS.sm,
+        padding: theme_1.SPACING.sm,
+        marginTop: 2,
+    },
+    rpcErrorText: {
+        flex: 1,
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.error,
+        lineHeight: 18,
+        fontFamily: 'monospace',
+    },
+    resultLegend: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        lineHeight: 18,
+    },
+    entityList: {
+        gap: 2,
+        marginTop: theme_1.SPACING.xs,
+    },
+    entityRow: {
+        borderRadius: theme_1.RADIUS.sm,
+        overflow: 'hidden',
+    },
+    entityRowHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme_1.SPACING.sm,
+        paddingVertical: 4,
+        paddingHorizontal: theme_1.SPACING.xs,
+    },
+    entityName: {
+        flex: 1,
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textSecondary,
+        fontWeight: '500',
+        textTransform: 'capitalize',
+    },
+    entityCounts: {
+        flexDirection: 'row',
+        gap: theme_1.SPACING.xs,
+    },
+    entityCount: {
+        fontSize: theme_1.FONTS.xs,
+        fontWeight: '700',
+    },
+    entityDetails: {
+        backgroundColor: theme_1.COLORS.surfaceHigh,
+        borderRadius: theme_1.RADIUS.sm,
+        padding: theme_1.SPACING.sm,
+        gap: 4,
+        marginBottom: theme_1.SPACING.xs,
+    },
+    detailRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: theme_1.SPACING.xs,
+    },
+    detailText: {
+        flex: 1,
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textSecondary,
+        lineHeight: 18,
+    },
+    detailId: {
+        fontWeight: '700',
+        color: theme_1.COLORS.textMuted,
+    },
+    conflictBlock: {
+        backgroundColor: theme_1.COLORS.warning + '0A',
+        borderLeftWidth: 2,
+        borderLeftColor: theme_1.COLORS.warning + '88',
+        borderRadius: theme_1.RADIUS.sm,
+        paddingLeft: theme_1.SPACING.sm,
+        paddingVertical: theme_1.SPACING.xs,
+        gap: 3,
+        marginTop: 2,
+        marginBottom: 2,
+    },
+    conflictField: {
+        flexDirection: 'row',
+        gap: theme_1.SPACING.sm,
+        paddingLeft: 2,
+    },
+    conflictLabel: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        fontFamily: 'monospace',
+        fontWeight: '600',
+        minWidth: 76,
+        lineHeight: 18,
+    },
+    conflictValue: {
+        flex: 1,
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textSecondary,
+        fontFamily: 'monospace',
+        lineHeight: 18,
+    },
+    rawToggle: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        paddingLeft: 2,
+        marginTop: 2,
+    },
+    rawToggleLabel: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        fontStyle: 'italic',
+    },
+    rawJson: {
+        fontSize: 10,
+        color: theme_1.COLORS.textMuted,
+        fontFamily: 'monospace',
+        lineHeight: 16,
+        marginTop: 2,
+    },
+    imageSyncRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        marginTop: 1,
+    },
+    resultTimestamp: {
+        fontSize: theme_1.FONTS.xs,
+        color: theme_1.COLORS.textMuted,
+        textAlign: 'right',
+        marginTop: 2,
+    },
+    dismissResultButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme_1.SPACING.xs,
+        paddingVertical: theme_1.SPACING.sm,
+        marginTop: theme_1.SPACING.sm,
+    },
+    dismissResultText: {
+        color: theme_1.COLORS.textMuted,
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+//# sourceMappingURL=EchoSyncPanel.js.map