@bardioc/create-bardioc-app 0.4.0

package/templates/angular/src/styles.css

@@ -0,0 +1,258 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+app-root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+:root {
+  --background: oklch(17.88% 0.0075 229.38);
+  --foreground: oklch(98.69% 0.0093 99.98);
+  --muted-foreground: oklch(86.03% 0.0056 95.11);
+  --border: oklch(1 0 0 / 10%);
+  --primary: oklch(97.02% 0 0);
+  --primary-foreground: oklch(36.94% 0.0053 236.64);
+  --destructive: oklch(68.04% 0.1386 21.38);
+  --ring: oklch(79.43% 0.0084 98.91);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+code {
+  font-family: inherit;
+}
+
+.bg-background {
+  background-color: var(--background);
+}
+
+.text-foreground {
+  color: var(--foreground);
+}
+
+.text-muted-foreground {
+  color: var(--muted-foreground);
+}
+
+.border-border {
+  border-color: var(--border);
+}
+
+.bg-primary {
+  background-color: var(--primary);
+}
+
+.text-primary-foreground {
+  color: var(--primary-foreground);
+}
+
+.text-destructive {
+  color: var(--destructive);
+}
+
+.focus\:ring-ring:focus {
+  --tw-ring-color: var(--ring);
+}
+
+.hover\:bg-primary\/90:hover {
+  background-color: oklch(from var(--primary) calc(l * 0.9) c h);
+}
+
+.hover\:text-foreground:hover {
+  color: var(--foreground);
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.flex {
+  display: flex;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-0 {
+  gap: 0;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+  border-style: solid;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-\[11px\] {
+  font-size: 11px;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.bg-muted\/20 {
+  background-color: oklch(from var(--muted-foreground) l c h / 0.2);
+}
+
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}

package/templates/angular/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+interface ImportMetaEnv {
+	readonly DEV?: boolean;
+	readonly VITE_APP_ID?: string;
+	readonly VITE_APP_NAME?: string;
+	readonly VITE_ENABLE_DEV_AUTH?: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

package/templates/angular/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/templates/manifest.json

@@ -0,0 +1,13 @@
+{
+  "schemaVersion": 1,
+  "defaultTemplate": "vite",
+  "templates": [
+    "angular",
+    "nextjs",
+    "preact",
+    "solid",
+    "svelte",
+    "vite",
+    "vue"
+  ]
+}

package/templates/nextjs/.env.example

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_APP_NAME={{APP_NAME}}
+NEXT_PUBLIC_APP_ID=your-app-client-id-here
+NEXT_PUBLIC_ENABLE_DEV_AUTH=false
+
+# Required host URL for standalone dev auth. Run `bardioc login` once, then
+# `pnpm dev` will refresh DEV_SESSION_KEY automatically before Next starts.
+DEV_AUTH_HOST_URL=
+DEV_SESSION_KEY=

package/templates/nextjs/_gitignore

@@ -0,0 +1,7 @@
+.env
+.env.local
+.next
+out
+node_modules
+*.zip
+.linked/

package/templates/nextjs/app/globals.css

@@ -0,0 +1,75 @@
+@import 'tailwindcss';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+:root {
+  --background: oklch(17.88% 0.0075 229.38);
+  --foreground: oklch(98.69% 0.0093 99.98);
+  --muted-foreground: oklch(86.03% 0.0056 95.11);
+  --border: oklch(1 0 0 / 10%);
+  --primary: oklch(97.02% 0 0);
+  --primary-foreground: oklch(36.94% 0.0053 236.64);
+  --destructive: oklch(68.04% 0.1386 21.38);
+  --ring: oklch(79.43% 0.0084 98.91);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+code {
+  font-family: inherit;
+}
+
+.bg-background {
+  background-color: var(--background);
+}
+
+.text-foreground {
+  color: var(--foreground);
+}
+
+.text-muted-foreground {
+  color: var(--muted-foreground);
+}
+
+.border-border {
+  border-color: var(--border);
+}
+
+.bg-primary {
+  background-color: var(--primary);
+}
+
+.text-primary-foreground {
+  color: var(--primary-foreground);
+}
+
+.text-destructive {
+  color: var(--destructive);
+}
+
+.focus\:ring-ring:focus {
+  --tw-ring-color: var(--ring);
+}
+
+.hover\:bg-primary\/90:hover {
+  background-color: oklch(from var(--primary) calc(l * 0.9) c h);
+}
+
+.hover\:text-foreground:hover {
+  color: var(--foreground);
+}

package/templates/nextjs/app/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: '{{DISPLAY_NAME}}',
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" className="dark" style={{ height: '100%', margin: 0 }}>
+      <head>
+        <link rel="stylesheet" href="/fonts/bardioc-fonts.css" />
+      </head>
+      <body style={{ height: '100%', margin: 0 }}>{children}</body>
+    </html>
+  );
+}

package/templates/nextjs/app/page.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { ensureDevAuthSession, installDevBridge } from '@bardioc/app-sdk/dev';
+import { AppSdkProvider, useNotify, useSdk } from '@bardioc/app-sdk/react';
+import { useEffect, useState, type ReactNode } from 'react';
+
+type ResultState =
+  | { status: 'idle' }
+  | { status: 'loading'; request: string }
+  | { status: 'success'; request: string; data: unknown }
+  | { status: 'error'; request: string; message: string };
+
+type InjectedDevAuthConfig = {
+  hostUrl?: string;
+  sessionKey?: string;
+};
+
+const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME?.trim();
+const APP_ID = process.env.NEXT_PUBLIC_APP_ID?.trim();
+const standaloneDevAuthEnabled =
+  process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_ENABLE_DEV_AUTH === 'true';
+const DEV_AUTH_HOST_URL = process.env.NEXT_PUBLIC_DEV_AUTH_HOST_URL?.trim();
+const DEV_SESSION_KEY = process.env.NEXT_PUBLIC_DEV_SESSION_KEY?.trim();
+
+function installInjectedDevAuthConfig() {
+  if (!DEV_AUTH_HOST_URL || !DEV_SESSION_KEY) {
+    return;
+  }
+
+  (
+    window as Window &
+      typeof globalThis & {
+        __BARDIOC_DEV_AUTH__?: InjectedDevAuthConfig;
+      }
+  ).__BARDIOC_DEV_AUTH__ = {
+    hostUrl: DEV_AUTH_HOST_URL,
+    sessionKey: DEV_SESSION_KEY,
+  };
+}
+
+function SdkDemo() {
+  const bridge = useSdk();
+  const notify = useNotify();
+  const [result, setResult] = useState<ResultState>({ status: 'idle' });
+  const [running, setRunning] = useState(false);
+
+  async function runGetProfile() {
+    if (running) return;
+    setRunning(true);
+
+    const request = 'transport.os.profile.get()';
+    setResult({ status: 'loading', request });
+
+    const startTime = Date.now();
+    notify('Getting user profile', 'info');
+
+    try {
+      const data = await bridge.transport.os.profile.get();
+
+      const duration = Date.now() - startTime;
+      notify(`Profile loaded (${duration}ms)`, 'success');
+      setResult({ status: 'success', request, data });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      notify(`Failed: ${message}`, 'error');
+      setResult({ status: 'error', request, message });
+    }
+
+    setRunning(false);
+  }
+
+  function handleNotify() {
+    notify('Hello from {{DISPLAY_NAME}}', 'info');
+    setResult({
+      status: 'success',
+      request: 'SDK_NOTIFY',
+      data: { ok: true, message: 'Notification sent to OS' },
+    });
+  }
+
+  return (
+    <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-3 p-4">
+      <div className="flex flex-col gap-1">
+        <h1 className="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
+        <p className="text-muted-foreground m-0 text-xs leading-5">
+          Minimal hosted-app demo for API transport and SDK APIs.
+        </p>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <button
+          className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
+          onClick={() => void runGetProfile()}
+          disabled={running}
+        >
+          Get Profile
+        </button>
+        <button
+          className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
+          onClick={handleNotify}
+          disabled={running}
+        >
+          Send Notification OS
+        </button>
+        <button
+          className="border-border text-muted-foreground hover:text-foreground rounded border px-3 py-1 text-xs"
+          onClick={() => setResult({ status: 'idle' })}
+          disabled={running}
+        >
+          Clear
+        </button>
+      </div>
+
+      <div className="border-border bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded border">
+        {result.status === 'idle' && (
+          <div className="text-muted-foreground flex h-full items-center justify-center p-3 text-center text-xs leading-5">
+            Run a query to see results. If the host session is missing, the transport route will
+            return 401.
+          </div>
+        )}
+        {result.status === 'loading' && (
+          <div className="flex h-full flex-col items-center justify-center gap-2 p-3">
+            <div className="text-muted-foreground font-mono text-xs">{result.request}</div>
+            <div className="text-muted-foreground text-xs">Loading…</div>
+          </div>
+        )}
+        {result.status === 'error' && (
+          <div className="flex h-full flex-col gap-2 p-3 text-xs">
+            <div className="text-muted-foreground border-border border-b pb-2 font-mono text-xs">
+              {result.request}
+            </div>
+            <div className="text-destructive whitespace-pre-wrap break-all">{result.message}</div>
+          </div>
+        )}
+        {result.status === 'success' && (
+          <div className="flex h-full flex-col gap-0 overflow-hidden">
+            <div className="border-border text-muted-foreground shrink-0 border-b px-3 py-1 font-mono text-xs">
+              {result.request}
+            </div>
+            <pre className="text-foreground flex-1 overflow-auto p-3 text-[11px] leading-5">
+              {JSON.stringify(result.data, null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PreviewShell() {
+  return (
+    <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-4 p-4">
+      <h1 className="m-0 text-2xl font-semibold">Hello Bardioc App</h1>
+      <p className="text-muted-foreground m-0 max-w-2xl text-xs leading-5">
+        Open this app inside Bardioc OS to use transport requests and send host notifications.
+      </p>
+      <div className="border-border bg-muted/20 rounded-xl border p-3 text-xs leading-5">
+        Outside the host iframe this page is only a local preview shell.
+      </div>
+    </div>
+  );
+}
+
+function DevAuthProvider({ children, enabled }: { children: ReactNode; enabled: boolean }) {
+  const requiresStandaloneDevAuth = enabled && standaloneDevAuthEnabled && !!APP_ID && !!APP_NAME;
+  const [ready, setReady] = useState(!requiresStandaloneDevAuth);
+
+  useEffect(() => {
+    if (!requiresStandaloneDevAuth) {
+      return;
+    }
+
+    installInjectedDevAuthConfig();
+
+    ensureDevAuthSession({ appId: APP_ID, appName: APP_NAME })
+      .then(() => {
+        installDevBridge({ appId: APP_ID, appName: APP_NAME, debug: false });
+        setReady(true);
+      })
+      .catch(error => {
+        console.error('[template-smoke-nextjs] failed to initialize dev bridge', error);
+        setReady(true);
+      });
+  }, [requiresStandaloneDevAuth]);
+
+  if (!ready) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="text-muted-foreground text-xs">Initializing dev bridge...</div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export default function Page() {
+  const useSdkProvider =
+    standaloneDevAuthEnabled || (typeof window !== 'undefined' && window.parent !== window);
+
+  if (!APP_NAME) {
+    throw new Error('Missing NEXT_PUBLIC_APP_NAME for runtime');
+  }
+
+  if (useSdkProvider && !APP_ID) {
+    throw new Error('Missing NEXT_PUBLIC_APP_ID for SDK runtime');
+  }
+
+  return (
+    <div className="bg-background text-foreground min-h-screen">
+      <DevAuthProvider enabled={useSdkProvider}>
+        {useSdkProvider ? (
+          <AppSdkProvider appId={APP_ID!}>
+            <SdkDemo />
+          </AppSdkProvider>
+        ) : (
+          <PreviewShell />
+        )}
+      </DevAuthProvider>
+    </div>
+  );
+}