framer-dalton 0.0.2 → 0.0.5

package/dist/start-relay-server.js

@@ -3,13 +3,17 @@ import os from 'os';
 import path from 'path';
 import 'child_process';
 import { fileURLToPath } from 'url';
+import { createTRPCClient, httpLink } from '@trpc/client';
 import http from 'http';
+import { createHTTPHandler } from '@trpc/server/adapters/standalone';
+import { initTRPC, TRPCError } from '@trpc/server';
+import { z } from 'zod';
 import crypto from 'crypto';
 import { createRequire } from 'module';
 import * as vm from 'vm';
 import { connect } from 'framer-api';
 
-/* @framer/ai relay server v0.0.2 */
+/* @framer/ai relay server v0.0.5 */
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 function getLogPath() {
@@ -46,8 +50,15 @@ function log(message) {
 __name(log, "log");
 var __filename$1 = fileURLToPath(import.meta.url);
 path.dirname(__filename$1);
-var VERSION = "0.0.2" ;
-var RELAY_PORT = Number(process.env.FRAMER_CLI_PORT) || 19987;
+var VERSION = "0.0.5" ;
+var RELAY_PORT = Number(process.env.FRAMER_CLI_PORT) || 19988;
+createTRPCClient({
+  links: [
+    httpLink({
+      url: `http://127.0.0.1:${RELAY_PORT}`
+    })
+  ]
+});
 
 // src/connection-errors.ts
 var CONNECTION_ERROR_PATTERNS = [
@@ -92,14 +103,14 @@ var ScopedFS = class {
   resolvePath(filePath) {
     const resolved = path.resolve(filePath);
     if (!this.isPathAllowed(resolved)) {
-      const error2 = new Error(
+      const error = new Error(
         `EPERM: operation not permitted, access outside allowed directories: ${filePath}`
       );
-      error2.code = "EPERM";
-      error2.errno = -1;
-      error2.syscall = "access";
-      error2.path = filePath;
-      throw error2;
+      error.code = "EPERM";
+      error.errno = -1;
+      error.syscall = "access";
+      error.path = filePath;
+      throw error;
     }
     return resolved;
   }
@@ -255,8 +266,8 @@ var ScopedFS = class {
   constants = fs2.constants;
 };
 
-// src/executor.ts
-var DEFAULT_TIMEOUT = 3e4;
+// src/execute.ts
+var EXECUTION_TIMEOUT = 10 * 60 * 1e3;
 var baseRequire = createRequire(import.meta.url);
 var ALLOWED_MODULES = /* @__PURE__ */ new Set([
   "path",
@@ -279,11 +290,11 @@ var ALLOWED_MODULES = /* @__PURE__ */ new Set([
 function createSandboxedRequire(scopedFs) {
   const sandboxedRequire = /* @__PURE__ */ __name(((id) => {
     if (!ALLOWED_MODULES.has(id)) {
-      const error2 = new Error(
+      const error = new Error(
         `Module "${id}" is not allowed. Allowed: ${[...ALLOWED_MODULES].filter((m) => !m.startsWith("node:")).join(", ")}`
       );
-      error2.name = "ModuleNotAllowedError";
-      throw error2;
+      error.name = "ModuleNotAllowedError";
+      throw error;
     }
     if (id === "fs" || id === "node:fs") {
       return scopedFs;
@@ -302,11 +313,11 @@ function createSandboxedRequire(scopedFs) {
 __name(createSandboxedRequire, "createSandboxedRequire");
 async function sandboxedImport(scopedFs, specifier) {
   if (!ALLOWED_MODULES.has(specifier)) {
-    const error2 = new Error(
+    const error = new Error(
       `Module "${specifier}" is not allowed. Allowed: ${[...ALLOWED_MODULES].filter((m) => !m.startsWith("node:")).join(", ")}`
     );
-    error2.name = "ModuleNotAllowedError";
-    throw error2;
+    error.name = "ModuleNotAllowedError";
+    throw error;
   }
   if (specifier === "fs" || specifier === "node:fs") {
     return scopedFs;
@@ -317,8 +328,8 @@ async function sandboxedImport(scopedFs, specifier) {
   return import(specifier);
 }
 __name(sandboxedImport, "sandboxedImport");
-async function execute(session, connection, code, options = {}) {
-  const { timeout = DEFAULT_TIMEOUT, cwd } = options;
+async function execute(session, framer, code, options = {}) {
+  const { cwd } = options;
   const output = [];
   const customConsole = {
     log: /* @__PURE__ */ __name((...args) => {
@@ -334,11 +345,11 @@ async function execute(session, connection, code, options = {}) {
       output.push(args.map((arg) => formatValue(arg)).join(" "));
     }, "info")
   };
-  const scopedFs = cwd ? new ScopedFS([cwd, "/tmp"]) : new ScopedFS();
+  const scopedFs = cwd ? new ScopedFS([cwd, "/tmp", os.tmpdir()]) : new ScopedFS();
   const sandboxedRequire = createSandboxedRequire(scopedFs);
   const vmContextObj = {
     // Framer API
-    framer: connection,
+    framer,
     state: session.state,
     // Console
     console: customConsole,
@@ -365,22 +376,24 @@ async function execute(session, connection, code, options = {}) {
   };
   const vmContext = vm.createContext(vmContextObj);
   const wrappedCode = `(async () => { ${code} })()`;
+  let timeoutId;
   try {
     const script = new vm.Script(wrappedCode, {
       filename: "framer-exec.js"
     });
     const resultPromise = script.runInContext(vmContext, {
       timeout: 5e3
-      // Short timeout for sync part
     });
     const result = await Promise.race([
       resultPromise,
-      new Promise(
-        (_, reject) => setTimeout(
-          () => reject(new Error(`Execution timed out after ${timeout}ms`)),
-          timeout
-        )
-      )
+      new Promise((_, reject) => {
+        timeoutId = setTimeout(
+          () => reject(
+            new Error(`Execution timed out after ${EXECUTION_TIMEOUT}ms`)
+          ),
+          EXECUTION_TIMEOUT
+        );
+      })
     ]);
     if (result !== void 0) {
       output.push(formatValue(result));
@@ -392,9 +405,42 @@ async function execute(session, connection, code, options = {}) {
       output,
       error: errorMessage
     };
+  } finally {
+    if (timeoutId) clearTimeout(timeoutId);
   }
 }
 __name(execute, "execute");
+async function executeWithReconnect(session, framer, code, options, reconnect) {
+  const result = await tryExecute(session, framer, code, options);
+  if (!result.error || !isConnectionError(result.error)) {
+    return result;
+  }
+  log(
+    `reconnect session=${session.id} project=${session.projectId} reason="${result.error}"`
+  );
+  const newFramer = await reconnect();
+  if (!newFramer) {
+    log(
+      `reconnect.failed session=${session.id} error="no connection returned"`
+    );
+    return {
+      output: [],
+      error: "Connection lost and failed to reconnect"
+    };
+  }
+  log(`reconnect.success session=${session.id}`);
+  return tryExecute(session, newFramer, code, options);
+}
+__name(executeWithReconnect, "executeWithReconnect");
+async function tryExecute(session, framer, code, options) {
+  try {
+    return await execute(session, framer, code, options);
+  } catch (err) {
+    const error = err instanceof Error ? err.message : String(err);
+    return { output: [], error };
+  }
+}
+__name(tryExecute, "tryExecute");
 function formatValue(value) {
   if (value === null) return "null";
   if (value === void 0) return "undefined";
@@ -420,6 +466,7 @@ var ConnectionPool = class {
     __name(this, "ConnectionPool");
   }
   pool = /* @__PURE__ */ new Map();
+  reconnectPromises = /* @__PURE__ */ new Map();
   /**
    * Acquire a connection for a session.
    * If a connection already exists for the project, the session is added to it.
@@ -447,15 +494,26 @@ var ConnectionPool = class {
   }
   /**
    * Reconnect a project's connection (call after catching a connection error).
-   * Uses the same connection object but swaps the underlying WebSocket.
+   * Concurrent callers for the same project share a single reconnect attempt.
    */
   async reconnect(projectId) {
+    const existingPromise = this.reconnectPromises.get(projectId);
+    if (existingPromise) return existingPromise;
+    const promise = this.doReconnect(projectId).finally(() => {
+      this.reconnectPromises.delete(projectId);
+    });
+    this.reconnectPromises.set(projectId, promise);
+    return promise;
+  }
+  async doReconnect(projectId) {
     const entry = this.pool.get(projectId);
-    if (!entry) {
+    if (!entry) return null;
+    try {
+      await entry.connection.reconnect();
+      return entry.connection;
+    } catch {
       return null;
     }
-    await entry.connection.reconnect();
-    return entry.connection;
   }
   /**
    * Release a session from a connection.
@@ -515,7 +573,7 @@ var SessionManager = class {
   get(id) {
     return this.sessions.get(id);
   }
-  getConnection(session) {
+  getFramer(session) {
     return connectionPool.getConnection(session.projectId);
   }
   async reconnect(session) {
@@ -537,144 +595,79 @@ var SessionManager = class {
 };
 var sessionManager = new SessionManager();
 
+// src/router.ts
+var t = initTRPC.create();
+var appRouter = t.router({
+  version: t.procedure.query(() => {
+    return { version: VERSION };
+  }),
+  listSessions: t.procedure.query(() => {
+    return sessionManager.list();
+  }),
+  createSession: t.procedure.input(z.object({ projectId: z.string(), apiKey: z.string() })).mutation(async ({ input }) => {
+    const id = await sessionManager.create(input.projectId, input.apiKey);
+    log(`session.new id=${id} project=${input.projectId}`);
+    return { id };
+  }),
+  destroySession: t.procedure.input(z.object({ sessionId: z.string() })).mutation(async ({ input }) => {
+    await sessionManager.destroy(input.sessionId);
+    log(`session.destroy id=${input.sessionId}`);
+  }),
+  exec: t.procedure.input(
+    z.object({
+      sessionId: z.string(),
+      code: z.string(),
+      cwd: z.string().optional()
+    })
+  ).mutation(async ({ input }) => {
+    const { sessionId, code, cwd } = input;
+    const session = sessionManager.get(sessionId);
+    if (!session) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: `Session ${sessionId} not found`
+      });
+    }
+    log(
+      `exec session=${sessionId} code=${JSON.stringify(code).slice(0, 100)}`
+    );
+    const framer = sessionManager.getFramer(session);
+    if (!framer) {
+      return {
+        output: [],
+        error: "Failed to get connection for session"
+      };
+    }
+    const result = await executeWithReconnect(
+      session,
+      framer,
+      code,
+      { cwd },
+      () => sessionManager.reconnect(session)
+    );
+    if (result.error) {
+      log(`exec.error session=${sessionId} error="${result.error}"`);
+    }
+    return result;
+  }),
+  shutdown: t.procedure.mutation(() => {
+    log("shutdown requested");
+    setTimeout(() => {
+      process.exit(0);
+    }, 100);
+  })
+});
+
 // src/relay-server.ts
-function json(res, data, status = 200) {
-  res.writeHead(status, { "Content-Type": "application/json" });
-  res.end(JSON.stringify(data));
-}
-__name(json, "json");
-function error(res, message, status = 400) {
-  json(res, { error: message }, status);
-}
-__name(error, "error");
-async function readBody(req) {
-  return new Promise((resolve, reject) => {
-    let body = "";
-    req.on("data", (chunk) => {
-      body += chunk;
-    });
-    req.on("end", () => {
-      try {
-        resolve(body ? JSON.parse(body) : {});
-      } catch {
-        reject(new Error("Invalid JSON body"));
-      }
-    });
-    req.on("error", reject);
-  });
-}
-__name(readBody, "readBody");
+var trpcHandler = createHTTPHandler({ router: appRouter });
 async function startRelayServer(port = RELAY_PORT) {
-  const server = http.createServer(async (req, res) => {
-    const url = req.url || "/";
-    try {
-      if (req.method === "GET" && url === "/version") {
-        return json(res, { version: VERSION });
-      }
-      if (req.method === "GET" && url === "/cli/sessions") {
-        const sessions = sessionManager.list();
-        return json(res, { sessions });
-      }
-      if (req.method === "POST" && url === "/cli/session/new") {
-        const body = await readBody(req);
-        const projectId = body.projectId;
-        const apiKey = body.apiKey;
-        if (!projectId || !apiKey) {
-          return error(res, "projectId and apiKey are required");
-        }
-        const id = await sessionManager.create(projectId, apiKey);
-        log(`session.new id=${id} project=${projectId}`);
-        return json(res, { id });
-      }
-      if (req.method === "POST" && url === "/cli/session/destroy") {
-        const body = await readBody(req);
-        const sessionId = body.sessionId ? String(body.sessionId) : "";
-        if (!sessionId) {
-          return error(res, "sessionId is required");
-        }
-        await sessionManager.destroy(sessionId);
-        log(`session.destroy id=${sessionId}`);
-        return json(res, { success: true });
-      }
-      if (req.method === "POST" && url === "/cli/exec") {
-        const body = await readBody(req);
-        const sessionId = String(body.sessionId);
-        const code = body.code;
-        const timeout = body.timeout || 3e4;
-        const cwd = body.cwd;
-        if (!sessionId) {
-          return error(res, "sessionId is required");
-        }
-        if (!code) {
-          return error(res, "code is required");
-        }
-        const session = sessionManager.get(sessionId);
-        if (!session) {
-          return error(res, `Session ${sessionId} not found`, 404);
-        }
-        log(
-          `exec session=${sessionId} code=${JSON.stringify(code).slice(0, 100)}`
-        );
-        const connection = sessionManager.getConnection(session);
-        if (!connection) {
-          return json(res, {
-            output: [],
-            error: "Failed to get connection for session"
-          });
-        }
-        let result;
-        try {
-          result = await execute(session, connection, code, { timeout, cwd });
-        } catch (execErr) {
-          const errMsg = execErr instanceof Error ? execErr.message : String(execErr);
-          result = { output: [], error: errMsg };
-        }
-        if (result.error && isConnectionError(result.error)) {
-          log(
-            `reconnect session=${sessionId} project=${session.projectId} reason="${result.error}"`
-          );
-          const newConnection = await sessionManager.reconnect(session);
-          if (newConnection) {
-            try {
-              result = await execute(session, newConnection, code, {
-                timeout,
-                cwd
-              });
-              log(`reconnect.success session=${sessionId}`);
-            } catch (retryErr) {
-              const errMsg = retryErr instanceof Error ? retryErr.message : String(retryErr);
-              log(`reconnect.failed session=${sessionId} error="${errMsg}"`);
-              result = { output: [], error: errMsg };
-            }
-          } else {
-            log(
-              `reconnect.failed session=${sessionId} error="no connection returned"`
-            );
-          }
-        }
-        if (result.error) {
-          log(`exec.error session=${sessionId} error="${result.error}"`);
-        }
-        return json(res, result);
-      }
-      if (req.method === "POST" && url === "/shutdown") {
-        log("shutdown requested");
-        json(res, { success: true });
-        setTimeout(() => {
-          process.exit(0);
-        }, 100);
-        return;
-      }
-      error(res, "Not found", 404);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      log(`error: ${message}`);
-      error(res, message, 500);
-    }
+  const server = http.createServer((req, res) => {
+    trpcHandler(req, res);
   });
   return new Promise((resolve, reject) => {
     server.on("error", reject);
     server.listen(port, "127.0.0.1", () => {
+      log(`started v${VERSION} on port ${port}`);
       resolve(server);
     });
   });

package/docs/all-skills.md

@@ -0,0 +1,6 @@
+## All Skills
+
+- `npx framer-dalton skill` — Server API docs (sessions, collections, canvas, styles, publishing)
+- `npx framer-dalton skill code-components` — Code component authoring guide
+- `npx framer-dalton skill property-controls` — Property control reference (all 20+ types)
+- `npx framer-dalton skill component-examples` — Complete code component examples

package/docs/code-components.md

@@ -0,0 +1,115 @@
+# Framer Code Components
+
+## Best Practices
+
+### Component Structure
+
+```tsx
+import { addPropertyControls, ControlType } from "framer";
+import { motion } from "framer-motion"; // NOT from "framer"
+
+interface MyComponentProps {
+  /* typed props */
+}
+
+/**
+ * @framerSupportedLayoutWidth any-prefer-fixed
+ * @framerSupportedLayoutHeight any-prefer-fixed
+ */
+export default function MyComponent(props: MyComponentProps) {
+  // component
+}
+
+addPropertyControls(MyComponent, {
+  /* controls */
+});
+```
+
+### Platform Constraints
+
+These will cause errors if violated:
+
+1. **Single file, default export** - Use named `function` syntax (not arrow functions), no named exports
+2. **Imports** - Only `react`, `react-dom`, `framer`, `framer-motion`. Import `motion` from `"framer-motion"`, not `"framer"`
+3. **Position** - Use `position: relative` on the root element, never `fixed`
+4. **SSR** - Guard `window`/`document` access: `if (typeof window !== "undefined")`
+5. **Annotations** - Include `@framerSupportedLayoutWidth/Height` in a `/** */` block comment immediately above the component function
+6. **Types** - Provide a typed props interface (e.g. `MyComponentProps`). Avoid NodeJS types like `Timeout` — use `number` instead
+
+### Layout Annotations
+
+| Content           | Width              | Height             |
+| ----------------- | ------------------ | ------------------ |
+| No intrinsic size | `fixed`            | `fixed`            |
+| Text/auto-sizing  | `auto`             | `auto`             |
+| Flexible          | `any-prefer-fixed` | `any-prefer-fixed` |
+
+Detect auto vs fixed sizing: check if `style.width` or `style.height` is `"100%"`.
+
+### Property Controls
+
+To make components configurable in Framer's properties panel, add property controls:
+
+- To make colors customizable, use `ControlType.Color`. Reuse the same prop for elements sharing a color.
+- To make text styling customizable, use `ControlType.Font` with `controls: "extended"` and `defaultFontType: "sans-serif"`.
+- For images, use `ControlType.ResponsiveImage`. Set defaults in the component body via destructuring (the control doesn't support `defaultValue`).
+- Provide a `defaultValue` for every prop so components render correctly in the Framer canvas. Include at least one item in `ControlType.Array` controls.
+- `ComponentName.defaultProps` is not supported in Framer — use `defaultValue` on the property control instead.
+- Use `hidden` for conditional visibility: `hidden: (props) => !props.showFeature`
+- Prefer sliders over steppers unless step values are large.
+- Keep controls focused — make key elements configurable, hardcode the rest.
+- See `npx framer-dalton skill property-controls` for the full property control reference.
+
+### Image Defaults (in component body)
+
+```tsx
+const {
+  image = {
+    src: "https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg",
+    alt: "Default",
+  },
+} = props;
+```
+
+### Animation Performance
+
+```tsx
+import { useIsStaticRenderer } from "framer";
+import { useInView } from "framer-motion";
+
+const isStatic = useIsStaticRenderer();
+const ref = useRef(null);
+const isInView = useInView(ref);
+
+if (isStatic) return <StaticPreview />; // Show useful static state
+// Pause animations when out of viewport
+```
+
+- For very complex animations, consider WebGL instead of `framer-motion`.
+- Static preview should include visual effects, not just text.
+- Wrapping state updates in `startTransition()` prevents UI blocking and keeps interactions smooth.
+
+### Text
+
+- For auto-sized components with text, apply `width: max-content` or `minWidth: max-content` to prevent text from collapsing.
+
+### Common Errors
+
+- WebGL cross-origin: handle `SecurityError: Failed to execute 'texImage2D'` for cross-origin images.
+- Inverted Y-axis: check if WebGL images render upside down and accommodate.
+
+### Accessibility
+
+- `aria` roles on interactive elements
+- Semantic HTML (`<nav>`, `<article>`, `<section>`)
+- `alt=""` on decorative images
+- 4.5:1 color contrast
+
+## Term Interpretation
+
+- "responsive" → width/height 100%
+- "modern" → 8px radius, 16px spacing, subtle shadows
+- "minimal" → limited colors, whitespace
+- "interactive" → hover/active states
+- "accessible" → ARIA, semantic HTML
+- "props"/"properties" → Framer property controls