Synapse UI Framework - Component Showcase

🎯 Overview

Synapse UI is a revolutionary framework-agnostic UI library built on biological principles. Components are modeled as neurons that communicate through signals, creating a self-sufficient, neural-inspired architecture.

🔥 Framework Agnostic

No React, Vue, or Angular required. Pure TypeScript implementation.

🧬 Biologically Inspired

Components map to neurons with dendrites, soma, and axons.

⚡ Self-Sufficient

Components manage lifecycle, state, events, and rendering.

🔒 Type-Safe

Full TypeScript support with strict type checking.

🎨 Button Component

Neural-inspired button with press states and signal emission. Extends SensoryNeuron to capture user interactions.

Variants

Sizes

Code Example

import { Button } from '@synapse-framework/core/ui';

const submitButton = new Button({
  id: 'submit-btn',
  type: 'reflex',
  threshold: 0.5,
  props: {
    label: 'Submit',
    variant: 'primary',
    size: 'medium',
    onClick: () => console.log('Neural signal received!'),
  },
  initialState: {
    pressed: false,
    hovered: false,
    disabled: false,
  },
});

await submitButton.activate();
const renderSignal = submitButton.render();
      

📝 Input Component

Text input with focus tracking and validation. Captures user input and emits neural signals.

Email Address

Password

With Error Invalid email format

Code Example

import { Input } from '@synapse-framework/core/ui';

const emailInput = new Input({
  id: 'email-input',
  type: 'reflex',
  threshold: 0.3,
  props: {
    type: 'email',
    placeholder: 'Enter your email',
    value: '',
    onChange: (value) => console.log('Input:', value),
    label: 'Email Address',
    error: null,
  },
  initialState: {
    focused: false,
    value: '',
    hasError: false,
  },
});
      

🔽 Select Component

Dropdown selection with keyboard navigation. Handles option selection through neural pathways.

Country

Code Example

import { Select } from '@synapse-framework/core/ui';

const countrySelect = new Select({
  id: 'country-select',
  type: 'reflex',
  threshold: 0.5,
  props: {
    options: [
      { value: 'us', label: 'United States' },
      { value: 'uk', label: 'United Kingdom' },
      { value: 'ca', label: 'Canada' },
    ],
    value: 'us',
    onChange: (value) => console.log('Selected:', value),
    label: 'Country',
  },
  initialState: {
    open: false,
    focused: false,
    selectedValue: 'us',
  },
});
      

📋 Form Component

Container component with validation and submission. Extends InterneuronUI to orchestrate child components.

Code Example

import { Form, Input } from '@synapse-framework/core/ui';

const loginForm = new Form({
  id: 'login-form',
  type: 'cortical',
  threshold: 0.5,
  props: {
    title: 'Login',
    onSubmit: async (data) => {
      console.log('Form data:', data);
      // Submit to API
    },
    validation: {
      email: (value) => {
        if (!value) return 'Email is required';
        if (!value.includes('@')) return 'Invalid email';
        return null;
      },
      password: (value) => {
        if (!value) return 'Password is required';
        if (value.length < 8) return 'Password too short';
        return null;
      },
    },
  },
  initialState: {
    values: {},
    errors: {},
    submitting: false,
  },
});
      

🧬 State Management: VisualAstrocyte

Redux-like state management with time-travel debugging, memoized selectors, and wildcard subscriptions.

import { VisualAstrocyte } from '@synapse-framework/core/ui';

const stateManager = new VisualAstrocyte({
  id: 'app-state',
  maxHistorySize: 50,
  enableTimeTravel: true,
});

await stateManager.activate();

// Set nested state
stateManager.setState('user.profile.name', 'Alice');
stateManager.setState('user.profile.age', 30);

// Get state
const name = stateManager.getState('user.profile.name');

// Subscribe to changes
stateManager.subscribe('user.profile.name', (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

// Wildcard subscriptions
stateManager.subscribe('user.*', (newValue) => {
  console.log('User data changed:', newValue);
});

// Time-travel debugging
stateManager.undo();
stateManager.redo();
stateManager.jumpToState(5);
      

Features

Nested state paths with dot notation
Wildcard subscriptions for reactive updates
Memoized selectors for derived state
Time-travel debugging (undo/redo/jump)
State snapshots for persistence
Middleware support for transformations
59 comprehensive tests

⚡ Rendering Optimization: VisualOligodendrocyte

Component memoization, Virtual DOM diffing, and performance tracking. Inspired by oligodendrocytes that myelinate neurons for faster signal transmission.

import { VisualOligodendrocyte } from '@synapse-framework/core/ui';

const optimizer = new VisualOligodendrocyte({
  id: 'render-optimizer',
  maxCacheSize: 100,
});

await optimizer.activate();

// Memoize component renders
const vdom = button.render().data.vdom;
optimizer.memoizeRender('button-1', vdom, { label: 'Click' });

// Get cached render (if props match)
const cached = optimizer.getCachedRender('button-1', { label: 'Click' });
if (cached) {
  // Use cached version (skips re-render)
}

// Virtual DOM diffing
const oldTree = { tag: 'div', children: ['Old'] };
const newTree = { tag: 'div', children: ['New'] };
const patches = optimizer.diff(oldTree, newTree);

// Track render performance
optimizer.recordRenderTime('my-component', 16);
const metrics = optimizer.getRenderMetrics('my-component');

// Myelination (optimize hot paths)
optimizer.trackComponentUsage('frequently-used-button');
optimizer.myelinateHotPaths(10);
      

Features

Component render memoization with prop comparison
Virtual DOM diffing algorithm for minimal updates
Performance tracking for all components
Lazy loading support
Hot path optimization ("myelination")
15 comprehensive tests

🧠 Neural Terminology

Understanding how biological concepts map to UI components:

Dendrite

Input receiver - receive() method, props

Soma

Processing center - executeProcessing(), state

Axon

Output transmitter - render(), emit()

Synapse

Connection between components

Signal

Information unit - Events, state changes

Threshold

Activation level - Re-render trigger

Refractory Period

Recovery time - Built-in debouncing

Astrocyte

State manager - VisualAstrocyte class

Oligodendrocyte

Optimizer - VisualOligodendrocyte class

Myelination

Speed optimization - Hot path caching

🚀 Getting Started

npm install @synapse-framework/core

import { Button, VisualAstrocyte } from '@synapse-framework/core/ui';

// Create state manager
const state = new VisualAstrocyte({ id: 'app-state' });
await state.activate();
state.setState('clicks', 0);

// Create button
const button = new Button({
  id: 'my-button',
  type: 'reflex',
  threshold: 0.5,
  props: {
    label: 'Click Me',
    variant: 'primary',
    onClick: () => {
      const clicks = state.getState('clicks') || 0;
      state.setState('clicks', clicks + 1);
    },
  },
});

await button.activate();
const renderSignal = button.render();

// Render to DOM (you provide the renderer)
renderToDOM(document.body, renderSignal.data.vdom);
      