@fluid-app/fluid-cli-portal 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-app/fluid-cli-portal",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Fluid CLI plugin for building and deploying portal applications",
   "files": [
     "dist",
@@ -28,7 +28,7 @@
     "ora": "^8.0.0",
     "prompts": "^2.4.2",
     "tsx": "^4.21.0",
-    "@fluid-app/fluid-cli": "0.1.2"
+    "@fluid-app/fluid-cli": "0.1.1"
   },
   "devDependencies": {
     "@swc/core": "^1.15.18",

package/templates/base/.oxlintrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "react"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off"
+  },
+  "ignorePatterns": ["dist/**"]
+}

package/templates/base/src/index.css

@@ -1,159 +1,4 @@
 @import "tailwindcss";
 @import "@fluid-app/portal-sdk/globals.css";
-@source "../node_modules/@fluid-app/portal-sdk/dist/**/*.mjs";
 
-/*
- * Fallback design tokens (OKLCH format).
- *
- * The theme engine injects higher-specificity CSS via [data-theme="..."]
- * which overrides these at runtime for both light and dark modes.
- *
- * Canonical variables use the --color- prefix to match the css-generator
- * output and the widgets tailwind.config.ts color palette registration.
- * Short-name aliases (--background, --foreground, etc.) are included for
- * backward compatibility with shadcn/Radix components.
- */
-
-/*
- * Register CSS variables as Tailwind theme values.
- * `inline` means Tailwind won't emit its own --color-* declarations —
- * we define them ourselves in :root below (and the theme engine overrides
- * them at runtime via [data-theme="..."]).
- */
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --radius: var(--radius);
-}
-
-:root {
-  --color-background: oklch(1 0 0);
-  --color-foreground: oklch(0.145 0 0);
-  --color-primary: oklch(0.205 0 0);
-  --color-primary-foreground: oklch(0.985 0 0);
-  --color-secondary: oklch(0.97 0 0);
-  --color-secondary-foreground: oklch(0.205 0 0);
-  --color-muted: oklch(0.97 0 0);
-  --color-muted-foreground: oklch(0.556 0 0);
-  --color-accent: oklch(0.97 0 0);
-  --color-accent-foreground: oklch(0.205 0 0);
-  --color-destructive: oklch(0.577 0.245 27.325);
-  --color-destructive-foreground: oklch(0.985 0 0);
-  --color-border: oklch(0.922 0 0);
-
-  /* Short-name aliases (match css-generator globalCSSOverride) */
-  --background: var(--color-background);
-  --foreground: var(--color-foreground);
-  --primary: var(--color-primary);
-  --primary-foreground: var(--color-primary-foreground);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-secondary-foreground);
-  --muted: var(--color-muted);
-  --muted-foreground: var(--color-muted-foreground);
-  --accent: var(--color-accent);
-  --accent-foreground: var(--color-accent-foreground);
-  --destructive: var(--color-destructive);
-  --destructive-foreground: var(--color-destructive-foreground);
-  --border: var(--color-border);
-  --input: var(--color-border);
-  --ring: var(--color-primary);
-  --radius: 0.625rem;
-
-  /* Sidebar aliases */
-  --sidebar: var(--color-muted);
-  --sidebar-foreground: var(--color-muted-foreground);
-  --sidebar-primary: var(--color-primary);
-  --sidebar-primary-foreground: var(--color-primary-foreground);
-  --sidebar-accent: var(--color-accent);
-  --sidebar-accent-foreground: var(--color-accent-foreground);
-  --sidebar-border: var(--color-border);
-  --sidebar-ring: var(--color-primary);
-}
-
-/*
- * Dark-mode fallback tokens.
- * Applied when the user toggles dark mode but no API theme is loaded.
- * The theme engine will override these with richer palette-derived values
- * once a theme is fetched from the API.
- */
-[data-theme-mode="dark"] {
-  --color-background: oklch(0.145 0 0);
-  --color-foreground: oklch(0.985 0 0);
-  --color-primary: oklch(0.985 0 0);
-  --color-primary-foreground: oklch(0.205 0 0);
-  --color-secondary: oklch(0.215 0 0);
-  --color-secondary-foreground: oklch(0.985 0 0);
-  --color-muted: oklch(0.215 0 0);
-  --color-muted-foreground: oklch(0.708 0 0);
-  --color-accent: oklch(0.215 0 0);
-  --color-accent-foreground: oklch(0.985 0 0);
-  --color-destructive: oklch(0.577 0.245 27.325);
-  --color-destructive-foreground: oklch(0.985 0 0);
-  --color-border: oklch(0.3 0 0);
-
-  --background: var(--color-background);
-  --foreground: var(--color-foreground);
-  --primary: var(--color-primary);
-  --primary-foreground: var(--color-primary-foreground);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-secondary-foreground);
-  --muted: var(--color-muted);
-  --muted-foreground: var(--color-muted-foreground);
-  --accent: var(--color-accent);
-  --accent-foreground: var(--color-accent-foreground);
-  --destructive: var(--color-destructive);
-  --destructive-foreground: var(--color-destructive-foreground);
-  --border: var(--color-border);
-  --input: var(--color-border);
-  --ring: var(--color-primary);
-
-  --sidebar: var(--color-muted);
-  --sidebar-foreground: var(--color-muted-foreground);
-  --sidebar-primary: var(--color-primary);
-  --sidebar-primary-foreground: var(--color-primary-foreground);
-  --sidebar-accent: var(--color-accent);
-  --sidebar-accent-foreground: var(--color-accent-foreground);
-  --sidebar-border: var(--color-border);
-  --sidebar-ring: var(--color-primary);
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Hide scrollbars while preserving scroll functionality */
-@layer utilities {
-  .scrollbar-none {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  .scrollbar-none::-webkit-scrollbar {
-    display: none;
-  }
-}
+/* Add your custom styles below */

package/templates/base/src/main.tsx

@@ -1,42 +1,5 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import {
-  FluidAuthProvider,
-  FluidProvider,
-  RequireAuth,
-} from "@fluid-app/portal-sdk";
-import { authConfig, fluidConfig } from "./fluid.config";
-import App from "./App";
+import { createPortal } from "@fluid-app/portal-sdk";
+import { customPages } from "./portal.config";
 import "./index.css";
 
-// Find the root element
-const rootElement = document.getElementById("root");
-if (!rootElement) {
-  throw new Error("Root element not found");
-}
-
-/**
- * App Wrapper with Authentication
- *
- * The provider hierarchy is:
- * 1. FluidAuthProvider - Handles token extraction, validation, storage
- * 2. FluidProvider - Fluid SDK context (API client, theme, QueryClientProvider)
- * 3. RequireAuth - Only renders children when authenticated
- *
- * Authentication flow:
- * 1. Parent Fluid app opens this portal with ?fluidUserToken=... in URL
- * 2. FluidAuthProvider extracts token, validates it, stores in cookie/localStorage
- * 3. Token is removed from URL (security)
- * 4. RequireAuth shows loading while checking, then renders app or error
- */
-createRoot(rootElement).render(
-  <StrictMode>
-    <FluidAuthProvider config={authConfig}>
-      <FluidProvider config={fluidConfig}>
-        <RequireAuth>
-          <App />
-        </RequireAuth>
-      </FluidProvider>
-    </FluidAuthProvider>
-  </StrictMode>,
-);
+createPortal({ customPages });

package/templates/base/src/navigation.config.ts

@@ -18,4 +18,9 @@ export const navigation = [
     slug: "dashboard",
     icon: "home",
   },
+  {
+    label: "My Site",
+    slug: "my-site",
+    icon: "globe",
+  },
 ];

