@echoform/echo-ui 0.1.1 → 0.2.1

package/dist/components/EchoDeletionStatusCard.js

@@ -0,0 +1,156 @@
+"use strict";
+/**
+ * EchoDeletionStatusCard
+ *
+ * Presentation-only deletion-status card shown on the signed-in profile screen
+ * when an Echo Profile deletion has already been scheduled or is processing.
+ *
+ * Extracted from the deletion-card section of the Echo UI Reference account screen.
+ *
+ * STATUS BEHAVIOR
+ * ──────────────
+ * pending / failed  → warning-styled "Deletion Scheduled" card with restore button
+ * processing        → error-styled "Deletion In Progress" card, no restore button
+ *
+ * HOST RESPONSIBILITIES
+ * ─────────────────────
+ * • Actual cancellation / restoration RPC (onRestore)
+ * • Loading state while the restore RPC is in flight (restoreLoading)
+ *
+ * No Expo Router, no auth, no contexts, no services, no app-specific code.
+ * Canonical shared component for @echoform/echo-ui.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EchoDeletionStatusCard = EchoDeletionStatusCard;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const theme_1 = require("../theme");
+// ─────────────────────────────────────────────────────────────────────────────
+// Package-local date formatter
+// ─────────────────────────────────────────────────────────────────────────────
+function formatDate(iso) {
+    try {
+        return new Date(iso).toLocaleDateString(undefined, {
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        });
+    }
+    catch (_a) {
+        return iso;
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+function EchoDeletionStatusCard({ status, scheduledFor, daysRemaining = 0, restoreLoading = false, onRestore, }) {
+    if (status === 'processing') {
+        return (<react_native_1.View style={styles.card} accessible accessibilityRole="alert" accessibilityLabel="Echo Profile deletion is currently in progress and cannot be cancelled.">
+        <react_native_1.View style={styles.header}>
+          <react_native_1.ActivityIndicator size="small" color={theme_1.COLORS.error} importantForAccessibility="no"/>
+          <react_native_1.Text style={styles.titleProcessing} importantForAccessibility="no">
+            Deletion In Progress
+          </react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.Text style={styles.body} importantForAccessibility="no">
+          Your Echo Profile is being permanently deleted. This process cannot be interrupted.
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    // pending or failed
+    const a11yLabel = [
+        'Echo Profile deletion scheduled.',
+        `${daysRemaining} days remaining.`,
+        'You may restore your profile before then.',
+    ].join(' ');
+    return (<react_native_1.View style={styles.card} accessible accessibilityRole="alert" accessibilityLabel={a11yLabel}>
+      <react_native_1.View style={styles.header}>
+        <vector_icons_1.MaterialIcons name="schedule" size={20} color={theme_1.COLORS.warning} importantForAccessibility="no" accessibilityElementsHidden/>
+        <react_native_1.Text style={styles.titlePending} importantForAccessibility="no">
+          Deletion Scheduled
+        </react_native_1.Text>
+      </react_native_1.View>
+
+      <react_native_1.Text style={styles.body} importantForAccessibility="no">
+        Your Echo Profile is scheduled for permanent deletion on
+      </react_native_1.Text>
+
+      <react_native_1.Text style={styles.date} importantForAccessibility="no">
+        {scheduledFor ? formatDate(scheduledFor) : '—'}
+      </react_native_1.Text>
+
+      <react_native_1.Text style={[styles.body, { marginTop: theme_1.SPACING.xs }]} importantForAccessibility="no">
+        {`${daysRemaining} day${daysRemaining !== 1 ? 's' : ''} remaining. Cancel before then to restore your profile.`}
+      </react_native_1.Text>
+
+      {onRestore ? (<react_native_1.Pressable onPress={onRestore} disabled={restoreLoading} style={({ pressed }) => [
+                styles.restoreBtn,
+                pressed && { opacity: 0.75 },
+                restoreLoading && { opacity: 0.5 },
+            ]} accessibilityLabel="Cancel deletion and restore Echo Profile" accessibilityRole="button" accessibilityState={{ busy: restoreLoading }}>
+          {restoreLoading ? (<react_native_1.ActivityIndicator size="small" color={theme_1.COLORS.neonGreen} importantForAccessibility="no"/>) : (<vector_icons_1.MaterialIcons name="restore" size={18} color={theme_1.COLORS.neonGreen} importantForAccessibility="no" accessibilityElementsHidden/>)}
+          <react_native_1.Text style={styles.restoreBtnText}>Restore Echo Profile</react_native_1.Text>
+        </react_native_1.Pressable>) : null}
+    </react_native_1.View>);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+const styles = react_native_1.StyleSheet.create({
+    card: {
+        backgroundColor: theme_1.COLORS.warning + '0C',
+        borderRadius: theme_1.RADIUS.xl,
+        borderWidth: 1,
+        borderColor: theme_1.COLORS.warning + '44',
+        padding: theme_1.SPACING.xl,
+        gap: theme_1.SPACING.sm,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme_1.SPACING.sm,
+    },
+    titlePending: {
+        fontSize: theme_1.FONTS.md,
+        fontWeight: '800',
+        color: theme_1.COLORS.warning,
+    },
+    titleProcessing: {
+        fontSize: theme_1.FONTS.md,
+        fontWeight: '800',
+        color: theme_1.COLORS.error,
+    },
+    body: {
+        fontSize: theme_1.FONTS.sm,
+        color: theme_1.COLORS.textSecondary,
+        lineHeight: 20,
+    },
+    date: {
+        fontSize: theme_1.FONTS.lg,
+        fontWeight: '700',
+        color: theme_1.COLORS.warning,
+    },
+    restoreBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme_1.SPACING.sm,
+        backgroundColor: theme_1.COLORS.neonGreen + '15',
+        borderRadius: theme_1.RADIUS.lg,
+        borderWidth: 1.5,
+        borderColor: theme_1.COLORS.neonGreen + 'BB',
+        paddingVertical: theme_1.SPACING.md,
+        marginTop: theme_1.SPACING.xs,
+        minHeight: 52,
+    },
+    restoreBtnText: {
+        fontSize: theme_1.FONTS.md,
+        fontWeight: '700',
+        color: theme_1.COLORS.neonGreen,
+    },
+});
+//# sourceMappingURL=EchoDeletionStatusCard.js.map

package/dist/components/EchoDeletionStatusCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EchoDeletionStatusCard.js","sourceRoot":"","sources":["../../src/components/EchoDeletionStatusCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/EchoEmblem.d.ts

@@ -44,7 +44,7 @@ import type { ImageSource } from 'expo-image';
 export type EchoEmblemProps = {
     /**
      * Remote: `{ uri: 'https://...' }`
-     * Local:  `require('@/assets/my-emblem.png')`
+     * Local:  `require('./assets/my-emblem.png')`
      *
      * Uses expo-image ImageSource — covers both forms natively.
      */

