feat: add device option to override device type at render time (#11)

Add device field to RenderOptions allowing users to override the device type
for all scenes without modifying the source. This enables previewing the same
wireframe in different device contexts (desktop, mobile, tablet, etc.).

Changes:
- Added device?: DeviceType field to RenderOptions interface
- Updated Renderer.res to prioritize device option over scene-defined device
- Added test cases for device override functionality

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: wickedev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wyreframe",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "ASCII wireframe + interaction DSL to HTML converter with scene transitions",
   "author": "wickedev",
   "repository": {

src/index.test.ts

@@ -7,7 +7,7 @@
 
 import { describe, test, expect, vi } from 'vitest';
 import { parse, render, createUI } from './index';
-import type { AST, ParseResult, OnSceneChangeCallback } from './index';
+import type { AST, ParseResult, OnSceneChangeCallback, DeviceType, RenderOptions } from './index';
 
 describe('render() input validation (Issue #1)', () => {
   const validWireframe = `
@@ -250,3 +250,112 @@ describe('onSceneChange callback (Issue #2)', () => {
     }
   });
 });
+
+describe('device option override (Issue #11)', () => {
+  const desktopWireframe = `
+@scene: test
+@device: desktop
+
++---------------+
+| Desktop Scene |
++---------------+
+`;
+
+  test('DeviceType type is exported', () => {
+    // Verify the type is exported by using it
+    const device: DeviceType = 'mobile';
+    expect(typeof device).toBe('string');
+  });
+
+  test('RenderOptions includes device field in type definition', () => {
+    // Verify the device option is part of RenderOptions type
+    const options: RenderOptions = {
+      device: 'mobile',
+    };
+    expect(options.device).toBe('mobile');
+  });
+
+  test('RenderOptions accepts all valid device types', () => {
+    const deviceTypes: DeviceType[] = [
+      'desktop',
+      'laptop',
+      'tablet',
+      'tablet-landscape',
+      'mobile',
+      'mobile-landscape',
+    ];
+
+    deviceTypes.forEach((deviceType) => {
+      const options: RenderOptions = { device: deviceType };
+      expect(options.device).toBe(deviceType);
+    });
+  });
+
+  // Note: DOM-dependent tests are skipped in Node.js environment
+  test.skip('render accepts device option without throwing (requires DOM)', () => {
+    const result = parse(desktopWireframe);
+    expect(result.success).toBe(true);
+
+    if (result.success) {
+      // This should not throw - just verify the API accepts the option
+      expect(() => {
+        render(result.ast, { device: 'mobile' });
+      }).not.toThrow();
+    }
+  });
+
+  test.skip('createUI accepts device option without throwing (requires DOM)', () => {
+    // Verify the API accepts the option
+    expect(() => {
+      createUI(desktopWireframe, { device: 'tablet' });
+    }).not.toThrow();
+  });
+
+  test.skip('device option overrides scene-defined device class (requires DOM)', () => {
+    const result = parse(desktopWireframe);
+    expect(result.success).toBe(true);
+
+    if (result.success) {
+      // Render with mobile override
+      const { root } = render(result.ast, { device: 'mobile' });
+
+      // Should have mobile class, not desktop
+      expect(root.classList.contains('wf-device-mobile')).toBe(true);
+      expect(root.classList.contains('wf-device-desktop')).toBe(false);
+    }
+  });
+
+  test.skip('device option applies correct class for all device types (requires DOM)', () => {
+    const result = parse(desktopWireframe);
+    expect(result.success).toBe(true);
+
+    if (result.success) {
+      const deviceClassMap: Record<DeviceType, string> = {
+        desktop: 'wf-device-desktop',
+        laptop: 'wf-device-laptop',
+        tablet: 'wf-device-tablet',
+        'tablet-landscape': 'wf-device-tablet-landscape',
+        mobile: 'wf-device-mobile',
+        'mobile-landscape': 'wf-device-mobile-landscape',
+      };
+
+      Object.entries(deviceClassMap).forEach(([deviceType, expectedClass]) => {
+        const { root } = render(result.ast, { device: deviceType as DeviceType });
+        expect(root.classList.contains(expectedClass)).toBe(true);
+      });
+    }
+  });
+
+  test.skip('renders with scene device when no override provided (requires DOM)', () => {
+    const result = parse(desktopWireframe);
+    expect(result.success).toBe(true);
+
+    if (result.success) {
+      // Render without device override
+      const { root } = render(result.ast);
+
+      // Should use the scene-defined desktop device
+      expect(root.classList.contains('wf-device-desktop')).toBe(true);
+    }
+  });
+});

src/index.ts

@@ -168,6 +168,12 @@ export interface RenderOptions {
    * @param toScene - The scene ID navigating to
    */
   onSceneChange?: OnSceneChangeCallback;
+  /**
+   * Override the device type for all scenes.
+   * When provided, this overrides the device type defined in scene definitions.
+   * Useful for previewing wireframes in different device contexts without modifying the source.
+   */
+  device?: DeviceType;
 }
 
 /** Render result */

src/renderer/Renderer.res

@@ -65,6 +65,7 @@ type renderOptions = {
   injectStyles: bool,
   containerClass: option<string>,
   onSceneChange: option<onSceneChangeCallback>,
+  device: option<deviceType>,
 }
 
 /**
@@ -76,6 +77,7 @@ let defaultOptions: renderOptions = {
   injectStyles: true,
   containerClass: None,
   onSceneChange: None,
+  device: None,
 }
 
 // ============================================================================
@@ -610,10 +612,19 @@ let render = (ast: ast, options: option<renderOptions>): renderResult => {
   | None => ()
   }
 
-  // Apply device class based on first scene's device type
-  switch ast.scenes->Array.get(0) {
-  | Some(firstScene) => {
-      let deviceClass = deviceTypeToClass(firstScene.device)
+  // Apply device class based on options.device override or first scene's device type
+  let deviceType = switch opts.device {
+  | Some(device) => Some(device)
+  | None =>
+    switch ast.scenes->Array.get(0) {
+    | Some(firstScene) => Some(firstScene.device)
+    | None => None
+    }
+  }
+
+  switch deviceType {
+  | Some(device) => {
+      let deviceClass = deviceTypeToClass(device)
       app->DomBindings.classList->DomBindings.add(deviceClass)
     }
   | None => ()