@thewhateverapp/tile-sdk 0.13.31 → 0.13.33

package/dist/spec/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/spec/schema.ts"],"names":[],"mappings":"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"}

package/dist/spec/schema.js

@@ -0,0 +1,284 @@
+/**
+ * Overlay Spec Zod Schema
+ *
+ * Validates spec JSON at runtime for safety and error reporting.
+ */
+import { z } from 'zod';
+// =============================================================================
+// Primitive Schemas
+// =============================================================================
+const SizeSchema = z.enum(['xs', 'sm', 'md', 'lg', 'xl', '2xl']);
+const WeightSchema = z.enum(['normal', 'medium', 'semibold', 'bold']);
+const ColorSchema = z.enum(['primary', 'secondary', 'success', 'warning', 'error', 'muted', 'white', 'black']);
+const VariantSchema = z.enum(['solid', 'outline', 'ghost', 'link']);
+const AlignSchema = z.enum(['left', 'center', 'right']);
+const JustifySchema = z.enum(['start', 'center', 'end', 'between', 'around']);
+// =============================================================================
+// Binding Schema
+// =============================================================================
+const BindingSchema = z.object({
+    $bind: z.string(),
+    fallback: z.unknown().optional(),
+    format: z.string().optional(),
+});
+// =============================================================================
+// Action Schema
+// =============================================================================
+const ActionTypeSchema = z.enum([
+    'emit',
+    'setState',
+    'sequence',
+    'openTile',
+    'openFull',
+    'navigate',
+    'dismiss',
+    'fx',
+]);
+const ActionSchema = z.object({
+    $action: ActionTypeSchema,
+    payload: z.record(z.unknown()).optional(),
+});
+// =============================================================================
+// Prop Value Schema (recursive)
+// =============================================================================
+const PropValueSchema = z.lazy(() => z.union([
+    z.string(),
+    z.number(),
+    z.boolean(),
+    z.null(),
+    BindingSchema,
+    ActionSchema,
+    z.array(PropValueSchema),
+    z.record(PropValueSchema),
+]));
+// =============================================================================
+// Condition Schema (recursive)
+// =============================================================================
+const ConditionSchema = z.lazy(() => z.union([
+    // Binding condition
+    z.object({ $bind: z.string() }),
+    // Comparison condition
+    z.object({
+        op: z.enum(['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'notIn']),
+        left: PropValueSchema,
+        right: PropValueSchema,
+    }),
+    // Logical condition
+    z.object({
+        op: z.enum(['and', 'or', 'not']),
+        conditions: z.array(ConditionSchema),
+    }),
+]));
+// =============================================================================
+// Sync Configuration
+// =============================================================================
+const TimeTransformSchema = z.object({
+    offsetMs: z.number().optional(),
+    scale: z.number().optional(),
+});
+const SyncConfigSchema = z.object({
+    timebase: z.enum(['player', 'wallClock']),
+    tick: z.enum(['raf', 'timeupdate']),
+    toleranceMs: z.number().min(0).max(1000),
+    onSeek: z.literal('recompute'),
+    transform: TimeTransformSchema.optional(),
+    freezeWhen: ConditionSchema.optional(),
+});
+// =============================================================================
+// State Configuration
+// =============================================================================
+const StateConfigSchema = z.object({
+    local: z.record(z.unknown()),
+});
+// =============================================================================
+// Caption Track
+// =============================================================================
+const CaptionSegmentSchema = z.object({
+    startMs: z.number().min(0),
+    endMs: z.number().min(0),
+    text: z.string(),
+    speaker: z.string().optional(),
+});
+const CaptionStyleSchema = z.object({
+    position: z.enum(['top', 'bottom', 'center']),
+    size: SizeSchema,
+    background: z.enum(['none', 'solid', 'gradient']).optional(),
+    color: z.string().optional(),
+});
+const CaptionTrackSchema = z.object({
+    segments: z.array(CaptionSegmentSchema),
+    style: CaptionStyleSchema,
+});
+// =============================================================================
+// Layout Node (recursive)
+// =============================================================================
+const LayoutNodeSchema = z.lazy(() => z.object({
+    type: z.string().min(1),
+    props: z.record(PropValueSchema).optional(),
+    children: z.array(LayoutNodeSchema).optional(),
+    key: z.string().optional(),
+}));
+// =============================================================================
+// Placement
+// =============================================================================
+const TilePlacementSchema = z.object({
+    lane: z.enum(['top', 'center', 'bottom']),
+    inset: z.number().optional(),
+    align: AlignSchema.optional(),
+});
+const FullPlacementSchema = z.object({
+    type: z.enum(['fullscreen', 'inset', 'positioned']),
+    insets: z
+        .object({
+        top: z.number().optional(),
+        right: z.number().optional(),
+        bottom: z.number().optional(),
+        left: z.number().optional(),
+    })
+        .optional(),
+    position: z
+        .object({
+        x: z.union([z.number(), z.string()]),
+        y: z.union([z.number(), z.string()]),
+    })
+        .optional(),
+});
+const PlacementSchema = z.union([TilePlacementSchema, FullPlacementSchema]);
+// =============================================================================
+// Dismiss Policy
+// =============================================================================
+const DismissTriggerSchema = z.enum([
+    'tap-outside',
+    'swipe-down',
+    'timeout',
+    'action',
+    'time-window-end',
+]);
+const DismissPolicySchema = z.object({
+    on: z.array(DismissTriggerSchema),
+    animation: z.enum(['fade', 'slide', 'none']).optional(),
+    durationMs: z.number().min(0).optional(),
+});
+// =============================================================================
+// Time Window
+// =============================================================================
+const TimeWindowSchema = z.object({
+    startMs: z.number().min(0).optional(),
+    endMs: z.number().min(0).optional(),
+});
+// =============================================================================
+// Overlay Cue
+// =============================================================================
+const OverlayCueSchema = z.object({
+    id: z.string().min(1),
+    window: TimeWindowSchema,
+    visibleWhen: ConditionSchema.optional(),
+    placement: PlacementSchema,
+    dismiss: DismissPolicySchema.optional(),
+    layout: LayoutNodeSchema,
+    zIndex: z.number().optional(),
+});
+// =============================================================================
+// Tracks Configuration
+// =============================================================================
+const TracksConfigSchema = z.object({
+    captions: CaptionTrackSchema.optional(),
+    overlays: z.array(OverlayCueSchema),
+});
+// =============================================================================
+// Subscription Declaration
+// =============================================================================
+const SubscriptionDeclarationSchema = z.object({
+    id: z.string().min(1),
+    type: z.enum(['realtime', 'keyspace', 'host']),
+    channel: z.string().min(1),
+    target: z.string().min(1),
+    transform: z.string().optional(),
+});
+// =============================================================================
+// Spec Metadata
+// =============================================================================
+const SpecMetaSchema = z.object({
+    title: z.string().optional(),
+    author: z.string().optional(),
+    description: z.string().optional(),
+    version: z.string().optional(),
+});
+// =============================================================================
+// Main Overlay Spec Schema
+// =============================================================================
+export const OverlaySpecSchema = z.object({
+    specVersion: z.literal('1.0'),
+    id: z.string().min(1),
+    surface: z.enum(['tile', 'full']),
+    meta: SpecMetaSchema.optional(),
+    sync: SyncConfigSchema,
+    state: StateConfigSchema,
+    tracks: TracksConfigSchema,
+    subscriptions: z.array(SubscriptionDeclarationSchema).optional(),
+});
+// =============================================================================
+// Validation Functions
+// =============================================================================
+export function validateSpec(spec) {
+    const result = OverlaySpecSchema.safeParse(spec);
+    if (result.success) {
+        return { success: true, data: result.data };
+    }
+    return { success: false, errors: result.error };
+}
+export function parseSpec(spec) {
+    return OverlaySpecSchema.parse(spec);
+}
+/**
+ * Validate spec against a profile (tile or full)
+ */
+export function validateAgainstProfile(spec, profile) {
+    const errors = [];
+    // Check overlay count
+    if (spec.tracks.overlays.length > profile.maxOverlays) {
+        errors.push(`Too many overlays: ${spec.tracks.overlays.length} (max ${profile.maxOverlays})`);
+    }
+    // Check text lengths in captions
+    if (spec.tracks.captions) {
+        for (const segment of spec.tracks.captions.segments) {
+            if (segment.text.length > profile.maxTextLength) {
+                errors.push(`Caption text too long: ${segment.text.length} chars (max ${profile.maxTextLength})`);
+            }
+        }
+    }
+    // Check for navigation actions if not allowed
+    if (!profile.allowNavigation) {
+        for (const cue of spec.tracks.overlays) {
+            if (hasNavigationAction(cue.layout)) {
+                errors.push(`Navigation actions not allowed in ${profile.name} profile`);
+            }
+        }
+    }
+    return { valid: errors.length === 0, errors };
+}
+function hasNavigationAction(node) {
+    if (node.props) {
+        for (const value of Object.values(node.props)) {
+            if (typeof value === 'object' &&
+                value !== null &&
+                '$action' in value &&
+                (value.$action === 'navigate' ||
+                    value.$action === 'openFull')) {
+                return true;
+            }
+        }
+    }
+    if (node.children) {
+        for (const child of node.children) {
+            if (hasNavigationAction(child)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+// =============================================================================
+// Exports
+// =============================================================================
+export { SizeSchema, WeightSchema, ColorSchema, VariantSchema, AlignSchema, JustifySchema, BindingSchema, ActionSchema, PropValueSchema, ConditionSchema, LayoutNodeSchema, PlacementSchema, OverlayCueSchema, CaptionTrackSchema, };

package/dist/spec/theme/ThemeProvider.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Theme Provider
+ *
+ * Provides theming context for overlay spec components.
+ * AI agents can generate custom themes to style overlays.
+ */
+import { type ReactNode } from 'react';
+export interface OverlayTheme {
+    /** Theme name/identifier */
+    name?: string;
+    /** Color palette */
+    colors: ThemeColors;
+    /** Typography */
+    typography: ThemeTypography;
+    /** Spacing scale */
+    spacing: ThemeSpacing;
+    /** Border radius */
+    radius: ThemeRadius;
+    /** Component-specific overrides */
+    components?: ThemeComponents;
+}
+export interface ThemeColors {
+    /** Primary brand color */
+    primary: string;
+    /** Primary color for text on primary background */
+    primaryForeground: string;
+    /** Secondary/muted color */
+    secondary: string;
+    secondaryForeground: string;
+    /** Background colors */
+    background: string;
+    backgroundMuted: string;
+    backgroundOverlay: string;
+    /** Foreground/text colors */
+    foreground: string;
+    foregroundMuted: string;
+    /** Semantic colors */
+    success: string;
+    warning: string;
+    error: string;
+    /** Border color */
+    border: string;
+}
+export interface ThemeTypography {
+    /** Font family for body text */
+    fontFamily: string;
+    /** Font family for headings */
+    fontFamilyHeading?: string;
+    /** Base font size */
+    fontSizeBase: string;
+    /** Size scale */
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    /** Weight scale */
+    fontWeights: {
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    /** Line heights */
+    lineHeights: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+}
+export interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+export interface ThemeRadius {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+}
+export interface ThemeComponents {
+    /** Caption-specific styling */
+    caption?: {
+        background?: string;
+        textColor?: string;
+        speakerColor?: string;
+        backdropBlur?: boolean;
+        borderRadius?: string;
+        padding?: string;
+    };
+    /** Button overrides */
+    button?: {
+        borderRadius?: string;
+        fontWeight?: number;
+    };
+    /** Card/container overrides */
+    card?: {
+        background?: string;
+        borderRadius?: string;
+        shadow?: string;
+    };
+    /** Progress bar overrides */
+    progressBar?: {
+        trackColor?: string;
+        height?: string;
+    };
+}
+export declare const defaultTheme: OverlayTheme;
+export declare const darkTheme: OverlayTheme;
+export declare const lightTheme: OverlayTheme;
+export declare const neonTheme: OverlayTheme;
+export declare const warmTheme: OverlayTheme;
+export declare const coolTheme: OverlayTheme;
+export interface ThemeProviderProps {
+    /** Theme to use */
+    theme?: Partial<OverlayTheme>;
+    /** Base theme to extend */
+    baseTheme?: OverlayTheme;
+    children: ReactNode;
+}
+/**
+ * Provides theme context to overlay components.
+ */
+export declare function ThemeProvider({ theme, baseTheme, children, }: ThemeProviderProps): JSX.Element;
+/**
+ * Get the current theme.
+ */
+export declare function useTheme(): OverlayTheme;
+/**
+ * Get theme colors.
+ */
+export declare function useThemeColors(): ThemeColors;
+/**
+ * Get a specific color from the theme.
+ */
+export declare function useThemeColor(color: keyof ThemeColors | 'primary' | 'secondary' | 'success' | 'warning' | 'error'): string;
+/**
+ * Generates CSS custom properties from a theme.
+ * Can be injected into a style tag for CSS-based theming.
+ */
+export declare function generateThemeCSS(theme: OverlayTheme): string;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/spec/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/spec/theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}

package/dist/spec/theme/ThemeProvider.js

@@ -0,0 +1,227 @@
+/**
+ * Theme Provider
+ *
+ * Provides theming context for overlay spec components.
+ * AI agents can generate custom themes to style overlays.
+ */
+import React, { createContext, useContext, useMemo } from 'react';
+// =============================================================================
+// Default Theme
+// =============================================================================
+export const defaultTheme = {
+    name: 'default',
+    colors: {
+        primary: '#a855f7', // purple-500
+        primaryForeground: '#ffffff',
+        secondary: '#6b7280', // gray-500
+        secondaryForeground: '#ffffff',
+        background: '#1f2937', // gray-800
+        backgroundMuted: '#374151', // gray-700
+        backgroundOverlay: 'rgba(0, 0, 0, 0.6)',
+        foreground: '#ffffff',
+        foregroundMuted: '#9ca3af', // gray-400
+        success: '#22c55e', // green-500
+        warning: '#eab308', // yellow-500
+        error: '#ef4444', // red-500
+        border: '#4b5563', // gray-600
+    },
+    typography: {
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSizeBase: '16px',
+        fontSizes: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+        },
+        fontWeights: {
+            normal: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+        lineHeights: {
+            tight: 1.25,
+            normal: 1.5,
+            relaxed: 1.75,
+        },
+    },
+    spacing: {
+        xs: '0.25rem',
+        sm: '0.5rem',
+        md: '1rem',
+        lg: '1.5rem',
+        xl: '2rem',
+        '2xl': '2.5rem',
+    },
+    radius: {
+        none: '0',
+        sm: '0.25rem',
+        md: '0.5rem',
+        lg: '0.75rem',
+        full: '9999px',
+    },
+    components: {
+        caption: {
+            backdropBlur: true,
+        },
+    },
+};
+// =============================================================================
+// Dark/Light Presets
+// =============================================================================
+export const darkTheme = {
+    ...defaultTheme,
+    name: 'dark',
+};
+export const lightTheme = {
+    ...defaultTheme,
+    name: 'light',
+    colors: {
+        ...defaultTheme.colors,
+        background: '#f9fafb', // gray-50
+        backgroundMuted: '#f3f4f6', // gray-100
+        backgroundOverlay: 'rgba(255, 255, 255, 0.9)',
+        foreground: '#111827', // gray-900
+        foregroundMuted: '#6b7280', // gray-500
+        border: '#e5e7eb', // gray-200
+    },
+};
+// =============================================================================
+// Vibrant Theme Presets (for AI to use)
+// =============================================================================
+export const neonTheme = {
+    ...defaultTheme,
+    name: 'neon',
+    colors: {
+        ...defaultTheme.colors,
+        primary: '#00ff88',
+        primaryForeground: '#000000',
+        background: '#0a0a0a',
+        backgroundOverlay: 'rgba(0, 0, 0, 0.85)',
+        success: '#00ff88',
+        warning: '#ffff00',
+        error: '#ff0055',
+    },
+};
+export const warmTheme = {
+    ...defaultTheme,
+    name: 'warm',
+    colors: {
+        ...defaultTheme.colors,
+        primary: '#f97316', // orange-500
+        background: '#292524', // stone-800
+        backgroundMuted: '#44403c', // stone-700
+        foregroundMuted: '#a8a29e', // stone-400
+        border: '#57534e', // stone-600
+    },
+};
+export const coolTheme = {
+    ...defaultTheme,
+    name: 'cool',
+    colors: {
+        ...defaultTheme.colors,
+        primary: '#06b6d4', // cyan-500
+        background: '#0c4a6e', // sky-900
+        backgroundMuted: '#075985', // sky-800
+        foregroundMuted: '#7dd3fc', // sky-300
+        border: '#0284c7', // sky-600
+    },
+};
+// =============================================================================
+// Theme Context
+// =============================================================================
+const ThemeContext = createContext(defaultTheme);
+/**
+ * Provides theme context to overlay components.
+ */
+export function ThemeProvider({ theme, baseTheme = defaultTheme, children, }) {
+    const mergedTheme = useMemo(() => {
+        if (!theme)
+            return baseTheme;
+        return {
+            ...baseTheme,
+            ...theme,
+            colors: { ...baseTheme.colors, ...theme.colors },
+            typography: { ...baseTheme.typography, ...theme.typography },
+            spacing: { ...baseTheme.spacing, ...theme.spacing },
+            radius: { ...baseTheme.radius, ...theme.radius },
+            components: { ...baseTheme.components, ...theme.components },
+        };
+    }, [theme, baseTheme]);
+    return (React.createElement(ThemeContext.Provider, { value: mergedTheme }, children));
+}
+// =============================================================================
+// Hooks
+// =============================================================================
+/**
+ * Get the current theme.
+ */
+export function useTheme() {
+    return useContext(ThemeContext);
+}
+/**
+ * Get theme colors.
+ */
+export function useThemeColors() {
+    return useTheme().colors;
+}
+/**
+ * Get a specific color from the theme.
+ */
+export function useThemeColor(color) {
+    const colors = useThemeColors();
+    return colors[color] ?? colors.primary;
+}
+// =============================================================================
+// CSS Variable Injection
+// =============================================================================
+/**
+ * Generates CSS custom properties from a theme.
+ * Can be injected into a style tag for CSS-based theming.
+ */
+export function generateThemeCSS(theme) {
+    return `
+:root {
+  /* Colors */
+  --overlay-color-primary: ${theme.colors.primary};
+  --overlay-color-primary-fg: ${theme.colors.primaryForeground};
+  --overlay-color-secondary: ${theme.colors.secondary};
+  --overlay-color-secondary-fg: ${theme.colors.secondaryForeground};
+  --overlay-color-background: ${theme.colors.background};
+  --overlay-color-background-muted: ${theme.colors.backgroundMuted};
+  --overlay-color-background-overlay: ${theme.colors.backgroundOverlay};
+  --overlay-color-foreground: ${theme.colors.foreground};
+  --overlay-color-foreground-muted: ${theme.colors.foregroundMuted};
+  --overlay-color-success: ${theme.colors.success};
+  --overlay-color-warning: ${theme.colors.warning};
+  --overlay-color-error: ${theme.colors.error};
+  --overlay-color-border: ${theme.colors.border};
+
+  /* Typography */
+  --overlay-font-family: ${theme.typography.fontFamily};
+  --overlay-font-size-xs: ${theme.typography.fontSizes.xs};
+  --overlay-font-size-sm: ${theme.typography.fontSizes.sm};
+  --overlay-font-size-md: ${theme.typography.fontSizes.md};
+  --overlay-font-size-lg: ${theme.typography.fontSizes.lg};
+  --overlay-font-size-xl: ${theme.typography.fontSizes.xl};
+  --overlay-font-size-2xl: ${theme.typography.fontSizes['2xl']};
+
+  /* Spacing */
+  --overlay-spacing-xs: ${theme.spacing.xs};
+  --overlay-spacing-sm: ${theme.spacing.sm};
+  --overlay-spacing-md: ${theme.spacing.md};
+  --overlay-spacing-lg: ${theme.spacing.lg};
+  --overlay-spacing-xl: ${theme.spacing.xl};
+
+  /* Radius */
+  --overlay-radius-sm: ${theme.radius.sm};
+  --overlay-radius-md: ${theme.radius.md};
+  --overlay-radius-lg: ${theme.radius.lg};
+  --overlay-radius-full: ${theme.radius.full};
+}
+`.trim();
+}
+export default ThemeProvider;

package/dist/spec/theme/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Theme Module Index
+ *
+ * Exports theme provider and presets for overlay styling.
+ */
+export { ThemeProvider, useTheme, useThemeColors, useThemeColor, generateThemeCSS, defaultTheme, darkTheme, lightTheme, neonTheme, warmTheme, coolTheme, type OverlayTheme, type ThemeColors, type ThemeTypography, type ThemeSpacing, type ThemeRadius, type ThemeComponents, type ThemeProviderProps, } from './ThemeProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/spec/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/spec/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAEL,aAAa,EACb,QAAQ,EACR,cAAc,EACd,aAAa,EACb,gBAAgB,EAGhB,YAAY,EAGZ,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EAGT,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC"}