@thewhateverapp/tile-sdk 0.13.31 → 0.13.33

package/dist/spec/registry/ComponentRegistry.js

@@ -0,0 +1,227 @@
+/**
+ * Component Registry
+ *
+ * Maps component type IDs (e.g., "ui.text", "ui.button") to React components.
+ * The spec uses string IDs; the registry resolves them to actual components.
+ */
+// =============================================================================
+// Global Registry
+// =============================================================================
+const registry = new Map();
+/**
+ * Register a component with the registry.
+ * Components should extend RegistryComponentProps but can have additional required props.
+ */
+export function registerComponent(type, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+component, options) {
+    registry.set(type, {
+        component,
+        defaults: options?.defaults,
+        transformProps: options?.transformProps,
+    });
+}
+/**
+ * Get a component from the registry
+ */
+export function getComponent(type) {
+    return registry.get(type);
+}
+/**
+ * Check if a component type is registered
+ */
+export function hasComponent(type) {
+    return registry.has(type);
+}
+/**
+ * Get all registered component types
+ */
+export function getRegisteredTypes() {
+    return Array.from(registry.keys());
+}
+/** Alias for getRegisteredTypes */
+export const getAllComponentIds = getRegisteredTypes;
+/**
+ * Clear the registry (useful for testing)
+ */
+export function clearRegistry() {
+    registry.clear();
+}
+// =============================================================================
+// Component Registry Class (for scoped registries)
+// =============================================================================
+export class ComponentRegistry {
+    constructor() {
+        this.components = new Map();
+    }
+    /**
+     * Register a component
+     */
+    register(type, component, options) {
+        this.components.set(type, {
+            component,
+            defaults: options?.defaults,
+            transformProps: options?.transformProps,
+        });
+        return this;
+    }
+    /**
+     * Get a component definition
+     */
+    get(type) {
+        return this.components.get(type);
+    }
+    /**
+     * Check if type is registered
+     */
+    has(type) {
+        return this.components.has(type);
+    }
+    /**
+     * Get all registered types
+     */
+    types() {
+        return Array.from(this.components.keys());
+    }
+    /**
+     * Merge another registry into this one
+     */
+    merge(other) {
+        for (const [type, def] of other.components) {
+            this.components.set(type, def);
+        }
+        return this;
+    }
+    /**
+     * Create a child registry that inherits from this one
+     */
+    extend() {
+        const child = new ComponentRegistry();
+        child.merge(this);
+        return child;
+    }
+}
+// =============================================================================
+// Default Registry Instance
+// =============================================================================
+export const defaultRegistry = new ComponentRegistry();
+/** Alias for defaultRegistry (for compatibility) */
+export const globalRegistry = defaultRegistry;
+// =============================================================================
+// Fallback Component
+// =============================================================================
+/**
+ * Fallback component for unknown types.
+ * This is defined in the React component files that use it.
+ */
+export function createUnknownComponentMessage(type) {
+    return `Unknown component: ${type}`;
+}
+// =============================================================================
+// Design Token Utilities
+// =============================================================================
+/**
+ * Size token to Tailwind class mapping
+ */
+export const sizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+};
+/**
+ * Weight token to Tailwind class mapping
+ */
+export const weightClasses = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
+/**
+ * Color token to Tailwind class mapping
+ */
+export const colorClasses = {
+    primary: 'text-purple-500',
+    secondary: 'text-gray-500',
+    success: 'text-green-500',
+    warning: 'text-yellow-500',
+    error: 'text-red-500',
+    muted: 'text-gray-400',
+    white: 'text-white',
+    black: 'text-black',
+};
+/**
+ * Background color token to Tailwind class mapping
+ */
+export const bgColorClasses = {
+    primary: 'bg-purple-500',
+    secondary: 'bg-gray-500',
+    success: 'bg-green-500',
+    warning: 'bg-yellow-500',
+    error: 'bg-red-500',
+    muted: 'bg-gray-400',
+    white: 'bg-white',
+    black: 'bg-black',
+};
+/**
+ * Variant token to button style mapping
+ */
+export const variantStyles = {
+    solid: {
+        base: 'bg-purple-500 text-white hover:bg-purple-600',
+        disabled: 'bg-gray-300 text-gray-500',
+    },
+    outline: {
+        base: 'border-2 border-purple-500 text-purple-500 hover:bg-purple-50',
+        disabled: 'border-gray-300 text-gray-400',
+    },
+    ghost: {
+        base: 'text-purple-500 hover:bg-purple-50',
+        disabled: 'text-gray-400',
+    },
+    link: {
+        base: 'text-purple-500 underline hover:text-purple-600',
+        disabled: 'text-gray-400',
+    },
+};
+/**
+ * Gap token to Tailwind class mapping
+ */
+export const gapClasses = {
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+};
+/**
+ * Padding token to Tailwind class mapping
+ */
+export const paddingClasses = {
+    xs: 'p-1',
+    sm: 'p-2',
+    md: 'p-4',
+    lg: 'p-6',
+    xl: 'p-8',
+};
+/**
+ * Align token to Tailwind class mapping
+ */
+export const alignClasses = {
+    left: 'items-start',
+    center: 'items-center',
+    right: 'items-end',
+};
+/**
+ * Justify token to Tailwind class mapping
+ */
+export const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+};

