react-pebble 0.1.0

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

@@ -0,0 +1,59 @@
+/**
+ * pebble-dom.ts — Virtual DOM layer for React Pebble
+ *
+ * Modeled after Ink's dom.ts but stripped of Yoga layout.
+ * Pebble uses absolute positioning (x, y, w, h) rather than flexbox,
+ * so nodes are just plain JS objects with type, props, and children.
+ *
+ * Each node type maps to a Pebble drawing primitive:
+ *   pbl-root     → Container root (the Window)
+ *   pbl-rect     → fillRect / drawRect
+ *   pbl-circle   → fillCircle / drawCircle
+ *   pbl-text     → drawText
+ *   pbl-line     → drawLine
+ *   pbl-image    → drawImage (bitmap)
+ *   pbl-group    → Logical grouping with offset (no draw call)
+ *   #text        → Raw text content (only valid inside pbl-text)
+ */
+export type ElementType = 'pbl-root' | 'pbl-rect' | 'pbl-circle' | 'pbl-text' | 'pbl-line' | 'pbl-image' | 'pbl-group' | 'pbl-statusbar' | 'pbl-actionbar';
+export declare const ELEMENT_TYPES: ReadonlySet<ElementType>;
+/**
+ * Loose prop bag — element-specific shapes are documented on each component
+ * wrapper, but the reconciler treats them uniformly.
+ */
+export type NodeProps = Record<string, unknown> & {
+    _hidden?: boolean;
+};
+export interface DOMElement {
+    id: number;
+    type: ElementType;
+    props: NodeProps;
+    children: Array<DOMElement | TextNode>;
+    parent: DOMElement | null;
+    /** Called by the reconciler after each commit; wired up by `render()`. */
+    onRender: (() => void) | null;
+    /** Optional layout pass; we currently don't use this. */
+    onComputeLayout: (() => void) | null;
+    /** Internal dirty flag (currently informational only). */
+    _dirty: boolean;
+}
+export interface TextNode {
+    id: number;
+    type: '#text';
+    value: string;
+    parent: DOMElement | null;
+    /** Saved value while the node is hidden by Suspense. */
+    _hiddenValue?: string;
+}
+export type AnyNode = DOMElement | TextNode;
+export declare function createNode(type: ElementType): DOMElement;
+export declare function createTextNode(text: string): TextNode;
+export declare function appendChildNode(parent: DOMElement, child: AnyNode): void;
+export declare function insertBeforeNode(parent: DOMElement, child: AnyNode, beforeChild: AnyNode): void;
+export declare function removeChildNode(parent: DOMElement, child: AnyNode): void;
+export declare function setAttribute(node: DOMElement, key: string, value: unknown): void;
+export declare function setTextNodeValue(node: TextNode, text: string): void;
+export declare function getTextContent(node: AnyNode): string;
+export type Visitor = (node: AnyNode, depth: number) => void;
+export declare function walkTree(root: AnyNode, visitor: Visitor, depth?: number): void;
+export declare function findRoot(node: AnyNode): DOMElement;

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

@@ -0,0 +1,44 @@
+import { default as Poco, PocoColor, PocoFont } from 'commodetto/Poco';
+import { DOMElement } from './pebble-dom.js';
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export declare const COLOR_PALETTE: Readonly<Record<string, RGB>>;
+export interface FontSpec {
+    family: string;
+    size: number;
+}
+export declare const FONT_PALETTE: Readonly<Record<string, FontSpec>>;
+export interface RenderOptions {
+    backgroundColor?: string;
+    /**
+     * Incremental update region. If provided, `poco.begin(x, y, w, h)` is used
+     * to clip drawing to just that region. Otherwise the full frame is redrawn.
+     */
+    dirty?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+}
+export declare class PocoRenderer {
+    readonly poco: Poco;
+    private readonly colorCache;
+    private readonly fontCache;
+    constructor(poco: Poco);
+    /**
+     * Render the full tree into a fresh frame.
+     */
+    render(rootNode: DOMElement, options?: RenderOptions): void;
+    /** Resolve a color name (or pass-through int) to a PocoColor. */
+    getColor(name: string | undefined): PocoColor;
+    /** Resolve a font name to a PocoFont (cached). */
+    getFont(name: string | undefined): PocoFont;
+    private renderChildren;
+    private renderNode;
+}
+export declare function resolveColorName(color: string | undefined): string;
+export declare function resolveFontName(font: string | undefined): string;

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

@@ -0,0 +1,16 @@
+import { ComponentChild } from 'preact';
+import { DOMElement } from './pebble-dom.js';
+import { ShimElement } from './pebble-dom-shim.js';
+export interface PebbleContainer {
+    shimRoot: ShimElement;
+    pblRoot: DOMElement;
+}
+export declare function createContainer(): PebbleContainer;
+export declare function updateContainer(vnode: ComponentChild, container: PebbleContainer): void;
+export declare function unmountContainer(container: PebbleContainer): void;
+declare const _default: {
+    createContainer: typeof createContainer;
+    updateContainer: typeof updateContainer;
+    unmountContainer: typeof unmountContainer;
+};
+export default _default;

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

