cbs-block 1.0.7 → 1.0.9

package/README.md

@@ -1,55 +1,84 @@
-# cbs-block SDK 🚀
+# 🚀 CodeBlock Studio SDK (CLI)
 
-The official toolkit for building **CodeBlock Studio** extensions. Create, package, and share powerful visual blocks with ease.
+The professional toolkit for building, testing, and sharing **CodeBlock Studio** extensions. 
+
+Built for performance. Designed for developers.
+
+---
 
 ## 📦 Installation
 
-Install the CLI globally to use the `cbs-block` command anywhere:
+Install globally to use the `cbs-block` command anywhere:
 
 ```bash
 npm install cbs-block -g
 ```
 
+## 🛠️ Feature Highlights
+
+*   **Code-First Workflow**: Build complex blocks with full folder structures, supporting `index.js/ts`, `package.json`, and local `node_modules`.
+*   **Integrated Unit Testing**: Run logic tests instantly with `cbs-block test`.
+*   **Micro-Benchmarking**: Performance-test your logic with `cbs-block bench` (100k iteration analysis).
+*   **Integrated Tutorials**: Every new project includes a beautiful, CSS-rich `tutorial.html`. View it via `cbs-block tutorial`.
+*   **VSIX-Style Packaging**: Bundle your workspace into a professional `.cbsext` extension with one command.
+
+---
+
 ## 🚀 Quick Start
 
 ### 1. Initialize a Project
 Create a new workspace for your block library:
 ```bash
-cbs-block init MyAwesomeBlocks
-cd MyAwesomeBlocks
+cbs-block init MyAwesomePack
+cd MyAwesomePack
 ```
 
-### 2. Create your First Block
-Generate a template for a new block. Choose a category like `Math`, `Logic`, or `Control`:
+### 2. Create a Block
+Generate a professional directory-based block:
 ```bash
-cbs-block create SimpleAdd Math
+cbs-block create MyBlock
 ```
 
-### 3. Build & Package
-When you're ready to share, bundle your blocks into a `.cbspak` file:
+### 3. Develop & Test
+Open `index.js`, write your logic, and test it:
 ```bash
 cbs-block build
+cbs-block test myblock.cbsblock
 ```
 
+### 4. Pack & Share
+Bundle your workspace into a professional extension:
+```bash
+cbs-block pack
+```
+
+---
+
 ## 🛠️ Command Reference
 
 | Command | Description |
 | --- | --- |
-| `init <Name>` | Creates a new block development workspace. |
-| `create <Name> [Category]` | Generates a new `.cbsblock` template. |
-| `list` | Lists all blocks in the current directory. |
-| `lint` | Validates your blocks against the Studio schema. |
-| `build` | Packages your project into a `.cbspak` for the marketplace. |
-| `serve` | Starts a local hot-reload server for real-time testing. |
-| `publish` | Deploys your package to the CBS Marketplace. |
-
-## 🧩 What is a .cbsblock?
-A block is a JSON file that defines its visuals and its logic.
-- **Visuals**: Ports (Input/Output/Flow) and interactive fields.
-- **Logic**: A sandboxed JavaScript function that executes within the Studio.
-
-## 🔒 The CBS Ecosystem
-Note: `.cbspak` and `.cbsblock` files are proprietary formats optimized for **CodeBlock Studio**. They cannot be opened in standard text editors or other IDEs without the CBS engine.
+| `init [name]` | Initialize a new block project workspace. |
+| `create [name]` | Scaffold a new block (supports Directory or Single-File mode). |
+| `build [dir]` | Compile a directory block into a production `.cbsblock`. |
+| `pack` | Bundle your workspace into a professional `.cbsext` extension. |
+| `test <file>` | Run logic unit tests with mock data. |
+| `bench <file>` | Benchmark block logic performance (iterations & μs). |
+| `tutorial` | Open the integrated developer guide in your browser. |
+| `link` | Link local blocks to your CodeBlock Studio installation. |
+| `publish` | Deploys your package to the global CBS Marketplace. |
+| `site` | Generate a themed documentation website for your project. |
+| `doc <file>` | Generate a markdown README for a specific block. |
+| `lint` | Validate block definitions for schema compliance. |
+| `status` | Check SDK version and environment health. |
+
+---
+
+## 🧩 The .cbsext Format
+Professional extensions are packaged as ZIP-based `.cbsext` files. This allows for:
+- **Rich Assets**: Bundle icons, helper scripts, and HTML tutorials into one file.
+- **Enterprise Metadata**: Verified publisher IDs and display names.
+- **Dependency Isolation**: Fully bundled logic with optimized execution.
 
 ---
