@synetics/ui 0.7.0-alpha

package/src/components/organisms/table/table.type.ts

@@ -0,0 +1,17 @@
+/**
+ * Table component type definition
+ */
+
+import type { IComponentConfig } from '../../utils/component-config-builder/component-config.type';
+import type { IComponentStyling } from '../../utils/component-styling-builder/component-styling.type';
+
+export interface ITableProps {
+  config?: IComponentConfig;
+  styling?: IComponentStyling;
+  striped?: boolean;
+  hoverable?: boolean;
+  responsive?: boolean;
+  children: any;
+  class?: string;
+  [key: string]: unknown;
+}

package/src/components/organisms/toast/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Toast component - Index
+ */
+
+export { ToastContainer, toastQueue } from './toast-container.syn';
+export type { IToastContainerProps } from './toast-container.type';
+export type { ToastOptions } from './toast-options.type';
+export { Toast } from './toast.syn';
+export type { IToastProps } from './toast.type';
+export { useToast } from './use-toast';

package/src/components/organisms/toast/toast-container.syn

@@ -0,0 +1,108 @@
+/**
+ * ToastContainer component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IToastContainerProps } from './toast-container.type';
+import { Toast } from './toast';
+import type { IToastProps } from './toast.type';
+
+// Singleton queue manager
+class ToastQueue {
+  private toasts: Array<IToastProps> = [];
+  private maxToasts: number = 5;
+  private containerElement: HTMLElement | null = null;
+
+  setContainer(element: HTMLElement | null) {
+    this.containerElement = element;
+  }
+
+  setMaxToasts(max: number) {
+    this.maxToasts = max;
+  }
+
+  add(toast: IToastProps) {
+    // Remove oldest toast if at max capacity
+    if (this.toasts.length >= this.maxToasts) {
+      this.toasts.shift();
+    }
+
+    this.toasts.push(toast);
+    this.render();
+  }
+
+  remove(id: string) {
+    this.toasts = this.toasts.filter((t) => t.id !== id);
+    this.render();
+  }
+
+  clear() {
+    this.toasts = [];
+    this.render();
+  }
+
+  private render() {
+    if (!this.containerElement) return;
+
+    // Clear container
+    this.containerElement.innerHTML = '';
+
+    // Render toasts
+    this.toasts.forEach((toast) => {
+      const toastElement = (
+        <Toast
+          {...toast}
+          onClose={(id) => {
+            this.remove(id);
+            toast.onClose?.(id);
+          }}
+        />
+      );
+      this.containerElement!.appendChild(toastElement);
+    });
+  }
+}
+
+// Singleton instance
+const toastQueue = new ToastQueue();
+
+/**
+ * ToastContainer component
+ * Manages and displays toast notifications
+ */
+export const ToastContainer = ({
+  position = 'top-right',
+  maxToasts = 5,
+  className,
+  ...rest
+}: IToastContainerProps): HTMLElement => {
+  let containerElement: HTMLElement | null = null;
+
+  const positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4',
+  };
+
+  // Initialize queue with container ref
+  const initQueue = (el: HTMLElement | null) => {
+    containerElement = el;
+    toastQueue.setContainer(el);
+    toastQueue.setMaxToasts(maxToasts);
+  };
+
+  return (
+    <div
+      ref={initQueue}
+      className={cn('fixed z-50 flex flex-col gap-2', positionClasses[position], className)}
+      {...rest}
+    />
+  );
+};
+
+// Export singleton queue manager
+export { toastQueue };

package/src/components/organisms/toast/toast-container.type.ts

@@ -0,0 +1,11 @@
+/**
+ * ToastContainer component props interface
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+import type { ToastPosition } from '../../enums/toast-position.type';
+
+export interface IToastContainerProps extends Pulsar.HtmlExtends<'div'> {
+  readonly position?: ToastPosition;
+  readonly maxToasts?: number;
+}

package/src/components/organisms/toast/toast-options.type.ts

@@ -0,0 +1,11 @@
+/**
+ * Toast options interface
+ */
+
+import type { AlertVariant } from '../../enums/alert-variant.type';
+
+export interface ToastOptions {
+  readonly message: string;
+  readonly variant?: AlertVariant;
+  readonly duration?: number;
+}

package/src/components/organisms/toast/toast.syn