package/dist/spec/registry/composites/BottomSheet.d.ts

@@ -0,0 +1,33 @@
+/**
+ * BottomSheet Component
+ *
+ * Slide-up panel with drag-to-dismiss support.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+export interface BottomSheetProps extends RegistryComponentProps {
+    /** Whether the sheet is open */
+    open?: boolean;
+    /** Callback when sheet should close */
+    onClose?: () => void;
+    /** Header title */
+    title?: string;
+    /** Show close button */
+    showCloseButton?: boolean;
+    /** Show drag handle */
+    showDragHandle?: boolean;
+    /** Enable drag to dismiss */
+    dragToDismiss?: boolean;
+    /** Snap points (percentage of screen height) */
+    snapPoints?: number[];
+    /** Initial snap point index */
+    initialSnap?: number;
+    /** Backdrop opacity */
+    backdropOpacity?: number;
+    /** Click backdrop to close */
+    closeOnBackdropClick?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function BottomSheet({ open, onClose, title, showCloseButton, showDragHandle, dragToDismiss, snapPoints, initialSnap, backdropOpacity, closeOnBackdropClick, className, children, }: BottomSheetProps): JSX.Element | null;
+export default BottomSheet;
+//# sourceMappingURL=BottomSheet.d.ts.map

package/dist/spec/registry/composites/BottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/composites/BottomSheet.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,WAAW,CAAC,EAC1B,IAAW,EACX,OAAO,EACP,KAAK,EACL,eAAsB,EACtB,cAAqB,EACrB,aAAoB,EACpB,UAAkB,EAClB,WAAe,EACf,eAAqB,EACrB,oBAA2B,EAC3B,SAAc,EACd,QAAQ,GACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6JvC;AAED,eAAe,WAAW,CAAC"}

package/dist/spec/registry/composites/BottomSheet.js