-**Build the future of visual coding with CodeBlock Studio.**
+**Build the future of visual coding with [CodeBlock Studio](https://codeblockstudio.web.app).**

package/bin/cbs-block.js

@@ -307,6 +307,69 @@ async function main() {
         fs.writeFileSync(path.join(docsDir, 'index.html'), html);
         console.log(chalk.green(`\n✔ Site generated at docs/index.html`));
 
+    } else if (command === 'web' && target) {
+        if (!fs.existsSync(target)) return console.error(chalk.red(`Error: File ${target} not found.`));
+        const block = JSON.parse(fs.readFileSync(target, 'utf8'));
+        console.log(chalk.cyan(`Launching Web Preview for: ${block.name}...`));
+        
+        const previewHtml = `<!DOCTYPE html>
+<html>
+<head>
+    <title>CBS Block Preview - ${block.name}</title>
+    <style>
+        body { background: #0f0f12; color: #eee; font-family: 'Segoe UI', system-ui; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
+        .block-preview { 
+            background: linear-gradient(135deg, ${block.color || '#4CAF50'}, ${block.color ? block.color + 'CC' : '#45a049'});
+            padding: 20px; border-radius: 12px; min-width: 200px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
+            position: relative;
+        }
+        .header { font-weight: bold; margin-bottom: 20px; font-size: 1.1em; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 5px; }
+        .port { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; }
+        .port-flow { width: 16px; border-radius: 2px; }
+        .controls { margin-top: 40px; background: #1a1a20; padding: 20px; border-radius: 8px; border: 1px solid #333; }
+        button { background: #007acc; color: white; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
+        button:hover { background: #0062a3; }
+        pre { background: #000; padding: 10px; border-radius: 4px; color: #4CAF50; font-size: 0.9em; }
+    </style>
+</head>
+<body>
+    <h1>CodeBlock Studio Simulator</h1>
+    <div class="block-preview">
+        <div class="header">${block.name}</div>
+        <div style="font-size: 0.8em; opacity: 0.7;">Category: ${block.category}</div>
+        <div style="margin-top: 20px;">
+            ${block.ports.map(p => `<div style="font-size: 0.8em; margin: 5px 0;">● ${p.name} (${p.type})</div>`).join('')}
+        </div>
+    </div>
+    <div class="controls">
+        <h3>Logic Test</h3>
+        <button onclick="runTest()">Run Logic</button>
+        <p>Results:</p>
+        <pre id="output">Ready...</pre>
+    </div>
+    <script>
+        const logic = \`${block.logic.replace(/`/g, '\\`').replace(/\$/g, '\\$')}\`;
+        function runTest() {
+            try {
+                const runFunc = new Function('inputs', logic + '\\nreturn run(inputs);');
+                const result = runFunc({ input1: "Web Test Value" });
+                document.getElementById('output').textContent = "Output: " + JSON.stringify(result, null, 2);
+            } catch (e) {
+                document.getElementById('output').textContent = "Error: " + e.message;
+            }
+        }
+    </script>
+</body>
+</html>`;
+
+        const outPath = path.join(process.cwd(), 'preview_web.html');
+        fs.writeFileSync(outPath, previewHtml);
+        console.log(chalk.green(`✔ Preview generated: ${outPath}`));
+        
+        const start = process.platform === 'win32' ? 'start' : process.platform === 'darwin' ? 'open' : 'xdg-open';
+        exec(`${start} ${outPath}`);
+
     } else if (command === 'version' && target === '--bump') {
         const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
         const [major, minor, patch] = pkg.version.split('.').map(Number);
@@ -331,6 +394,7 @@ async function main() {
         console.log(`  ${chalk.bold('doc <file>')}     - Generate markdown documentation`);
         console.log(`  ${chalk.bold('link')}           - Link blocks to main CodeBlock Studio app`);
         console.log(`  ${chalk.bold('lint')}           - Validate block definitions`);
+        console.log(`  ${chalk.bold('web <file>')}     - Preview block in a high-fidelity web simulator`);
         console.log(`  ${chalk.bold('status')}         - Show SDK & environment status`);
     }
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "cbs-block",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "SDK for creating CodeBlock Studio blocks",
   "main": "index.js",
   "bin": {
-    "cbs-block": "./bin/cbs-block.js"
+    "cbs-block": "bin/cbs-block.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/preview_web.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CBS Block Preview - MyBlock</title>
+    <style>
+        body { background: #0f0f12; color: #eee; font-family: 'Segoe UI', system-ui; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
+        .block-preview { 
+            background: linear-gradient(135deg, #4CAF50, #45a049);
+            padding: 20px; border-radius: 12px; min-width: 200px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
+            position: relative;
+        }
+        .header { font-weight: bold; margin-bottom: 20px; font-size: 1.1em; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 5px; }
+        .port { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; }
+        .port-flow { width: 16px; border-radius: 2px; }
+        .controls { margin-top: 40px; background: #1a1a20; padding: 20px; border-radius: 8px; border: 1px solid #333; }
+        button { background: #007acc; color: white; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
+        button:hover { background: #0062a3; }
+        pre { background: #000; padding: 10px; border-radius: 4px; color: #4CAF50; font-size: 0.9em; }
+    </style>
+</head>
+<body>
+    <h1>CodeBlock Studio Simulator</h1>
+    <div class="block-preview">
+        <div class="header">MyBlock</div>
+        <div style="font-size: 0.8em; opacity: 0.7;">Category: Custom</div>
+        <div style="margin-top: 20px;">
+            <div style="font-size: 0.8em; margin: 5px 0;">● input1 (Input)</div><div style="font-size: 0.8em; margin: 5px 0;">● output1 (Output)</div>
+        </div>
+    </div>
+    <div class="controls">
+        <h3>Logic Test</h3>
+        <button onclick="runTest()">Run Logic</button>
+        <p>Results:</p>
+        <pre id="output">Ready...</pre>
+    </div>
+    <script>
+        const logic = `function run(inputs) { return inputs.input1; }`;
+        function runTest() {
+            try {
+                const runFunc = new Function('inputs', logic + '\nreturn run(inputs);');
+                const result = runFunc({ input1: "Web Test Value" });
+                document.getElementById('output').textContent = "Output: " + JSON.stringify(result, null, 2);
+            } catch (e) {
+                document.getElementById('output').textContent = "Error: " + e.message;
+            }
+        }
+    </script>
+</body>
+</html>