@@ -0,0 +1,82 @@
+/**
+ * Toast component
+ * Framework: Pulsar
+ */
+
+import { cn } from '@synetics/design-tokens';
+import type { IToastProps } from './toast.type';
+
+/**
+ * Toast component
+ * Individual notification message
+ */
+export const Toast = ({
+  id,
+  message,
+  variant = 'info',
+  duration = 5000,
+  onClose,
+  className,
+  ...rest
+}: IToastProps): HTMLElement => {
+  let toastElement: HTMLElement | null = null;
+  let timeoutId: number | null = null;
+
+  const variantClasses = {
+    success: 'bg-green-600 text-white border-l-4 border-green-800',
+    warning: 'bg-yellow-600 text-white border-l-4 border-yellow-800',
+    error: 'bg-red-600 text-white border-l-4 border-red-800',
+    info: 'bg-blue-600 text-white border-l-4 border-blue-800',
+  };
+
+  const handleClose = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (toastElement) {
+      toastElement.classList.add('opacity-0', 'translate-y-2', 'scale-95');
+      setTimeout(() => {
+        onClose?.(id);
+      }, 200);
+    }
+  };
+
+  // Auto-dismiss after duration
+  if (duration > 0) {
+    timeoutId = setTimeout(() => {
+      handleClose();
+    }, duration) as unknown as number;
+  }
+
+  return (
+    <div
+      ref={(el: HTMLElement | null) => (toastElement = el)}
+      className={cn(
+        'flex items-center justify-between gap-3 px-4 py-3 rounded-lg shadow-lg',
+        'min-w-[300px] max-w-md',
+        'transition-all duration-200',
+        variantClasses[variant],
+        className
+      )}
+      role="alert"
+      {...rest}
+    >
+      <span className="text-sm font-medium">{message}</span>
+      <button
+        type="button"
+        className="flex-shrink-0 text-white hover:opacity-70 transition-opacity"
+        onClick={handleClose}
+        aria-label="Close"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};

package/src/components/organisms/toast/toast.type.ts

@@ -0,0 +1,14 @@
+/**
+ * Toast component props interface
+ */
+
+import type { Pulsar } from '@synetics/synetics.dev';
+import type { AlertVariant } from '../../enums/alert-variant.type';
+
+export interface IToastProps extends Pulsar.HtmlExtends<'div'> {
+  readonly id: string;
+  readonly message: string;
+  readonly variant?: AlertVariant;
+  readonly duration?: number;
+  readonly onClose?: (id: string) => void;
+}

package/src/components/organisms/toast/use-toast.ts

@@ -0,0 +1,62 @@
+/**
+ * useToast hook
+ * Framework: Pulsar
+ */
+
+import { toastQueue } from './toast-container';
+import type { ToastOptions } from './toast-options.type';
+
+let toastIdCounter = 0;
+
+/**
+ * useToast hook
+ * Provides methods to show and dismiss toast notifications
+ */
+export const useToast = () => {
+  const generateId = () => `toast-${++toastIdCounter}`;
+
+  const toast = (options: ToastOptions) => {
+    const id = generateId();
+    toastQueue.add({
+      id,
+      message: options.message,
+      variant: options.variant || 'info',
+      duration: options.duration !== undefined ? options.duration : 5000,
+    });
+    return id;
+  };
+
+  const success = (message: string, duration?: number) => {
+    return toast({ message, variant: 'success', duration });
+  };
+
+  const warning = (message: string, duration?: number) => {
+    return toast({ message, variant: 'warning', duration });
+  };
+
+  const error = (message: string, duration?: number) => {
+    return toast({ message, variant: 'error', duration });
+  };
+
+  const info = (message: string, duration?: number) => {
+    return toast({ message, variant: 'info', duration });
+  };
+
+  const dismiss = (id: string) => {
+    toastQueue.remove(id);
+  };
+
+  const dismissAll = () => {
+    toastQueue.clear();
+  };
+
+  return {
+    toast,
+    success,
+    warning,
+    error,
+    info,
+    dismiss,
+    dismissAll,
+  };
+};

package/src/components/sidebar-nav.syn