@@ -0,0 +1,98 @@
+/**
+ * BottomSheet Component
+ *
+ * Slide-up panel with drag-to-dismiss support.
+ */
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+const DRAG_THRESHOLD = 100; // px to trigger dismiss
+const VELOCITY_THRESHOLD = 500; // px/s to trigger dismiss
+export function BottomSheet({ open = true, onClose, title, showCloseButton = true, showDragHandle = true, dragToDismiss = true, snapPoints = [0.5], initialSnap = 0, backdropOpacity = 0.5, closeOnBackdropClick = true, className = '', children, }) {
+    const [isVisible, setIsVisible] = useState(open);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [dragOffset, setDragOffset] = useState(0);
+    const [currentSnap, setCurrentSnap] = useState(initialSnap);
+    const sheetRef = useRef(null);
+    const dragStartRef = useRef(null);
+    // Handle open/close
+    useEffect(() => {
+        if (open) {
+            setIsVisible(true);
+            setIsAnimating(true);
+            setTimeout(() => setIsAnimating(false), 300);
+        }
+        else {
+            setIsAnimating(true);
+            setTimeout(() => {
+                setIsVisible(false);
+                setIsAnimating(false);
+            }, 300);
+        }
+    }, [open]);
+    // Get height for current snap point
+    const snapHeight = snapPoints[currentSnap] ?? 0.5;
+    // Handle backdrop click
+    const handleBackdropClick = useCallback(() => {
+        if (closeOnBackdropClick && onClose) {
+            onClose();
+        }
+    }, [closeOnBackdropClick, onClose]);
+    // Handle close button
+    const handleClose = useCallback(() => {
+        onClose?.();
+    }, [onClose]);
+    // Drag handlers
+    const handleDragStart = useCallback((e) => {
+        if (!dragToDismiss)
+            return;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        dragStartRef.current = { y: clientY, time: Date.now() };
+    }, [dragToDismiss]);
+    const handleDragMove = useCallback((e) => {
+        if (!dragStartRef.current || !dragToDismiss)
+            return;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const delta = clientY - dragStartRef.current.y;
+        // Only allow dragging down
+        if (delta > 0) {
+            setDragOffset(delta);
+        }
+    }, [dragToDismiss]);
+    const handleDragEnd = useCallback(() => {
+        if (!dragStartRef.current || !dragToDismiss)
+            return;
+        const elapsed = Date.now() - dragStartRef.current.time;
+        const velocity = (dragOffset / elapsed) * 1000;
+        // Dismiss if dragged far enough or fast enough
+        if (dragOffset > DRAG_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
+            onClose?.();
+        }
+        setDragOffset(0);
+        dragStartRef.current = null;
+    }, [dragToDismiss, dragOffset, onClose]);
+    if (!isVisible) {
+        return null;
+    }
+    return (React.createElement("div", { className: "bottom-sheet-container fixed inset-0 z-50" },
+        React.createElement("div", { className: `
+          absolute inset-0 bg-black transition-opacity duration-300
+          ${open && !isAnimating ? '' : 'opacity-0'}
+        `, style: { opacity: open && !isAnimating ? backdropOpacity : 0 }, onClick: handleBackdropClick }),
+        React.createElement("div", { ref: sheetRef, className: `
+          absolute bottom-0 left-0 right-0
+          bg-gray-800 rounded-t-2xl
+          transition-transform duration-300 ease-out
+          ${className}
+        `, style: {
+                height: `${snapHeight * 100}%`,
+                transform: `translateY(${open && !isAnimating ? dragOffset : '100%'}px)`,
+            }, onTouchStart: handleDragStart, onTouchMove: handleDragMove, onTouchEnd: handleDragEnd, onMouseDown: handleDragStart, onMouseMove: handleDragMove, onMouseUp: handleDragEnd, onMouseLeave: handleDragEnd },
+            showDragHandle && (React.createElement("div", { className: "flex justify-center pt-3 pb-2" },
+                React.createElement("div", { className: "w-10 h-1 bg-gray-600 rounded-full" }))),
+            (title || showCloseButton) && (React.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-gray-700" },
+                React.createElement("h3", { className: "text-white font-semibold text-lg" }, title),
+                showCloseButton && (React.createElement("button", { onClick: handleClose, className: "p-2 text-gray-400 hover:text-white transition-colors", "aria-label": "Close" },
+                    React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        React.createElement("path", { d: "M15 5L5 15M5 5l10 10" })))))),
+            React.createElement("div", { className: "overflow-auto", style: { maxHeight: 'calc(100% - 60px)' } }, children))));
+}
+export default BottomSheet;