@@ -0,0 +1,31 @@
+import { ComponentChild } from 'preact';
+import { default as Poco } from 'commodetto/Poco';
+import { DOMElement } from './pebble-dom.js';
+export interface PebblePlatformInfo {
+    isReal: boolean;
+    platform: 'alloy' | 'mock';
+    screenWidth: number;
+    screenHeight: number;
+}
+export interface DrawCall {
+    op: string;
+    [key: string]: unknown;
+}
+export interface RenderOptions {
+    backgroundColor?: string;
+}
+export interface PebbleApp {
+    update(newElement: ComponentChild): void;
+    unmount(): void;
+    readonly platform: PebblePlatformInfo;
+    readonly drawLog: readonly DrawCall[];
+    readonly _root: DOMElement;
+}
+export interface RenderOptionsExt extends RenderOptions {
+    /**
+     * Pre-imported Poco constructor. Alloy entry files must import Poco at
+     * the top and pass it here so the Moddable bundler resolves it correctly.
+     */
+    poco?: typeof Poco;
+}
+export declare function render(element: ComponentChild, options?: RenderOptionsExt): PebbleApp;

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

@@ -0,0 +1,30 @@
+/**
+ * src/platform.ts — Screen dimensions and platform constants.
+ *
+ * The compiler sets these before rendering so components can use
+ * SCREEN.width / SCREEN.height instead of hardcoding pixel values.
+ *
+ * Usage:
+ *   import { SCREEN } from 'react-pebble';
+ *   <Rect x={0} y={0} w={SCREEN.width} h={SCREEN.height} fill="black" />
+ */
+export interface PebblePlatform {
+    name: string;
+    width: number;
+    height: number;
+    isRound: boolean;
+}
+export declare const PLATFORMS: Record<string, PebblePlatform>;
+/**
+ * Current screen dimensions. Set by the compiler before rendering.
+ * Components import this and use SCREEN.width / SCREEN.height for
+ * responsive layouts.
+ */
+export declare const SCREEN: {
+    width: number;
+    height: number;
+    isRound: boolean;
+    platform: string;
+};
+/** @internal — called by the compiler to set the platform. */
+export declare function _setPlatform(platform: string): void;

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

@@ -0,0 +1,20 @@
+import { Plugin } from 'vite';
+export interface PebblePiuOptions {
+    /** Path to the entry .tsx file (relative to project root) */
+    entry: string;
+    /** Milliseconds to wait for async effects before snapshotting */
+    settleMs?: number;
+    /** Target platform — sets screen dimensions (default: 'emery') */
+    platform?: string;
+    /** Directory for the generated Pebble project (default: '.pebble-build') */
+    buildDir?: string;
+    /** Auto-run pebble build + install after compilation */
+    deploy?: boolean;
+    /** Emulator platform for deploy (default: same as platform) */
+    emulator?: string;
+}
+/**
+ * Vite plugin that compiles react-pebble JSX to piu and scaffolds a
+ * Pebble project for deployment.
+ */
+export declare function pebblePiu(options: PebblePiuOptions): Plugin;

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "react-pebble",
+  "version": "0.1.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",
+  "module": "dist/lib/index.js",
+  "types": "dist/lib/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/src/index.d.ts",
+      "import": "./dist/lib/index.js",
+      "require": "./dist/lib/index.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/lib/src/hooks/index.d.ts",
+      "import": "./dist/lib/hooks.js",
+      "require": "./dist/lib/hooks.cjs"
+    },
+    "./components": {
+      "types": "./dist/lib/src/components/index.d.ts",
+      "import": "./dist/lib/components.js",
+      "require": "./dist/lib/components.cjs"
+    },
+    "./plugin": {
+      "types": "./dist/lib/src/plugin/index.d.ts",
+      "import": "./dist/lib/plugin.js"
+    },
+    "./compiler": {
+      "types": "./dist/lib/src/compiler/index.d.ts",
+      "import": "./dist/lib/compiler.js"
+    }
+  },
+  "files": [
+    "dist/lib",
+    "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",
+    "watchface",
+    "piu",
+    "moddable",
+    "alloy",
+    "jsx",
+    "preact",
+    "compiler",
+    "vite-plugin"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eddiemoore/react-pebble"
+  },
+  "homepage": "https://github.com/eddiemoore/react-pebble#readme",
+  "bugs": {
+    "url": "https://github.com/eddiemoore/react-pebble/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.7",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "preact": "^10.29.1"
+  }
+}