@synetics/ui 0.7.0-alpha

package/src/showcase/drag-drop/components/sortable-list-demo.syn

@@ -0,0 +1,71 @@
+/**
+ * Sortable List Demo
+ * Drag to reorder list items
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+interface ITask {
+  id: number;
+  text: string;
+}
+
+export component SortableListDemo() {
+  const [tasks, setTasks] = createSignal<ITask[]>([
+    { id: 1, text: 'Design UI mockups' },
+    { id: 2, text: 'Implement components' },
+    { id: 3, text: 'Write unit tests' },
+    { id: 4, text: 'Deploy to production' },
+  ]);
+  
+  const [draggedId, setDraggedId] = createSignal<number | null>(null);
+  
+  const handleDragStart = (id: number) => (e: DragEvent) => {
+    setDraggedId(id);
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+    }
+  };
+  
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move';
+    }
+  };
+  
+  const handleDrop = (targetId: number) => (e: DragEvent) => {
+    e.preventDefault();
+    const sourceId = draggedId();
+    
+    if (sourceId === null || sourceId === targetId) return;
+    
+    const items = [...tasks()];
+    const sourceIndex = items.findIndex(t => t.id === sourceId);
+    const targetIndex = items.findIndex(t => t.id === targetId);
+    
+    const [removed] = items.splice(sourceIndex, 1);
+    items.splice(targetIndex, 0, removed);
+    
+    setTasks(items);
+    setDraggedId(null);
+  };
+  
+  return (
+    <div style="max-width: 400px;">
+      {tasks().map((task) => (
+          <div 
+            draggable="true"
+            onDragStart={handleDragStart(task.id)}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop(task.id)}
+            style={`padding: 15px; margin-bottom: 10px; background: ${draggedId() === task.id ? '#1e293b' : '#0f172a'}; border: 2px solid #10b981; border-radius: 8px; cursor: move; transition: all 0.2s;`}>
+            <div style="display: flex; align-items: center; gap: 10px;">
+              <span style="color: #64748b; font-size: 18px;">⋮⋮</span>
+              <span style="color: #e2e8f0;">{task.text}</span>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}

package/src/showcase/drag-drop/drag-drop-test.syn

@@ -0,0 +1,44 @@
+/**
+ * Drag & Drop Demo Page
+ * Demonstrates native HTML5 drag and drop with Pulsar reactivity
+ */
+
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { SortableListDemo } from './components/sortable-list-demo.syn';
+import { KanbanBoardDemo } from './components/kanban-board-demo.syn';
+import { DragDropZoneDemo } from './components/drag-drop-zone-demo.syn';
+
+export component DragDropTestPage() {
+  return (
+    <div>
+      <PageHeader 
+        title="Drag & Drop"
+        emoji="🎯"
+        color="#f59e0b"
+        description="Native HTML5 drag-drop with reactive state management"
+      />
+      
+      <DemoSection 
+        title="1️⃣ Sortable List" 
+        description="Reorder items with drag and drop"
+        borderColor="#10b981">
+        <SortableListDemo />
+      </DemoSection>
+      
+      <DemoSection 
+        title="2️⃣ Kanban Board" 
+        description="Drag tasks between columns"
+        borderColor="#8b5cf6">
+        <KanbanBoardDemo />
+      </DemoSection>
+      
+      <DemoSection 
+        title="3️⃣ Drop Zone" 
+        description="File upload with drag-drop interface"
+        borderColor="#06b6d4">
+        <DragDropZoneDemo />
+      </DemoSection>
+    </div>
+  );
+}

package/src/showcase/error-boundary/components/basic-boundary-demo.syn

