# STYLE-002: Element Configs & Variants - Changelog

## 2026-02-18 - Phase 1, 2 & 3 Complete

---

### Phase 1: Config System Architecture

#### New Files

**`packages/noodl-editor/src/editor/src/models/ElementConfigs/`**

- **`ElementConfigTypes.ts`** — TypeScript interfaces for the config system:

  - `StateStyles` — hover/active/focus/disabled/placeholder style maps
  - `VariantConfig` — base styles + optional `states` object
  - `SizePresets` — named size override maps
  - `ElementConfig` — full config for a node type (defaults + sizes + variants)
  - `ResolvedVariant` — base styles + states after stripping the `states` key

- **`ElementConfigRegistry.ts`** — Singleton registry:

  - `register(config)` — add a config
  - `get(nodeType)` / `has(nodeType)` / `getAll()` — lookup
  - `getVariantNames(nodeType)` — returns `string[]` of available variant names
  - `resolveVariant(nodeType, variantName)` → `ResolvedVariant | undefined`
  - `applyDefaults(node, typeName)` — stamps defaults + initial variant onto a node's `parameters`
  - `applyVariant(node, typeName, variantName)` — stamps a variant's base styles + updates `_variant` marker
  - All built-in configs auto-registered on module load

- **`configs/ButtonConfig.ts`** — Button (`net.noodl.controls.button`):

  - Variants: primary, secondary, outline, ghost, destructive, link
  - Size presets: sm, md, lg, xl
  - Interaction states: hover, active, disabled per variant

- **`configs/GroupConfig.ts`** — Group (`net.noodl.visual.group`):

  - Variants: default, card, section, inset, flex-row, flex-col, centered

- **`configs/TextConfig.ts`** — Text node:

  - **BUG FIX**: defaults now include `width: auto`, `flexShrink: 1`, `flexGrow: 0`, `minWidth: 0`
    (previously: implicit `width: 100%` caused Text elements to push siblings off-screen in row layouts)
  - Variants: body, heading-1 through heading-6, muted, label, small, code, lead, blockquote

- **`configs/TextInputConfig.ts`** — TextInput (`net.noodl.controls.textinput`):

  - Variants: default (with focus ring), error

- **`configs/CheckboxConfig.ts`** — Checkbox (`net.noodl.controls.checkbox`):

  - Variant: default

- **`configs/index.ts`** — barrel export
- **`index.ts`** — public module export

---

### Phase 2: Node Creation Integration

#### Modified

- **`views/NodePicker/NodePicker.utils.ts`** — Added `ElementConfigRegistry.applyDefaults(node, type.name)` call in `createNodeFunction`, immediately after `NodeGraphNode.fromJSON(...)`. This is the **single entry point for all user-initiated node creation** — no changes needed to NodeGraphModel or project loading paths.

  - Safe for existing projects: defaults only stamp properties not already set
  - No-op for node types without a registered config
  - Works for root nodes, child nodes, and auto-attach-to-root paths

---

### Phase 3: VariantSelector UI Component

#### New Files

**`packages/noodl-core-ui/src/components/inputs/VariantSelector/`**

- **`VariantSelector.tsx`** — Controlled dropdown component:

  - Props: `variants: string[]`, `currentVariant: string | undefined`, `onVariantChange: (name) => void`, `disabled?`, `label?`
  - Keyboard accessible (Escape to close)
  - Closes on outside click
  - Formats variant names for display (`heading-1` → `Heading 1`)
  - Active variant shown with checkmark + primary color highlight

- **`VariantSelector.module.scss`** — Styled with design tokens exclusively (no hardcoded colors)

- **`index.ts`** — barrel export

---

### What's Pending

#### Property Panel Integration (STYLE-004)

Wiring `VariantSection` into the property editor requires understanding the legacy `TypeView.js` / `propertyeditor.ts` system. The `VariantSelector` component is built and ready — integration is scoped to STYLE-004 which covers Property Panel UX overhaul.

#### State Styles (Phase 4)

`StateStyles` (hover, focus, active, disabled) are defined in all configs and stored in `ResolvedVariant.states`. Applying them at runtime requires investigation of the existing visual states system in `noodl-viewer-react`. Scoped to STYLE-004.

---

## Key Discoveries

- **NodePicker.utils.ts is the sole user-initiated node creation path** — all `addRoot`/`addChild` calls with `{ undo: true, label: 'create' }` flow through `createNodeFunction`. No need to touch NodeGraphModel.
- **NodeGraphNode.parameters is a plain object** — not getter/setter based. The registry uses direct `node.parameters[key]` access.
- **Loading vs creation differentiation**: when loading from JSON, `NodeGraphNode.fromJSON` pre-populates parameters before `addRoot` is called. The `applyDefaults` guard (`if param === undefined`) ensures existing project nodes aren't affected.
- **Text node width issue**: the `defaultCss` in `text.js` only has `{ position: 'relative', display: 'flex' }`. The width issue comes from dimension port defaults. Stamping `width: auto` + flex props via `applyDefaults` fixes it for newly created nodes.

---

_Started: 2026-02-18_