package/templates/base/src/portal.config.ts

@@ -1,22 +1,18 @@
 /**
  * Portal Configuration
  *
- * Register custom page components here. These are rendered by AppShell
- * when a navigation item's slug matches the key in this map.
+ * Register custom page components and widget plugins here.
  *
- * Navigation structure is defined in navigation.config.ts and synced to
- * the Fluid OS API on `fluid deploy`.
+ * - customPages: rendered by AppShell when a navigation slug matches
+ * - customWidgets: registered as plugin widgets in the builder and SDK
  *
- * QUICK START:
- * 1. Create a new screen component in ./screens/
- * 2. Import it below and add it to customPages
- * 3. Add a matching entry to src/navigation.config.ts
+ * Navigation structure is defined in navigation.config.ts and synced
+ * to the Fluid OS API on `fluid deploy`.
  */
 
 import type { ComponentType } from "react";
+import type { WidgetManifest } from "@fluid-app/portal-core/registries";
 import { DashboardScreen } from "./screens/Dashboard";
-// Uncomment after installing form deps (pnpm add react-hook-form zod @hookform/resolvers):
-// import { ExampleFormScreen } from "./screens/ExampleForm";
 
 /**
  * Custom page components keyed by navigation slug.
@@ -30,3 +26,15 @@ export const customPages: Record<string, ComponentType> = {
   // Add more custom screens here:
   // "example-form": ExampleFormScreen,
 };
+
+/**
+ * Custom widget plugins.
+ *
+ * Each manifest registers a widget in both the builder palette
+ * and the SDK runtime. Add manifests here after scaffolding
+ * with `fluid widget create <name>`.
+ */
+export const customWidgets: WidgetManifest[] = [
+  // Import and add widget manifests here:
+  // stockTicker,
+];

