@telemetryos/cli 1.11.0 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @telemetryos/cli
 
+## 1.12.0
+
+### Minor Changes
+
+- Revamp the dev host
+
+### Patch Changes
+
+- Updated dependencies
+  - @telemetryos/development-application-host-ui@1.12.0
+
 ## 1.11.0
 
 ### Minor Changes

package/dist/services/run-server.js

@@ -3,11 +3,11 @@ import { readFile } from 'fs/promises';
 import { fileURLToPath } from 'url';
 import http from 'http';
 import path from 'path';
-import readable from 'readline/promises';
+import { createInterface } from 'readline/promises';
 import serveHandler from 'serve-handler';
 import pkg from '../../package.json' with { type: 'json' };
 import { loadProjectConfig } from './project-config.js';
-import { ansi } from '../utils/ansi.js';
+import { ansi, ansiRegex } from '../utils/ansi.js';
 export async function runServer(projectPath, flags) {
     printSplashScreen();
     projectPath = path.resolve(process.cwd(), projectPath);
@@ -21,6 +21,8 @@ export async function runServer(projectPath, flags) {
     }
     await serveDevelopmentApplicationHostUI(projectPath, flags.port, projectConfig);
     await serveTelemetryApplication(projectPath, projectConfig);
+    // Print ready message after Vite is confirmed ready
+    printServerInfo(flags.port);
 }
 async function serveDevelopmentApplicationHostUI(projectPath, port, projectConfig) {
     const hostUiPath = await import.meta.resolve('@telemetryos/development-application-host-ui/dist');
@@ -122,49 +124,150 @@ async function serveDevelopmentApplicationHostUI(projectPath, port, projectConfi
             }
             return;
         }
+        // TODO: Publish endpoint disabled until auth is working
+        // if (url.pathname === '/__publish__') {
+        //   if (req.method !== 'GET') {
+        //     res.statusCode = 405
+        //     res.end('Method not allowed')
+        //     return
+        //   }
+        //
+        //   // Set SSE headers
+        //   res.setHeader('Content-Type', 'text/event-stream')
+        //   res.setHeader('Cache-Control', 'no-cache')
+        //   res.setHeader('Connection', 'keep-alive')
+        //
+        //   const sendEvent = (event: string, data: any) => {
+        //     res.write(`event: ${event}\n`)
+        //     res.write(`data: ${JSON.stringify(data)}\n\n`)
+        //   }
+        //
+        //   try {
+        //     sendEvent('state', { state: 'starting' })
+        //
+        //     await handlePublishCommand(
+        //       projectPath,
+        //       {},
+        //       {
+        //         onLog: (line: string) => {
+        //           sendEvent('log', { message: line })
+        //         },
+        //         onStateChange: (state: string) => {
+        //           sendEvent('state', { state })
+        //         },
+        //         onComplete: (data: { success: boolean; buildIndex?: number; duration?: string }) => {
+        //           sendEvent('complete', data)
+        //           res.end()
+        //         },
+        //         onError: (error: Error) => {
+        //           const isAuthError =
+        //             error.message.includes('authenticate') ||
+        //             error.message.includes('Not authenticated')
+        //           sendEvent('error', {
+        //             error: error.message,
+        //             code: isAuthError ? 'AUTH_REQUIRED' : 'PUBLISH_FAILED',
+        //             message: isAuthError
+        //               ? "Run 'tos auth' in the terminal to authenticate"
+        //               : error.message,
+        //           })
+        //           res.end()
+        //         },
+        //       },
+        //     )
+        //   } catch (error) {
+        //     sendEvent('error', {
+        //       error: (error as Error).message,
+        //       code: 'UNEXPECTED_ERROR',
+        //       message: (error as Error).message,
+        //     })
+        //     res.end()
+        //   }
+        //   return
+        // }
         serveHandler(req, res, serveConfig).catch((err) => {
             console.error('Error handling request:', err);
             res.statusCode = 500;
             res.end('Internal Server Error');
         });
     });
