@synetics/ui 0.7.0-alpha

package/src/docs/copilot-implementation-rules.md

@@ -0,0 +1,328 @@
+
+the absoute rules applies here too: 
+E:\Sources\visual-schema-builder\packages\copiot-implementation-rules.md
+
+
+
+- install tailwindcss for this project
+- configure it
+- in E:\Sources\visual-schema-builder\packages\atomos-prime.dev\src\design
+  - define all that you need as tokens, sizes, utilities, and variants 
+  
+
+in E:\Sources\visual-schema-builder\packages\atomos-prime.dev\src\components
+
+you will find folders with primitive components names 
+- implement them using tailwind css prepared tokens, sizes, utilities, and variants as mentionned above
+- by now there is :
+   - [component]/
+    - [component].tsx  <= this is the main component object `export const MyComponent = ({ ... }: IMyComponentProps) => {}`
+      - the targeted framework is pulsar so do not use React even if all in all this component should be as agnostic as it's possible to be 
+      - for styling variancy you will need to create a generic configuration object in order to avoid passing 1000 props
+        - a common style contiguration object that contains variant naming, size, borders, transition, hover etc... 
+          I let you see what could be interesting to have in it the definition should being considered as common 
+        - name this object IComponentConfig
+      
+         
+    - [component].type.ts  <= this is the main component object interface props `interface IMyComponentProps { ... }` 
+    - only if it's pertinent:    
+      - [component].[variant].factory.ts  <= therer are as many components as needed that are variants of the original but preconfigured, it wraps IComponentConfig preconfigurartion 
+      
+- in each [component].type.ts file you will find some directives to respect 
+
+
+- first iteration fixes.
+  - No mixed enums or types in interfces (extract them)
+  - One Item per File !   
+  - IComponentConfig should be an interface that's passed as a props and must not extends the component itself
+    - create a builder pattern based class for it (remember how classes are built !)
+    - example 
+    - 
+    ```tsx 
+    
+    const componentConfig: IComponentConfig = new CompoentnConfig('primary').size('sm').Build()
+    <MyComponent id={`123`} config={componentConfig} />
+
+    ```
+  - Components 
+    - extract the {...rest} of html dom elements away from components and use the same approache as be in React.
+      - `interface IMyComponent extends React.ComponentProps<'div'> { ... }`  it will provide the ...rest properties regarding divs... 
+      -  I want the same mecanics here. `Synetics.HtmlExtends<'div'>`  <= you probably should create it in the pulsar itself no ? 
+  
+  -  in tsx files you have to write components in a tsx format using return with the actual HTML component (declarative) not imperative 
+  -  implementation of a component exapmple: 
+      //[component].type.ts
+      ```ts
+      
+      export interface IMyComponent extends Synetics.HtmlExtends<'div'> { 
+        id: string
+        name: string
+      }
+      
+      ```
+      //[component].tsx
+      ```tsx
+      import { IMyComponent } from './[component].type.ts'
+      import { useState } from 'pulsar'
+
+      export const MyComponent = ({id, name, ...rest}:IMyComponent) { 
+          const [focus, setFocus] = useState<boolean>(false)
+          const handleOnFocus = () => {
+            setFocus(true)
+          }
+          const handleOnBlur = () => {
+            setFocus(false)
+          }
+          return (<div id={id} onFocus={handleOnFocus} onFocus={handleOnBlur} {...rest}>{name()}</div>)
+      }
+      
+      ```
+
+
+
+- 2ND iteration observations: 
+- the builder is malformed, wrong location (E:\Sources\visual-schema-builder\packages\atomos-prime.  dev\src\components\interfaces\prototype ) <= WTF!!!!
+- and not done as I wanted it 
+- here is how I want it!
+
+example of what I want : 
+
+- `E:\Sources\visual-schema-builder\packages\atomos-prime.dev\src\components\utils\component-config-builder\component-config.type.ts`
+
+```typescript 
+
+export interface IComponentConfig {
+  // Visual style
+  readonly variant?: ComponentVariant
+  readonly color?: ComponentColor
+  readonly size?: ComponentSize
+  
+  // Border
+  //rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' ///<= VIOLATION!!!!
+  readonly rounded? : ComponentRoundedSize
+
+
+  readonly border?: boolean
+  
+  // Shadow
+  ///readonly shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'///<= VIOLATION!!!!
+    readonly shadow?: ComponentShadowSize
+  // States
+  readonly disabled?: boolean
+  readonly loading?: boolean
+  readonly fullWidth?: boolean
+  
+  // Transitions
+  readonly transition?: boolean
+  //readonly transitionDuration?: 'fast' | 'normal' | 'slow'///<= VIOLATION!!!!
+  readonly transitionDuration?: TransitionDuration
+  // Interactive states
+  readonly hover?: boolean
+  readonly focus?: boolean
+  readonly active?: boolean
+  
+  // Additional styling
+  readonly className?: string
+
+}
+
+```
+
+- `E:\Sources\visual-schema-builder\packages\atomos-prime.dev\src\components\utils\component-config-builder\component-config-builder.type.ts`
+
+
+```typescript 
+
+export interface IComponentConfigBuilder {
+    new (variant: ComponentVariant): 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
+}
+
+```
+
+
+
+- `E:\Sources\visual-schema-builder\packages\atomos-prime.dev\src\components\utils\component-config-builder\component-config-builder.ts`
+
+```typescript 
+
+imoprte {variant} from './prototype/variant'
+... other imports
+
+export const ComponentConfigBuilder = (this:IComponentConfigBuilder, variant: ComponentVariant ) {    
+    this.config = {variant: variant}
+} as unknown as IComponentConfigBuilder
+    
+// import them from 
+// - `E:\Sources\visual-schema-builder\packages\atomos-prime.dev\src\components\utils\component-config-builder\prototype\...
+
+Object.apply(ComponentConfigBuilder.prototype,{ 
+    variant,
+    color,
+    size,
+    rounded,
+    border,
+    shadow,
+    disabled,
+    loading,
+    fullWidth,
+    transition,
+    transitionDuration,
+    hover,
+    focus,
+    active,
+    className,
+    build
+})
+
+```
+
+in your example E:\Sources\visual-schema-builder\packages\atomos-prime.dev\EXAMPLES.ts you gave imperative usages add declarative usages too !
+
+- becarefull to add/import/use in this project: pulsar.d.ts types in order to avoid `JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.`
+
+
+in the Input component: 
+
+this violates !
+* [COPILOT] can have a default skeletton behavior on Loading (reuse available skeletton component) that replaces the actual component in loading time
+
+```tsx  
+   // If loading, return skeleton
+  if (finalConfig.loading) {
+    return (
+      <div
+        className={cn(
+          'animate-pulse bg-neutral-200 rounded-md',
+          componentSizes[finalConfig.size].padding,
+          finalConfig.fullWidth ? 'w-full' : 'w-64'
+        )}
+        style={{ height: componentSizes[finalConfig.size].height }}
+        role="status"
+        aria-label="Loading"
+      />
+    )
+  }
+  
+```
+
+
+
+for this following you have to create a component Styling builder  following the same principle I've explained above for ComponentConfigBuilder
+
+- do never create or use Data Oriented Static items into a component: so this should be externalized to the component!
+
+```tsx 
+  // Base input classes
+  const inputClasses = cn(
+    // Base styles
+    'block border font-medium focus:outline-none',
+    'transition-colors duration-200',
+    
+    // Size
+    sizeConfig.padding,
+    sizeConfig.fontSize,
+    finalConfig.fullWidth ? 'w-full' : '',
+    
+    // Border radius
+    finalConfig.rounded === 'none' ? 'rounded-none' : '',
+    finalConfig.rounded === 'sm' ? 'rounded-sm' : '',
+    finalConfig.rounded === 'md' ? 'rounded-md' : '',
+    finalConfig.rounded === 'lg' ? 'rounded-lg' : '',
+    finalConfig.rounded === 'xl' ? 'rounded-xl' : '',
+    finalConfig.rounded === '2xl' ? 'rounded-2xl' : '',
+    finalConfig.rounded === 'full' ? 'rounded-full' : '',
+    
+    // States
+    error 
+      ? 'border-error-600 bg-error-50 text-error-900 placeholder-error-400 focus:ring-2 focus:ring-error-500 focus:border-error-600'
+      : 'border-neutral-300 bg-white text-neutral-900 placeholder-neutral-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-600',
+    
+    finalConfig.disabled 
+      ? 'bg-neutral-100 text-neutral-500 cursor-not-allowed' 
+      : '',
+    
+    rest.readOnly 
+      ? 'bg-neutral-50 cursor-default' 
+      : '',
+    
+    // Prefix/suffix padding
+    prefix ? 'pl-10' : '',
+    suffix ? 'pr-10' : '',
+    
+    // Custom classes
+    finalConfig.className
+  )
+  ```
+
+
+
+  Here's how I want you to make the components 
+
+
+```tsx
+
+  prefix, //<= this violates the  * [COPILOT] this is an unique component so NO!
+  suffix, //<= this violates the  * [COPILOT] this is an unique component so NO!
+
+/**
+ * Input component
+ * Creates an accessible text input with various states and validation <= NO VALIDATIONS BECAUSE WE WILL INTRODUCE THEM OTHER WAY!
+ */
+
+// external to the component so it's compiled ONCE!
+const inputDefaultConfig = config || new ComponentConfigBuilder('primary').build()
+  // external to the component so it's compiled ONCE!
+const inputDefaultStyling = config || new ComponentStylingBuilder('primary').build()
+
+export const Input = ({
+  config = inputDefaultConfig, 
+  styling = inputDefaultStyling, 
+  type = 'text',
+  value,
+  defaultValue,
+  ...rest
+}: IInputProps): HTMLElement => {
+
+  // If loading, return skeleton
+config.loading
+const sizeConfig = componentSizes[config.size]
+
+  //  * [COPILOT] this is an unique component <= means as output from atoms it should only be ONE component !
+  // what you did with prefix and suffix is for from molecules components NOT ATOMS!
+return 
+  {
+    config.loading ? 
+    <Skeletton /> :
+
+    
+    <input
+        type={type}
+        className={inputClasses}
+        value={value}
+        defaultValue={defaultValue}
+        disabled={config.disabled}
+        aria-busy={config.loading}
+        {...rest}
+      />
+    }
+}
+  
+  
+  ```

package/src/index.ts

@@ -0,0 +1,23 @@
+/**
+ * @synetics/ui - Component Library
+ *
+ * Re-exports UI components and design tokens for the Synetics framework.
+ */
+
+// Re-export design tokens
+export * from '@synetics/design-tokens';
+
+// Component exports - exporting from source directly for now
+export * from './components/atoms/avatar/index';
+export * from './components/atoms/checkbox/index';
+export * from './components/atoms/input/index';
+export * from './components/atoms/radio/index';
+export * from './components/atoms/spinner/index';
+export * from './components/atoms/toggle/index';
+export * from './components/atoms/typography/index';
+
+export * from './components/molecules/badge/index';
+export * from './components/molecules/button/index';
+export * from './components/molecules/label/index';
+export * from './components/organisms/table';
+export * from './components/organisms/toast';

package/src/jsx.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../../synetics.dev/src/types/jsx.d.ts" />
+
+/**
+ * Re-export JSX types from workspace root
+ * This ensures TypeScript can find the JSX namespace in this package
+ */
+
+// This file intentionally empty - it just references the root jsx.d.ts

package/src/lab/counter.syn

@@ -0,0 +1,76 @@
+/**
+ * Pulsar UI Showcase - Counter Component
+ * Tests basic signal reactivity and event handling
+ */
+
+import { createSignal, createEffect } from '@synetics/synetics.dev';
+
+export interface ICounterProps {
+  id?: string;
+}
+
+export component Counter({id}) {
+  console.log('[Counter] Initializing with id:', id);
+  
+  // Test 1: Basic Signal
+  const [count, setCount] = createSignal(0);
+  
+  const increment = () => {
+    console.log('[Click] Increment, before:', count());
+    setCount(count() + 1);
+    console.log('[Click] After:', count());
+  };
+  
+  const decrement = () => {
+    console.log('[Click] Decrement, before:', count());
+    setCount(count() - 1);
+  };
+  
+  const reset = () => {
+    console.log('[Click] Reset');
+    setCount(0);
+  };
+  
+  return (
+    <div id={id} style="background: #1a1a1a; padding: 30px; border-radius: 12px; margin-bottom: 20px;">
+      <h2 style="font-size: 24px; margin-bottom: 20px; color: #f59e0b;">🧪 Test: Basic Signal Reactivity</h2>
+      
+      <div style="display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;">
+        <button 
+          onClick={increment}
+          style="padding: 16px 32px; font-size: 20px; background: #3b82f6; border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s;">
+          ➕ Increment
+        </button>
+        
+        <button 
+          onClick={decrement}
+          style="padding: 16px 32px; font-size: 20px; background: #ef4444; border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s;">
+          ➖ Decrement
+        </button>
+        
+        <button 
+          onClick={reset}
+          style="padding: 16px 32px; font-size: 20px; background: #6b7280; border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s;">
+          🔄 Reset
+        </button>
+      </div>
+      
+      <div style="font-size: 48px; font-weight: bold; color: #10b981; margin-top: 20px; padding: 20px; background: #0a0a0a; border-radius: 8px; text-align: center;">
+        Count: {count()}
+      </div>
+      
+      <div style="margin-top: 30px; padding: 20px; background: #2a2a2a; border-radius: 8px;">
+        <h3 style="font-size: 18px; margin-bottom: 10px; color: #10b981;">
+          ✅ Features Being Tested
+        </h3>
+        <ul style="list-style: none; padding: 0; color: #d1d5db;">
+          <li style="padding: 5px 0;">✓ Component props (id: {id || 'none'})</li>
+          <li style="padding: 5px 0;">✓ createSignal() reactivity</li>
+          <li style="padding: 5px 0;">✓ Event handlers (onClick)</li>
+          <li style="padding: 5px 0;">✓ JSX expression interpolation {` {count()} `}</li>
+          <li style="padding: 5px 0;">✓ Console logging and debugging</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/lab/transformer/README.md

@@ -0,0 +1,115 @@
+# Transformer Lab — Test Fixtures
+
+Each subfolder is an isolated test fixture for the Synetics Babel transformer (`packages/synetics-transformer`). The `.syn` files are **input sources** that the compiler processes — verifying the transformer correctly lowers Synetics-specific syntax to plain JS/TS that browsers can execute.
+
+---
+
+## File Naming Convention
+
+```
+YYYY-MM-DD-HH-MM-<topic>.syn
+```
+
+Folders with two files (e.g. `14:20` + `15:00`) contain a baseline and a revised version produced during the same session to fix a transform regression.
+
+---
+
+## Folders
+
+### Control Flow
+
+| Folder                     | Transform tested                                                        |
+| -------------------------- | ----------------------------------------------------------------------- |
+| `for-iteration`            | `{list().map(cb)}` sugar → `ForRegistry({ each, children })`            |
+| `for-iteration-components` | `<For each={signal}>` JSX tag → `ForRegistry`                           |
+| `show-components`          | `{cond() && <X/>}` → `ShowRegistry({ when, children, fallback: null })` |
+| `show-when-components`     | `{cond() ? <A/> : <B/>}` ternary → `ShowRegistry` with fallback         |
+
+### Reactivity Primitives
+
+| Folder                       | Transform tested                                              |
+| ---------------------------- | ------------------------------------------------------------- |
+| `create-effect-side-effects` | `createEffect(() => ...)` reactive subscription wiring        |
+| `memo-optimization`          | `createMemo()` derived signal memoization                     |
+| `render-effect-timing`       | `createRenderEffect` — fires synchronously before paint       |
+| `batch-updates`              | Batched signal writes coalesced into a single re-render tick  |
+| `untrack-isolation`          | `untrack(() => ...)` — reads signal value without subscribing |
+
+### Resources
+
+| Folder                         | Transform tested                                           |
+| ------------------------------ | ---------------------------------------------------------- |
+| `create-resource`              | `createResource(fetcher)` async primitive                  |
+| `resource-loading-states`      | `isLoading` / `isSuccess` / `isError` tri-state shape      |
+| `resource-state-handling`      | Transitions between loading → data → error states          |
+| `resource-dependency-tracking` | Re-fetch triggered by reactive key signal change           |
+| `resource-parallel-fetching`   | Multiple concurrent `createResource` calls                 |
+| `resource-mutations`           | `resource.mutate()` optimistic update pattern              |
+| `resource-refetch-patterns`    | Manual `resource.refetch()` trigger                        |
+| `resource-pre-resolution`      | Pre-loaded data injected into resource before first render |
+
+### Components & Lifecycle
+
+| Folder                 | Transform tested                                            |
+| ---------------------- | ----------------------------------------------------------- |
+| `on-mount-lifecycle`   | `onMount()` hook deferred until after DOM insertion         |
+| `on-cleanup-patterns`  | `onCleanup()` hook registration and disposal                |
+| `dynamic-components`   | `<Dynamic component={expr}>` → runtime component resolution |
+| `async-lazy-loading`   | `lazy(() => import(...))` async component wrapping          |
+| `concurrent-rendering` | Scheduler priority hints in render paths                    |
+
+### Context
+
+| Folder                     | Transform tested                                         |
+| -------------------------- | -------------------------------------------------------- |
+| `create-context-providers` | `createContext` + `<Provider value={...}>` JSX transform |
+
+### Portals
+
+| Folder                  | Transform tested                                       |
+| ----------------------- | ------------------------------------------------------ |
+| `portal-transformation` | `<Portal>` / `<PortalSlot>` → mount-point registration |
+
+### Error Handling
+
+| Folder                   | Transform tested                                         |
+| ------------------------ | -------------------------------------------------------- |
+| `catcher-error-handlers` | `<Catcher>` → `CatcherRegistry` component transform      |
+| `tryer-error-boundaries` | `<Tryer>` try/catch boundary → `TryerRegistry` transform |
+
+### Suspense
+
+| Folder             | Transform tested                             |
+| ------------------ | -------------------------------------------- |
+| `waiting-suspense` | `<Waiting>` coordination → `WaitingRegistry` |
+
+### JSX & Type System
+
+| Folder                    | Transform tested                                    |
+| ------------------------- | --------------------------------------------------- |
+| `complex-jsx-expressions` | Nested / computed JSX expressions                   |
+| `template-literals`       | Tagged and dynamic template literals inside JSX     |
+| `generic-type-arguments`  | `<Component<T>>` generic type param stripping       |
+| `type-inference-system`   | Type narrowing preserved through transform pipeline |
+
+### Rendering
+
+| Folder                  | Transform tested                                           |
+| ----------------------- | ---------------------------------------------------------- |
+| `server-side-rendering` | SSR serialization markers and hydration boundary insertion |
+
+---
+
+## Running the Transformer
+
+From the workspace root:
+
+```bash
+pnpm --filter synetics-transformer test
+```
+
+To test a specific fixture manually:
+
+```bash
+node analyze-full-pipeline.mjs packages/synetics-ui.dev/src/lab/transformer/<folder>/<file>.syn
+```