@synetics/ui 0.7.0-alpha

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@synetics/ui",
+  "version": "0.7.0-alpha",
+  "description": "Component library for the Synetics framework",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "keywords": [
+    "pulsar",
+    "ui",
+    "components",
+    "react",
+    "typescript",
+    "tailwind"
+  ],
+  "dependencies": {
+    "@types/prismjs": "^1.26.5",
+    "prismjs": "^1.30.0",
+    "@synetics/design-tokens": "^0.7.0-alpha",
+    "@synetics/synetics.dev": "0.7.0-alpha",
+    "@synetics/formular.dev": "^0.7.0-alpha"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.17",
+    "cross-env": "^10.1.0",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "@synetics/vite-plugin": "^0.7.0-alpha"
+  },
+  "author": "Tadeo Piana <https://www.linkedin.com/in/tadeopiana/>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/binaryjack/synetics-ui.dev.git"
+  },
+  "homepage": "https://github.com/binaryjack/synetics-ui.dev#readme",
+  "bugs": {
+    "url": "https://github.com/binaryjack/synetics-ui.dev/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "echo 'Skipping TypeScript build - using source files directly with Vite runtime compilation'",
+    "build:types": "tsc -p tsconfig.build.json",
+    "predev": "pnpm --filter @synetics/transformer build && pnpm --filter @synetics/vite-plugin build && pnpm --filter @synetics/design-tokens build",
+    "dev": "cross-env PULSAR_DEBUG=1 NODE_OPTIONS='--max-old-space-size=8192' vite",
+    "dev:http": "cross-env PULSAR_TRACE=1 PULSAR_TRACE_HTTP=http://localhost:9339/trace PULSAR_TRACE_CHANNELS=lexer,parser NODE_OPTIONS='--max-old-space-size=8192' vite",
+    "typecheck": "tsc --noEmit",
+    "showcase:dev": "vite",
+    "showcase:build": "vite build",
+    "showcase:preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:reactivity": "vite --open test-comprehensive-reactivity.html",
+    "test:comprehensive": "vite --open test-comprehensive-reactivity.html"
+  }
+}

package/parse-debug.txt

@@ -0,0 +1,10 @@
+
+[2026-02-09T21:07:05.795Z] [PARSER] parseImportDeclaration: After RBRACE consume (+7ms) { currentToken: 'FROM', tokenValue: 'from', position: 10 }
+[2026-02-09T21:07:05.795Z] [PARSER] parseImportDeclaration: EXITING named imports block (+7ms) { currentToken: 'FROM', tokenValue: 'from', position: 10 }
+[2026-02-09T21:07:05.795Z] [PARSER] parseImportDeclaration: About to check for 'from' keyword (+7ms) { currentToken: 'FROM', tokenValue: 'from', position: 10 }
+[2026-02-09T21:07:05.795Z] [PARSER] parseImportDeclaration: After RBRACE consume (+7ms) { currentToken: 'FROM', tokenValue: 'from', position: 17 }
+[2026-02-09T21:07:05.795Z] [PARSER] parseImportDeclaration: EXITING named imports block (+7ms) { currentToken: 'FROM', tokenValue: 'from', position: 17 }
+[2026-02-09T21:07:05.795Z] [PARSER] parseImportDeclaration: About to check for 'from' keyword (+7ms) { currentToken: 'FROM', tokenValue: 'from', position: 17 }
+[2026-02-09T21:07:05.796Z] [PARSER] parseImportDeclaration: After RBRACE consume (+8ms) { currentToken: 'FROM', tokenValue: 'from', position: 24 }
+[2026-02-09T21:07:05.796Z] [PARSER] parseImportDeclaration: EXITING named imports block (+8ms) { currentToken: 'FROM', tokenValue: 'from', position: 24 }
+[2026-02-09T21:07:05.796Z] [PARSER] parseImportDeclaration: About to check for 'from' keyword (+8ms) { currentToken: 'FROM', tokenValue: 'from', position: 24 }

