@thewhateverapp/tile-sdk 0.13.31 → 0.13.33

package/dist/spec/registry/primitives/Spacer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Spacer Component
+ *
+ * Flexible spacer for layout control.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Size } from '../../types';
+export interface SpacerProps extends RegistryComponentProps {
+    /** Fixed size (overrides flex) */
+    size?: Size | number;
+    /** Use flexible space */
+    flex?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Spacer({ size, flex, className }: SpacerProps): JSX.Element;
+export default Spacer;
+//# sourceMappingURL=Spacer.d.ts.map

package/dist/spec/registry/primitives/Spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/Spacer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,WAAW,WAAY,SAAQ,sBAAsB;IACzD,kCAAkC;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAErB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,IAAY,EAAE,SAAc,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAiBvF;AAED,eAAe,MAAM,CAAC"}

package/dist/spec/registry/primitives/Spacer.js

@@ -0,0 +1,25 @@
+/**
+ * Spacer Component
+ *
+ * Flexible spacer for layout control.
+ */
+import React from 'react';
+const sizeClasses = {
+    xs: 'h-1 w-1',
+    sm: 'h-2 w-2',
+    md: 'h-4 w-4',
+    lg: 'h-6 w-6',
+    xl: 'h-8 w-8',
+    '2xl': 'h-10 w-10',
+};
+export function Spacer({ size, flex = false, className = '' }) {
+    if (flex) {
+        return React.createElement("div", { className: `flex-1 ${className}` });
+    }
+    if (typeof size === 'number') {
+        return (React.createElement("div", { className: className, style: { width: size, height: size, minWidth: size, minHeight: size } }));
+    }
+    const sizeClass = size ? sizeClasses[size] : 'h-4 w-4';
+    return React.createElement("div", { className: `${sizeClass} ${className}` });
+}
+export default Spacer;

package/dist/spec/registry/primitives/Stack.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Stack Component
+ *
+ * Vertical flex container with gap and alignment options.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Size, Align } from '../../types';
+export interface StackProps extends RegistryComponentProps {
+    /** Gap between items */
+    gap?: Size;
+    /** Horizontal alignment */
+    align?: Align;
+    /** Padding */
+    padding?: Size;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Stack({ gap, align, padding, fullWidth, className, children, }: StackProps): JSX.Element;
+export default Stack;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/spec/registry/primitives/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/Stack.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,UAAW,SAAQ,sBAAsB;IACxD,wBAAwB;IACxB,GAAG,CAAC,EAAE,IAAI,CAAC;IAEX,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,cAAc;IACd,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,wBAAgB,KAAK,CAAC,EACpB,GAAU,EACV,KAAc,EACd,OAAO,EACP,SAAiB,EACjB,SAAc,EACd,QAAQ,GACT,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAa1B;AAED,eAAe,KAAK,CAAC"}

package/dist/spec/registry/primitives/Stack.js

@@ -0,0 +1,41 @@
+/**
+ * Stack Component
+ *
+ * Vertical flex container with gap and alignment options.
+ */
+import React from 'react';
+const gapClasses = {
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    '2xl': 'gap-10',
+};
+const alignClasses = {
+    left: 'items-start',
+    center: 'items-center',
+    right: 'items-end',
+};
+const paddingClasses = {
+    xs: 'p-1',
+    sm: 'p-2',
+    md: 'p-4',
+    lg: 'p-6',
+    xl: 'p-8',
+    '2xl': 'p-10',
+};
+export function Stack({ gap = 'md', align = 'left', padding, fullWidth = false, className = '', children, }) {
+    const classes = [
+        'flex flex-col',
+        gapClasses[gap],
+        alignClasses[align],
+        padding ? paddingClasses[padding] : '',
+        fullWidth ? 'w-full' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return React.createElement("div", { className: classes }, children);
+}
+export default Stack;

package/dist/spec/registry/primitives/Text.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Text Component
+ *
+ * Renders text with design token-based styling.
+ */
+import type { RegistryComponentProps } from '../ComponentRegistry';
+import type { Size, Weight, Color, Align } from '../../types';
+export interface TextProps extends RegistryComponentProps {
+    /** Text content (or use children) */
+    text?: string;
+    /** Text size */
+    size?: Size;
+    /** Font weight */
+    weight?: Weight;
+    /** Text color */
+    color?: Color;
+    /** Text alignment */
+    align?: Align;
+    /** Max lines before truncation */
+    maxLines?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Text({ text, size, weight, color, align, maxLines, className, children, }: TextProps): JSX.Element;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

package/dist/spec/registry/primitives/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/Text.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gBAAgB;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,iBAAiB;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAW,EACX,MAAiB,EACjB,KAAe,EACf,KAAc,EACd,QAAQ,EACR,SAAc,EACd,QAAQ,GACT,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA2BzB;AAED,eAAe,IAAI,CAAC"}

package/dist/spec/registry/primitives/Text.js

@@ -0,0 +1,33 @@
+/**
+ * Text Component
+ *
+ * Renders text with design token-based styling.
+ */
+import React from 'react';
+import { sizeClasses, weightClasses, colorClasses } from '../ComponentRegistry';
+const alignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+};
+export function Text({ text, size = 'md', weight = 'normal', color = 'white', align = 'left', maxLines, className = '', children, }) {
+    const content = text ?? children;
+    const classes = [
+        sizeClasses[size],
+        weightClasses[weight],
+        colorClasses[color],
+        alignClasses[align],
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const style = {};
+    if (maxLines) {
+        style.display = '-webkit-box';
+        style.WebkitLineClamp = maxLines;
+        style.WebkitBoxOrient = 'vertical';
+        style.overflow = 'hidden';
+    }
+    return (React.createElement("span", { className: classes, style: style }, content));
+}
+export default Text;

package/dist/spec/registry/primitives/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Primitive Components Index
+ *
+ * Exports all primitive components and registers them with the global registry.
+ */
+import { type TextProps } from './Text';
+import { type ButtonProps } from './Button';
+import { type StackProps } from './Stack';
+import { type RowProps } from './Row';
+import { type ImageProps } from './Image';
+import { type ProgressBarProps } from './ProgressBar';
+import { type SpacerProps } from './Spacer';
+import { type DividerProps } from './Divider';
+export { Text, type TextProps } from './Text';
+export { Button, type ButtonProps } from './Button';
+export { Stack, type StackProps } from './Stack';
+export { Row, type RowProps } from './Row';
+export { Image, type ImageProps } from './Image';
+export { ProgressBar, type ProgressBarProps } from './ProgressBar';
+export { Spacer, type SpacerProps } from './Spacer';
+export { Divider, type DividerProps } from './Divider';
+/**
+ * Register all primitive components with the global registry.
+ * This function should be called once at app initialization.
+ */
+export declare function registerPrimitives(): void;
+/**
+ * Component type to props mapping for type safety
+ */
+export interface PrimitivePropsMap {
+    'ui.text': TextProps;
+    'ui.button': ButtonProps;
+    'ui.stack': StackProps;
+    'ui.row': RowProps;
+    'ui.image': ImageProps;
+    'ui.progress': ProgressBarProps;
+    'ui.spacer': SpacerProps;
+    'ui.divider': DividerProps;
+}
+/**
+ * All primitive component type IDs
+ */
+export declare const PRIMITIVE_TYPES: readonly ["ui.text", "ui.button", "ui.stack", "ui.row", "ui.image", "ui.progress", "ui.spacer", "ui.divider"];
+export type PrimitiveType = (typeof PRIMITIVE_TYPES)[number];
+//# sourceMappingURL=index.d.ts.map

package/dist/spec/registry/primitives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/spec/registry/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAGvD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAEvD;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAgBzC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,gBAAgB,CAAC;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,+GASlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/spec/registry/primitives/index.js

@@ -0,0 +1,55 @@
+/**
+ * Primitive Components Index
+ *
+ * Exports all primitive components and registers them with the global registry.
+ */
+import { registerComponent } from '../ComponentRegistry';
+// Import all primitives
+import { Text } from './Text';
+import { Button } from './Button';
+import { Stack } from './Stack';
+import { Row } from './Row';
+import { Image } from './Image';
+import { ProgressBar } from './ProgressBar';
+import { Spacer } from './Spacer';
+import { Divider } from './Divider';
+// Re-export components
+export { Text } from './Text';
+export { Button } from './Button';
+export { Stack } from './Stack';
+export { Row } from './Row';
+export { Image } from './Image';
+export { ProgressBar } from './ProgressBar';
+export { Spacer } from './Spacer';
+export { Divider } from './Divider';
+/**
+ * Register all primitive components with the global registry.
+ * This function should be called once at app initialization.
+ */
+export function registerPrimitives() {
+    // Layout primitives
+    registerComponent('ui.stack', Stack);
+    registerComponent('ui.row', Row);
+    registerComponent('ui.spacer', Spacer);
+    registerComponent('ui.divider', Divider);
+    // Content primitives
+    registerComponent('ui.text', Text);
+    registerComponent('ui.image', Image);
+    // Interactive primitives
+    registerComponent('ui.button', Button);
+    // Feedback primitives
+    registerComponent('ui.progress', ProgressBar);
+}
+/**
+ * All primitive component type IDs
+ */
+export const PRIMITIVE_TYPES = [
+    'ui.text',
+    'ui.button',
+    'ui.stack',
+    'ui.row',
+    'ui.image',
+    'ui.progress',
+    'ui.spacer',
+    'ui.divider',
+];

package/dist/spec/renderer/BindingResolver.d.ts

@@ -0,0 +1,35 @@
+/**
+ * BindingResolver
+ *
+ * Resolves data bindings in spec props.
+ */
+import type { Binding, PropValue, Action } from '../types';
+export interface BindingContext {
+    /** Local state */
+    local: Record<string, unknown>;
+    /** Host-provided data */
+    data: Record<string, unknown>;
+    /** User context */
+    ctx: Record<string, unknown>;
+}
+/**
+ * Resolves a binding path to its value.
+ */
+export declare function resolveBindingPath(path: string, context: BindingContext): unknown;
+/**
+ * Resolves a single binding to its value.
+ */
+export declare function resolveBinding(binding: Binding, context: BindingContext): unknown;
+/**
+ * Resolves all bindings in a props object.
+ */
+export declare function resolveProps(props: Record<string, PropValue> | undefined, context: BindingContext, actionHandler?: (action: Action) => void): Record<string, unknown>;
+/**
+ * Resolves a single prop value.
+ */
+export declare function resolvePropValue(value: PropValue, context: BindingContext, actionHandler?: (action: Action) => void): unknown;
+/**
+ * Creates a binding context from runtime values.
+ */
+export declare function createBindingContext(local: Record<string, unknown>, data: Record<string, unknown>, ctx: Record<string, unknown>): BindingContext;
+//# sourceMappingURL=BindingResolver.d.ts.map

package/dist/spec/renderer/BindingResolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BindingResolver.d.ts","sourceRoot":"","sources":["../../../src/spec/renderer/BindingResolver.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,cAAc;IAC7B,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE9B,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,OAAO,CAmBjF;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,GAAG,OAAO,CAcjF;AAmDD;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,EAC5C,OAAO,EAAE,cAAc,EACvB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GACvC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAYzB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,cAAc,EACvB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GACvC,OAAO,CA+BT;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC3B,cAAc,CAEhB"}

package/dist/spec/renderer/BindingResolver.js

@@ -0,0 +1,131 @@
+/**
+ * BindingResolver
+ *
+ * Resolves data bindings in spec props.
+ */
+import { isBinding, isAction } from '../types';
+/**
+ * Resolves a binding path to its value.
+ */
+export function resolveBindingPath(path, context) {
+    const parts = path.split('.');
+    const scope = parts[0];
+    const rest = parts.slice(1);
+    const scopeData = context[scope];
+    if (scopeData === undefined) {
+        return undefined;
+    }
+    return rest.reduce((current, key) => {
+        if (current === null || current === undefined) {
+            return undefined;
+        }
+        if (typeof current === 'object') {
+            return current[key];
+        }
+        return undefined;
+    }, scopeData);
+}
+/**
+ * Resolves a single binding to its value.
+ */
+export function resolveBinding(binding, context) {
+    const value = resolveBindingPath(binding.$bind, context);
+    // Return fallback if value is undefined
+    if (value === undefined && binding.fallback !== undefined) {
+        return binding.fallback;
+    }
+    // Apply format if specified
+    if (value !== undefined && binding.format) {
+        return formatValue(value, binding.format);
+    }
+    return value;
+}
+/**
+ * Formats a value according to a format string.
+ */
+function formatValue(value, format) {
+    switch (format) {
+        case 'number':
+            return Number(value).toLocaleString();
+        case 'percent':
+            return `${Math.round(Number(value) * 100)}%`;
+        case 'currency':
+            return new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }).format(Number(value));
+        case 'compact':
+            return new Intl.NumberFormat('en-US', {
+                notation: 'compact',
+                compactDisplay: 'short',
+            }).format(Number(value));
+        case 'date':
+            return new Date(value).toLocaleDateString();
+        case 'time':
+            return new Date(value).toLocaleTimeString();
+        case 'datetime':
+            return new Date(value).toLocaleString();
+        case 'duration': {
+            const ms = Number(value);
+            const seconds = Math.floor(ms / 1000);
+            const minutes = Math.floor(seconds / 60);
+            const hours = Math.floor(minutes / 60);
+            if (hours > 0) {
+                return `${hours}:${String(minutes % 60).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+            }
+            return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
+        }
+        default:
+            return String(value);
+    }
+}
+/**
+ * Resolves all bindings in a props object.
+ */
+export function resolveProps(props, context, actionHandler) {
+    if (!props) {
+        return {};
+    }
+    const resolved = {};
+    for (const [key, value] of Object.entries(props)) {
+        resolved[key] = resolvePropValue(value, context, actionHandler);
+    }
+    return resolved;
+}
+/**
+ * Resolves a single prop value.
+ */
+export function resolvePropValue(value, context, actionHandler) {
+    // Handle bindings
+    if (isBinding(value)) {
+        return resolveBinding(value, context);
+    }
+    // Handle actions - convert to callback
+    if (isAction(value)) {
+        if (actionHandler) {
+            return () => actionHandler(value);
+        }
+        return undefined;
+    }
+    // Handle arrays (could contain bindings)
+    if (Array.isArray(value)) {
+        return value.map((item) => resolvePropValue(item, context, actionHandler));
+    }
+    // Handle nested objects (but not bindings/actions)
+    if (typeof value === 'object' && value !== null) {
+        const obj = value;
+        const resolved = {};
+        for (const [k, v] of Object.entries(obj)) {
+            resolved[k] = resolvePropValue(v, context, actionHandler);
+        }
+        return resolved;
+    }
+    // Return primitive values as-is
+    return value;
+}
+/**
+ * Creates a binding context from runtime values.
+ */
+export function createBindingContext(local, data, ctx) {
+    return { local, data, ctx };
+}

package/dist/spec/renderer/CaptionTrack.d.ts

@@ -0,0 +1,22 @@
+/**
+ * CaptionTrack
+ *
+ * Time-synced captions display with theme support.
+ */
+import type { CaptionTrack as CaptionTrackType, CaptionSegment } from '../types';
+export interface CaptionTrackProps {
+    /** Caption track data */
+    track: CaptionTrackType;
+    /** Override styles */
+    className?: string;
+}
+/**
+ * Renders time-synced captions with theme support.
+ */
+export declare function CaptionTrackRenderer({ track, className }: CaptionTrackProps): JSX.Element | null;
+/**
+ * Hook to get the current caption segment.
+ */
+export declare function useActiveCaption(track: CaptionTrackType | undefined): CaptionSegment | null;
+export default CaptionTrackRenderer;
+//# sourceMappingURL=CaptionTrack.d.ts.map

package/dist/spec/renderer/CaptionTrack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionTrack.d.ts","sourceRoot":"","sources":["../../../src/spec/renderer/CaptionTrack.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,cAAc,EAAgB,MAAM,UAAU,CAAC;AAK/F,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,KAAK,EAAE,gBAAgB,CAAC;IAExB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAc,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAyErG;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,GAAG,cAAc,GAAG,IAAI,CAW3F;AAED,eAAe,oBAAoB,CAAC"}

package/dist/spec/renderer/CaptionTrack.js

@@ -0,0 +1,83 @@
+/**
+ * CaptionTrack
+ *
+ * Time-synced captions display with theme support.
+ */
+import React, { useMemo } from 'react';
+import { useOverlayRuntime } from '../runtime/OverlayRuntime';
+import { isTimeInWindow } from '../runtime/TimeSync';
+import { useTheme } from '../theme';
+const positionStyles = {
+    top: { top: '1rem', left: '50%', transform: 'translateX(-50%)' },
+    center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
+    bottom: { bottom: '1rem', left: '50%', transform: 'translateX(-50%)' },
+};
+/**
+ * Renders time-synced captions with theme support.
+ */
+export function CaptionTrackRenderer({ track, className = '' }) {
+    const { time, spec } = useOverlayRuntime();
+    const theme = useTheme();
+    const toleranceMs = spec.sync?.toleranceMs ?? 100;
+    // Find active segment
+    const activeSegment = useMemo(() => {
+        return track.segments.find((segment) => isTimeInWindow(time.timeMs, segment.startMs, segment.endMs, toleranceMs));
+    }, [track.segments, time.timeMs, toleranceMs]);
+    if (!activeSegment) {
+        return null;
+    }
+    const style = track.style ?? {};
+    const position = style.position ?? 'bottom';
+    const size = style.size ?? 'md';
+    // Get theme-aware component styles
+    const captionTheme = theme.components?.caption ?? {};
+    // Container styles
+    const containerStyle = {
+        position: 'absolute',
+        maxWidth: '90%',
+        ...positionStyles[position],
+    };
+    // Background styles
+    const showBackground = style.background !== false && style.background !== 'none';
+    const bgStyle = showBackground
+        ? {
+            backgroundColor: captionTheme.background ?? theme.colors.backgroundOverlay,
+            backdropFilter: captionTheme.backdropBlur !== false ? 'blur(8px)' : undefined,
+            WebkitBackdropFilter: captionTheme.backdropBlur !== false ? 'blur(8px)' : undefined,
+            borderRadius: captionTheme.borderRadius ?? theme.radius.lg,
+            padding: captionTheme.padding ?? `${theme.spacing.sm} ${theme.spacing.md}`,
+        }
+        : {};
+    // Text styles
+    const textStyle = {
+        color: style.color ?? captionTheme.textColor ?? theme.colors.foreground,
+        fontSize: theme.typography.fontSizes[size],
+        fontWeight: theme.typography.fontWeights.medium,
+        fontFamily: theme.typography.fontFamily,
+        textAlign: 'center',
+        textShadow: style.shadow !== false ? '0 2px 4px rgba(0,0,0,0.5)' : undefined,
+    };
+    // Speaker styles
+    const speakerStyle = {
+        color: captionTheme.speakerColor ?? theme.colors.foregroundMuted,
+        fontSize: theme.typography.fontSizes.sm,
+        marginBottom: theme.spacing.xs,
+    };
+    return (React.createElement("div", { style: containerStyle, className: className },
+        React.createElement("div", { style: bgStyle },
+            activeSegment.speaker && (React.createElement("div", { style: speakerStyle }, activeSegment.speaker)),
+            React.createElement("div", { style: textStyle }, activeSegment.text))));
+}
+/**
+ * Hook to get the current caption segment.
+ */
+export function useActiveCaption(track) {
+    const { time, spec } = useOverlayRuntime();
+    const toleranceMs = spec.sync?.toleranceMs ?? 100;
+    return useMemo(() => {
+        if (!track)
+            return null;
+        return track.segments.find((segment) => isTimeInWindow(time.timeMs, segment.startMs, segment.endMs, toleranceMs)) ?? null;
+    }, [track, time.timeMs, toleranceMs]);
+}
+export default CaptionTrackRenderer;

package/dist/spec/renderer/LayoutRenderer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * LayoutRenderer
+ *
+ * Recursively renders a layout tree from spec.
+ */
+import type { LayoutNode } from '../types';
+export interface LayoutRendererProps {
+    /** The layout node to render */
+    node: LayoutNode;
+    /** Optional key for React reconciliation */
+    nodeKey?: string;
+}
+/**
+ * Renders a single layout node and its children.
+ */
+export declare function LayoutRenderer({ node, nodeKey }: LayoutRendererProps): JSX.Element | null;
+/**
+ * Renders a layout tree with error boundary.
+ */
+export declare function LayoutTree({ root }: {
+    root: LayoutNode;
+}): JSX.Element;
+export default LayoutRenderer;
+//# sourceMappingURL=LayoutRenderer.d.ts.map

package/dist/spec/renderer/LayoutRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutRenderer.d.ts","sourceRoot":"","sources":["../../../src/spec/renderer/LayoutRenderer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAU,MAAM,UAAU,CAAC;AAKnD,MAAM,WAAW,mBAAmB;IAClC,gCAAgC;IAChC,IAAI,EAAE,UAAU,CAAC;IAEjB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAqDzF;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAMtE;AAyCD,eAAe,cAAc,CAAC"}

package/dist/spec/renderer/LayoutRenderer.js

@@ -0,0 +1,66 @@
+/**
+ * LayoutRenderer
+ *
+ * Recursively renders a layout tree from spec.
+ */
+import React, { useMemo } from 'react';
+import { useOverlayRuntime } from '../runtime/OverlayRuntime';
+import { getComponent } from '../registry/ComponentRegistry';
+import { resolveProps, createBindingContext } from './BindingResolver';
+/**
+ * Renders a single layout node and its children.
+ */
+export function LayoutRenderer({ node, nodeKey }) {
+    const { state, data, ctx, executeAction } = useOverlayRuntime();
+    // Get component definition from registry
+    const componentDef = getComponent(node.type);
+    if (!componentDef) {
+        console.warn(`Unknown component type: ${node.type}`);
+        return null;
+    }
+    const Component = componentDef.component;
+    // Create binding context
+    const bindingContext = useMemo(() => createBindingContext(state, data, ctx), [state, data, ctx]);
+    // Action handler
+    const handleAction = useMemo(() => (action) => {
+        executeAction(action);
+    }, [executeAction]);
+    // Resolve props with bindings
+    const resolvedProps = useMemo(() => resolveProps(node.props, bindingContext, handleAction), [node.props, bindingContext, handleAction]);
+    // Render children recursively
+    const children = useMemo(() => {
+        if (!node.children || node.children.length === 0) {
+            return undefined;
+        }
+        return node.children.map((child, index) => (React.createElement(LayoutRenderer, { key: child.type + '-' + index, node: child, nodeKey: `${nodeKey || 'root'}-${index}` })));
+    }, [node.children, nodeKey]);
+    return (React.createElement(Component, { ...resolvedProps, key: nodeKey }, children));
+}
+/**
+ * Renders a layout tree with error boundary.
+ */
+export function LayoutTree({ root }) {
+    return (React.createElement(LayoutErrorBoundary, null,
+        React.createElement(LayoutRenderer, { node: root })));
+}
+class LayoutErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Layout render error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (React.createElement("div", { className: "p-2 bg-red-500/20 rounded text-red-400 text-sm" },
+                "Render error: ",
+                this.state.error?.message));
+        }
+        return this.props.children;
+    }
+}
+export default LayoutRenderer;