@synetics/ui 0.7.0-alpha

package/src/styles/utilities.css

@@ -0,0 +1,115 @@
+/**
+ * Utility Classes
+ *
+ * Common patterns and utilities used across components
+ * for consistent interactions and visual effects.
+ * NOTE: Vanilla CSS only — @apply with dark:/hover:/focus: variants
+ * does not work in CSS files with Tailwind's class-based dark mode.
+ */
+
+/* ==========================================
+ * FOCUS RING STANDARD
+ * ========================================== */
+.focus-ring {
+    transition: box-shadow 0.15s;
+}
+.focus-ring:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary-500), 0 0 0 4px var(--color-background);
+}
+
+.focus-ring-enhanced {
+    transition: box-shadow 0.2s;
+}
+.focus-ring-enhanced:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px var(--color-primary-100), 0 0 0 6px var(--color-background);
+}
+
+/* ==========================================
+ * HOVER EFFECTS
+ * ========================================== */
+.hover-lift {
+    transition: all 0.2s;
+}
+.hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.hover-elevate {
+    transition: box-shadow 0.2s;
+}
+.hover-elevate:hover {
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* ==========================================
+ * ACTIVE/PRESSED EFFECTS
+ * ========================================== */
+.active-scale {
+    transition: transform 0.1s;
+}
+.active-scale:active {
+    transform: scale(0.95);
+}
+
+.active-press {
+    transition: transform 0.1s;
+}
+.active-press:active {
+    transform: scale(0.98);
+}
+
+/* ==========================================
+ * SMOOTH TRANSITIONS
+ * ========================================== */
+.transition-smooth {
+    transition: all 0.3s ease-in-out;
+}
+
+.transition-colors-smooth {
+    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+/* ==========================================
+ * GLASS MORPHISM
+ * ========================================== */
+.glass {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+[data-theme="dark"] .glass {
+    background: rgba(23, 23, 23, 0.8);
+}
+
+.glass-strong {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+[data-theme="dark"] .glass-strong {
+    background: rgba(23, 23, 23, 0.9);
+}
+
+/* ==========================================
+ * SURFACE TREATMENTS
+ * ========================================== */
+.surface-elevated {
+    background: linear-gradient(to bottom right, #ffffff, #f5f5f5);
+}
+[data-theme="dark"] .surface-elevated {
+    background: linear-gradient(to bottom right, #171717, #0a0a0a);
+}
+
+.surface-interactive {
+    transition: all 0.2s;
+    cursor: pointer;
+}
+.surface-interactive:hover {
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    transform: translateY(-2px);
+}

package/src/styles.css

@@ -0,0 +1,23 @@
+/**
+ * Pulsar UI - Legacy Styles File
+ * NOTE: This file is kept for backwards compatibility
+ * Main styles are now in:
+ * - styles/design-system.css (CSS variables)
+ * - styles/motion.css (M3 motion system)
+ * - styles/state-layers.css (interaction feedback)
+ * - styles/touch-targets.css (accessibility)
+ * - styles/utilities.css (common patterns)
+ * - styles/showcase-base.css (base styles)
+ * - showcase-styles.css (showcase-specific)
+ */
+/* Import design system files */
+@import './styles/design-system.css';
+@import './styles/motion.css';
+@import './styles/state-layers.css';
+@import './styles/touch-targets.css';
+@import './styles/utilities.css';
+@import './styles/transitions.css';
+@import './styles/showcase.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/test-keywords.syn

@@ -0,0 +1,15 @@
+/**
+ * Test file for Phase 1 fixes:
+ * - Keyword attributes (component={X})
+ * - JSX comments
+ */
+
+export component KeywordTest() {
+  return (
+    <div>
+      {/* This is a JSX comment - should be skipped */}
+      <Route component={HomePage} default={true} />
+      <Input const={value} />
+    </div>
+  );
+}

package/src/test-loop.syn

@@ -0,0 +1,29 @@
+/**
+ * Test for loop support
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+export component ForLoopTest() {
+  const [items] = createSignal([1, 2, 3, 4, 5]);
+  
+  // Test traditional for loop
+  let sum = 0;
+  for (let i = 0; i < items().length; i++) {
+    sum += items()[i];
+  }
+  
+  // Test while loop
+  let counter = 0;
+  while (counter < 3) {
+    counter++;
+  }
+  
+  return (
+    <div>
+      <h2>Loop Test</h2>
+      <p>Sum: {sum}</p>
+      <p>Counter: {counter}</p>
+    </div>
+  );
+}

package/src/test-minimal.syn

@@ -0,0 +1,9 @@
+/**
+ * Super simple PSR test - minimal complexity
+ */
+
+component TestMin() {
+  return <div>Hello PSR!</div>;
+}
+
+export { TestMin };

package/src/test-object-literal.syn

@@ -0,0 +1,19 @@
+/**
+ * Minimal test case for object literal parsing bug
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+export component MinimalObjectTest() {
+  const [active, setActive] = createSignal(true);
+  
+  return (
+    <div>
+      {/* Test 1: Simple object literal - should work */}
+      <button style={{ padding: '10px' }}>Test 1</button>
+      
+      {/* Test 2: Object with ternary - may hang */}
+      <button style={{ background: active() ? 'red' : 'blue' }}>Test 2</button>
+    </div>
+  );
+}

package/src/test-simple.syn

@@ -0,0 +1,12 @@
+/**
+ * Simple test component - minimal PSR to verify transformation
+ */
+
+export component TestSimple() {
+  return (
+    <div style="padding: 20px; background: #1a1a1a; color: white;">
+      <h1>Test Component Rendered!</h1>
+      <p>If you see this, the transformer is working.</p>
+    </div>
+  );
+}

package/src/types/psr-modules.d.ts

@@ -0,0 +1,6 @@
+/**
+ * TypeScript declarations for .syn files
+ * Wildcard module allows any named exports
+ */
+
+declare module '*.syn';

package/src/types.ts

@@ -0,0 +1,37 @@
+/**
+ * Pulsar UI Showcase - Type Definitions
+ */
+
+export type ComponentCategory = 'atoms' | 'molecules' | 'organisms';
+
+export interface IComponent {
+  readonly id: string;
+  readonly name: string;
+  readonly category: ComponentCategory;
+  readonly description: string;
+}
+
+export interface ISidebarProps {
+  readonly open: boolean;
+  readonly width: number;
+  readonly activeCategory: () => ComponentCategory;
+  readonly activeComponent: () => string;
+  readonly onCategoryChange: (category: ComponentCategory) => void;
+  readonly onComponentChange: (component: string) => void;
+  readonly onResizeStart: () => void;
+}
+
+export interface IHeaderProps {
+  readonly onToggleSidebar: () => void;
+  readonly sidebarOpen: boolean;
+}
+
+export interface IComponentShowcaseProps {
+  readonly category: ComponentCategory;
+  readonly component: string;
+}
+
+export interface ICodeBlockProps {
+  readonly code: string;
+  readonly language?: string;
+}

package/tailwind.config.js

@@ -0,0 +1,354 @@
+/**
+ * Tailwind CSS Configuration
+ * Integrated with Pulsar Design System tokens via CSS variables
+ */
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{ts,tsx,psr}'],
+  darkMode: ['class', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      // Colors using CSS custom properties
+      colors: {
+        primary: {
+          50: 'var(--color-primary-50)',
+          100: 'var(--color-primary-100)',
+          200: 'var(--color-primary-200)',
+          300: 'var(--color-primary-300)',
+          400: 'var(--color-primary-400)',
+          500: 'var(--color-primary-500)',
+          600: 'var(--color-primary-600)',
+          700: 'var(--color-primary-700)',
+          800: 'var(--color-primary-800)',
+          900: 'var(--color-primary-900)',
+          950: 'var(--color-primary-950)',
+        },
+        secondary: {
+          50: 'var(--color-secondary-50)',
+          100: 'var(--color-secondary-100)',
+          200: 'var(--color-secondary-200)',
+          300: 'var(--color-secondary-300)',
+          400: 'var(--color-secondary-400)',
+          500: 'var(--color-secondary-500)',
+          600: 'var(--color-secondary-600)',
+          700: 'var(--color-secondary-700)',
+          800: 'var(--color-secondary-800)',
+          900: 'var(--color-secondary-900)',
+          950: 'var(--color-secondary-950)',
+        },
+        neutral: {
+          50: 'var(--color-neutral-50)',
+          100: 'var(--color-neutral-100)',
+          200: 'var(--color-neutral-200)',
+          300: 'var(--color-neutral-300)',
+          400: 'var(--color-neutral-400)',
+          500: 'var(--color-neutral-500)',
+          600: 'var(--color-neutral-600)',
+          700: 'var(--color-neutral-700)',
+          800: 'var(--color-neutral-800)',
+          900: 'var(--color-neutral-900)',
+          950: 'var(--color-neutral-950)',
+        },
+        // Gray as alias for neutral (for component compatibility)
+        gray: {
+          50: 'var(--color-neutral-50)',
+          100: 'var(--color-neutral-100)',
+          200: 'var(--color-neutral-200)',
+          300: 'var(--color-neutral-300)',
+          400: 'var(--color-neutral-400)',
+          500: 'var(--color-neutral-500)',
+          600: 'var(--color-neutral-600)',
+          700: 'var(--color-neutral-700)',
+          800: 'var(--color-neutral-800)',
+          900: 'var(--color-neutral-900)',
+          950: 'var(--color-neutral-950)',
+        },
+        success: {
+          50: 'var(--color-success-50)',
+          100: 'var(--color-success-100)',
+          200: 'var(--color-success-200)',
+          300: 'var(--color-success-300)',
+          400: 'var(--color-success-400)',
+          500: 'var(--color-success-500)',
+          600: 'var(--color-success-600)',
+          700: 'var(--color-success-700)',
+          800: 'var(--color-success-800)',
+          900: 'var(--color-success-900)',
+          950: 'var(--color-success-950)',
+        },
+        // Green as alias for success (for component compatibility)
+        green: {
+          50: 'var(--color-success-50)',
+          100: 'var(--color-success-100)',
+          200: 'var(--color-success-200)',
+          300: 'var(--color-success-300)',
+          400: 'var(--color-success-400)',
+          500: 'var(--color-success-500)',
+          600: 'var(--color-success-600)',
+          700: 'var(--color-success-700)',
+          800: 'var(--color-success-800)',
+          900: 'var(--color-success-900)',
+          950: 'var(--color-success-950)',
+        },
+        warning: {
+          50: 'var(--color-warning-50)',
+          100: 'var(--color-warning-100)',
+          200: 'var(--color-warning-200)',
+          300: 'var(--color-warning-300)',
+          400: 'var(--color-warning-400)',
+          500: 'var(--color-warning-500)',
+          600: 'var(--color-warning-600)',
+          700: 'var(--color-warning-700)',
+          800: 'var(--color-warning-800)',
+          900: 'var(--color-warning-900)',
+          950: 'var(--color-warning-950)',
+        },
+        // Yellow as alias for warning (for component compatibility)
+        yellow: {
+          50: 'var(--color-warning-50)',
+          100: 'var(--color-warning-100)',
+          200: 'var(--color-warning-200)',
+          300: 'var(--color-warning-300)',
+          400: 'var(--color-warning-400)',
+          500: 'var(--color-warning-500)',
+          600: 'var(--color-warning-600)',
+          700: 'var(--color-warning-700)',
+          800: 'var(--color-warning-800)',
+          900: 'var(--color-warning-900)',
+          950: 'var(--color-warning-950)',
+        },
+        error: {
+          50: 'var(--color-error-50)',
+          100: 'var(--color-error-100)',
+          200: 'var(--color-error-200)',
+          300: 'var(--color-error-300)',
+          400: 'var(--color-error-400)',
+          500: 'var(--color-error-500)',
+          600: 'var(--color-error-600)',
+          700: 'var(--color-error-700)',
+          800: 'var(--color-error-800)',
+          900: 'var(--color-error-900)',
+          950: 'var(--color-error-950)',
+        },
+        // Red as alias for error (for component compatibility)
+        red: {
+          50: 'var(--color-error-50)',
+          100: 'var(--color-error-100)',
+          200: 'var(--color-error-200)',
+          300: 'var(--color-error-300)',
+          400: 'var(--color-error-400)',
+          500: 'var(--color-error-500)',
+          600: 'var(--color-error-600)',
+          700: 'var(--color-error-700)',
+          800: 'var(--color-error-800)',
+          900: 'var(--color-error-900)',
+          950: 'var(--color-error-950)',
+        },
+        // Semantic colors
+        background: 'var(--color-background)',
+        surface: 'var(--color-surface)',
+        border: 'var(--color-border)',
+        text: {
+          DEFAULT: 'var(--color-text)',
+          muted: 'var(--color-text-muted)',
+          subtle: 'var(--color-text-subtle)',
+        },
+      },
+
+      // Spacing using CSS custom properties
+      spacing: {
+        xs: 'var(--spacing-xs)',
+        sm: 'var(--spacing-sm)',
+        md: 'var(--spacing-md)',
+        lg: 'var(--spacing-lg)',
+        xl: 'var(--spacing-xl)',
+        '2xl': 'var(--spacing-2xl)',
+        '3xl': 'var(--spacing-3xl)',
+        '4xl': 'var(--spacing-4xl)',
+      },
+
+      // Font families
+      fontFamily: {
+        sans: 'var(--font-sans)',
+        serif: 'var(--font-serif)',
+        mono: 'var(--font-mono)',
+      },
+
+      // Font sizes
+      fontSize: {
+        xs: 'var(--font-size-xs)',
+        sm: 'var(--font-size-sm)',
+        base: 'var(--font-size-base)',
+        lg: 'var(--font-size-lg)',
+        xl: 'var(--font-size-xl)',
+        '2xl': 'var(--font-size-2xl)',
+        '3xl': 'var(--font-size-3xl)',
+        '4xl': 'var(--font-size-4xl)',
+        '5xl': 'var(--font-size-5xl)',
+      },
+
+      // Font weights
+      fontWeight: {
+        light: 'var(--font-weight-light)',
+        normal: 'var(--font-weight-normal)',
+        medium: 'var(--font-weight-medium)',
+        semibold: 'var(--font-weight-semibold)',
+        bold: 'var(--font-weight-bold)',
+      },
+
+      // Line heights
+      lineHeight: {
+        tight: 'var(--line-height-tight)',
+        normal: 'var(--line-height-normal)',
+        relaxed: 'var(--line-height-relaxed)',
+      },
+
+      // Border radius
+      borderRadius: {
+        none: 'var(--radius-none)',
+        sm: 'var(--radius-sm)',
+        DEFAULT: 'var(--radius-md)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        '2xl': 'var(--radius-2xl)',
+        full: 'var(--radius-full)',
+      },
+
+      // Box shadows
+      boxShadow: {
+        none: 'var(--shadow-none)',
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow-md)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
+        '2xl': 'var(--shadow-2xl)',
+        inner: 'var(--shadow-inner)',
+      },
+
+      // Transitions
+      transitionDuration: {
+        fast: 'var(--transition-duration-fast)',
+        DEFAULT: 'var(--transition-duration-normal)',
+        normal: 'var(--transition-duration-normal)',
+        slow: 'var(--transition-duration-slow)',
+      },
+
+      transitionTimingFunction: {
+        DEFAULT: 'var(--transition-timing-ease-in-out)',
+        linear: 'var(--transition-timing-linear)',
+        in: 'var(--transition-timing-ease-in)',
+        out: 'var(--transition-timing-ease-out)',
+        'in-out': 'var(--transition-timing-ease-in-out)',
+      },
+
+      // Z-index scale
+      zIndex: {
+        dropdown: 'var(--z-dropdown)',
+        sticky: 'var(--z-sticky)',
+        fixed: 'var(--z-fixed)',
+        'modal-backdrop': 'var(--z-modal-backdrop)',
+        modal: 'var(--z-modal)',
+        popover: 'var(--z-popover)',
+        tooltip: 'var(--z-tooltip)',
+      },
+
+      // Animation keyframes
+      keyframes: {
+        // Fade animations
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        fadeOut: {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
+        fadeInUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+
+        // Slide animations
+        slideInUp: {
+          '0%': { transform: 'translateY(100%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+        slideInDown: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+        slideInLeft: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        slideInRight: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+
+        // Scale animations
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.9)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+
+        // Utility animations
+        spin: {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+        },
+        pulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.5' },
+        },
+        bounce: {
+          '0%, 100%': {
+            transform: 'translateY(-25%)',
+            animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
+          },
+          '50%': {
+            transform: 'translateY(0)',
+            animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+          },
+        },
+
+        // Ripple effect for buttons
+        ripple: {
+          '0%': { transform: 'scale(0)', opacity: '1' },
+          '100%': { transform: 'scale(4)', opacity: '0' },
+        },
+
+        // Shimmer for skeletons
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+      },
+
+      // Animation utilities
+      animation: {
+        'fade-in': 'fadeIn var(--transition-duration-normal) var(--transition-timing-ease-out)',
+        'fade-out': 'fadeOut var(--transition-duration-normal) var(--transition-timing-ease-in)',
+        'fade-in-up': 'fadeInUp var(--transition-duration-slow) var(--transition-timing-ease-out)',
+        'slide-in-up':
+          'slideInUp var(--transition-duration-normal) var(--transition-timing-ease-out)',
+        'slide-in-down':
+          'slideInDown var(--transition-duration-normal) var(--transition-timing-ease-out)',
+        'slide-in-left':
+          'slideInLeft var(--transition-duration-normal) var(--transition-timing-ease-out)',
+        'slide-in-right':
+          'slideInRight var(--transition-duration-normal) var(--transition-timing-ease-out)',
+        'scale-in': 'scaleIn var(--transition-duration-normal) var(--transition-timing-ease-out)',
+        spin: 'spin 1s linear infinite',
+        pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        bounce: 'bounce 1s infinite',
+        ripple: 'ripple 600ms ease-out',
+        shimmer: 'shimmer 2s linear infinite',
+      },
+    },
+  },
+  plugins: [],
+};

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}