package/ping.txt

@@ -0,0 +1 @@
+pong

package/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './src/showcase/__tests__/e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : 1,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  // Expect dev server to be running manually
+  webServer: undefined,
+});

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/pre-validation-code.js

@@ -0,0 +1,25 @@
+import { $REGISTRY, createEffect, createSignal, insert, t_element } from '@synetics/synetics.dev';
+
+export interface ICounterProps {
+  id?: string;
+}
+export function Counter({id}): HTMLElement {
+  return $REGISTRY.execute('component:Counter', () => {
+    console.log('[Counter] Initializing with id:', id);
+    const [count, setCount] = createSignal(0);
+    const increment = () => {
+      console.log('[Click] Increment, before:', count());
+      setCount((count() + 1));
+      console.log('[Click] After:', count());
+    };
+    const decrement = () => {
+      console.log('[Click] Decrement, before:', count());
+      setCount((count() - 1));
+    };
+    const reset = () => {
+      console.log('[Click] Reset');
+      setCount(0);
+    };
+    return t_element('div', { style: 'background: #1a1a1a; padding: 30px; border-radius: 12px; margin-bottom: 20px;' }, [t_element('h2', { style: 'font-size: 24px; margin-bottom: 20px; color: #f59e0b;' }, ['🧪 Test: Basic Signal Reactivity']), t_element('div', { style: 'display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;' }, [t_element('button', { onClick: increment, style: 'padding: 16px 32px; font-size: 20px; background: #3b82f6; border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s;' }, ['\r\n          ➕ Increment\r\n        ']), t_element('button', { onClick: decrement, style: 'padding: 16px 32px; font-size: 20px; background: #ef4444; border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s;' }, ['\r\n          ➖ Decrement\r\n        ']), t_element('button', { onClick: reset, style: 'padding: 16px 32px; font-size: 20px; background: #6b7280; border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s;' }, ['\r\n          🔄 Reset\r\n        '])]), ((() => { const _el$ = t_element('div', { style: 'font-size: 48px; font-weight: bold; color: #10b981; margin-top: 20px; padding: 20px; background: #0a0a0a; border-radius: 8px; text-align: center;' }, ['\r\n        Count: ']); insert(_el$, () => count()); return _el$; })()), t_element('div', { style: 'margin-top: 30px; padding: 20px; background: #2a2a2a; border-radius: 8px;' }, [t_element('h3', { style: 'font-size: 18px; margin-bottom: 10px; color: #10b981;' }, ['\r\n          ✅ Features Being Tested\r\n        ']), t_element('ul', { style: 'list-style: none; padding: 0; color: #d1d5db;' }, [t_element('li', { style: 'padding: 5px 0;' }, ['✓ Component props (id: ', (id || 'none'), ')']), t_element('li', { style: 'padding: 5px 0;' }, ['✓ createSignal() reactivity']), t_element('li', { style: 'padding: 5px 0;' }, ['✓ Event handlers (onClick)']), t_element('li', { style: 'padding: 5px 0;' }, ['✓ JSX expression interpolation ', '` {count()} `']), t_element('li', { style: 'padding: 5px 0;' }, ['✓ Console logging and debugging'])])])]);
+  });
+}

package/return-parse-test.txt

