@telemetryos/cli 1.11.0 → 1.13.0

package/templates/vite-react-typescript-web/assets/tos-app.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="258pt" height="258pt" viewBox="0 0 258 258" style="" preserveAspectRatio="xMidYMid meet">
+<g fill="#000000FF">
+<path d="M 50.000 2.594 C 26.451 7.639 7.292 27.262 2.532 51.208 C 0.208 62.898 0.258 195.123 2.591 206.643 C 6.873 227.792 21.909 245.496 41.686 252.675 C 52.935 256.758 62.175 257.162 135.500 256.771 C 197.509 256.441 205.104 256.227 210.465 254.658 C 232.534 248.202 248.346 232.415 254.695 210.500 C 256.258 205.103 256.466 197.335 256.760 133.195 C 257.134 51.729 257.005 49.878 249.920 35.226 C 242.061 18.972 225.455 6.257 207.185 2.503 C 196.815 0.372 59.999 0.451 50.000 2.594 M 218.171 67.655 C 219.177 68.565 220.000 70.360 220.000 71.644 C 220.000 74.019 217.097 85.638 214.346 94.269 C 212.009 101.603 210.642 102.000 187.705 102.000 C 170.049 102.000 168.159 102.167 166.622 103.865 C 165.656 104.932 160.251 123.192 153.980 146.574 C 146.078 176.037 142.457 187.988 140.988 189.460 C 139.175 191.274 137.454 191.536 125.419 191.829 C 105.566 192.311 104.849 191.534 109.420 174.500 C 110.748 169.550 115.247 152.778 119.417 137.229 C 123.588 121.680 127.000 107.932 127.000 106.679 C 127.000 102.305 125.651 102.000 106.300 102.000 C 89.333 102.000 87.854 101.854 86.000 100.000 C 84.900 98.900 84.000 97.434 84.000 96.742 C 84.000 96.050 85.538 89.872 87.417 83.012 C 90.090 73.257 91.409 70.045 93.473 68.270 L 96.112 66.000 156.227 66.000 C 210.762 66.000 216.512 66.154 218.171 67.655 M 113.171 112.655 C 114.177 113.565 115.000 115.215 115.000 116.322 C 115.000 119.129 109.072 140.911 107.719 143.079 C 105.740 146.247 102.139 147.000 88.953 147.000 C 77.333 147.000 75.794 146.794 74.000 145.000 C 72.900 143.900 72.001 142.438 72.002 141.750 C 72.004 139.717 77.964 117.689 79.145 115.352 C 80.934 111.808 83.867 111.139 97.921 111.068 C 109.071 111.011 111.652 111.280 113.171 112.655 M 77.495 66.636 C 80.995 67.979 80.987 71.343 77.456 84.594 C 75.311 92.642 73.282 98.164 71.996 99.451 C 70.173 101.276 68.473 101.536 56.419 101.829 C 36.114 102.322 35.816 101.938 41.058 82.083 C 45.310 65.978 45.281 66.000 62.474 66.000 C 69.823 66.000 76.583 66.286 77.495 66.636 "/></g>
+<g fill="#F7B435FF">
+<path d="M 93.473 68.270 C 91.409 70.045 90.090 73.257 87.417 83.012 C 85.538 89.872 84.000 96.050 84.000 96.742 C 84.000 97.434 84.900 98.900 86.000 100.000 C 87.854 101.854 89.333 102.000 106.300 102.000 C 125.651 102.000 127.000 102.305 127.000 106.679 C 127.000 107.932 123.588 121.680 119.417 137.229 C 115.247 152.778 110.748 169.550 109.420 174.500 C 104.849 191.534 105.566 192.311 125.419 191.829 C 137.454 191.536 139.175 191.274 140.988 189.460 C 142.457 187.988 146.078 176.037 153.980 146.574 C 160.251 123.192 165.656 104.932 166.622 103.865 C 168.159 102.167 170.049 102.000 187.705 102.000 C 210.642 102.000 212.009 101.603 214.346 94.269 C 217.097 85.638 220.000 74.019 220.000 71.644 C 220.000 70.360 219.177 68.565 218.171 67.655 C 216.512 66.154 210.762 66.000 156.227 66.000 L 96.112 66.000 93.473 68.270 "/></g>
+<g fill="#F7B435FF">
+<path d="M 82.365 112.169 C 79.454 113.579 78.540 115.677 75.032 129.000 C 71.441 142.634 71.453 142.453 74.000 145.000 C 75.794 146.794 77.333 147.000 88.953 147.000 C 102.139 147.000 105.740 146.247 107.719 143.079 C 109.072 140.911 115.000 119.129 115.000 116.322 C 115.000 111.825 112.301 110.995 97.921 111.068 C 90.540 111.105 83.539 111.601 82.365 112.169 "/></g>
+<g fill="#F7B435FF">
+<path d="M 46.614 68.250 C 44.748 69.931 43.343 73.430 41.058 82.083 C 35.816 101.938 36.114 102.322 56.419 101.829 C 68.473 101.536 70.173 101.276 71.996 99.451 C 73.282 98.164 75.311 92.642 77.456 84.594 C 80.987 71.343 80.995 67.979 77.495 66.636 C 76.583 66.286 69.823 66.000 62.474 66.000 C 50.023 66.000 48.941 66.154 46.614 68.250 "/></g>
+</svg>

