freesail 0.0.1 → 0.1.0

package/examples/demo/server.js

@@ -0,0 +1,253 @@
+/**
+ * Freesail Demo Server
+ * 
+ * A simple Express server demonstrating the Freesail SDK.
+ * This example shows how to:
+ * - Set up SSE streaming
+ * - Send A2UX protocol messages
+ * - Handle user actions
+ */
+
+import express from 'express';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { 
+  FreesailStream, 
+  CatalogToToolConverter,
+  createSSEHandler,
+  createActionHandler,
+} from '@freesail/server';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// Middleware
+app.use(express.json());
+app.use(express.static(join(__dirname, 'public')));
+
+// Load catalog for tool generation
+const catalogId = 'standard_catalog_v1';
+
+// Store active conversations (in production, use a proper store)
+const conversations = new Map();
+
+/**
+ * SSE Endpoint - Streams UI to the client
+ */
+app.get('/api/stream', createSSEHandler(async (stream, req) => {
+  console.log(`[Demo] New connection: ${stream.id}`);
+  
+  // Store stream for later use
+  conversations.set(stream.id, { stream, state: {} });
+
+  // Send initial UI
+  await sendWelcomeUI(stream);
+  
+  // Keep connection open - in real app, this would be driven by LLM
+  // For demo, we'll just wait
+}));
+
+/**
+ * Action Endpoint - Handles user interactions
+ */
+app.post('/api/action', express.json(), createActionHandler(async (action, req) => {
+  console.log(`[Demo] User action:`, action);
+  
+  // Find the stream for this surface (simplified - in real app, track properly)
+  for (const [id, conv] of conversations) {
+    if (!conv.stream.closed) {
+      await handleUserAction(conv.stream, action);
+      break;
+    }
+  }
+}));
+
+/**
+ * Send welcome UI to client
+ */
+async function sendWelcomeUI(stream) {
+  // Create surface
+  stream.createSurface('main', catalogId);
+  
+  // Small delay to ensure surface is ready
+  await sleep(100);
+  
+  // Send components
+  stream.send({
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'root',
+          component: 'Column',
+          gap: '24px',
+          padding: '24px',
+          children: ['header', 'card', 'actions'],
+        },
+        {
+          id: 'header',
+          component: 'Row',
+          justify: 'between',
+          align: 'center',
+          children: ['title', 'badge'],
+        },
+        {
+          id: 'title',
+          component: 'Text',
+          text: 'Welcome to Freesail',
+          variant: 'h2',
+        },
+        {
+          id: 'badge',
+          component: 'Badge',
+          text: 'Demo',
+          variant: 'primary',
+        },
+        {
+          id: 'card',
+          component: 'Card',
+          title: 'Generative UI Demo',
+          subtitle: 'This UI was generated via the A2UX protocol',
+          children: ['card-content'],
+        },
+        {
+          id: 'card-content',
+          component: 'Column',
+          gap: '16px',
+          children: ['description', 'input-name', 'input-email', 'checkbox'],
+        },
+        {
+          id: 'description',
+          component: 'Text',
+          text: 'Freesail decouples AI agents from the frontend, allowing any LLM to drive any UI through a standardized JSON protocol.',
+        },
+        {
+          id: 'input-name',
+          component: 'Input',
+          label: 'Your Name',
+          placeholder: 'Enter your name',
+          bindPath: '/user/name',
+        },
+        {
+          id: 'input-email',
+          component: 'Input',
+          label: 'Email',
+          placeholder: 'Enter your email',
+          type: 'email',
+          bindPath: '/user/email',
+        },
+        {
+          id: 'checkbox',
+          component: 'Checkbox',
+          label: 'Subscribe to updates',
+          bindPath: '/user/subscribe',
+        },
+        {
+          id: 'actions',
+          component: 'Row',
+          gap: '12px',
+          justify: 'end',
+          children: ['btn-cancel', 'btn-submit'],
+        },
+        {
+          id: 'btn-cancel',
+          component: 'Button',
+          label: 'Cancel',
+          variant: 'outline',
+          action: 'cancel',
+        },
+        {
+          id: 'btn-submit',
+          component: 'Button',
+          label: 'Submit',
+          variant: 'primary',
+          action: 'submit',
+        },
+      ],
+    },
+  });
+
+  // Initialize data model
+  stream.updateDataModel('main', {
+    user: {
+      name: '',
+      email: '',
+      subscribe: false,
+    },
+  });
+}
+
+/**
+ * Handle user actions
+ */
+async function handleUserAction(stream, action) {
+  const { surfaceId, action: actionType, context } = action;
+
+  switch (actionType) {
+    case 'submit':
+      console.log('[Demo] Form submitted with:', context);
+      
+      // Update UI to show success
+      stream.send({
+        updateComponents: {
+          surfaceId: 'main',
+          components: [
+            {
+              id: 'card-content',
+              component: 'Column',
+              gap: '16px',
+              align: 'center',
+              children: ['success-icon', 'success-text'],
+            },
+            {
+              id: 'success-icon',
+              component: 'Badge',
+              text: '✓',
+              variant: 'success',
+              size: 'large',
+            },
+            {
+              id: 'success-text',
+              component: 'Text',
+              text: `Thank you, ${context?.user?.name || 'User'}! Your submission was received.`,
+              align: 'center',
+            },
+          ],
+        },
+      });
+      break;
+
+    case 'cancel':
+      console.log('[Demo] Form cancelled');
+      
+      // Reset the form
+      stream.updateDataModel('main', {
+        user: { name: '', email: '', subscribe: false },
+      });
+      break;
+
+    default:
+      console.log(`[Demo] Unknown action: ${actionType}`);
+  }
+}
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`
+╔═══════════════════════════════════════════════════════════╗
+║                                                           ║
+║   🚀 Freesail Demo Server                                 ║
+║                                                           ║
+║   Server running at: http://localhost:${PORT}              ║
+║   Open in browser to see the demo                         ║
+║                                                           ║
+╚═══════════════════════════════════════════════════════════╝
+  `);
+});

