@telemetryos/cli 1.12.0 → 1.13.1

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 = () => { }
+        }
+      },
+    },
+  ],
+})