package/test-signal-debug.syn

@@ -0,0 +1,9 @@
+import { createSignal } from '@synetics/synetics.dev';
+
+export component TestSignal() {
+  const [count, setCount] = createSignal(0);
+  
+  return (
+    <div>Count: {count()}</div>
+  );
+}

package/test-transformation.ts

@@ -0,0 +1,35 @@
+/**
+ * Transformation Verification Test
+ * Tests that JSX inside component bodies is being transformed correctly
+ */
+
+import { Typography } from './src/components/atoms/typography';
+import { Label } from './src/components/molecules/label';
+
+// Test 1: Typography component
+console.log('=== Test 1: Typography Component ===');
+const typo = Typography({ children: 'Hello World', variant: 'body1' });
+console.log('Typography result:', typo);
+console.log('Is HTMLElement:', typo instanceof HTMLElement);
+console.log('Tag name:', typo?.tagName);
+
+// Test 2: Label component (uses Typography internally)
+console.log('\n=== Test 2: Label Component ===');
+const label = Label({ text: 'Username', required: true });
+console.log('Label result:', label);
+console.log('Is HTMLElement:', label instanceof HTMLElement);
+console.log('Tag name:', label?.tagName);
+console.log('Children:', label?.children);
+
+// Test 3: Verify no appendChild errors
+console.log('\n=== Test 3: Nested Components ===');
+try {
+  const container = document.createElement('div');
+  container.appendChild(label);
+  console.log('✅ appendChild successful - no errors!');
+  console.log('Container HTML:', container.innerHTML.substring(0, 200) + '...');
+} catch (error) {
+  console.error('❌ appendChild failed:', error);
+}
+
+export { label, typo };