package/package.json

@@ -1,7 +1,40 @@
 {
   "name": "freesail",
-  "version": "0.0.1",
-  "description": "The official Freesail SDK. Currently in alpha - full release coming soon.",
-  "main": "index.js",
-  "author": "Thendral AI Ltd"
-}
+  "version": "0.1.0",
+  "description": "Industrial Strength Generative UI SDK",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "npm run build --workspaces",
+    "build:core": "npm run build --workspace=@freesail/core",
+    "build:lit": "npm run build --workspace=@freesail/lit-ui",
+    "build:server": "npm run build --workspace=@freesail/server",
+    "dev": "npm run dev --workspaces --if-present",
+    "test": "npm run test --workspaces --if-present",
+    "lint": "npm run lint --workspaces --if-present",
+    "clean": "rm -rf packages/*/dist packages/*/node_modules node_modules"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/freesail/freesail.git"
+  },
+  "keywords": [
+    "generative-ui",
+    "ai-agents",
+    "llm",
+    "sse",
+    "web-components",
+    "lit",
+    "a2ux",
+    "headless"
+  ],
+  "author": "Freesail Team",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3"
+  }
+}

package/packages/core/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@freesail/core",
+  "version": "0.1.0",
+  "description": "Freesail Core - A2UX Protocol Parser, Transport & State Management",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./protocol": {
+      "types": "./dist/protocol.d.ts",
+      "import": "./dist/protocol.js"
+    },
+    "./transport": {
+      "types": "./dist/transport.d.ts",
+      "import": "./dist/transport.js"
+    },
+    "./store": {
+      "types": "./dist/store.d.ts",
+      "import": "./dist/store.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src --ext .ts"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "keywords": [
+    "a2ux",
+    "protocol",
+    "sse",
+    "transport"
+  ],
+  "license": "MIT"
+}