@echoform/echo-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,93 @@
+/**
+ * EchoEmblem — Universal Echo Emblem display component.
+ *
+ * RENDERING CONTRACT
+ * ──────────────────
+ * • Reserves a fixed square slot of `size × size` logical pixels.
+ * • Images are rendered with contentFit="contain" — no cropping, no stretching.
+ * • No overflow:hidden on any container — decorative PNG details outside the
+ *   circular artwork must never be clipped.
+ * • No borderRadius mask applied to the image slot.
+ * • Transparent PNG margins are preserved; layout never shifts while the image
+ *   loads from the network.
+ * • The selection ring extends 4pt outside the slot using absolute positioning;
+ *   it is visible because no parent clips it.
+ *
+ * STATES
+ * ──────
+ * Normal | Loading (spinner) | Error (fallback icon) | Selected (ring) | Disabled (opacity)
+ *
+ * ACCESSIBILITY
+ * ─────────────
+ * • accessibilityRole="button" when onPress is provided, "image" otherwise.
+ * • accessibilityState: selected, disabled, busy (while loading).
+ * • Label auto-computes from displayName; overridable via accessibilityLabel.
+ * • Inner image and overlays are hidden from screen readers.
+ *
+ * STUCK-SPINNER FIX
+ * ─────────────────
+ * The source prop frequently arrives as a new object literal on every render:
+ *
+ *   source={{ uri: imageUrl }}   // new object every render
+ *
+ * If useEffect depended on the object reference, it would reset loading/error
+ * states on every render — even when the URI itself has not changed — leaving
+ * the spinner permanently visible for already-cached images that never fire
+ * onLoadStart again after the first render.
+ *
+ * Fix: derive a stable string key from the actual URI or require() number,
+ * and reset internal state ONLY when that key changes. The wrapper object's
+ * identity is intentionally ignored.
+ */
+import React from 'react';
+import type { ImageSource } from 'expo-image';
+export type EchoEmblemProps = {
+    /**
+     * Remote: `{ uri: 'https://...' }`
+     * Local:  `require('./assets/my-emblem.png')`
+     *
+     * Uses expo-image ImageSource — covers both forms natively.
+     */
+    source: ImageSource;
+    /**
+     * Square slot size in logical pixels.
+     * Tested: 32 | 48 | 64 | 96 | 144.
+     * Defaults to 96.
+     */
+    size?: number;
+    /**
+     * Human-readable emblem name.
+     * Drives the auto-computed accessibility label:
+     *   "Smiley Echo Emblem"
+     *   "Smiley Echo Emblem, selected"
+     *   "Smiley Echo Emblem, unavailable"
+     */
+    displayName?: string;
+    /** True while this emblem is the active/chosen selection. */
+    selected?: boolean;
+    /** True when the emblem is locked or otherwise unavailable to the user. */
+    disabled?: boolean;
+    /**
+     * External loading override.
+     * Pass true while fetching emblem metadata before the URL is resolved.
+     * The component's internal image-load tracking runs independently.
+     */
+    loading?: boolean;
+    /**
+     * When true (default), a neon cyan ring is rendered around the slot
+     * when `selected` is true.
+     */
+    showSelectionIndicator?: boolean;
+    /** Overrides the auto-computed VoiceOver / TalkBack label. */
+    accessibilityLabel?: string;
+    /** Optional hint appended by screen readers after the label. */
+    accessibilityHint?: string;
+    /**
+     * When provided, the component renders as an accessible Pressable button
+     * with scale + opacity press feedback.
+     * Without onPress it renders as an accessible image view.
+     */
+    onPress?: () => void;
+};
+export declare function EchoEmblem({ source, size, displayName, selected, disabled, loading: externalLoading, showSelectionIndicator, accessibilityLabel: customLabel, accessibilityHint, onPress, }: EchoEmblemProps): React.JSX.Element;
+//# sourceMappingURL=EchoEmblem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EchoEmblem.d.ts","sourceRoot":"","sources":["../../src/components/EchoEmblem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AASjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAQ9C,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAwCF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAS,EACT,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,OAAO,EAAE,eAAuB,EAChC,sBAA6B,EAC7B,kBAAkB,EAAE,WAAW,EAC/B,iBAAiB,EACjB,OAAO,GACR,EAAE,eAAe,qBAoNjB"}