@@ -0,0 +1,54 @@
+/**
+ * Basic Boundary Demo Component
+ * Demonstrates basic error boundary with toggle
+ */
+
+import type { Accessor, Setter } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+import { StatusIndicator } from '../../common/components/status-indicator.syn';
+import { SafeComponent } from './safe-component.syn';
+import { ErrorComponent } from './error-component.syn';
+
+interface BasicBoundaryDemoProps {
+  throwError: Accessor<boolean>
+  setThrowError: Setter<boolean>
+  errorMessage: Accessor<string>
+  setErrorMessage: Setter<string>
+}
+
+export const BasicBoundaryDemo = ({ throwError, setThrowError, errorMessage, setErrorMessage }: BasicBoundaryDemoProps) => {
+  return (
+    <div>
+      <div style="display: flex; gap: 10px; margin-bottom: 15px; align-items: center; flex-wrap: wrap;">
+        <DemoButton 
+          onClick={() => setThrowError(!throwError())}
+          color="#ef4444">
+          {throwError() ? 'Fix Error' : 'Trigger Error'}
+        </DemoButton>
+        
+        <StatusIndicator status={throwError() ? 'error' : 'safe'} />
+        
+        <input
+          type="text"
+          value={errorMessage()}
+          oninput={(e) => setErrorMessage(e.target.value)}
+          placeholder="Custom error message"
+          style="flex: 1; min-width: 200px; padding: 10px; background: #1a1a1a; border: 2px solid #334155; border-radius: 4px; color: white; font-size: 14px;"
+        />
+      </div>
+      
+      <div style="min-height: 80px; border: 2px dashed #334155; border-radius: 4px; padding: 15px;">
+        <boundary fallback={
+          <div style="padding: 15px; background: #7f1d1d; border-left: 4px solid #ef4444; border-radius: 4px;">
+            <p style="color: #fca5a5; margin: 0 0 12px 0; font-weight: bold;">⚠️ Boundary caught a render error.</p>
+            <DemoButton onClick={() => setThrowError(false)} color="#ef4444" size="sm">
+              Reset Boundary
+            </DemoButton>
+          </div>
+        }>
+          {throwError() ? <ErrorComponent message={errorMessage} /> : <SafeComponent />}
+        </boundary>
+      </div>
+    </div>
+  );
+};

package/src/showcase/error-boundary/components/boundary-section.syn