package/dist/components/EchoEmblemPicker.d.ts

@@ -0,0 +1,71 @@
+/**
+ * EchoEmblemPicker
+ *
+ * Presentation-only modal for selecting or clearing an Echo Emblem.
+ * Extracted from the Echo UI Reference EmblemPicker.
+ *
+ * The host app owns all data fetching and the savingId state.
+ * This component is purely presentational and accessible.
+ *
+ * DYNAMIC COLLECTION FILTERS
+ * ──────────────────────────
+ * Filters are generated from the owned Emblem list — no hardcoded app names:
+ *
+ *   "All"      → shows every owned Emblem.
+ *   "Starter"  → shows Emblems whose app_key is null (platform-wide collection).
+ *   <AppName>  → one chip per distinct app_key present in the owned list,
+ *                using metadata.collection_name when available, falling back
+ *                to a title-cased label derived from app_key itself.
+ *
+ * ACCESSIBILITY
+ * ─────────────
+ * • Modal heading announced on open.
+ * • Each filter chip is a button with selected state announced.
+ * • Each emblem cell is a button with selected/disabled/busy state.
+ * • Saving overlay announces busy on the active cell.
+ * • Error and empty states are accessible alert/text roles.
+ *
+ * No Expo Router, no safe-area hooks, no auth, no contexts, no services,
+ * no storage, no app-specific code.
+ * Canonical shared component for @echoform/echo-ui.
+ */
+import React from 'react';
+export type EchoOwnedEmblem = {
+    asset_id: string;
+    asset_key: string;
+    display_name: string;
+    description: string | null;
+    image_url: string;
+    app_key: string | null;
+    sort_order: number;
+    acquired_at: string;
+    acquisition_type: string;
+    acquisition_reference: string | null;
+    is_currently_active: boolean;
+    metadata?: Record<string, unknown> | null;
+};
+export type EchoEmblemPickerProps = {
+    visible: boolean;
+    emblems: EchoOwnedEmblem[];
+    loading: boolean;
+    error: string | null;
+    onClose: () => void;
+    /**
+     * Called when the user taps an Emblem or "No Emblem".
+     * Receives the asset_id to equip, or null to clear.
+     */
+    onSelect: (assetId: string | null) => void | Promise<void>;
+    /**
+     * asset_id currently being saved, 'clear' when clearing, null when idle.
+     * Used to show a per-cell saving spinner and disable the grid.
+     */
+    savingId: string | 'clear' | null;
+    /** Called when the user taps "Try Again" after a load error. */
+    onRetry: () => void;
+    /** Safe-area top inset supplied by the host. Defaults to 0. */
+    topInset?: number;
+    /** Safe-area bottom inset used for scroll padding. Defaults to 0. */
+    bottomInset?: number;
+};
+export declare function EchoEmblemPicker({ visible, emblems, loading, error, onClose, onSelect, savingId, onRetry, topInset, bottomInset, }: EchoEmblemPickerProps): React.JSX.Element;
+//# sourceMappingURL=EchoEmblemPicker.d.ts.map

package/dist/components/EchoEmblemPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EchoEmblemPicker.d.ts","sourceRoot":"","sources":["../../src/components/EchoEmblemPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAoBzE,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D;;;OAGG;IACH,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAClC,gEAAgE;IAChE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAiFF,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAY,EACZ,WAAe,GAChB,EAAE,qBAAqB,qBAiNvB"}