package/templates/base/src/screens/ExampleForm.tsx

@@ -1,16 +1,10 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck — This file requires optional dependencies (react-hook-form, zod, @hookform/resolvers).
-// Install them before removing this directive: pnpm add react-hook-form zod @hookform/resolvers
 /**
  * Example Form Screen
  *
  * Demonstrates how to build forms in a portal using
  * React Hook Form + Zod for validation.
  *
- * SETUP: Install form dependencies before using this screen:
- *   pnpm add react-hook-form zod @hookform/resolvers
- *
- * Then uncomment the nav entry and import in portal.config.ts.
+ * Uncomment the nav entry and import in portal.config.ts to enable.
  */
 
 import { useForm } from "react-hook-form";
@@ -51,10 +45,9 @@ export function ExampleFormScreen() {
     resolver: zodResolver(contactFormSchema),
   });
 
-  const onSubmit = async (data: ContactFormData) => {
+  const onSubmit = async (_data: ContactFormData) => {
     // Replace with your API call, e.g.:
-    // const result = await apiClient.post("/contacts", data);
-    console.log("Form submitted:", data);
+    // const result = await apiClient.post("/contacts", _data);
 
     // Simulate API delay
     await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -77,7 +70,7 @@ export function ExampleFormScreen() {
       <div className="border-border bg-background rounded-lg border p-6 shadow-sm">
         {isSubmitSuccessful ? (
           <div className="border-accent bg-accent text-accent-foreground rounded-lg border p-4 text-sm">
-            Form submitted successfully! Check the console for the data.
+            Form submitted successfully!
           </div>
         ) : (
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">

package/templates/fullstack/package.json.template

@@ -9,7 +9,7 @@
     "start": "node dist/server/entry.js",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src/",
+    "lint": "oxlint",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "drizzle-kit migrate",
     "db:push": "drizzle-kit push",
@@ -33,7 +33,6 @@
   },
   "devDependencies": {
     "@fluid-app/fluid-cli-portal": "{{sdkVersion}}",
-    "@eslint/js": "^9.0.0",
     "@hono/vite-dev-server": "^0.25.0",
     "@tailwindcss/vite": "^4.0.0",
     "esbuild": "^0.25.0",
@@ -42,11 +41,9 @@
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "drizzle-kit": "^0.31.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "oxlint": "^1.51.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.6.0",
-    "typescript-eslint": "^8.0.0",
     "vite": "^6.0.0",
     "vitest": "^4.0.0"
   },

package/templates/fullstack/vite.config.ts

@@ -2,11 +2,13 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import devServer from "@hono/vite-dev-server";
+import { fluidManifestPlugin } from "@fluid-app/portal-sdk/vite";
 
 export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
+    fluidManifestPlugin(),
     devServer({
       entry: "src/server/index.ts",
       // Only send /api/* requests to Hono — let Vite handle everything else

package/templates/starter/package.json.template

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint"
   },
   "dependencies": {
     "@fluid-app/portal-sdk": "{{sdkVersion}}",
@@ -24,6 +25,7 @@
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "tailwindcss": "^4.0.0",
+    "oxlint": "^1.51.0",
     "typescript": "^5.6.0",
     "vite": "^6.0.0"
   },

package/templates/starter/vite.config.ts

@@ -1,12 +1,28 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import { fluidManifestPlugin } from "@fluid-app/portal-sdk/vite";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), fluidManifestPlugin()],
   build: {
-    // Target modern browsers for smaller bundles
     target: "esnext",
+    chunkSizeWarningLimit: 600,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (
+            id.includes("node_modules/react-dom") ||
+            id.includes("node_modules/react/") ||
+            id.includes("node_modules/scheduler")
+          ) {
+            return "vendor";
+          }
+          if (id.includes("node_modules/@tanstack/react-query")) {
+            return "query";
+          }
+        },
+      },
+    },
   },
 });

