react-pebble 0.1.0 → 0.2.0

package/dist/lib/src/compiler/index.d.ts

@@ -29,6 +29,8 @@ export interface CompileResult {
     hasButtons: boolean;
     /** Message keys used by useMessage hooks */
     messageKeys: string[];
+    /** Mock data source from useMessage (for generating phone-side JS) */
+    mockDataSource: string | null;
     /** Diagnostic messages from the compiler */
     diagnostics: string;
 }

package/dist/lib/src/components/index.d.ts

@@ -64,6 +64,7 @@ export interface RectProps extends PositionProps, SizeProps {
     fill?: ColorName;
     stroke?: ColorName;
     strokeWidth?: number;
+    borderRadius?: number;
     children?: ReactNode;
 }
 export declare function Rect({ children, ...props }: RectProps): import('preact').VNode<(import('preact').ClassAttributes<HTMLElement> & import('preact').HTMLAttributes<EventTarget> & import('preact').SVGAttributes<SVGElement>) | null>;
@@ -92,12 +93,38 @@ export interface LineProps extends PositionProps {
 export declare function Line(props: LineProps): import('preact').VNode<(import('preact').ClassAttributes<HTMLElement> & import('preact').HTMLAttributes<EventTarget> & import('preact').SVGAttributes<SVGElement>) | null>;
 export interface ImageProps extends PositionProps {
     bitmap: unknown;
+    /** Rotation in radians. */
+    rotation?: number;
+    /** Scale factor (1 = original size). */
+    scale?: number;
 }
 export declare function Image(props: ImageProps): import('preact').VNode<(import('preact').ClassAttributes<HTMLElement> & import('preact').HTMLAttributes<EventTarget> & import('preact').SVGAttributes<SVGElement>) | null>;
-export interface GroupProps extends PositionProps {
+export interface GroupProps extends PositionProps, SizeProps {
     children?: ReactNode;
 }
 export declare function Group({ children, ...props }: GroupProps): import('preact').VNode<(import('preact').ClassAttributes<HTMLElement> & import('preact').HTMLAttributes<EventTarget> & import('preact').SVGAttributes<SVGElement>) | null>;
+export interface ColumnProps extends PositionProps, SizeProps {
+    /** Gap between children in pixels (default 0). */
+    gap?: number;
+    children?: ReactNode;
+}
+/**
+ * Stacks children vertically, auto-computing each child's `y` offset.
+ * Children should specify `h` (or `height`) for correct stacking;
+ * children without a height are given a default of 20px.
+ */
+export declare function Column({ x, y, gap, children, ...props }: ColumnProps): import('preact').VNode<(import('preact').ClassAttributes<HTMLElement> & import('preact').HTMLAttributes<EventTarget> & import('preact').SVGAttributes<SVGElement>) | null>;
+export interface RowProps extends PositionProps, SizeProps {
+    /** Gap between children in pixels (default 0). */
+    gap?: number;
+    children?: ReactNode;
+}
+/**
+ * Stacks children horizontally, auto-computing each child's `x` offset.
+ * Children should specify `w` (or `width`) for correct stacking;
+ * children without a width are given a default of 40px.
+ */
+export declare function Row({ x, y, gap, children, ...props }: RowProps): import('preact').VNode<(import('preact').ClassAttributes<HTMLElement> & import('preact').HTMLAttributes<EventTarget> & import('preact').SVGAttributes<SVGElement>) | null>;
 export interface StatusBarProps {
     color?: ColorName;
     backgroundColor?: ColorName;

package/dist/lib/src/hooks/index.d.ts

@@ -72,4 +72,186 @@ export interface UseMessageResult<T> {
  *   });
  */
 export declare function useMessage<T>(options: UseMessageOptions<T>): UseMessageResult<T>;
+export interface BatteryState {
+    percent: number;
+    charging: boolean;
+    plugged: boolean;
+}
+/**
+ * Returns the current battery state. On Alloy, reads the `Battery` global.
+ * In mock mode (Node), returns a static default (100%, not charging).
+ *
+ * Re-reads on each render; battery updates arrive via watch tick events
+ * which trigger redraws, so the value stays fresh.
+ */
+export declare function useBattery(): BatteryState;
+export interface ConnectionState {
+    app: boolean;
+    pebblekit: boolean;
+}
+/**
+ * Returns the current phone connection state. On Alloy, reads
+ * `watch.connected`. In mock mode, returns connected for both.
+ */
+export declare function useConnection(): ConnectionState;
+/**
+ * Like useState, but backed by localStorage so the value persists across
+ * app restarts and watch reboots.
+ *
+ * On Alloy, `localStorage` is a standard Web API global.
+ * In mock mode (Node), falls back to a plain in-memory useState.
+ *
+ * Values are JSON-serialized. Only use with JSON-safe types.
+ */
+export declare function useLocalStorage<T>(key: string, defaultValue: T): [T, (v: T | ((prev: T) => T)) => void];
+export interface UseFetchOptions<T> {
+    /** Mock data returned in Node mock mode so the compiler can render. */
+    mockData?: T;
+    /** Delay in ms before mock data appears (default 100). */
+    mockDelay?: number;
+    /** fetch() RequestInit options (method, headers, body). */
+    init?: RequestInit;
+}
+export interface UseFetchResult<T> {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Fetch JSON data from a URL.
+ *
+ * On Alloy: uses the standard `fetch()` API (proxied via @moddable/pebbleproxy).
+ * In mock mode (Node): returns `mockData` after `mockDelay` ms.
+ *
+ * Usage:
+ *   const { data, loading, error } = useFetch<Weather>(
+ *     'https://api.example.com/weather',
+ *     { mockData: { temp: 72, condition: 'Sunny' } }
+ *   );
+ */
+export declare function useFetch<T>(url: string, options?: UseFetchOptions<T>): UseFetchResult<T>;
+/** Standard easing functions matching Alloy's Timeline API. */
+export declare const Easing: {
+    readonly linear: (t: number) => number;
+    readonly quadEaseIn: (t: number) => number;
+    readonly quadEaseOut: (t: number) => number;
+    readonly quadEaseInOut: (t: number) => number;
+    readonly cubicEaseIn: (t: number) => number;
+    readonly cubicEaseOut: (t: number) => number;
+    readonly cubicEaseInOut: (t: number) => number;
+    readonly sinEaseIn: (t: number) => number;
+    readonly sinEaseOut: (t: number) => number;
+    readonly sinEaseInOut: (t: number) => number;
+    readonly expoEaseIn: (t: number) => number;
+    readonly expoEaseOut: (t: number) => number;
+    readonly circEaseIn: (t: number) => number;
+    readonly circEaseOut: (t: number) => number;
+    readonly bounceEaseOut: (t: number) => number;
+    readonly bounceEaseIn: (t: number) => number;
+    readonly elasticEaseOut: (t: number) => number;
+    readonly backEaseOut: (t: number) => number;
+};
+export type EasingFn = (t: number) => number;
+export interface UseAnimationOptions {
+    /** Duration in ms. */
+    duration: number;
+    /** Easing function (default: linear). */
+    easing?: EasingFn;
+    /** Delay before start in ms (default: 0). */
+    delay?: number;
+    /** Loop the animation (default: false). */
+    loop?: boolean;
+    /** Auto-start on mount (default: true). */
+    autoStart?: boolean;
+}
+export interface UseAnimationResult {
+    /** Current progress value (0 to 1), eased. */
+    progress: number;
+    /** Whether the animation is currently running. */
+    running: boolean;
+    /** Start or restart the animation. */
+    start: () => void;
+    /** Stop the animation. */
+    stop: () => void;
+}
+/**
+ * Animate a progress value from 0 to 1 over a duration with easing.
+ *
+ * Uses `useTime` internally so that animation progress is derived from
+ * the wall clock. This ensures compatibility with the piu compiler,
+ * which detects time-dependent values via T1/T2 render diffs.
+ *
+ * The animation cycles based on `duration` (in ms). If `loop` is true,
+ * it repeats indefinitely.
+ *
+ * Usage:
+ *   const { progress } = useAnimation({ duration: 10000, easing: Easing.bounceEaseOut, loop: true });
+ *   const x = lerp(0, 200, progress);
+ */
+export declare function useAnimation(options: UseAnimationOptions): UseAnimationResult;
+/**
+ * Interpolate between two values using an animation progress (0-1).
+ */
+export declare function lerp(from: number, to: number, progress: number): number;
+export interface AccelerometerData {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface UseAccelerometerOptions {
+    /** Sample rate in ms (default: 100). */
+    sampleRate?: number;
+    /** Called on tap gesture. */
+    onTap?: () => void;
+    /** Called on double-tap gesture. */
+    onDoubleTap?: () => void;
+}
+/**
+ * Read accelerometer data.
+ *
+ * On Alloy: reads from the Moddable Accelerometer sensor.
+ * In mock mode: returns { x: 0, y: 0, z: -1000 } (gravity pointing down).
+ */
+export declare function useAccelerometer(options?: UseAccelerometerOptions): AccelerometerData;
+export interface CompassData {
+    /** Heading in degrees (0-360, 0 = north). */
+    heading: number;
+}
+/**
+ * Read compass heading.
+ *
+ * On Alloy: reads from the Moddable Compass sensor.
+ * In mock mode: returns a slowly rotating heading.
+ */
+export declare function useCompass(): CompassData;
+export interface UseWebSocketResult {
+    /** Last received message (null until first message). */
+    lastMessage: string | null;
+    /** Whether the connection is open. */
+    connected: boolean;
+    /** Send a message. */
+    send: (data: string) => void;
+    /** Close the connection. */
+    close: () => void;
+}
+/**
+ * Connect to a WebSocket server.
+ *
+ * On Alloy: uses the WebSocket API (proxied via @moddable/pebbleproxy).
+ * In mock mode: simulates a connection that echoes messages back.
+ */
+export declare function useWebSocket(url: string): UseWebSocketResult;
+/**
+ * Key-value storage for binary and structured data using the ECMA-419 API.
+ *
+ * On Alloy: uses `device.keyValue.open(storeName)` for persistent binary storage.
+ * In mock mode: uses an in-memory Map.
+ *
+ * For simple string storage, prefer `useLocalStorage`.
+ */
+export declare function useKVStorage(storeName: string): {
+    get: (key: string) => string | null;
+    set: (key: string, value: string) => void;
+    remove: (key: string) => void;
+};
 export {};

package/dist/lib/src/index.d.ts

@@ -25,10 +25,10 @@ export { SCREEN, PLATFORMS, _setPlatform } from './platform.js';
 export type { PebblePlatform } from './platform.js';
 export { render } from './pebble-render.js';
 export type { PebbleApp, PebblePlatformInfo, RenderOptions, RenderOptionsExt, DrawCall, } from './pebble-render.js';
-export { Window, Rect, Circle, Text, Line, Image, Group, StatusBar, ActionBar, Card, Badge, } from './components/index.js';
-export type { WindowProps, RectProps, CircleProps, TextProps, LineProps, ImageProps, GroupProps, StatusBarProps, ActionBarProps, CardProps, BadgeProps, PositionProps, SizeProps, ButtonHandlerProps, ColorName, FontName, Alignment, } from './components/index.js';
-export { useApp, useButton, useLongButton, useTime, useFormattedTime, useInterval, useListNavigation, ButtonRegistry, PebbleAppContext, } from './hooks/index.js';
-export type { PebbleButton, PebbleButtonHandler, ListNavigationOptions, ListNavigationResult, } from './hooks/index.js';
+export { Window, Rect, Circle, Text, Line, Image, Group, Column, Row, StatusBar, ActionBar, Card, Badge, } from './components/index.js';
+export type { WindowProps, RectProps, CircleProps, TextProps, LineProps, ImageProps, GroupProps, ColumnProps, RowProps, StatusBarProps, ActionBarProps, CardProps, BadgeProps, PositionProps, SizeProps, ButtonHandlerProps, ColorName, FontName, Alignment, } from './components/index.js';
+export { useApp, useButton, useLongButton, useTime, useFormattedTime, useInterval, useListNavigation, useBattery, useConnection, useLocalStorage, useFetch, useAnimation, useAccelerometer, useCompass, useWebSocket, useKVStorage, Easing, lerp, ButtonRegistry, PebbleAppContext, } from './hooks/index.js';
+export type { PebbleButton, PebbleButtonHandler, ListNavigationOptions, ListNavigationResult, BatteryState, ConnectionState, UseFetchOptions, UseFetchResult, UseAnimationOptions, UseAnimationResult, EasingFn, AccelerometerData, UseAccelerometerOptions, CompassData, UseWebSocketResult, } from './hooks/index.js';
 export { default as reconciler } from './pebble-reconciler.js';
 export { ELEMENT_TYPES, appendChildNode, createNode, createTextNode, findRoot, getTextContent, insertBeforeNode, removeChildNode, setAttribute, setTextNodeValue, walkTree, } from './pebble-dom.js';
 export type { AnyNode, DOMElement, ElementType, NodeProps, TextNode, Visitor, } from './pebble-dom.js';

package/dist/lib/src/pebble-output.d.ts

@@ -39,6 +39,21 @@ export declare class PocoRenderer {
     getFont(name: string | undefined): PocoFont;
     private renderChildren;
     private renderNode;
+    /** Fill a circle by drawing horizontal spans for each row. */
+    private fillCircle;
+    /** Stroke a circle outline by drawing small rects at each perimeter point. */
+    private strokeCircle;
+    private drawDiagonalLine;
+    /** Fill a rounded rectangle by combining rects and quarter-circle corners. */
+    private fillRoundRect;
+    /** Stroke a rounded rectangle outline. */
+    private strokeRoundRect;
+    /** Fill four quarter-circles at the corners of a rounded rect. */
+    private fillQuarterCircles;
+    /** Stroke four quarter-circle arcs at the corners of a rounded rect. */
+    private strokeQuarterCircles;
+    /** Break text into lines that fit within maxWidth. */
+    private wrapText;
 }
 export declare function resolveColorName(color: string | undefined): string;
 export declare function resolveFontName(font: string | undefined): string;

package/dist/lib/src/plugin/index.d.ts

@@ -6,6 +6,12 @@ export interface PebblePiuOptions {
     settleMs?: number;
     /** Target platform — sets screen dimensions (default: 'emery') */
     platform?: string;
+    /**
+     * Target platforms for multi-platform builds (e.g. ['emery', 'gabbro']).
+     * When set, builds once per platform into `{buildDir}-{platform}/`.
+     * Overrides the `platform` option.
+     */
+    targetPlatforms?: string[];
     /** Directory for the generated Pebble project (default: '.pebble-build') */
     buildDir?: string;
     /** Auto-run pebble build + install after compilation */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pebble",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Write Pebble watchfaces and apps in JSX — compiles to piu for Pebble Alloy at build time",
   "type": "module",
   "main": "dist/lib/index.cjs",
@@ -36,15 +36,6 @@
     "src",
     "scripts"
   ],
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "test": "npm run typecheck && npx tsx test/snapshot-test.ts",
-    "test:snapshots": "npx tsx test/snapshot-test.ts",
-    "test:update": "npx tsx test/snapshot-test.ts --update",
-    "build": "npm run build:lib",
-    "build:lib": "vite build --config vite.config.lib.js",
-    "prepublishOnly": "npm run test && npm run build"
-  },
   "keywords": [
     "pebble",
     "smartwatch",
@@ -86,5 +77,13 @@
   },
   "dependencies": {
     "preact": "^10.29.1"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "npm run typecheck && npx tsx test/snapshot-test.ts",
+    "test:snapshots": "npx tsx test/snapshot-test.ts",
+    "test:update": "npx tsx test/snapshot-test.ts --update",
+    "build": "npm run build:lib",
+    "build:lib": "vite build --config vite.config.lib.js"
   }
-}
+}