@synetics/ui 0.7.0-alpha

package/src/lab/transformer/untrack-isolation/2026-02-11-14-20-untrack-isolation.syn

@@ -0,0 +1,326 @@
+// Untrack Isolation Test PSR File
+// Tests untrack(() => {}) reactivity isolation
+
+component UntrackIsolationExample() {
+    signal count = 0
+    signal name = "John"
+    signal age = 25
+    signal city = "New York"
+    signal trackedEffectCount = 0
+    signal untrackedEffectCount = 0
+    
+    // Effect that tracks all signals
+    createEffect(() => {
+        trackedEffectCount(prev => prev + 1)
+        console.log('Tracked effect running:', {
+            count: count(),
+            name: name(),
+            age: age(),
+            city: city()
+        })
+    })
+    
+    // Effect that selectively untracks some signals
+    createEffect(() => {
+        untrackedEffectCount(prev => prev + 1)
+        
+        // Track count
+        const currentCount = count()
+        
+        // Untrack other signals
+        const untrackedData = untrack(() => ({
+            name: name(),
+            age: age(),
+            city: city()
+        }))
+        
+        console.log('Untracked effect running:', {
+            count: currentCount,
+            ...untrackedData
+        })
+    })
+    
+    return (
+        <div>
+            <h1>Untrack Isolation Demo</h1>
+            
+            <div class="stats">
+                <div class="stat-card">
+                    <h3>Effect Execution Counts</h3>
+                    <p>Tracked Effect: {trackedEffectCount()}</p>
+                    <p>Untracked Effect: {untrackedEffectCount()}</p>
+                    <p class="difference">
+                        Difference: {trackedEffectCount() - untrackedEffectCount()} 
+                        extra executions in tracked effect
+                    </p>
+                </div>
+                
+                <div class="stat-card">
+                    <h3>Current State</h3>
+                    <p>Count: {count()}</p>
+                    <p>Name: {name()}</p>
+                    <p>Age: {age()}</p>
+                    <p>City: {city()}</p>
+                </div>
+            </div>
+            
+            <div class="controls">
+                <h3>Update Signals</h3>
+                
+                <div class="control-group">
+                    <label>Count (tracked by both effects):</label>
+                    <button onclick={() => count(count() + 1)}>
+                        Increment Count ({count()})
+                    </button>
+                    <p class="note">
+                        ✓ Both effects will run
+                    </p>
+                </div>
+                
+                <div class="control-group">
+                    <label>Name (untracked):</label>
+                    <input 
+                        type="text" 
+                        value={name()} 
+                        oninput={(e) => name(e.target.value)}
+                    />
+                    <p class="note">
+                        ⚠️ Only tracked effect will run
+                    </p>
+                </div>
+                
+                <div class="control-group">
+                    <label>Age (untracked):</label>
+                    <input 
+                        type="number" 
+                        value={age()} 
+                        oninput={(e) => age(parseInt(e.target.value))}
+                    />
+                    <p class="note">
+                        ⚠️ Only tracked effect will run
+                    </p>
+                </div>
+                
+                <div class="control-group">
+                    <label>City (untracked):</label>
+                    <input 
+                        type="text" 
+                        value={city()} 
+                        oninput={(e) => city(e.target.value)}
+                    />
+                    <p class="note">
+                        ⚠️ Only tracked effect will run
+                    </p>
+                </div>
+            </div>
+            
+            <UntrackInComponents 
+                count={count()} 
+                name={name()} 
+                age={age()} 
+                city={city()} 
+            />
+            
+            <ComplexUntrackExample />
+            <ConditionalUntrackExample />
+        </div>
+    )
+}
+
+component UntrackInComponents({ count, name, age, city }) {
+    signal componentRenderCount = 0
+    
+    // Component effect with partial untracking
+    createEffect(() => {
+        componentRenderCount(prev => prev + 1)
+        
+        // Track count only
+        console.log('Component tracking count:', count)
+        
+        // Use other props without tracking
+        const staticData = untrack(() => ({
+            name,
+            age,
+            city
+        }))
+        
+        console.log('Static data (untracked):', staticData)
+    })
+    
+    return (
+        <div class="component-untrack">
+            <h3>Untrack in Components</h3>
+            <p>Component renders: {componentRenderCount()}</p>
+            <p>This component only re-renders when count changes.</p>
+            
+            <div class="component-data">
+                <p>Tracked: Count = {count}</p>
+                <p>Untracked: Name = {name} (won't trigger re-render)</p>
+                <p>Untracked: Age = {age} (won't trigger re-render)</p>
+                <p>Untracked: City = {city} (won't trigger re-render)</p>
+            </div>
+        </div>
+    )
+}
+
+component ComplexUntrackExample() {
+    signal x = 0
+    signal y = 0
+    signal z = 0
+    signal computeCount = 0
+    
+    // Complex computation with selective tracking
+    const result = createMemo(() => {
+        computeCount(prev => prev + 1)
+        
+        // Track x
+        const trackedX = x()
+        
+        // Untrack y and z
+        const untrackedValues = untrack(() => ({
+            y: y(),
+            z: z()
+        }))
+        
+        // Computation only re-runs when x changes
+        return trackedX * 2 + untrackedValues.y + untrackedValues.z
+    })
+    
+    return (
+        <div class="complex-untrack">
+            <h3>Complex Untrack Example</h3>
+            <p>Memo compute count: {computeCount()}</p>
+            <p>Result: {result()}</p>
+            
+            <div class="controls">
+                <button onclick={() => x(x() + 1)}>
+                    Update X ({x()}) - Will trigger computation
+                </button>
+                
+                <button onclick={() => y(y() + 1)}>
+                    Update Y ({y()}) - Won't trigger computation
+                </button>
+                
+                <button onclick={() => z(z() + 1)}>
+                    Update Z ({z()}) - Won't trigger computation
+                </button>
+                
+                <button onclick={() => {
+                    // Batch update with untrack
+                    batch(() => {
+                        x(x() + 1)
+                        untrack(() => {
+                            y(y() + 1)
+                            z(z() + 1)
+                        })
+                    })
+                }}>
+                    Update All (batched with untrack)
+                </button>
+            </div>
+        </div>
+    )
+}
+
+component ConditionalUntrackExample() {
+    signal condition = true
+    signal trackedValue = 0
+    signal untrackedValue = 0
+    signal effectRunCount = 0
+    
+    createEffect(() => {
+        effectRunCount(prev => prev + 1)
+        
+        if (condition()) {
+            // When true, track the value
+            console.log('Tracking value:', trackedValue())
+        } else {
+            // When false, don't track the value
+            untrack(() => {
+                console.log('Not tracking value:', untrackedValue())
+            })
+        }
+    })
+    
+    return (
+        <div class="conditional-untrack">
+            <h3>Conditional Untrack</h3>
+            <p>Effect runs: {effectRunCount()}</p>
+            
+            <div class="controls">
+                <label>
+                    <input 
+                        type="checkbox"
+                        checked={condition()}
+                        onchange={(e) => condition(e.target.checked)}
+                    />
+                    Track values in effect
+                </label>
+                
+                <button onclick={() => trackedValue(trackedValue() + 1)}>
+                    Update Tracked Value ({trackedValue()})
+                </button>
+                
+                <button onclick={() => untrackedValue(untrackedValue() + 1)}>
+                    Update Untracked Value ({untrackedValue()})
+                </button>
+            </div>
+            
+            <div class="explanation">
+                <p>
+                    When condition is true: Effect tracks trackedValue changes.
+                    <br />
+                    When condition is false: Effect uses untrack() and doesn't re-run on untrackedValue changes.
+                </p>
+            </div>
+        </div>
+    )
+}
+
+// Advanced pattern: Untrack in resource fetching
+component UntrackResourceExample() {
+    signal userId = 1
+    signal refreshToken = 0
+    signal fetchCount = 0
+    
+    const [userData] = createResource(
+        () => userId(),  // Track userId
+        async (id) => {
+            fetchCount(prev => prev + 1)
+            
+            // Use refreshToken without tracking it
+            const token = untrack(() => refreshToken())
+            
+            console.log('Fetching user', id, 'with token', token)
+            
+            await new Promise(resolve => setTimeout(resolve, 1000))
+            return { id, name: `User ${id}`, token }
+        }
+    )
+    
+    return (
+        <div class="untrack-resource">
+            <h3>Untrack in Resources</h3>
+            <p>Fetch count: {fetchCount()}</p>
+            
+            <button onclick={() => userId(userId() + 1)}>
+                Change User ID ({userId()}) - Will refetch
+            </button>
+            
+            <button onclick={() => refreshToken(refreshToken() + 1)}>
+                Update Token ({refreshToken()}) - Won't refetch
+            </button>
+            
+            <div class="resource-data">
+                {userData.loading && <p>Loading...</p>}
+                {userData() && (
+                    <div>
+                        <p>User ID: {userData().id}</p>
+                        <p>Name: {userData().name}</p>
+                        <p>Token: {userData().token}</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/lab/transformer/waiting-suspense/2026-02-11-14-20-waiting-suspense.syn

@@ -0,0 +1,78 @@
+// Waiting Suspense Test PSR File
+// Tests <Waiting default={fallback}> suspense-like components
+
+component WaitingExample() {
+    signal isLoading = true
+    signal slowResource = createResource(fetchSlowData)
+    
+    async function fetchSlowData() {
+        await new Promise(resolve => setTimeout(resolve, 2000))
+        return { data: "Loaded data", timestamp: Date.now() }
+    }
+    
+    return (
+        <div>
+            {/* Basic Waiting component */}
+            <Waiting default={<div class="spinner">Loading...</div>}>
+                <SlowComponent />
+            </Waiting>
+            
+            {/* Waiting with timeout */}
+            <Waiting 
+                default={<div>Please wait...</div>}
+                timeout={5000}
+                onTimeout={() => console.log('Timeout reached')}
+            >
+                <DataComponent resource={slowResource} />
+            </Waiting>
+            
+            {/* Nested Waiting boundaries */}
+            <Waiting default={<div>Loading outer...</div>}>
+                <div class="outer-content">
+                    <h2>Outer Content</h2>
+                    <Waiting default={<div>Loading inner...</div>}>
+                        <SlowInnerComponent />
+                    </Waiting>
+                </div>
+            </Waiting>
+            
+            {/* Waiting with error handling */}
+            <Waiting 
+                default={<div>Loading...</div>}
+                error={(error) => <div class="error">Failed to load: {error.message}</div>}
+            >
+                <RiskyComponent />
+            </Waiting>
+        </div>
+    )
+}
+
+component SlowComponent() {
+    const [data, setData] = createSignal(null)
+    
+    onMount(async () => {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        setData("Component loaded!")
+    })
+    
+    return <div>{data() || "Still loading..."}</div>
+}
+
+component DataComponent({ resource }) {
+    return <div>Resource: {resource()?.data}</div>
+}
+
+component SlowInnerComponent() {
+    return <div>Inner component loaded</div>
+}
+
+component RiskyComponent() {
+    // Simulates a component that might throw
+    const [shouldThrow] = createSignal(Math.random() > 0.5)
+    
+    if (shouldThrow()) {
+        throw new Error("Random error occurred")
+    }
+    
+    return <div>Component loaded successfully</div>
+}

package/src/main-simple.syn

@@ -0,0 +1,23 @@
+/**
+ * Simple test version
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+component App() {
+  const [count, setCount] = createSignal(0);
+  
+  return (
+    <div>
+      <h1>Hello Pulsar</h1>
+      <p>Count: {count()}</p>
+      <button onClick={() => setCount(count() + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}
+
+export { App };
+
+

package/src/main.syn

@@ -0,0 +1,101 @@
+
+/**
+ * Pulsar UI Showcase - Main Application Entry Point (PSR)
+ * Navigation System Test
+ */
+
+import { createSignal, useNavigate, Router, Route } from '@synetics/synetics.dev';
+import { SidebarNav } from './components/sidebar-nav.syn';
+import { AppHeader } from './components/app-header.syn';
+import { AppFooter } from './components/app-footer.syn';
+import { HomePage } from './showcase/home/home.syn';
+import { AboutPage } from './showcase/about/about.syn';
+import { BootstrapTestPage } from './showcase/bootstrap/bootstrap-test.syn';
+import { DependencyInjectionTestPage } from './showcase/di/di-test.syn';
+import { ReactivityTestPage } from './showcase/reactivity/reactivity-test.syn';
+import { JsxTestPage } from './showcase/jsx/jsx-test.syn';
+import { ControlFlowTestPage } from './showcase/control-flow/control-flow-test.syn';
+import { ResourceTestPage } from './showcase/resource/resource-test.syn';
+import { PortalTestPage } from './showcase/portal/portal-test.syn';
+import { DragDropTestPage } from './showcase/drag-drop/drag-drop-test.syn';
+import { ErrorBoundaryTestPage } from './showcase/error-boundary/error-boundary-test.syn';
+import { ErrorBoundaryMegaPage } from './showcase/error-boundary/error-boundary-mega.syn';
+import { ContextTestPage } from './showcase/context/context-test.syn';
+import { FormsTestPage }        from './showcase/forms/forms-test.syn';
+import { CrossValidationPage }  from './showcase/forms/pages/cross-validation-page.syn';
+import { DependentFieldsPage }  from './showcase/forms/pages/dependent-fields-page.syn';
+import { DynamicFieldsPage }    from './showcase/forms/pages/dynamic-fields-page.syn';
+import { EditFormPage }         from './showcase/forms/pages/edit-form-page.syn';
+import { SelectControlsPage }   from './showcase/forms/pages/select-controls-page.syn';
+import { WizardPage }           from './showcase/forms/pages/wizard-page.syn';
+import { HttpTestPage } from './showcase/http/http-test.syn';
+import { AssignmentTest } from './showcase/tests/assignment-test.syn';
+import { SimpleTest } from './showcase/tests/simple-codegen-test.syn';
+import { RoutingTestPage } from './showcase/routing/routing-test.syn';
+import { SSRTestPage } from './showcase/ssr/ssr-test.syn';
+import { SvgCanvasPage } from './showcase/svg-canvas/svg-canvas-page.syn';
+
+export interface IAppProps {
+  id?: string;
+}
+
+component App() {
+  const navigate = useNavigate();
+  const [sidebarCollapsed, setSidebarCollapsed] = createSignal(false);
+
+  const handleNavigate = (path: string) => {
+    navigate(path);
+  };
+
+  const handleSidebarToggle = (isCollapsed: boolean) => {
+    setSidebarCollapsed(isCollapsed);
+  };
+
+  return (
+    <div className="app-shell">
+      <SidebarNav
+        onNavigate={handleNavigate}
+        onToggle={handleSidebarToggle}
+      />
+
+      <div
+        className="app-content"
+        style={() => `margin-left: ${sidebarCollapsed() ? '68px' : '280px'}; transition: margin-left 0.3s ease-in-out;`}>
+        <AppHeader />
+
+        <main className="app-main">
+          <Router base={import.meta.env.BASE_URL}>
+            <Route path="/" component={HomePage} default={true} label="Home" />
+            <Route path="/bootstrap" component={BootstrapTestPage} label="Bootstrap" />
+            <Route path="/di" component={DependencyInjectionTestPage} label="Dependency Injection" />
+            <Route path="/reactivity" component={ReactivityTestPage} label="Reactivity Tests" />
+            <Route path="/jsx" component={JsxTestPage} label="JSX Tests" />
+            <Route path="/control-flow" component={ControlFlowTestPage} label="Control Flow" />
+            <Route path="/resources" component={ResourceTestPage} label="Resources" />
+            <Route path="/portal" component={PortalTestPage} label="Portals" />
+            <Route path="/drag-drop" component={DragDropTestPage} label="Drag & Drop" />
+            <Route path="/error-boundary" component={ErrorBoundaryTestPage} label="Error Boundaries" />
+            <Route path="/error-boundary-mega" component={ErrorBoundaryMegaPage} label="Error Boundaries MEGA" />
+            <Route path="/context" component={ContextTestPage} label="Context API" />
+            <Route path="/forms"                  component={FormsTestPage}       label="Forms" />
+            <Route path="/forms-select-controls"   component={SelectControlsPage}  label="Forms — Select Controls" />
+            <Route path="/forms-dependent"         component={DependentFieldsPage} label="Forms — Dependent Fields" />
+            <Route path="/forms-edit"              component={EditFormPage}         label="Forms — Edit Form" />
+            <Route path="/forms-wizard"            component={WizardPage}           label="Forms — Wizard" />
+            <Route path="/forms-dynamic"           component={DynamicFieldsPage}   label="Forms — Dynamic Fields" />
+            <Route path="/forms-cross-validation"  component={CrossValidationPage} label="Forms — Cross Validation" />
+            <Route path="/http" component={HttpTestPage} label="HTTP Client" />
+            <Route path="/routing" component={RoutingTestPage} label="Router" />
+            <Route path="/ssr" component={SSRTestPage} label="SSR" />
+            <Route path="/svg-canvas" component={SvgCanvasPage} label="SVG Canvas" />
+            <Route path="/about" component={AboutPage} label="About" />
+          </Router>
+        </main>
+
+        <AppFooter />
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/src/main.ts

@@ -0,0 +1,57 @@
+/// <reference types="vite/client" />
+
+/**
+ * Entry point - MAIN PSR APP
+ */
+import { pulse, ServiceManager } from '@synetics/synetics.dev';
+import App from './main.syn';
+import './styles.css';
+
+// Apply persisted theme before paint (html has data-theme="dark" as default)
+const _saved = (() => {
+  try {
+    return localStorage.getItem('__pulsar_theme__');
+  } catch {
+    return null;
+  }
+})();
+if (_saved && _saved !== document.documentElement.getAttribute('data-theme')) {
+  document.documentElement.setAttribute('data-theme', _saved);
+}
+
+// Define a simple ConfigService for demo purposes
+class ConfigService {
+  theme = 'dark';
+  apiUrl = 'https://api.example.com';
+}
+
+// Setup ServiceManager
+const services = new ServiceManager();
+
+services.registerClass('config', ConfigService, {
+  lifetime: 'singleton',
+});
+
+console.log('[App] ServiceManager configured with ConfigService');
+
+// Mount the REAL APP from main.syn
+pulse(App, {
+  root: '#app',
+  services, // Pass ServiceManager to pulse
+  onMount: (element: HTMLElement) => {
+    console.log('[App] Main PSR App Mounted!', element);
+  },
+  onError: (error: Error) => {
+    console.error('[App] PSR App Error:', error);
+    // Show the error in the DOM for debugging
+    const errorDiv = document.createElement('div');
+    errorDiv.style.cssText =
+      'background: #dc2626; color: white; padding: 20px; font-family: monospace;';
+    errorDiv.innerHTML = `
+      <h2>🚨 PSR APP ERROR</h2>
+      <pre>${error.message}</pre>
+      <pre>${error.stack}</pre>
+    `;
+    document.body.appendChild(errorDiv);
+  },
+});

package/src/showcase/__tests__/e2e/context-structure.spec.ts

@@ -0,0 +1,46 @@
+import { test } from '@playwright/test';
+
+test('Debug context structure', async ({ page }) => {
+  page.on('console', (msg) => {
+    console.log(`[BROWSER ${msg.type()}]:`, msg.text());
+  });
+
+  await page.goto('http://localhost:3004/context');
+  await page.waitForTimeout(2000);
+
+  // Check DOM structure
+  const structure = await page.evaluate(() => {
+    const walkNodes = (node, depth = 0) => {
+      const indent = '  '.repeat(depth);
+      let result = `${indent}${node.nodeName}`;
+      if (node.id) result += `#${node.id}`;
+      if (node.className) result += `.${node.className}`;
+      if (node.textContent && node.textContent.trim() && node.children.length === 0) {
+        result += `: "${node.textContent.trim().slice(0, 50)}"`;
+      }
+      result += '\\n';
+
+      for (const child of node.children) {
+        result += walkNodes(child, depth + 1);
+      }
+      return result;
+    };
+
+    const contextSection =
+      document.body.querySelector('[data-testid], section') || document.body.firstElementChild;
+    return walkNodes(contextSection);
+  });
+
+  console.log('[DOM STRUCTURE]:\\n', structure);
+
+  // Check if providers are in DOM
+  const providerCheck = await page.evaluate(() => {
+    return {
+      hasThemeProvider: document.body.textContent.includes('ThemeProvider'),
+      hasUserProvider: document.body.textContent.includes('UserProvider'),
+      contextElements: document.querySelectorAll('[data-context]').length,
+    };
+  });
+
+  console.log('[PROVIDER CHECK]:', providerCheck);
+});