package/dist/components/EchoEmblem.js

@@ -0,0 +1,308 @@
+"use strict";
+/**
+ * EchoEmblem — Universal Echo Emblem display component.
+ *
+ * RENDERING CONTRACT
+ * ──────────────────
+ * • Reserves a fixed square slot of `size × size` logical pixels.
+ * • Images are rendered with contentFit="contain" — no cropping, no stretching.
+ * • No overflow:hidden on any container — decorative PNG details outside the
+ *   circular artwork must never be clipped.
+ * • No borderRadius mask applied to the image slot.
+ * • Transparent PNG margins are preserved; layout never shifts while the image
+ *   loads from the network.
+ * • The selection ring extends 4pt outside the slot using absolute positioning;
+ *   it is visible because no parent clips it.
+ *
+ * STATES
+ * ──────
+ * Normal | Loading (spinner) | Error (fallback icon) | Selected (ring) | Disabled (opacity)
+ *
+ * ACCESSIBILITY
+ * ─────────────
+ * • accessibilityRole="button" when onPress is provided, "image" otherwise.
+ * • accessibilityState: selected, disabled, busy (while loading).
+ * • Label auto-computes from displayName; overridable via accessibilityLabel.
+ * • Inner image and overlays are hidden from screen readers.
+ *
+ * STUCK-SPINNER FIX
+ * ─────────────────
+ * The source prop frequently arrives as a new object literal on every render:
+ *
+ *   source={{ uri: imageUrl }}   // new object every render
+ *
+ * If useEffect depended on the object reference, it would reset loading/error
+ * states on every render — even when the URI itself has not changed — leaving
+ * the spinner permanently visible for already-cached images that never fire
+ * onLoadStart again after the first render.
+ *
+ * Fix: derive a stable string key from the actual URI or require() number,
+ * and reset internal state ONLY when that key changes. The wrapper object's
+ * identity is intentionally ignored.
+ */
+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.EchoEmblem = EchoEmblem;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const expo_image_1 = require("expo-image");
+const vector_icons_1 = require("@expo/vector-icons");
+const theme_1 = require("../theme");
+// ─────────────────────────────────────────────────────────────────────────────
+// Stable source key
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Derive a stable primitive key from an ImageSource.
+ *
+ * WHY: Callers frequently pass `source={{ uri: url }}` which creates a NEW
+ * object on every render. Using the object reference in a useEffect dep would
+ * reset loading/error on every render — even for already-cached images that
+ * will not fire onLoadStart again, causing the spinner to stick forever.
+ *
+ * By extracting the underlying string (URI) or number (require() asset),
+ * the effect only resets state when the actual image content changes.
+ */
+function getSourceKey(source) {
+    if (typeof source === 'number')
+        return source; // local require()
+    if (typeof source === 'string')
+        return source; // bare URI string
+    if (source && typeof source === 'object') {
+        // { uri: string } — most common remote form
+        if ('uri' in source && typeof source.uri === 'string')
+            return source.uri;
+        // Array form: use first entry's uri or index
+        if (Array.isArray(source)) {
+            const first = source[0];
+            if (typeof first === 'string')
+                return first;
+            if (typeof first === 'number')
+                return first;
+            if (first && typeof first === 'object' && 'uri' in first && typeof first.uri === 'string') {
+                return first.uri;
+            }
+        }
+    }
+    return '__unknown__';
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+function EchoEmblem({ source, size = 96, displayName, selected = false, disabled = false, loading: externalLoading = false, showSelectionIndicator = true, accessibilityLabel: customLabel, accessibilityHint, onPress, }) {
+    // Prevent state updates after the component unmounts.
+    const mountedRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => () => { mountedRef.current = false; }, []);
+    const [imageLoading, setImageLoading] = (0, react_1.useState)(true);
+    const [imageFailed, setImageFailed] = (0, react_1.useState)(false);
+    /**
+     * Stable primitive key derived from the actual image URI / asset number.
+     *
+     * OBJECT IDENTITY MUST NOT BE USED HERE.
+     * Callers often write:  source={{ uri: url }}
+     * That creates a new object on every render, even if `url` is identical.
+     * Depending on `source` (the object) in useEffect would reset loading/error
+     * on every render cycle, permanently showing the spinner for cached images
+     * that never re-fire onLoadStart after their first successful load.
+     *
+     * We derive `sourceKey` — a string or number — so the effect only runs
+     * when the actual image content changes.
+     */
+    const sourceKey = (0, react_1.useMemo)(() => getSourceKey(source), [source]);
+    // Reset internal load state only when the actual image source changes.
+    // This is the core fix for the stuck-spinner bug.
+    (0, react_1.useEffect)(() => {
+        setImageLoading(true);
+        setImageFailed(false);
+    }, [sourceKey]);
+    const handleLoadStart = (0, react_1.useCallback)(() => {
+        if (!mountedRef.current)
+            return;
+        setImageLoading(true);
+        setImageFailed(false);
+    }, []);
+    const handleLoad = (0, react_1.useCallback)(() => {
+        if (!mountedRef.current)
+            return;
+        setImageLoading(false);
+    }, []);
+    // expo-image also fires `onDisplay` when a cached frame is shown without
+    // a network round-trip — clear the spinner in that case too so cached
+    // images never leave the spinner visible.
+    const handleDisplay = (0, react_1.useCallback)(() => {
+        if (!mountedRef.current)
+            return;
+        setImageLoading(false);
+    }, []);
+    const handleError = (0, react_1.useCallback)(() => {
+        if (!mountedRef.current)
+            return;
+        setImageLoading(false);
+        setImageFailed(true);
+    }, []);
+    // Derived display states
+    const showSpinner = externalLoading || imageLoading;
+    const showError = imageFailed && !externalLoading;
+    // ── Accessibility label ─────────────────────────────────────────────────
+    const baseLabel = displayName ? `${displayName} Echo Emblem` : 'Echo Emblem';
+    const computedLabel = customLabel !== null && customLabel !== void 0 ? customLabel : (showError
+        ? `${baseLabel} image unavailable`
+        : disabled
+            ? `${baseLabel}, unavailable`
+            : selected
+                ? `${baseLabel}, selected`
+                : baseLabel);
+    // hitSlop ensures the minimum 44pt touch target on small sizes.
+    const hitSlop = size < 44
+        ? {
+            top: Math.ceil((44 - size) / 2),
+            bottom: Math.ceil((44 - size) / 2),
+            left: Math.ceil((44 - size) / 2),
+            right: Math.ceil((44 - size) / 2),
+        }
+        : undefined;
+    // Selection ring geometry: 8pt gutter around the slot, no clipping needed.
+    const ringSize = size + 8;
+    const ringOffset = -4;
+    const ringRadius = ringSize / 2;
+    // ── Inner visual content (shared between pressable and image-only) ───────
+    const innerContent = (<react_native_1.View 
+    // Fixed square slot. No overflow:hidden. No borderRadius. No mask.
+    // aspectRatio stabilises layout if the parent constrains one axis.
+    style={[styles.slot, { width: size, height: size }]} 
+    // Android: hide all inner elements from TalkBack — outer wrapper speaks.
+    importantForAccessibility="no-hide-descendants">
+      {/*
+         * expo-image with contentFit="contain":
+         *   • Scales the full PNG (transparent margins included) to fit the slot.
+         *   • Never crops or stretches the artwork.
+         *   • Always rendered (even during load) so image events fire correctly.
+         */}
+      <expo_image_1.Image source={source} style={{ width: size, height: size }} contentFit="contain" onLoadStart={handleLoadStart} onLoad={handleLoad} onDisplay={handleDisplay} onError={handleError} accessible={false}/>
+
+      {/* Loading spinner — floats above the image while it loads */}
+      {showSpinner && !showError ? (<react_native_1.View style={[styles.overlay, { width: size, height: size }]} accessible={false} importantForAccessibility="no">
+          <react_native_1.ActivityIndicator color={theme_1.COLORS.neonCyan} size={size >= 64 ? 'large' : 'small'}/>
+        </react_native_1.View>) : null}
+
+      {/* Error placeholder — replaces the broken image indicator */}
+      {showError ? (<react_native_1.View style={[
+                styles.overlay,
+                styles.errorPlaceholder,
+                { width: size, height: size, borderRadius: Math.round(size * 0.12) },
+            ]} accessible={false} importantForAccessibility="no">
+          <vector_icons_1.MaterialIcons name="image-not-supported" size={Math.max(14, Math.floor(size * 0.38))} color={theme_1.COLORS.textMuted}/>
+        </react_native_1.View>) : null}
+
+      {/*
+         * Selection ring: absolute, extends OUTSIDE the slot via negative insets.
+         * Visible because the slot container has no overflow:hidden.
+         * Decorative only — hidden from screen readers.
+         * iOS: shadow creates neon glow. Android: elevation approximates it.
+         */}
+      {selected && showSelectionIndicator && !showError ? (<react_native_1.View style={[
+                styles.selectionRing,
+                {
+                    width: ringSize,
+                    height: ringSize,
+                    borderRadius: ringRadius,
+                    top: ringOffset,
+                    left: ringOffset,
+                },
+                react_native_1.Platform.OS === 'ios'
+                    ? {
+                        shadowColor: theme_1.COLORS.neonCyan,
+                        shadowOffset: { width: 0, height: 0 },
+                        shadowOpacity: 0.9,
+                        shadowRadius: 10,
+                    }
+                    : { elevation: 5 },
+            ]} accessible={false} importantForAccessibility="no"/>) : null}
+    </react_native_1.View>);
+    // ── Pressable (interactive) ─────────────────────────────────────────────
+    if (onPress) {
+        return (<react_native_1.Pressable onPress={disabled ? undefined : onPress} disabled={disabled} hitSlop={hitSlop} accessibilityRole="button" accessibilityLabel={computedLabel} accessibilityHint={accessibilityHint} accessibilityState={{ selected, disabled, busy: showSpinner }} style={({ pressed }) => [
+                disabled ? styles.disabled : undefined,
+                pressed && !disabled ? styles.pressed : undefined,
+            ]}>
+        {innerContent}
+      </react_native_1.Pressable>);
+    }
+    // ── Image-only (non-interactive) ────────────────────────────────────────
+    return (<react_native_1.View accessible accessibilityRole="image" accessibilityLabel={computedLabel} accessibilityState={{ disabled, busy: showSpinner }} style={disabled ? styles.disabled : undefined}>
+      {innerContent}
+    </react_native_1.View>);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles
+// ─────────────────────────────────────────────────────────────────────────────
+const styles = react_native_1.StyleSheet.create({
+    slot: {
+        // Core contract: fixed square, centered content, no clipping.
+        aspectRatio: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        // overflow:hidden is intentionally absent — decorative artwork details
+        // outside the circular border must remain visible.
+        // borderRadius is intentionally absent — we never mask the PNG.
+    },
+    overlay: {
+        // Used by both the loading spinner and the error placeholder.
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    errorPlaceholder: {
+        backgroundColor: theme_1.COLORS.surfaceHigh,
+    },
+    selectionRing: {
+        // Ring lives outside the slot bounds (negative top/left).
+        // No parent clips it because slot has no overflow:hidden.
+        position: 'absolute',
+        borderWidth: 2.5,
+        borderColor: theme_1.COLORS.neonCyan,
+    },
+    disabled: {
+        // Communicates unavailability without making the artwork unreadable.
+        opacity: 0.42,
+    },
+    pressed: {
+        // Provides clear tactile feedback without distorting the image slot.
+        opacity: 0.72,
+        transform: [{ scale: 0.94 }],
+    },
+});
+//# sourceMappingURL=EchoEmblem.js.map

package/dist/components/EchoEmblem.js.map

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

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