package/templates/vite-react-typescript-web/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
+  <script type="module" src="/src/index.tsx"></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

package/templates/vite-react-typescript-web/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{name}}",
+  "version": "{{version}}",
+  "description": "{{description}}",
+  "author": "{{author}}",
+  "scripts": {
+    "dev": "tos serve",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router": "^7.9.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/node": "^22.15.3",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "@vitejs/plugin-react": "^5.0.2"
+  }
+}

package/templates/vite-react-typescript-web/src/App.tsx

@@ -0,0 +1,25 @@
+import { createBrowserRouter, RouterProvider } from 'react-router'
+import { Render } from './views/Render'
+import { Settings } from './views/Settings'
+import { Web } from './views/Web'
+
+const router = createBrowserRouter([
+  {
+    path: '/render',
+    Component: Render,
+  },
+  {
+    path: '/settings',
+    Component: Settings,
+  },
+  {
+    path: '/{{name}}',
+    Component: Web,
+  },
+])
+
+export function App() {
+  return (
+    <RouterProvider router={router} />
+  )
+}

package/templates/vite-react-typescript-web/src/hooks/store.ts

@@ -0,0 +1,8 @@
+import { createUseInstanceStoreState, createUseApplicationStoreState } from '@telemetryos/sdk/react'
+
+// Instance-scoped (Settings ↔ Render sync)
+export const useUiScaleStoreState = createUseInstanceStoreState<number>('ui-scale', 1)
+export const useSubtitleStoreState = createUseInstanceStoreState<string>('subtitle', 'Change this line in settings ⚙️ ↗️')
+
+// Application-scoped (accessible from Settings, Render, and Web)
+export const useWelcomeMessageStoreState = createUseApplicationStoreState<string>('welcome-message', 'Welcome!')

package/templates/vite-react-typescript-web/src/index.css

@@ -0,0 +1,24 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 1vmax;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+}
+
+#app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  font-family: "Rubik", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: normal;
+  font-style: normal;
+}

package/templates/vite-react-typescript-web/src/index.tsx

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+import './index.css'
+
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import { configure } from '@telemetryos/sdk'
+
+configure('{{name}}')
+
+createRoot(document.querySelector('#app')!).render(<App />)

package/templates/vite-react-typescript-web/src/views/Render.css