-    printServerInfo(port);
     server.listen(port);
 }
 async function serveTelemetryApplication(rootPath, projectConfig) {
-    var _a;
-    if (!((_a = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.devServer) === null || _a === void 0 ? void 0 : _a.runCommand)) {
-        console.log('No value in config at devServer.runCommand');
-        return;
-    }
-    const runCommand = projectConfig.devServer.runCommand;
-    const binPath = path.join(rootPath, 'node_modules', '.bin');
-    const childProcess = spawn(runCommand, {
-        shell: true,
-        env: {
-            ...process.env,
-            FORCE_COLOR: '1',
-            PATH: `${binPath}${path.delimiter}${process.env.PATH}`,
-        },
-        stdio: ['ignore', 'pipe', 'pipe'],
-        cwd: rootPath,
-    });
-    const stdoutReadline = readable.createInterface({
-        input: childProcess.stdout,
-        crlfDelay: Infinity,
-    });
-    const stderrReadline = readable.createInterface({
-        input: childProcess.stderr,
-        crlfDelay: Infinity,
-    });
-    stdoutReadline.on('line', (line) => {
-        console.log(`[application]: ${line}`);
-    });
-    stderrReadline.on('line', (line) => {
-        console.error(`[application]: ${line}`);
-    });
-    process.on('exit', () => {
-        childProcess.kill();
+    return new Promise((resolve, reject) => {
+        var _a;
+        if (!((_a = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.devServer) === null || _a === void 0 ? void 0 : _a.runCommand)) {
+            console.log('No value in config at devServer.runCommand');
+            resolve();
+            return;
+        }
+        const runCommand = projectConfig.devServer.runCommand;
+        const binPath = path.join(rootPath, 'node_modules', '.bin');
+        const childProcess = spawn(runCommand, {
+            shell: true,
+            env: {
+                ...process.env,
+                FORCE_COLOR: '1',
+                PATH: `${binPath}${path.delimiter}${process.env.PATH}`,
+            },
+            stdio: ['ignore', 'pipe', 'pipe'],
+            cwd: rootPath,
+        });
+        const stdoutReadline = createInterface({
+            input: childProcess.stdout,
+            crlfDelay: Infinity,
+        });
+        const stderrReadline = createInterface({
+            input: childProcess.stderr,
+            crlfDelay: Infinity,
+        });
+        let cleaned = false;
+        const cleanup = () => {
+            if (cleaned)
+                return;
+            cleaned = true;
+            process.removeListener('exit', onParentExit);
+            clearTimeout(timeoutHandle);
+            childProcess.kill();
+            stdoutReadline.close();
+            stderrReadline.close();
+        };
+        const onParentExit = () => {
+            console.log('Shutting down development server...');
+            cleanup();
+        };
+        process.on('exit', onParentExit);
+        const timeoutHandle = setTimeout(() => {
+            cleanup();
+            reject(new Error('Vite dev server did not start within 30 seconds'));
+        }, 30000);
+        let viteReady = false;
+        stdoutReadline.on('line', (line) => {
+            console.log(`[application]: ${line}`);
+            // Detect Vite ready signal
+            if (!viteReady) {
+                const cleanLine = line.replace(ansiRegex, '');
+                if (cleanLine.includes('VITE') && cleanLine.includes('ready in')) {
+                    viteReady = true;
+                    clearTimeout(timeoutHandle);
+                    resolve();
+                }
+            }
+        });
+        stderrReadline.on('line', (line) => {
+            console.error(`[application]: ${line}`);
+        });
+        childProcess.on('error', (error) => {
+            if (!viteReady) {
+                cleanup();
+                reject(error);
+            }
+        });
+        childProcess.on('close', (code) => {
+            if (!viteReady) {
+                cleanup();
+                reject(new Error(`Dev server process exited with code ${code} before becoming ready`));
+            }
+        });
     });
 }
 function printSplashScreen() {

package/dist/utils/ansi.d.ts

@@ -8,3 +8,4 @@ export declare const ansi: {
     readonly dim: "\u001B[2m";
     readonly reset: "\u001B[0m";
 };
+export declare const ansiRegex: RegExp;

package/dist/utils/ansi.js

@@ -8,3 +8,4 @@ export const ansi = {
     dim: '\u001b[2m',
     reset: '\u001b[0m',
 };
+export const ansiRegex = new RegExp(String.fromCharCode(27) + '\\[[0-9;]*m', 'g');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telemetryos/cli",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "The official TelemetryOS application CLI package. Use it to build applications that run on the TelemetryOS platform",
   "type": "module",
   "bin": {
@@ -25,7 +25,7 @@
   "license": "",
   "repository": "github:TelemetryTV/Application-API",
   "dependencies": {
-    "@telemetryos/development-application-host-ui": "^1.11.0",
+    "@telemetryos/development-application-host-ui": "^1.12.0",
     "@types/serve-handler": "^6.1.4",
     "commander": "^14.0.0",
     "ignore": "^6.0.2",
@@ -43,8 +43,8 @@
     "eslint-plugin-prettier": "^5.4.0",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
-    "typescript-eslint": "^8.49.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.49.0"
   },
   "scripts": {
     "tos": "pnpm build && node dist/index.js",

package/templates/vite-react-typescript/_claude/skills/tos-media-api/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: tos-media-api
-description: Access TelemetryOS Media Library for images, videos, and files. Use when building apps that display user-uploaded media content.
+description: Access TelemetryOS Media Library for images, videos, and files. Use when building apps that display or select user-uploaded media content.
 ---
 
 # TelemetryOS Media API
@@ -23,6 +23,10 @@ const tagged = await media().getAllByTag('banner')
 
 // Get single item by ID
 const item = await media().getById('content-id')
+
+// Open media picker (user selects from full-screen dialog)
+const selection = await media().openPicker()
+const imagesOnly = await media().openPicker({ accept: ['image/*'] })
 ```
 
 ## Response Types
@@ -61,6 +65,29 @@ interface MediaContent {
 }
 ```
 
+### MediaSelection
+
+Returned by `openPicker()` and used by `SettingsMediaSelect`.
+
+```typescript
+interface MediaSelection {
+  id: string
+  name: string
+  thumbnailUrl: string  // Thumbnail for preview
+  url: string           // Full content URL
+  contentType: string   // MIME type
+}
+```
+
+### MediaPickerOptions
+
+```typescript
+interface MediaPickerOptions {
+  accept?: string[]            // Content type filters: ['image/*', 'video/*']
+  currentValue?: MediaSelection // Pre-select current value in picker
+}
+```
+
 ## Common Patterns
 
 ### Folder Picker in Settings
@@ -123,6 +150,64 @@ export default function Settings() {
 }
 ```
 
+### Media Picker in Settings (SettingsMediaSelect)
+
+Use the built-in `SettingsMediaSelect` component to let users pick a media item. Opens a full-screen picker dialog in the host window.
+
+```typescript
+// hooks/store.ts
+import { createUseInstanceStoreState } from '@telemetryos/sdk/react'
+import type { MediaSelection } from '@telemetryos/sdk/react'
+
+export const useMediaState = createUseInstanceStoreState<MediaSelection | null>('selectedMedia', null)
+```
+
+```typescript
+// views/Settings.tsx
+import {
+  SettingsContainer,
+  SettingsField,
+  SettingsLabel,
+  SettingsMediaSelect,
+} from '@telemetryos/sdk/react'
+import { useMediaState } from '../hooks/store'
+
+export default function Settings() {
+  const [isLoading, selectedMedia, setSelectedMedia] = useMediaState()
+
+  return (
+    <SettingsContainer>
+      <SettingsField>
+        <SettingsLabel>Background Image</SettingsLabel>
+        <SettingsMediaSelect
+          value={selectedMedia}
+          onChange={setSelectedMedia}
+          accept={['image/*']}
+          disabled={isLoading}
+        />
+      </SettingsField>
+    </SettingsContainer>
+  )
+}
+```
+
+### Using openPicker() Directly
+
+For custom UI, call `media().openPicker()` directly instead of using the component.
+
+```typescript
+import { media } from '@telemetryos/sdk'
+
+const handleSelectMedia = async () => {
+  const selection = await media().openPicker({ accept: ['image/*'] })
+  if (selection) {
+    // selection has: id, name, thumbnailUrl, url, contentType
+    console.log('Selected:', selection.name, selection.url)
+  }
+  // selection is null if user cancelled
+}
+```
+
 ### Image Gallery in Render
 
 ```typescript
@@ -327,9 +412,11 @@ const activeContent = content.filter(item => {
 
 ## Tips
 
-1. **Use publicUrls[0]** - First URL is the primary CDN URL
-2. **Use thumbnailUrl for previews** - Smaller, faster loading
-3. **Filter by contentType** - Ensure you're displaying compatible content
-4. **Handle empty folders** - Show appropriate message when no content
-5. **Lazy load images** - Use `loading="lazy"` for galleries
-6. **Respect hidden flag** - Filter out hidden items unless intentional
+1. **Use `SettingsMediaSelect` for settings** - Preferred way to let users pick media in Settings views
+2. **Use `openPicker()` for custom UI** - When you need full control over the selection flow
+3. **Use publicUrls[0]** - First URL is the primary CDN URL
+4. **Use thumbnailUrl for previews** - Smaller, faster loading
+5. **Filter by contentType** - Ensure you're displaying compatible content
+6. **Handle empty folders** - Show appropriate message when no content
+7. **Lazy load images** - Use `loading="lazy"` for galleries
+8. **Respect hidden flag** - Filter out hidden items unless intentional

package/templates/vite-react-typescript/_claude/skills/tos-render-design/SKILL.md

@@ -1,624 +0,0 @@
----
-name: tos-render-design
-description: Design patterns for TelemetryOS Render views. Use when building display-only digital signage OR interactive kiosks. Covers responsive scaling, UI patterns, and interaction handling for both models.
----
-
-# Render View Design
-
-TelemetryOS Render views support both **digital signage** (display-only) and **interactive kiosks** (touch-enabled). Understanding which pattern you're building determines how you handle user interaction and state management.
-
-> **Note:** The init project already provides base styles in `index.css` (viewport scaling, box-sizing) and `Render.css` (`.render` class with padding, overflow, flexbox). Build on these—don't override them.
-
----
-
-## Interaction Models
-
-TelemetryOS render views support two interaction models. Both use `@telemetryos/sdk` with the same architecture—the difference is whether the render view includes onClick handlers.
-
-### Digital Signage (Display-Only)
-
-**Use for:** Information displays, dashboards, menu boards, announcements
-
-- Content updates automatically via store subscriptions
-- No user interaction (no mouse, keyboard, touch input)
-- No onClick handlers in render view
-- Viewed from a distance
-- Updates driven by timers, external data, or Settings changes
-
-### Interactive Kiosk (Touch-Enabled)
-
-**Use for:** Wayfinding, directories, check-in systems, search interfaces
-
-- Users can touch/click elements on screen
-- onClick handlers for buttons, navigation, forms
-- Idle timeout returns to home screen after inactivity
-- Touch feedback with :active states (not :hover)
-- Manages interaction state (current screen, navigation history)
-
----
-
-## Digital Signage Pattern (Display-Only)
-
-For apps where users only **view** content from a distance.
-
-### No User Interaction
-
-Assume **no mouse, keyboard, or touch input**:
-
-```css
-/* WRONG - No one will hover on digital signage */
-.button:hover {
-  background: blue;
-}
-
-/* WRONG - No one will focus elements */
-.input:focus {
-  outline: 2px solid blue;
-}
-```
-
-Avoid `:hover`, `:focus`, `:active`, and similar interaction pseudo-classes for display-only apps.
-
-### No Scrolling
-
-Content **must fit the viewport**. There's no user to scroll:
-
-```css
-/* WRONG - Creates scrollbar no one can use */
-.container {
-  overflow-y: scroll;
-}
-
-/* WRONG - Content disappears off-screen */
-.content {
-  height: 150vh;
-}
-```
-
-```css
-/* CORRECT - Content contained */
-.container {
-  height: 100vh;
-  overflow: hidden;
-}
-```
-
-If content might overflow, truncate it or conditionally hide elements—never show a scrollbar.
-
----
-
-## Interactive Kiosk Pattern (Touch-Enabled)
-
-For apps where users **interact** with the screen via touch or click.
-
-### onClick Handlers
-
-Add click handlers to interactive elements:
-
-```typescript
-function Render() {
-  const [screen, setScreen] = useState('home')
-
-  return (
-    <div className="render">
-      {screen === 'home' && (
-        <button
-          className="kiosk-button"
-          onClick={() => setScreen('search')}
-        >
-          Search Directory
-        </button>
-      )}
-      {screen === 'search' && (
-        <SearchScreen onBack={() => setScreen('home')} />
-      )}
-    </div>
-  )
-}
-```
-
-### Touch Feedback (:active states)
-
-Use `:active` pseudo-class for touch feedback (NOT `:hover`):
-
-```css
-.kiosk-button {
-  padding: 2rem 4rem;
-  font-size: 3rem;
-  background: blue;
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  transition: transform 0.1s, background 0.1s;
-}
-
-/* Touch feedback - user sees visual response when tapping */
-.kiosk-button:active {
-  transform: scale(0.95);
-  background: darkblue;
-}
-```
-
-**Why :active instead of :hover?**
-- Touch devices don't have hover
-- :active triggers on touch/click
-- Provides immediate visual feedback
-
-### Idle Timeout Pattern
-
-Return to home screen after inactivity:
-
-```typescript
-function Render() {
-  const [screen, setScreen] = useState('home')
-  const [lastInteraction, setLastInteraction] = useState(Date.now())
-
-  // Return to home after 30 seconds of inactivity
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      const elapsed = Date.now() - lastInteraction
-      if (elapsed > 30000 && screen !== 'home') {
-        setScreen('home')
-      }
-    }, 30000)
-
-    return () => clearTimeout(timeout)
-  }, [lastInteraction, screen])
-
-  const handleInteraction = (newScreen: string) => {
-    setScreen(newScreen)
-    setLastInteraction(Date.now())
-  }
-
-  return (
-    <div className="render">
-      {screen === 'home' && (
-        <button onClick={() => handleInteraction('search')}>
-          Search
-        </button>
-      )}
-    </div>
-  )
-}
-```
-
-### Touch Target Sizing
-
-Make touch targets large enough to tap accurately:
-
-```css
-/* Minimum sizes for touch targets */
-.kiosk-button {
-  min-width: 15rem;  /* Large enough to tap */
-  min-height: 8rem;
-  padding: 2rem 4rem;
-  font-size: 3rem;   /* Large, readable text */
-}
-```
-
-**Guidelines:**
-- Minimum 8rem height for buttons
-- 2rem padding minimum
-- 3rem font size minimum for buttons
-- Gap of at least 1rem between interactive elements
-
-### Store State for Navigation
-
-Use device store to persist state across composition changes:
-
-```typescript
-// hooks/store.ts
-import { createUseDeviceStoreState } from '@telemetryos/sdk/react'
-
-export const useKioskScreenState = createUseDeviceStoreState<string>(
-  'kiosk-screen',
-  'home'
-)
-
-// Render.tsx
-const [_isLoading, screen, setScreen] = useKioskScreenState()
-```
-
-**Why device store?**
-- Persists state on the device (survives composition changes)
-- Doesn't sync to other devices (screen state is device-local)
-
----
-
-## UI Scale Hooks
-
-**Applies to both digital signage and interactive kiosks.**
-
-Displays range from tablets to 8K video walls. Standard CSS pixels create inconsistent sizing. The SDK provides hooks that redefine `rem` as viewport-relative:
-
-### useUiScaleToSetRem(uiScale)
-
-Sets the document's root font-size based on viewport. **Call once in your Render view:**
-
-```typescript
-import { useUiScaleToSetRem } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-
-export function Render() {
-  const [_isLoading, uiScale] = useUiScaleStoreState()
-  useUiScaleToSetRem(uiScale)
-
-  return <div className="content">...</div>
-}
-```
-
-**How it works:**
-- At scale 1: `1rem` = 1% of viewport's longest dimension
-- At scale 2: `1rem` = 2% of viewport's longest dimension
-- A 2rem font occupies identical screen percentage on Full HD and 4K
-
-### useUiAspectRatio()
-
-Returns current aspect ratio, updating on resize:
-
-```typescript
-import { useUiAspectRatio } from '@telemetryos/sdk/react'
-
-export function Render() {
-  const aspectRatio = useUiAspectRatio()
-
-  // > 1 = landscape, < 1 = portrait, = 1 = square
-  const isPortrait = aspectRatio < 1
-
-  return (
-    <div className={isPortrait ? 'portrait-layout' : 'landscape-layout'}>
-      ...
-    </div>
-  )
-}
-```
-
----
-
-## Best Practices
-
-**Applies to both digital signage and interactive kiosks.**
-
-### Use rem for Everything
-
-All sizing should use `rem` to scale with the UI scale setting:
-
-```css
-/* CORRECT - Scales with viewport */
-.title {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-}
-
-.card {
-  padding: 2rem;
-  border-radius: 0.5rem;
-}
-```
-
-```css
-/* WRONG - Fixed pixels don't scale */
-.title {
-  font-size: 48px;
-  margin-bottom: 12px;
-}
-```
-
-### Title Safe Zone
-
-The init project's `.render` class already applies ~3rem padding from screen edges (SMPTE ST 2046-1 standard for avoiding bezel cutoff). Keep this padding when building your layout.
-
-### Minimum Text Size
-
-Text should be no smaller than ~2rem for comfortable viewing at typical distances (approximately 4% of screen height):
-
-```css
-.body-text {
-  font-size: 2rem; /* Minimum readable size */
-}
-
-.headline {
-  font-size: 4rem;
-}
-
-.small-label {
-  font-size: 1.5rem; /* Use sparingly */
-}
-```
-
-### Constrain Layouts
-
-The init project's `index.css` and `.render` class already set up the base layout with `overflow: hidden` and flexbox. When adding child elements, use `min-height: 0` or `min-width: 0` on flex children to allow them to shrink:
-
-```css
-.my-content {
-  flex: 1;
-  min-height: 0; /* Allows flex children to shrink below content size */
-}
-```
-
-### Text Truncation
-
-When text might overflow, truncate gracefully:
-
-```css
-.title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Multi-line truncation */
-.description {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-```
-
-### Adaptive Content
-
-Use `useUiAspectRatio()` to adapt layouts for portrait vs landscape:
-
-```typescript
-function Dashboard() {
-  const aspectRatio = useUiAspectRatio()
-  const isPortrait = aspectRatio < 1
-
-  return (
-    <div className={`dashboard ${isPortrait ? 'dashboard--portrait' : ''}`}>
-      <PrimaryContent />
-      {/* Hide sidebar in portrait mode */}
-      {!isPortrait && <Sidebar />}
-    </div>
-  )
-}
-```
-
----
-
-## Complete Examples
-
-### Digital Signage Example (Display-Only)
-
-```typescript
-// Render.tsx - Display-only dashboard
-import { useUiScaleToSetRem, useUiAspectRatio } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-import './Render.css'
-
-export function Render() {
-  const [isLoading, uiScale] = useUiScaleStoreState()
-  const aspectRatio = useUiAspectRatio()
-
-  useUiScaleToSetRem(uiScale)
-
-  if (isLoading) return null
-
-  const isPortrait = aspectRatio < 1
-
-  return (
-    <div className="render">
-      <header className="render__header">
-        <h1 className="render__title">Dashboard</h1>
-      </header>
-
-      <main className={`render__content ${isPortrait ? 'render__content--portrait' : ''}`}>
-        <div className="render__primary">
-          <MainDisplay />
-        </div>
-
-        {!isPortrait && (
-          <aside className="render__sidebar">
-            <SecondaryInfo />
-          </aside>
-        )}
-      </main>
-    </div>
-  )
-}
-```
-
-```css
-/* Render.css - Display-only styles */
-.render__header {
-  flex-shrink: 0;
-  margin-bottom: 2rem;
-}
-
-.render__title {
-  font-size: 4rem;
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.render__content {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  gap: 2rem;
-}
-
-.render__content--portrait {
-  flex-direction: column;
-}
-
-.render__primary {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
-.render__sidebar {
-  width: 25rem;
-  flex-shrink: 0;
-}
-```
-
-### Interactive Kiosk Example (Touch-Enabled)
-
-```typescript
-// Render.tsx - Interactive kiosk with navigation
-import { useState, useEffect } from 'react'
-import { useUiScaleToSetRem } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-import './Render.css'
-
-export function Render() {
-  const [isLoading, uiScale] = useUiScaleStoreState()
-  const [screen, setScreen] = useState('home')
-  const [lastInteraction, setLastInteraction] = useState(Date.now())
-
-  useUiScaleToSetRem(uiScale)
-
-  // Idle timeout - return to home after 30 seconds
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      const elapsed = Date.now() - lastInteraction
-      if (elapsed > 30000 && screen !== 'home') {
-        setScreen('home')
-      }
-    }, 30000)
-
-    return () => clearTimeout(timeout)
-  }, [lastInteraction, screen])
-
-  const handleInteraction = (newScreen: string) => {
-    setScreen(newScreen)
-    setLastInteraction(Date.now())
-  }
-
-  if (isLoading) return null
-
-  return (
-    <div className="render">
-      {screen === 'home' && (
-        <div className="kiosk-home">
-          <h1 className="kiosk-home__title">Welcome</h1>
-          <button
-            className="kiosk-button"
-            onClick={() => handleInteraction('search')}
-          >
-            Search Directory
-          </button>
-          <button
-            className="kiosk-button"
-            onClick={() => handleInteraction('map')}
-          >
-            View Map
-          </button>
-        </div>
-      )}
-
-      {screen === 'search' && (
-        <SearchScreen onBack={() => handleInteraction('home')} />
-      )}
-
-      {screen === 'map' && (
-        <MapScreen onBack={() => handleInteraction('home')} />
-      )}
-    </div>
-  )
-}
-```
-
-```css
-/* Render.css - Interactive kiosk styles */
-.kiosk-home {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 3rem;
-  height: 100%;
-}
-
-.kiosk-home__title {
-  font-size: 6rem;
-  margin: 0;
-}
-
-/* Touch-friendly button with :active feedback */
-.kiosk-button {
-  min-width: 20rem;
-  min-height: 8rem;
-  padding: 2rem 4rem;
-  font-size: 3rem;
-  background: #0066cc;
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  cursor: pointer;
-  transition: transform 0.1s, background 0.1s;
-}
-
-/* Touch feedback - scales down when tapped */
-.kiosk-button:active {
-  transform: scale(0.95);
-  background: #0052a3;
-}
-```
-
----
-
-## Store Hook for UI Scale
-
-Create a store hook to let admins adjust the UI scale:
-
-```typescript
-// hooks/store.ts
-import { createUseInstanceStoreState } from '@telemetryos/sdk/react'
-
-export const useUiScaleStoreState = createUseInstanceStoreState<number>('ui-scale', 1)
-```
-
-```typescript
-// Settings.tsx - Add slider control
-import { SettingsSliderFrame, SettingsField, SettingsLabel } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-
-export function Settings() {
-  // Pass 0 debounce for instant slider updates
-  const [isLoading, uiScale, setUiScale] = useUiScaleStoreState(0)
-
-  return (
-    <SettingsField>
-      <SettingsLabel>UI Scale</SettingsLabel>
-      <SettingsSliderFrame>
-        <input
-          type="range"
-          min={1}
-          max={3}
-          step={0.01}
-          disabled={isLoading}
-          value={uiScale}
-          onChange={(e) => setUiScale(parseFloat(e.target.value))}
-        />
-        <span>{uiScale}x</span>
-      </SettingsSliderFrame>
-    </SettingsField>
-  )
-}
-```
-
----
-
-## Common Mistakes
-
-| Mistake | Problem | Fix |
-|---------|---------|-----|
-| Using `px` units | Won't scale across resolutions | Use `rem` everywhere |
-| Adding `:hover` styles on digital signage | No mouse on display-only apps | Remove interaction states for display-only |
-| Using `:hover` on interactive kiosks | No hover on touch devices | Use `:active` instead for touch feedback |
-| Using `overflow: scroll` | No user to scroll | Use `overflow: hidden`, truncate content |
-| Fixed heights in `px` | Breaks on different aspect ratios | Use `vh`, `%`, or flex |
-| Forgetting `useUiScaleToSetRem()` | `rem` units won't scale properly | Call it once in Render view with uiScale |
-| Text below 2rem | Unreadable from viewing distance | Minimum 2rem for body text |
-| Small touch targets on kiosks | Hard to tap accurately | Minimum 8rem height, 2rem padding, 3rem font |
-| No idle timeout on kiosks | Kiosk stays on user's screen | Add useEffect timeout logic |
-| No touch feedback on kiosks | User unsure if tap registered | Add :active state animations |
-| Removing `.render` padding | Content cut off by bezels | Keep the ~3rem padding from init project |
-| Overriding `index.css` base styles | Breaks viewport scaling | Add new styles, don't modify base setup |