@@ -0,0 +1,139 @@
+
+> @pulsar-framework/ui@0.7.0-alpha dev
+> node --max-old-space-size=8192 ../../node_modules/vite/bin/vite.js
+
+
+  VITE v6.4.1  ready in 176 ms
+
+  Γ₧£  Local:   http://localhost:3000/
+  Γ₧£  Network: use --host to expose
+  Γ₧£  press h + enter to show help
+[pulsar] load() called for: main.psr (PSR - WILL TRANSFORM)
+[pulsar]   ID: E:/Sources/visual-schema-builder/packages/pulsar-ui.dev/src/main.psr
+[pulsar]   Root: E:/Sources/visual-schema-builder/packages/pulsar-ui.dev
+[pulsar]   Resolved: E:\Sources\visual-schema-builder\packages\pulsar-ui.dev\src\main.psr
+
+[pulsar] ========== TRANSFORMATION START: E:\Sources\visual-schema-builder\packages\pulsar-ui.dev\src\main.psr ==========
+[pulsar] File path: E:\Sources\visual-schema-builder\packages\pulsar-ui.dev\src\main.psr
+[pulsar] Input length: 2591 chars
+[pulsar] Preprocessing complete
+[pulsar] Preprocessed length: 2591 chars
+[pulsar] Creating transformation pipeline...
+[pulsar] Running transformation pipeline...
+[2026-02-10T00:09:04.817Z] [PIPELINE] Starting transformation (+0ms) {
+  sourceLength: 2591,
+  filePath: 'E:\\Sources\\visual-schema-builder\\packages\\pulsar-ui.dev\\src\\main.psr'
+}
+[2026-02-10T00:09:04.817Z] [LEXER] Tokenizing source (+0ms) 
+[2026-02-10T00:09:04.819Z] [LEXER] Generated 344 tokens (+2ms) { tokenCount: 344, duration: 1.9847000000002026 }
+[2026-02-10T00:09:04.819Z] [PARSER] Building AST (+2ms) 
+[2026-02-10T00:09:04.819Z] [PARSER] Starting parsing (+2ms) { sourceLength: 2591, maxIterations: 50000 }
+[2026-02-10T00:09:04.820Z] [PARSER] Tokenized 344 tokens (+3ms) { tokenCount: 344 }
+[2026-02-10T00:09:04.820Z] [PARSER] After tokenization, before parsing loop setup (+3ms) 
+[2026-02-10T00:09:04.820Z] [PARSER] After variable initialization (+3ms) 
+[2026-02-10T00:09:04.820Z] [PARSER] Before main parsing loop (+3ms) { isAtEnd: false, current: 0, tokenCount: 344, firstToken: 'IMPORT' }
+[2026-02-10T00:09:04.820Z] [PARSER] Main loop iteration 1 (+3ms) { position: '0/344', currentToken: 'IMPORT', statementsParsed: 0 }
+[2026-02-10T00:09:04.820Z] [PARSER] About to parse statement 0 (+3ms) { position: '0/344', nextToken: 'IMPORT', tokenValue: 'import' }
+[2026-02-10T00:09:04.820Z] [PARSER] Parsing IMPORT declaration (+3ms) { position: 0, token: 'import' }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: START (+4ms) { currentToken: 'IMPORT', position: 0 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: After advance (+4ms) { currentToken: 'LBRACE', position: 1 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: Loop 1, about to parse specifier (+4ms) { currentToken: 'IDENTIFIER', tokenValue: 'createSignal', position: 2 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: About to expect IDENTIFIER (+4ms) { currentToken: 'IDENTIFIER', position: 2 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: After adding specifier, checking for comma (+4ms) { currentToken: 'COMMA', tokenValue: ',', position: 3 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: Comma found, continuing loop (+4ms) { currentToken: 'IDENTIFIER', position: 4 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: Loop 2, about to parse specifier (+4ms) { currentToken: 'IDENTIFIER', tokenValue: 'useNavigate', position: 4 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: About to expect IDENTIFIER (+4ms) { currentToken: 'IDENTIFIER', position: 4 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: After adding specifier, checking for comma (+4ms) { currentToken: 'COMMA', tokenValue: ',', position: 5 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: Comma found, continuing loop (+4ms) { currentToken: 'IDENTIFIER', position: 6 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: Loop 3, about to parse specifier (+4ms) { currentToken: 'IDENTIFIER', tokenValue: 'Router', position: 6 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: About to expect IDENTIFIER (+4ms) { currentToken: 'IDENTIFIER', position: 6 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: After adding specifier, checking for comma (+4ms) { currentToken: 'COMMA', tokenValue: ',', position: 7 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: Comma found, continuing loop (+4ms) { currentToken: 'IDENTIFIER', position: 8 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: Loop 4, about to parse specifier (+4ms) { currentToken: 'IDENTIFIER', tokenValue: 'Route', position: 8 }
+[2026-02-10T00:09:04.821Z] [PARSER] parseImportDeclaration: About to expect IDENTIFIER (+4ms) { currentToken: 'IDENTIFIER', position: 8 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After adding specifier, checking for comma (+5ms) { currentToken: 'RBRACE', tokenValue: '}', position: 9 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: No comma found, breaking loop (+5ms) { currentToken: 'RBRACE', position: 9 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After loop, expecting RBRACE (+5ms) { currentToken: 'RBRACE', tokenValue: '}', position: 9 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After RBRACE consume (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 10 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: EXITING named imports block (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 10 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to check for 'from' keyword (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 10 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: RIGHT BEFORE try block (+5ms) 
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: Got fromToken, checking value (+5ms) { tokenType: 'FROM', tokenValue: 'from', condition: false }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: FROM check passed, about to consume (+5ms) { currentToken: 'FROM', position: 10 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After consuming FROM (+5ms) { currentToken: 'STRING', position: 11 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to call _expect('STRING') (+5ms) {
+  currentToken: 'STRING',
+  tokenValue: '@pulsar-framework/pulsar.dev',
+  position: 11
+}
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After _expect('STRING') (+5ms) { sourceTokenValue: '@pulsar-framework/pulsar.dev', position: 12 }
+[2026-02-10T00:09:04.822Z] [PARSER] Statement 1 added to AST (+5ms) { statementType: 'ImportDeclaration', position: '13/344' }
+[2026-02-10T00:09:04.822Z] [PARSER] Main loop iteration 2 (+5ms) { position: '13/344', currentToken: 'IMPORT', statementsParsed: 1 }
+[2026-02-10T00:09:04.822Z] [PARSER] Parsing IMPORT declaration (+5ms) { position: 13, token: 'import' }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: START (+5ms) { currentToken: 'IMPORT', position: 13 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After advance (+5ms) { currentToken: 'LBRACE', position: 14 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: Loop 1, about to parse specifier (+5ms) { currentToken: 'IDENTIFIER', tokenValue: 'HomePage', position: 15 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to expect IDENTIFIER (+5ms) { currentToken: 'IDENTIFIER', position: 15 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After adding specifier, checking for comma (+5ms) { currentToken: 'RBRACE', tokenValue: '}', position: 16 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: No comma found, breaking loop (+5ms) { currentToken: 'RBRACE', position: 16 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After loop, expecting RBRACE (+5ms) { currentToken: 'RBRACE', tokenValue: '}', position: 16 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After RBRACE consume (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 17 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: EXITING named imports block (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 17 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to check for 'from' keyword (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 17 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: RIGHT BEFORE try block (+5ms) 
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: Got fromToken, checking value (+5ms) { tokenType: 'FROM', tokenValue: 'from', condition: false }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: FROM check passed, about to consume (+5ms) { currentToken: 'FROM', position: 17 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After consuming FROM (+5ms) { currentToken: 'STRING', position: 18 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to call _expect('STRING') (+5ms) {
+  currentToken: 'STRING',
+  tokenValue: './showcase/pages/home.psr',
+  position: 18
+}
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After _expect('STRING') (+5ms) { sourceTokenValue: './showcase/pages/home.psr', position: 19 }
+[2026-02-10T00:09:04.822Z] [PARSER] Statement 2 added to AST (+5ms) { statementType: 'ImportDeclaration', position: '20/344' }
+[2026-02-10T00:09:04.822Z] [PARSER] Main loop iteration 3 (+5ms) { position: '20/344', currentToken: 'IMPORT', statementsParsed: 2 }
+[2026-02-10T00:09:04.822Z] [PARSER] Parsing IMPORT declaration (+5ms) { position: 20, token: 'import' }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: START (+5ms) { currentToken: 'IMPORT', position: 20 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After advance (+5ms) { currentToken: 'LBRACE', position: 21 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: Loop 1, about to parse specifier (+5ms) { currentToken: 'IDENTIFIER', tokenValue: 'AboutPage', position: 22 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to expect IDENTIFIER (+5ms) { currentToken: 'IDENTIFIER', position: 22 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After adding specifier, checking for comma (+5ms) { currentToken: 'RBRACE', tokenValue: '}', position: 23 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: No comma found, breaking loop (+5ms) { currentToken: 'RBRACE', position: 23 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After loop, expecting RBRACE (+5ms) { currentToken: 'RBRACE', tokenValue: '}', position: 23 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After RBRACE consume (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 24 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: EXITING named imports block (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 24 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to check for 'from' keyword (+5ms) { currentToken: 'FROM', tokenValue: 'from', position: 24 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: RIGHT BEFORE try block (+5ms) 
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: Got fromToken, checking value (+5ms) { tokenType: 'FROM', tokenValue: 'from', condition: false }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: FROM check passed, about to consume (+5ms) { currentToken: 'FROM', position: 24 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After consuming FROM (+5ms) { currentToken: 'STRING', position: 25 }
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: About to call _expect('STRING') (+5ms) {
+  currentToken: 'STRING',
+  tokenValue: './showcase/pages/about.psr',
+  position: 25
+}
+[2026-02-10T00:09:04.822Z] [PARSER] parseImportDeclaration: After _expect('STRING') (+5ms) { sourceTokenValue: './showcase/pages/about.psr', position: 26 }
+[2026-02-10T00:09:04.822Z] [PARSER] Statement 3 added to AST (+5ms) { statementType: 'ImportDeclaration', position: '27/344' }
+[2026-02-10T00:09:04.822Z] [PARSER] Main loop iteration 4 (+5ms) { position: '27/344', currentToken: 'EXPORT', statementsParsed: 3 }
+[2026-02-10T00:09:04.823Z] [PARSER] Statement 4 added to AST (+6ms) { statementType: 'ExportDeclaration', position: '28/344' }
+[2026-02-10T00:09:04.823Z] [PARSER] Main loop iteration 5 (+6ms) { position: '28/344', currentToken: 'INTERFACE', statementsParsed: 4 }
+[2026-02-10T00:09:04.823Z] [PARSER] Statement 5 added to AST (+6ms) { statementType: 'InterfaceDeclaration', position: '37/344' }
+[2026-02-10T00:09:04.823Z] [PARSER] Main loop iteration 6 (+6ms) { position: '37/344', currentToken: 'EXPORT', statementsParsed: 5 }
+[2026-02-10T00:09:04.823Z] [PARSER] Statement 6 added to AST (+6ms) { statementType: 'ExportDeclaration', position: '38/344' }
+[2026-02-10T00:09:04.823Z] [PARSER] Main loop iteration 7 (+6ms) { position: '38/344', currentToken: 'COMPONENT', statementsParsed: 6 }
+[2026-02-10T00:09:04.823Z] [PARSER] Parsing COMPONENT declaration (+6ms) { position: 38, token: 'component' }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: START (+6ms) { currentToken: 'COMPONENT', position: 38 }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: After consuming COMPONENT (+6ms) { currentToken: 'IDENTIFIER', position: 39 }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: Component name parsed (+6ms) { name: 'App', currentToken: 'LPAREN', position: 40 }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: hasParams=true (+6ms) { currentToken: 'RPAREN', position: 41 }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: About to expect RPAREN (+6ms) { currentToken: 'RPAREN', position: 41 }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: After RPAREN (+6ms) { currentToken: 'LBRACE', position: 42 }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: About to expect LBRACE (+6ms) { currentToken: 'LBRACE', position: 42 }
+[2026-02-10T00:09:04.823Z] [PARSER] parseComponentDeclaration: After LBRACE, parsing body (+6ms) { currentToken: 'CONST', position: 43 }
+[2026-02-10T00:09:04.824Z] [PARSER] parseComponentDeclaration: Body statement 1 added (+7ms) { statementType: 'VariableDeclaration', position: 50 }
+[2026-02-10T00:09:04.824Z] [PARSER] parseComponentDeclaration: Body statement 2 added (+7ms) { statementType: 'VariableDeclaration', position: 66 }
+[2026-02-10T00:09:04.824Z] [PARSER] parseComponentDeclaration: Body statement 3 added (+7ms) { statementType: 'VariableDeclaration', position: 85 }
+[2026-02-10T00:09:04.825Z] [PARSER] parseComponentDeclaration: Body statement 4 added (+8ms) { statementType: 'VariableDeclaration', position: 104 }
+[2026-02-10T00:09:04.825Z] [PARSER] parseReturnStatement: START (+8ms) { currentToken: 'RETURN', position: 104 }
+[2026-02-10T00:09:04.825Z] [PARSER] parseReturnStatement: After RETURN (+8ms) { currentToken: 'LPAREN', position: 105 }
+[2026-02-10T00:09:04.825Z] [PARSER] parseReturnStatement: About to parse expression (+8ms) { currentToken: 'LPAREN', position: 105 }

package/run-psr-test.ps1

@@ -0,0 +1,65 @@
+# PSR Test Runner - Proves PSR works end-to-end
+
+Write-Host "PSR Test Suite - Proving PSR Works!" -ForegroundColor Cyan
+Write-Host ""
+
+# Step 1: Build pulsar.dev if needed
+Write-Host "Step 1: Checking pulsar.dev build..." -ForegroundColor Yellow
+$pulsarDevDist = "..\pulsar.dev\dist\index.js"
+if (-Not (Test-Path $pulsarDevDist)) {
+    Write-Host "   Building pulsar.dev..." -ForegroundColor Gray
+    Push-Location ..\pulsar.dev
+    pnpm build
+    Pop-Location
+    Write-Host "   pulsar.dev built" -ForegroundColor Green
+} else {
+    Write-Host "   pulsar.dev already built" -ForegroundColor Green
+}
+
+# Step 2: Build pulsar-transformer if needed
+Write-Host ""
+Write-Host "Step 2: Checking pulsar-transformer build..." -ForegroundColor Yellow
+$transformerDist = "..\pulsar-transformer\dist\pipeline\create-pipeline.js"
+if (-Not (Test-Path $transformerDist)) {
+    Write-Host "   Building pulsar-transformer..." -ForegroundColor Gray
+    Push-Location ..\pulsar-transformer
+    pnpm build
+    Pop-Location
+    Write-Host "   pulsar-transformer built" -ForegroundColor Green
+} else {
+    Write-Host "   pulsar-transformer already built" -ForegroundColor Green
+}
+
+# Step 3: Transform PSR files
+Write-Host ""
+Write-Host "Step 3: Transforming PSR to JavaScript..." -ForegroundColor Yellow
+node test-psr-runner.mjs
+
+if ($LASTEXITCODE -ne 0) {
+    Write-Host ""
+    Write-Host "❌ Transformation failed! Check errors above." -ForegroundColor Red
+    exit 1
+}
+
+# Step 4: Start dev server
+Write-Host ""
+Write-Host "Step 4: Starting dev server..." -ForegroundColor Yellow
+Write-Host ""
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host "PSR TEST SUITE READY!" -ForegroundColor Green
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host ""
+Write-Host "Open in browser:" -ForegroundColor Yellow
+Write-Host "http://localhost:5173/test-psr.html" -ForegroundColor White
+Write-Host ""
+Write-Host "What you should see:" -ForegroundColor Green
+Write-Host "- Test navigation UI" -ForegroundColor White
+Write-Host "- Interactive test controls" -ForegroundColor White
+Write-Host "- RenderCapture validation status" -ForegroundColor White
+Write-Host ""
+Write-Host "THIS IS THE MOMENT OF TRUTH!" -ForegroundColor Magenta
+Write-Host ""
+Write-Host "Starting dev server..." -ForegroundColor Gray
+Write-Host ""
+
+pnpm dev

package/src/README.md

@@ -0,0 +1,138 @@
+# Synetics UI - Source Structure
+
+## 📁 Clean Directory Structure
+
+```
+src/
+├── main.ts                 # Entry point - bootstraps Synetics app
+├── main.syn                # Main App component with basic feature tests
+├── index.ts                # Module exports
+├── types.ts                # Type definitions
+├── components/             # Production UI components
+├── showcase/               # Component showcase/documentation
+├── design/                 # Design system files
+├── styles/                 # CSS styles
+├── types/                  # TypeScript type definitions
+└── lab/                    # 🧪 Experimental & Test Files
+    ├── feature-tests.syn   # Comprehensive feature test suite
+    ├── test-*.syn          # Individual test files (35+ files)
+    ├── main-*.ts/psr       # Alternative entry points
+    ├── debug-tests/        # Debug test directory
+    ├── tests/              # Test suite directory
+    └── showcase-*/         # Experimental showcase variants
+```
+
+## 🎯 Current Status
+
+### ✅ Working Features
+
+- **Props passing**: Components correctly receive destructured props objects
+- **createSignal()**: Basic reactivity working
+- **Event handlers**: onClick events trigger correctly
+- **Signal interpolation**: `{signal()}` syntax working (⚠️ `$(signal)` has issues, use function call)
+- **Console logging**: Debug output functional
+
+### ⚠️ Known Issues
+
+- **$(signal) syntax**: Currently causes "signal is not defined" runtime error
+  - **Workaround**: Use `{signal()}` instead of `$(signal)`
+  - **Status**: Transformer bug - see `docs/bugs/signal-binding-syntax-issue.md`
+  - **Impact**: Low - functional workaround exists
+
+### 🧪 Feature Test Suite
+
+Located in `lab/feature-tests.syn`, this file systematically tests:
+
+1. **Basic Component Rendering** - Props and JSX
+2. **createSignal** - Reactive state
+3. **createEffect** - Side effects on signal changes
+4. **createMemo** - Computed/derived values
+5. **Event Handlers** - onClick, onMouseEnter, etc.
+6. **Conditional Rendering** - Ternary expressions
+7. **List Rendering** - Array.map() for dynamic lists
+8. **Dynamic Styles** - Reactive style attributes
+9. **Component Composition** - Parent-child relationships
+
+## 🚀 Running Tests
+
+### Basic Test (Current)
+
+```bash
+cd packages/synetics-ui.dev
+pnpm dev
+```
+
+This runs `main.ts` → `main.syn` with basic signal functionality.
+
+### Full Feature Suite
+
+To test all features, update `main.ts`:
+
+```typescript
+import { FeatureTestSuite } from './lab/feature-tests.syn';
+pulse(FeatureTestSuite(), { root: '#app' });
+```
+
+## 📝 Props Usage Pattern
+
+**❌ Wrong:**
+
+```typescript
+pulse(MyComponent('stringValue'), { ... });
+```
+
+**✅ Correct:**
+
+```typescript
+pulse(MyComponent({ propName: 'stringValue' }), { ... });
+```
+
+**Component Definition:**
+
+```typescript
+interface IMyProps {
+  propName: string;
+}
+
+component MyComponent({ propName }: IMyProps) {
+  return <div>{propName}</div>;
+}
+```
+
+## 🧹 Cleanup Summary
+
+**Moved to `lab/` folder:**
+
+- 35+ test files (`test-*.syn`)
+- Alternative main files (`main-*.ts`, `main-*.syn`)
+- Debug directories (`debug-tests/`, `tests/`)
+- Experimental showcase variants
+- Disabled test runners
+
+**Kept in root:**
+
+- Production components
+- Main entry points (main.ts, main.syn)
+- Type definitions
+- Design system
+- Showcase (stable version)
+
+## 🎯 Next Steps
+
+1. Test `createEffect` - verify side effects trigger correctly
+2. Test `createMemo` - verify computed values update
+3. Test conditional rendering - ternary expressions in JSX
+4. Test list rendering - array.map() in JSX
+5. Test component composition - nested components with props
+6. Test form inputs - two-way binding with signals
+7. Test async operations - data fetching patterns
+
+## 📚 Documentation
+
+> ⚠️ **REBRANDING & DEPRECATION NOTICE**  
+> **Pulsar is now Synetics.** The original `pulsar-framework` packages have been officially deprecated. Please use the new `@synetics/*` namespace for all future development.
+
+
+- Component API: `/docs`
+- Architecture: `/docs/architecture`
+- Transformer: `packages/synetics-transformer/README.md`

package/src/components/app-footer.syn

@@ -0,0 +1,17 @@
+/**
+ * App Footer
+ * Slim footer with copyright and links.
+ */
+
+export const AppFooter = () => (
+  <footer className="app-footer">
+    <span>© 2026 Synetics framework — MIT License</span>
+    <div className="app-footer__links">
+      <a href="https://github.com/binaryjack/synetics.dev" target="_blank" rel="noopener noreferrer">
+        GitHub
+      </a>
+      <a href="/synetics-ui.dev/about">About</a>
+      <a href="/synetics-ui.dev/bootstrap">Get Started</a>
+    </div>
+  </footer>
+);

package/src/components/app-header.syn

@@ -0,0 +1,43 @@
+/**
+ * App Header
+ * Sticky top bar with branding, theme toggle.
+ * Module-level theme signal — readable by any component.
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+// Read persisted theme; default dark
+const _initial = (() => {
+  try { return localStorage.getItem('__pulsar_theme__') as 'dark' | 'light' | null; } catch { return null; }
+})() ?? 'dark';
+
+export const [_appTheme, _setAppTheme] = createSignal<'dark' | 'light'>(_initial);
+
+export const AppHeader = () => {
+  const toggleTheme = () => {
+    const next: 'dark' | 'light' = _appTheme() === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    _setAppTheme(next);
+    try { localStorage.setItem('__pulsar_theme__', next); } catch { /* noop */ }
+  };
+
+  return (
+    <header className="app-header">
+      <div className="app-header__brand">
+        <h1 className="app-header__logo">⚡ Pulsar</h1>
+        <span className="app-header__badge">v2</span>
+        <span className="app-header__subtitle">Framework Showcase</span>
+      </div>
+
+      <div className="app-header__actions">
+        <button
+          className="theme-toggle"
+          onClick={toggleTheme}
+          title="Toggle light / dark mode"
+          style={() => `background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; font-size: 16px; transition: border-color 0.15s;`}>
+          {() => _appTheme() === 'dark' ? '☀️' : '🌙'}
+        </button>
+      </div>
+    </header>
+  );
+};

package/src/components/atoms/avatar/avatar-simple.syn

@@ -0,0 +1,25 @@
+/**
+ * Simplified Avatar Component - PSR Implementation  
+ * For testing - reduced complexity
+ */
+
+import type { IAvatarProps } from './avatar.type';
+
+component Avatar({
+  size = 'md',
+  src,
+  name,
+  className,
+}: IAvatarProps) {
+  const avatarClasses = `relative inline-flex items-center justify-center rounded-full ${className || ''}`;
+
+  return (
+    <div className={avatarClasses}>
+      {src ? (
+        <img src={src} alt={name || 'Avatar'} className="w-full h-full object-cover" />
+      ) : (
+        <span className="font-medium">{name}</span>
+      )}
+    </div>
+  );
+}