@@ -0,0 +1,107 @@
+/**
+ * Sidebar Navigation Component
+ * Collapsible left panel with demo links
+ */
+
+import { createSignal, ForRegistry as For } from '@synetics/synetics.dev';
+
+interface INavItem {
+  id: number;
+  path: string;
+  label: string;
+  emoji: string;
+  color: string;
+}
+
+interface ISidebarNavProps {
+  onNavigate: (path: string) => void;
+  onToggle?: (isCollapsed: boolean) => void;
+}
+
+export const SidebarNav = ({ onNavigate, onToggle }: ISidebarNavProps) => {
+  const [isCollapsed, setIsCollapsed] = createSignal(false);
+
+  const navItems: INavItem[] = [
+    { id: 0,  path: '/',               label: 'Home',                emoji: '🏠', color: '#3b82f6' },
+    { id: 1,  path: '/bootstrap',      label: 'Bootstrap',           emoji: '⚡', color: '#eab308' },
+    { id: 2,  path: '/di',             label: 'Dependency Injection', emoji: '💉', color: '#ec4899' },
+    { id: 3,  path: '/reactivity',     label: 'Reactivity',          emoji: '🧪', color: '#10b981' },
+    { id: 4,  path: '/jsx',            label: 'JSX',                 emoji: '🎨', color: '#8b5cf6' },
+    { id: 5,  path: '/control-flow',   label: 'Control Flow',        emoji: '🎯', color: '#f59e0b' },
+    { id: 6,  path: '/resources',      label: 'Resources',           emoji: '🌊', color: '#06b6d4' },
+    { id: 7,  path: '/portal',         label: 'Portals',             emoji: '🌀', color: '#06b6d4' },
+    { id: 8,  path: '/drag-drop',      label: 'Drag & Drop',         emoji: '🎯', color: '#f59e0b' },
+    { id: 9,  path: '/error-boundary', label: 'Error Boundaries',    emoji: '🛡️', color: '#ef4444' },
+    { id: 16, path: '/error-boundary-mega', label: 'Error Boundaries MEGA', emoji: '💥', color: '#dc2626' },
+    { id: 10, path: '/context',        label: 'Context API',         emoji: '🔌', color: '#8b5cf6' },
+    { id: 11,  path: '/forms',                  label: 'Forms',                    emoji: '📋', color: '#6366f1' },
+    { id: 18,  path: '/forms-select-controls',  label: 'Forms — Controls',         emoji: '☑️',  color: '#818cf8' },
+    { id: 19,  path: '/forms-dependent',        label: 'Forms — Dependent',        emoji: '🔗',  color: '#34d399' },
+    { id: 20,  path: '/forms-edit',             label: 'Forms — Edit',             emoji: '✏️',  color: '#fbbf24' },
+    { id: 21,  path: '/forms-wizard',           label: 'Forms — Wizard',           emoji: '🧙',  color: '#a78bfa' },
+    { id: 22,  path: '/forms-dynamic',          label: 'Forms — Dynamic',          emoji: '➕',  color: '#fb923c' },
+    { id: 23,  path: '/forms-cross-validation', label: 'Forms — Cross Validation', emoji: '🔐',  color: '#f87171' },
+    { id: 12, path: '/http',           label: 'HTTP Client',         emoji: '🌐', color: '#0ea5e9' },
+    { id: 13, path: '/routing',        label: 'Router',              emoji: '🧭', color: '#14b8a6' },
+    { id: 14, path: '/ssr',            label: 'SSR',                 emoji: '🖥️', color: '#a855f7' },
+    { id: 15, path: '/about',          label: 'About',               emoji: 'ℹ️', color: '#64748b' },
+    { id: 17, path: '/svg-canvas',     label: 'SVG Canvas',          emoji: '✏️', color: '#22d3ee' },
+  ];
+
+  const _lsPath = (() => { try { return localStorage.getItem('__pulsar_path__'); } catch { return null; } })();
+  const _rawPath = window.location.pathname;
+  const seedId =
+    navItems.find(i => i.path === _lsPath)?.id ??
+    navItems.find(i => i.path !== '/' && _rawPath.endsWith(i.path))?.id ??
+    0;
+  const [selectedId, setSelectedId] = createSignal<number>(seedId);
+
+  const handleNavClick = (item: INavItem) => {
+    setSelectedId(item.id);
+    onNavigate(item.path);
+  };
+
+  const toggleSidebar = () => {
+    const next = !isCollapsed();
+    setIsCollapsed(next);
+    if (onToggle) onToggle(next);
+  };
+
+  return (
+    <nav
+      className="sidebar"
+      style={() => `position: fixed; left: 0; top: 0; height: 100vh; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; width: ${isCollapsed() ? '68px' : '280px'}; transition: width 0.3s ease-in-out; background: var(--color-surface); border-right: 1px solid var(--color-border);`}>
+      <div className="sidebar__header">
+        <h2
+          className="sidebar__title"
+          style={() => `opacity: ${isCollapsed() ? '0' : '1'}; max-width: ${isCollapsed() ? '0' : '180px'};`}>
+          Pulsar Demos
+        </h2>
+        <button className="sidebar__toggle" onClick={toggleSidebar} title="Toggle sidebar">
+          {() => isCollapsed() ? '▶' : '◀'}
+        </button>
+      </div>
+
+      <div className="sidebar__nav">
+        <For each={navItems}>
+          {(item) => {
+            const isActive = () => item.id === selectedId();
+            return (
+              <button
+                onClick={() => handleNavClick(item)}
+                className="nav-item"
+                style={() => `background: ${isActive() ? 'var(--color-surface-hover)' : 'transparent'}; border-color: ${isActive() ? item.color : 'transparent'}; --nav-accent: ${item.color};`}>
+                <span className="nav-item__emoji">{item.emoji}</span>
+                <span
+                  className="nav-item__label"
+                  style={() => `color: ${isActive() ? item.color : 'var(--color-text-muted)'}; font-weight: ${isActive() ? '600' : '400'}; opacity: ${isCollapsed() ? '0' : '1'}; max-width: ${isCollapsed() ? '0' : '180px'}; overflow: hidden; white-space: nowrap; display: inline-block; transition: opacity 0.2s, max-width 0.3s;`}>
+                  {item.label}
+                </span>
+              </button>
+            );
+          }}
+        </For>
+      </div>
+    </nav>
+  );
+};