@@ -0,0 +1,67 @@
+.render {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 3rem;
+  color: hsl(210 40% 88%);
+  background: hsl(212 28% 10%);
+  overflow: hidden;
+}
+
+.render__logo {
+  width: 30rem;
+  max-width: 50%;
+}
+
+.render__hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.render__hero-title {
+  font-size: 5rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.render__hero-subtitle {
+  font-size: 3rem;
+  text-align: center;
+}
+
+.render__docs-information {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.render__docs-information-title {
+  font-size: 2rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.render__docs-information-text {
+  font-size: 2rem;
+  max-width: 60rem;
+  text-align: center;
+}
+
+.render__docs-information-button {
+  display: flex;
+  align-items: center;
+  background: rgb(248, 180, 53);
+  text-transform: uppercase;
+  font-size: 2rem;
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+  padding: 1rem 2rem;
+  border-radius: 1rem;
+}

package/templates/vite-react-typescript-web/src/views/Render.tsx

@@ -0,0 +1,44 @@
+import { useUiScaleToSetRem } from '@telemetryos/sdk/react'
+import wordMarkPath from '../../assets/telemetryos-wordmark.svg'
+import { useSubtitleStoreState, useUiScaleStoreState } from '../hooks/store'
+import './Render.css'
+
+export function Render() {
+  const [, uiScale] = useUiScaleStoreState()
+  useUiScaleToSetRem(uiScale)
+  const [isLoading, subtitle] = useSubtitleStoreState()
+
+  return (
+    <div className="render">
+      <img src={wordMarkPath} alt="TelemetryOS" className="render__logo" />
+      <div className="render__hero">
+        {uiScale < 1.5 && (
+          <div className="render__hero-title">Welcome to TelemetryOS SDK</div>
+        )}
+        <div className="render__hero-subtitle">{isLoading ? 'Loading...' : subtitle}</div>
+      </div>
+      <div className="render__docs-information">
+        {uiScale < 1.2 && (
+          <>
+            <div className="render__docs-information-title">
+              To get started, edit the Render.tsx and Settings.tsx files
+            </div>
+            <div className="render__docs-information-text">
+              Visit our documentation on building applications to learn more
+            </div>
+          </>
+        )}
+        {uiScale < 1.35 && (
+          <a
+            className="render__docs-information-button"
+            href="https://docs.telemetryos.com/docs/sdk-getting-started"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Documentation
+          </a>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/vite-react-typescript-web/src/views/Settings.tsx

@@ -0,0 +1,72 @@
+import {
+  SettingsContainer,
+  SettingsDivider,
+  SettingsField,
+  SettingsHeading,
+  SettingsInputFrame,
+  SettingsLabel,
+  SettingsSliderFrame,
+} from '@telemetryos/sdk/react'
+import { useSubtitleStoreState, useUiScaleStoreState, useWelcomeMessageStoreState } from '../hooks/store'
+
+export function Settings() {
+  const [isLoadingUiScale, uiScale, setUiScale] = useUiScaleStoreState(5)
+  const [isLoadingSubtitle, subtitle, setSubtitle] = useSubtitleStoreState(250)
+  const [isLoadingWelcome, welcomeMessage, setWelcomeMessage] = useWelcomeMessageStoreState(250)
+
+  return (
+    <SettingsContainer>
+
+      <SettingsHeading>Render</SettingsHeading>
+
+      <SettingsField>
+        <SettingsLabel>UI Scale</SettingsLabel>
+        <SettingsSliderFrame>
+          <input
+            type="range"
+            min={1}
+            max={3}
+            step={0.01}
+            disabled={isLoadingUiScale}
+            value={uiScale}
+            onChange={(e) => setUiScale(parseFloat(e.target.value))}
+          />
+          <span>{uiScale}x</span>
+        </SettingsSliderFrame>
+      </SettingsField>
+
+      <SettingsDivider />
+
+      <SettingsField>
+        <SettingsLabel>Subtitle Text</SettingsLabel>
+        <SettingsInputFrame>
+          <input
+            type="text"
+            placeholder='Some text for the subtitle...'
+            value={subtitle}
+            onChange={(e) => setSubtitle(e.target.value)}
+            disabled={isLoadingSubtitle}
+          />
+        </SettingsInputFrame>
+      </SettingsField>
+
+      <SettingsDivider />
+
+      <SettingsHeading>Web</SettingsHeading>
+
+      <SettingsField>
+        <SettingsLabel>Welcome Message</SettingsLabel>
+        <SettingsInputFrame>
+          <input
+            type="text"
+            placeholder='A welcome message for the web view...'
+            value={welcomeMessage}
+            onChange={(e) => setWelcomeMessage(e.target.value)}
+            disabled={isLoadingWelcome}
+          />
+        </SettingsInputFrame>
+      </SettingsField>
+
+    </SettingsContainer>
+  )
+}

package/templates/vite-react-typescript-web/src/views/Web.css

@@ -0,0 +1,105 @@
+/* Web Mount Point View */
+
+html:has(.web) {
+  font-size: 16px;
+}
+
+.web {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #0f172a;
+  color: #cbd5e1;
+  font-family: 'Rubik', system-ui, sans-serif;
+}
+
+/* Loading */
+.web--loading {
+  align-items: center;
+  justify-content: center;
+}
+
+.web__loading-text {
+  font-size: 1.5rem;
+  color: #64748b;
+  animation: web-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes web-pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+/* Container */
+.web__container {
+  width: 100%;
+  max-width: 640px;
+  padding: 3rem 2rem;
+  text-align: center;
+}
+
+.web__title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin: 0 0 1.5rem;
+  color: #f8fafc;
+}
+
+.web__description {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #94a3b8;
+  margin: 0 0 1rem;
+}
+
+/* Info grid */
+.web__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 2rem 0;
+}
+
+.web__info-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.5rem;
+}
+
+.web__info-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.web__info-value {
+  font-size: 0.875rem;
+  color: #f8fafc;
+}
+
+/* Docs link */
+.web__docs-link {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 0.75rem 2rem;
+  background: rgb(248, 180, 53);
+  color: black;
+  font-size: 1rem;
+  font-weight: 700;
+  text-decoration: none;
+  text-transform: uppercase;
+  border-radius: 0.5rem;
+  transition: background 0.15s;
+}
+
+.web__docs-link:hover {
+  background: rgb(234, 166, 39);
+}

package/templates/vite-react-typescript-web/src/views/Web.tsx

@@ -0,0 +1,52 @@
+import { useWelcomeMessageStoreState } from '../hooks/store'
+import './Web.css'
+
+export function Web() {
+  const [isLoading, welcomeMessage] = useWelcomeMessageStoreState()
+
+  if (isLoading) {
+    return (
+      <div className="web web--loading">
+        <div className="web__loading-text">Loading...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="web">
+      <div className="web__container">
+        <h1 className="web__title">{welcomeMessage}</h1>
+        <p className="web__description">
+          This is the <strong>Web mount point</strong> — a browser-accessible interface
+          that runs outside the device display and admin settings.
+        </p>
+        <p className="web__description">
+          The welcome message above is stored in the application-scoped store.
+          Change it in Settings to see it update here.
+        </p>
+        <div className="web__info">
+          <div className="web__info-item">
+            <span className="web__info-label">Store Access</span>
+            <span className="web__info-value">Application &amp; Dynamic Namespace</span>
+          </div>
+          <div className="web__info-item">
+            <span className="web__info-label">Runs In</span>
+            <span className="web__info-value">Any Browser</span>
+          </div>
+          <div className="web__info-item">
+            <span className="web__info-label">Use Cases</span>
+            <span className="web__info-value">Staff Desks, Public Forms, Dashboards</span>
+          </div>
+        </div>
+        <a
+          className="web__docs-link"
+          href="https://docs.telemetryos.com/docs/sdk-getting-started"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Documentation
+        </a>
+      </div>
+    </div>
+  )
+}

package/templates/vite-react-typescript-web/telemetry.config.json

@@ -0,0 +1,16 @@
+{
+  "name": "{{name}}",
+  "description": "{{description}}",
+  "logoPath": "assets/tos-app.svg",
+  "version": "{{version}}",
+  "useSpaRouting": true,
+  "mountPoints": {
+    "render": "/render",
+    "settings": "/settings",
+    "web": "/{{name}}"
+  },
+  "devServer": {
+    "runCommand": "vite --port 3000",
+    "url": "http://localhost:3000"
+  }
+}

package/templates/vite-react-typescript-web/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "declaration": true,
+    "strict": true,
+    "lib": ["DOM", "ESNext"],
+    "target": "ES2019",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["./src"]
+}

package/templates/vite-react-typescript-web/vite.config.ts

@@ -0,0 +1,18 @@
+import typescript from '@rollup/plugin-typescript'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    typescript(),
+    react(),
+    {
+      name: 'suppress-urls',
+      configureServer(server) {
+        return () => {
+          server.printUrls = () => { }
+        }
+      },
+    },
+  ],
+})