package/dist/spec/registry/composites/CountdownCTA.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CountdownCTA Component
+ *
+ * Urgency countdown with action button.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Color, Variant } from '../../types';
+export interface CountdownCTAProps extends RegistryComponentProps {
+    /** Main headline text */
+    headline?: string;
+    /** Subtext / description */
+    subtext?: string;
+    /** Countdown end time (ISO string or ms timestamp) */
+    endsAt: string | number;
+    /** Button label */
+    buttonLabel: string;
+    /** Button action callback */
+    onPress?: () => void;
+    /** Expired state label */
+    expiredLabel?: string;
+    /** Show urgency styling when time is low */
+    urgentThresholdMs?: number;
+    /** Color theme */
+    color?: Color;
+    /** Button variant */
+    variant?: Variant;
+    /** Compact mode */
+    compact?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function CountdownCTA({ headline, subtext, endsAt, buttonLabel, onPress, expiredLabel, urgentThresholdMs, // 1 minute
+color, variant, compact, className, }: CountdownCTAProps): JSX.Element;
+export default CountdownCTA;
+//# sourceMappingURL=CountdownCTA.d.ts.map

package/dist/spec/registry/composites/CountdownCTA.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownCTA.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/composites/CountdownCTA.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sDAAsD;IACtD,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAC;IAEpB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,kBAAkB;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,YAAwB,EACxB,iBAAyB,EAAE,WAAW;AACtC,KAAiB,EACjB,OAAiB,EACjB,OAAe,EACf,SAAc,GACf,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAiHjC;AAED,eAAe,YAAY,CAAC"}

package/dist/spec/registry/composites/CountdownCTA.js

@@ -0,0 +1,91 @@
+/**
+ * CountdownCTA Component
+ *
+ * Urgency countdown with action button.
+ */
+import React, { useState, useEffect } from 'react';
+const colorClasses = {
+    primary: 'bg-purple-500 hover:bg-purple-600',
+    secondary: 'bg-gray-500 hover:bg-gray-600',
+    success: 'bg-green-500 hover:bg-green-600',
+    warning: 'bg-yellow-500 hover:bg-yellow-600',
+    error: 'bg-red-500 hover:bg-red-600',
+    muted: 'bg-gray-400 hover:bg-gray-500',
+    white: 'bg-white hover:bg-gray-100 text-black',
+    black: 'bg-black hover:bg-gray-900',
+};
+/**
+ * Breaks down milliseconds into time units.
+ */
+function getTimeUnits(ms) {
+    if (ms <= 0)
+        return [];
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const units = [];
+    if (days > 0) {
+        units.push({ value: days, label: 'd' });
+    }
+    if (hours % 24 > 0 || days > 0) {
+        units.push({ value: hours % 24, label: 'h' });
+    }
+    if (minutes % 60 > 0 || hours > 0) {
+        units.push({ value: minutes % 60, label: 'm' });
+    }
+    units.push({ value: seconds % 60, label: 's' });
+    return units.slice(0, 4); // Max 4 units
+}
+export function CountdownCTA({ headline, subtext, endsAt, buttonLabel, onPress, expiredLabel = 'Expired', urgentThresholdMs = 60000, // 1 minute
+color = 'primary', variant = 'solid', compact = false, className = '', }) {
+    const [timeRemaining, setTimeRemaining] = useState(0);
+    // Countdown timer
+    useEffect(() => {
+        const endTime = typeof endsAt === 'string' ? new Date(endsAt).getTime() : endsAt;
+        const update = () => {
+            const remaining = endTime - Date.now();
+            setTimeRemaining(remaining > 0 ? remaining : 0);
+        };
+        update();
+        const interval = setInterval(update, 1000);
+        return () => clearInterval(interval);
+    }, [endsAt]);
+    const isExpired = timeRemaining <= 0;
+    const isUrgent = timeRemaining > 0 && timeRemaining <= urgentThresholdMs;
+    const timeUnits = getTimeUnits(timeRemaining);
+    if (compact) {
+        return (React.createElement("div", { className: `
+          countdown-cta-compact flex items-center gap-3 p-3
+          bg-gray-800/90 backdrop-blur rounded-lg
+          ${isUrgent ? 'animate-pulse' : ''}
+          ${className}
+        ` },
+            React.createElement("div", { className: `text-lg font-mono font-bold ${isUrgent ? 'text-red-400' : 'text-white'}` }, isExpired ? '--:--' : timeUnits.map((u) => String(u.value).padStart(2, '0')).join(':')),
+            React.createElement("button", { onClick: onPress, disabled: isExpired, className: `
+            px-4 py-2 rounded-lg font-semibold text-white
+            transition-all duration-200
+            ${isExpired ? 'bg-gray-600 cursor-not-allowed' : colorClasses[color]}
+          ` }, isExpired ? expiredLabel : buttonLabel)));
+    }
+    return (React.createElement("div", { className: `
+        countdown-cta bg-gray-800/90 backdrop-blur rounded-xl p-5
+        ${isUrgent ? 'ring-2 ring-red-500/50' : ''}
+        ${className}
+      ` },
+        headline && (React.createElement("h3", { className: "text-white font-bold text-lg mb-1" }, headline)),
+        subtext && (React.createElement("p", { className: "text-gray-400 text-sm mb-4" }, subtext)),
+        React.createElement("div", { className: "flex justify-center gap-2 mb-4" }, isExpired ? (React.createElement("div", { className: "text-gray-500 text-2xl font-mono" }, "--:--:--")) : (timeUnits.map((unit, index) => (React.createElement("div", { key: unit.label, className: "text-center" },
+            React.createElement("div", { className: `
+                  text-2xl font-mono font-bold
+                  ${isUrgent ? 'text-red-400' : 'text-white'}
+                ` }, String(unit.value).padStart(2, '0')),
+            React.createElement("div", { className: "text-gray-500 text-xs uppercase" }, unit.label)))))),
+        isUrgent && !isExpired && (React.createElement("div", { className: "text-center text-red-400 text-sm mb-3 animate-pulse" }, "Hurry! Time is running out")),
+        React.createElement("button", { onClick: onPress, disabled: isExpired, className: `
+          w-full py-3 rounded-lg font-semibold text-white
+          transition-all duration-200
+          ${isExpired ? 'bg-gray-600 cursor-not-allowed' : colorClasses[color]}
+        ` }, isExpired ? expiredLabel : buttonLabel)));
+}
+export default CountdownCTA;

package/dist/spec/registry/composites/Poll.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Poll Component
+ *
+ * Multi-choice voting with animated live results.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Color } from '../../types';
+export interface PollOption {
+    id: string;
+    label: string;
+    votes?: number;
+}
+export interface PollProps extends RegistryComponentProps {
+    /** Poll question */
+    question: string;
+    /** Poll options */
+    options: PollOption[] | string[];
+    /** Current results (votes per option) */
+    results?: number[];
+    /** Total votes */
+    totalVotes?: number;
+    /** Show results before voting */
+    showResultsBeforeVote?: boolean;
+    /** Whether the user has already voted */
+    hasVoted?: boolean;
+    /** The option ID the user voted for */
+    votedOptionId?: string;
+    /** Callback when user votes */
+    onVote?: (optionId: string) => void;
+    /** Accent color */
+    color?: Color;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Poll({ question, options: rawOptions, results, totalVotes: providedTotal, showResultsBeforeVote, hasVoted, votedOptionId, onVote, color, disabled, className, }: PollProps): JSX.Element;
+export default Poll;
+//# sourceMappingURL=Poll.d.ts.map

package/dist/spec/registry/composites/Poll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Poll.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/composites/Poll.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAU,KAAK,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,mBAAmB;IACnB,OAAO,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,CAAC;IAEjC,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAO,EAAE,UAAU,EACnB,OAAY,EACZ,UAAU,EAAE,aAAa,EACzB,qBAA6B,EAC7B,QAAgB,EAChB,aAAa,EACb,MAAM,EACN,KAAiB,EACjB,QAAgB,EAChB,SAAc,GACf,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAgGzB;AAED,eAAe,IAAI,CAAC"}

package/dist/spec/registry/composites/Poll.js

@@ -0,0 +1,76 @@
+/**
+ * Poll Component
+ *
+ * Multi-choice voting with animated live results.
+ */
+import React, { useState, useCallback } from 'react';
+const colorClasses = {
+    primary: 'bg-purple-500',
+    secondary: 'bg-gray-500',
+    success: 'bg-green-500',
+    warning: 'bg-yellow-500',
+    error: 'bg-red-500',
+    muted: 'bg-gray-400',
+    white: 'bg-white',
+    black: 'bg-black',
+};
+/**
+ * Normalizes options to a consistent format.
+ */
+function normalizeOptions(options) {
+    return options.map((opt, index) => {
+        if (typeof opt === 'string') {
+            return { id: String(index), label: opt };
+        }
+        return opt;
+    });
+}
+export function Poll({ question, options: rawOptions, results = [], totalVotes: providedTotal, showResultsBeforeVote = false, hasVoted = false, votedOptionId, onVote, color = 'primary', disabled = false, className = '', }) {
+    const [selectedId, setSelectedId] = useState(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const options = normalizeOptions(rawOptions);
+    // Calculate total votes
+    const totalVotes = providedTotal ?? results.reduce((sum, v) => sum + v, 0);
+    // Should we show results?
+    const showResults = hasVoted || showResultsBeforeVote;
+    // Handle option click
+    const handleOptionClick = useCallback((optionId) => {
+        if (disabled || hasVoted || isSubmitting)
+            return;
+        if (onVote) {
+            setIsSubmitting(true);
+            setSelectedId(optionId);
+            onVote(optionId);
+        }
+    }, [disabled, hasVoted, isSubmitting, onVote]);
+    return (React.createElement("div", { className: `poll-component bg-gray-800/90 backdrop-blur rounded-xl p-4 ${className}` },
+        React.createElement("h3", { className: "text-white font-semibold text-lg mb-4" }, question),
+        React.createElement("div", { className: "space-y-2" }, options.map((option, index) => {
+            const votes = results[index] ?? 0;
+            const percentage = totalVotes > 0 ? (votes / totalVotes) * 100 : 0;
+            const isSelected = option.id === selectedId;
+            const isVotedFor = option.id === votedOptionId;
+            const canClick = !disabled && !hasVoted && !isSubmitting;
+            return (React.createElement("button", { key: option.id, onClick: () => handleOptionClick(option.id), disabled: !canClick, className: `
+                w-full relative overflow-hidden rounded-lg p-3 text-left
+                transition-all duration-200
+                ${canClick ? 'hover:bg-gray-700/50 cursor-pointer' : 'cursor-default'}
+                ${isSelected ? 'ring-2 ring-purple-500' : ''}
+                ${isVotedFor ? 'ring-2 ring-green-500' : ''}
+                bg-gray-700/30
+              ` },
+                showResults && (React.createElement("div", { className: `absolute inset-y-0 left-0 ${colorClasses[color]} opacity-30 transition-all duration-500`, style: { width: `${percentage}%` } })),
+                React.createElement("div", { className: "relative flex items-center justify-between" },
+                    React.createElement("span", { className: "text-white font-medium" }, option.label),
+                    showResults && (React.createElement("span", { className: "text-white/70 text-sm" },
+                        Math.round(percentage),
+                        "%")),
+                    isVotedFor && (React.createElement("span", { className: "ml-2 text-green-400" }, "\u2713")))));
+        })),
+        showResults && totalVotes > 0 && (React.createElement("div", { className: "mt-3 text-center text-gray-400 text-sm" },
+            totalVotes.toLocaleString(),
+            " ",
+            totalVotes === 1 ? 'vote' : 'votes')),
+        isSubmitting && !hasVoted && (React.createElement("div", { className: "mt-2 text-center text-gray-400 text-sm" }, "Submitting..."))));
+}
+export default Poll;

package/dist/spec/registry/composites/Prediction.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Prediction Component
+ *
+ * Binary choice prediction with countdown and outcome reveal.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Color } from '../../types';
+export interface PredictionOption {
+    id: string;
+    label: string;
+    odds?: number;
+    percentage?: number;
+}
+export type PredictionStatus = 'open' | 'locked' | 'resolved';
+export interface PredictionProps extends RegistryComponentProps {
+    /** Prediction question */
+    question: string;
+    /** Two options */
+    options: [PredictionOption, PredictionOption] | [string, string];
+    /** Current status */
+    status?: PredictionStatus;
+    /** Winning option ID (when resolved) */
+    winnerId?: string;
+    /** User's prediction option ID */
+    userPredictionId?: string;
+    /** Countdown end time (ISO string or ms timestamp) */
+    locksAt?: string | number;
+    /** Callback when user predicts */
+    onPredict?: (optionId: string) => void;
+    /** Color scheme */
+    colors?: [Color, Color];
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Prediction({ question, options: rawOptions, status, winnerId, userPredictionId, locksAt, onPredict, colors, className, }: PredictionProps): JSX.Element;
+export default Prediction;
+//# sourceMappingURL=Prediction.d.ts.map

package/dist/spec/registry/composites/Prediction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prediction.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/composites/Prediction.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,CAAC;IAEjB,kBAAkB;IAClB,OAAO,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEjE,qBAAqB;IACrB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAE1B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B,kCAAkC;IAClC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,mBAAmB;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAExB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2CD,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EAAE,UAAU,EACnB,MAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,MAA6B,EAC7B,SAAc,GACf,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAuI/B;AAED,eAAe,UAAU,CAAC"}