package/src/components/utils/component-config-builder/component-config-builder.ts

@@ -0,0 +1,49 @@
+/**
+ * Component configuration builder
+ * Prototype-based builder for creating component configurations
+ */
+
+import { ComponentColor } from '@synetics/design-tokens'
+import { type IComponentConfigBuilder } from './component-config-builder.type'
+import { active } from './prototype/active'
+import { border } from './prototype/border'
+import { build } from './prototype/build'
+import { className } from './prototype/class-name'
+import { color } from './prototype/color'
+import { disabled } from './prototype/disabled'
+import { focus } from './prototype/focus'
+import { fullWidth } from './prototype/full-width'
+import { hover } from './prototype/hover'
+import { loading } from './prototype/loading'
+import { rounded } from './prototype/rounded'
+import { shadow } from './prototype/shadow'
+import { size } from './prototype/size'
+import { transition } from './prototype/transition'
+import { transitionDuration } from './prototype/transition-duration'
+import { variant } from './prototype/variant'
+
+export const ComponentConfigBuilder = function (
+  this: IComponentConfigBuilder,
+  color: ComponentColor
+) {
+  this.config = { color: color }
+} as unknown as IComponentConfigBuilder
+
+Object.assign(ComponentConfigBuilder.prototype, {
+  variant,
+  color,
+  size,
+  rounded,
+  border,
+  shadow,
+  disabled,
+  loading,
+  fullWidth,
+  transition,
+  transitionDuration,
+  hover,
+  focus,
+  active,
+  className,
+  build
+})

package/src/components/utils/component-config-builder/component-config-builder.type.ts

@@ -0,0 +1,27 @@
+/**
+ * Component configuration builder interface
+ */
+
+import { type ComponentColor, type ComponentRoundedSize, type ComponentShadowSize, type ComponentSize, type ComponentVariant, type TransitionDuration } from '@synetics/design-tokens'
+import { type IComponentConfig } from './component-config.type'
+
+export interface IComponentConfigBuilder {
+  new (color: ComponentColor): IComponentConfigBuilder
+  config: IComponentConfig
+  variant: (variant: ComponentVariant) => IComponentConfigBuilder
+  color: (color?: ComponentColor) => IComponentConfigBuilder
+  size: (size?: ComponentSize) => IComponentConfigBuilder
+  rounded: (rounded?: ComponentRoundedSize) => IComponentConfigBuilder
+  border: (border?: boolean) => IComponentConfigBuilder
+  shadow: (shadow?: ComponentShadowSize) => IComponentConfigBuilder
+  disabled: (disabled?: boolean) => IComponentConfigBuilder
+  loading: (loading?: boolean) => IComponentConfigBuilder
+  fullWidth: (fullWidth?: boolean) => IComponentConfigBuilder
+  transition: (transition?: boolean) => IComponentConfigBuilder
+  transitionDuration: (transitionDuration?: TransitionDuration) => IComponentConfigBuilder
+  hover: (hover?: boolean) => IComponentConfigBuilder
+  focus: (focus?: boolean) => IComponentConfigBuilder
+  active: (active?: boolean) => IComponentConfigBuilder
+  className: (className?: string) => IComponentConfigBuilder
+  build: () => IComponentConfig
+}

