@fugood/bricks-project 2.24.0-beta.37 → 2.24.0-beta.39

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@fugood/bricks-project",
-  "version": "2.24.0-beta.37",
+  "version": "2.24.0-beta.39",
   "main": "index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "bun scripts/build.js"
   },
   "dependencies": {
-    "@fugood/bricks-cli": "^2.24.0-beta.35",
+    "@fugood/bricks-cli": "^2.24.0-beta.39",
     "@huggingface/gguf": "^0.3.2",
     "@iarna/toml": "^3.0.0",
     "@modelcontextprotocol/sdk": "^1.15.0",
@@ -24,5 +24,5 @@
   "peerDependencies": {
     "oxfmt": "^0.36.0"
   },
-  "gitHead": "5b91fb31b3ef42efe74e15f8c2e04973905b6cba"
+  "gitHead": "f74322101339ff5efb796a89fcd8f0a52c2465ce"
 }

package/tools/preview-main.mjs

@@ -2,6 +2,7 @@
 import { app, BrowserWindow } from 'electron'
 import { readFile, writeFile } from 'fs/promises'
 import { watchFile } from 'fs'
+import { createServer } from 'http'
 import { parseArgs } from 'util'
 import * as TOON from '@toon-format/toon'
 
@@ -14,6 +15,7 @@ const { values } = parseArgs({
     'test-id': { type: 'string' },
     'test-title-like': { type: 'string' },
     'no-keep-open': { type: 'boolean' },
+    'cdp-port': { type: 'string' },
   },
   strict: true,
   allowPositionals: true,
@@ -70,6 +72,127 @@ const previewUrlMap = {
 const previewUrl = previewUrlMap[stage]
 if (!previewUrl) throw new Error(`Invalid BRICKS_STAGE: ${stage}`)
 
+// --- CDP WebSocket Server ---
+// Bridges external CDP clients to the preview's postMessage-based CDP bridge.
+// Usage: --cdp-port 9222
+
+const startCdpServer = async (mainWindow, port) => {
+  const { WebSocketServer } = await import('ws')
+  const clients = new Set()
+
+  // Inject a listener in the preview that forwards CDP responses/events via console
+  const injectCdpRelay = () =>
+    mainWindow.webContents.executeJavaScript(`
+      if (!window.__cdpRelayInstalled) {
+        window.__cdpRelayInstalled = true
+        window.addEventListener('message', (evt) => {
+          try {
+            const d = typeof evt.data === 'string' ? JSON.parse(evt.data) : evt.data
+            if (d && (d.type === 'cdp-response' || d.type === 'cdp-event'))
+              console.log('[CDP]' + JSON.stringify(d))
+          } catch {}
+        })
+      }
+    `)
+
+  // Capture CDP messages from the preview's console output
+  mainWindow.webContents.on('console-message', (_event, ...rest) => {
+    const message = typeof rest[0] === 'object' ? rest[0].message : rest[1]
+    if (!message?.startsWith('[CDP]')) return
+    try {
+      const data = JSON.parse(message.slice(5))
+      // Translate to standard CDP wire format (strip internal type field)
+      const wireMsg =
+        data.type === 'cdp-response'
+          ? { id: data.id, result: data.result, error: data.error }
+          : { method: data.method, params: data.params }
+      if (data.sessionId) wireMsg.sessionId = data.sessionId
+      const payload = JSON.stringify(wireMsg)
+      for (const c of clients) if (c.readyState === 1) c.send(payload)
+    } catch {}
+  })
+
+  // HTTP discovery endpoints (chrome://inspect, Playwright, etc.)
+  const httpServer = createServer((req, res) => {
+    if (req.url === '/json/list' || req.url === '/json') {
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(
+        JSON.stringify([
+          {
+            description: 'BRICKS Preview',
+            id: 'bricks-preview',
+            title: 'BRICKS Preview',
+            type: 'page',
+            url: previewUrl,
+            webSocketDebuggerUrl: `ws://localhost:${port}/ws`,
+          },
+        ]),
+      )
+      return
+    }
+    if (req.url === '/json/version') {
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify({ Browser: 'BRICKS Preview', 'Protocol-Version': '1.3' }))
+      return
+    }
+    // bricks-cli discovery endpoint
+    if (req.url === '/devtools/info') {
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(
+        JSON.stringify({
+          name: 'BRICKS Preview',
+          port,
+          protocols: ['cdp'],
+          hasPasscode: false,
+        }),
+      )
+      return
+    }
+    res.writeHead(404)
+    res.end()
+  })
+
+  const wss = new WebSocketServer({ server: httpServer, path: '/ws' })
+  wss.on('connection', (ws) => {
+    clients.add(ws)
+    injectCdpRelay()
+
+    ws.on('message', (raw) => {
+      try {
+        const req = JSON.parse(raw.toString())
+        const cdpReq = JSON.stringify({
+          type: 'cdp-request',
+          id: req.id,
+          method: req.method,
+          params: req.params || {},
+          sessionId: req.sessionId,
+        })
+        mainWindow.webContents.executeJavaScript(`window.postMessage(${JSON.stringify(cdpReq)})`)
+      } catch {}
+    })
+
+    ws.on('close', () => clients.delete(ws))
+  })
+
+  // Try ports starting from the requested one until one is available
+  const listen = (p) =>
+    new Promise((resolve, reject) => {
+      httpServer.once('error', (err) => {
+        if (err.code === 'EADDRINUSE' && p < port + 100) {
+          resolve(listen(p + 1))
+        } else {
+          reject(err)
+        }
+      })
+      httpServer.listen(p, () => {
+        console.log(`CDP server: ws://localhost:${p}/ws`)
+        console.log(`Inspect:   devtools://devtools/bundled/inspector.html?ws=localhost:${p}/ws`)
+        resolve(p)
+      })
+    })
+  await listen(port)
+}
+
 app.on('ready', () => {
   let show = true
   if (takeScreenshotConfig && !takeScreenshotConfig.noHeadless) show = false
@@ -124,12 +247,16 @@ app.on('ready', () => {
         })
       `)
     }
+    // Start CDP WebSocket server if requested
+    const cdpPort = values['cdp-port'] ? parseInt(values['cdp-port'], 10) : null
+    if (cdpPort) startCdpServer(mainWindow, cdpPort)
   })
 
   // Capture console messages from the preview
   if (testId) {
-    mainWindow.webContents.on('console-message', (_, { message }) => {
-      if (message.startsWith('[TEST_RESULT]')) {
+    mainWindow.webContents.on('console-message', (_event, ...rest) => {
+      const message = typeof rest[0] === 'object' ? rest[0].message : rest[1]
+      if (message?.startsWith('[TEST_RESULT]')) {
         const data = JSON.parse(message.replace('[TEST_RESULT]', ''))
         console.log(`[TEST_RESULT_TOON]${TOON.encode(data.result)}`)
         if (!takeScreenshotConfig && noKeepOpen) app.quit()

package/tools/preview.ts

@@ -1,5 +1,5 @@
 import { $ } from 'bun'
-import { watch } from 'fs'
+import { watch, unlinkSync } from 'fs'
 import type { FSWatcher } from 'fs'
 import { parseArgs } from 'util'
 import debounce from 'lodash/debounce'
@@ -19,6 +19,8 @@ const { values } = parseArgs({
     'test-id': { type: 'string' },
     'test-title-like': { type: 'string' },
     'no-keep-open': { type: 'boolean' },
+    'cdp-port': { type: 'string' },
+    'no-cdp': { type: 'boolean' },
   },
   strict: true,
   allowPositionals: true,
@@ -62,6 +64,11 @@ if (values['no-keep-open']) {
   args.push('--no-keep-open')
 }
 
+if (!values['no-cdp']) {
+  const cdpPort = parseInt(values['cdp-port'] || '', 10) || 19852
+  args.push('--cdp-port', String(cdpPort))
+}
+
 const useTypecheck = !values['skip-typecheck']
 
 const compile = async () => {
@@ -80,6 +87,14 @@ if (needWatcher) {
   })
 }
 
+const devtoolsInfoPath = `${cwd}/.bricks/devtools.json`
+
+const cleanupDevtoolsInfo = () => {
+  try {
+    unlinkSync(devtoolsInfoPath)
+  } catch {}
+}
+
 const proc = Bun.spawn(['bunx', '--bun', 'electron', `${__dirname}/preview-main.mjs`, ...args], {
   env: { ...process.env, BRICKS_STAGE: app.stage || 'production' },
   stdout: 'pipe',
@@ -102,6 +117,18 @@ const processOutput = async () => {
           const toonData = line.replace('[TEST_RESULT_TOON]', '')
           console.log(toonData)
         } else if (line) {
+          // Detect CDP server startup from preview-main output
+          const cdpMatch = line.match(/^CDP server: ws:\/\/localhost:(\d+)/)
+          if (cdpMatch) {
+            const info = {
+              port: parseInt(cdpMatch[1], 10),
+              pid: proc.pid,
+              address: 'localhost',
+              name: app.name || 'BRICKS Preview',
+              startedAt: new Date().toISOString(),
+            }
+            Bun.write(devtoolsInfoPath, JSON.stringify(info, null, 2))
+          }
           console.log(line)
         }
       })
@@ -112,4 +139,5 @@ const processOutput = async () => {
 await processOutput()
 await proc.exited
 
+cleanupDevtoolsInfo()
 if (watcher) watcher.close()

package/types/bricks/Rect.ts

@@ -1,6 +1,6 @@
 /* Auto generated by build script
  *
- * Rectangle shape with customizable fill, border, radius, and shadow
+ * Rectangle shape with customizable fill, border, radius, shadow, and blur
  */
 import type { SwitchCondInnerStateCurrentCanvas, SwitchCondData, SwitchDef } from '../switch'
 import type { Data, DataLink } from '../data'
@@ -37,7 +37,16 @@ Default property:
   "linearGradientLocations": [
     0,
     1
-  ]
+  ],
+  "blurEnabled": false,
+  "blurVariant": "blur",
+  "blurType": "light",
+  "blurAmount": 10,
+  "blurDirection": "blurredTopClearBottom",
+  "blurStartOffset": 0,
+  "blurGlassType": "regular",
+  "blurGlassOpacity": 0.5,
+  "blurGlassInteractive": false
 }
   */
   property?: BrickBasicProperty & {
@@ -61,6 +70,32 @@ Default property:
         }
     /* An optional array of numbers defining the location of each gradient color stop */
     linearGradientLocations?: Array<number | DataLink> | DataLink
+    /* Enable blur effect.
+ Not supported on Desktop (Electron) and Web.  
+ Avoid using opacity prop with blur — use alpha backgroundColor (e.g. rgba) instead. */
+    blurEnabled?: boolean | DataLink
+    /* Blur variant */
+    blurVariant?: 'blur' | 'progressiveBlur' | 'liquidGlass' | DataLink
+    /* Blur type (blur variant) */
+    blurType?: 'xlight' | 'light' | 'dark' | 'regular' | 'prominent' | DataLink
+    /* Blur amount (0 ~ 100, blur variant) */
+    blurAmount?: number | DataLink
+    /* Progressive blur direction (progressiveBlur variant) */
+    blurDirection?:
+      | 'blurredTopClearBottom'
+      | 'blurredBottomClearTop'
+      | 'blurredCenterClearTopAndBottom'
+      | DataLink
+    /* Progressive blur start offset (0 ~ 1, progressiveBlur variant) */
+    blurStartOffset?: number | DataLink
+    /* Glass type (liquidGlass variant, iOS 26+) */
+    blurGlassType?: 'clear' | 'regular' | DataLink
+    /* Glass tint color (liquidGlass variant) */
+    blurGlassTintColor?: string | DataLink
+    /* Glass opacity (0 ~ 1, liquidGlass variant) */
+    blurGlassOpacity?: number | DataLink
+    /* Enable glass interaction (liquidGlass variant) */
+    blurGlassInteractive?: boolean | DataLink
   }
   events?: BrickBasicEvents & {
     /* Event of the brick press */
@@ -92,7 +127,7 @@ Default property:
   }
 }
 
-/* Rectangle shape with customizable fill, border, radius, and shadow */
+/* Rectangle shape with customizable fill, border, radius, shadow, and blur */
 export type BrickRect = Brick &
   BrickRectDef & {
     templateKey: 'BRICK_RECT'