@bardioc/create-bardioc-app 0.5.3 → 0.5.5

package/templates/angular/src/styles.css

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

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

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

package/templates/manifest.json

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

package/templates/nextjs/.env.example

@@ -1,8 +1,7 @@
 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
-# `npm run dev` will refresh DEV_SESSION_KEY automatically before Next starts.
-DEV_AUTH_HOST_URL=
-DEV_SESSION_KEY=
+# Shared secret used for dev auth when proxying API requests through /rest.
+DEV_SECRET=
+
+# Base URL of the Bardioc API backend to proxy /rest requests to.
+API_BASE_URL=

package/templates/nextjs/app/globals.css

@@ -1,75 +1,78 @@
 @import 'tailwindcss';
 
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 html,
 body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
+    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);
+    --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;
+    background: var(--background);
+    color: var(--foreground);
+    font-family:
+        system-ui,
+        -apple-system,
+        sans-serif;
 }
 
 code {
-  font-family: inherit;
+    font-family: inherit;
 }
 
 .bg-background {
-  background-color: var(--background);
+    background-color: var(--background);
 }
 
 .text-foreground {
-  color: var(--foreground);
+    color: var(--foreground);
 }
 
 .text-muted-foreground {
-  color: var(--muted-foreground);
+    color: var(--muted-foreground);
 }
 
 .border-border {
-  border-color: var(--border);
+    border-color: var(--border);
 }
 
 .bg-primary {
-  background-color: var(--primary);
+    background-color: var(--primary);
 }
 
 .text-primary-foreground {
-  color: var(--primary-foreground);
+    color: var(--primary-foreground);
 }
 
 .text-destructive {
-  color: var(--destructive);
+    color: var(--destructive);
 }
 
 .focus\:ring-ring:focus {
-  --tw-ring-color: var(--ring);
+    --tw-ring-color: var(--ring);
 }
 
 .hover\:bg-primary\/90:hover {
-  background-color: oklch(from var(--primary) calc(l * 0.9) c h);
+    background-color: oklch(from var(--primary) calc(l * 0.9) c h);
 }
 
 .hover\:text-foreground:hover {
-  color: var(--foreground);
+    color: var(--foreground);
 }

package/templates/nextjs/app/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { ensureDevAuthSession, installDevBridge } from '@bardioc/app-sdk/dev';
+import { installDevBridge, isDevStandalone, isInsideIframe } from '@bardioc/app-sdk/dev';
 import { AppSdkProvider, useNotify, useSdk } from '@bardioc/app-sdk/react';
-import { useEffect, useState, type ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 
 type ResultState =
   | { status: 'idle' }
@@ -10,33 +10,7 @@ type ResultState =
   | { 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();
@@ -89,14 +63,14 @@ function SdkDemo() {
 
       <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"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
           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"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
           onClick={handleNotify}
           disabled={running}
         >
@@ -161,62 +135,28 @@ function PreviewShell() {
   );
 }
 
-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);
+  const useSdkProvider = isInsideIframe() || isDevStandalone();
 
   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');
-  }
+  useEffect(() => {
+    if (isDevStandalone()) {
+      installDevBridge();
+    }
+  }, []);
 
   return (
     <div className="bg-background text-foreground min-h-screen">
-      <DevAuthProvider enabled={useSdkProvider}>
-        {useSdkProvider ? (
-          <AppSdkProvider appId={APP_ID!}>
-            <SdkDemo />
-          </AppSdkProvider>
-        ) : (
-          <PreviewShell />
-        )}
-      </DevAuthProvider>
+      {useSdkProvider ? (
+        <AppSdkProvider appId={APP_NAME}>
+          <SdkDemo />
+        </AppSdkProvider>
+      ) : (
+        <PreviewShell />
+      )}
     </div>
   );
 }

package/templates/nextjs/global.d.ts

@@ -1 +1 @@
-declare module '*.css';
+declare module '*.css';

package/templates/nextjs/next.config.ts

@@ -1,21 +1,32 @@
 import type { NextConfig } from 'next';
 
+const apiBaseUrl = process.env.API_BASE_URL?.replace(/\/$/, '');
+const devSecret = process.env.DEV_SECRET;
+
 const nextConfig: NextConfig = {
-	output: 'export',
-	env: {
-		NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME ?? process.env.VITE_APP_NAME,
-		NEXT_PUBLIC_APP_ID: process.env.NEXT_PUBLIC_APP_ID ?? process.env.VITE_APP_ID,
-		NEXT_PUBLIC_ENABLE_DEV_AUTH:
-			process.env.NEXT_PUBLIC_ENABLE_DEV_AUTH ?? process.env.VITE_ENABLE_DEV_AUTH,
-		NEXT_PUBLIC_DEV_AUTH_HOST_URL:
-			process.env.NEXT_PUBLIC_DEV_AUTH_HOST_URL ?? process.env.DEV_AUTH_HOST_URL,
-		NEXT_PUBLIC_DEV_SESSION_KEY:
-			process.env.NEXT_PUBLIC_DEV_SESSION_KEY ?? process.env.DEV_SESSION_KEY,
-	},
-	images: {
-		unoptimized: true,
-	},
-	trailingSlash: true,
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+  trailingSlash: true,
+  async headers() {
+    if (!devSecret) return [];
+    return [
+      {
+        source: '/rest/:path*',
+        headers: [{ key: 'X-Dev-Secret', value: devSecret }],
+      },
+    ];
+  },
+  async rewrites() {
+    if (!apiBaseUrl) return [];
+    return [
+      {
+        source: '/rest/:path*',
+        destination: `${apiBaseUrl}/:path*`,
+      },
+    ];
+  },
 };
 
-export default nextConfig;
+export default nextConfig;