package/src/components/utils/component-config-builder/component-config.type.ts

@@ -0,0 +1,36 @@
+/**
+ * Component configuration interface
+ */
+
+import { type ComponentColor, type ComponentRoundedSize, type ComponentShadowSize, type ComponentSize, type ComponentVariant, type TransitionDuration } from '@synetics/design-tokens'
+
+export interface IComponentConfig {
+  // Visual style
+  readonly color?: ComponentColor
+  readonly variant?: ComponentVariant
+  readonly size?: ComponentSize
+  
+  // Border
+  readonly rounded?: ComponentRoundedSize
+  readonly border?: boolean
+  
+  // Shadow
+  readonly shadow?: ComponentShadowSize
+  
+  // States
+  readonly disabled?: boolean
+  readonly loading?: boolean
+  readonly fullWidth?: boolean
+  
+  // Transitions
+  readonly transition?: boolean
+  readonly transitionDuration?: TransitionDuration
+  
+  // Interactive states
+  readonly hover?: boolean
+  readonly focus?: boolean
+  readonly active?: boolean
+  
+  // Additional styling
+  readonly className?: string
+}

package/src/components/utils/component-config-builder/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Component configuration builder exports
+ */
+
+export { ComponentConfigBuilder } from './component-config-builder';
+export type { IComponentConfigBuilder } from './component-config-builder.type';
+export type { IComponentConfig } from './component-config.type';

package/src/components/utils/component-config-builder/prototype/active.ts

@@ -0,0 +1,10 @@
+/**
+ * Active prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const active = function (this: IComponentConfigBuilder, activeValue?: boolean): IComponentConfigBuilder {
+  this.config = { ...this.config, active: activeValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/border.ts

@@ -0,0 +1,10 @@
+/**
+ * Border prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const border = function (this: IComponentConfigBuilder, borderValue?: boolean): IComponentConfigBuilder {
+  this.config = { ...this.config, border: borderValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/build.ts

@@ -0,0 +1,10 @@
+/**
+ * Build prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+import { type IComponentConfig } from '../component-config.type'
+
+export const build = function (this: IComponentConfigBuilder): IComponentConfig {
+  return { ...this.config }
+}

package/src/components/utils/component-config-builder/prototype/class-name.ts

@@ -0,0 +1,10 @@
+/**
+ * ClassName prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const className = function (this: IComponentConfigBuilder, classNameValue?: string): IComponentConfigBuilder {
+  this.config = { ...this.config, className: classNameValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/color.ts

@@ -0,0 +1,11 @@
+/**
+ * Color prototype method for ComponentConfigBuilder
+ */
+
+import { type ComponentColor } from '@synetics/design-tokens'
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const color = function (this: IComponentConfigBuilder, colorValue?: ComponentColor): IComponentConfigBuilder {
+  this.config = { ...this.config, color: colorValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/disabled.ts

@@ -0,0 +1,10 @@
+/**
+ * Disabled prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const disabled = function (this: IComponentConfigBuilder, disabledValue?: boolean): IComponentConfigBuilder {
+  this.config = { ...this.config, disabled: disabledValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/focus.ts

@@ -0,0 +1,10 @@
+/**
+ * Focus prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const focus = function (this: IComponentConfigBuilder, focusValue?: boolean): IComponentConfigBuilder {
+  this.config = { ...this.config, focus: focusValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/full-width.ts

@@ -0,0 +1,10 @@
+/**
+ * FullWidth prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const fullWidth = function (this: IComponentConfigBuilder, fullWidthValue?: boolean): IComponentConfigBuilder {
+  this.config = { ...this.config, fullWidth: fullWidthValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/hover.ts

@@ -0,0 +1,10 @@
+/**
+ * Hover prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const hover = function (this: IComponentConfigBuilder, hoverValue?: boolean): IComponentConfigBuilder {
+  this.config = { ...this.config, hover: hoverValue }
+  return this
+}

package/src/components/utils/component-config-builder/prototype/loading.ts

@@ -0,0 +1,10 @@
+/**
+ * Loading prototype method for ComponentConfigBuilder
+ */
+
+import { type IComponentConfigBuilder } from '../component-config-builder.type'
+
+export const loading = function (this: IComponentConfigBuilder, loadingValue?: boolean): IComponentConfigBuilder {
+  this.config = { ...this.config, loading: loadingValue }
+  return this
+}