create-vidra-app 0.1.0

package/templates/react-vite/ui/src/App.tsx

@@ -0,0 +1,240 @@
+import { useEffect, useRef, useState } from "react";
+import { app, appWindow, clipboard, notifications, vidra } from "@vidra-dev/sdk";
+import type { WindowInfo, WindowSupport } from "@vidra-dev/sdk";
+
+const describeWindow = (windowInfo: WindowInfo): string => {
+  const title = windowInfo.title || "(untitled)";
+  return `${title} • ${Math.round(windowInfo.width)}x${Math.round(windowInfo.height)} • ${windowInfo.state}`;
+};
+
+const formatError = (error: unknown): string => {
+  return error instanceof Error ? error.message : String(error);
+};
+
+const App = () => {
+  const [info, setInfo] = useState("Press a button to call a native module.");
+  const [windowSummary, setWindowSummary] = useState(
+    "Window controls are ready. Click a button to inspect or update the native window.",
+  );
+  const [windowSupport, setWindowSupport] = useState<WindowSupport | null>(null);
+  const [caps, setCaps] = useState<Record<string, string[]> | null>(null);
+  const [count, setCount] = useState(0);
+  const countRef = useRef(0);
+
+  useEffect(() => {
+    const unsubscribeCounter = vidra.handle<void, number>("counter.increment", () => {
+      countRef.current += 1;
+      setCount(countRef.current);
+      return countRef.current;
+    });
+
+    const unsubscribeResized = appWindow.onResized((windowInfo) => {
+      setWindowSummary(`Window resized: ${describeWindow(windowInfo)}`);
+    });
+
+    const unsubscribeStateChanged = appWindow.onStateChanged((windowInfo) => {
+      setWindowSummary(`Window state changed: ${describeWindow(windowInfo)}`);
+    });
+
+    void appWindow
+      .getSupport()
+      .then((result: WindowSupport) => {
+        setWindowSupport(result);
+      })
+      .catch(() => {
+        setWindowSupport(null);
+      });
+
+    return () => {
+      unsubscribeCounter();
+      unsubscribeResized();
+      unsubscribeStateChanged();
+    };
+  }, []);
+
+  const handleGetAppInfo = async () => {
+    try {
+      const result = await app.getInfo();
+      setInfo(`${result.appName} v${result.version} on ${result.platform}`);
+    } catch (error: unknown) {
+      setInfo(`Error: ${formatError(error)}`);
+    }
+  };
+
+  const handleReadClipboard = async () => {
+    try {
+      const result = await clipboard.getText();
+      setInfo(`Clipboard: ${result.text || "(empty)"}`);
+    } catch (error: unknown) {
+      setInfo(`Error: ${formatError(error)}`);
+    }
+  };
+
+  const handleCapabilities = async () => {
+    try {
+      const result = await vidra.capabilities();
+      setCaps(result);
+    } catch (error: unknown) {
+      setInfo(`Error: ${formatError(error)}`);
+    }
+  };
+
+  const handleNotification = async () => {
+    try {
+      const permission = await notifications.requestPermission();
+      if (!permission.granted) {
+        setInfo(
+          "Notifications are disabled. Enable them in your system settings and try again.",
+        );
+        return;
+      }
+
+      const result = await notifications.show({
+        title: "{{appTitle}}",
+        body: `Counter is ${countRef.current}. Sent from the native notifications module.`,
+      });
+
+      setInfo(
+        result.scheduled
+          ? "Notification sent."
+          : "Notification could not be shown. Check your notification settings.",
+      );
+    } catch (error: unknown) {
+      setInfo(`Error: ${formatError(error)}`);
+    }
+  };
+
+  const handleGetWindowInfo = async () => {
+    try {
+      const result = await appWindow.getCurrent();
+      setWindowSummary(`Current window: ${describeWindow(result)}`);
+    } catch (error: unknown) {
+      setWindowSummary(`Window error: ${formatError(error)}`);
+    }
+  };
+
+  const handleRenameWindow = async () => {
+    try {
+      const result = await appWindow.setTitle({
+        title: `{{appTitle}} (${countRef.current})`,
+      });
+      setWindowSummary(`Window renamed: ${describeWindow(result)}`);
+    } catch (error: unknown) {
+      setWindowSummary(`Window error: ${formatError(error)}`);
+    }
+  };
+
+  const handleResizeWindow = async () => {
+    try {
+      const result = await appWindow.configure({
+        width: 1100,
+        height: 760,
+      });
+      setWindowSummary(`Window resized: ${describeWindow(result)}`);
+    } catch (error: unknown) {
+      setWindowSummary(`Window error: ${formatError(error)}`);
+    }
+  };
+
+  const handleMaximizeWindow = async () => {
+    try {
+      const result = await appWindow.maximize();
+      setWindowSummary(`Window maximized: ${describeWindow(result)}`);
+    } catch (error: unknown) {
+      setWindowSummary(`Window error: ${formatError(error)}`);
+    }
+  };
+
+  const handleCenterWindow = async () => {
+    try {
+      const result = await appWindow.center();
+      setWindowSummary(`Window centered: ${describeWindow(result)}`);
+    } catch (error: unknown) {
+      setWindowSummary(`Window error: ${formatError(error)}`);
+    }
+  };
+
+  const handleMinimizeWindow = async () => {
+    try {
+      const result = await appWindow.minimize();
+      setWindowSummary(`Window minimized: ${describeWindow(result)}`);
+    } catch (error: unknown) {
+      setWindowSummary(`Window error: ${formatError(error)}`);
+    }
+  };
+
+  const handleRestoreWindow = async () => {
+    try {
+      const result = await appWindow.restore();
+      setWindowSummary(`Window restored: ${describeWindow(result)}`);
+    } catch (error: unknown) {
+      setWindowSummary(`Window error: ${formatError(error)}`);
+    }
+  };
+
+  const showsAdvancedWindowActions =
+    !!windowSupport &&
+    (windowSupport.center ||
+      windowSupport.maximize ||
+      windowSupport.minimize ||
+      windowSupport.restore ||
+      windowSupport.setFullscreen);
+
+  return (
+    <div className="container">
+      <h1>{{appTitle}}</h1>
+      <p className="subtitle">React + .NET MAUI</p>
+
+      <div className="card">
+        <p className="counter">
+          Counter: <strong>{count}</strong>
+          <span className="counter-hint">Incremented by .NET every 10s</span>
+        </p>
+      </div>
+
+      <div className="card">
+        <p className="result">{info}</p>
+
+        <div className="actions">
+          <button onClick={handleGetAppInfo}>Get App Info</button>
+          <button onClick={handleReadClipboard}>Read Clipboard</button>
+          <button onClick={handleNotification}>Send Notification</button>
+          <button onClick={handleCapabilities}>List Capabilities</button>
+        </div>
+
+        {caps && (
+          <pre className="capabilities">{JSON.stringify(caps, null, 2)}</pre>
+        )}
+      </div>
+
+      <div className="card">
+        <p className="window-summary">{windowSummary}</p>
+
+        <div className="actions">
+          <button onClick={handleGetWindowInfo}>Get Window Info</button>
+          <button onClick={handleRenameWindow}>Rename Window</button>
+          <button onClick={handleResizeWindow}>Resize Window</button>
+          {windowSupport?.center && <button onClick={handleCenterWindow}>Center Window</button>}
+          {windowSupport?.maximize && (
+            <>
+              <button onClick={handleMaximizeWindow}>Maximize Window</button>
+              <button onClick={handleRestoreWindow}>Restore Window</button>
+            </>
+          )}
+          {windowSupport?.minimize && (
+            <button onClick={handleMinimizeWindow}>Minimize Window</button>
+          )}
+        </div>
+
+        {!showsAdvancedWindowActions && windowSupport && (
+          <p className="result">
+            This runtime currently supports title and size updates only. Unsupported window actions
+            are hidden automatically based on native support metadata.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default App;

package/templates/react-vite/ui/src/index.css

@@ -0,0 +1,109 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #0f0f12;
+  --surface: #1a1a22;
+  --border: #2a2a35;
+  --text: #e4e4e8;
+  --text-muted: #8888a0;
+  --accent: #6366f1;
+  --accent-hover: #818cf8;
+  --radius: 12px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  max-width: 760px;
+  width: 100%;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.subtitle {
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+  margin-bottom: 2rem;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  margin-top: 1rem;
+}
+
+.result {
+  min-height: 2rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  word-break: break-word;
+}
+
+.window-summary {
+  min-height: 2rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  word-break: break-word;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+button {
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.6rem 1.2rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+button:hover {
+  background: var(--accent-hover);
+}
+
+button:active {
+  transform: scale(0.97);
+}
+
+.capabilities {
+  margin-top: 1rem;
+  text-align: left;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  background: var(--bg);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-x: auto;
+}

package/templates/react-vite/ui/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/react-vite/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/react-vite/ui/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/react-vite/ui/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig, type Plugin } from "vite";
+import react from "@vitejs/plugin-react";
+
+const nativeAppCompat = (): Plugin => {
+  return {
+    name: "native-app-compat",
+    apply: "build",
+    transformIndexHtml: (html) => {
+      return html
+        .replace(/ crossorigin/g, "")
+        .replace(/<script (?:type="module" )?/g, "<script defer ");
+    },
+  };
+};
+
+export default defineConfig({
+  plugins: [react(), nativeAppCompat()],
+  base: "./",
+  server: {
+    port: 5173,
+    strictPort: true,
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        format: "iife",
+        inlineDynamicImports: true,
+      },
+    },
+  },
+});