@@ -0,0 +1,47 @@
+/**
+ * Boundary Section Component
+ * Reusable section for independent boundaries demo
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+import { StatusIndicator } from '../../common/components/status-indicator.syn';
+import { SafeComponent } from './safe-component.syn';
+import { ErrorComponent } from './error-component.syn';
+import { ErrorDisplay } from './error-display.syn';
+
+interface BoundarySectionProps {
+  title: string
+  hasError: Accessor<boolean>
+  toggleError: () => void
+}
+
+export const BoundarySection = ({ title, hasError, toggleError }: BoundarySectionProps) => {
+  return (
+    <div style="background: #1a1a1a; padding: 15px; border-radius: 4px;">
+      <h4 style="margin: 0 0 10px 0; color: white; font-size: 16px;">{title}</h4>
+      <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
+        <DemoButton
+          onClick={toggleError}
+          color="#ef4444"
+          size="sm">
+          Toggle Error
+        </DemoButton>
+        <StatusIndicator status={hasError() ? 'error' : 'ok'} />
+      </div>
+      <boundary fallback={
+        <div style="padding: 10px; background: #7f1d1d; border-radius: 4px;">
+          <p style="margin: 0; color: #fca5a5; font-size: 12px;">
+            Render error in {title}
+          </p>
+        </div>
+      }>
+        {hasError() ? <ErrorComponent message={`${title} failed`} /> : (
+          <div style="padding: 10px; background: #10b981; color: white; border-radius: 4px; text-align: center;">
+            ✓ OK
+          </div>
+        )}
+      </boundary>
+    </div>
+  );
+};

package/src/showcase/error-boundary/components/cleanup-demo.syn

@@ -0,0 +1,88 @@
+/**
+ * P1-07 — Cleanup Demo
+ * Exercises: cleanupTryer() — intentional no-op verification
+ *
+ * $REGISTRY.wire self-disposes on element removal (via MutationObserver /
+ * $WATCHER). Tryer calls onCleanup(() => cleanupTryer(container)) internally
+ * but cleanupTryer is an intentional no-op; real cleanup is automatic.
+ *
+ * This demo:
+ *   - Toggles Tryer mount/unmount to observe automatic disposal
+ *   - Calls cleanupTryer() manually to confirm it has no side effects
+ */
+
+import { Tryer, cleanupTryer, createSignal } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+export const CleanupDemo = () => {
+  const [mounted, setMounted] = createSignal(true);
+  const [log, setLog] = createSignal<string[]>([
+    '[init] CleanupDemo mounted — Tryer active',
+  ]);
+
+  const addLog = (msg: string) =>
+    setLog(prev => [...prev.slice(-9), `[${new Date().toLocaleTimeString()}] ${msg}`]);
+
+  const handleToggle = () => {
+    const next = !mounted();
+    setMounted(next);
+    addLog(
+      next
+        ? '[mount] Tryer attached — onCleanup registered internally'
+        : '[unmount] Tryer removed — $REGISTRY.wire auto-disposed'
+    );
+  };
+
+  const handleManualCleanup = () => {
+    const fakeEl = document.createElement('div');
+    cleanupTryer(fakeEl);
+    addLog('cleanupTryer(el) called → intentional no-op (no side effects)');
+  };
+
+  return (
+    <div style="padding: 20px; background: #1e293b; border-radius: 8px;">
+
+      {/* Tryer mount area */}
+      <div style="margin-bottom: 20px; padding: 16px; background: #0f172a; border-radius: 6px; border: 1px solid #334155; min-height: 80px;">
+        {mounted() ? (
+          <Tryer fallback={error => (
+            <div style="color: #fca5a5; font-size: 12px;">⚠ {error.message}</div>
+          )}>
+            {() => (
+              <div style="color: #34d399; font-size: 13px; text-align: center; padding: 10px;">
+                ✓ Tryer mounted — onCleanup(() =&gt; cleanupTryer()) registered internally
+              </div>
+            )}
+          </Tryer>
+        ) : (
+          <div style="color: #64748b; font-size: 12px; text-align: center; padding: 10px;">
+            (Tryer unmounted — $REGISTRY.wire auto-disposed on element removal)
+          </div>
+        )}
+      </div>
+
+      <div style="display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;">
+        {mounted() ? (
+          <DemoButton onClick={handleToggle} color="#ef4444">
+            Unmount Tryer
+          </DemoButton>
+        ) : (
+          <DemoButton onClick={handleToggle} color="#10b981">
+            Mount Tryer
+          </DemoButton>
+        )}
+        <DemoButton onClick={handleManualCleanup} color="#64748b">
+          cleanupTryer() — no-op
+        </DemoButton>
+      </div>
+
+      {/* Event log */}
+      <div style="padding: 10px 12px; background: #0f172a; border-radius: 4px; max-height: 180px; overflow: auto;">
+        <div style="color: #475569; font-size: 10px; text-transform: uppercase; margin-bottom: 6px;">Event log</div>
+        {log().map(line => (
+          <div style="font-family: monospace; font-size: 11px; color: #94a3b8; padding: 1px 0;">{line}</div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/showcase/error-boundary/components/control-button-group.syn

@@ -0,0 +1,48 @@
+/**
+ * Control Button Group Component
+ * Reusable control buttons for error demos
+ */
+
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface ControlButtonGroupProps {
+  label: string
+  isError: boolean
+  onTrigger: () => void
+  color?: string
+}
+
+export const ControlButtonGroup = ({ 
+  label, 
+  isError, 
+  onTrigger, 
+  color = "#8b5cf6" 
+}: ControlButtonGroupProps) => {
+  return (
+    <div style="text-align: center;">
+      <div style="font-size: 14px; color: #9ca3af; margin-bottom: 10px; font-weight: bold;">
+        {label}
+      </div>
+      
+      <DemoButton 
+        onClick={onTrigger}
+        color={isError ? "#ef4444" : color}
+        size="md">
+        {isError ? '🔧 FIX' : '💥 BREAK'}
+      </DemoButton>
+      
+      <div style={{
+        marginTop: '8px',
+        padding: '5px 10px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        fontWeight: 'bold',
+        background: isError ? '#450a0a' : '#064e3b',
+        color: isError ? '#fca5a5' : '#6ee7b7',
+        display: 'inline-block'
+      }}>
+        {isError ? '🔥 ERROR' : '✅ SAFE'}
+      </div>
+    </div>
+  );
+};

package/src/showcase/error-boundary/components/error-boundary-control-panel.syn

@@ -0,0 +1,76 @@
+/**
+ * Error Boundary Master Control Panel Component
+ * Centralized controls for triggering/resetting error boundaries
+ */
+
+import type { Accessor, Setter } from '@synetics/synetics.dev';
+import { ControlButtonGroup } from './control-button-group.syn';
+
+export interface ErrorBoundaryControlPanelProps {
+  basicError: Accessor<boolean>;
+  setBasicError: Setter<boolean>;
+  section1Error: Accessor<boolean>;
+  setSection1Error: Setter<boolean>;
+  section2Error: Accessor<boolean>;
+  setSection2Error: Setter<boolean>;
+  section3Error: Accessor<boolean>;
+  setSection3Error: Setter<boolean>;
+  nestedOuterError: Accessor<boolean>;
+  setNestedOuterError: Setter<boolean>;
+  nestedInnerError: Accessor<boolean>;
+  setNestedInnerError: Setter<boolean>;
+}
+
+export component ErrorBoundaryControlPanel(props: ErrorBoundaryControlPanelProps) {
+  return (
+    <div style="background: linear-gradient(135deg, #1a1a1a, #2d2d2d); padding: 30px; border-radius: 16px; margin-bottom: 40px; border: 3px solid #fbbf24; box-shadow: 0 8px 32px rgba(251, 191, 36, 0.1);">
+      <h2 style="color: #fbbf24; margin-bottom: 25px; text-align: center; font-size: 28px;">
+        🎮 MASTER CONTROL PANEL
+      </h2>
+      
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px;">
+        <ControlButtonGroup 
+          label="BASIC BOUNDARY"
+          isError={props.basicError()}
+          onTrigger={() => props.setBasicError(!props.basicError())}
+          color="#06b6d4"
+        />
+        
+        <ControlButtonGroup 
+          label="SECTION 1"
+          isError={props.section1Error()}
+          onTrigger={() => props.setSection1Error(!props.section1Error())}
+          color="#8b5cf6"
+        />
+        
+        <ControlButtonGroup 
+          label="SECTION 2"
+          isError={props.section2Error()}
+          onTrigger={() => props.setSection2Error(!props.section2Error())}
+          color="#ec4899"
+        />
+        
+        <ControlButtonGroup 
+          label="SECTION 3"
+          isError={props.section3Error()}
+          onTrigger={() => props.setSection3Error(!props.section3Error())}
+          color="#f59e0b"
+        />
+        
+        <ControlButtonGroup 
+          label="NESTED OUTER"
+          isError={props.nestedOuterError()}
+          onTrigger={() => props.setNestedOuterError(!props.nestedOuterError())}
+          color="#10b981"
+        />
+        
+        <ControlButtonGroup 
+          label="NESTED INNER"
+          isError={props.nestedInnerError()}
+          onTrigger={() => props.setNestedInnerError(!props.nestedInnerError())}
+          color="#ef4444"
+        />
+      </div>
+    </div>
+  );
+}

package/src/showcase/error-boundary/components/error-boundary-status-summary.syn

@@ -0,0 +1,46 @@
+/**
+ * Error Boundary Status Summary Component
+ * Displays system-wide error boundary metrics
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+export interface ErrorBoundaryStatusSummaryProps {
+  basicError: Accessor<boolean>;
+  section1Error: Accessor<boolean>;
+  section2Error: Accessor<boolean>;
+  section3Error: Accessor<boolean>;
+  nestedOuterError: Accessor<boolean>;
+  nestedInnerError: Accessor<boolean>;
+}
+
+export component ErrorBoundaryStatusSummary(props: ErrorBoundaryStatusSummaryProps) {
+  const errorCount = () => {
+    return [
+      props.basicError(),
+      props.section1Error(),
+      props.section2Error(),
+      props.section3Error(),
+      props.nestedOuterError(),
+      props.nestedInnerError()
+    ].filter(Boolean).length;
+  };
+  
+  const totalBoundaries = 6;
+  const safeComponents = () => totalBoundaries - errorCount();
+  
+  return (
+    <div style="background: #1a1a1a; padding: 25px; border-radius: 12px; border: 2px solid #10b981; margin-top: 30px;">
+      <h3 style="color: #10b981; margin-bottom: 20px; font-size: 20px; text-align: center;">
+        📊 System Status Summary
+      </h3>
+      
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; color: #9ca3af; font-size: 14px;">
+        <div>✅ Boundaries Active: {totalBoundaries}</div>
+        <div>🔥 Current Errors: {errorCount()}</div>
+        <div>🛡️ Boundaries Catching: {errorCount()}</div>
+        <div>✨ Safe Components: {safeComponents()}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Error Component
+ * Component that throws an error when rendered
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+interface ErrorComponentProps {
+  message: string | Accessor<string>
+}
+
+export const ErrorComponent = ({ message }: ErrorComponentProps) => {
+  const errorMsg = typeof message === 'function' ? message() : message;
+  throw new Error(errorMsg || 'Component rendering failed!');
+};

package/src/showcase/error-boundary/components/error-display.syn

@@ -0,0 +1,27 @@
+/**
+ * Error Display Component
+ * Displays error messages in boundary catcher
+ */
+
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface ErrorDisplayProps {
+  error: Error
+  onReset: () => void
+}
+
+export const ErrorDisplay = ({ error, onReset }: ErrorDisplayProps) => {
+  return (
+    <div style="padding: 20px; background: #7f1d1d; border-left: 4px solid #ef4444; border-radius: 4px;">
+      <h4 style="margin: 0 0 10px 0; color: #fca5a5; font-size: 18px;">
+        ⚠️ Error Caught
+      </h4>
+      <p style="margin: 0 0 15px 0; color: #fecaca; font-family: monospace; font-size: 14px;">
+        {error.message}
+      </p>
+      <DemoButton onClick={onReset} color="#ef4444" size="sm">
+        Reset Boundary
+      </DemoButton>
+    </div>
+  );
+};

package/src/showcase/error-boundary/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Error Boundary Components Index
+ */
+
+export { BasicBoundaryDemo } from './basic-boundary-demo.syn';
+export { BoundarySection } from './boundary-section.syn';
+export { CleanupDemo } from './cleanup-demo.syn';
+export { ControlButtonGroup } from './control-button-group.syn';
+export { ErrorComponent } from './error-component.syn';
+export { ErrorDisplay } from './error-display.syn';
+export { ResetFlowDemo } from './reset-flow-demo.syn';
+export { RetryCounterDemo } from './retry-counter-demo.syn';
+export { SafeComponent } from './safe-component.syn';
+export { VisualErrorBoundary } from './visual-boundary-wrapper.syn';

package/src/showcase/error-boundary/components/reset-flow-demo.syn

@@ -0,0 +1,107 @@
+/**
+ * P1-07 — Reset Flow Demo
+ * Exercises: resetTryer() — imperative external reset
+ *
+ * Demonstrates two reset paths:
+ *   1. Inline `reset` closure passed as 2nd arg to fallback prop
+ *   2. External `resetTryer(boundary)` called from outside the boundary
+ *
+ * The child throws initially. "External reset" fixes shouldThrow then
+ * calls resetTryer(boundary) so the wire re-evaluates safely.
+ * "Throw again" re-arms the error and re-evaluates via resetTryer.
+ */
+
+import {
+  Tryer,
+  resetTryer,
+  createSignal,
+} from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+const throwRenderError = (): never => { throw new Error('Deliberate render error!'); };
+
+export const ResetFlowDemo = () => {
+  const [shouldThrow, setShouldThrow] = createSignal(true);
+  const [resetCount, setResetCount] = createSignal(0);
+  const [resetLog, setResetLog] = createSignal<string[]>([]);
+
+  const addLog = (msg: string) =>
+    setResetLog(prev => [...prev, `reset #${resetCount() + 1}: ${msg}`]);
+
+  // Capture boundary element for external resetTryer() call
+  const boundary = (
+    <Tryer
+      fallback={(error, inlineReset) => (
+        <div style="padding: 16px; background: #450a0a; border: 2px solid #ef4444; border-radius: 8px;">
+          <div style="color: #fca5a5; font-size: 13px; font-weight: 600; margin-bottom: 12px;">
+            ⚠ {error.message}
+          </div>
+          <DemoButton
+            onClick={() => {
+              addLog('inline reset() closure');
+              setResetCount(n => n + 1);
+              setShouldThrow(false);
+              inlineReset();
+            }}
+            color="#10b981"
+            size="sm">
+            ↺ Inline reset() — from fallback arg
+          </DemoButton>
+        </div>
+      )}>
+      {() =>
+        shouldThrow()
+          ? throwRenderError()
+          : (
+            <div style="padding: 16px; background: #064e3b; border: 2px solid #10b981; border-radius: 8px; color: #34d399; text-align: center;">
+              ✅ Recovered — component rendered safely
+            </div>
+          )
+      }
+    </Tryer>
+  );
+
+  const handleExternalReset = () => {
+    addLog('external resetTryer(boundary)');
+    setResetCount(n => n + 1);
+    setShouldThrow(false);
+    resetTryer(boundary as HTMLElement);
+  };
+
+  const handleThrowAgain = () => {
+    setShouldThrow(true);
+    resetTryer(boundary as HTMLElement); // re-evaluate wire → throws
+  };
+
+  return (
+    <div style="padding: 20px; background: #1e293b; border-radius: 8px;">
+
+      {/* Boundary */}
+      <div style="margin-bottom: 20px;">
+        {boundary}
+      </div>
+
+      {/* External controls */}
+      <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;">
+        <DemoButton onClick={handleExternalReset} color="#06b6d4">
+          resetTryer(boundary) — external
+        </DemoButton>
+        <DemoButton onClick={handleThrowAgain} color="#ef4444">
+          Throw again
+        </DemoButton>
+      </div>
+
+      {/* Reset log */}
+      {resetLog().length > 0 ? (
+        <div style="padding: 10px 12px; background: #0f172a; border-radius: 4px;">
+          <div style="color: #475569; font-size: 10px; text-transform: uppercase; margin-bottom: 6px;">Reset history</div>
+          {resetLog().map(entry => (
+            <div style="font-family: monospace; font-size: 11px; color: #94a3b8; padding: 1px 0;">
+              {entry}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+};