package/templates/base/src/App.tsx

@@ -1,18 +0,0 @@
-import { AppShell } from "@fluid-app/portal-sdk";
-import { customPages } from "./portal.config";
-
-/**
- * Main App component
- *
- * Uses the AppShell from @fluid-app/portal-sdk which provides:
- * - Collapsible sidebar with navigation from your Fluid profile
- * - Header with sub-tabs and theme mode toggle
- * - Polished content area with rounded corners and shadow
- * - Path-based routing for SPA navigation
- *
- * Custom pages are registered in portal.config.ts.
- * Navigation and themes are fetched from the Fluid API.
- */
-export default function App() {
-  return <AppShell customPages={customPages} />;
-}

package/templates/fullstack/eslint.config.js

@@ -1,13 +0,0 @@
-import js from "@eslint/js";
-import tseslint from "typescript-eslint";
-import reactHooks from "eslint-plugin-react-hooks";
-
-export default tseslint.config(
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    plugins: { "react-hooks": reactHooks },
-    rules: reactHooks.configs.recommended.rules,
-  },
-  { ignores: ["dist/", "*.config.*"] },
-);

package/templates/fullstack/src/fluid.config.ts.template

@@ -1,62 +0,0 @@
-import type { FluidSDKConfig, FluidAuthConfig } from "@fluid-app/portal-sdk";
-import { getStoredToken } from "@fluid-app/portal-sdk";
-
-/**
- * Fluid SDK Configuration
- *
- * This file contains the configuration for connecting to your Fluid Commerce account.
- * Authentication is handled by FluidAuthProvider, which automatically:
- * - Extracts tokens from URL parameters (passed by parent Fluid app)
- * - Stores tokens in cookies and localStorage
- * - Validates token expiration
- */
-
-/**
- * Authentication configuration
- *
- * Pattern: safety-satisfies-over-type-annotation
- * Using `satisfies FluidAuthConfig` validates the object shape against the type
- * WITHOUT widening the inferred types. This means:
- *   - TypeScript checks that all required properties are present
- *   - TypeScript checks that property types are compatible
- *   - The actual inferred types remain as specific as possible
- *
- * Compare to type annotation (`const authConfig: FluidAuthConfig = {...}`):
- * - Type annotation widens types to match the interface exactly
- * - `satisfies` preserves literal types while validating structure
- */
-export const authConfig = {
-  // Auth failure defaults: SDK automatically redirects to https://auth.fluid.app
-  // with a redirect_url back to the current page. To customize:
-  //   onAuthFailure: () => { window.location.href = "/custom-login"; },
-  //   authUrl: "https://custom-auth.example.com",
-} satisfies FluidAuthConfig;
-
-/**
- * API client configuration
- *
- * Pattern: safety-satisfies-over-type-annotation
- * See authConfig above for explanation of the `satisfies` pattern.
- *
- * This config is passed to FluidProvider to configure the API client.
- * The callbacks (getAuthToken, onAuthError) are called by the SDK
- * when making API requests.
- */
-export const fluidConfig = {
-  /**
-   * Base URL for the Fluid API
-   * Change this to your Fluid instance URL if self-hosted
-   */
-  baseUrl: import.meta.env.VITE_API_URL ?? "https://api.fluid.app",
-
-  /**
-   * Returns the authentication token for API requests
-   * This reads from the token stored by FluidAuthProvider
-   */
-  getAuthToken: () => {
-    return getStoredToken() ?? null;
-  },
-
-  // 401 errors default: SDK automatically redirects to https://auth.fluid.app
-  // To customize: onAuthError: () => { clearTokens(); window.location.reload(); },
-} satisfies FluidSDKConfig;

