@synetics/ui 0.7.0-alpha

package/src/showcase/error-boundary/components/retry-counter-demo.syn

@@ -0,0 +1,97 @@
+/**
+ * P1-07 — Retry Counter Demo
+ * Exercises: resetTryer() across multiple cycles
+ *
+ * Each cycle: arm error → resetTryer → recover → resetTryer.
+ * Component staying functional after N resets is the observable
+ * proof that there is no state leak per reset cycle.
+ */
+
+import { Tryer, resetTryer, createSignal } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+const throwCycleError = (): never => { throw new Error('cycle error'); };
+
+export const RetryCounterDemo = () => {
+  const [shouldThrow, setShouldThrow] = createSignal(false);
+  const [cycleCount, setCycleCount] = createSignal(0);
+  const [log, setLog] = createSignal<Array<{ cycle: number; ok: boolean }>>([]);
+
+  const boundary = (
+    <Tryer
+      fallback={error => (
+        <div style="padding: 10px; background: #450a0a; border-radius: 4px; color: #fca5a5; font-size: 12px; text-align: center;">
+          ⚠ {error.message}
+        </div>
+      )}>
+      {() => shouldThrow() ? throwCycleError() : (
+        <div style="padding: 10px; color: #34d399; font-size: 12px; text-align: center;">
+          ✓ recovered — cycle {cycleCount()}
+        </div>
+      )}
+    </Tryer>
+  );
+
+  const runCycle = () => {
+    const n = cycleCount() + 1;
+    // arm: throw → boundary shows fallback
+    setShouldThrow(true);
+    resetTryer(boundary as HTMLElement);
+    // recover: clear throw → boundary shows content
+    setShouldThrow(false);
+    resetTryer(boundary as HTMLElement);
+    setCycleCount(n);
+    setLog(prev => [...prev, { cycle: n, ok: true }]);
+  };
+
+  const run5 = () => {
+    for (let i = 0; i < 5; i++) runCycle();
+  };
+
+  const handleReset = () => {
+    setShouldThrow(false);
+    setCycleCount(0);
+    setLog([]);
+    resetTryer(boundary as HTMLElement);
+  };
+
+  return (
+    <div style="padding: 20px; background: #1e293b; border-radius: 8px;">
+
+      {/* Boundary display */}
+      <div style="margin-bottom: 20px; padding: 12px; background: #0f172a; border-radius: 6px; border: 1px solid #334155;">
+        {boundary}
+      </div>
+
+      {/* Controls */}
+      <div style="display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;">
+        <DemoButton onClick={runCycle} color="#06b6d4">
+          Run 1 cycle (#{cycleCount() + 1})
+        </DemoButton>
+        <DemoButton onClick={run5} color="#8b5cf6">
+          Run 5 cycles
+        </DemoButton>
+        <DemoButton onClick={handleReset} color="#475569">
+          Reset
+        </DemoButton>
+      </div>
+
+      {/* Cycle log */}
+      {log().length > 0 ? (
+        <div style="padding: 10px 12px; background: #0f172a; border-radius: 4px;">
+          <div style="color: #64748b; font-size: 10px; text-transform: uppercase; margin-bottom: 8px;">
+            Each badge = 1 full arm→throw→recover cycle
+          </div>
+          <div style="display: flex; gap: 6px; flex-wrap: wrap;">
+            {log().map(s => (
+              <span style={`padding: 3px 8px; background: ${s.ok ? '#064e3b' : '#450a0a'}; border-radius: 4px; font-family: monospace; font-size: 11px; color: ${s.ok ? '#34d399' : '#fca5a5'};`}>
+                #{s.cycle} {s.ok ? '✓' : '✗'}
+              </span>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+;

package/src/showcase/error-boundary/components/safe-component.syn

@@ -0,0 +1,12 @@
+/**
+ * Safe Component
+ * Component that renders successfully without errors
+ */
+
+export const SafeComponent = () => {
+  return (
+    <div style="padding: 15px; background: #10b981; color: white; border-radius: 4px;">
+      ✓ Component is safe and renders successfully
+    </div>
+  );
+};

package/src/showcase/error-boundary/components/visual-boundary-wrapper.syn

@@ -0,0 +1,78 @@
+/**
+ * Visual Error Boundary Wrapper Component
+ * Reusable boundary with visual feedback
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+import { Tryer } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface VisualErrorBoundaryProps {
+  title: string
+  borderColor?: string
+  children: JSX.Element | Accessor<JSX.Element>
+}
+
+export const VisualErrorBoundary = ({ children, title, borderColor = "#06b6d4" }: VisualErrorBoundaryProps) => {
+  return (
+    <div style={{
+      background: '#1e293b',
+      padding: '25px',
+      borderRadius: '12px',
+      border: `3px solid ${borderColor}`,
+      position: 'relative',
+      marginBottom: '30px'
+    }}>
+      <h3 style={{
+        color: borderColor,
+        marginBottom: '20px',
+        textAlign: 'center',
+        fontSize: '18px'
+      }}>
+        🛡️ {title}
+      </h3>
+      
+      <div style="background: #0f172a; border-radius: 8px; padding: 20px; min-height: 150px; border: 2px dashed #475569;">
+        <Tryer fallback={(error, reset) => (
+            <div style="background: linear-gradient(135deg, #7f1d1d, #991b1b); border: 3px solid #ef4444; border-radius: 12px; padding: 25px; text-align: center; box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);">
+              <div style="font-size: 48px; margin-bottom: 15px;">⚠️</div>
+              
+              <h2 style="color: #fca5a5; margin-bottom: 15px; font-size: 22px; font-weight: bold;">
+                🚨 {title.toUpperCase()} - ERROR CAUGHT!
+              </h2>
+              
+              <div style="background: #450a0a; border: 2px solid #fca5a5; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
+                <p style="color: #fecaca; font-family: 'Courier New', monospace; font-size: 14px; margin: 0; word-break: break-word;">
+                  💥 "{error.message}"
+                </p>
+              </div>
+              
+              <DemoButton 
+                onClick={reset}
+                color="#10b981"
+                size="lg">
+                🔄 RESET {title.toUpperCase()}
+              </DemoButton>
+            </div>
+          )}>
+          {children}
+        </Tryer>
+      </div>
+      
+      <div style={{
+        position: 'absolute',
+        top: '-12px',
+        right: '20px',
+        background: borderColor,
+        color: 'white',
+        padding: '6px 12px',
+        borderRadius: '16px',
+        fontSize: '11px',
+        fontWeight: 'bold',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.3)'
+      }}>
+        BOUNDARY ACTIVE
+      </div>
+    </div>
+  );
+};

package/src/showcase/error-boundary/error-boundary-mega.syn

@@ -0,0 +1,180 @@
+/**
+ * Error Boundary Mega Demo
+ * Comprehensive demo with maximum visual feedback
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { DemoButton } from '../common/components/demo-button.syn';
+import { VisualErrorBoundary } from './components/visual-boundary-wrapper.syn';
+import { SafeComponent, ErrorComponent } from './components';
+import { ErrorBoundaryControlPanel } from './components/error-boundary-control-panel.syn';
+import { ErrorBoundaryStatusSummary } from './components/error-boundary-status-summary.syn';
+import { ResetFlowDemo } from './components/reset-flow-demo.syn';
+import { CleanupDemo } from './components/cleanup-demo.syn';
+import { RetryCounterDemo } from './components/retry-counter-demo.syn';
+
+export component ErrorBoundaryMegaPage() {
+  // Individual error states for each section
+  const [basicError, setBasicError] = createSignal(false);
+  const [section1Error, setSection1Error] = createSignal(false);
+  const [section2Error, setSection2Error] = createSignal(false);
+  const [section3Error, setSection3Error] = createSignal(false);
+  const [nestedOuterError, setNestedOuterError] = createSignal(false);
+  const [nestedInnerError, setNestedInnerError] = createSignal(false);
+  
+  const [showResetFlowDemo, setShowResetFlowDemo] = createSignal(false);
+  const [showCleanupDemo, setShowCleanupDemo] = createSignal(false);
+  const [showRetryCounterDemo, setShowRetryCounterDemo] = createSignal(false);
+
+  return (
+    <div style="padding: 20px; background: linear-gradient(135deg, #0f172a, #1e293b); min-height: 100vh;">
+      <PageHeader 
+        title="ERROR BOUNDARIES MEGA DEMO"
+        emoji="🛡️"
+        color="#06b6d4"
+        description="Watch how error boundaries protect your app from crashes with MASSIVE VISUAL FEEDBACK!"
+      />
+
+      <div style="max-width: 1000px; margin: 0 auto;">
+        
+        {/* Master Control Panel */}
+        <ErrorBoundaryControlPanel 
+          basicError={basicError}
+          setBasicError={setBasicError}
+          section1Error={section1Error}
+          setSection1Error={setSection1Error}
+          section2Error={section2Error}
+          setSection2Error={setSection2Error}
+          section3Error={section3Error}
+          setSection3Error={setSection3Error}
+          nestedOuterError={nestedOuterError}
+          setNestedOuterError={setNestedOuterError}
+          nestedInnerError={nestedInnerError}
+          setNestedInnerError={setNestedInnerError}
+        />
+
+        {/* Basic Boundary */}
+        <VisualErrorBoundary title="BASIC BOUNDARY" borderColor="#06b6d4">
+          {() => basicError() 
+            ? <ErrorComponent message="Basic boundary error triggered!" title="Basic Component" /> 
+            : <SafeComponent title="Basic Component" />
+          }
+        </VisualErrorBoundary>
+
+        {/* Multiple Independent Boundaries */}
+        <DemoSection 
+          title="🔄 Multiple Independent Boundaries" 
+          description="Each boundary catches errors independently"
+          borderColor="#8b5cf6">
+          
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
+            <VisualErrorBoundary title="SECTION 1" borderColor="#8b5cf6">
+              {() => section1Error() 
+                ? <ErrorComponent message="Section 1 crashed!" title="Section 1" /> 
+                : <SafeComponent title="Section 1" />
+              }
+            </VisualErrorBoundary>
+            
+            <VisualErrorBoundary title="SECTION 2" borderColor="#ec4899">
+              {() => section2Error() 
+                ? <ErrorComponent message="Section 2 crashed!" title="Section 2" /> 
+                : <SafeComponent title="Section 2" />
+              }
+            </VisualErrorBoundary>
+            
+            <VisualErrorBoundary title="SECTION 3" borderColor="#f59e0b">
+              {() => section3Error() 
+                ? <ErrorComponent message="Section 3 crashed!" title="Section 3" /> 
+                : <SafeComponent title="Section 3" />
+              }
+            </VisualErrorBoundary>
+          </div>
+        </DemoSection>
+
+        {/* Nested Boundaries */}
+        <DemoSection 
+          title="🪆 Nested Error Boundaries" 
+          description="Boundaries can be nested for granular error handling"
+          borderColor="#10b981">
+          
+          <VisualErrorBoundary title="OUTER BOUNDARY" borderColor="#10b981">
+            {() => nestedOuterError() 
+              ? <ErrorComponent message="Outer boundary error!" title="Outer Component" /> 
+              : (
+                <div>
+                  <SafeComponent title="Outer Component Safe" />
+                  
+                  <div style="margin-top: 20px;">
+                    <VisualErrorBoundary title="INNER BOUNDARY" borderColor="#ef4444">
+                      {() => nestedInnerError() 
+                        ? <ErrorComponent message="Inner boundary error!" title="Inner Component" /> 
+                        : <SafeComponent title="Inner Component Safe" />
+                      }
+                    </VisualErrorBoundary>
+                  </div>
+                </div>
+              )
+            }
+          </VisualErrorBoundary>
+        </DemoSection>
+        
+        {/* P1-07: External Reset Flow */}
+        <DemoSection
+          title="🔄 External resetTryer() API"
+          description="resetTryer(boundary) — imperatively reset a Tryer from outside the fallback."
+          borderColor="#06b6d4">
+          <div style="margin-bottom: 15px;">
+            <DemoButton
+              onClick={() => setShowResetFlowDemo(!showResetFlowDemo())}
+              color="#06b6d4">
+              {showResetFlowDemo() ? '🔄 Reset' : '▶ Run Demo'}
+            </DemoButton>
+          </div>
+          {showResetFlowDemo() ? <ResetFlowDemo /> : null}
+        </DemoSection>
+
+        {/* P1-07: Cleanup no-op */}
+        <DemoSection
+          title="🧹 cleanupTryer() Lifecycle"
+          description="cleanupTryer() is an intentional no-op — $REGISTRY.wire self-disposes on removal."
+          borderColor="#8b5cf6">
+          <div style="margin-bottom: 15px;">
+            <DemoButton
+              onClick={() => setShowCleanupDemo(!showCleanupDemo())}
+              color="#8b5cf6">
+              {showCleanupDemo() ? '🔄 Reset' : '▶ Run Demo'}
+            </DemoButton>
+          </div>
+          {showCleanupDemo() ? <CleanupDemo /> : null}
+        </DemoSection>
+
+        {/* P1-07: Retry counter with signal leak detection */}
+        <DemoSection
+          title="🔢 Reset Cycles + Signal Stability"
+          description="resetTryer() N times — $REGISTRY.getStats().signals stays stable (no leak)."
+          borderColor="#f59e0b">
+          <div style="margin-bottom: 15px;">
+            <DemoButton
+              onClick={() => setShowRetryCounterDemo(!showRetryCounterDemo())}
+              color="#f59e0b">
+              {showRetryCounterDemo() ? '🔄 Reset' : '▶ Run Demo'}
+            </DemoButton>
+          </div>
+          {showRetryCounterDemo() ? <RetryCounterDemo /> : null}
+        </DemoSection>
+
+        {/* Status Summary */}
+        <ErrorBoundaryStatusSummary 
+          basicError={basicError}
+          section1Error={section1Error}
+          section2Error={section2Error}
+          section3Error={section3Error}
+          nestedOuterError={nestedOuterError}
+          nestedInnerError={nestedInnerError}
+        />
+      </div>
+    </div>
+  );
+}

package/src/showcase/error-boundary/error-boundary-simple.syn

@@ -0,0 +1,88 @@
+/**
+ * Simple Error Boundary Demo
+ * Simplified version with minimal UI
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { DemoButton } from '../common/components/demo-button.syn';
+import { ErrorComponent } from './components';
+
+export component ErrorBoundarySimplePage() {
+  const [throwError, setThrowError] = createSignal(false);
+  const [errorMessage] = createSignal('Critical render error!');
+  
+  const toggleError = () => {
+    setThrowError(!throwError());
+  };
+  
+  return (
+    <div style="padding: 20px;">
+      <h1 style="color: #06b6d4; margin-bottom: 30px; text-align: center; font-size: 36px;">
+        🛡️ Error Boundaries Demo (Simple)
+      </h1>
+      
+      <div style="max-width: 800px; margin: 0 auto;">
+        {/* Control Panel */}
+        <div style="background: #1a1a1a; padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 2px solid #334155;">
+          <h2 style="color: #fbbf24; margin-bottom: 20px; text-align: center; font-size: 24px;">
+            🎮 Control Panel
+          </h2>
+          
+          <div style="text-align: center; margin-bottom: 20px;">
+            <DemoButton 
+              onClick={toggleError}
+              color="#ef4444"
+              size="lg">
+              {throwError() ? '🔧 FIX ERROR' : '💥 TRIGGER ERROR'}
+            </DemoButton>
+          </div>
+          
+          <div style="text-align: center; padding: 15px; background: #0a0a0a; border: 2px solid #334155; border-radius: 8px; font-size: 16px; font-weight: bold;">
+            Current State: <span style={{color: throwError() ? '#ef4444' : '#10b981'}}>
+              {throwError() ? '🔥 ERROR MODE ACTIVE' : '✅ SAFE MODE ACTIVE'}
+            </span>
+          </div>
+        </div>
+        
+        {/* Error Boundary Container */}
+        <div style="background: #1e293b; padding: 30px; border-radius: 12px; border: 3px solid #06b6d4; position: relative;">
+          <h3 style="color: #06b6d4; margin-bottom: 20px; text-align: center; font-size: 20px;">
+            🛡️ ERROR BOUNDARY PROTECTION ZONE
+          </h3>
+          
+          <div style="background: #0f172a; border-radius: 8px; padding: 20px; min-height: 200px; border: 2px dashed #475569;">
+            <boundary fallback={
+              <div style="background: linear-gradient(135deg, #7f1d1d, #991b1b); border: 3px solid #ef4444; border-radius: 12px; padding: 30px; text-align: center;">
+                <div style="font-size: 64px; margin-bottom: 20px;">⚠️</div>
+
+                <h2 style="color: #fca5a5; margin-bottom: 20px; font-size: 28px; font-weight: bold;">
+                  🚨 ERROR CAUGHT BY BOUNDARY!
+                </h2>
+
+                <DemoButton
+                  onClick={() => setThrowError(false)}
+                  color="#10b981"
+                  size="lg"
+                  style="margin-top: 20px;">
+                  🔄 RESET COMPONENT
+                </DemoButton>
+              </div>
+            }>
+              {throwError() ? <ErrorComponent message={() => errorMessage()} /> : (
+                <div style="text-align: center; padding: 40px;">
+                  <div style="font-size: 48px; margin-bottom: 20px;">✨</div>
+                  <h3 style="color: #10b981; margin-bottom: 15px; font-size: 24px;">
+                    Component Rendering Successfully!
+                  </h3>
+                  <p style="color: #94a3b8; font-size: 16px; margin: 0;">
+                    Everything is working perfectly. No errors detected.
+                  </p>
+                </div>
+              )}
+            </boundary>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/showcase/error-boundary/error-boundary-test.syn

@@ -0,0 +1,77 @@
+/**
+ * PHASE 4: Error Boundaries & Error Handling
+ * Refactored with modular components
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { BasicBoundaryDemo } from './components/basic-boundary-demo.syn';
+import { BoundarySection } from './components/boundary-section.syn';
+
+export component ErrorBoundaryTestPage() {
+  // Basic boundary
+  const [throwError, setThrowError] = createSignal(false);
+  const [errorMessage, setErrorMessage] = createSignal('Critical render error!');
+  
+  // Multiple boundaries
+  const [section1Error, setSection1Error] = createSignal(false);
+  const [section2Error, setSection2Error] = createSignal(false);
+  const [section3Error, setSection3Error] = createSignal(false);
+  
+  return (
+    <div>
+      <PageHeader 
+        title="Error Boundaries Demo"
+        emoji="🛡️"
+        color="#06b6d4"
+        description="Demonstrates Tryer/Catcher error boundary pattern"
+      />
+      
+      <div style="background: #0f172a; padding: 15px; border-radius: 4px; margin-bottom: 15px;">
+        <h4 style="color: #fbbf24; margin: 0 0 10px 0;">📋 What to Expect:</h4>
+        <ul style="color: #94a3b8; margin: 0; padding-left: 20px; line-height: 1.6;">
+          <li><strong>Click buttons</strong> → Status indicators show state changes</li>
+          <li><strong>Trigger errors</strong> → Watch Tryer/Catcher components in action</li>
+          <li><strong>Error messages</strong> → Appear in red boxes instead of console crashes</li>
+          <li><strong>Independent sections</strong> → Errors in one don't affect others</li>
+        </ul>
+      </div>
+      
+      <DemoSection 
+        title="1️⃣ Basic Error Boundary - Tryer/Catcher" 
+        description="Tryer/Catcher provides error boundaries to catch and handle component errors gracefully."
+        borderColor="#ef4444">
+        <BasicBoundaryDemo 
+          throwError={throwError}
+          setThrowError={setThrowError}
+          errorMessage={errorMessage}
+          setErrorMessage={setErrorMessage}
+        />
+      </DemoSection>
+      
+      <DemoSection 
+        title="2️⃣ Multiple Independent Boundaries" 
+        description="Each boundary is isolated - errors in one section don't affect others."
+        borderColor="#ef4444">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
+          <BoundarySection 
+            title="Section 1"
+            hasError={section1Error}
+            toggleError={() => setSection1Error(!section1Error())}
+          />
+          <BoundarySection 
+            title="Section 2"
+            hasError={section2Error}
+            toggleError={() => setSection2Error(!section2Error())}
+          />
+          <BoundarySection 
+            title="Section 3"
+            hasError={section3Error}
+            toggleError={() => setSection3Error(!section3Error())}
+          />
+        </div>
+      </DemoSection>
+    </div>
+  );
+}

package/src/showcase/forms/components/async-validation-demo.syn

@@ -0,0 +1,101 @@
+/**
+ * Async Validation Demo
+ * debounce(200) on f.string() — async uniqueness check via form.observe() + setTimeout
+ * Note: async logic lives in the component; formular handles the debounced schema.
+ */
+
+import { createSignal, createEffect, onCleanup } from '@synetics/synetics.dev';
+import { createForm, f } from '@synetics/formular.dev';
+import type { IFormular } from '@synetics/formular.dev';
+import { FormProvider, TextField } from '@/components/formular';
+
+type AsyncFormData = { username: string; email: string };
+
+/**
+ * Simulate an async uniqueness check — resolves after 400 ms.
+ * Type "taken" to trigger the failure path.
+ */
+const checkUsernameUnique = (value: string): Promise<boolean> =>
+  new Promise((resolve) => setTimeout(() => resolve(value !== 'taken'), 400));
+
+export component AsyncValidationDemo() {
+  const [form, setForm] = createSignal<IFormular<AsyncFormData> | null>(null);
+  const [isValidating, setIsValidating] = createSignal(false);
+  const [asyncError, setAsyncError] = createSignal<string | null>(null);
+  const [validationLog, setValidationLog] = createSignal<string[]>([]);
+
+  createForm<AsyncFormData>({
+    schema: f.object({
+      username: f.string().min(3).max(20).nonempty().debounce(200),
+      email: f.string().email().nonempty().debounce(200),
+    }),
+    defaultValues: { username: '', email: '' },
+  }).then(setForm);
+
+  onCleanup(() => form()?.clear());
+
+  const log = (msg: string) => {
+    const ts = new Date().toLocaleTimeString('en-US', { hour12: false });
+    setValidationLog((prev) => [`[${ts}] ${msg}`, ...prev].slice(0, 10));
+  };
+
+  // Wire async uniqueness check once the form is ready
+  createEffect(() => {
+    const f = form();
+    if (!f) return;
+
+    const unsub = f.observe('username', () => {
+      const field = f.getField('username');
+      const val: string = (field?.input as any)?._value?.get() ?? '';
+      if (!val || val.length < 3) {
+        setAsyncError(null);
+        return;
+      }
+      setIsValidating(true);
+      log(`Checking "${val}"…`);
+      let timerId: ReturnType<typeof setTimeout>;
+      checkUsernameUnique(val).then((ok) => {
+        setIsValidating(false);
+        if (ok) {
+          setAsyncError(null);
+          log(`✅ "${val}" is available`);
+        } else {
+          setAsyncError(`"${val}" is already taken`);
+          log(`❌ "${val}" is taken`);
+        }
+      });
+    });
+
+    onCleanup(() => unsub?.());
+  });
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">5️⃣ Async Validation + debounce(200)</h3>
+      <p class="demo-desc">
+        <code>f.string().debounce(200)</code> + <code>form.observe('username', cb)</code> — async uniqueness
+        check fires after schema debounce settles. Type <strong>"taken"</strong> to trigger the failure path.
+      </p>
+
+      {!form() ? (
+        <p class="status-loading">⏳ Initialising form engine…</p>
+      ) : (
+        <FormProvider form={form()!} onSaveCallback={() => {}} onQuitCallback={() => {}}>
+          <TextField name="username" label="Username (try: taken)" showErrors={true} showGuides={true} />
+          {isValidating() ? <p class="status-loading">⏳ Checking availability…</p> : null}
+          {asyncError() ? <p class="field-error">{asyncError()}</p> : null}
+          <TextField name="email" label="Email" showErrors={true} showGuides={true} />
+        </FormProvider>
+      )}
+
+      {validationLog().length > 0 ? (
+        <div class="log-panel">
+          <p class="log-title">Validation log</p>
+          {validationLog().map((entry) => (
+            <p class="log-entry">{entry}</p>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/showcase/forms/components/basic-form-demo.syn

@@ -0,0 +1,42 @@
+/**
+ * Basic Form Demo
+ * createForm + f.object schema + FormProvider + TextField
+ */
+
+import { createSignal, onCleanup } from '@synetics/synetics.dev';
+import { createForm, f } from '@synetics/formular.dev';
+import type { IFormular } from '@synetics/formular.dev';
+import { FormProvider, TextField } from '@/components/formular';
+
+export component BasicFormDemo() {
+  const [form, setForm] = createSignal<IFormular<{ username: string; email: string }> | null>(null);
+
+  createForm({
+    schema: f.object({
+      username: f.string().min(3).max(20).nonempty().debounce(200),
+      email: f.string().email().nonempty().debounce(200),
+    }),
+    defaultValues: { username: '', email: '' },
+  }).then(setForm);
+
+  onCleanup(() => form()?.clear());
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">1️⃣ Integrated TextField</h3>
+      <p class="demo-desc">
+        <code>createForm</code> + <code>f.object</code> + <code>FormProvider</code> + <code>TextField</code>.
+        Binding, validation and error display fully managed by formular.dev.
+      </p>
+
+      {!form() ? (
+        <p class="status-loading">⏳ Initialising form engine…</p>
+      ) : (
+        <FormProvider form={form()!} onSaveCallback={() => {}} onQuitCallback={() => {}}>
+          <TextField name="username" label="Username (3–20 chars)" showErrors={true} showGuides={true} />
+          <TextField name="email" label="Email" showErrors={true} showGuides={true} />
+        </FormProvider>
+      )}
+    </div>
+  );
+}