package/templates/starter/src/fluid.config.ts.template

@@ -1,62 +0,0 @@
-import type { FluidSDKConfig, FluidAuthConfig } from "@fluid-app/portal-sdk";
-import { getStoredToken } from "@fluid-app/portal-sdk";
-
-/**
- * Fluid SDK Configuration
- *
- * This file contains the configuration for connecting to your Fluid Commerce account.
- * Authentication is handled by FluidAuthProvider, which automatically:
- * - Extracts tokens from URL parameters (passed by parent Fluid app)
- * - Stores tokens in cookies and localStorage
- * - Validates token expiration
- */
-
-/**
- * Authentication configuration
- *
- * Pattern: safety-satisfies-over-type-annotation
- * Using `satisfies FluidAuthConfig` validates the object shape against the type
- * WITHOUT widening the inferred types. This means:
- *   - TypeScript checks that all required properties are present
- *   - TypeScript checks that property types are compatible
- *   - The actual inferred types remain as specific as possible
- *
- * Compare to type annotation (`const authConfig: FluidAuthConfig = {...}`):
- * - Type annotation widens types to match the interface exactly
- * - `satisfies` preserves literal types while validating structure
- */
-export const authConfig = {
-  // Auth failure defaults: SDK automatically redirects to https://auth.fluid.app
-  // with a redirect_url back to the current page. To customize:
-  //   onAuthFailure: () => { window.location.href = "/custom-login"; },
-  //   authUrl: "https://custom-auth.example.com",
-} satisfies FluidAuthConfig;
-
-/**
- * API client configuration
- *
- * Pattern: safety-satisfies-over-type-annotation
- * See authConfig above for explanation of the `satisfies` pattern.
- *
- * This config is passed to FluidProvider to configure the API client.
- * The callbacks (getAuthToken, onAuthError) are called by the SDK
- * when making API requests.
- */
-export const fluidConfig = {
-  /**
-   * Base URL for the Fluid API
-   * Change this to your Fluid instance URL if self-hosted
-   */
-  baseUrl: import.meta.env.VITE_API_URL ?? "https://api.fluid.app",
-
-  /**
-   * Returns the authentication token for API requests
-   * This reads from the token stored by FluidAuthProvider
-   */
-  getAuthToken: () => {
-    return getStoredToken() ?? null;
-  },
-
-  // 401 errors default: SDK automatically redirects to https://auth.fluid.app
-  // To customize: onAuthError: () => { clearTokens(); window.location.reload(); },
-} satisfies FluidSDKConfig;