Started tasks to migrate runtime to React 19. Added phase 3 projects

dev-docs/reference/LEARNINGS-RUNTIME.md

@@ -0,0 +1,472 @@
+# OpenNoodl Runtime Architecture - Deep Dive
+
+This document captures learnings about the Noodl runtime system, specifically how `noodl-runtime` and `noodl-viewer-react` work together to render Noodl projects.
+
+---
+
+## Overview
+
+The Noodl runtime is split into two main packages:
+
+| Package | Purpose |
+|---------|---------|
+| `noodl-runtime` | Core node execution, data flow, graph processing |
+| `noodl-viewer-react` | React-based rendering of visual nodes |
+
+The **editor** uses these packages to render the preview, and **deployed projects** use them directly in the browser.
+
+---
+
+## How React is Loaded
+
+**Key Insight:** React is NOT an npm dependency of noodl-viewer-react. Instead, it's loaded as external UMD scripts.
+
+### Webpack Configuration
+```javascript
+// webpack-configs/webpack.common.js
+module.exports = {
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM'
+  }
+};
+```
+
+This means:
+- `import React from 'react'` actually references `window.React`
+- `import ReactDOM from 'react-dom'` references `window.ReactDOM`
+
+### Where React Bundles Live
+```
+packages/noodl-viewer-react/static/shared/
+├── react.production.min.js       # React UMD bundle
+└── react-dom.production.min.js   # ReactDOM UMD bundle
+```
+
+These are loaded via `<script>` tags before the viewer bundle in deployed projects.
+
+---
+
+## Entry Points
+
+The package has three entry points for different use cases:
+
+| Entry File | Purpose | Used By |
+|------------|---------|---------|
+| `index.viewer.js` | Editor preview | Editor iframe |
+| `index.deploy.js` | Production deployments | Exported projects |
+| `index.ssr.js` | Server-side rendering | SSR builds |
+
+### The `_viewerReact` API
+
+All entry points expose `window.Noodl._viewerReact`:
+
+```javascript
+// index.viewer.js
+window.Noodl._viewerReact = NoodlViewerReact;
+```
+
+The API provides:
+- `render(element, modules, options)` - Render in editor preview
+- `renderDeployed(element, modules, projectData)` - Render deployed project
+- `createElement(modules, projectData)` - Create React element (SSR)
+
+---
+
+## Main Render Flow
+
+### 1. noodl-viewer-react.js
+
+This is the heart of the rendering system:
+
+```javascript
+export default {
+  render(element, noodlModules, { isLocal = false }) {
+    const noodlRuntime = new NoodlRuntime(runtimeArgs);
+    ReactDOM.render(
+      React.createElement(Viewer, { noodlRuntime, noodlModules }),
+      element
+    );
+  },
+  
+  renderDeployed(element, noodlModules, projectData) {
+    // Supports SSR hydration
+    if (element.children[0]?.hasAttribute('data-reactroot')) {
+      ReactDOM.hydrate(this.createElement(...), element);
+    } else {
+      ReactDOM.render(this.createElement(...), element);
+    }
+  }
+};
+```
+
+### 2. Viewer Component (viewer.jsx)
+
+The `Viewer` is a React class component that:
+- Initializes the runtime
+- Registers built-in nodes
+- Manages popup overlays
+- Handles editor connectivity (websocket)
+- Renders the root component
+
+```javascript
+export default class Viewer extends React.Component {
+  constructor(props) {
+    // Initialize runtime
+    registerNodes(noodlRuntime);
+    NoodlJSAPI(noodlRuntime);
+    
+    // Listen for graph updates
+    noodlRuntime.eventEmitter.on('rootComponentUpdated', () => {
+      requestAnimationFrame(() => this.forceUpdate());
+    });
+  }
+  
+  render() {
+    const rootComponent = this.props.noodlRuntime.rootComponent;
+    return rootComponent.render();
+  }
+}
+```
+
+---
+
+## The Node-to-React Bridge
+
+### createNodeFromReactComponent
+
+This is the **most important function** for understanding visual nodes. Located in `react-component-node.js`, it creates a Noodl node definition from a React component definition.
+
+```javascript
+// Example node definition
+const GroupNodeDef = {
+  name: 'net.noodl.visual.group',
+  getReactComponent: () => Group,
+  frame: {
+    dimensions: true,
+    position: true
+  },
+  inputs: { ... },
+  outputs: { ... }
+};
+
+// Create node from definition
+const groupNode = createNodeFromReactComponent(GroupNodeDef);
+```
+
+### NoodlReactComponent Wrapper
+
+Every visual node gets wrapped in `NoodlReactComponent`:
+
+```javascript
+class NoodlReactComponent extends React.Component {
+  render() {
+    const { noodlNode, style, ...otherProps } = this.props;
+    
+    // Merge Noodl styling with React props
+    let finalStyle = noodlNode.style;
+    if (style) {
+      finalStyle = { ...noodlNode.style, ...style };
+    }
+    
+    // Render the actual React component
+    return React.createElement(
+      noodlNode.reactComponent,
+      props,
+      noodlNode.renderChildren()
+    );
+  }
+}
+```
+
+### The Render Method
+
+Each Noodl node has a `render()` method that returns React elements:
+
+```javascript
+render() {
+  if (!this.wantsToBeMounted) return;
+  
+  return React.createElement(NoodlReactComponent, {
+    key: this.reactKey,
+    noodlNode: this,
+    ref: (ref) => {
+      this.reactComponentRef = ref;
+      // DOM node tracking via findDOMNode (deprecated)
+      this.boundingBoxObserver.setTarget(ReactDOM.findDOMNode(ref));
+    }
+  });
+}
+```
+
+---
+
+## State Synchronization Pattern
+
+### The forceUpdate Pattern
+
+Noodl nodes don't use React state. Instead, they use `forceUpdate()`:
+
+```javascript
+forceUpdate() {
+  if (this.forceUpdateScheduled) return;
+  this.forceUpdateScheduled = true;
+
+  // Wait until end of frame to batch updates
+  this.context.eventEmitter.once('frameEnd', () => {
+    this.forceUpdateScheduled = false;
+    
+    // Don't re-render if already rendered this frame
+    if (this.renderedAtFrame === this.context.frameNumber) return;
+    
+    this.reactComponentRef?.setState({});
+  });
+  
+  this.context.scheduleUpdate();
+}
+```
+
+**Why this pattern?**
+- Noodl's data flow system may update many inputs in one frame
+- Batching prevents excessive re-renders
+- The `renderedAtFrame` check prevents duplicate renders
+
+### scheduleAfterInputsHaveUpdated
+
+For actions that depend on multiple inputs settling:
+
+```javascript
+this.scheduleAfterInputsHaveUpdated(() => {
+  // All inputs have been processed
+  this.updateChildIndices();
+});
+```
+
+---
+
+## Visual States and Variants
+
+### Visual States
+
+Nodes can have states like `hover`, `pressed`, `focused`:
+
+```javascript
+setVisualStates(newStates) {
+  const prevStateParams = this.getParametersForStates(this.currentVisualStates);
+  const newStateParams = this.getParametersForStates(newStates);
+  
+  for (const param in newValues) {
+    // Apply transitions or immediate updates
+    if (stateTransition[param]?.curve) {
+      transitionParameter(this, param, newValues[param], stateTransition[param]);
+    } else {
+      this.queueInput(param, newValues[param]);
+    }
+  }
+}
+```
+
+### Variants
+
+Variants allow pre-defined style variations:
+
+```javascript
+setVariant(variant) {
+  this.variant = variant;
+  
+  // Merge parameters: base variant → node parameters → states
+  const parameters = {};
+  variant && mergeDeep(parameters, variant.parameters);
+  mergeDeep(parameters, this.model.parameters);
+  
+  if (this.currentVisualStates) {
+    const stateParameters = this.getParametersForStates(this.currentVisualStates);
+    mergeDeep(parameters, stateParameters);
+  }
+}
+```
+
+---
+
+## Children Management
+
+### Adding/Removing Children
+
+```javascript
+addChild(child, index) {
+  child.parent = this;
+  this.children.splice(index, 0, child);
+  this.cachedChildren = undefined;  // Invalidate cache
+  this.scheduleUpdateChildCountAndIndicies();
+  this.forceUpdate();
+}
+
+removeChild(child) {
+  const index = this.children.indexOf(child);
+  if (index !== -1) {
+    this.children.splice(index, 1);
+    child.parent = undefined;
+    this.cachedChildren = undefined;
+    this.forceUpdate();
+  }
+}
+```
+
+### The cachedChildren Optimization
+
+```javascript
+renderChildren() {
+  if (!this.cachedChildren) {
+    let c = this.children.map((child) => child.render());
+    let children = [];
+    flattenArray(children, c);
+    
+    // Handle edge cases
+    if (children.length === 0) children = null;
+    else if (children.length === 1) children = children[0];
+    
+    this.cachedChildren = children;
+  }
+  return this.cachedChildren;
+}
+```
+
+---
+
+## DOM Access Patterns
+
+### Current Pattern (Deprecated)
+
+```javascript
+getDOMElement() {
+  const ref = this.getRef();
+  return ReactDOM.findDOMNode(ref);  // ← Deprecated in React 18+
+}
+```
+
+### The setStyle Method
+
+Direct DOM manipulation for performance:
+
+```javascript
+setStyle(newStyles, styleTag) {
+  // Update internal style object
+  for (const p in newStyles) {
+    styleObject[p] = newStyles[p];
+  }
+  
+  const domElement = this.getDOMElement();
+  
+  // Some changes require a full React re-render
+  if (needsForceUpdate) {
+    this.forceUpdate();
+  } else {
+    // Direct DOM update for performance
+    setStylesOnDOMNode(domElement, newStyles, styleTag);
+  }
+}
+```
+
+---
+
+## SSR Support
+
+### Server Setup Function
+
+```javascript
+export function ssrSetupRuntime(noodlRuntime, noodlModules, projectData) {
+  registerNodes(noodlRuntime);
+  NoodlJSAPI(noodlRuntime);
+  noodlRuntime.setProjectSettings(projectSettings);
+  
+  // Register modules
+  for (const module of noodlModules) {
+    noodlRuntime.registerModule(module);
+  }
+  
+  noodlRuntime.setData(projectData);
+  noodlRuntime._disableLoad = true;
+}
+```
+
+### triggerDidMount for SSR
+
+```javascript
+triggerDidMount() {
+  if (this.wantsToBeMounted && !this.didCallTriggerDidMount) {
+    this.didCallTriggerDidMount = true;
+    
+    if (this.hasOutput('didMount')) {
+      this.sendSignalOnOutput('didMount');
+    }
+    
+    // Recursively trigger for children
+    this.children.forEach((child) => {
+      child.triggerDidMount?.();
+    });
+  }
+}
+```
+
+---
+
+## Known Issues & Gotchas
+
+### 1. UNSAFE_componentWillReceiveProps
+
+Used in `Group.tsx` and `Drag.tsx` for prop comparison. These need to be converted to `componentDidUpdate(prevProps)` for React 19 compatibility.
+
+### 2. ReactDOM.findDOMNode
+
+Used throughout `react-component-node.js` for DOM access. This is deprecated and needs replacement with callback refs.
+
+### 3. Class Components
+
+The runtime uses class components extensively because:
+- Need lifecycle control (`componentDidMount`, `componentWillUnmount`)
+- `forceUpdate()` pattern doesn't work with function components
+- Historical reasons
+
+### 4. React Key Counter
+
+```javascript
+let reactKeyCounter = 0;
+
+function createNodeFromReactComponent(def) {
+  // ...
+  initialize() {
+    this.reactKey = 'key' + reactKeyCounter;
+    reactKeyCounter++;
+  }
+}
+```
+
+Keys are global counters to ensure uniqueness. The `_resetReactVirtualDOM` method can reset a node's key to force complete re-render.
+
+---
+
+## File Reference
+
+| File | Purpose |
+|------|---------|
+| `noodl-viewer-react.js` | Main render API, ReactDOM calls |
+| `viewer.jsx` | Root Viewer component |
+| `react-component-node.js` | Node-to-React bridge |
+| `register-nodes.js` | Built-in node registration |
+| `styles.ts` | CSS/style system |
+| `highlighter.js` | Editor node highlighting |
+| `inspector.js` | Editor inspector integration |
+| `node-shared-port-definitions.js` | Common input/output definitions |
+
+---
+
+## Related Packages
+
+- **noodl-runtime**: Core execution engine, graph model, node execution
+- **noodl-viewer-cloud**: Cloud deployment variant
+- **noodl-platform**: Platform abstraction layer
+
+---
+
+*Last Updated: December 2024*
+*Related Task: Phase 2 Task 3 - Runtime React 19 Upgrade*

dev-docs/tasks/phase-2/TASK-003-react-19-runtime/CHANGELOG.md

@@ -0,0 +1,139 @@
+# TASK-003: Runtime React 18.3.1 Upgrade - CHANGELOG
+
+## Summary
+
+Upgraded the `noodl-viewer-react` runtime package from React 16.8/17 to React 18.3.1. This affects deployed/published Noodl projects.
+
+> **Note**: Originally targeted React 19, but React 19 removed UMD build support. React 18.3.1 is the latest version with UMD bundles and provides 95%+ compatibility with React 19 APIs.
+
+## Date: December 13, 2025
+
+---
+
+## Changes Made
+
+### 1. Main Entry Point (`noodl-viewer-react.js`)
+
+**File**: `packages/noodl-viewer-react/noodl-viewer-react.js`
+
+- **Changed** `ReactDOM.render()` → `ReactDOM.createRoot().render()`
+- **Changed** `ReactDOM.hydrate()` → `ReactDOM.hydrateRoot()`
+- **Added** `currentRoot` variable for root management
+- **Added** `unmount()` method for cleanup
+
+```javascript
+// Before (React 16/17)
+ReactDOM.render(element, container);
+ReactDOM.hydrate(element, container);
+
+// After (React 18)
+const root = ReactDOM.createRoot(container);
+root.render(element);
+
+const root = ReactDOM.hydrateRoot(container, element);
+```
+
+### 2. React Component Node (`react-component-node.js`)
+
+**File**: `packages/noodl-viewer-react/src/react-component-node.js`
+
+- **Removed** `ReactDOM.findDOMNode()` usage (deprecated in React 18)
+- **Added** `_domElement` storage in `NoodlReactComponent` ref callback
+- **Updated** `getDOMElement()` method to use stored DOM element reference
+- **Removed** unused `ReactDOM` import after findDOMNode removal
+
+```javascript
+// Before (React 16/17)
+import ReactDOM from 'react-dom';
+// ...
+const domElement = ReactDOM.findDOMNode(ref);
+
+// After (React 18)
+// No ReactDOM import needed
+// DOM element stored via ref callback
+if (ref && ref instanceof Element) {
+  noodlNode._domElement = ref;
+}
+```
+
+### 3. Group Component (`Group.tsx`)
+
+**File**: `packages/noodl-viewer-react/src/components/visual/Group/Group.tsx`
+
+- **Converted** `UNSAFE_componentWillReceiveProps` → `componentDidUpdate(prevProps)`
+- **Merged** scroll initialization logic into single `componentDidUpdate`
+
+### 4. Drag Component (`Drag.tsx`)
+
+**File**: `packages/noodl-viewer-react/src/components/visual/Drag/Drag.tsx`
+
+- **Converted** `UNSAFE_componentWillReceiveProps` → `componentDidUpdate(prevProps)`
+
+### 5. UMD Bundles (`static/shared/`)
+
+**Files**:
+- `packages/noodl-viewer-react/static/shared/react.production.min.js`
+- `packages/noodl-viewer-react/static/shared/react-dom.production.min.js`
+
+- **Updated** from React 16.8.1 to React 18.3.1 UMD bundles
+- Downloaded from `unpkg.com/react@18.3.1/umd/`
+
+### 6. SSR Package (`static/ssr/package.json`)
+
+**File**: `packages/noodl-viewer-react/static/ssr/package.json`
+
+- **Updated** `react` dependency: `^17.0.2` → `^18.3.1`
+- **Updated** `react-dom` dependency: `^17.0.2` → `^18.3.1`
+
+---
+
+## API Migration Summary
+
+| Old API (React 16/17) | New API (React 18) | Status |
+|----------------------|-------------------|--------|
+| `ReactDOM.render()` | `ReactDOM.createRoot().render()` | ✅ Migrated |
+| `ReactDOM.hydrate()` | `ReactDOM.hydrateRoot()` | ✅ Migrated |
+| `ReactDOM.findDOMNode()` | Ref callbacks with DOM storage | ✅ Migrated |
+| `UNSAFE_componentWillReceiveProps` | `componentDidUpdate(prevProps)` | ✅ Migrated |
+
+---
+
+## Build Verification
+
+- ✅ `npm run ci:build:viewer` passed successfully
+- ✅ Webpack compiled with no errors
+- ✅ React externals properly configured (`external "React"`, `external "ReactDOM"`)
+
+---
+
+## Why React 18.3.1 Instead of React 19?
+
+React 19 (released December 2024) **removed UMD build support**. The Noodl runtime architecture relies on loading React as external UMD bundles via webpack externals:
+
+```javascript
+// webpack.config.js
+externals: {
+  react: 'React',
+  'react-dom': 'ReactDOM'
+}
+```
+
+React 18.3.1 is:
+- The last version with official UMD bundles
+- Fully compatible with createRoot/hydrateRoot APIs
+- Provides a stable foundation for deployed projects
+
+Future consideration: Evaluate ESM-based loading or custom React 19 bundle generation.
+
+---
+
+## Files Modified
+
+1. `packages/noodl-viewer-react/noodl-viewer-react.js`
+2. `packages/noodl-viewer-react/src/react-component-node.js`
+3. `packages/noodl-viewer-react/src/components/visual/Group/Group.tsx`
+4. `packages/noodl-viewer-react/src/components/visual/Drag/Drag.tsx`
+5. `packages/noodl-viewer-react/static/shared/react.production.min.js`
+6. `packages/noodl-viewer-react/static/shared/react-dom.production.min.js`
+7. `packages/noodl-viewer-react/static/ssr/package.json`
+8. `dev-docs/reference/LEARNINGS-RUNTIME.md` (created - runtime documentation)

dev-docs/tasks/phase-2/TASK-003-react-19-runtime/CHECKLIST.md

@@ -0,0 +1,86 @@
+# TASK-003: Runtime React 18.3.1 Upgrade - CHECKLIST
+
+## Status: ✅ COMPLETE
+
+---
+
+## Code Migration
+
+- [x] **Main entry point** - Update `noodl-viewer-react.js`
+  - [x] Replace `ReactDOM.render()` with `createRoot().render()`
+  - [x] Replace `ReactDOM.hydrate()` with `hydrateRoot()`
+  - [x] Add root management (`currentRoot` variable)
+  - [x] Add `unmount()` method
+
+- [x] **React component node** - Update `react-component-node.js`
+  - [x] Remove `ReactDOM.findDOMNode()` usage
+  - [x] Add DOM element storage via ref callback
+  - [x] Update `getDOMElement()` to use stored reference
+  - [x] Remove unused `ReactDOM` import
+
+- [x] **Group component** - Update `Group.tsx`
+  - [x] Convert `UNSAFE_componentWillReceiveProps` to `componentDidUpdate`
+
+- [x] **Drag component** - Update `Drag.tsx`
+  - [x] Convert `UNSAFE_componentWillReceiveProps` to `componentDidUpdate`
+
+---
+
+## UMD Bundles
+
+- [x] **Download React 18.3.1 bundles** to `static/shared/`
+  - [x] `react.production.min.js` (10.7KB)
+  - [x] `react-dom.production.min.js` (128KB)
+
+> Note: React 19 removed UMD builds. React 18.3.1 is the latest with UMD support.
+
+---
+
+## SSR Configuration
+
+- [x] **Update SSR package.json** - `static/ssr/package.json`
+  - [x] Update `react` to `^18.3.1`
+  - [x] Update `react-dom` to `^18.3.1`
+
+---
+
+## Build Verification
+
+- [x] **Run viewer build** - `npm run ci:build:viewer`
+  - [x] Webpack compiles without errors
+  - [x] React externals properly configured
+
+---
+
+## Documentation
+
+- [x] **Create CHANGELOG.md** - Document all changes
+- [x] **Create CHECKLIST.md** - This file
+- [x] **Create LEARNINGS-RUNTIME.md** - Runtime architecture docs in `dev-docs/reference/`
+
+---
+
+## Testing (Manual)
+
+- [ ] **Test in editor** - Open project and verify preview works
+- [ ] **Test deployed project** - Verify published projects render correctly
+- [ ] **Test SSR** - Verify server-side rendering works (if applicable)
+
+> Note: Manual testing requires running the editor. Build verification passed.
+
+---
+
+## Summary
+
+| Category | Items | Completed |
+|----------|-------|-----------|
+| Code Migration | 4 files | ✅ 4/4 |
+| UMD Bundles | 2 files | ✅ 2/2 |
+| SSR Config | 1 file | ✅ 1/1 |
+| Build | 1 verification | ✅ 1/1 |
+| Documentation | 3 files | ✅ 3/3 |
+| Manual Testing | 3 items | ⏳ Pending |
+
+**Overall: 11/14 items complete (79%)**
+
+Manual testing deferred to integration testing phase.

dev-docs/tasks/phase-2/TASK-003-react-19-runtime/CLINE-REACT19-TASK-RULES.md

@@ -0,0 +1,132 @@
+# Cline Rules: Runtime React 19 Upgrade
+
+## Task Context
+Upgrading noodl-viewer-react runtime from React 16.8 to React 19. This is the code that runs in deployed user projects.
+
+## Key Constraints
+
+### DO NOT
+- Touch the editor code (noodl-editor) - that's a separate task
+- Remove any existing node functionality
+- Change the public API of `window.Noodl._viewerReact`
+- Batch multiple large changes in one commit
+
+### MUST DO
+- Backup files before replacing
+- Test after each significant change
+- Watch browser console for React errors
+- Preserve existing node behavior exactly
+
+## Critical Files
+
+### Replace These React Bundles
+```
+packages/noodl-viewer-react/static/shared/react.production.min.js
+packages/noodl-viewer-react/static/shared/react-dom.production.min.js
+```
+Source: https://unpkg.com/react@19/umd/
+
+### Update Entry Point (location TBD - search for it)
+Find where `_viewerReact.render` is defined and change:
+```javascript
+// OLD
+ReactDOM.render(<App />, element);
+
+// NEW
+import { createRoot } from 'react-dom/client';
+const root = createRoot(element);
+root.render(<App />);
+```
+
+### Update SSR
+```
+packages/noodl-viewer-react/static/ssr/package.json  // Change React version
+packages/noodl-viewer-react/static/ssr/index.js      // May need API updates
+```
+
+## Search Patterns for Broken Code
+
+Run these and fix any matches:
+```bash
+# CRITICAL - These are REMOVED in React 19
+grep -rn "componentWillMount" src/
+grep -rn "componentWillReceiveProps" src/
+grep -rn "componentWillUpdate" src/
+grep -rn "UNSAFE_componentWill" src/
+
+# REMOVED - String refs
+grep -rn 'ref="' src/
+grep -rn "ref='" src/
+
+# REMOVED - Legacy context
+grep -rn "contextTypes" src/
+grep -rn "childContextTypes" src/
+grep -rn "getChildContext" src/
+```
+
+## Lifecycle Migration Patterns
+
+### componentWillMount → componentDidMount
+```javascript
+// Just move the code - componentDidMount runs after first render but that's usually fine
+componentDidMount() {
+  // code that was in componentWillMount
+}
+```
+
+### componentWillReceiveProps → getDerivedStateFromProps
+```javascript
+static getDerivedStateFromProps(props, state) {
+  if (props.value !== state.prevValue) {
+    return { computed: derive(props.value), prevValue: props.value };
+  }
+  return null;
+}
+```
+
+### String refs → createRef
+```javascript
+// OLD
+<input ref="myInput" />
+this.refs.myInput.focus();
+
+// NEW
+this.myInputRef = React.createRef();
+<input ref={this.myInputRef} />
+this.myInputRef.current.focus();
+```
+
+## Testing Checkpoints
+
+After each phase, verify in browser:
+1. ✓ Editor preview loads without console errors
+2. ✓ Basic nodes render (Group, Text, Button)
+3. ✓ Click events fire signals
+4. ✓ Hover states work
+5. ✓ Repeater renders lists
+6. ✓ Deploy build works
+
+## Red Flags - Stop and Ask
+
+- White screen with no console output
+- "Invalid hook call" error
+- Any error mentioning "fiber" or "reconciler"
+- Build fails after React bundle replacement
+
+## Commit Strategy
+
+```
+feat(runtime): replace React bundles with v19
+feat(runtime): migrate entry point to createRoot
+fix(runtime): update [node-name] for React 19 compatibility
+feat(runtime): update SSR for React 19
+docs: add React 19 migration guide
+```
+
+## When Done
+
+- [ ] All grep searches return zero results for deprecated patterns
+- [ ] Editor preview works
+- [ ] Deploy build works
+- [ ] No React warnings in console
+- [ ] SSR still functions (if it was working before)

dev-docs/tasks/phase-2/TASK-003-react-19-runtime/TASK-RUNTIME-REACT19.md

@@ -0,0 +1,420 @@
+# TASK: Runtime React 19 Upgrade
+
+## Overview
+
+Upgrade the OpenNoodl runtime (`noodl-viewer-react`) from React 16.8/17 to React 19. This affects deployed/published projects.
+
+**Priority:** HIGH - Do this BEFORE adding new nodes to avoid migration debt.
+
+**Estimated Duration:** 2-3 days focused work
+
+## Goals
+
+1. Replace bundled React 16.8 with React 19
+2. Update entry point rendering to use `createRoot()` API
+3. Ensure all built-in nodes are React 19 compatible
+4. Update SSR to use React 19 server APIs
+5. Maintain backward compatibility for simple user projects
+
+## Pre-Work Checklist
+
+Before starting, confirm you can:
+- [ ] Run the editor locally (`npm run dev`)
+- [ ] Build the viewer-react package
+- [ ] Create a test project with various nodes (Group, Text, Button, Repeater, etc.)
+- [ ] Deploy a test project
+
+## Phase 1: React Bundle Replacement
+
+### 1.1 Locate Current React Bundles
+
+```bash
+# Find all React bundles in the runtime
+find packages/noodl-viewer-react -name "react*.js" -o -name "react*.min.js"
+```
+
+Expected locations:
+- `packages/noodl-viewer-react/static/shared/react.production.min.js`
+- `packages/noodl-viewer-react/static/shared/react-dom.production.min.js`
+
+### 1.2 Download React 19 Production Bundles
+
+Get React 19 UMD production builds from:
+- https://unpkg.com/react@19/umd/react.production.min.js
+- https://unpkg.com/react-dom@19/umd/react-dom.production.min.js
+
+```bash
+cd packages/noodl-viewer-react/static/shared
+
+# Backup current files
+cp react.production.min.js react.production.min.js.backup
+cp react-dom.production.min.js react-dom.production.min.js.backup
+
+# Download React 19
+curl -o react.production.min.js https://unpkg.com/react@19/umd/react.production.min.js
+curl -o react-dom.production.min.js https://unpkg.com/react-dom@19/umd/react-dom.production.min.js
+```
+
+### 1.3 Update SSR Dependencies
+
+File: `packages/noodl-viewer-react/static/ssr/package.json`
+
+```json
+{
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
+```
+
+## Phase 2: Entry Point Migration
+
+### 2.1 Locate Entry Point Render Implementation
+
+Search for where `_viewerReact.render` and `_viewerReact.renderDeployed` are defined:
+
+```bash
+grep -r "_viewerReact" packages/noodl-viewer-react/src --include="*.js" --include="*.ts"
+grep -r "ReactDOM.render" packages/noodl-viewer-react/src --include="*.js" --include="*.ts"
+```
+
+### 2.2 Update to createRoot API
+
+**Before (React 17):**
+```javascript
+import ReactDOM from 'react-dom';
+
+window.Noodl._viewerReact = {
+  render(rootElement, modules, options) {
+    const App = createApp(modules, options);
+    ReactDOM.render(<App />, rootElement);
+  },
+  
+  renderDeployed(rootElement, modules, projectData) {
+    const App = createDeployedApp(modules, projectData);
+    ReactDOM.render(<App />, rootElement);
+  }
+};
+```
+
+**After (React 19):**
+```javascript
+import { createRoot } from 'react-dom/client';
+
+// Store root reference for potential unmounting
+let currentRoot = null;
+
+window.Noodl._viewerReact = {
+  render(rootElement, modules, options) {
+    const App = createApp(modules, options);
+    currentRoot = createRoot(rootElement);
+    currentRoot.render(<App />);
+  },
+  
+  renderDeployed(rootElement, modules, projectData) {
+    const App = createDeployedApp(modules, projectData);
+    currentRoot = createRoot(rootElement);
+    currentRoot.render(<App />);
+  },
+  
+  unmount() {
+    if (currentRoot) {
+      currentRoot.unmount();
+      currentRoot = null;
+    }
+  }
+};
+```
+
+### 2.3 Update SSR Rendering
+
+File: `packages/noodl-viewer-react/static/ssr/index.js`
+
+**Before:**
+```javascript
+const ReactDOMServer = require('react-dom/server');
+const output = ReactDOMServer.renderToString(ViewerComponent);
+```
+
+**After (React 19):**
+```javascript
+// React 19 server APIs - check if this package structure changed
+const { renderToString } = require('react-dom/server');
+const output = renderToString(ViewerComponent);
+```
+
+Note: React 19 server rendering APIs should be similar but verify the import paths.
+
+## Phase 3: Built-in Node Audit
+
+### 3.1 Search for Legacy Lifecycle Methods
+
+These are REMOVED in React 19 (not just deprecated):
+
+```bash
+cd packages/noodl-viewer-react
+
+# Search for dangerous patterns
+grep -rn "componentWillMount" src/
+grep -rn "componentWillReceiveProps" src/
+grep -rn "componentWillUpdate" src/
+grep -rn "UNSAFE_componentWillMount" src/
+grep -rn "UNSAFE_componentWillReceiveProps" src/
+grep -rn "UNSAFE_componentWillUpdate" src/
+```
+
+### 3.2 Search for Other Deprecated Patterns
+
+```bash
+# String refs (removed)
+grep -rn "ref=\"" src/
+grep -rn "ref='" src/
+
+# Legacy context (removed)
+grep -rn "contextTypes" src/
+grep -rn "childContextTypes" src/
+grep -rn "getChildContext" src/
+
+# createFactory (removed)
+grep -rn "createFactory" src/
+
+# findDOMNode (deprecated, may still work)
+grep -rn "findDOMNode" src/
+```
+
+### 3.3 Fix Legacy Patterns
+
+**componentWillMount → useEffect or componentDidMount:**
+```javascript
+// Before (class component)
+componentWillMount() {
+  this.setupData();
+}
+
+// After (class component)
+componentDidMount() {
+  this.setupData();
+}
+
+// Or convert to functional
+useEffect(() => {
+  setupData();
+}, []);
+```
+
+**componentWillReceiveProps → getDerivedStateFromProps or useEffect:**
+```javascript
+// Before
+componentWillReceiveProps(nextProps) {
+  if (nextProps.value !== this.props.value) {
+    this.setState({ derived: computeDerived(nextProps.value) });
+  }
+}
+
+// After (class component)
+static getDerivedStateFromProps(props, state) {
+  if (props.value !== state.prevValue) {
+    return {
+      derived: computeDerived(props.value),
+      prevValue: props.value
+    };
+  }
+  return null;
+}
+
+// Or functional with useEffect
+useEffect(() => {
+  setDerived(computeDerived(value));
+}, [value]);
+```
+
+**String refs → createRef or useRef:**
+```javascript
+// Before
+<input ref="myInput" />
+this.refs.myInput.focus();
+
+// After (class)
+constructor() {
+  this.myInputRef = React.createRef();
+}
+<input ref={this.myInputRef} />
+this.myInputRef.current.focus();
+
+// After (functional)
+const myInputRef = useRef();
+<input ref={myInputRef} />
+myInputRef.current.focus();
+```
+
+## Phase 4: createNodeFromReactComponent Wrapper
+
+### 4.1 Locate the Wrapper Implementation
+
+```bash
+grep -rn "createNodeFromReactComponent" packages/noodl-viewer-react/src --include="*.js" --include="*.ts"
+```
+
+### 4.2 Audit the Wrapper
+
+Check if the wrapper:
+1. Uses any legacy lifecycle methods internally
+2. Uses legacy context for passing data
+3. Uses findDOMNode
+
+The wrapper likely manages:
+- `forceUpdate()` calls (should still work)
+- Ref handling (ensure using callback refs or createRef)
+- Style injection
+- Child management
+
+### 4.3 Update if Necessary
+
+If the wrapper uses class components internally, ensure they don't use deprecated lifecycles.
+
+## Phase 5: Testing
+
+### 5.1 Create Test Project
+
+Create a Noodl project that uses:
+- [ ] Group nodes (basic container)
+- [ ] Text nodes
+- [ ] Button nodes with click handlers
+- [ ] Image nodes
+- [ ] Repeater (For Each) nodes
+- [ ] Navigation/Page Router
+- [ ] States and Variants
+- [ ] Custom JavaScript nodes (if the API supports it)
+
+### 5.2 Test Scenarios
+
+1. **Basic Rendering**
+   - Open project in editor preview
+   - Verify all nodes render correctly
+
+2. **Interactions**
+   - Click buttons, verify signals fire
+   - Hover states work
+   - Input fields accept text
+
+3. **Dynamic Updates**
+   - Repeater data changes reflect in UI
+   - State changes trigger re-renders
+
+4. **Navigation**
+   - Page transitions work
+   - URL routing works
+
+5. **Deploy Test**
+   - Export/deploy project
+   - Open in browser
+   - Verify everything works in production build
+
+### 5.3 SSR Test (if applicable)
+
+```bash
+cd packages/noodl-viewer-react/static/ssr
+npm install
+npm run build
+npm start
+# Visit http://localhost:3000 and verify server rendering works
+```
+
+## Phase 6: Documentation & Migration Guide
+
+### 6.1 Create Migration Guide for Users
+
+File: `docs/REACT-19-MIGRATION.md`
+
+```markdown
+# React 19 Runtime Migration Guide
+
+## What Changed
+
+OpenNoodl runtime now uses React 19. This affects deployed projects.
+
+## Who Needs to Act
+
+Most projects will work without changes. You may need updates if you have:
+- Custom JavaScript nodes using React class components
+- Custom modules using legacy React patterns
+
+## Breaking Changes
+
+These patterns NO LONGER WORK:
+
+1. **componentWillMount** - Use componentDidMount instead
+2. **componentWillReceiveProps** - Use getDerivedStateFromProps or effects
+3. **componentWillUpdate** - Use getSnapshotBeforeUpdate
+4. **String refs** - Use createRef or useRef
+5. **Legacy context** - Use React.createContext
+
+## How to Check Your Project
+
+1. Open your project in the new OpenNoodl
+2. Check the console for warnings
+3. Test all interactive features
+4. If issues, review custom JavaScript code
+
+## Need Help?
+
+- Community Discord: [link]
+- GitHub Issues: [link]
+```
+
+## Verification Checklist
+
+Before considering this task complete:
+
+- [ ] React 19 bundles are in place
+- [ ] Entry point uses `createRoot()`
+- [ ] All built-in nodes render correctly
+- [ ] No console errors about deprecated APIs
+- [ ] Deploy builds work
+- [ ] SSR works (if used)
+- [ ] Documentation updated
+
+## Rollback Plan
+
+If issues are found:
+1. Restore backup React bundles
+2. Revert entry point changes
+3. Document what broke for future fix
+
+Keep backups:
+```bash
+packages/noodl-viewer-react/static/shared/react.production.min.js.backup
+packages/noodl-viewer-react/static/shared/react-dom.production.min.js.backup
+```
+
+## Files Modified Summary
+
+| File | Change |
+|------|--------|
+| `static/shared/react.production.min.js` | Replace with React 19 |
+| `static/shared/react-dom.production.min.js` | Replace with React 19 |
+| `static/ssr/package.json` | Update React version |
+| `src/[viewer-entry].js` | Use createRoot API |
+| `src/nodes/*.js` | Fix any legacy patterns |
+
+## Notes for Cline
+
+1. **Confidence Check:** Before each major change, verify you understand what the code does
+2. **Small Steps:** Make one change, test, commit. Don't batch large changes.
+3. **Console is King:** Watch for React warnings in browser console
+4. **Backup First:** Always backup before replacing files
+5. **Ask if Unsure:** If you hit something unexpected, pause and analyze
+
+## Expected Warnings You Can Ignore
+
+React 19 may show these development-only warnings that are OK:
+- "React DevTools" messages
+- Strict Mode double-render warnings (expected behavior)
+
+## Red Flags - Stop and Investigate
+
+- "Invalid hook call" - Something is using hooks incorrectly
+- "Cannot read property of undefined" - Likely a ref issue
+- White screen with no errors - Check the console in DevTools
+- "Element type is invalid" - Component not exported correctly

dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/00-OVERVIEW.md

@@ -0,0 +1,205 @@
+# React 19 Migration System - Implementation Overview
+
+## Feature Summary
+
+A comprehensive migration system that allows users to safely upgrade legacy Noodl projects (React 17) to the new OpenNoodl runtime (React 19), with optional AI-assisted code migration.
+
+## Core Principles
+
+1. **Never modify originals** - All migrations create a copy first
+2. **Transparent progress** - Users see exactly what's happening and why
+3. **Graceful degradation** - Partial success is still useful
+4. **Cost consent** - AI assistance is opt-in with explicit budgets
+5. **No dead ends** - Every failure state has a clear next step
+
+## Feature Components
+
+| Spec | Description | Priority |
+|------|-------------|----------|
+| [01-PROJECT-DETECTION](./01-PROJECT-DETECTION.md) | Detecting legacy projects and visual indicators | P0 |
+| [02-MIGRATION-WIZARD](./02-MIGRATION-WIZARD.md) | The migration flow UI and logic | P0 |
+| [03-AI-MIGRATION](./03-AI-MIGRATION.md) | AI-assisted code migration system | P1 |
+| [04-POST-MIGRATION-UX](./04-POST-MIGRATION-UX.md) | Editor experience after migration | P0 |
+| [05-NEW-PROJECT-NOTICE](./05-NEW-PROJECT-NOTICE.md) | Messaging for new project creation | P2 |
+
+## Implementation Order
+
+### Phase 1: Core Migration (No AI)
+1. Project detection and version checking
+2. Migration wizard UI (scan, report, execute)
+3. Automatic migrations (no code changes needed)
+4. Post-migration indicators in editor
+
+### Phase 2: AI-Assisted Migration
+1. API key configuration and storage
+2. Budget control system
+3. Claude integration for code migration
+4. Retry logic and failure handling
+
+### Phase 3: Polish
+1. New project messaging
+2. Migration log viewer
+3. "Dismiss" functionality for warnings
+4. Help documentation links
+
+## Data Structures
+
+### Project Manifest Addition
+
+```typescript
+// Added to project.json
+interface ProjectManifest {
+  // Existing fields...
+  
+  // New migration tracking
+  runtimeVersion?: 'react17' | 'react19';
+  migratedFrom?: {
+    version: 'react17';
+    date: string;
+    originalPath: string;
+    aiAssisted: boolean;
+  };
+  migrationNotes?: {
+    [componentId: string]: ComponentMigrationNote;
+  };
+}
+
+interface ComponentMigrationNote {
+  status: 'auto' | 'ai-migrated' | 'needs-review' | 'manually-fixed';
+  issues?: string[];
+  aiSuggestion?: string;
+  dismissedAt?: string;
+}
+```
+
+### Migration Session State
+
+```typescript
+interface MigrationSession {
+  id: string;
+  sourceProject: {
+    path: string;
+    name: string;
+    version: 'react17';
+  };
+  targetPath: string;
+  status: 'scanning' | 'reporting' | 'migrating' | 'complete' | 'failed';
+  scan?: MigrationScan;
+  progress?: MigrationProgress;
+  result?: MigrationResult;
+  aiConfig?: AIConfig;
+}
+
+interface MigrationScan {
+  totalComponents: number;
+  totalNodes: number;
+  customJsFiles: number;
+  categories: {
+    automatic: ComponentInfo[];
+    simpleFixes: ComponentInfo[];
+    needsReview: ComponentInfo[];
+  };
+}
+
+interface ComponentInfo {
+  id: string;
+  name: string;
+  path: string;
+  issues: MigrationIssue[];
+}
+
+interface MigrationIssue {
+  type: 'componentWillMount' | 'componentWillReceiveProps' | 
+        'componentWillUpdate' | 'stringRef' | 'legacyContext' | 
+        'createFactory' | 'other';
+  description: string;
+  location: { file: string; line: number; };
+  autoFixable: boolean;
+  estimatedAiCost?: number;
+}
+```
+
+## File Structure
+
+```
+packages/noodl-editor/src/
+├── editor/src/
+│   ├── models/
+│   │   └── migration/
+│   │       ├── MigrationSession.ts
+│   │       ├── ProjectScanner.ts
+│   │       ├── MigrationExecutor.ts
+│   │       └── AIAssistant.ts
+│   ├── views/
+│   │   └── migration/
+│   │       ├── MigrationWizard.tsx
+│   │       ├── ScanProgress.tsx
+│   │       ├── MigrationReport.tsx
+│   │       ├── AIConfigPanel.tsx
+│   │       ├── MigrationProgress.tsx
+│   │       └── MigrationComplete.tsx
+│   └── utils/
+│       └── migration/
+│           ├── codeAnalyzer.ts
+│           ├── codeTransformer.ts
+│           └── costEstimator.ts
+```
+
+## Dependencies
+
+### New Dependencies Needed
+
+```json
+{
+  "@anthropic-ai/sdk": "^0.24.0",
+  "@babel/parser": "^7.24.0",
+  "@babel/traverse": "^7.24.0",
+  "@babel/generator": "^7.24.0"
+}
+```
+
+### Why These Dependencies
+
+- **@anthropic-ai/sdk** - Official Anthropic SDK for Claude API calls
+- **@babel/*** - Parse and transform JavaScript/JSX for code analysis and automatic fixes
+
+## Security Considerations
+
+1. **API Key Storage**
+   - Store in electron-store with encryption
+   - Never log or transmit to OpenNoodl servers
+   - Clear option to remove stored key
+
+2. **Cost Controls**
+   - Hard budget limits enforced client-side
+   - Cannot be bypassed without explicit user action
+   - Clear display of costs before and after
+
+3. **Code Execution**
+   - AI-generated code is shown to user before applying
+   - Verification step before saving changes
+   - Full undo capability via project copy
+
+## Testing Strategy
+
+### Unit Tests
+- ProjectScanner correctly identifies all issue types
+- Cost estimator accuracy within 20%
+- Code transformer handles edge cases
+
+### Integration Tests
+- Full migration flow with mock AI responses
+- Budget controls enforce limits
+- Project copy is byte-identical to original
+
+### Manual Testing
+- Test with real legacy Noodl projects
+- Test with projects containing various issue types
+- Test AI migration with real API calls (budget: $5)
+
+## Success Metrics
+
+- 95% of projects with only built-in nodes migrate automatically
+- AI successfully migrates 80% of custom code on first attempt
+- Zero data loss incidents
+- Average migration time < 5 minutes for typical project

dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/01-PROJECT-DETECTION.md

@@ -0,0 +1,533 @@
+# 01 - Project Detection and Visual Indicators
+
+## Overview
+
+Detect legacy React 17 projects and display clear visual indicators throughout the UI so users understand which projects need migration.
+
+## Detection Logic
+
+### When to Check
+
+1. **On app startup** - Scan recent projects list
+2. **On "Open Project"** - Check selected folder
+3. **On project list refresh** - Re-scan visible projects
+
+### How to Detect Runtime Version
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/migration/ProjectScanner.ts
+
+interface RuntimeVersionInfo {
+  version: 'react17' | 'react19' | 'unknown';
+  confidence: 'high' | 'medium' | 'low';
+  indicators: string[];
+}
+
+async function detectRuntimeVersion(projectPath: string): Promise<RuntimeVersionInfo> {
+  const indicators: string[] = [];
+  
+  // Check 1: Explicit version in project.json (most reliable)
+  const projectJson = await readProjectJson(projectPath);
+  if (projectJson.runtimeVersion) {
+    return {
+      version: projectJson.runtimeVersion,
+      confidence: 'high',
+      indicators: ['Explicit runtimeVersion field in project.json']
+    };
+  }
+  
+  // Check 2: Look for migratedFrom field (indicates already migrated)
+  if (projectJson.migratedFrom) {
+    return {
+      version: 'react19',
+      confidence: 'high',
+      indicators: ['Project has migratedFrom metadata']
+    };
+  }
+  
+  // Check 3: Check project version number
+  // OpenNoodl 1.2+ = React 19, earlier = React 17
+  const editorVersion = projectJson.editorVersion || projectJson.version;
+  if (editorVersion) {
+    const [major, minor] = editorVersion.split('.').map(Number);
+    if (major >= 1 && minor >= 2) {
+      indicators.push(`Editor version ${editorVersion} >= 1.2`);
+      return { version: 'react19', confidence: 'high', indicators };
+    } else {
+      indicators.push(`Editor version ${editorVersion} < 1.2`);
+      return { version: 'react17', confidence: 'high', indicators };
+    }
+  }
+  
+  // Check 4: Heuristic - scan for React 17 specific patterns in custom code
+  const customCodePatterns = await scanForLegacyPatterns(projectPath);
+  if (customCodePatterns.found) {
+    indicators.push(...customCodePatterns.patterns);
+    return { version: 'react17', confidence: 'medium', indicators };
+  }
+  
+  // Check 5: If project was created before OpenNoodl fork, assume React 17
+  const projectCreated = projectJson.createdAt || await getProjectCreationDate(projectPath);
+  if (projectCreated && new Date(projectCreated) < new Date('2024-01-01')) {
+    indicators.push('Project created before OpenNoodl fork');
+    return { version: 'react17', confidence: 'medium', indicators };
+  }
+  
+  // Default: Assume React 19 for truly unknown projects
+  return {
+    version: 'unknown',
+    confidence: 'low',
+    indicators: ['No version indicators found']
+  };
+}
+```
+
+### Legacy Pattern Scanner
+
+```typescript
+// Quick scan for legacy React patterns in JavaScript files
+
+interface LegacyPatternScan {
+  found: boolean;
+  patterns: string[];
+  files: Array<{ path: string; line: number; pattern: string; }>;
+}
+
+async function scanForLegacyPatterns(projectPath: string): Promise<LegacyPatternScan> {
+  const jsFiles = await glob(`${projectPath}/**/*.{js,jsx,ts,tsx}`, {
+    ignore: ['**/node_modules/**']
+  });
+  
+  const legacyPatterns = [
+    { regex: /componentWillMount\s*\(/, name: 'componentWillMount' },
+    { regex: /componentWillReceiveProps\s*\(/, name: 'componentWillReceiveProps' },
+    { regex: /componentWillUpdate\s*\(/, name: 'componentWillUpdate' },
+    { regex: /UNSAFE_componentWillMount/, name: 'UNSAFE_componentWillMount' },
+    { regex: /UNSAFE_componentWillReceiveProps/, name: 'UNSAFE_componentWillReceiveProps' },
+    { regex: /UNSAFE_componentWillUpdate/, name: 'UNSAFE_componentWillUpdate' },
+    { regex: /ref\s*=\s*["'][^"']+["']/, name: 'String ref' },
+    { regex: /contextTypes\s*=/, name: 'Legacy contextTypes' },
+    { regex: /childContextTypes\s*=/, name: 'Legacy childContextTypes' },
+    { regex: /getChildContext\s*\(/, name: 'getChildContext' },
+    { regex: /React\.createFactory/, name: 'createFactory' },
+  ];
+  
+  const results: LegacyPatternScan = {
+    found: false,
+    patterns: [],
+    files: []
+  };
+  
+  for (const file of jsFiles) {
+    const content = await fs.readFile(file, 'utf-8');
+    const lines = content.split('\n');
+    
+    for (const pattern of legacyPatterns) {
+      lines.forEach((line, index) => {
+        if (pattern.regex.test(line)) {
+          results.found = true;
+          if (!results.patterns.includes(pattern.name)) {
+            results.patterns.push(pattern.name);
+          }
+          results.files.push({
+            path: file,
+            line: index + 1,
+            pattern: pattern.name
+          });
+        }
+      });
+    }
+  }
+  
+  return results;
+}
+```
+
+## Visual Indicators
+
+### Projects Panel - Recent Projects List
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/ProjectsPanel/ProjectCard.tsx
+
+interface ProjectCardProps {
+  project: RecentProject;
+  runtimeInfo: RuntimeVersionInfo;
+}
+
+function ProjectCard({ project, runtimeInfo }: ProjectCardProps) {
+  const isLegacy = runtimeInfo.version === 'react17';
+  const [expanded, setExpanded] = useState(false);
+  
+  return (
+    <div className={css['project-card', isLegacy && 'project-card--legacy']}>
+      <div className={css['project-card__header']}>
+        <FolderIcon />
+        <div className={css['project-card__info']}>
+          <h3 className={css['project-card__name']}>
+            {project.name}
+            {isLegacy && (
+              <Tooltip content="This project uses React 17 and needs migration">
+                <WarningIcon className={css['project-card__warning-icon']} />
+              </Tooltip>
+            )}
+          </h3>
+          <span className={css['project-card__date']}>
+            Last opened: {formatDate(project.lastOpened)}
+          </span>
+        </div>
+      </div>
+      
+      {isLegacy && (
+        <div className={css['project-card__legacy-banner']}>
+          <div className={css['legacy-banner__content']}>
+            <WarningIcon size={16} />
+            <span>Legacy Runtime (React 17)</span>
+          </div>
+          <button 
+            className={css['legacy-banner__expand']}
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? 'Less' : 'More'}
+          </button>
+        </div>
+      )}
+      
+      {isLegacy && expanded && (
+        <div className={css['project-card__legacy-details']}>
+          <p>
+            This project needs migration to work with OpenNoodl 1.2+.
+            Your original project will remain untouched.
+          </p>
+          <div className={css['legacy-details__actions']}>
+            <Button 
+              variant="primary" 
+              onClick={() => openMigrationWizard(project)}
+            >
+              Migrate Project
+            </Button>
+            <Button 
+              variant="secondary"
+              onClick={() => openProjectReadOnly(project)}
+            >
+              Open Read-Only
+            </Button>
+            <Button 
+              variant="ghost"
+              onClick={() => openDocs('migration-guide')}
+            >
+              Learn More
+            </Button>
+          </div>
+        </div>
+      )}
+      
+      {!isLegacy && (
+        <div className={css['project-card__actions']}>
+          <Button onClick={() => openProject(project)}>Open</Button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### CSS Styles
+
+```scss
+// packages/noodl-editor/src/editor/src/styles/projects-panel.scss
+
+.project-card {
+  background: var(--color-bg-secondary);
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  transition: border-color 0.2s;
+  
+  &:hover {
+    border-color: var(--color-border-hover);
+  }
+  
+  &--legacy {
+    border-color: var(--color-warning-border);
+    
+    &:hover {
+      border-color: var(--color-warning-border-hover);
+    }
+  }
+}
+
+.project-card__warning-icon {
+  color: var(--color-warning);
+  margin-left: 8px;
+  width: 16px;
+  height: 16px;
+}
+
+.project-card__legacy-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--color-warning-bg);
+  border-radius: 4px;
+  padding: 8px 12px;
+  margin-top: 12px;
+}
+
+.legacy-banner__content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-warning-text);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.project-card__legacy-details {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-border);
+  
+  p {
+    color: var(--color-text-secondary);
+    font-size: 13px;
+    margin-bottom: 12px;
+  }
+}
+
+.legacy-details__actions {
+  display: flex;
+  gap: 8px;
+}
+```
+
+### Open Project Dialog - Legacy Detection
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/dialogs/OpenProjectDialog.tsx
+
+function OpenProjectDialog({ onClose }: { onClose: () => void }) {
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [runtimeInfo, setRuntimeInfo] = useState<RuntimeVersionInfo | null>(null);
+  const [checking, setChecking] = useState(false);
+  
+  const handleFolderSelect = async (path: string) => {
+    setSelectedPath(path);
+    setChecking(true);
+    
+    try {
+      const info = await detectRuntimeVersion(path);
+      setRuntimeInfo(info);
+    } finally {
+      setChecking(false);
+    }
+  };
+  
+  const isLegacy = runtimeInfo?.version === 'react17';
+  
+  return (
+    <Dialog title="Open Project" onClose={onClose}>
+      <FolderPicker 
+        value={selectedPath}
+        onChange={handleFolderSelect}
+      />
+      
+      {checking && (
+        <div className={css['checking-indicator']}>
+          <Spinner size={16} />
+          <span>Checking project version...</span>
+        </div>
+      )}
+      
+      {runtimeInfo && isLegacy && (
+        <LegacyProjectNotice 
+          projectPath={selectedPath}
+          runtimeInfo={runtimeInfo}
+        />
+      )}
+      
+      <DialogActions>
+        <Button variant="secondary" onClick={onClose}>
+          Cancel
+        </Button>
+        
+        {isLegacy ? (
+          <>
+            <Button 
+              variant="secondary"
+              onClick={() => openProjectReadOnly(selectedPath)}
+            >
+              Open Read-Only
+            </Button>
+            <Button 
+              variant="primary"
+              onClick={() => openMigrationWizard(selectedPath)}
+            >
+              Migrate & Open
+            </Button>
+          </>
+        ) : (
+          <Button 
+            variant="primary"
+            disabled={!selectedPath || checking}
+            onClick={() => openProject(selectedPath)}
+          >
+            Open
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function LegacyProjectNotice({ 
+  projectPath, 
+  runtimeInfo 
+}: { 
+  projectPath: string; 
+  runtimeInfo: RuntimeVersionInfo;
+}) {
+  const projectName = path.basename(projectPath);
+  const defaultTargetPath = `${projectPath}-r19`;
+  const [targetPath, setTargetPath] = useState(defaultTargetPath);
+  
+  return (
+    <div className={css['legacy-notice']}>
+      <div className={css['legacy-notice__header']}>
+        <WarningIcon size={20} />
+        <h3>Legacy Project Detected</h3>
+      </div>
+      
+      <p>
+        <strong>"{projectName}"</strong> was created with an older version of 
+        Noodl using React 17. OpenNoodl 1.2+ uses React 19.
+      </p>
+      
+      <p>
+        To open this project, we'll create a migrated copy. 
+        Your original project will remain untouched.
+      </p>
+      
+      <div className={css['legacy-notice__paths']}>
+        <div className={css['path-row']}>
+          <label>Original:</label>
+          <code>{projectPath}</code>
+        </div>
+        <div className={css['path-row']}>
+          <label>Copy:</label>
+          <input 
+            type="text" 
+            value={targetPath}
+            onChange={(e) => setTargetPath(e.target.value)}
+          />
+          <Button 
+            variant="ghost" 
+            size="small"
+            onClick={() => selectFolder().then(setTargetPath)}
+          >
+            Change...
+          </Button>
+        </div>
+      </div>
+      
+      {runtimeInfo.confidence !== 'high' && (
+        <div className={css['legacy-notice__confidence']}>
+          <InfoIcon size={14} />
+          <span>
+            Detection confidence: {runtimeInfo.confidence}. 
+            Indicators: {runtimeInfo.indicators.join(', ')}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## Read-Only Mode
+
+When opening a legacy project in read-only mode:
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/projectmodel.ts
+
+interface ProjectOpenOptions {
+  readOnly?: boolean;
+  legacyMode?: boolean;
+}
+
+async function openProject(path: string, options: ProjectOpenOptions = {}) {
+  const project = await ProjectModel.fromDirectory(path);
+  
+  if (options.readOnly || options.legacyMode) {
+    project.setReadOnly(true);
+    
+    // Show banner in editor
+    EditorBanner.show({
+      type: 'warning',
+      message: 'This project is open in read-only mode. Migrate to make changes.',
+      actions: [
+        { label: 'Migrate Now', onClick: () => openMigrationWizard(path) },
+        { label: 'Dismiss', onClick: () => EditorBanner.hide() }
+      ]
+    });
+  }
+  
+  return project;
+}
+```
+
+### Read-Only Banner Component
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/EditorBanner.tsx
+
+interface EditorBannerProps {
+  type: 'info' | 'warning' | 'error';
+  message: string;
+  actions?: Array<{
+    label: string;
+    onClick: () => void;
+  }>;
+}
+
+function EditorBanner({ type, message, actions }: EditorBannerProps) {
+  return (
+    <div className={css['editor-banner', `editor-banner--${type}`]}>
+      <div className={css['editor-banner__content']}>
+        {type === 'warning' && <WarningIcon size={16} />}
+        {type === 'info' && <InfoIcon size={16} />}
+        {type === 'error' && <ErrorIcon size={16} />}
+        <span>{message}</span>
+      </div>
+      
+      {actions && (
+        <div className={css['editor-banner__actions']}>
+          {actions.map((action, i) => (
+            <Button 
+              key={i}
+              variant={i === 0 ? 'primary' : 'ghost'}
+              size="small"
+              onClick={action.onClick}
+            >
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## Testing Checklist
+
+- [ ] Legacy project shows warning icon in recent projects
+- [ ] Clicking legacy project shows expanded details
+- [ ] "Migrate Project" button opens migration wizard
+- [ ] "Open Read-Only" opens project without changes
+- [ ] Opening folder with legacy project shows detection dialog
+- [ ] Target path can be customized
+- [ ] Read-only mode shows banner
+- [ ] Banner "Migrate Now" opens wizard
+- [ ] New/modern projects open normally without warnings

dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/02-MIGRATION-WIZARD.md

@@ -0,0 +1,994 @@
+# 02 - Migration Wizard
+
+## Overview
+
+A step-by-step wizard that guides users through the migration process. The wizard handles project copying, scanning, reporting, and executing migrations.
+
+## Wizard Steps
+
+1. **Confirm** - Confirm source/target paths
+2. **Scan** - Analyze project for migration needs
+3. **Report** - Show what needs to change
+4. **Configure** - (Optional) Set up AI assistance
+5. **Migrate** - Execute the migration
+6. **Complete** - Summary and next steps
+
+## State Machine
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/migration/MigrationSession.ts
+
+type MigrationStep = 
+  | 'confirm'
+  | 'scanning'
+  | 'report'
+  | 'configureAi'
+  | 'migrating'
+  | 'complete'
+  | 'failed';
+
+interface MigrationSession {
+  id: string;
+  step: MigrationStep;
+  
+  // Source project
+  source: {
+    path: string;
+    name: string;
+    runtimeVersion: 'react17';
+  };
+  
+  // Target (copy) project
+  target: {
+    path: string;
+    copied: boolean;
+  };
+  
+  // Scan results
+  scan?: {
+    completedAt: string;
+    totalComponents: number;
+    totalNodes: number;
+    customJsFiles: number;
+    categories: {
+      automatic: ComponentMigrationInfo[];
+      simpleFixes: ComponentMigrationInfo[];
+      needsReview: ComponentMigrationInfo[];
+    };
+  };
+  
+  // AI configuration
+  ai?: {
+    enabled: boolean;
+    apiKey?: string; // Only stored in memory during session
+    budget: {
+      max: number;
+      spent: number;
+      pauseIncrement: number;
+    };
+  };
+  
+  // Migration progress
+  progress?: {
+    phase: 'copying' | 'automatic' | 'ai-assisted' | 'finalizing';
+    current: number;
+    total: number;
+    currentComponent?: string;
+    log: MigrationLogEntry[];
+  };
+  
+  // Final result
+  result?: {
+    success: boolean;
+    migrated: number;
+    needsReview: number;
+    failed: number;
+    totalCost: number;
+    duration: number;
+  };
+}
+
+interface ComponentMigrationInfo {
+  id: string;
+  name: string;
+  path: string;
+  issues: MigrationIssue[];
+  estimatedCost?: number;
+}
+
+interface MigrationIssue {
+  id: string;
+  type: MigrationIssueType;
+  description: string;
+  location: {
+    file: string;
+    line: number;
+    column?: number;
+  };
+  autoFixable: boolean;
+  fix?: {
+    type: 'automatic' | 'ai-required';
+    description: string;
+  };
+}
+
+type MigrationIssueType = 
+  | 'componentWillMount'
+  | 'componentWillReceiveProps'
+  | 'componentWillUpdate'
+  | 'unsafeLifecycle'
+  | 'stringRef'
+  | 'legacyContext'
+  | 'createFactory'
+  | 'findDOMNode'
+  | 'reactDomRender'
+  | 'other';
+
+interface MigrationLogEntry {
+  timestamp: string;
+  level: 'info' | 'success' | 'warning' | 'error';
+  component?: string;
+  message: string;
+  details?: string;
+  cost?: number;
+}
+```
+
+## Step 1: Confirm
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/steps/ConfirmStep.tsx
+
+interface ConfirmStepProps {
+  session: MigrationSession;
+  onUpdateTarget: (path: string) => void;
+  onNext: () => void;
+  onCancel: () => void;
+}
+
+function ConfirmStep({ session, onUpdateTarget, onNext, onCancel }: ConfirmStepProps) {
+  const [targetPath, setTargetPath] = useState(session.target.path);
+  const [targetExists, setTargetExists] = useState(false);
+  
+  useEffect(() => {
+    checkPathExists(targetPath).then(setTargetExists);
+  }, [targetPath]);
+  
+  const handleTargetChange = (newPath: string) => {
+    setTargetPath(newPath);
+    onUpdateTarget(newPath);
+  };
+  
+  return (
+    <WizardStep
+      title="Migrate Project"
+      subtitle="We'll create a copy of your project and migrate it to React 19"
+    >
+      <div className={css['confirm-step']}>
+        <PathSection
+          label="Original Project (will not be modified)"
+          path={session.source.path}
+          icon={<LockIcon />}
+          readonly
+        />
+        
+        <div className={css['arrow-down']}>
+          <ArrowDownIcon />
+          <span>Creates copy</span>
+        </div>
+        
+        <PathSection
+          label="Migrated Copy"
+          path={targetPath}
+          onChange={handleTargetChange}
+          error={targetExists ? 'A folder already exists at this location' : undefined}
+          icon={<FolderPlusIcon />}
+        />
+        
+        {targetExists && (
+          <div className={css['path-exists-options']}>
+            <Button 
+              variant="secondary" 
+              size="small"
+              onClick={() => handleTargetChange(`${targetPath}-${Date.now()}`)}
+            >
+              Use Different Name
+            </Button>
+            <Button
+              variant="ghost"
+              size="small"
+              onClick={() => confirmOverwrite()}
+            >
+              Overwrite Existing
+            </Button>
+          </div>
+        )}
+        
+        <InfoBox type="info">
+          <p>
+            <strong>What happens next:</strong>
+          </p>
+          <ol>
+            <li>Your project will be copied to the new location</li>
+            <li>We'll scan for compatibility issues</li>
+            <li>You'll see a report of what needs to change</li>
+            <li>Optionally, AI can help fix complex code</li>
+          </ol>
+        </InfoBox>
+      </div>
+      
+      <WizardActions>
+        <Button variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button 
+          variant="primary" 
+          onClick={onNext}
+          disabled={targetExists}
+        >
+          Start Migration
+        </Button>
+      </WizardActions>
+    </WizardStep>
+  );
+}
+```
+
+## Step 2: Scanning
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/steps/ScanningStep.tsx
+
+interface ScanningStepProps {
+  session: MigrationSession;
+  onComplete: (scan: MigrationScan) => void;
+  onError: (error: Error) => void;
+}
+
+function ScanningStep({ session, onComplete, onError }: ScanningStepProps) {
+  const [phase, setPhase] = useState<'copying' | 'scanning'>('copying');
+  const [progress, setProgress] = useState(0);
+  const [currentItem, setCurrentItem] = useState('');
+  const [stats, setStats] = useState({ components: 0, nodes: 0, jsFiles: 0 });
+  
+  useEffect(() => {
+    runScan();
+  }, []);
+  
+  const runScan = async () => {
+    try {
+      // Phase 1: Copy project
+      setPhase('copying');
+      await copyProject(session.source.path, session.target.path, {
+        onProgress: (p, item) => {
+          setProgress(p * 50); // 0-50%
+          setCurrentItem(item);
+        }
+      });
+      
+      // Phase 2: Scan for issues
+      setPhase('scanning');
+      const scan = await scanProject(session.target.path, {
+        onProgress: (p, item, partialStats) => {
+          setProgress(50 + p * 50); // 50-100%
+          setCurrentItem(item);
+          setStats(partialStats);
+        }
+      });
+      
+      onComplete(scan);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  
+  return (
+    <WizardStep
+      title={phase === 'copying' ? 'Copying Project...' : 'Analyzing Project...'}
+      subtitle={phase === 'copying' 
+        ? 'Creating a safe copy before making any changes'
+        : 'Scanning components for compatibility issues'
+      }
+    >
+      <div className={css['scanning-step']}>
+        <ProgressBar value={progress} max={100} />
+        
+        <div className={css['scanning-current']}>
+          {currentItem && (
+            <>
+              <Spinner size={14} />
+              <span>{currentItem}</span>
+            </>
+          )}
+        </div>
+        
+        <div className={css['scanning-stats']}>
+          <StatBox label="Components" value={stats.components} />
+          <StatBox label="Nodes" value={stats.nodes} />
+          <StatBox label="JS Files" value={stats.jsFiles} />
+        </div>
+        
+        {phase === 'scanning' && (
+          <div className={css['scanning-note']}>
+            <InfoIcon size={14} />
+            <span>
+              Looking for React 17 patterns that need updating...
+            </span>
+          </div>
+        )}
+      </div>
+    </WizardStep>
+  );
+}
+```
+
+## Step 3: Report
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/steps/ReportStep.tsx
+
+interface ReportStepProps {
+  session: MigrationSession;
+  onConfigureAi: () => void;
+  onMigrateWithoutAi: () => void;
+  onMigrateWithAi: () => void;
+  onCancel: () => void;
+}
+
+function ReportStep({ 
+  session, 
+  onConfigureAi,
+  onMigrateWithoutAi, 
+  onMigrateWithAi,
+  onCancel 
+}: ReportStepProps) {
+  const { scan } = session;
+  const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
+  
+  const totalIssues = 
+    scan.categories.simpleFixes.length + 
+    scan.categories.needsReview.length;
+  
+  const estimatedCost = scan.categories.simpleFixes
+    .concat(scan.categories.needsReview)
+    .reduce((sum, c) => sum + (c.estimatedCost || 0), 0);
+  
+  const allAutomatic = totalIssues === 0;
+  
+  return (
+    <WizardStep
+      title="Migration Report"
+      subtitle={`${scan.totalComponents} components analyzed`}
+    >
+      <div className={css['report-step']}>
+        {/* Summary Stats */}
+        <div className={css['report-summary']}>
+          <StatCard 
+            icon={<CheckCircleIcon />}
+            value={scan.categories.automatic.length}
+            label="Automatic"
+            variant="success"
+          />
+          <StatCard
+            icon={<ZapIcon />}
+            value={scan.categories.simpleFixes.length}
+            label="Simple Fixes"
+            variant="info"
+          />
+          <StatCard
+            icon={<ToolIcon />}
+            value={scan.categories.needsReview.length}
+            label="Needs Review"
+            variant="warning"
+          />
+        </div>
+        
+        {/* Category Details */}
+        <div className={css['report-categories']}>
+          <CategorySection
+            title="Automatic"
+            description="These will migrate without any changes"
+            icon={<CheckCircleIcon />}
+            items={scan.categories.automatic}
+            variant="success"
+            expanded={expandedCategory === 'automatic'}
+            onToggle={() => setExpandedCategory(
+              expandedCategory === 'automatic' ? null : 'automatic'
+            )}
+          />
+          
+          {scan.categories.simpleFixes.length > 0 && (
+            <CategorySection
+              title="Simple Fixes"
+              description="Minor syntax updates needed"
+              icon={<ZapIcon />}
+              items={scan.categories.simpleFixes}
+              variant="info"
+              expanded={expandedCategory === 'simpleFixes'}
+              onToggle={() => setExpandedCategory(
+                expandedCategory === 'simpleFixes' ? null : 'simpleFixes'
+              )}
+              showIssueDetails
+            />
+          )}
+          
+          {scan.categories.needsReview.length > 0 && (
+            <CategorySection
+              title="Needs Review"
+              description="May require manual adjustment"
+              icon={<ToolIcon />}
+              items={scan.categories.needsReview}
+              variant="warning"
+              expanded={expandedCategory === 'needsReview'}
+              onToggle={() => setExpandedCategory(
+                expandedCategory === 'needsReview' ? null : 'needsReview'
+              )}
+              showIssueDetails
+            />
+          )}
+        </div>
+        
+        {/* AI Assistance Prompt */}
+        {!allAutomatic && (
+          <div className={css['ai-prompt']}>
+            <div className={css['ai-prompt__icon']}>
+              <RobotIcon size={24} />
+            </div>
+            <div className={css['ai-prompt__content']}>
+              <h4>AI-Assisted Migration Available</h4>
+              <p>
+                Claude can automatically fix the {totalIssues} components that 
+                need code changes. Estimated cost: ~${estimatedCost.toFixed(2)}
+              </p>
+            </div>
+            <Button 
+              variant="secondary"
+              onClick={onConfigureAi}
+            >
+              Configure AI Assistant
+            </Button>
+          </div>
+        )}
+      </div>
+      
+      <WizardActions>
+        <Button variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        
+        {allAutomatic ? (
+          <Button variant="primary" onClick={onMigrateWithoutAi}>
+            Migrate Project
+          </Button>
+        ) : (
+          <>
+            <Button variant="secondary" onClick={onMigrateWithoutAi}>
+              Migrate Without AI
+            </Button>
+            {session.ai?.enabled && (
+              <Button variant="primary" onClick={onMigrateWithAi}>
+                Migrate With AI
+              </Button>
+            )}
+          </>
+        )}
+      </WizardActions>
+    </WizardStep>
+  );
+}
+
+// Category Section Component
+function CategorySection({
+  title,
+  description,
+  icon,
+  items,
+  variant,
+  expanded,
+  onToggle,
+  showIssueDetails = false
+}: CategorySectionProps) {
+  return (
+    <div className={css['category-section', `category-section--${variant}`]}>
+      <button 
+        className={css['category-header']}
+        onClick={onToggle}
+      >
+        <div className={css['category-header__left']}>
+          {icon}
+          <div>
+            <h4>{title} ({items.length})</h4>
+            <p>{description}</p>
+          </div>
+        </div>
+        <ChevronIcon direction={expanded ? 'up' : 'down'} />
+      </button>
+      
+      {expanded && (
+        <div className={css['category-items']}>
+          {items.map(item => (
+            <div key={item.id} className={css['category-item']}>
+              <ComponentIcon />
+              <div className={css['category-item__info']}>
+                <span className={css['category-item__name']}>
+                  {item.name}
+                </span>
+                {showIssueDetails && item.issues.length > 0 && (
+                  <ul className={css['category-item__issues']}>
+                    {item.issues.map(issue => (
+                      <li key={issue.id}>
+                        <code>{issue.type}</code>
+                        <span>{issue.description}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+              {item.estimatedCost && (
+                <span className={css['category-item__cost']}>
+                  ~${item.estimatedCost.toFixed(2)}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## Step 4: Migration Progress
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/steps/MigratingStep.tsx
+
+interface MigratingStepProps {
+  session: MigrationSession;
+  useAi: boolean;
+  onPause: () => void;
+  onAiDecision: (decision: AiDecision) => void;
+  onComplete: (result: MigrationResult) => void;
+  onError: (error: Error) => void;
+}
+
+interface AiDecision {
+  componentId: string;
+  action: 'retry' | 'skip' | 'manual' | 'getHelp';
+}
+
+function MigratingStep({
+  session,
+  useAi,
+  onPause,
+  onAiDecision,
+  onComplete,
+  onError
+}: MigratingStepProps) {
+  const [awaitingDecision, setAwaitingDecision] = useState<AiDecisionRequest | null>(null);
+  const { progress, ai } = session;
+  
+  const budgetPercent = ai ? (ai.budget.spent / ai.budget.max) * 100 : 0;
+  
+  return (
+    <WizardStep
+      title={useAi ? 'AI Migration in Progress' : 'Migrating Project...'}
+      subtitle={`Phase: ${progress?.phase || 'Starting'}`}
+    >
+      <div className={css['migrating-step']}>
+        {/* Budget Display (if using AI) */}
+        {useAi && ai && (
+          <div className={css['budget-display']}>
+            <div className={css['budget-display__header']}>
+              <span>Budget</span>
+              <span>${ai.budget.spent.toFixed(2)} / ${ai.budget.max.toFixed(2)}</span>
+            </div>
+            <ProgressBar 
+              value={budgetPercent} 
+              max={100}
+              variant={budgetPercent > 80 ? 'warning' : 'default'}
+            />
+          </div>
+        )}
+        
+        {/* Component Progress */}
+        <div className={css['component-progress']}>
+          {progress?.log.slice(-5).map((entry, i) => (
+            <LogEntry key={i} entry={entry} />
+          ))}
+          
+          {progress?.currentComponent && !awaitingDecision && (
+            <div className={css['current-component']}>
+              <Spinner size={16} />
+              <span>{progress.currentComponent}</span>
+              {useAi && <span className={css['estimate']}>~$0.08</span>}
+            </div>
+          )}
+        </div>
+        
+        {/* AI Decision Required */}
+        {awaitingDecision && (
+          <AiDecisionPanel
+            request={awaitingDecision}
+            budget={ai?.budget}
+            onDecision={(decision) => {
+              setAwaitingDecision(null);
+              onAiDecision(decision);
+            }}
+          />
+        )}
+        
+        {/* Overall Progress */}
+        <div className={css['overall-progress']}>
+          <ProgressBar 
+            value={progress?.current || 0} 
+            max={progress?.total || 100}
+          />
+          <span>
+            {progress?.current || 0} / {progress?.total || 0} components
+          </span>
+        </div>
+      </div>
+      
+      <WizardActions>
+        <Button 
+          variant="secondary" 
+          onClick={onPause}
+          disabled={!!awaitingDecision}
+        >
+          Pause Migration
+        </Button>
+      </WizardActions>
+    </WizardStep>
+  );
+}
+
+// Log Entry Component
+function LogEntry({ entry }: { entry: MigrationLogEntry }) {
+  const icons = {
+    info: <InfoIcon size={14} />,
+    success: <CheckIcon size={14} />,
+    warning: <WarningIcon size={14} />,
+    error: <ErrorIcon size={14} />
+  };
+  
+  return (
+    <div className={css['log-entry', `log-entry--${entry.level}`]}>
+      {icons[entry.level]}
+      <div className={css['log-entry__content']}>
+        {entry.component && (
+          <span className={css['log-entry__component']}>
+            {entry.component}
+          </span>
+        )}
+        <span className={css['log-entry__message']}>
+          {entry.message}
+        </span>
+      </div>
+      {entry.cost && (
+        <span className={css['log-entry__cost']}>
+          ${entry.cost.toFixed(2)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// AI Decision Panel
+function AiDecisionPanel({
+  request,
+  budget,
+  onDecision
+}: {
+  request: AiDecisionRequest;
+  budget: MigrationBudget;
+  onDecision: (decision: AiDecision) => void;
+}) {
+  return (
+    <div className={css['decision-panel']}>
+      <div className={css['decision-panel__header']}>
+        <ToolIcon size={20} />
+        <h4>{request.componentName} - Needs Your Input</h4>
+      </div>
+      
+      <p>
+        Claude attempted {request.attempts} migrations but the component 
+        still has issues. Here's what happened:
+      </p>
+      
+      <div className={css['decision-panel__attempts']}>
+        {request.attemptHistory.map((attempt, i) => (
+          <div key={i} className={css['attempt-entry']}>
+            <span>Attempt {i + 1}:</span>
+            <span>{attempt.description}</span>
+          </div>
+        ))}
+      </div>
+      
+      <div className={css['decision-panel__cost']}>
+        Cost so far: ${request.costSpent.toFixed(2)}
+      </div>
+      
+      <div className={css['decision-panel__options']}>
+        <Button
+          onClick={() => onDecision({ 
+            componentId: request.componentId, 
+            action: 'retry' 
+          })}
+        >
+          Try Again (~${request.retryCost.toFixed(2)})
+        </Button>
+        
+        <Button
+          variant="secondary"
+          onClick={() => onDecision({ 
+            componentId: request.componentId, 
+            action: 'skip' 
+          })}
+        >
+          Skip Component
+        </Button>
+        
+        <Button
+          variant="secondary"
+          onClick={() => onDecision({ 
+            componentId: request.componentId, 
+            action: 'getHelp' 
+          })}
+        >
+          Get Suggestions (~$0.02)
+        </Button>
+      </div>
+    </div>
+  );
+}
+```
+
+## Step 5: Complete
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/steps/CompleteStep.tsx
+
+interface CompleteStepProps {
+  session: MigrationSession;
+  onViewLog: () => void;
+  onOpenProject: () => void;
+}
+
+function CompleteStep({ session, onViewLog, onOpenProject }: CompleteStepProps) {
+  const { result, source, target } = session;
+  
+  const hasIssues = result.needsReview > 0;
+  
+  return (
+    <WizardStep
+      title={hasIssues ? 'Migration Complete (With Notes)' : 'Migration Complete!'}
+      icon={hasIssues ? <CheckWarningIcon /> : <CheckCircleIcon />}
+    >
+      <div className={css['complete-step']}>
+        {/* Summary */}
+        <div className={css['complete-summary']}>
+          <div className={css['summary-stats']}>
+            <StatCard
+              icon={<CheckIcon />}
+              value={result.migrated}
+              label="Migrated"
+              variant="success"
+            />
+            {result.needsReview > 0 && (
+              <StatCard
+                icon={<WarningIcon />}
+                value={result.needsReview}
+                label="Needs Review"
+                variant="warning"
+              />
+            )}
+            {result.failed > 0 && (
+              <StatCard
+                icon={<ErrorIcon />}
+                value={result.failed}
+                label="Failed"
+                variant="error"
+              />
+            )}
+          </div>
+          
+          {session.ai?.enabled && (
+            <div className={css['summary-cost']}>
+              <RobotIcon size={16} />
+              <span>AI cost: ${result.totalCost.toFixed(2)}</span>
+            </div>
+          )}
+          
+          <div className={css['summary-time']}>
+            <ClockIcon size={16} />
+            <span>Time: {formatDuration(result.duration)}</span>
+          </div>
+        </div>
+        
+        {/* Project Paths */}
+        <div className={css['complete-paths']}>
+          <h4>Project Locations</h4>
+          
+          <PathDisplay
+            label="Original (untouched)"
+            path={source.path}
+            icon={<LockIcon />}
+          />
+          
+          <PathDisplay
+            label="Migrated copy"
+            path={target.path}
+            icon={<FolderIcon />}
+            actions={[
+              { label: 'Show in Finder', onClick: () => showInFinder(target.path) }
+            ]}
+          />
+        </div>
+        
+        {/* What's Next */}
+        <div className={css['complete-next']}>
+          <h4>What's Next?</h4>
+          <ol>
+            {result.needsReview > 0 && (
+              <li>
+                <WarningIcon size={14} />
+                Components marked with ⚠️ have notes in the component panel - 
+                click to see migration details
+              </li>
+            )}
+            <li>
+              <TestIcon size={14} />
+              Test your app thoroughly before deploying
+            </li>
+            <li>
+              <TrashIcon size={14} />
+              Once confirmed working, you can archive or delete the original folder
+            </li>
+          </ol>
+        </div>
+      </div>
+      
+      <WizardActions>
+        <Button variant="secondary" onClick={onViewLog}>
+          View Migration Log
+        </Button>
+        <Button variant="primary" onClick={onOpenProject}>
+          Open Migrated Project
+        </Button>
+      </WizardActions>
+    </WizardStep>
+  );
+}
+```
+
+## Wizard Container
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/MigrationWizard.tsx
+
+interface MigrationWizardProps {
+  sourcePath: string;
+  onComplete: (targetPath: string) => void;
+  onCancel: () => void;
+}
+
+function MigrationWizard({ sourcePath, onComplete, onCancel }: MigrationWizardProps) {
+  const [session, dispatch] = useReducer(migrationReducer, {
+    id: generateId(),
+    step: 'confirm',
+    source: {
+      path: sourcePath,
+      name: path.basename(sourcePath),
+      runtimeVersion: 'react17'
+    },
+    target: {
+      path: `${sourcePath}-r19`,
+      copied: false
+    }
+  });
+  
+  const renderStep = () => {
+    switch (session.step) {
+      case 'confirm':
+        return (
+          <ConfirmStep
+            session={session}
+            onUpdateTarget={(path) => dispatch({ type: 'SET_TARGET_PATH', path })}
+            onNext={() => dispatch({ type: 'START_SCAN' })}
+            onCancel={onCancel}
+          />
+        );
+      
+      case 'scanning':
+        return (
+          <ScanningStep
+            session={session}
+            onComplete={(scan) => dispatch({ type: 'SCAN_COMPLETE', scan })}
+            onError={(error) => dispatch({ type: 'ERROR', error })}
+          />
+        );
+      
+      case 'report':
+        return (
+          <ReportStep
+            session={session}
+            onConfigureAi={() => dispatch({ type: 'CONFIGURE_AI' })}
+            onMigrateWithoutAi={() => dispatch({ type: 'START_MIGRATE', useAi: false })}
+            onMigrateWithAi={() => dispatch({ type: 'START_MIGRATE', useAi: true })}
+            onCancel={onCancel}
+          />
+        );
+      
+      case 'configureAi':
+        return (
+          <AiConfigStep
+            session={session}
+            onSave={(config) => dispatch({ type: 'SAVE_AI_CONFIG', config })}
+            onBack={() => dispatch({ type: 'BACK_TO_REPORT' })}
+          />
+        );
+      
+      case 'migrating':
+        return (
+          <MigratingStep
+            session={session}
+            useAi={session.ai?.enabled ?? false}
+            onPause={() => dispatch({ type: 'PAUSE' })}
+            onAiDecision={(d) => dispatch({ type: 'AI_DECISION', decision: d })}
+            onComplete={(result) => dispatch({ type: 'COMPLETE', result })}
+            onError={(error) => dispatch({ type: 'ERROR', error })}
+          />
+        );
+      
+      case 'complete':
+        return (
+          <CompleteStep
+            session={session}
+            onViewLog={() => openMigrationLog(session)}
+            onOpenProject={() => onComplete(session.target.path)}
+          />
+        );
+      
+      case 'failed':
+        return (
+          <FailedStep
+            session={session}
+            onRetry={() => dispatch({ type: 'RETRY' })}
+            onCancel={onCancel}
+          />
+        );
+    }
+  };
+  
+  return (
+    <Dialog 
+      className={css['migration-wizard']}
+      size="large"
+      onClose={onCancel}
+    >
+      <WizardProgress 
+        steps={['Confirm', 'Scan', 'Report', 'Migrate', 'Complete']}
+        currentStep={stepToIndex(session.step)}
+      />
+      
+      {renderStep()}
+    </Dialog>
+  );
+}
+```
+
+## Testing Checklist
+
+- [ ] Wizard opens from project detection
+- [ ] Target path can be customized
+- [ ] Duplicate path detection works
+- [ ] Scanning shows progress
+- [ ] Report categorizes components correctly
+- [ ] AI config button appears when needed
+- [ ] Migration progress updates in real-time
+- [ ] AI decision panel appears on failure
+- [ ] Complete screen shows correct stats
+- [ ] "Open Project" launches migrated project
+- [ ] Cancel works at every step
+- [ ] Errors are handled gracefully

dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/04-POST-MIGRATION-UX.md

@@ -0,0 +1,793 @@
+# 04 - Post-Migration Editor Experience
+
+## Overview
+
+After migration, the editor needs to clearly communicate which components were successfully migrated, which need review, and provide easy access to migration notes and AI suggestions.
+
+## Component Panel Indicators
+
+### Visual Status Badges
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/panels/ComponentsPanel/ComponentItem.tsx
+
+interface ComponentItemProps {
+  component: ComponentModel;
+  migrationNote?: ComponentMigrationNote;
+  onClick: () => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+}
+
+function ComponentItem({ 
+  component, 
+  migrationNote, 
+  onClick, 
+  onContextMenu 
+}: ComponentItemProps) {
+  const status = migrationNote?.status;
+  
+  const statusConfig = {
+    'auto': null, // No badge for auto-migrated
+    'ai-migrated': {
+      icon: <SparklesIcon size={12} />,
+      tooltip: 'AI migrated - click to see changes',
+      className: 'status-ai'
+    },
+    'needs-review': {
+      icon: <WarningIcon size={12} />,
+      tooltip: 'Needs manual review',
+      className: 'status-warning'
+    },
+    'manually-fixed': {
+      icon: <CheckIcon size={12} />,
+      tooltip: 'Manually fixed',
+      className: 'status-success'
+    }
+  };
+  
+  const badge = status ? statusConfig[status] : null;
+  
+  return (
+    <div 
+      className={css['component-item', badge?.className]}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+    >
+      <ComponentIcon type={getComponentIconType(component)} />
+      
+      <span className={css['component-item__name']}>
+        {component.localName}
+      </span>
+      
+      {badge && (
+        <Tooltip content={badge.tooltip}>
+          <span className={css['component-item__badge']}>
+            {badge.icon}
+          </span>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+```
+
+### CSS for Status Indicators
+
+```scss
+// packages/noodl-editor/src/editor/src/styles/components-panel.scss
+
+.component-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  gap: 8px;
+  
+  &:hover {
+    background: var(--color-bg-hover);
+  }
+  
+  &.status-warning {
+    .component-item__badge {
+      color: var(--color-warning);
+    }
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: var(--color-warning);
+      border-radius: 2px 0 0 2px;
+    }
+  }
+  
+  &.status-ai {
+    .component-item__badge {
+      color: var(--color-info);
+    }
+  }
+  
+  &.status-success {
+    .component-item__badge {
+      color: var(--color-success);
+    }
+  }
+}
+
+.component-item__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+```
+
+## Migration Notes Panel
+
+### Accessing Migration Notes
+
+When a user clicks on a component with a migration status, show a panel with details:
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/panels/MigrationNotesPanel.tsx
+
+interface MigrationNotesPanelProps {
+  component: ComponentModel;
+  note: ComponentMigrationNote;
+  onDismiss: () => void;
+  onViewOriginal: () => void;
+  onViewMigrated: () => void;
+}
+
+function MigrationNotesPanel({ 
+  component, 
+  note, 
+  onDismiss,
+  onViewOriginal,
+  onViewMigrated 
+}: MigrationNotesPanelProps) {
+  const statusLabels = {
+    'auto': 'Automatically Migrated',
+    'ai-migrated': 'AI Migrated',
+    'needs-review': 'Needs Manual Review',
+    'manually-fixed': 'Manually Fixed'
+  };
+  
+  const statusIcons = {
+    'auto': <CheckCircleIcon />,
+    'ai-migrated': <SparklesIcon />,
+    'needs-review': <WarningIcon />,
+    'manually-fixed': <CheckIcon />
+  };
+  
+  return (
+    <Panel 
+      title="Migration Notes"
+      icon={statusIcons[note.status]}
+      onClose={onDismiss}
+    >
+      <div className={css['migration-notes']}>
+        {/* Status Header */}
+        <div className={css['notes-status', `notes-status--${note.status}`]}>
+          {statusIcons[note.status]}
+          <span>{statusLabels[note.status]}</span>
+        </div>
+        
+        {/* Component Name */}
+        <div className={css['notes-component']}>
+          <ComponentIcon type={getComponentIconType(component)} />
+          <span>{component.name}</span>
+        </div>
+        
+        {/* Issues List */}
+        {note.issues && note.issues.length > 0 && (
+          <div className={css['notes-section']}>
+            <h4>Issues Detected</h4>
+            <ul className={css['notes-issues']}>
+              {note.issues.map((issue, i) => (
+                <li key={i}>
+                  <code>{issue.type || 'Issue'}</code>
+                  <span>{issue}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        
+        {/* AI Suggestion */}
+        {note.aiSuggestion && (
+          <div className={css['notes-section']}>
+            <h4>
+              <RobotIcon size={14} />
+              Claude's Suggestion
+            </h4>
+            <div className={css['notes-suggestion']}>
+              <ReactMarkdown>
+                {note.aiSuggestion}
+              </ReactMarkdown>
+            </div>
+          </div>
+        )}
+        
+        {/* Actions */}
+        <div className={css['notes-actions']}>
+          {note.status === 'needs-review' && (
+            <>
+              <Button 
+                variant="secondary" 
+                size="small"
+                onClick={onViewOriginal}
+              >
+                View Original Code
+              </Button>
+              <Button
+                variant="secondary"
+                size="small"
+                onClick={onViewMigrated}
+              >
+                View Migrated Code
+              </Button>
+            </>
+          )}
+          
+          <Button
+            variant="ghost"
+            size="small"
+            onClick={onDismiss}
+          >
+            Dismiss Warning
+          </Button>
+        </div>
+        
+        {/* Help Link */}
+        <div className={css['notes-help']}>
+          <a 
+            href="https://docs.opennoodl.com/migration/react19"
+            target="_blank"
+          >
+            Learn more about React 19 migration →
+          </a>
+        </div>
+      </div>
+    </Panel>
+  );
+}
+```
+
+## Migration Summary in Project Info
+
+### Project Info Panel Addition
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/panels/ProjectInfoPanel.tsx
+
+function ProjectInfoPanel({ project }: { project: ProjectModel }) {
+  const migrationInfo = project.migratedFrom;
+  const migrationNotes = project.migrationNotes;
+  
+  const notesCounts = migrationNotes ? {
+    total: Object.keys(migrationNotes).length,
+    needsReview: Object.values(migrationNotes)
+      .filter(n => n.status === 'needs-review').length,
+    aiMigrated: Object.values(migrationNotes)
+      .filter(n => n.status === 'ai-migrated').length
+  } : null;
+  
+  return (
+    <Panel title="Project Info">
+      {/* Existing project info... */}
+      
+      {migrationInfo && (
+        <div className={css['project-migration-info']}>
+          <h4>
+            <MigrationIcon size={14} />
+            Migration Info
+          </h4>
+          
+          <div className={css['migration-details']}>
+            <div className={css['detail-row']}>
+              <span>Migrated from:</span>
+              <code>React 17</code>
+            </div>
+            <div className={css['detail-row']}>
+              <span>Migration date:</span>
+              <span>{formatDate(migrationInfo.date)}</span>
+            </div>
+            <div className={css['detail-row']}>
+              <span>Original location:</span>
+              <code className={css['path-truncate']}>
+                {migrationInfo.originalPath}
+              </code>
+            </div>
+            {migrationInfo.aiAssisted && (
+              <div className={css['detail-row']}>
+                <span>AI assisted:</span>
+                <span>Yes</span>
+              </div>
+            )}
+          </div>
+          
+          {notesCounts && notesCounts.needsReview > 0 && (
+            <div className={css['migration-warnings']}>
+              <WarningIcon size={14} />
+              <span>
+                {notesCounts.needsReview} component{notesCounts.needsReview > 1 ? 's' : ''} need review
+              </span>
+              <Button 
+                variant="ghost" 
+                size="small"
+                onClick={() => filterComponentsByStatus('needs-review')}
+              >
+                Show
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </Panel>
+  );
+}
+```
+
+## Component Filter for Migration Status
+
+### Filter in Components Panel
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/panels/ComponentsPanel/ComponentFilter.tsx
+
+interface ComponentFilterProps {
+  activeFilter: ComponentFilter;
+  onFilterChange: (filter: ComponentFilter) => void;
+  migrationCounts?: {
+    needsReview: number;
+    aiMigrated: number;
+  };
+}
+
+type ComponentFilter = 'all' | 'needs-review' | 'ai-migrated' | 'pages' | 'components';
+
+function ComponentFilterBar({ 
+  activeFilter, 
+  onFilterChange,
+  migrationCounts 
+}: ComponentFilterProps) {
+  const hasMigrationFilters = migrationCounts && 
+    (migrationCounts.needsReview > 0 || migrationCounts.aiMigrated > 0);
+  
+  return (
+    <div className={css['component-filter-bar']}>
+      <FilterButton
+        active={activeFilter === 'all'}
+        onClick={() => onFilterChange('all')}
+      >
+        All
+      </FilterButton>
+      
+      <FilterButton
+        active={activeFilter === 'pages'}
+        onClick={() => onFilterChange('pages')}
+      >
+        Pages
+      </FilterButton>
+      
+      <FilterButton
+        active={activeFilter === 'components'}
+        onClick={() => onFilterChange('components')}
+      >
+        Components
+      </FilterButton>
+      
+      {hasMigrationFilters && (
+        <>
+          <div className={css['filter-divider']} />
+          
+          {migrationCounts.needsReview > 0 && (
+            <FilterButton
+              active={activeFilter === 'needs-review'}
+              onClick={() => onFilterChange('needs-review')}
+              badge={migrationCounts.needsReview}
+              variant="warning"
+            >
+              <WarningIcon size={12} />
+              Needs Review
+            </FilterButton>
+          )}
+          
+          {migrationCounts.aiMigrated > 0 && (
+            <FilterButton
+              active={activeFilter === 'ai-migrated'}
+              onClick={() => onFilterChange('ai-migrated')}
+              badge={migrationCounts.aiMigrated}
+              variant="info"
+            >
+              <SparklesIcon size={12} />
+              AI Migrated
+            </FilterButton>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+## Dismissing Migration Warnings
+
+### Dismiss Functionality
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/migration/MigrationNotes.ts
+
+export function dismissMigrationNote(
+  project: ProjectModel,
+  componentId: string
+): void {
+  if (!project.migrationNotes?.[componentId]) {
+    return;
+  }
+  
+  // Mark as dismissed with timestamp
+  project.migrationNotes[componentId] = {
+    ...project.migrationNotes[componentId],
+    dismissedAt: new Date().toISOString()
+  };
+  
+  // Save project
+  project.save();
+}
+
+export function getMigrationNotesForDisplay(
+  project: ProjectModel,
+  showDismissed: boolean = false
+): Record<string, ComponentMigrationNote> {
+  if (!project.migrationNotes) {
+    return {};
+  }
+  
+  if (showDismissed) {
+    return project.migrationNotes;
+  }
+  
+  // Filter out dismissed notes
+  return Object.fromEntries(
+    Object.entries(project.migrationNotes)
+      .filter(([_, note]) => !note.dismissedAt)
+  );
+}
+```
+
+### Restore Dismissed Warnings
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/panels/ComponentsPanel/DismissedWarnings.tsx
+
+function DismissedWarningsSection({ project }: { project: ProjectModel }) {
+  const [showDismissed, setShowDismissed] = useState(false);
+  
+  const dismissedNotes = Object.entries(project.migrationNotes || {})
+    .filter(([_, note]) => note.dismissedAt);
+  
+  if (dismissedNotes.length === 0) {
+    return null;
+  }
+  
+  return (
+    <div className={css['dismissed-warnings']}>
+      <button 
+        className={css['dismissed-toggle']}
+        onClick={() => setShowDismissed(!showDismissed)}
+      >
+        <ChevronIcon direction={showDismissed ? 'up' : 'down'} />
+        <span>
+          {dismissedNotes.length} dismissed warning{dismissedNotes.length > 1 ? 's' : ''}
+        </span>
+      </button>
+      
+      {showDismissed && (
+        <div className={css['dismissed-list']}>
+          {dismissedNotes.map(([componentId, note]) => (
+            <div key={componentId} className={css['dismissed-item']}>
+              <span>{getComponentName(project, componentId)}</span>
+              <Button
+                variant="ghost"
+                size="small"
+                onClick={() => restoreMigrationNote(project, componentId)}
+              >
+                Restore
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## Migration Log Viewer
+
+### Full Log Dialog
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/MigrationLogViewer.tsx
+
+interface MigrationLogViewerProps {
+  session: MigrationSession;
+  onClose: () => void;
+}
+
+function MigrationLogViewer({ session, onClose }: MigrationLogViewerProps) {
+  const [filter, setFilter] = useState<'all' | 'success' | 'warning' | 'error'>('all');
+  const [search, setSearch] = useState('');
+  
+  const filteredLog = session.progress?.log.filter(entry => {
+    if (filter !== 'all' && entry.level !== filter) {
+      return false;
+    }
+    if (search && !entry.message.toLowerCase().includes(search.toLowerCase())) {
+      return false;
+    }
+    return true;
+  }) || [];
+  
+  const exportLog = () => {
+    const content = session.progress?.log
+      .map(e => `[${e.timestamp}] [${e.level.toUpperCase()}] ${e.component || ''}: ${e.message}`)
+      .join('\n');
+    
+    downloadFile('migration-log.txt', content);
+  };
+  
+  return (
+    <Dialog 
+      title="Migration Log" 
+      size="large"
+      onClose={onClose}
+    >
+      <div className={css['log-viewer']}>
+        {/* Summary Stats */}
+        <div className={css['log-summary']}>
+          <StatPill 
+            label="Total"
+            value={session.progress?.log.length || 0}
+          />
+          <StatPill 
+            label="Success"
+            value={session.progress?.log.filter(e => e.level === 'success').length || 0}
+            variant="success"
+          />
+          <StatPill 
+            label="Warnings"
+            value={session.progress?.log.filter(e => e.level === 'warning').length || 0}
+            variant="warning"
+          />
+          <StatPill 
+            label="Errors"
+            value={session.progress?.log.filter(e => e.level === 'error').length || 0}
+            variant="error"
+          />
+          
+          {session.ai?.enabled && (
+            <StatPill 
+              label="AI Cost"
+              value={`$${session.result?.totalCost.toFixed(2) || '0.00'}`}
+              variant="info"
+            />
+          )}
+        </div>
+        
+        {/* Filters */}
+        <div className={css['log-filters']}>
+          <input
+            type="text"
+            placeholder="Search log..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          
+          <select 
+            value={filter} 
+            onChange={(e) => setFilter(e.target.value as any)}
+          >
+            <option value="all">All Levels</option>
+            <option value="success">Success</option>
+            <option value="warning">Warnings</option>
+            <option value="error">Errors</option>
+          </select>
+          
+          <Button variant="secondary" size="small" onClick={exportLog}>
+            Export Log
+          </Button>
+        </div>
+        
+        {/* Log Entries */}
+        <div className={css['log-entries']}>
+          {filteredLog.map((entry, i) => (
+            <div 
+              key={i} 
+              className={css['log-entry', `log-entry--${entry.level}`]}
+            >
+              <span className={css['log-time']}>
+                {formatTime(entry.timestamp)}
+              </span>
+              <span className={css['log-level']}>
+                {entry.level.toUpperCase()}
+              </span>
+              {entry.component && (
+                <span className={css['log-component']}>
+                  {entry.component}
+                </span>
+              )}
+              <span className={css['log-message']}>
+                {entry.message}
+              </span>
+              {entry.cost && (
+                <span className={css['log-cost']}>
+                  ${entry.cost.toFixed(3)}
+                </span>
+              )}
+              {entry.details && (
+                <details className={css['log-details']}>
+                  <summary>Details</summary>
+                  <pre>{entry.details}</pre>
+                </details>
+              )}
+            </div>
+          ))}
+          
+          {filteredLog.length === 0 && (
+            <div className={css['log-empty']}>
+              No log entries match your filters
+            </div>
+          )}
+        </div>
+      </div>
+      
+      <DialogActions>
+        <Button variant="primary" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+```
+
+## Code Diff Viewer
+
+### View Changes in Components
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/migration/CodeDiffViewer.tsx
+
+interface CodeDiffViewerProps {
+  componentName: string;
+  originalCode: string;
+  migratedCode: string;
+  changes: string[];
+  onClose: () => void;
+}
+
+function CodeDiffViewer({ 
+  componentName,
+  originalCode, 
+  migratedCode,
+  changes,
+  onClose 
+}: CodeDiffViewerProps) {
+  const [viewMode, setViewMode] = useState<'split' | 'unified'>('split');
+  
+  return (
+    <Dialog 
+      title={`Code Changes: ${componentName}`}
+      size="fullscreen"
+      onClose={onClose}
+    >
+      <div className={css['diff-viewer']}>
+        {/* Change Summary */}
+        <div className={css['diff-changes']}>
+          <h4>Changes Made</h4>
+          <ul>
+            {changes.map((change, i) => (
+              <li key={i}>
+                <CheckIcon size={12} />
+                {change}
+              </li>
+            ))}
+          </ul>
+        </div>
+        
+        {/* View Mode Toggle */}
+        <div className={css['diff-toolbar']}>
+          <ToggleGroup 
+            value={viewMode} 
+            onChange={setViewMode}
+            options={[
+              { value: 'split', label: 'Side by Side' },
+              { value: 'unified', label: 'Unified' }
+            ]}
+          />
+          
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={() => copyToClipboard(migratedCode)}
+          >
+            Copy Migrated Code
+          </Button>
+        </div>
+        
+        {/* Diff Display */}
+        <div className={css['diff-content']}>
+          {viewMode === 'split' ? (
+            <SplitDiff 
+              original={originalCode} 
+              modified={migratedCode} 
+            />
+          ) : (
+            <UnifiedDiff 
+              original={originalCode} 
+              modified={migratedCode} 
+            />
+          )}
+        </div>
+      </div>
+      
+      <DialogActions>
+        <Button variant="primary" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+// Using Monaco Editor for diff view
+function SplitDiff({ original, modified }: { original: string; modified: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    const editor = monaco.editor.createDiffEditor(containerRef.current, {
+      renderSideBySide: true,
+      readOnly: true,
+      theme: 'vs-dark'
+    });
+    
+    editor.setModel({
+      original: monaco.editor.createModel(original, 'javascript'),
+      modified: monaco.editor.createModel(modified, 'javascript')
+    });
+    
+    return () => editor.dispose();
+  }, [original, modified]);
+  
+  return <div ref={containerRef} className={css['monaco-diff']} />;
+}
+```
+
+## Testing Checklist
+
+- [ ] Status badges appear on components
+- [ ] Clicking badge opens migration notes panel
+- [ ] AI suggestions display with markdown formatting
+- [ ] Dismiss functionality works
+- [ ] Dismissed warnings can be restored
+- [ ] Filter shows only matching components
+- [ ] Migration info appears in project info
+- [ ] Log viewer shows all entries
+- [ ] Log can be filtered and searched
+- [ ] Log can be exported
+- [ ] Code diff viewer shows changes
+- [ ] Diff supports split and unified modes

dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/05-NEW-PROJECT-NOTICE.md

@@ -0,0 +1,477 @@
+# 05 - New Project Notice
+
+## Overview
+
+When creating new projects, inform users that OpenNoodl 1.2+ uses React 19 and is not backwards compatible with older Noodl versions. Keep the messaging positive and focused on the benefits.
+
+## Create Project Dialog
+
+### Updated UI
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/dialogs/CreateProjectDialog.tsx
+
+interface CreateProjectDialogProps {
+  onClose: () => void;
+  onCreateProject: (config: ProjectConfig) => void;
+}
+
+interface ProjectConfig {
+  name: string;
+  location: string;
+  template?: string;
+}
+
+function CreateProjectDialog({ onClose, onCreateProject }: CreateProjectDialogProps) {
+  const [name, setName] = useState('');
+  const [location, setLocation] = useState(getDefaultProjectLocation());
+  const [template, setTemplate] = useState<string | undefined>();
+  const [showInfo, setShowInfo] = useState(true);
+  
+  const handleCreate = () => {
+    onCreateProject({ name, location, template });
+  };
+  
+  const projectPath = path.join(location, slugify(name));
+  
+  return (
+    <Dialog 
+      title="Create New Project" 
+      icon={<SparklesIcon />}
+      onClose={onClose}
+    >
+      <div className={css['create-project']}>
+        {/* Project Name */}
+        <FormField label="Project Name">
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="My Awesome App"
+            autoFocus
+          />
+        </FormField>
+        
+        {/* Location */}
+        <FormField label="Location">
+          <div className={css['location-field']}>
+            <input
+              type="text"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              className={css['location-input']}
+            />
+            <Button 
+              variant="secondary"
+              onClick={async () => {
+                const selected = await selectFolder();
+                if (selected) setLocation(selected);
+              }}
+            >
+              Browse
+            </Button>
+          </div>
+          <span className={css['location-preview']}>
+            Project will be created at: <code>{projectPath}</code>
+          </span>
+        </FormField>
+        
+        {/* Template Selection (Optional) */}
+        <FormField label="Start From" optional>
+          <TemplateSelector
+            value={template}
+            onChange={setTemplate}
+            templates={[
+              { id: undefined, name: 'Blank Project', description: 'Start from scratch' },
+              { id: 'hello-world', name: 'Hello World', description: 'Simple starter' },
+              { id: 'dashboard', name: 'Dashboard', description: 'Data visualization template' }
+            ]}
+          />
+        </FormField>
+        
+        {/* React 19 Info Box */}
+        {showInfo && (
+          <InfoBox 
+            type="info"
+            dismissible
+            onDismiss={() => setShowInfo(false)}
+          >
+            <div className={css['react-info']}>
+              <div className={css['react-info__header']}>
+                <ReactIcon size={16} />
+                <strong>OpenNoodl 1.2+ uses React 19</strong>
+              </div>
+              <p>
+                Projects created with this version are not compatible with the 
+                original Noodl app or older forks. This ensures you get the latest 
+                React features and performance improvements.
+              </p>
+              <a 
+                href="https://docs.opennoodl.com/react-19"
+                target="_blank"
+                className={css['react-info__link']}
+              >
+                Learn about React 19 benefits →
+              </a>
+            </div>
+          </InfoBox>
+        )}
+      </div>
+      
+      <DialogActions>
+        <Button variant="secondary" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button 
+          variant="primary" 
+          onClick={handleCreate}
+          disabled={!name.trim()}
+        >
+          Create Project
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+```
+
+### CSS Styles
+
+```scss
+// packages/noodl-editor/src/editor/src/styles/create-project.scss
+
+.create-project {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 500px;
+}
+
+.location-field {
+  display: flex;
+  gap: 8px;
+}
+
+.location-input {
+  flex: 1;
+}
+
+.location-preview {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  
+  code {
+    background: var(--color-bg-tertiary);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+  }
+}
+
+.react-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.react-info__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  svg {
+    color: var(--color-react);
+  }
+}
+
+.react-info__link {
+  align-self: flex-start;
+  font-size: 13px;
+  color: var(--color-link);
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+```
+
+## First Launch Welcome
+
+### First-Time User Experience
+
+For users launching OpenNoodl for the first time after the React 19 update:
+
+```tsx
+// packages/noodl-editor/src/editor/src/views/dialogs/WelcomeDialog.tsx
+
+interface WelcomeDialogProps {
+  isUpdate: boolean; // true if upgrading from older version
+  onClose: () => void;
+  onCreateProject: () => void;
+  onOpenProject: () => void;
+}
+
+function WelcomeDialog({ 
+  isUpdate, 
+  onClose, 
+  onCreateProject, 
+  onOpenProject 
+}: WelcomeDialogProps) {
+  return (
+    <Dialog 
+      title={isUpdate ? "Welcome to OpenNoodl 1.2" : "Welcome to OpenNoodl"}
+      size="medium"
+      onClose={onClose}
+    >
+      <div className={css['welcome-dialog']}>
+        {/* Header */}
+        <div className={css['welcome-header']}>
+          <OpenNoodlLogo size={48} />
+          <div>
+            <h2>OpenNoodl 1.2</h2>
+            <span className={css['version-badge']}>React 19</span>
+          </div>
+        </div>
+        
+        {/* Update Message (if upgrading) */}
+        {isUpdate && (
+          <div className={css['update-notice']}>
+            <SparklesIcon size={20} />
+            <div>
+              <h3>What's New</h3>
+              <ul>
+                <li>
+                  <strong>React 19 Runtime</strong> - Modern React with 
+                  improved performance and new features
+                </li>
+                <li>
+                  <strong>Migration Assistant</strong> - AI-powered tool to 
+                  upgrade legacy projects
+                </li>
+                <li>
+                  <strong>New Nodes</strong> - HTTP Request, improved data 
+                  handling, and more
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
+        
+        {/* Migration Note for Update */}
+        {isUpdate && (
+          <InfoBox type="info">
+            <p>
+              <strong>Have existing projects?</strong> When you open them, 
+              OpenNoodl will guide you through migrating to React 19. Your 
+              original projects are never modified.
+            </p>
+          </InfoBox>
+        )}
+        
+        {/* Getting Started */}
+        <div className={css['welcome-actions']}>
+          <ActionCard
+            icon={<PlusIcon />}
+            title="Create New Project"
+            description="Start fresh with React 19"
+            onClick={onCreateProject}
+            primary
+          />
+          
+          <ActionCard
+            icon={<FolderOpenIcon />}
+            title="Open Existing Project"
+            description={isUpdate 
+              ? "Opens with migration assistant if needed" 
+              : "Continue where you left off"
+            }
+            onClick={onOpenProject}
+          />
+        </div>
+        
+        {/* Resources */}
+        <div className={css['welcome-resources']}>
+          <a href="https://docs.opennoodl.com/getting-started" target="_blank">
+            <BookIcon size={14} />
+            Documentation
+          </a>
+          <a href="https://discord.opennoodl.com" target="_blank">
+            <DiscordIcon size={14} />
+            Community
+          </a>
+          <a href="https://github.com/opennoodl" target="_blank">
+            <GithubIcon size={14} />
+            GitHub
+          </a>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+```
+
+## Compatibility Check for Templates
+
+### Template Metadata
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/templates.ts
+
+interface ProjectTemplate {
+  id: string;
+  name: string;
+  description: string;
+  thumbnail?: string;
+  runtimeVersion: 'react17' | 'react19';
+  minEditorVersion?: string;
+  tags: string[];
+}
+
+async function getAvailableTemplates(): Promise<ProjectTemplate[]> {
+  const templates = await fetchTemplates();
+  
+  // Filter to only React 19 compatible templates
+  return templates.filter(t => t.runtimeVersion === 'react19');
+}
+
+async function fetchTemplates(): Promise<ProjectTemplate[]> {
+  // Fetch from community repository or local
+  return [
+    {
+      id: 'blank',
+      name: 'Blank Project',
+      description: 'Start from scratch',
+      runtimeVersion: 'react19',
+      tags: ['starter']
+    },
+    {
+      id: 'hello-world',
+      name: 'Hello World',
+      description: 'Simple starter with basic components',
+      runtimeVersion: 'react19',
+      tags: ['starter', 'beginner']
+    },
+    {
+      id: 'dashboard',
+      name: 'Dashboard',
+      description: 'Data visualization with charts and tables',
+      runtimeVersion: 'react19',
+      tags: ['data', 'charts']
+    },
+    {
+      id: 'form-app',
+      name: 'Form Application',
+      description: 'Multi-step form with validation',
+      runtimeVersion: 'react19',
+      tags: ['forms', 'business']
+    }
+  ];
+}
+```
+
+## Settings for Info Box Dismissal
+
+### User Preferences
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/UserPreferences.ts
+
+interface UserPreferences {
+  // Existing preferences...
+  
+  // Migration related
+  dismissedReactInfoInCreateDialog: boolean;
+  dismissedWelcomeDialog: boolean;
+  lastSeenVersion: string;
+}
+
+export function shouldShowWelcomeDialog(): boolean {
+  const prefs = getUserPreferences();
+  const currentVersion = getAppVersion();
+  
+  // Show if never seen or version changed significantly
+  if (!prefs.lastSeenVersion) {
+    return true;
+  }
+  
+  const [lastMajor, lastMinor] = prefs.lastSeenVersion.split('.').map(Number);
+  const [currentMajor, currentMinor] = currentVersion.split('.').map(Number);
+  
+  // Show on major or minor version bump
+  return currentMajor > lastMajor || currentMinor > lastMinor;
+}
+
+export function markWelcomeDialogSeen(): void {
+  updateUserPreferences({
+    dismissedWelcomeDialog: true,
+    lastSeenVersion: getAppVersion()
+  });
+}
+```
+
+## Documentation Link Content
+
+### React 19 Benefits Page (External)
+
+Create content for `https://docs.opennoodl.com/react-19`:
+
+```markdown
+# React 19 in OpenNoodl
+
+OpenNoodl 1.2 uses React 19, bringing significant improvements to your projects.
+
+## Benefits
+
+### Better Performance
+- Automatic batching of state updates
+- Improved rendering efficiency
+- Smaller bundle sizes
+
+### Modern React Features
+- Use modern hooks in custom code
+- Better error boundaries
+- Improved Suspense support
+
+### Future-Proof
+- Stay current with React ecosystem
+- Better library compatibility
+- Long-term support
+
+## What This Means for You
+
+### New Projects
+New projects automatically use React 19. No extra configuration needed.
+
+### Existing Projects
+Legacy projects (React 17) can be migrated using our built-in migration 
+assistant. The process is straightforward and preserves your original 
+project.
+
+## Compatibility Notes
+
+- Projects created in OpenNoodl 1.2+ won't open in older Noodl versions
+- Most built-in nodes work identically in both versions
+- Custom JavaScript code may need minor updates (the migration assistant 
+  can help with this)
+
+## Learn More
+
+- [Migration Guide](/migration/react19)
+- [What's New in React 19](https://react.dev/blog/2024/04/25/react-19)
+- [OpenNoodl Release Notes](/releases/1.2)
+```
+
+## Testing Checklist
+
+- [ ] Create project dialog shows React 19 info
+- [ ] Info box can be dismissed
+- [ ] Dismissal preference is persisted
+- [ ] Project path preview updates correctly
+- [ ] Welcome dialog shows on first launch
+- [ ] Welcome dialog shows after version update
+- [ ] Welcome dialog shows migration note for updates
+- [ ] Action cards navigate correctly
+- [ ] Resource links open in browser
+- [ ] Templates are filtered to React 19 only

dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/CHANGELOG.md

@@ -0,0 +1,66 @@
+# React 19 Migration System - Changelog
+
+## [Unreleased]
+
+### Session 1: Foundation + Detection
+
+#### 2024-12-13
+
+**Added:**
+- Created CHECKLIST.md for tracking implementation progress
+- Created CHANGELOG.md for documenting changes
+- Created `packages/noodl-editor/src/editor/src/models/migration/` directory with:
+  - `types.ts` - Complete TypeScript interfaces for migration system:
+    - Runtime version types (`RuntimeVersion`, `RuntimeVersionInfo`, `ConfidenceLevel`)
+    - Migration issue types (`MigrationIssue`, `MigrationIssueType`, `ComponentMigrationInfo`)
+    - Session types (`MigrationSession`, `MigrationScan`, `MigrationStep`, `MigrationPhase`)
+    - AI types (`AIConfig`, `AIBudget`, `AIPreferences`, `AIMigrationResponse`)
+    - Project manifest extensions (`ProjectMigrationMetadata`, `ComponentMigrationNote`)
+    - Legacy pattern definitions (`LegacyPattern`, `LegacyPatternScan`)
+  - `ProjectScanner.ts` - Version detection and legacy pattern scanning:
+    - 5-tier detection system with confidence levels
+    - `detectRuntimeVersion()` - Main detection function
+    - `scanForLegacyPatterns()` - Scans for React 17 patterns
+    - `scanProjectForMigration()` - Full project migration scan
+    - 13 legacy React patterns detected (componentWillMount, string refs, etc.)
+  - `MigrationSession.ts` - State machine for migration workflow:
+    - `MigrationSessionManager` class extending EventDispatcher
+    - Step transitions (confirm → scanning → report → configureAi → migrating → complete/failed)
+    - Progress tracking and logging
+    - Helper functions (`checkProjectNeedsMigration`, `getStepLabel`, etc.)
+  - `index.ts` - Clean module exports
+
+**Technical Notes:**
+- IFileSystem interface from `@noodl/platform` uses `readFile(path)` with single argument (no encoding)
+- IFileSystem doesn't expose file stat/birthtime - creation date heuristic relies on project.json metadata
+- Migration phases: copying → automatic → ai-assisted → finalizing
+- Default AI budget: $5 max per session, $1 pause increments
+
+**Files Created:**
+```
+packages/noodl-editor/src/editor/src/models/migration/
+├── index.ts
+├── types.ts
+├── ProjectScanner.ts
+└── MigrationSession.ts
+```
+
+---
+
+## Overview
+
+This changelog tracks the implementation of the React 19 Migration System feature, which allows users to safely upgrade legacy Noodl projects (React 17) to the new OpenNoodl runtime (React 19), with optional AI-assisted code migration.
+
+### Feature Specs
+- [00-OVERVIEW.md](./00-OVERVIEW.md) - Feature summary and architecture
+- [01-PROJECT-DETECTION.md](./01-PROJECT-DETECTION.md) - Detecting legacy projects
+- [02-MIGRATION-WIZARD.md](./02-MIGRATION-WIZARD.md) - Step-by-step wizard UI
+- [03-AI-MIGRATION.md](./03-AI-MIGRATION.md) - AI-assisted code migration
+- [04-POST-MIGRATION-UX.md](./04-POST-MIGRATION-UX.md) - Editor experience after migration
+- [05-NEW-PROJECT-NOTICE.md](./05-NEW-PROJECT-NOTICE.md) - New project messaging
+
+### Implementation Sessions
+1. **Session 1**: Foundation + Detection (types, scanner, models)
+2. **Session 2**: Wizard UI (basic flow without AI)
+3. **Session 3**: Projects View Integration (legacy badges, buttons)
+4. **Session 4**: AI Migration + Polish (Claude integration, UX)

dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/CHECKLIST.md

@@ -0,0 +1,50 @@
+# React 19 Migration System - Implementation Checklist
+
+## Session 1: Foundation + Detection
+- [x] Create migration types file (`models/migration/types.ts`)
+- [x] Create ProjectScanner.ts (detection logic with 5-tier checks)
+- [ ] Update ProjectModel with migration fields (deferred - not needed for initial wizard)
+- [x] Create MigrationSession.ts (state machine)
+- [ ] Test scanner against example project (requires editor build)
+- [x] Create CHANGELOG.md tracking file
+- [x] Create index.ts module exports
+
+## Session 2: Wizard UI (Basic Flow)
+- [ ] MigrationWizard.tsx container
+- [ ] ConfirmStep.tsx component
+- [ ] ScanningStep.tsx component  
+- [ ] ReportStep.tsx component
+- [ ] CompleteStep.tsx component
+- [ ] MigrationExecutor.ts (project copy + basic fixes)
+- [ ] DialogLayerModel integration for showing wizard
+
+## Session 3: Projects View Integration
+- [ ] Update projectsview.ts to detect and show legacy badges
+- [ ] Add "Migrate Project" button to project cards
+- [ ] Add "Open Read-Only" button to project cards
+- [ ] Create EditorBanner.tsx for read-only mode warning
+- [ ] Wire open project flow to detect legacy projects
+
+## Session 4: AI Migration + Polish
+- [ ] claudeClient.ts (Anthropic API integration)
+- [ ] keyStorage.ts (encrypted API key storage)
+- [ ] AIConfigPanel.tsx (API key + budget UI)
+- [ ] BudgetController.ts (spending limits)
+- [ ] BudgetApprovalDialog.tsx
+- [ ] Integration into wizard flow
+- [ ] MigratingStep.tsx with AI progress
+- [ ] Post-migration component status badges
+- [ ] MigrationNotesPanel.tsx
+
+## Post-Migration UX
+- [ ] Component panel status indicators
+- [ ] Migration notes display
+- [ ] Dismiss functionality
+- [ ] Project Info panel migration section
+- [ ] Component filter by migration status
+
+## Polish Items
+- [ ] New project dialog React 19 notice
+- [ ] Welcome dialog for version updates
+- [ ] Documentation links throughout UI
+- [ ] Migration log viewer

dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-001-tabbed-navigation.md

@@ -0,0 +1,220 @@
+# DASH-001: Tabbed Navigation System
+
+## Overview
+
+Replace the current single-view dashboard with a proper tabbed interface. This is the foundation task that enables all other dashboard improvements.
+
+## Context
+
+The current Noodl editor dashboard (`projectsview.ts`) uses a basic pane-switching mechanism with jQuery. A new launcher is being developed in `packages/noodl-core-ui/src/preview/launcher/` using React, which already has a sidebar-based navigation but needs proper tab support for the main content area.
+
+This task focuses on the **new React-based launcher** only. The old jQuery launcher will be deprecated.
+
+## Current State
+
+### Existing New Launcher Structure
+```
+packages/noodl-core-ui/src/preview/launcher/
+├── Launcher/
+│   ├── Launcher.tsx           # Main component with PAGES array
+│   ├── components/
+│   │   ├── LauncherSidebar/   # Left navigation
+│   │   ├── LauncherPage/      # Page wrapper
+│   │   ├── LauncherProjectCard/
+│   │   └── LauncherSearchBar/
+│   └── views/
+│       ├── Projects.tsx       # Current projects view
+│       └── LearningCenter.tsx # Empty learning view
+└── template/
+    └── LauncherApp/          # App shell template
+```
+
+### Current Page Definition
+```typescript
+// In Launcher.tsx
+export enum LauncherPageId {
+  LocalProjects,
+  LearningCenter
+}
+
+export const PAGES: LauncherPageMetaData[] = [
+  { id: LauncherPageId.LocalProjects, displayName: 'Recent Projects', icon: IconName.CircleDot },
+  { id: LauncherPageId.LearningCenter, displayName: 'Learn', icon: IconName.Rocket }
+];
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Tab Bar Component**
+   - Horizontal tab bar at the top of the main content area
+   - Visual indicator for active tab
+   - Smooth transition when switching tabs
+   - Keyboard navigation support (arrow keys, Enter)
+
+2. **Tab Configuration**
+   - Projects tab (default, opens first)
+   - Learn tab (tutorials, guides)
+   - Templates tab (project starters)
+   - Extensible for future tabs (Marketplace, Settings)
+
+3. **State Persistence**
+   - Remember last active tab across sessions
+   - Store in localStorage or electron-store
+
+4. **URL/Deep Linking (Optional)**
+   - Support for `noodl://dashboard/projects` style deep links
+   - Query params for tab state
+
+### Non-Functional Requirements
+
+- Tab switching should feel instant (<100ms)
+- No layout shift when switching tabs
+- Accessible (WCAG 2.1 AA compliant)
+- Consistent with existing noodl-core-ui design system
+
+## Technical Approach
+
+### 1. Create Tab Bar Component
+
+Create a new component in `noodl-core-ui` that can be reused:
+
+```
+packages/noodl-core-ui/src/components/layout/TabBar/
+├── TabBar.tsx
+├── TabBar.module.scss
+├── TabBar.stories.tsx
+└── index.ts
+```
+
+### 2. Update Launcher Structure
+
+```typescript
+// New page structure
+export enum LauncherPageId {
+  Projects = 'projects',
+  Learn = 'learn', 
+  Templates = 'templates'
+}
+
+export interface LauncherTab {
+  id: LauncherPageId;
+  label: string;
+  icon?: IconName;
+  component: React.ComponentType;
+}
+
+export const LAUNCHER_TABS: LauncherTab[] = [
+  { id: LauncherPageId.Projects, label: 'Projects', icon: IconName.Folder, component: Projects },
+  { id: LauncherPageId.Learn, label: 'Learn', icon: IconName.Book, component: LearningCenter },
+  { id: LauncherPageId.Templates, label: 'Templates', icon: IconName.Components, component: Templates }
+];
+```
+
+### 3. State Management
+
+Use React context for tab state:
+
+```typescript
+// LauncherContext.tsx
+interface LauncherContextValue {
+  activeTab: LauncherPageId;
+  setActiveTab: (tab: LauncherPageId) => void;
+}
+```
+
+### 4. Persistence Hook
+
+```typescript
+// usePersistentTab.ts
+function usePersistentTab(key: string, defaultTab: LauncherPageId) {
+  // Load from localStorage on mount
+  // Save to localStorage on change
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-core-ui/src/components/layout/TabBar/TabBar.tsx`
+2. `packages/noodl-core-ui/src/components/layout/TabBar/TabBar.module.scss`
+3. `packages/noodl-core-ui/src/components/layout/TabBar/TabBar.stories.tsx`
+4. `packages/noodl-core-ui/src/components/layout/TabBar/index.ts`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/LauncherContext.tsx`
+6. `packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/usePersistentTab.ts`
+7. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/Templates.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Import and use TabBar
+   - Implement tab switching logic
+   - Wrap with LauncherContext
+
+2. `packages/noodl-core-ui/src/components/layout/index.ts`
+   - Export TabBar component
+
+## Implementation Steps
+
+### Phase 1: TabBar Component
+1. Create TabBar component with basic functionality
+2. Add styling consistent with noodl-core-ui
+3. Write Storybook stories for testing
+4. Add keyboard navigation
+
+### Phase 2: Launcher Integration
+1. Create LauncherContext
+2. Create usePersistentTab hook
+3. Integrate TabBar into Launcher.tsx
+4. Create empty Templates view
+
+### Phase 3: Polish
+1. Add tab transition animations
+2. Test accessibility
+3. Add deep link support (if time permits)
+
+## Testing Checklist
+
+- [ ] Tabs render correctly
+- [ ] Clicking tab switches content
+- [ ] Active tab is visually indicated
+- [ ] Keyboard navigation works (Tab, Arrow keys, Enter)
+- [ ] Tab state persists after closing/reopening
+- [ ] No layout shift on tab switch
+- [ ] Works at different viewport sizes
+- [ ] Screen reader announces tab changes
+
+## Design Reference
+
+The tab bar should follow the existing Tabs component style in noodl-core-ui but be optimized for the launcher context (larger, more prominent).
+
+See: `packages/noodl-core-ui/src/components/layout/Tabs/`
+
+## Dependencies
+
+- None (this is a foundation task)
+
+## Blocked By
+
+- None
+
+## Blocks
+
+- DASH-002 (Project List Redesign)
+- DASH-003 (Project Organization)
+- DASH-004 (Tutorial Section Redesign)
+
+## Estimated Effort
+
+- Component creation: 2-3 hours
+- Launcher integration: 2-3 hours
+- Polish and testing: 1-2 hours
+- **Total: 5-8 hours**
+
+## Success Criteria
+
+1. User can switch between Projects, Learn, and Templates tabs
+2. Tab state persists across sessions
+3. Component is reusable for other contexts
+4. Passes accessibility audit
+5. Matches existing design system aesthetics

dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-002-project-list-redesign.md

@@ -0,0 +1,292 @@
+# DASH-002: Project List Redesign
+
+## Overview
+
+Transform the project list from a thumbnail grid into a more functional table/list view optimized for users with many projects. Add sorting, better information density, and optional view modes.
+
+## Context
+
+The current dashboard shows projects as large cards with auto-generated thumbnails. This works for users with a few projects but becomes unwieldy with many projects. The thumbnails add visual noise without providing much value.
+
+The new launcher in `noodl-core-ui/src/preview/launcher/` already has the beginnings of a table layout with columns for Name, Version Control, and Contributors.
+
+## Current State
+
+### Existing LauncherProjectCard
+```typescript
+// From LauncherProjectCard.tsx
+export interface LauncherProjectData {
+  id: string;
+  title: string;
+  cloudSyncMeta: {
+    type: CloudSyncType;
+    source?: string;
+  };
+  localPath: string;
+  lastOpened: string;
+  pullAmount?: number;
+  pushAmount?: number;
+  uncommittedChangesAmount?: number;
+  imageSrc: string;
+  contributors?: UserBadgeProps[];
+}
+```
+
+### Current Layout (Projects.tsx)
+- Table header with Name, Version control, Contributors columns
+- Cards with thumbnail images
+- Basic search functionality via LauncherSearchBar
+
+## Requirements
+
+### Functional Requirements
+
+1. **List View (Primary)**
+   - Compact row-based layout
+   - Columns: Name, Last Modified, Git Status, Local Path (truncated)
+   - Row hover state with quick actions
+   - Sortable columns (click header to sort)
+   - Resizable columns (stretch goal)
+
+2. **Grid View (Secondary)**
+   - Card-based layout for visual preference
+   - Smaller cards than current (2-3x more per row)
+   - Optional thumbnails (can be disabled)
+   - View toggle in toolbar
+
+3. **Sorting**
+   - Sort by Name (A-Z, Z-A)
+   - Sort by Last Modified (newest, oldest)
+   - Sort by Git Status (synced first, needs attention first)
+   - Persist sort preference
+
+4. **Information Display**
+   - Project name (primary)
+   - Last modified timestamp (relative: "2 hours ago")
+   - Git status indicator (icon + tooltip)
+   - Local path (truncated with tooltip for full path)
+   - Quick action buttons on hover (Open, Folder, Settings, Delete)
+
+5. **Empty State**
+   - Friendly message when no projects exist
+   - Call-to-action to create new project or import
+
+### Non-Functional Requirements
+
+- Handle 100+ projects smoothly (virtual scrolling if needed)
+- Row click opens project
+- Right-click context menu
+- Responsive to window resize
+
+## Technical Approach
+
+### 1. Data Layer
+
+Create a hook for project data with sorting:
+
+```typescript
+// useProjectList.ts
+interface UseProjectListOptions {
+  sortField: 'name' | 'lastModified' | 'gitStatus';
+  sortDirection: 'asc' | 'desc';
+  filter?: string;
+}
+
+interface UseProjectListReturn {
+  projects: LauncherProjectData[];
+  isLoading: boolean;
+  sortField: string;
+  sortDirection: string;
+  setSorting: (field: string, direction: string) => void;
+}
+```
+
+### 2. List View Component
+
+```
+packages/noodl-core-ui/src/preview/launcher/Launcher/components/
+├── ProjectList/
+│   ├── ProjectList.tsx          # Main list component
+│   ├── ProjectListRow.tsx       # Individual row
+│   ├── ProjectListHeader.tsx    # Sortable header
+│   ├── ProjectList.module.scss
+│   └── index.ts
+```
+
+### 3. View Mode Toggle
+
+```typescript
+// ViewModeToggle.tsx
+export enum ViewMode {
+  List = 'list',
+  Grid = 'grid'
+}
+
+interface ViewModeToggleProps {
+  mode: ViewMode;
+  onChange: (mode: ViewMode) => void;
+}
+```
+
+### 4. Git Status Display
+
+```typescript
+// GitStatusBadge.tsx
+export enum GitStatusType {
+  NotInitialized = 'not-initialized',
+  LocalOnly = 'local-only',
+  Synced = 'synced',
+  Ahead = 'ahead',      // Have local commits to push
+  Behind = 'behind',    // Have remote commits to pull
+  Diverged = 'diverged', // Both ahead and behind
+  Uncommitted = 'uncommitted'
+}
+
+interface GitStatusBadgeProps {
+  status: GitStatusType;
+  details?: {
+    ahead?: number;
+    behind?: number;
+    uncommitted?: number;
+  };
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ProjectList.tsx`
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ProjectListRow.tsx`
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ProjectListHeader.tsx`
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ProjectList.module.scss`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/index.ts`
+6. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ViewModeToggle/ViewModeToggle.tsx`
+7. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitStatusBadge/GitStatusBadge.tsx`
+8. `packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/useProjectList.ts`
+9. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/EmptyProjectsState/EmptyProjectsState.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/Projects.tsx`
+   - Replace current layout with ProjectList component
+   - Add view mode toggle
+   - Wire up sorting
+
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/LauncherProjectCard/LauncherProjectCard.tsx`
+   - Refactor for grid view (smaller)
+   - Make thumbnail optional
+
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Update mock data if needed
+   - Add view mode to context
+
+## Implementation Steps
+
+### Phase 1: Core List View
+1. Create ProjectListHeader with sortable columns
+2. Create ProjectListRow with project info
+3. Create ProjectList combining header and rows
+4. Add basic sorting logic
+
+### Phase 2: Git Status Display
+1. Create GitStatusBadge component
+2. Define status types and icons
+3. Add tooltips with details
+
+### Phase 3: View Modes
+1. Create ViewModeToggle component
+2. Refactor LauncherProjectCard for grid mode
+3. Add view mode to Projects view
+4. Persist preference
+
+### Phase 4: Polish
+1. Add empty state
+2. Add hover actions
+3. Implement virtual scrolling (if needed)
+4. Test with large project counts
+
+## Component Specifications
+
+### ProjectListHeader
+
+| Column | Width | Sortable | Content |
+|--------|-------|----------|---------|
+| Name | 40% | Yes | Project name |
+| Last Modified | 20% | Yes | Relative timestamp |
+| Git Status | 15% | Yes | Status badge |
+| Path | 25% | No | Truncated local path |
+
+### ProjectListRow
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│ 📁 My Project Name          2 hours ago    ⚡ Ahead (3)   ~/dev/...  │
+│                                             [hover: Open 📂 ⚙️ 🗑️]   │
+└──────────────────────────────────────────────────────────────────────┘
+```
+
+### GitStatusBadge Icons
+
+| Status | Icon | Color | Tooltip |
+|--------|------|-------|---------|
+| not-initialized | ⚪ | Gray | "No version control" |
+| local-only | 💾 | Yellow | "Local git only, not synced" |
+| synced | ✅ | Green | "Up to date with remote" |
+| ahead | ⬆️ | Blue | "3 commits to push" |
+| behind | ⬇️ | Orange | "5 commits to pull" |
+| diverged | ⚠️ | Red | "3 ahead, 5 behind" |
+| uncommitted | ● | Yellow | "Uncommitted changes" |
+
+## Testing Checklist
+
+- [ ] List renders with mock data
+- [ ] Clicking row opens project (or shows FIXME alert)
+- [ ] Sorting by each column works
+- [ ] Sort direction toggles on repeated click
+- [ ] Sort preference persists
+- [ ] View mode toggle switches layouts
+- [ ] View mode preference persists
+- [ ] Git status badges display correctly
+- [ ] Tooltips show on hover
+- [ ] Right-click shows context menu
+- [ ] Empty state shows when no projects
+- [ ] Search filters projects correctly
+- [ ] Performance acceptable with 100+ mock projects
+
+## Dependencies
+
+- DASH-001 (Tabbed Navigation System) - for launcher context
+
+## Blocked By
+
+- DASH-001
+
+## Blocks
+
+- DASH-003 (needs list infrastructure for folder/tag filtering)
+
+## Estimated Effort
+
+- ProjectList components: 3-4 hours
+- GitStatusBadge: 1-2 hours
+- View mode toggle: 1-2 hours
+- Sorting & persistence: 2-3 hours
+- Polish & testing: 2-3 hours
+- **Total: 9-14 hours**
+
+## Success Criteria
+
+1. Projects display in a compact, sortable list
+2. Git status is immediately visible
+3. Users can switch to grid view if preferred
+4. Sorting and view preferences persist
+5. Empty state guides new users
+6. Context menu provides quick actions
+
+## Design Notes
+
+The list view should feel similar to:
+- VS Code's file explorer
+- macOS Finder list view
+- GitHub repository list
+
+Keep information density high but avoid clutter. Use icons where possible to save space, with tooltips for details.

dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-003-project-organisation.md

@@ -0,0 +1,357 @@
+# DASH-003: Project Organization - Folders & Tags
+
+## Overview
+
+Add the ability to organize projects using folders and tags. This enables users with many projects to group related work, filter their view, and find projects quickly.
+
+## Context
+
+Currently, projects are displayed in a flat list sorted by recency. Users with many projects (10+) struggle to find specific projects. There's no way to group related projects (e.g., "Client Work", "Personal", "Tutorials").
+
+This task adds a folder/tag system that works entirely client-side, storing metadata separately from the Noodl projects themselves.
+
+## Requirements
+
+### Functional Requirements
+
+1. **Folders**
+   - Create, rename, delete folders
+   - Drag-and-drop projects into folders
+   - Nested folders (1 level deep max)
+   - "All Projects" virtual folder (shows everything)
+   - "Uncategorized" virtual folder (shows unorganized projects)
+   - Folder displayed in sidebar
+
+2. **Tags**
+   - Create, rename, delete tags
+   - Assign multiple tags per project
+   - Color-coded tags
+   - Tag filtering (show projects with specific tags)
+   - Tags displayed as pills on project rows
+
+3. **Filtering**
+   - Filter by folder (sidebar click)
+   - Filter by tag (tag click or dropdown)
+   - Combine folder + tag filters
+   - Search within filtered view
+   - Clear all filters button
+
+4. **Persistence**
+   - Store folder/tag data in electron-store (not in project files)
+   - Data structure keyed by project path (stable identifier)
+   - Export/import organization data (stretch goal)
+
+### Non-Functional Requirements
+
+- Organization changes feel instant
+- Drag-and-drop is smooth
+- Works offline
+- Survives app restart
+
+## Data Model
+
+### Storage Structure
+
+```typescript
+// Stored in electron-store under 'projectOrganization'
+interface ProjectOrganizationData {
+  version: 1;
+  folders: Folder[];
+  tags: Tag[];
+  projectMeta: Record<string, ProjectMeta>; // keyed by project path
+}
+
+interface Folder {
+  id: string;
+  name: string;
+  parentId: string | null; // null = root level
+  order: number;
+  createdAt: string;
+}
+
+interface Tag {
+  id: string;
+  name: string;
+  color: string; // hex color
+  createdAt: string;
+}
+
+interface ProjectMeta {
+  folderId: string | null;
+  tagIds: string[];
+  customName?: string; // optional override
+  notes?: string;      // stretch goal
+}
+```
+
+### Color Palette for Tags
+
+```typescript
+const TAG_COLORS = [
+  '#EF4444', // Red
+  '#F97316', // Orange
+  '#EAB308', // Yellow
+  '#22C55E', // Green
+  '#06B6D4', // Cyan
+  '#3B82F6', // Blue
+  '#8B5CF6', // Purple
+  '#EC4899', // Pink
+  '#6B7280', // Gray
+];
+```
+
+## Technical Approach
+
+### 1. Storage Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ProjectOrganizationService.ts
+
+class ProjectOrganizationService {
+  private static instance: ProjectOrganizationService;
+  
+  // Folder operations
+  createFolder(name: string, parentId?: string): Folder;
+  renameFolder(id: string, name: string): void;
+  deleteFolder(id: string): void;
+  reorderFolder(id: string, newOrder: number): void;
+  
+  // Tag operations
+  createTag(name: string, color: string): Tag;
+  renameTag(id: string, name: string): void;
+  deleteTag(id: string): void;
+  changeTagColor(id: string, color: string): void;
+  
+  // Project organization
+  moveProjectToFolder(projectPath: string, folderId: string | null): void;
+  addTagToProject(projectPath: string, tagId: string): void;
+  removeTagFromProject(projectPath: string, tagId: string): void;
+  
+  // Queries
+  getFolders(): Folder[];
+  getTags(): Tag[];
+  getProjectMeta(projectPath: string): ProjectMeta | null;
+  getProjectsInFolder(folderId: string | null): string[];
+  getProjectsWithTag(tagId: string): string[];
+}
+```
+
+### 2. Sidebar Folder Tree
+
+```
+packages/noodl-core-ui/src/preview/launcher/Launcher/components/
+├── FolderTree/
+│   ├── FolderTree.tsx        # Tree container
+│   ├── FolderTreeItem.tsx    # Individual folder row
+│   ├── FolderTree.module.scss
+│   └── index.ts
+```
+
+### 3. Tag Components
+
+```
+├── TagPill/
+│   ├── TagPill.tsx           # Small colored tag display
+│   └── TagPill.module.scss
+├── TagSelector/
+│   ├── TagSelector.tsx       # Dropdown to add/remove tags
+│   └── TagSelector.module.scss
+├── TagFilter/
+│   ├── TagFilter.tsx         # Filter bar with active tags
+│   └── TagFilter.module.scss
+```
+
+### 4. Drag and Drop
+
+Use `@dnd-kit/core` for drag-and-drop:
+
+```typescript
+// DragDropContext for launcher
+import { DndContext, DragOverlay } from '@dnd-kit/core';
+
+// Draggable project row
+import { useDraggable } from '@dnd-kit/core';
+
+// Droppable folder
+import { useDroppable } from '@dnd-kit/core';
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/ProjectOrganizationService.ts`
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/FolderTree/FolderTree.tsx`
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/FolderTree/FolderTreeItem.tsx`
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/FolderTree/FolderTree.module.scss`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/TagPill/TagPill.tsx`
+6. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/TagSelector/TagSelector.tsx`
+7. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/TagFilter/TagFilter.tsx`
+8. `packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/useProjectOrganization.ts`
+9. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/CreateFolderModal/CreateFolderModal.tsx`
+10. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/CreateTagModal/CreateTagModal.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Add DndContext wrapper
+   - Add organization state to context
+
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/LauncherSidebar/LauncherSidebar.tsx`
+   - Add FolderTree component
+   - Add "Create Folder" button
+
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/Projects.tsx`
+   - Add TagFilter bar
+   - Filter projects based on folder/tag selection
+   - Make project rows draggable
+
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ProjectListRow.tsx`
+   - Add tag pills
+   - Add tag selector on hover/context menu
+   - Make row draggable
+
+## UI Mockups
+
+### Sidebar with Folders
+
+```
+┌─────────────────────────┐
+│ 📁 All Projects    (24) │
+│ 📁 Uncategorized   (5)  │
+├─────────────────────────┤
+│ + Create Folder         │
+├─────────────────────────┤
+│ 📂 Client Work     (8)  │
+│   └─ 📁 Acme Corp  (3)  │
+│   └─ 📁 BigCo      (5)  │
+│ 📂 Personal        (6)  │
+│ 📂 Tutorials       (5)  │
+└─────────────────────────┘
+```
+
+### Project Row with Tags
+
+```
+┌──────────────────────────────────────────────────────────────────────────┐
+│ 📁 E-commerce Dashboard   2h ago   ✅  [🔴 Urgent] [🔵 Client]  ~/dev/... │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+### Tag Filter Bar
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│ Filters: [🔴 Urgent ×] [🔵 Client ×]  [+ Add Filter]  [Clear All]       │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+## Implementation Steps
+
+### Phase 1: Storage Foundation
+1. Create ProjectOrganizationService
+2. Define data model and storage
+3. Create useProjectOrganization hook
+4. Add to launcher context
+
+### Phase 2: Folders
+1. Create FolderTree component
+2. Add to sidebar
+3. Create folder modal
+4. Implement folder filtering
+5. Add context menu (rename, delete)
+
+### Phase 3: Tags
+1. Create TagPill component
+2. Create TagSelector dropdown
+3. Create TagFilter bar
+4. Add tags to project rows
+5. Implement tag filtering
+
+### Phase 4: Drag and Drop
+1. Add dnd-kit dependency
+2. Wrap launcher in DndContext
+3. Make project rows draggable
+4. Make folders droppable
+5. Handle drop events
+
+### Phase 5: Polish
+1. Add keyboard shortcuts
+2. Improve animations
+3. Handle edge cases (deleted projects, etc.)
+4. Test thoroughly
+
+## Testing Checklist
+
+- [ ] Can create a folder
+- [ ] Can rename a folder
+- [ ] Can delete a folder (projects go to Uncategorized)
+- [ ] Can create nested folder
+- [ ] Clicking folder filters project list
+- [ ] Can create a tag
+- [ ] Can assign tag to project
+- [ ] Can remove tag from project
+- [ ] Clicking tag filters project list
+- [ ] Can combine folder + tag filters
+- [ ] Search works within filtered view
+- [ ] Clear filters button works
+- [ ] Drag project to folder works
+- [ ] Data persists after app restart
+- [ ] Removing project from disk shows appropriate state
+
+## Dependencies
+
+- DASH-001 (Tabbed Navigation System)
+- DASH-002 (Project List Redesign) - for project rows
+
+### External Dependencies
+
+Add to `package.json`:
+```json
+{
+  "@dnd-kit/core": "^6.0.0",
+  "@dnd-kit/sortable": "^7.0.0"
+}
+```
+
+## Blocked By
+
+- DASH-002
+
+## Blocks
+
+- None (this is end of the DASH chain)
+
+## Estimated Effort
+
+- Storage service: 2-3 hours
+- Folder tree UI: 3-4 hours
+- Tag components: 3-4 hours
+- Drag and drop: 3-4 hours
+- Filtering logic: 2-3 hours
+- Polish & testing: 3-4 hours
+- **Total: 16-22 hours**
+
+## Success Criteria
+
+1. Users can create folders and organize projects
+2. Users can create tags and assign them to projects
+3. Filtering by folder and tag works correctly
+4. Drag-and-drop feels natural
+5. Organization data persists across sessions
+6. System handles edge cases gracefully (deleted projects, etc.)
+
+## Future Enhancements
+
+- Export/import organization data
+- Folder color customization
+- Project notes/descriptions
+- Bulk operations (move/tag multiple projects)
+- Smart folders (auto-organize by criteria)
+
+## Design Notes
+
+The folder tree should feel familiar like:
+- macOS Finder sidebar
+- VS Code Explorer
+- Notion page tree
+
+Keep interactions lightweight - organization should help, not hinder, the workflow of quickly opening projects.

dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-004-tutorial-section-redesign.md

@@ -0,0 +1,413 @@
+# DASH-004: Tutorial Section Redesign
+
+## Overview
+
+Redesign the tutorial section (Learn tab) to be more compact, informative, and useful. Move from large tiles to a structured learning center with categories, progress tracking, and better discoverability.
+
+## Context
+
+The current tutorial section (`projectsview.ts` and lessons model) shows tutorials as large tiles with progress bars. The tiles take up significant screen space, making it hard to browse many tutorials. There's no categorization beyond a linear list.
+
+The new launcher has an empty `LearningCenter.tsx` view that needs to be built out.
+
+### Current Tutorial System
+
+The existing system uses:
+- `LessonProjectsModel` - manages lesson templates and progress
+- `lessonprojectsmodel.ts` - fetches from docs endpoint
+- Templates stored in docs repo with progress in localStorage
+
+## Requirements
+
+### Functional Requirements
+
+1. **Category Organization**
+   - Categories: Getting Started, Building UIs, Data & Logic, Advanced Topics, Integrations
+   - Collapsible category sections
+   - Category icons/colors
+
+2. **Tutorial Cards (Compact)**
+   - Title
+   - Short description (1-2 lines)
+   - Estimated duration
+   - Difficulty level (Beginner, Intermediate, Advanced)
+   - Progress indicator (not started, in progress, completed)
+   - Thumbnail (small, optional)
+
+3. **Progress Tracking**
+   - Visual progress bar per tutorial
+   - Overall progress stats ("5 of 12 completed")
+   - "Continue where you left off" section at top
+   - Reset progress option
+
+4. **Filtering & Search**
+   - Search tutorials by name/description
+   - Filter by difficulty
+   - Filter by category
+   - Filter by progress (Not Started, In Progress, Completed)
+
+5. **Tutorial Detail View**
+   - Expanded description
+   - Learning objectives
+   - Prerequisites
+   - "Start Tutorial" / "Continue" / "Restart" button
+   - Estimated time remaining (for in-progress)
+
+6. **Additional Content Types**
+   - Video tutorials (embedded or linked)
+   - Written guides
+   - Interactive lessons (existing)
+   - External resources
+
+### Non-Functional Requirements
+
+- Fast loading (tutorials list cached)
+- Works offline for previously loaded tutorials
+- Responsive layout
+- Accessible navigation
+
+## Data Model
+
+### Enhanced Tutorial Structure
+
+```typescript
+interface Tutorial {
+  id: string;
+  title: string;
+  description: string;
+  longDescription?: string;
+  category: TutorialCategory;
+  difficulty: 'beginner' | 'intermediate' | 'advanced';
+  estimatedMinutes: number;
+  type: 'interactive' | 'video' | 'guide';
+  thumbnailUrl?: string;
+  objectives?: string[];
+  prerequisites?: string[];
+  
+  // For interactive tutorials
+  templateUrl?: string;
+  
+  // For video tutorials
+  videoUrl?: string;
+  
+  // For guides
+  guideUrl?: string;
+}
+
+interface TutorialCategory {
+  id: string;
+  name: string;
+  icon: IconName;
+  color: string;
+  order: number;
+}
+
+interface TutorialProgress {
+  tutorialId: string;
+  status: 'not-started' | 'in-progress' | 'completed';
+  lastAccessedAt: string;
+  completedAt?: string;
+  currentStep?: number;
+  totalSteps?: number;
+}
+```
+
+### Default Categories
+
+```typescript
+const TUTORIAL_CATEGORIES: TutorialCategory[] = [
+  { id: 'getting-started', name: 'Getting Started', icon: IconName.Rocket, color: '#22C55E', order: 0 },
+  { id: 'ui', name: 'Building UIs', icon: IconName.Palette, color: '#3B82F6', order: 1 },
+  { id: 'data', name: 'Data & Logic', icon: IconName.Database, color: '#8B5CF6', order: 2 },
+  { id: 'advanced', name: 'Advanced Topics', icon: IconName.Cog, color: '#F97316', order: 3 },
+  { id: 'integrations', name: 'Integrations', icon: IconName.Plug, color: '#EC4899', order: 4 },
+];
+```
+
+## Technical Approach
+
+### 1. Tutorial Service
+
+Extend or replace `LessonProjectsModel`:
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/TutorialService.ts
+
+class TutorialService {
+  private static instance: TutorialService;
+  
+  // Data fetching
+  async fetchTutorials(): Promise<Tutorial[]>;
+  async getTutorialById(id: string): Promise<Tutorial | null>;
+  
+  // Progress
+  getProgress(tutorialId: string): TutorialProgress;
+  updateProgress(tutorialId: string, progress: Partial<TutorialProgress>): void;
+  resetProgress(tutorialId: string): void;
+  
+  // Queries
+  getInProgressTutorials(): Tutorial[];
+  getCompletedTutorials(): Tutorial[];
+  getTutorialsByCategory(categoryId: string): Tutorial[];
+}
+```
+
+### 2. Component Structure
+
+```
+packages/noodl-core-ui/src/preview/launcher/Launcher/
+├── views/
+│   └── LearningCenter/
+│       ├── LearningCenter.tsx        # Main view
+│       ├── LearningCenter.module.scss
+│       ├── ContinueLearning.tsx      # "Continue" section
+│       ├── TutorialCategory.tsx      # Category section
+│       └── TutorialFilters.tsx       # Filter bar
+├── components/
+│   ├── TutorialCard/
+│   │   ├── TutorialCard.tsx          # Compact card
+│   │   ├── TutorialCard.module.scss
+│   │   └── index.ts
+│   ├── TutorialDetailModal/
+│   │   ├── TutorialDetailModal.tsx   # Expanded detail view
+│   │   └── TutorialDetailModal.module.scss
+│   ├── DifficultyBadge/
+│   │   └── DifficultyBadge.tsx       # Beginner/Intermediate/Advanced
+│   ├── ProgressRing/
+│   │   └── ProgressRing.tsx          # Circular progress indicator
+│   └── DurationLabel/
+│       └── DurationLabel.tsx         # "15 min" display
+```
+
+### 3. Learning Center Layout
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Learn                                          [🔍 Search...    ]   │
+├─────────────────────────────────────────────────────────────────────┤
+│ Filters: [All ▾] [All Difficulties ▾] [All Progress ▾] [Clear]     │
+├─────────────────────────────────────────────────────────────────────┤
+│ ⏸️ Continue Learning                                                │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 📚 OpenNoodl Basics            47%  [●●●●●○○○○○]  [Continue →] │ │
+│ │ Data-driven Components        12%  [●○○○○○○○○○]  [Continue →] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+├─────────────────────────────────────────────────────────────────────┤
+│ 🚀 Getting Started                                            ▼    │
+│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐                 │
+│ │ AI Walkthru  │ │ Basics       │ │ Layout       │                 │
+│ │ 🟢 Beginner  │ │ 🟢 Beginner  │ │ 🟢 Beginner  │                 │
+│ │ 15 min       │ │ 15 min       │ │ 15 min       │                 │
+│ │ ✓ Complete   │ │ ● 47%        │ │ ○ Not started│                 │
+│ └──────────────┘ └──────────────┘ └──────────────┘                 │
+├─────────────────────────────────────────────────────────────────────┤
+│ 🎨 Building UIs                                               ▼    │
+│ ...                                                                 │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/TutorialService.ts`
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/LearningCenter/LearningCenter.tsx`
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/LearningCenter/LearningCenter.module.scss`
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/LearningCenter/ContinueLearning.tsx`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/LearningCenter/TutorialCategory.tsx`
+6. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/LearningCenter/TutorialFilters.tsx`
+7. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/TutorialCard/TutorialCard.tsx`
+8. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/TutorialCard/TutorialCard.module.scss`
+9. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/TutorialDetailModal/TutorialDetailModal.tsx`
+10. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/DifficultyBadge/DifficultyBadge.tsx`
+11. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProgressRing/ProgressRing.tsx`
+12. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/DurationLabel/DurationLabel.tsx`
+13. `packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/useTutorials.ts`
+
+## Files to Modify
+
+1. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/LearningCenter.tsx`
+   - Replace empty component with full implementation
+   - Move to folder structure
+
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Update import for LearningCenter
+
+3. `packages/noodl-editor/src/editor/src/models/lessonprojectsmodel.ts`
+   - Either extend or create adapter for new TutorialService
+
+## Implementation Steps
+
+### Phase 1: Data Layer
+1. Create TutorialService
+2. Define data types
+3. Create useTutorials hook
+4. Migrate existing lesson data structure
+
+### Phase 2: Core Components
+1. Create TutorialCard component
+2. Create DifficultyBadge
+3. Create ProgressRing
+4. Create DurationLabel
+
+### Phase 3: Main Layout
+1. Build LearningCenter view
+2. Create TutorialCategory sections
+3. Add ContinueLearning section
+4. Implement category collapse/expand
+
+### Phase 4: Filtering
+1. Create TutorialFilters component
+2. Implement search
+3. Implement filter dropdowns
+4. Wire up filter state
+
+### Phase 5: Detail View
+1. Create TutorialDetailModal
+2. Add start/continue/restart logic
+3. Show objectives and prerequisites
+
+### Phase 6: Polish
+1. Add loading states
+2. Add empty states
+3. Smooth animations
+4. Accessibility review
+
+## Component Specifications
+
+### TutorialCard
+
+```
+┌────────────────────────────┐
+│ [📹]  OpenNoodl Basics     │  <- Type icon + Title
+│ Learn the fundamentals     │  <- Description (truncated)
+│ 🟢 Beginner  ⏱️ 15 min     │  <- Difficulty + Duration
+│ [●●●●●○○○○○] 47%          │  <- Progress bar
+└────────────────────────────┘
+```
+
+Props:
+- `tutorial: Tutorial`
+- `progress: TutorialProgress`
+- `onClick: () => void`
+- `variant?: 'compact' | 'expanded'`
+
+### DifficultyBadge
+
+| Level | Color | Icon |
+|-------|-------|------|
+| Beginner | Green (#22C55E) | 🟢 |
+| Intermediate | Yellow (#EAB308) | 🟡 |
+| Advanced | Red (#EF4444) | 🔴 |
+
+### ProgressRing
+
+Small circular progress indicator:
+- Size: 24px
+- Stroke width: 3px
+- Background: gray
+- Fill: green (completing), green (complete)
+- Center: percentage or checkmark
+
+## Compatibility Notes
+
+### Existing Lesson System
+
+The current system uses:
+```typescript
+// lessonprojectsmodel.ts
+interface LessonTemplate {
+  name: string;
+  description: string;
+  iconURL: string;
+  templateURL: string;
+  progress?: number;
+}
+```
+
+The new system should:
+1. Be backwards compatible with existing templates
+2. Migrate progress data from old format
+3. Support new enhanced metadata
+
+### Migration Path
+
+1. Keep `lessonprojectsmodel.ts` working during transition
+2. Create adapter in TutorialService to read old data
+3. Enhance existing tutorials with new metadata
+4. Eventually deprecate old model
+
+## Testing Checklist
+
+- [ ] Tutorials load from docs endpoint
+- [ ] Categories display correctly
+- [ ] Category collapse/expand works
+- [ ] Progress displays correctly
+- [ ] Continue Learning section shows in-progress tutorials
+- [ ] Search filters tutorials
+- [ ] Difficulty filter works
+- [ ] Progress filter works
+- [ ] Clicking card shows detail modal
+- [ ] Start Tutorial launches tutorial
+- [ ] Continue Tutorial resumes from last point
+- [ ] Restart Tutorial resets progress
+- [ ] Progress persists across sessions
+- [ ] Empty states display appropriately
+- [ ] Responsive at different window sizes
+
+## Dependencies
+
+- DASH-001 (Tabbed Navigation System)
+
+### External Dependencies
+
+None - uses existing noodl-core-ui components.
+
+## Blocked By
+
+- DASH-001
+
+## Blocks
+
+- None
+
+## Estimated Effort
+
+- TutorialService: 2-3 hours
+- TutorialCard components: 2-3 hours
+- LearningCenter layout: 3-4 hours
+- Filtering: 2-3 hours
+- Detail modal: 2-3 hours
+- Polish & testing: 2-3 hours
+- **Total: 13-19 hours**
+
+## Success Criteria
+
+1. Tutorials are organized by category
+2. Users can easily find tutorials by search/filter
+3. Progress is clearly visible
+4. "Continue Learning" helps users resume work
+5. Tutorial cards are compact but informative
+6. Detail modal provides all needed information
+7. System is backwards compatible with existing tutorials
+
+## Future Enhancements
+
+- Video tutorial playback within app
+- Community-contributed tutorials
+- Tutorial recommendations based on usage
+- Learning paths (curated sequences)
+- Achievements/badges for completion
+- Tutorial ratings/feedback
+
+## Design Notes
+
+The learning center should feel like:
+- Duolingo's course browser (compact, progress-focused)
+- Coursera's course catalog (categorized, searchable)
+- VS Code's Getting Started (helpful, not overwhelming)
+
+Prioritize getting users to relevant content quickly. The most common flow is:
+1. See "Continue Learning" → resume last tutorial
+2. Browse category → find new tutorial → start
+3. Search for specific topic → find tutorial → start
+
+Don't make users click through multiple screens to start learning.

dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-overview.md

@@ -0,0 +1,150 @@
+# DASH Series: Dashboard UX Foundation
+
+## Overview
+
+The DASH series modernizes the OpenNoodl editor dashboard, transforming it from a basic project launcher into a proper workspace management hub. These tasks focus on the **new React 19 launcher** in `packages/noodl-core-ui/src/preview/launcher/`.
+
+## Target Environment
+
+- **Editor**: React 19 version only
+- **Runtime**: React 19 version (if applicable)
+- **Backwards Compatibility**: Not required for old launcher
+
+## Task Dependency Graph
+
+```
+DASH-001 (Tabbed Navigation)
+    │
+    ├── DASH-002 (Project List Redesign)
+    │       │
+    │       └── DASH-003 (Project Organization)
+    │
+    └── DASH-004 (Tutorial Section Redesign)
+```
+
+## Task Summary
+
+| Task ID | Name | Est. Hours | Priority |
+|---------|------|------------|----------|
+| DASH-001 | Tabbed Navigation System | 5-8 | Critical |
+| DASH-002 | Project List Redesign | 9-14 | High |
+| DASH-003 | Project Organization | 16-22 | Medium |
+| DASH-004 | Tutorial Section Redesign | 13-19 | Medium |
+
+**Total Estimated: 43-63 hours**
+
+## Implementation Order
+
+### Week 1: Foundation
+1. **DASH-001** - Tabbed navigation (foundation for everything)
+2. **DASH-004** - Tutorial redesign (can parallel with DASH-002)
+
+### Week 2: Project Management
+3. **DASH-002** - Project list redesign
+4. **DASH-003** - Folders and tags
+
+## Key Technical Decisions
+
+### Location
+All new components go in:
+```
+packages/noodl-core-ui/src/preview/launcher/Launcher/
+```
+
+### State Management
+- Use React Context for launcher-wide state
+- Use electron-store for persistence
+- Keep component state minimal
+
+### Styling
+- Use existing noodl-core-ui components
+- CSS Modules for custom styling
+- Follow existing color/spacing tokens
+
+### Data
+- Services in `packages/noodl-editor/src/editor/src/services/`
+- Hooks in launcher `hooks/` folder
+- Types in component folders or shared types file
+
+## Shared Components to Create
+
+These components will be reused across DASH tasks:
+
+| Component | Created In | Used By |
+|-----------|------------|---------|
+| TabBar | DASH-001 | All views |
+| GitStatusBadge | DASH-002 | Project list |
+| ViewModeToggle | DASH-002 | Project list |
+| FolderTree | DASH-003 | Sidebar |
+| TagPill | DASH-003 | Project rows |
+| ProgressRing | DASH-004 | Tutorial cards |
+| DifficultyBadge | DASH-004 | Tutorial cards |
+
+## Testing Strategy
+
+Each task includes a testing checklist. Additionally:
+
+1. **Visual Testing**: Use Storybook for component development
+2. **Integration Testing**: Test in actual launcher context
+3. **Persistence Testing**: Verify data survives app restart
+4. **Performance Testing**: Check with 100+ projects/tutorials
+
+## Cline Usage Notes
+
+### Before Starting Each Task
+
+1. Read the task document completely
+2. Explore the existing code in `packages/noodl-core-ui/src/preview/launcher/`
+3. Check existing components in `packages/noodl-core-ui/src/components/`
+4. Understand the data flow
+
+### During Implementation
+
+1. Create components incrementally with Storybook stories
+2. Test in isolation before integration
+3. Update imports/exports in index files
+4. Follow existing code style
+
+### Confidence Checkpoints
+
+Rate confidence (1-10) at these points:
+- After reading task document
+- After exploring existing code
+- Before creating first component
+- After completing each phase
+- Before marking task complete
+
+### Common Gotchas
+
+1. **Mock Data**: The launcher currently uses mock data - don't try to connect to real data yet
+2. **FIXME Alerts**: Many click handlers are `alert('FIXME: ...')` - that's expected
+3. **Storybook**: Run `npm run storybook` in noodl-core-ui to test components
+4. **Imports**: noodl-core-ui uses path aliases - check existing imports for patterns
+
+## Success Criteria (Series Complete)
+
+1. ✅ Launcher has tabbed navigation (Projects, Learn, Templates)
+2. ✅ Projects display in sortable list with git status
+3. ✅ Projects can be organized with folders and tags
+4. ✅ Tutorials are organized by category with progress tracking
+5. ✅ All preferences persist across sessions
+6. ✅ UI is responsive and accessible
+7. ✅ New components are reusable
+
+## Future Work (Post-DASH)
+
+The DASH series sets up infrastructure for:
+- **GIT series**: GitHub integration, sync status
+- **COMP series**: Shared components system
+- **AI series**: AI project creation
+- **DEPLOY series**: Deployment automation
+
+These will be documented separately.
+
+## Files in This Series
+
+- `DASH-001-tabbed-navigation.md`
+- `DASH-002-project-list-redesign.md`
+- `DASH-003-project-organization.md`
+- `DASH-004-tutorial-section-redesign.md`
+- `DASH-OVERVIEW.md` (this file)

dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-001-github-oauth.md

@@ -0,0 +1,335 @@
+# GIT-001: GitHub OAuth Integration
+
+## Overview
+
+Add GitHub OAuth as an authentication method alongside the existing Personal Access Token (PAT) approach. This provides a smoother onboarding experience and enables access to GitHub's API for advanced features like repository browsing and organization access.
+
+## Context
+
+Currently, Noodl uses Personal Access Tokens for GitHub authentication:
+- Stored per-project in `GitStore` (encrypted locally)
+- Prompted via `GitProviderPopout` component
+- Used by `trampoline-askpass-handler` for git operations
+
+OAuth provides advantages:
+- No need to manually create and copy PATs
+- Automatic token refresh
+- Access to GitHub API (not just git operations)
+- Org/repo scope selection
+
+## Current State
+
+### Existing Authentication Flow
+```
+User → GitProviderPopout → Enter PAT → GitStore.set() → Git operations use PAT
+```
+
+### Key Files
+- `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/GitProviderPopout/`
+- `packages/noodl-store/src/GitStore.ts` (assumed location)
+- `packages/noodl-git/src/core/trampoline/trampoline-askpass-handler.ts`
+
+## Requirements
+
+### Functional Requirements
+
+1. **OAuth Flow**
+   - "Connect with GitHub" button in settings/dashboard
+   - Opens GitHub OAuth in system browser
+   - Handles callback via custom protocol (`noodl://github-callback`)
+   - Exchanges code for access token
+   - Stores token securely
+
+2. **Scope Selection**
+   - Request appropriate scopes: `repo`, `read:org`, `read:user`
+   - Display what permissions are being requested
+   - Option to request additional scopes later
+
+3. **Account Management**
+   - Show connected GitHub account (avatar, username)
+   - "Disconnect" option
+   - Support multiple accounts (stretch goal)
+
+4. **Organization Access**
+   - List user's organizations
+   - Allow selecting which orgs to access
+   - Remember org selection
+
+5. **Token Management**
+   - Secure storage using electron's safeStorage or keytar
+   - Automatic token refresh (GitHub OAuth tokens don't expire but can be revoked)
+   - Handle token revocation gracefully
+
+6. **Fallback to PAT**
+   - Keep existing PAT flow as alternative
+   - "Use Personal Access Token instead" option
+   - Clear migration path from PAT to OAuth
+
+### Non-Functional Requirements
+
+- OAuth flow completes in <30 seconds
+- Token stored securely (encrypted at rest)
+- Works behind corporate proxies
+- Graceful offline handling
+
+## Technical Approach
+
+### 1. GitHub OAuth App Setup
+
+Register OAuth App in GitHub:
+- Application name: "OpenNoodl"
+- Homepage URL: `https://opennoodl.net`
+- Callback URL: `noodl://github-callback`
+
+Store Client ID in app (Client Secret not needed for public clients using PKCE).
+
+### 2. OAuth Flow Implementation
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/GitHubOAuthService.ts
+
+class GitHubOAuthService {
+  private static instance: GitHubOAuthService;
+  
+  // OAuth flow
+  async initiateOAuth(): Promise<void>;
+  async handleCallback(code: string, state: string): Promise<GitHubToken>;
+  
+  // Token management
+  async getToken(): Promise<string | null>;
+  async refreshToken(): Promise<string>;
+  async revokeToken(): Promise<void>;
+  
+  // Account info
+  async getCurrentUser(): Promise<GitHubUser>;
+  async getOrganizations(): Promise<GitHubOrg[]>;
+  
+  // State
+  isAuthenticated(): boolean;
+  onAuthStateChanged(callback: (authenticated: boolean) => void): void;
+}
+```
+
+### 3. PKCE Flow (Recommended for Desktop Apps)
+
+```typescript
+// Generate PKCE challenge
+function generatePKCE(): { verifier: string; challenge: string } {
+  const verifier = crypto.randomBytes(32).toString('base64url');
+  const challenge = crypto
+    .createHash('sha256')
+    .update(verifier)
+    .digest('base64url');
+  return { verifier, challenge };
+}
+
+// OAuth URL
+function getAuthorizationUrl(state: string, challenge: string): string {
+  const params = new URLSearchParams({
+    client_id: GITHUB_CLIENT_ID,
+    redirect_uri: 'noodl://github-callback',
+    scope: 'repo read:org read:user',
+    state,
+    code_challenge: challenge,
+    code_challenge_method: 'S256'
+  });
+  return `https://github.com/login/oauth/authorize?${params}`;
+}
+```
+
+### 4. Deep Link Handler
+
+```typescript
+// packages/noodl-editor/src/main/main.js
+
+// Register protocol handler
+app.setAsDefaultProtocolClient('noodl');
+
+// Handle deep links
+app.on('open-url', (event, url) => {
+  event.preventDefault();
+  if (url.startsWith('noodl://github-callback')) {
+    const params = new URL(url).searchParams;
+    const code = params.get('code');
+    const state = params.get('state');
+    handleGitHubCallback(code, state);
+  }
+});
+```
+
+### 5. Secure Token Storage
+
+```typescript
+// Use electron's safeStorage API
+import { safeStorage } from 'electron';
+
+async function storeToken(token: string): Promise<void> {
+  const encrypted = safeStorage.encryptString(token);
+  await store.set('github.token', encrypted.toString('base64'));
+}
+
+async function getToken(): Promise<string | null> {
+  const encrypted = await store.get('github.token');
+  if (!encrypted) return null;
+  return safeStorage.decryptString(Buffer.from(encrypted, 'base64'));
+}
+```
+
+### 6. Integration with Existing Git Auth
+
+```typescript
+// packages/noodl-utils/LocalProjectsModel.ts
+
+setCurrentGlobalGitAuth(projectId: string) {
+  const func = async (endpoint: string) => {
+    if (endpoint.includes('github.com')) {
+      // Try OAuth token first
+      const oauthToken = await GitHubOAuthService.instance.getToken();
+      if (oauthToken) {
+        return {
+          username: 'oauth2',
+          password: oauthToken
+        };
+      }
+      
+      // Fall back to PAT
+      const config = await GitStore.get('github', projectId);
+      return {
+        username: 'noodl',
+        password: config?.password
+      };
+    }
+    // ... rest of existing logic
+  };
+  
+  setRequestGitAccount(func);
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/GitHubOAuthService.ts`
+2. `packages/noodl-editor/src/editor/src/services/GitHubApiClient.ts`
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitHubAccountCard/GitHubAccountCard.tsx`
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitHubConnectButton/GitHubConnectButton.tsx`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/OrgSelector/OrgSelector.tsx`
+6. `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/GitProviderPopout/sections/OAuthSection.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/main/main.js`
+   - Add deep link protocol handler for `noodl://`
+
+2. `packages/noodl-utils/LocalProjectsModel.ts`
+   - Update `setCurrentGlobalGitAuth` to prefer OAuth token
+
+3. `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/GitProviderPopout/GitProviderPopout.tsx`
+   - Add OAuth option alongside PAT
+
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/LauncherSidebar/LauncherSidebar.tsx`
+   - Add GitHub account display/connect button
+
+## Implementation Steps
+
+### Phase 1: OAuth Service Foundation
+1. Create GitHubOAuthService class
+2. Implement PKCE flow
+3. Set up deep link handler in main process
+4. Implement secure token storage
+
+### Phase 2: UI Components
+1. Create GitHubConnectButton
+2. Create GitHubAccountCard
+3. Add OAuth section to GitProviderPopout
+4. Add account display to launcher sidebar
+
+### Phase 3: API Integration
+1. Create GitHubApiClient for REST API calls
+2. Implement user info fetching
+3. Implement organization listing
+4. Create OrgSelector component
+
+### Phase 4: Git Integration
+1. Update LocalProjectsModel auth function
+2. Test with git operations
+3. Handle token expiry/revocation
+4. Add fallback to PAT
+
+### Phase 5: Polish
+1. Error handling and messages
+2. Offline handling
+3. Loading states
+4. Settings persistence
+
+## Security Considerations
+
+1. **PKCE**: Use PKCE flow instead of client secret (more secure for desktop apps)
+2. **Token Storage**: Use electron's safeStorage API (OS-level encryption)
+3. **State Parameter**: Verify state to prevent CSRF attacks
+4. **Scope Limitation**: Request minimum required scopes
+5. **Token Exposure**: Never log tokens, clear from memory when not needed
+
+## Testing Checklist
+
+- [ ] OAuth flow completes successfully
+- [ ] Token stored securely
+- [ ] Token retrieved correctly for git operations
+- [ ] Clone works with OAuth token
+- [ ] Push works with OAuth token
+- [ ] Pull works with OAuth token
+- [ ] Disconnect clears token
+- [ ] Fallback to PAT works
+- [ ] Organizations listed correctly
+- [ ] Deep link works on macOS
+- [ ] Deep link works on Windows
+- [ ] Handles network errors gracefully
+- [ ] Handles token revocation gracefully
+
+## Dependencies
+
+- DASH-001 (for launcher context to display account)
+
+### External Dependencies
+
+May need to add:
+```json
+{
+  "keytar": "^7.9.0"  // Alternative to safeStorage for older Electron
+}
+```
+
+## Blocked By
+
+- DASH-001 (Tabbed Navigation) - for launcher UI placement
+
+## Blocks
+
+- GIT-003 (Repository Cloning) - needs auth for private repos
+- COMP-004 (Organization Components) - needs org access
+
+## Estimated Effort
+
+- OAuth service: 4-6 hours
+- Deep link handler: 2-3 hours
+- UI components: 3-4 hours
+- Git integration: 2-3 hours
+- Testing & polish: 3-4 hours
+- **Total: 14-20 hours**
+
+## Success Criteria
+
+1. Users can authenticate with GitHub via OAuth
+2. OAuth tokens are stored securely
+3. Git operations work with OAuth tokens
+4. Users can see their connected account
+5. Users can disconnect and reconnect
+6. PAT remains available as fallback
+7. Flow works on both macOS and Windows
+
+## Future Enhancements
+
+- Multiple GitHub account support
+- GitLab OAuth
+- Bitbucket OAuth
+- GitHub Enterprise support
+- Fine-grained personal access tokens

dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-002-dashboard-git-status.md

@@ -0,0 +1,426 @@
+# GIT-002: Git Status Dashboard Visibility
+
+## Overview
+
+Surface git status information directly in the project list on the dashboard, allowing users to see at a glance which projects need attention (uncommitted changes, unpushed commits, available updates) without opening each project.
+
+## Context
+
+Currently, git status is only visible inside the VersionControlPanel after opening a project. Users with many projects have no way to know which ones have uncommitted changes or need syncing.
+
+The new launcher already has mock data for git sync status in `LauncherProjectCard`, but it's not connected to real data.
+
+### Existing Infrastructure
+
+From `LauncherProjectCard.tsx`:
+```typescript
+export enum CloudSyncType {
+  None = 'none',
+  Git = 'git'
+}
+
+export interface LauncherProjectData {
+  cloudSyncMeta: {
+    type: CloudSyncType;
+    source?: string;  // Remote URL
+  };
+  pullAmount?: number;
+  pushAmount?: number;
+  uncommittedChangesAmount?: number;
+}
+```
+
+From `VersionControlPanel/context/fetch.context.ts`:
+```typescript
+// Already calculates:
+localCommitCount    // Commits ahead of remote
+remoteCommitCount   // Commits behind remote
+workingDirectoryStatus  // Uncommitted files
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Status Indicators in Project List**
+   - Not Initialized: Gray indicator, no version control
+   - Local Only: Yellow indicator, git but no remote
+   - Synced: Green checkmark, up to date
+   - Has Uncommitted Changes: Yellow dot, local modifications
+   - Ahead: Blue up arrow, local commits to push
+   - Behind: Orange down arrow, remote commits to pull
+   - Diverged: Red warning, both ahead and behind
+
+2. **Status Details**
+   - Tooltip showing details on hover
+   - "3 commits to push, 2 to pull"
+   - "5 uncommitted files"
+   - Last sync time
+
+3. **Quick Actions**
+   - Quick sync button (fetch + show status)
+   - Link to open Version Control panel
+
+4. **Background Refresh**
+   - Check status on dashboard load
+   - Periodic refresh (every 5 minutes)
+   - Manual refresh button
+   - Status cached to avoid repeated git operations
+
+5. **Performance**
+   - Parallel status checks for multiple projects
+   - Debounced/throttled to avoid overwhelming git
+   - Cached results with TTL
+
+### Non-Functional Requirements
+
+- Status check per project: <500ms
+- Dashboard load not blocked by status checks
+- Works offline (shows cached/stale data)
+
+## Data Model
+
+### Git Status Types
+
+```typescript
+enum ProjectGitStatus {
+  Unknown = 'unknown',           // Haven't checked yet
+  NotInitialized = 'not-init',   // Not a git repo
+  LocalOnly = 'local-only',      // Git but no remote
+  Synced = 'synced',             // Up to date with remote
+  Uncommitted = 'uncommitted',   // Has local changes
+  Ahead = 'ahead',               // Has commits to push
+  Behind = 'behind',             // Has commits to pull
+  Diverged = 'diverged',         // Both ahead and behind
+  Error = 'error'                // Failed to check
+}
+
+interface ProjectGitStatusDetails {
+  status: ProjectGitStatus;
+  aheadCount?: number;
+  behindCount?: number;
+  uncommittedCount?: number;
+  lastFetchTime?: number;
+  remoteUrl?: string;
+  currentBranch?: string;
+  error?: string;
+}
+```
+
+### Cache Structure
+
+```typescript
+interface GitStatusCache {
+  [projectPath: string]: {
+    status: ProjectGitStatusDetails;
+    checkedAt: number;
+    isStale: boolean;
+  };
+}
+```
+
+## Technical Approach
+
+### 1. Git Status Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ProjectGitStatusService.ts
+
+class ProjectGitStatusService {
+  private static instance: ProjectGitStatusService;
+  private cache: GitStatusCache = {};
+  private checkQueue: Set<string> = new Set();
+  private isChecking = false;
+  
+  // Check single project
+  async checkStatus(projectPath: string): Promise<ProjectGitStatusDetails>;
+  
+  // Check multiple projects (batched)
+  async checkStatusBatch(projectPaths: string[]): Promise<Map<string, ProjectGitStatusDetails>>;
+  
+  // Get cached status
+  getCachedStatus(projectPath: string): ProjectGitStatusDetails | null;
+  
+  // Clear cache
+  invalidateCache(projectPath?: string): void;
+  
+  // Subscribe to status changes
+  onStatusChanged(callback: (path: string, status: ProjectGitStatusDetails) => void): () => void;
+}
+```
+
+### 2. Status Check Implementation
+
+```typescript
+async checkStatus(projectPath: string): Promise<ProjectGitStatusDetails> {
+  const git = new Git(mergeProject);
+  
+  try {
+    // Check if it's a git repo
+    const gitPath = await getTopLevelWorkingDirectory(projectPath);
+    if (!gitPath) {
+      return { status: ProjectGitStatus.NotInitialized };
+    }
+    
+    await git.openRepository(projectPath);
+    
+    // Check for remote
+    const remoteName = await git.getRemoteName();
+    if (!remoteName) {
+      return { status: ProjectGitStatus.LocalOnly };
+    }
+    
+    // Get working directory status
+    const workingStatus = await git.status();
+    const uncommittedCount = workingStatus.length;
+    
+    // Get commit counts (requires fetch for accuracy)
+    const commits = await git.getCommitsCurrentBranch();
+    const aheadCount = commits.filter(c => c.isLocalAhead).length;
+    const behindCount = commits.filter(c => c.isRemoteAhead).length;
+    
+    // Determine status
+    let status: ProjectGitStatus;
+    if (uncommittedCount > 0) {
+      status = ProjectGitStatus.Uncommitted;
+    } else if (aheadCount > 0 && behindCount > 0) {
+      status = ProjectGitStatus.Diverged;
+    } else if (aheadCount > 0) {
+      status = ProjectGitStatus.Ahead;
+    } else if (behindCount > 0) {
+      status = ProjectGitStatus.Behind;
+    } else {
+      status = ProjectGitStatus.Synced;
+    }
+    
+    return {
+      status,
+      aheadCount,
+      behindCount,
+      uncommittedCount,
+      lastFetchTime: Date.now(),
+      remoteUrl: git.OriginUrl,
+      currentBranch: await git.getCurrentBranchName()
+    };
+  } catch (error) {
+    return {
+      status: ProjectGitStatus.Error,
+      error: error.message
+    };
+  }
+}
+```
+
+### 3. Dashboard Integration Hook
+
+```typescript
+// packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/useProjectGitStatus.ts
+
+function useProjectGitStatus(projectPaths: string[]) {
+  const [statuses, setStatuses] = useState<Map<string, ProjectGitStatusDetails>>(new Map());
+  const [isLoading, setIsLoading] = useState(true);
+  
+  useEffect(() => {
+    // Initial check
+    ProjectGitStatusService.instance
+      .checkStatusBatch(projectPaths)
+      .then(setStatuses)
+      .finally(() => setIsLoading(false));
+    
+    // Subscribe to updates
+    const unsubscribe = ProjectGitStatusService.instance.onStatusChanged((path, status) => {
+      setStatuses(prev => new Map(prev).set(path, status));
+    });
+    
+    return unsubscribe;
+  }, [projectPaths]);
+  
+  const refresh = useCallback(() => {
+    ProjectGitStatusService.instance.invalidateCache();
+    // Re-trigger check
+  }, []);
+  
+  return { statuses, isLoading, refresh };
+}
+```
+
+### 4. Visual Status Badge
+
+Already started in DASH-002 as `GitStatusBadge`, but needs real data connection:
+
+```typescript
+// Enhanced GitStatusBadge props
+interface GitStatusBadgeProps {
+  status: ProjectGitStatus;
+  details: ProjectGitStatusDetails;
+  showTooltip?: boolean;
+  size?: 'small' | 'medium';
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/ProjectGitStatusService.ts`
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/useProjectGitStatus.ts`
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitStatusBadge/GitStatusBadge.tsx` (if not created in DASH-002)
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitStatusBadge/GitStatusBadge.module.scss`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitStatusTooltip/GitStatusTooltip.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/Projects.tsx`
+   - Use `useProjectGitStatus` hook
+   - Pass status to project cards/rows
+
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ProjectListRow.tsx`
+   - Display GitStatusBadge with real data
+
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/LauncherProjectCard/LauncherProjectCard.tsx`
+   - Update to use real status data (for grid view)
+
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Replace mock project data with real data connection
+
+## Visual Specifications
+
+### Status Badge Icons & Colors
+
+| Status | Icon | Color | Background |
+|--------|------|-------|------------|
+| Unknown | ◌ (spinner) | Gray | Transparent |
+| Not Initialized | ⊘ | Gray (#6B7280) | Transparent |
+| Local Only | 💾 | Yellow (#EAB308) | Yellow/10 |
+| Synced | ✓ | Green (#22C55E) | Green/10 |
+| Uncommitted | ● | Yellow (#EAB308) | Yellow/10 |
+| Ahead | ↑ | Blue (#3B82F6) | Blue/10 |
+| Behind | ↓ | Orange (#F97316) | Orange/10 |
+| Diverged | ⚠ | Red (#EF4444) | Red/10 |
+| Error | ✕ | Red (#EF4444) | Red/10 |
+
+### Tooltip Content
+
+```
+┌─────────────────────────────────┐
+│ main branch                     │
+│ ↑ 3 commits to push             │
+│ ↓ 2 commits to pull             │
+│ ● 5 uncommitted files           │
+│                                 │
+│ Last synced: 10 minutes ago     │
+│ Remote: github.com/user/repo    │
+└─────────────────────────────────┘
+```
+
+## Implementation Steps
+
+### Phase 1: Service Foundation
+1. Create ProjectGitStatusService
+2. Implement single project status check
+3. Add caching logic
+4. Create batch checking with parallelization
+
+### Phase 2: Hook & Data Flow
+1. Create useProjectGitStatus hook
+2. Connect to Projects view
+3. Replace mock data with real data
+4. Add loading states
+
+### Phase 3: Visual Components
+1. Create/update GitStatusBadge
+2. Create GitStatusTooltip
+3. Integrate into ProjectListRow
+4. Integrate into LauncherProjectCard
+
+### Phase 4: Refresh & Background
+1. Add manual refresh button
+2. Implement periodic background refresh
+3. Add refresh on window focus
+4. Handle offline state
+
+### Phase 5: Polish
+1. Performance optimization
+2. Error handling
+3. Stale data indicators
+4. Animation on status change
+
+## Performance Considerations
+
+1. **Parallel Checking**: Check up to 5 projects simultaneously
+2. **Debouncing**: Don't re-check same project within 10 seconds
+3. **Cache TTL**: Status valid for 5 minutes, stale after
+4. **Lazy Loading**: Only check visible projects first
+5. **Background Priority**: Use requestIdleCallback for non-visible
+
+```typescript
+// Throttled batch check
+async checkStatusBatch(projectPaths: string[]): Promise<Map<string, ProjectGitStatusDetails>> {
+  const CONCURRENCY = 5;
+  const results = new Map();
+  
+  for (let i = 0; i < projectPaths.length; i += CONCURRENCY) {
+    const batch = projectPaths.slice(i, i + CONCURRENCY);
+    const batchResults = await Promise.all(
+      batch.map(path => this.checkStatus(path))
+    );
+    batch.forEach((path, idx) => results.set(path, batchResults[idx]));
+  }
+  
+  return results;
+}
+```
+
+## Testing Checklist
+
+- [ ] Detects non-git project correctly
+- [ ] Detects git project without remote
+- [ ] Shows synced status when up to date
+- [ ] Shows uncommitted when local changes exist
+- [ ] Shows ahead when local commits exist
+- [ ] Shows behind when remote commits exist
+- [ ] Shows diverged when both ahead and behind
+- [ ] Tooltip shows correct details
+- [ ] Refresh updates status
+- [ ] Status persists across dashboard navigation
+- [ ] Handles deleted projects gracefully
+- [ ] Handles network errors gracefully
+- [ ] Performance acceptable with 20+ projects
+
+## Dependencies
+
+- DASH-002 (Project List Redesign) - for UI integration
+
+## Blocked By
+
+- DASH-002
+
+## Blocks
+
+- GIT-004 (Auto-initialization) - needs status detection
+- GIT-005 (Enhanced Push/Pull) - shares status infrastructure
+
+## Estimated Effort
+
+- Status service: 3-4 hours
+- Hook & data flow: 2-3 hours
+- Visual components: 2-3 hours
+- Background refresh: 2-3 hours
+- Polish & testing: 2-3 hours
+- **Total: 11-16 hours**
+
+## Success Criteria
+
+1. Git status visible at a glance in project list
+2. Status updates without manual refresh
+3. Tooltip provides actionable details
+4. Performance acceptable with many projects
+5. Works offline with cached data
+6. Handles edge cases gracefully
+
+## Future Enhancements
+
+- Quick commit from dashboard
+- Quick push/pull buttons per project
+- Bulk sync all projects
+- Branch indicator
+- Last commit message preview
+- Contributor avatars (from git log)

dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-003-repository-cloning.md

@@ -0,0 +1,346 @@
+# GIT-003: Repository Cloning
+
+## Overview
+
+Add the ability to clone GitHub repositories directly from the Noodl dashboard, similar to how VS Code handles cloning. Users can browse their repositories, select one, choose a local folder, and have the project cloned and opened automatically.
+
+## Context
+
+Currently, to work with an existing Noodl project from GitHub, users must:
+1. Clone the repo manually using git CLI or another tool
+2. Open Noodl
+3. Use "Open folder" to navigate to the cloned project
+
+This task streamlines that to:
+1. Click "Clone from GitHub"
+2. Select repository
+3. Choose folder
+4. Project opens automatically
+
+### Existing Infrastructure
+
+The `noodl-git` package already has clone functionality:
+```typescript
+// From git.ts
+async clone({ url, directory, singleBranch, onProgress }: GitCloneOptions): Promise<void>
+```
+
+And clone tests show it working:
+```typescript
+await git.clone({
+  url: 'https://github.com/github/testrepo.git',
+  directory: tempDir,
+  onProgress: (progress) => { result.push(progress); }
+});
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Clone Entry Points**
+   - "Clone Repository" button in dashboard toolbar
+   - "Clone from GitHub" option in "Create Project" menu
+   - Right-click empty area → "Clone Repository"
+
+2. **Repository Browser**
+   - List user's repositories (requires OAuth from GIT-001)
+   - List organization repositories
+   - Search/filter repositories
+   - Show repo details: name, description, visibility, last updated
+   - "Clone URL" input for direct URL entry
+
+3. **Folder Selection**
+   - Native folder picker dialog
+   - Remember last used parent folder
+   - Validate folder is empty or doesn't exist
+   - Show full path before cloning
+
+4. **Clone Process**
+   - Progress indicator with stages
+   - Cancel button
+   - Error handling with clear messages
+   - Retry option on failure
+
+5. **Post-Clone Actions**
+   - Automatically open project in editor
+   - Add to recent projects
+   - Show success notification
+
+6. **Branch Selection (Optional)**
+   - Default to main/master
+   - Option to select different branch
+   - Shallow clone option for large repos
+
+### Non-Functional Requirements
+
+- Clone progress updates smoothly
+- Cancellation works immediately
+- Handles large repositories
+- Works with private repositories (with auth)
+- Clear error messages for common failures
+
+## Technical Approach
+
+### 1. Clone Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/CloneService.ts
+
+interface CloneOptions {
+  url: string;
+  directory: string;
+  branch?: string;
+  shallow?: boolean;
+  onProgress?: (progress: CloneProgress) => void;
+}
+
+interface CloneProgress {
+  phase: 'counting' | 'compressing' | 'receiving' | 'resolving' | 'checking-out';
+  percent: number;
+  message: string;
+}
+
+interface CloneResult {
+  success: boolean;
+  projectPath?: string;
+  error?: string;
+}
+
+class CloneService {
+  private static instance: CloneService;
+  private activeClone: AbortController | null = null;
+  
+  async clone(options: CloneOptions): Promise<CloneResult>;
+  cancel(): void;
+  
+  // GitHub API integration
+  async listUserRepos(): Promise<GitHubRepo[]>;
+  async listOrgRepos(orgName: string): Promise<GitHubRepo[]>;
+  async searchRepos(query: string): Promise<GitHubRepo[]>;
+}
+```
+
+### 2. Repository Browser Component
+
+```typescript
+// RepoBrowser.tsx
+
+interface RepoBrowserProps {
+  onSelect: (repo: GitHubRepo) => void;
+  onUrlSubmit: (url: string) => void;
+}
+
+interface GitHubRepo {
+  id: number;
+  name: string;
+  fullName: string;
+  description: string;
+  private: boolean;
+  htmlUrl: string;
+  cloneUrl: string;
+  sshUrl: string;
+  defaultBranch: string;
+  updatedAt: string;
+  owner: {
+    login: string;
+    avatarUrl: string;
+  };
+}
+```
+
+### 3. Clone Modal Flow
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Clone Repository                                              [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ [🔍 Search repositories...                                    ] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ [Your Repositories ▾]  [Organizations: acme-corp ▾]                │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 📁 noodl-project-template               ★ 12      2 days ago   │ │
+│ │    A starter template for Noodl projects         [Private 🔒]  │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ 📁 my-awesome-app                        ★ 5      1 week ago   │ │
+│ │    An awesome application built with Noodl       [Public 🌍]   │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ 📁 client-dashboard                      ★ 0      3 weeks ago  │ │
+│ │    Dashboard for client project                  [Private 🔒]  │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ─── OR enter repository URL ─────────────────────────────────────  │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ https://github.com/user/repo.git                               │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│                                              [Cancel]  [Next →]    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 4. Folder Selection Step
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Clone Repository                                              [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│ Repository: github.com/user/my-awesome-app                         │
+│                                                                     │
+│ Clone to:                                                           │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ /Users/richard/Projects/my-awesome-app           [Browse...]   │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ☐ Clone only the default branch (faster)                          │
+│                                                                     │
+│                                         [← Back]  [Cancel]  [Clone]│
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Progress Step
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Cloning Repository                                            [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Cloning my-awesome-app...                                          │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 42%     │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ Receiving objects: 1,234 of 2,891                                  │
+│                                                                     │
+│                                                        [Cancel]    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/CloneService.ts`
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/CloneModal/CloneModal.tsx`
+3. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/CloneModal/CloneModal.module.scss`
+4. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/CloneModal/RepoBrowser.tsx`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/CloneModal/FolderSelector.tsx`
+6. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/CloneModal/CloneProgress.tsx`
+7. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/RepoCard/RepoCard.tsx`
+8. `packages/noodl-editor/src/editor/src/services/GitHubApiClient.ts` (if not created in GIT-001)
+
+## Files to Modify
+
+1. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/Projects.tsx`
+   - Add "Clone Repository" button to toolbar
+
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Add clone modal state and rendering
+
+3. `packages/noodl-utils/LocalProjectsModel.ts`
+   - Add cloned project to recent projects list
+
+4. `packages/noodl-editor/src/editor/src/views/projectsview.ts`
+   - Ensure cloned project can be opened (may already work)
+
+## Implementation Steps
+
+### Phase 1: Clone Service
+1. Create CloneService wrapper around noodl-git
+2. Add progress normalization
+3. Add cancellation support
+4. Test with public repository
+
+### Phase 2: URL-Based Cloning
+1. Create basic CloneModal with URL input
+2. Create FolderSelector component
+3. Create CloneProgress component
+4. Wire up clone flow
+
+### Phase 3: Repository Browser
+1. Create GitHubApiClient (or extend from GIT-001)
+2. Create RepoBrowser component
+3. Create RepoCard component
+4. Add search/filter functionality
+
+### Phase 4: Integration
+1. Add clone button to dashboard
+2. Open cloned project automatically
+3. Add to recent projects
+4. Handle errors gracefully
+
+### Phase 5: Polish
+1. Remember last folder
+2. Add branch selection
+3. Add shallow clone option
+4. Improve error messages
+
+## Error Handling
+
+| Error | User Message | Recovery |
+|-------|--------------|----------|
+| Network error | "Unable to connect. Check your internet connection." | Retry button |
+| Auth required | "This repository requires authentication. Connect your GitHub account." | Link to OAuth |
+| Repo not found | "Repository not found. Check the URL and try again." | Edit URL |
+| Permission denied | "You don't have access to this repository." | Suggest checking permissions |
+| Folder not empty | "The selected folder is not empty. Choose an empty folder." | Folder picker |
+| Disk full | "Not enough disk space to clone this repository." | Show required space |
+
+## Testing Checklist
+
+- [ ] Clone public repository via URL
+- [ ] Clone private repository with OAuth token
+- [ ] Clone private repository with PAT
+- [ ] Repository browser shows user repos
+- [ ] Repository browser shows org repos
+- [ ] Search/filter works
+- [ ] Folder picker opens and works
+- [ ] Progress updates smoothly
+- [ ] Cancel stops clone in progress
+- [ ] Cloned project opens automatically
+- [ ] Project appears in recent projects
+- [ ] Error messages are helpful
+- [ ] Works with various repo sizes
+- [ ] Handles repos with submodules
+
+## Dependencies
+
+- GIT-001 (GitHub OAuth) - for repository browser with private repos
+- DASH-001 (Tabbed Navigation) - for dashboard integration
+
+## Blocked By
+
+- GIT-001 (partially - URL cloning works without OAuth)
+
+## Blocks
+
+- COMP-004 (Organization Components) - uses similar repo browsing
+
+## Estimated Effort
+
+- Clone service: 2-3 hours
+- URL-based clone modal: 3-4 hours
+- Repository browser: 4-5 hours
+- Integration & auto-open: 2-3 hours
+- Polish & error handling: 2-3 hours
+- **Total: 13-18 hours**
+
+## Success Criteria
+
+1. Users can clone by entering a URL
+2. Users can browse and select their repositories
+3. Clone progress is visible and accurate
+4. Cloned projects open automatically
+5. Private repos work with authentication
+6. Errors are handled gracefully
+7. Process can be cancelled
+
+## Future Enhancements
+
+- Clone from other providers (GitLab, Bitbucket)
+- Clone specific branch/tag
+- Clone with submodules options
+- Clone into new project template
+- Clone history (recently cloned repos)
+- Detect Noodl projects vs generic repos

dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-004-auto-init-commit-encouragement.md

@@ -0,0 +1,388 @@
+# GIT-004: Auto-Initialization & Commit Encouragement
+
+## Overview
+
+Make version control a default part of the Noodl workflow by automatically initializing git for new projects and gently encouraging regular commits. This helps users avoid losing work and prepares them for collaboration.
+
+## Context
+
+Currently:
+- New projects are not git-initialized by default
+- Users must manually open Version Control panel and initialize
+- There's no prompting to commit changes
+- Closing a project with uncommitted changes has no warning
+
+Many Noodl users are designers or low-code developers who may not be familiar with git. By making version control automatic and unobtrusive, we help them develop good habits without requiring git expertise.
+
+### Existing Infrastructure
+
+From `LocalProjectsModel.ts`:
+```typescript
+async isGitProject(project: ProjectModel): Promise<boolean> {
+  const gitPath = await getTopLevelWorkingDirectory(project._retainedProjectDirectory);
+  return gitPath !== null;
+}
+```
+
+From `git.ts`:
+```typescript
+async initNewRepo(baseDir: string, options?: { bare: boolean }): Promise<void> {
+  if (this.baseDir) return;
+  this.baseDir = await init(baseDir, options);
+  await this._setupRepository();
+}
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Auto-Initialization**
+   - New projects are git-initialized by default
+   - Initial commit with project creation
+   - Option to disable in settings
+   - Existing non-git projects can be initialized easily
+
+2. **Commit Encouragement**
+   - Periodic reminder when changes are uncommitted
+   - Reminder appears as subtle notification, not modal
+   - "Commit now" quick action
+   - "Remind me later" option
+   - Configurable reminder interval
+
+3. **Quick Commit**
+   - One-click commit from notification
+   - Simple commit message input
+   - Default message suggestion
+   - Option to open full Version Control panel
+
+4. **Close Warning**
+   - Warning when closing project with uncommitted changes
+   - Show number of uncommitted files
+   - Options: "Commit & Close", "Close Anyway", "Cancel"
+   - Can be disabled in settings
+
+5. **Settings**
+   - Enable/disable auto-initialization
+   - Enable/disable commit reminders
+   - Reminder interval (15min, 30min, 1hr, 2hr)
+   - Enable/disable close warning
+
+### Non-Functional Requirements
+
+- Reminders are non-intrusive
+- Quick commit is fast (<2 seconds)
+- Auto-init doesn't slow project creation
+- Works offline
+
+## Technical Approach
+
+### 1. Auto-Initialization in Project Creation
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/projectmodel.ts
+
+async createNewProject(name: string, template?: string): Promise<ProjectModel> {
+  const project = await this._createProject(name, template);
+  
+  // Auto-initialize git if enabled
+  if (EditorSettings.instance.get('git.autoInitialize') !== false) {
+    try {
+      const git = new Git(mergeProject);
+      await git.initNewRepo(project._retainedProjectDirectory);
+      await git.commit('Initial commit');
+    } catch (error) {
+      console.warn('Failed to auto-initialize git:', error);
+      // Don't fail project creation if git init fails
+    }
+  }
+  
+  return project;
+}
+```
+
+### 2. Commit Reminder Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/CommitReminderService.ts
+
+class CommitReminderService {
+  private static instance: CommitReminderService;
+  private reminderTimer: NodeJS.Timer | null = null;
+  private lastRemindedAt: number = 0;
+  
+  // Start monitoring for uncommitted changes
+  start(): void;
+  stop(): void;
+  
+  // Check if reminder should show
+  shouldShowReminder(): Promise<boolean>;
+  
+  // Show/dismiss reminder
+  showReminder(): void;
+  dismissReminder(snoozeMinutes?: number): void;
+  
+  // Events
+  onReminderTriggered(callback: () => void): () => void;
+}
+```
+
+### 3. Quick Commit Component
+
+```typescript
+// packages/noodl-core-ui/src/components/git/QuickCommitPopup/QuickCommitPopup.tsx
+
+interface QuickCommitPopupProps {
+  uncommittedCount: number;
+  suggestedMessage: string;
+  onCommit: (message: string) => Promise<void>;
+  onDismiss: () => void;
+  onOpenFullPanel: () => void;
+}
+```
+
+### 4. Close Warning Dialog
+
+```typescript
+// packages/noodl-core-ui/src/components/git/UnsavedChangesDialog/UnsavedChangesDialog.tsx
+
+interface UnsavedChangesDialogProps {
+  uncommittedCount: number;
+  onCommitAndClose: () => Promise<void>;
+  onCloseAnyway: () => void;
+  onCancel: () => void;
+}
+```
+
+### 5. Default Commit Messages
+
+```typescript
+// Smart default commit message generation
+function generateDefaultCommitMessage(changes: GitStatus[]): string {
+  const added = changes.filter(c => c.status === 'added');
+  const modified = changes.filter(c => c.status === 'modified');
+  const deleted = changes.filter(c => c.status === 'deleted');
+  
+  const parts: string[] = [];
+  
+  if (added.length > 0) {
+    if (added.length === 1) {
+      parts.push(`Add ${getComponentName(added[0].path)}`);
+    } else {
+      parts.push(`Add ${added.length} files`);
+    }
+  }
+  
+  if (modified.length > 0) {
+    if (modified.length === 1) {
+      parts.push(`Update ${getComponentName(modified[0].path)}`);
+    } else {
+      parts.push(`Update ${modified.length} files`);
+    }
+  }
+  
+  if (deleted.length > 0) {
+    parts.push(`Remove ${deleted.length} files`);
+  }
+  
+  return parts.join(', ') || 'Update project';
+}
+```
+
+## UI Mockups
+
+### Commit Reminder Notification
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ 💾 You have 5 uncommitted changes                           │
+│                                                             │
+│ It's been 30 minutes since your last commit.                │
+│                                                             │
+│ [Commit Now]  [Remind Me Later ▾]  [Dismiss]               │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Quick Commit Popup
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Quick Commit                                           [×]  │
+├─────────────────────────────────────────────────────────────┤
+│ 5 files changed                                             │
+│                                                             │
+│ Message:                                                    │
+│ ┌─────────────────────────────────────────────────────────┐ │
+│ │ Update LoginPage and add UserProfile component          │ │
+│ └─────────────────────────────────────────────────────────┘ │
+│                                                             │
+│ [Open Version Control]                    [Cancel] [Commit] │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Close Warning Dialog
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ ⚠️ Uncommitted Changes                                 [×]  │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│ You have 5 uncommitted changes in this project.             │
+│                                                             │
+│ These changes will be preserved locally but not versioned.  │
+│ To keep a history of your work, commit before closing.      │
+│                                                             │
+│ ☐ Don't show this again                                    │
+│                                                             │
+│       [Cancel]  [Close Anyway]  [Commit & Close]           │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/CommitReminderService.ts`
+2. `packages/noodl-core-ui/src/components/git/QuickCommitPopup/QuickCommitPopup.tsx`
+3. `packages/noodl-core-ui/src/components/git/QuickCommitPopup/QuickCommitPopup.module.scss`
+4. `packages/noodl-core-ui/src/components/git/UnsavedChangesDialog/UnsavedChangesDialog.tsx`
+5. `packages/noodl-core-ui/src/components/git/CommitReminderToast/CommitReminderToast.tsx`
+6. `packages/noodl-editor/src/editor/src/utils/git/defaultCommitMessage.ts`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/models/projectmodel.ts`
+   - Add auto-initialization in project creation
+
+2. `packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx`
+   - Add close warning handler
+   - Integrate CommitReminderService
+
+3. `packages/noodl-utils/editorsettings.ts`
+   - Add git-related settings
+
+4. `packages/noodl-editor/src/editor/src/views/panels/EditorSettingsPanel/`
+   - Add git settings section
+
+5. `packages/noodl-editor/src/main/main.js`
+   - Handle close event for warning
+
+## Settings Schema
+
+```typescript
+interface GitSettings {
+  // Auto-initialization
+  'git.autoInitialize': boolean;  // default: true
+  
+  // Commit reminders
+  'git.commitReminders.enabled': boolean;  // default: true
+  'git.commitReminders.intervalMinutes': number;  // default: 30
+  
+  // Close warning
+  'git.closeWarning.enabled': boolean;  // default: true
+  
+  // Quick commit
+  'git.quickCommit.suggestMessage': boolean;  // default: true
+}
+```
+
+## Implementation Steps
+
+### Phase 1: Auto-Initialization
+1. Add git.autoInitialize setting
+2. Modify project creation to init git
+3. Add initial commit
+4. Test with new projects
+
+### Phase 2: Settings UI
+1. Add Git section to Editor Settings panel
+2. Implement all settings toggles
+3. Store settings in EditorSettings
+
+### Phase 3: Commit Reminder Service
+1. Create CommitReminderService
+2. Add timer-based reminder check
+3. Create CommitReminderToast component
+4. Integrate with editor lifecycle
+
+### Phase 4: Quick Commit
+1. Create QuickCommitPopup component
+2. Implement default message generation
+3. Wire up commit action
+4. Add "Open full panel" option
+
+### Phase 5: Close Warning
+1. Create UnsavedChangesDialog
+2. Hook into project close event
+3. Implement "Commit & Close" flow
+4. Add "Don't show again" option
+
+### Phase 6: Polish
+1. Snooze functionality
+2. Notification stacking
+3. Animation/transitions
+4. Edge case handling
+
+## Testing Checklist
+
+- [ ] New project is git-initialized by default
+- [ ] Initial commit is created
+- [ ] Auto-init can be disabled
+- [ ] Commit reminder appears after interval
+- [ ] Reminder shows correct uncommitted count
+- [ ] "Commit Now" opens quick commit popup
+- [ ] "Remind Me Later" snoozes correctly
+- [ ] Quick commit works with default message
+- [ ] Quick commit works with custom message
+- [ ] Close warning appears with uncommitted changes
+- [ ] "Commit & Close" works
+- [ ] "Close Anyway" works
+- [ ] "Don't show again" persists
+- [ ] Settings toggle all features correctly
+- [ ] Works when offline
+
+## Edge Cases
+
+1. **Project already has git**: Don't re-initialize, just work with existing
+2. **Template with git**: Use template's git if present, else init fresh
+3. **Init fails**: Log warning, don't block project creation
+4. **Commit fails**: Show error, offer to open Version Control panel
+5. **Large commit**: Show progress, don't block UI
+6. **No changes on reminder check**: Don't show reminder
+
+## Dependencies
+
+- GIT-002 (Git Status Dashboard) - for status detection infrastructure
+
+## Blocked By
+
+- GIT-002 (shares status checking code)
+
+## Blocks
+
+- None
+
+## Estimated Effort
+
+- Auto-initialization: 2-3 hours
+- Settings UI: 2-3 hours
+- Commit reminder service: 3-4 hours
+- Quick commit popup: 2-3 hours
+- Close warning: 2-3 hours
+- Polish: 2-3 hours
+- **Total: 13-19 hours**
+
+## Success Criteria
+
+1. New projects have git by default
+2. Users are gently reminded to commit
+3. Committing is easy and fast
+4. Users are warned before losing work
+5. All features can be disabled
+6. Non-intrusive to workflow
+
+## Future Enhancements
+
+- Commit streak/gamification
+- Auto-commit on significant changes
+- Commit templates
+- Branch suggestions
+- Integration with cloud backup

dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-005-enhanced-push-pull.md

@@ -0,0 +1,388 @@
+# GIT-005: Enhanced Push/Pull UI
+
+## Overview
+
+Improve the push/pull experience with better visibility, branch management, conflict previews, and dashboard-level sync controls. Make syncing with remotes more intuitive and less error-prone.
+
+## Context
+
+The current Version Control panel has push/pull functionality via `GitStatusButton`, but:
+- Only visible when the panel is open
+- Branch switching is buried in menus
+- No preview of what will be pulled
+- Conflict resolution is complex
+
+This task brings sync operations to the forefront and adds safeguards.
+
+### Existing Infrastructure
+
+From `GitStatusButton.tsx`:
+```typescript
+// Status kinds: 'default', 'fetch', 'error-fetch', 'pull', 'push', 'push-repository', 'set-authorization'
+
+case 'push': {
+  label = localCommitCount === 1 ? `Push 1 local commit` : `Push ${localCommitCount} local commits`;
+}
+
+case 'pull': {
+  label = remoteCommitCount === 1 ? `Pull 1 remote commit` : `Pull ${remoteCommitCount} remote commits`;
+}
+```
+
+From `fetch.context.ts`:
+```typescript
+localCommitCount    // Commits ahead of remote
+remoteCommitCount   // Commits behind remote
+currentBranch       // Current branch info
+branches            // All branches
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Dashboard Sync Button**
+   - Visible sync button in project row (from GIT-002)
+   - One-click fetch & show status
+   - Quick push/pull from dashboard
+
+2. **Branch Selector**
+   - Dropdown showing current branch
+   - Quick switch between branches
+   - Create new branch option
+   - Branch search for projects with many branches
+   - Remote branch indicators
+
+3. **Pull Preview**
+   - Show what commits will be pulled
+   - List affected files
+   - Warning for potential conflicts
+   - "Preview" mode before actual pull
+
+4. **Conflict Prevention**
+   - Check for conflicts before pull
+   - Suggest stashing changes first
+   - Clear conflict resolution workflow
+   - "Abort" option during conflicts
+
+5. **Push Confirmation**
+   - Show commits being pushed
+   - Branch protection warning (if pushing to main)
+   - Force push warning (if needed)
+
+6. **Sync Status Header**
+   - Always-visible status in editor header
+   - Current branch display
+   - Quick sync actions
+   - Connection indicator
+
+### Non-Functional Requirements
+
+- Sync operations don't block UI
+- Progress visible for long operations
+- Works offline (queues operations)
+- Clear error messages
+
+## Technical Approach
+
+### 1. Sync Status Header Component
+
+```typescript
+// packages/noodl-core-ui/src/components/git/SyncStatusHeader/SyncStatusHeader.tsx
+
+interface SyncStatusHeaderProps {
+  currentBranch: string;
+  aheadCount: number;
+  behindCount: number;
+  hasUncommitted: boolean;
+  isOnline: boolean;
+  lastFetchTime: number;
+  onPush: () => void;
+  onPull: () => void;
+  onFetch: () => void;
+  onBranchChange: (branch: string) => void;
+}
+```
+
+### 2. Branch Selector Component
+
+```typescript
+// packages/noodl-core-ui/src/components/git/BranchSelector/BranchSelector.tsx
+
+interface BranchSelectorProps {
+  currentBranch: Branch;
+  branches: Branch[];
+  onSelect: (branch: Branch) => void;
+  onCreate: (name: string) => void;
+}
+
+interface Branch {
+  name: string;
+  nameWithoutRemote: string;
+  isLocal: boolean;
+  isRemote: boolean;
+  isCurrent: boolean;
+  lastCommit?: {
+    sha: string;
+    message: string;
+    date: string;
+  };
+}
+```
+
+### 3. Pull Preview Modal
+
+```typescript
+// packages/noodl-core-ui/src/components/git/PullPreviewModal/PullPreviewModal.tsx
+
+interface PullPreviewModalProps {
+  commits: Commit[];
+  affectedFiles: FileChange[];
+  hasConflicts: boolean;
+  conflictFiles?: string[];
+  onPull: () => Promise<void>;
+  onCancel: () => void;
+}
+
+interface Commit {
+  sha: string;
+  message: string;
+  author: string;
+  date: string;
+}
+
+interface FileChange {
+  path: string;
+  status: 'added' | 'modified' | 'deleted';
+  hasConflict: boolean;
+}
+```
+
+### 4. Conflict Resolution Flow
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ConflictResolutionService.ts
+
+class ConflictResolutionService {
+  // Check for potential conflicts before pull
+  async previewConflicts(): Promise<ConflictPreview>;
+  
+  // Handle stashing
+  async stashAndPull(): Promise<void>;
+  
+  // Resolution strategies
+  async resolveWithOurs(file: string): Promise<void>;
+  async resolveWithTheirs(file: string): Promise<void>;
+  async openMergeTool(file: string): Promise<void>;
+  
+  // Abort
+  async abortMerge(): Promise<void>;
+}
+```
+
+## UI Mockups
+
+### Sync Status Header (Editor)
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ [main ▾]  ↑3 ↓2  ●5 uncommitted   🟢 Connected   [Fetch] [Pull] [Push]      │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Branch Selector Dropdown
+
+```
+┌─────────────────────────────────────┐
+│ 🔍 Search branches...               │
+├─────────────────────────────────────┤
+│ LOCAL                               │
+│   ✓ main                            │
+│     feature/new-login               │
+│     bugfix/header-styling           │
+├─────────────────────────────────────┤
+│ REMOTE                              │
+│     origin/develop                  │
+│     origin/release-1.0              │
+├─────────────────────────────────────┤
+│ + Create new branch...              │
+└─────────────────────────────────────┘
+```
+
+### Pull Preview Modal
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Pull Preview                                                   [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│ Pulling 3 commits from origin/main                                  │
+│                                                                     │
+│ COMMITS                                                             │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ a1b2c3d  Fix login validation          John Doe    2 hours ago │ │
+│ │ d4e5f6g  Add password reset flow       Jane Smith  5 hours ago │ │
+│ │ h7i8j9k  Update dependencies           John Doe    1 day ago   │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ FILES CHANGED (12)                                                  │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ M  components/LoginPage.ndjson                                  │ │
+│ │ M  components/Header.ndjson                                     │ │
+│ │ A  components/PasswordReset.ndjson                              │ │
+│ │ D  components/OldLogin.ndjson                                   │ │
+│ │ ⚠️ M  project.json  (potential conflict)                        │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ⚠️ You have uncommitted changes. They will be stashed before pull. │
+│                                                                     │
+│                                              [Cancel]  [Pull Now]  │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### Conflict Warning
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ ⚠️ Potential Conflicts Detected                                [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ The following files have been modified both locally and remotely:   │
+│                                                                     │
+│   • project.json                                                    │
+│   • components/LoginPage.ndjson                                     │
+│                                                                     │
+│ Noodl will attempt to merge these changes automatically, but you    │
+│ may need to resolve conflicts manually.                             │
+│                                                                     │
+│ Recommended: Commit your local changes first for a cleaner merge.   │
+│                                                                     │
+│      [Cancel]  [Commit First]  [Pull Anyway]                       │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-core-ui/src/components/git/SyncStatusHeader/SyncStatusHeader.tsx`
+2. `packages/noodl-core-ui/src/components/git/SyncStatusHeader/SyncStatusHeader.module.scss`
+3. `packages/noodl-core-ui/src/components/git/BranchSelector/BranchSelector.tsx`
+4. `packages/noodl-core-ui/src/components/git/BranchSelector/BranchSelector.module.scss`
+5. `packages/noodl-core-ui/src/components/git/PullPreviewModal/PullPreviewModal.tsx`
+6. `packages/noodl-core-ui/src/components/git/PushConfirmModal/PushConfirmModal.tsx`
+7. `packages/noodl-core-ui/src/components/git/ConflictWarningModal/ConflictWarningModal.tsx`
+8. `packages/noodl-editor/src/editor/src/services/ConflictResolutionService.ts`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx`
+   - Add SyncStatusHeader to editor layout
+
+2. `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx`
+   - Integrate new BranchSelector
+   - Add pull preview before pulling
+
+3. `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/GitStatusButton.tsx`
+   - Update to use new pull/push flows
+
+4. `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/fetch.context.ts`
+   - Add preview fetch logic
+   - Add conflict detection
+
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ProjectListRow.tsx`
+   - Add quick sync button (if not in GIT-002)
+
+## Implementation Steps
+
+### Phase 1: Branch Selector
+1. Create BranchSelector component
+2. Implement search/filter
+3. Add create branch flow
+4. Integrate into Version Control panel
+
+### Phase 2: Sync Status Header
+1. Create SyncStatusHeader component
+2. Add to editor layout
+3. Wire up actions
+4. Add connection indicator
+
+### Phase 3: Pull Preview
+1. Create PullPreviewModal
+2. Implement commit/file listing
+3. Add conflict detection
+4. Wire up pull action
+
+### Phase 4: Conflict Handling
+1. Create ConflictWarningModal
+2. Create ConflictResolutionService
+3. Implement stash-before-pull
+4. Add abort functionality
+
+### Phase 5: Push Enhancements
+1. Create PushConfirmModal
+2. Add branch protection warning
+3. Show commit list
+4. Handle force push
+
+### Phase 6: Dashboard Integration
+1. Add sync button to project rows
+2. Quick push/pull from dashboard
+3. Update status after sync
+
+## Testing Checklist
+
+- [ ] Branch selector shows all branches
+- [ ] Branch search filters correctly
+- [ ] Switching branches works
+- [ ] Creating new branch works
+- [ ] Sync status header shows correct counts
+- [ ] Fetch updates status
+- [ ] Pull preview shows correct commits
+- [ ] Pull preview shows affected files
+- [ ] Conflict warning appears when appropriate
+- [ ] Stash-before-pull works
+- [ ] Pull completes successfully
+- [ ] Push confirmation shows commits
+- [ ] Push completes successfully
+- [ ] Dashboard sync button works
+- [ ] Offline state handled gracefully
+
+## Dependencies
+
+- GIT-002 (Git Status Dashboard) - for dashboard integration
+- GIT-001 (GitHub OAuth) - for authenticated operations
+
+## Blocked By
+
+- GIT-002
+
+## Blocks
+
+- None
+
+## Estimated Effort
+
+- Branch selector: 3-4 hours
+- Sync status header: 2-3 hours
+- Pull preview: 4-5 hours
+- Conflict handling: 4-5 hours
+- Push enhancements: 2-3 hours
+- Dashboard integration: 2-3 hours
+- **Total: 17-23 hours**
+
+## Success Criteria
+
+1. Branch switching is easy and visible
+2. Users can preview what will be pulled
+3. Conflict potential is detected before pull
+4. Stashing is automatic when needed
+5. Push shows what's being pushed
+6. Quick sync available from dashboard
+7. Status always visible in editor
+
+## Future Enhancements
+
+- Pull request creation
+- Branch comparison
+- Revert/cherry-pick commits
+- Squash commits before push
+- Auto-sync on save (optional)
+- Branch naming conventions/templates

dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-OVERVIEW.md

@@ -0,0 +1,248 @@
+# GIT Series: Git & GitHub Integration
+
+## Overview
+
+The GIT series transforms Noodl's version control experience from a manual, expert-only feature into a seamless, integrated part of the development workflow. By adding GitHub OAuth, surfacing git status in the dashboard, and encouraging good version control habits, we make collaboration accessible to all Noodl users.
+
+## Target Environment
+
+- **Editor**: React 19 version only
+- **Runtime**: Not affected (git is editor-only)
+- **Backwards Compatibility**: Existing git projects continue to work
+
+## Task Dependency Graph
+
+```
+GIT-001 (GitHub OAuth)
+    │
+    ├──────────────────────────┐
+    │                          │
+    ▼                          ▼
+GIT-002 (Dashboard Status)  GIT-003 (Repository Cloning)
+    │
+    ├──────────────────────────┐
+    │                          │
+    ▼                          ▼
+GIT-004 (Auto-Init)        GIT-005 (Enhanced Push/Pull)
+```
+
+## Task Summary
+
+| Task ID | Name | Est. Hours | Priority |
+|---------|------|------------|----------|
+| GIT-001 | GitHub OAuth Integration | 14-20 | Critical |
+| GIT-002 | Git Status Dashboard Visibility | 11-16 | High |
+| GIT-003 | Repository Cloning | 13-18 | High |
+| GIT-004 | Auto-Initialization & Commit Encouragement | 13-19 | Medium |
+| GIT-005 | Enhanced Push/Pull UI | 17-23 | Medium |
+
+**Total Estimated: 68-96 hours**
+
+## Implementation Order
+
+### Week 1-2: Authentication & Status
+1. **GIT-001** - GitHub OAuth (foundation for GitHub API access)
+2. **GIT-002** - Dashboard status (leverages DASH-002 project list)
+
+### Week 3: Cloning & Basic Flow
+3. **GIT-003** - Repository cloning (depends on OAuth for private repos)
+
+### Week 4: Polish & Encouragement
+4. **GIT-004** - Auto-initialization (depends on status detection)
+5. **GIT-005** - Enhanced push/pull (depends on status infrastructure)
+
+## Existing Infrastructure
+
+The codebase already has solid git foundations to build on:
+
+### noodl-git Package
+```
+packages/noodl-git/src/
+├── git.ts              # Main Git class
+├── core/
+│   ├── clone.ts        # Clone operations
+│   ├── push.ts         # Push operations
+│   ├── pull.ts         # Pull operations
+│   └── ...
+├── actions/            # Higher-level actions
+└── constants.ts
+```
+
+Key existing methods:
+- `git.initNewRepo()` - Initialize new repository
+- `git.clone()` - Clone with progress
+- `git.push()` - Push with progress
+- `git.pull()` - Pull with rebase
+- `git.status()` - Working directory status
+- `git.getBranches()` - List branches
+- `git.getCommitsCurrentBranch()` - Commit history
+
+### Version Control Panel
+```
+packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/
+├── VersionControlPanel.tsx
+├── components/
+│   ├── GitStatusButton.tsx     # Push/pull status
+│   ├── GitProviderPopout/      # Credentials management
+│   ├── LocalChanges.tsx        # Uncommitted files
+│   ├── History.tsx             # Commit history
+│   └── BranchMerge.tsx         # Branch operations
+└── context/
+    └── fetch.context.ts        # Git state management
+```
+
+### Credentials Storage
+- `GitStore` - Stores credentials per-project encrypted
+- `trampoline-askpass-handler` - Handles git credential prompts
+- Currently uses PAT (Personal Access Token) for GitHub
+
+## Key Technical Decisions
+
+### OAuth vs PAT
+
+**Current**: Personal Access Token per project
+- User creates PAT on GitHub
+- Copies to Noodl per project
+- Stored encrypted in GitStore
+
+**New (GIT-001)**: OAuth + PAT fallback
+- One-click GitHub OAuth
+- Token stored globally
+- PAT remains for non-GitHub remotes
+
+### Status Checking Strategy
+
+**Approach**: Batch + Cache
+- Check multiple projects in parallel
+- Cache results with TTL
+- Background refresh
+
+**Why**: Git status requires opening each repo, which is slow. Caching makes dashboard responsive while keeping data fresh.
+
+### Auto-Initialization
+
+**Approach**: Opt-out
+- Git initialized by default
+- Initial commit created automatically
+- Can disable in settings
+
+**Why**: Most users benefit from version control. Making it default reduces "I lost my work" issues.
+
+## Services to Create
+
+| Service | Location | Purpose |
+|---------|----------|---------|
+| GitHubOAuthService | noodl-editor/services | OAuth flow, token management |
+| GitHubApiClient | noodl-editor/services | GitHub REST API calls |
+| ProjectGitStatusService | noodl-editor/services | Batch status checking, caching |
+| CloneService | noodl-editor/services | Clone wrapper with progress |
+| CommitReminderService | noodl-editor/services | Periodic commit reminders |
+| ConflictResolutionService | noodl-editor/services | Conflict detection, resolution |
+
+## Components to Create
+
+| Component | Package | Purpose |
+|-----------|---------|---------|
+| GitHubConnectButton | noodl-core-ui | OAuth trigger button |
+| GitHubAccountCard | noodl-core-ui | Connected account display |
+| GitStatusBadge | noodl-core-ui | Status indicator in list |
+| CloneModal | noodl-core-ui | Clone flow modal |
+| RepoBrowser | noodl-core-ui | Repository list/search |
+| QuickCommitPopup | noodl-core-ui | Fast commit dialog |
+| SyncStatusHeader | noodl-core-ui | Editor header sync status |
+| BranchSelector | noodl-core-ui | Branch dropdown |
+| PullPreviewModal | noodl-core-ui | Preview before pull |
+
+## Dependencies
+
+### On DASH Series
+- GIT-002 → DASH-002 (project list for status display)
+- GIT-001 → DASH-001 (launcher context for account display)
+
+### External Packages
+May need:
+```json
+{
+  "@octokit/rest": "^20.0.0"  // GitHub API client (optional)
+}
+```
+
+## Security Considerations
+
+1. **OAuth Tokens**: Store with electron's safeStorage API
+2. **PKCE Flow**: Use PKCE for OAuth (no client secret in app)
+3. **Token Scope**: Request minimum necessary (repo, read:org, read:user)
+4. **Credential Cache**: Clear on logout/disconnect
+5. **PAT Fallback**: Encrypted per-project storage continues
+
+## Testing Strategy
+
+### Unit Tests
+- OAuth token exchange
+- Status calculation logic
+- Conflict detection
+- Default commit message generation
+
+### Integration Tests
+- Clone from public repo
+- Clone from private repo with auth
+- Push/pull with mock remote
+- Branch operations
+
+### Manual Testing
+- Full OAuth flow
+- Dashboard status refresh
+- Clone flow end-to-end
+- Commit reminder timing
+- Conflict resolution
+
+## Cline Usage Notes
+
+### Before Starting Each Task
+
+1. Read the task document completely
+2. Review existing git infrastructure:
+   - `packages/noodl-git/src/git.ts`
+   - `packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/`
+3. Check GitStore and credential handling
+
+### Key Gotchas
+
+1. **Git operations are async**: Always use try/catch, git can fail
+2. **Repository paths**: Use `_retainedProjectDirectory` from ProjectModel
+3. **Merge strategy**: Noodl has custom merge for project.json (`mergeProject`)
+4. **Auth caching**: Credentials cached by trampoline, may need clearing
+5. **Electron context**: Some git ops need main process (deep links)
+
+### Testing Git Operations
+
+```bash
+# In tests directory, run git tests
+npm run test:editor -- --grep="Git"
+```
+
+## Success Criteria (Series Complete)
+
+1. ✅ Users can authenticate with GitHub via OAuth
+2. ✅ Git status visible in project dashboard
+3. ✅ Users can clone repositories from UI
+4. ✅ New projects have git by default
+5. ✅ Users are reminded to commit regularly
+6. ✅ Pull/push is intuitive with previews
+7. ✅ Branch management is accessible
+
+## Future Work (Post-GIT)
+
+The GIT series enables:
+- **COMP series**: Shared component repositories
+- **DEPLOY series**: Auto-push to frontend repo on deploy
+- **Community features**: Public component sharing
+
+## Files in This Series
+
+- `GIT-001-github-oauth.md`
+- `GIT-002-dashboard-git-status.md`
+- `GIT-003-repository-cloning.md`
+- `GIT-004-auto-init-commit-encouragement.md`
+- `GIT-005-enhanced-push-pull.md`
+- `GIT-OVERVIEW.md` (this file)

dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-001-prefab-system-refactoring.md

@@ -0,0 +1,408 @@
+# COMP-001: Prefab System Refactoring
+
+## Overview
+
+Refactor the existing prefab system to support multiple sources (not just the docs endpoint). This creates the foundation for built-in prefabs, personal repositories, organization repositories, and community contributions.
+
+## Context
+
+The current prefab system is tightly coupled to the docs endpoint:
+- `ModuleLibraryModel` fetches from `${docsEndpoint}/library/prefabs/index.json`
+- Prefabs are zip files hosted on the docs site
+- No support for alternative sources
+
+This task creates an abstraction layer that allows prefabs to come from multiple sources while maintaining the existing user experience.
+
+### Current Architecture
+
+```
+User clicks "Clone" in NodePicker
+    ↓
+ModuleLibraryModel.installPrefab(url)
+    ↓
+getModuleTemplateRoot(url)  ← Downloads & extracts zip
+    ↓
+ProjectImporter.listComponentsAndDependencies()
+    ↓
+ProjectImporter.checkForCollisions()
+    ↓
+_showImportPopup() if collisions
+    ↓
+_doImport()
+```
+
+### Key Files
+
+- `packages/noodl-editor/src/editor/src/models/modulelibrarymodel.ts`
+- `packages/noodl-editor/src/editor/src/utils/projectimporter.js`
+- `packages/noodl-editor/src/editor/src/views/NodePicker/`
+
+## Requirements
+
+### Functional Requirements
+
+1. **Source Abstraction**
+   - Define `PrefabSource` interface for different sources
+   - Support multiple sources simultaneously
+   - Each source provides: list, search, fetch, metadata
+
+2. **Source Types**
+   - `DocsSource` - Existing docs endpoint (default)
+   - `BuiltInSource` - Bundled with editor (COMP-002)
+   - `GitHubSource` - GitHub repositories (COMP-003+)
+   - `LocalSource` - Local filesystem (for development)
+
+3. **Unified Prefab Model**
+   - Consistent metadata across all sources
+   - Version information
+   - Source tracking (where did this come from?)
+   - Dependencies and requirements
+
+4. **Enhanced Metadata**
+   - Author information
+   - Version number
+   - Noodl version compatibility
+   - Screenshots/previews
+   - Changelog
+   - License
+
+5. **Backwards Compatibility**
+   - Existing prefabs continue to work
+   - No changes to user workflow
+   - Migration path for enhanced metadata
+
+### Non-Functional Requirements
+
+- Source fetching is async and non-blocking
+- Caching for performance
+- Graceful degradation if source unavailable
+- Extensible for future sources
+
+## Technical Approach
+
+### 1. Prefab Source Interface
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/prefab/PrefabSource.ts
+
+interface PrefabMetadata {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  author?: {
+    name: string;
+    email?: string;
+    url?: string;
+  };
+  noodlVersion?: string;  // Minimum compatible version
+  tags: string[];
+  icon?: string;
+  screenshots?: string[];
+  docs?: string;
+  license?: string;
+  repository?: string;
+  dependencies?: string[];  // Other prefabs this depends on
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+interface PrefabSourceConfig {
+  id: string;
+  name: string;
+  priority: number;  // Higher = shown first
+  enabled: boolean;
+}
+
+interface PrefabSource {
+  readonly config: PrefabSourceConfig;
+  
+  // Lifecycle
+  initialize(): Promise<void>;
+  dispose(): void;
+  
+  // Listing
+  listPrefabs(): Promise<PrefabMetadata[]>;
+  searchPrefabs(query: string): Promise<PrefabMetadata[]>;
+  
+  // Fetching
+  getPrefabDetails(id: string): Promise<PrefabMetadata>;
+  downloadPrefab(id: string): Promise<string>;  // Returns local path to extracted content
+  
+  // State
+  isAvailable(): boolean;
+  getLastError(): Error | null;
+}
+```
+
+### 2. Source Implementations
+
+```typescript
+// DocsSource - existing functionality wrapped
+class DocsPrefabSource implements PrefabSource {
+  config = {
+    id: 'docs',
+    name: 'Community Prefabs',
+    priority: 50,
+    enabled: true
+  };
+  
+  async listPrefabs(): Promise<PrefabMetadata[]> {
+    // Existing fetch logic from ModuleLibraryModel
+    const endpoint = getDocsEndpoint();
+    const response = await fetch(`${endpoint}/library/prefabs/index.json`);
+    const items = await response.json();
+    
+    // Transform to new metadata format
+    return items.map(item => this.transformLegacyItem(item));
+  }
+  
+  private transformLegacyItem(item: IModule): PrefabMetadata {
+    return {
+      id: `docs:${item.label}`,
+      name: item.label,
+      description: item.desc,
+      version: '1.0.0',  // Legacy items don't have versions
+      tags: item.tags || [],
+      icon: item.icon,
+      docs: item.docs
+    };
+  }
+}
+
+// BuiltInSource - for COMP-002
+class BuiltInPrefabSource implements PrefabSource {
+  config = {
+    id: 'builtin',
+    name: 'Built-in Prefabs',
+    priority: 100,
+    enabled: true
+  };
+  
+  // Implementation in COMP-002
+}
+
+// GitHubSource - for COMP-003+
+class GitHubPrefabSource implements PrefabSource {
+  config = {
+    id: 'github',
+    name: 'GitHub',
+    priority: 75,
+    enabled: true
+  };
+  
+  constructor(private repoUrl: string) {}
+  
+  // Implementation in COMP-003
+}
+```
+
+### 3. Prefab Registry
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/prefab/PrefabRegistry.ts
+
+class PrefabRegistry {
+  private static instance: PrefabRegistry;
+  private sources: Map<string, PrefabSource> = new Map();
+  private cache: Map<string, PrefabMetadata[]> = new Map();
+  
+  // Source management
+  registerSource(source: PrefabSource): void;
+  unregisterSource(sourceId: string): void;
+  getSource(sourceId: string): PrefabSource | undefined;
+  getSources(): PrefabSource[];
+  
+  // Aggregated operations
+  async getAllPrefabs(): Promise<PrefabMetadata[]>;
+  async searchAllPrefabs(query: string): Promise<PrefabMetadata[]>;
+  
+  // Installation
+  async installPrefab(prefabId: string, options?: InstallOptions): Promise<void>;
+  
+  // Cache
+  invalidateCache(sourceId?: string): void;
+  
+  // Events
+  onSourcesChanged(callback: () => void): () => void;
+  onPrefabsUpdated(callback: () => void): () => void;
+}
+```
+
+### 4. Updated ModuleLibraryModel
+
+```typescript
+// Refactored to use PrefabRegistry
+
+export class ModuleLibraryModel extends Model {
+  private registry: PrefabRegistry;
+  
+  constructor() {
+    super();
+    
+    this.registry = PrefabRegistry.instance;
+    
+    // Register default sources
+    this.registry.registerSource(new DocsPrefabSource());
+    this.registry.registerSource(new BuiltInPrefabSource());
+    
+    // Listen for updates
+    this.registry.onPrefabsUpdated(() => {
+      this.notifyListeners('libraryUpdated');
+    });
+  }
+  
+  // Backwards compatible API
+  get prefabs(): IModule[] {
+    return this.registry.getAllPrefabsSync()
+      .map(p => this.transformToLegacy(p));
+  }
+  
+  async installPrefab(url: string, ...): Promise<void> {
+    // Detect source from URL or use legacy path
+    const prefabId = this.detectPrefabId(url);
+    await this.registry.installPrefab(prefabId);
+  }
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/models/prefab/PrefabSource.ts` - Interface definitions
+2. `packages/noodl-editor/src/editor/src/models/prefab/PrefabRegistry.ts` - Central registry
+3. `packages/noodl-editor/src/editor/src/models/prefab/sources/DocsPrefabSource.ts` - Docs implementation
+4. `packages/noodl-editor/src/editor/src/models/prefab/sources/BuiltInPrefabSource.ts` - Stub for COMP-002
+5. `packages/noodl-editor/src/editor/src/models/prefab/sources/GitHubPrefabSource.ts` - Stub for COMP-003+
+6. `packages/noodl-editor/src/editor/src/models/prefab/sources/LocalPrefabSource.ts` - For development
+7. `packages/noodl-editor/src/editor/src/models/prefab/index.ts` - Barrel exports
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/models/modulelibrarymodel.ts`
+   - Refactor to use PrefabRegistry
+   - Maintain backwards compatible API
+   - Delegate to sources
+
+2. `packages/noodl-editor/src/editor/src/views/NodePicker/tabs/NodePickerSearchView/NodePickerSearchView.tsx`
+   - Update to work with new metadata format
+   - Add source indicators
+
+3. `packages/noodl-editor/src/editor/src/views/NodePicker/components/ModuleCard/ModuleCard.tsx`
+   - Add source badge
+   - Add version display
+   - Handle enhanced metadata
+
+## Implementation Steps
+
+### Phase 1: Interfaces & Registry
+1. Define PrefabSource interface
+2. Define PrefabMetadata interface
+3. Create PrefabRegistry class
+4. Add source registration
+
+### Phase 2: Docs Source Migration
+1. Create DocsPrefabSource
+2. Migrate existing fetch logic
+3. Add metadata transformation
+4. Test backwards compatibility
+
+### Phase 3: ModuleLibraryModel Refactor
+1. Integrate PrefabRegistry
+2. Maintain backwards compatible API
+3. Update install methods
+4. Add source detection
+
+### Phase 4: UI Updates
+1. Add source indicators to cards
+2. Show version information
+3. Handle multiple sources in search
+
+### Phase 5: Stub Sources
+1. Create BuiltInPrefabSource stub
+2. Create GitHubPrefabSource stub
+3. Create LocalPrefabSource for development
+
+## Metadata Schema
+
+```json
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["id", "name", "version"],
+  "properties": {
+    "id": { "type": "string" },
+    "name": { "type": "string" },
+    "description": { "type": "string" },
+    "version": { "type": "string", "pattern": "^\\d+\\.\\d+\\.\\d+$" },
+    "author": {
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" },
+        "email": { "type": "string" },
+        "url": { "type": "string" }
+      }
+    },
+    "noodlVersion": { "type": "string" },
+    "tags": { "type": "array", "items": { "type": "string" } },
+    "icon": { "type": "string" },
+    "screenshots": { "type": "array", "items": { "type": "string" } },
+    "docs": { "type": "string" },
+    "license": { "type": "string" },
+    "repository": { "type": "string" },
+    "dependencies": { "type": "array", "items": { "type": "string" } }
+  }
+}
+```
+
+## Testing Checklist
+
+- [ ] PrefabRegistry initializes correctly
+- [ ] DocsPrefabSource fetches from docs endpoint
+- [ ] Legacy prefabs continue to work
+- [ ] Metadata transformation preserves data
+- [ ] Multiple sources aggregate correctly
+- [ ] Search works across sources
+- [ ] Install works from any source
+- [ ] Source indicators display correctly
+- [ ] Cache invalidation works
+- [ ] Error handling for unavailable sources
+
+## Dependencies
+
+- None (foundation task)
+
+## Blocked By
+
+- None
+
+## Blocks
+
+- COMP-002 (Built-in Prefabs)
+- COMP-003 (Component Export)
+- COMP-004 (Organization Components)
+
+## Estimated Effort
+
+- Interfaces & types: 2-3 hours
+- PrefabRegistry: 3-4 hours
+- DocsPrefabSource: 2-3 hours
+- ModuleLibraryModel refactor: 3-4 hours
+- UI updates: 2-3 hours
+- Testing: 2-3 hours
+- **Total: 14-20 hours**
+
+## Success Criteria
+
+1. New source abstraction in place
+2. Existing prefabs continue to work identically
+3. Multiple sources can be registered
+4. UI shows source indicators
+5. Foundation ready for built-in and GitHub sources
+
+## Future Considerations
+
+- Source priority/ordering configuration
+- Source enable/disable in settings
+- Custom source plugins
+- Prefab ratings/popularity
+- Usage analytics per source

dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-002-builtin-prefabs.md

@@ -0,0 +1,394 @@
+# COMP-002: Built-in Prefabs
+
+## Overview
+
+Bundle essential prefabs directly with the OpenNoodl editor, so they're available immediately without network access. This improves the onboarding experience and ensures core functionality is always available.
+
+## Context
+
+Currently, all prefabs are fetched from the docs endpoint at runtime:
+- Requires network connectivity
+- Adds latency on first load
+- No prefabs available offline
+- New users see empty prefab library initially
+
+By bundling prefabs with the editor:
+- Instant availability
+- Works offline
+- Consistent experience for all users
+- Core prefabs versioned with editor releases
+
+### Existing Export/Import
+
+From `exportProjectComponents.ts` and `projectimporter.js`:
+- Components exported as zip files
+- Import handles collision detection
+- Styles, variants, resources included
+- Dependency tracking exists
+
+## Requirements
+
+### Functional Requirements
+
+1. **Built-in Prefab Bundle**
+   - Essential prefabs bundled in editor distribution
+   - Loaded from local filesystem, not network
+   - Versioned with editor releases
+
+2. **Prefab Selection**
+   - Form components (Input, Button, Checkbox, etc.)
+   - Layout helpers (Card, Modal, Drawer)
+   - Data utilities (REST caller, LocalStorage, etc.)
+   - Authentication flows (basic patterns)
+   - Navigation patterns
+
+3. **UI Distinction**
+   - "Built-in" badge on bundled prefabs
+   - Shown first in prefab list
+   - Separate section or filter option
+
+4. **Update Mechanism**
+   - Built-in prefabs update with editor
+   - No manual update needed
+   - Changelog visible for what's new
+
+5. **Offline First**
+   - Available immediately on fresh install
+   - No network request needed
+   - Graceful handling when docs unavailable
+
+### Non-Functional Requirements
+
+- Bundle size impact < 5MB
+- Load time < 500ms
+- No runtime network dependency
+- Works in air-gapped environments
+
+## Technical Approach
+
+### 1. Bundle Structure
+
+```
+packages/noodl-editor/
+├── static/
+│   └── builtin-prefabs/
+│       ├── index.json           # Manifest of built-in prefabs
+│       └── prefabs/
+│           ├── form-input/
+│           │   ├── prefab.json  # Metadata
+│           │   └── components/  # Component files
+│           ├── form-button/
+│           ├── card-layout/
+│           ├── modal-dialog/
+│           ├── rest-client/
+│           └── ...
+```
+
+### 2. Manifest Format
+
+```json
+{
+  "version": "1.0.0",
+  "noodlVersion": "2.10.0",
+  "prefabs": [
+    {
+      "id": "builtin:form-input",
+      "name": "Form Input",
+      "description": "Styled text input with label, validation, and error states",
+      "version": "1.0.0",
+      "category": "Forms",
+      "tags": ["form", "input", "text", "validation"],
+      "icon": "input-icon.svg",
+      "path": "prefabs/form-input"
+    }
+  ]
+}
+```
+
+### 3. BuiltInPrefabSource Implementation
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/prefab/sources/BuiltInPrefabSource.ts
+
+import { platform } from '@noodl/platform';
+
+class BuiltInPrefabSource implements PrefabSource {
+  config = {
+    id: 'builtin',
+    name: 'Built-in',
+    priority: 100,  // Highest priority - show first
+    enabled: true
+  };
+  
+  private manifest: BuiltInManifest | null = null;
+  private basePath: string;
+  
+  async initialize(): Promise<void> {
+    // Get path to bundled prefabs
+    this.basePath = platform.getBuiltInPrefabsPath();
+    
+    // Load manifest
+    const manifestPath = path.join(this.basePath, 'index.json');
+    const content = await fs.readFile(manifestPath, 'utf-8');
+    this.manifest = JSON.parse(content);
+  }
+  
+  async listPrefabs(): Promise<PrefabMetadata[]> {
+    if (!this.manifest) await this.initialize();
+    
+    return this.manifest.prefabs.map(p => ({
+      id: p.id,
+      name: p.name,
+      description: p.description,
+      version: p.version,
+      tags: p.tags,
+      icon: this.resolveIcon(p.icon),
+      source: 'builtin',
+      category: p.category
+    }));
+  }
+  
+  async downloadPrefab(id: string): Promise<string> {
+    // No download needed - return local path
+    const prefab = this.manifest.prefabs.find(p => p.id === id);
+    return path.join(this.basePath, prefab.path);
+  }
+  
+  private resolveIcon(iconPath: string): string {
+    return `file://${path.join(this.basePath, 'icons', iconPath)}`;
+  }
+}
+```
+
+### 4. Build-time Prefab Bundling
+
+```typescript
+// scripts/bundle-prefabs.ts
+
+/**
+ * Run during build to prepare built-in prefabs
+ * 1. Reads prefab source projects
+ * 2. Exports components
+ * 3. Generates manifest
+ * 4. Copies to static directory
+ */
+
+async function bundlePrefabs() {
+  const prefabSources = await glob('prefab-sources/*');
+  const manifest: BuiltInManifest = {
+    version: packageJson.version,
+    noodlVersion: packageJson.version,
+    prefabs: []
+  };
+  
+  for (const source of prefabSources) {
+    const metadata = await readPrefabMetadata(source);
+    const outputPath = path.join(OUTPUT_DIR, metadata.id);
+    
+    await exportPrefabComponents(source, outputPath);
+    
+    manifest.prefabs.push({
+      id: `builtin:${metadata.id}`,
+      name: metadata.name,
+      description: metadata.description,
+      version: metadata.version,
+      category: metadata.category,
+      tags: metadata.tags,
+      icon: metadata.icon,
+      path: metadata.id
+    });
+  }
+  
+  await writeManifest(manifest);
+}
+```
+
+### 5. Prefab Categories
+
+```typescript
+enum PrefabCategory {
+  Forms = 'Forms',
+  Layout = 'Layout',
+  Navigation = 'Navigation',
+  Data = 'Data',
+  Authentication = 'Authentication',
+  Feedback = 'Feedback',
+  Media = 'Media'
+}
+
+const BUILT_IN_PREFABS: BuiltInPrefabConfig[] = [
+  // Forms
+  { id: 'form-input', category: PrefabCategory.Forms },
+  { id: 'form-textarea', category: PrefabCategory.Forms },
+  { id: 'form-checkbox', category: PrefabCategory.Forms },
+  { id: 'form-radio', category: PrefabCategory.Forms },
+  { id: 'form-select', category: PrefabCategory.Forms },
+  { id: 'form-button', category: PrefabCategory.Forms },
+  
+  // Layout
+  { id: 'card', category: PrefabCategory.Layout },
+  { id: 'modal', category: PrefabCategory.Layout },
+  { id: 'drawer', category: PrefabCategory.Layout },
+  { id: 'accordion', category: PrefabCategory.Layout },
+  { id: 'tabs', category: PrefabCategory.Layout },
+  
+  // Navigation
+  { id: 'navbar', category: PrefabCategory.Navigation },
+  { id: 'sidebar', category: PrefabCategory.Navigation },
+  { id: 'breadcrumb', category: PrefabCategory.Navigation },
+  { id: 'pagination', category: PrefabCategory.Navigation },
+  
+  // Data
+  { id: 'rest-client', category: PrefabCategory.Data },
+  { id: 'local-storage', category: PrefabCategory.Data },
+  { id: 'data-table', category: PrefabCategory.Data },
+  
+  // Feedback
+  { id: 'toast', category: PrefabCategory.Feedback },
+  { id: 'loading-spinner', category: PrefabCategory.Feedback },
+  { id: 'progress-bar', category: PrefabCategory.Feedback },
+];
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/static/builtin-prefabs/index.json` - Manifest
+2. `packages/noodl-editor/static/builtin-prefabs/prefabs/` - Prefab directories
+3. `packages/noodl-editor/src/editor/src/models/prefab/sources/BuiltInPrefabSource.ts` - Source implementation
+4. `scripts/bundle-prefabs.ts` - Build script
+5. `prefab-sources/` - Source projects for built-in prefabs
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/models/prefab/PrefabRegistry.ts`
+   - Register BuiltInPrefabSource
+   - Add category support
+
+2. `packages/noodl-editor/src/editor/src/views/NodePicker/tabs/NodePickerSearchView/NodePickerSearchView.tsx`
+   - Add category filtering
+   - Show "Built-in" badge
+
+3. `packages/noodl-editor/src/editor/src/views/NodePicker/components/ModuleCard/ModuleCard.tsx`
+   - Add "Built-in" badge styling
+   - Show category
+
+4. `package.json`
+   - Add bundle-prefabs script
+
+5. `webpack.config.js` or equivalent
+   - Include static/builtin-prefabs in build
+
+## Implementation Steps
+
+### Phase 1: Infrastructure
+1. Create bundle directory structure
+2. Implement BuiltInPrefabSource
+3. Create manifest format
+4. Register source in PrefabRegistry
+
+### Phase 2: Build Pipeline
+1. Create bundle-prefabs script
+2. Add to build process
+3. Test bundling works
+
+### Phase 3: Initial Prefabs
+1. Create Form Input prefab
+2. Create Form Button prefab
+3. Create Card layout prefab
+4. Test import/collision handling
+
+### Phase 4: UI Updates
+1. Add "Built-in" badge
+2. Add category filter
+3. Show built-in prefabs first
+
+### Phase 5: Full Prefab Set
+1. Create remaining form prefabs
+2. Create layout prefabs
+3. Create data prefabs
+4. Create navigation prefabs
+
+### Phase 6: Documentation
+1. Document built-in prefabs
+2. Add usage examples
+3. Create component docs
+
+## Initial Built-in Prefabs
+
+### Priority 1 (MVP)
+| Prefab | Category | Components |
+|--------|----------|------------|
+| Form Input | Forms | TextInput, Label, ErrorMessage |
+| Form Button | Forms | Button, LoadingState |
+| Card | Layout | Card, CardHeader, CardBody |
+| Modal | Layout | Modal, ModalTrigger, ModalContent |
+| REST Client | Data | RESTRequest, ResponseHandler |
+
+### Priority 2
+| Prefab | Category | Components |
+|--------|----------|------------|
+| Form Textarea | Forms | Textarea, CharCount |
+| Form Checkbox | Forms | Checkbox, CheckboxGroup |
+| Form Select | Forms | Select, Option |
+| Drawer | Layout | Drawer, DrawerTrigger |
+| Toast | Feedback | Toast, ToastContainer |
+
+### Priority 3
+| Prefab | Category | Components |
+|--------|----------|------------|
+| Tabs | Layout | TabBar, TabPanel |
+| Accordion | Layout | Accordion, AccordionItem |
+| Navbar | Navigation | Navbar, NavItem |
+| Data Table | Data | Table, Column, Row, Cell |
+
+## Testing Checklist
+
+- [ ] Built-in prefabs load without network
+- [ ] Prefabs appear first in list
+- [ ] "Built-in" badge displays correctly
+- [ ] Category filter works
+- [ ] Import works for each prefab
+- [ ] Collision detection works
+- [ ] Styles import correctly
+- [ ] Works in air-gapped environment
+- [ ] Bundle size is acceptable
+- [ ] Load time is acceptable
+
+## Dependencies
+
+- COMP-001 (Prefab System Refactoring)
+
+## Blocked By
+
+- COMP-001
+
+## Blocks
+
+- None (can proceed in parallel with COMP-003+)
+
+## Estimated Effort
+
+- Infrastructure: 3-4 hours
+- Build pipeline: 2-3 hours
+- BuiltInPrefabSource: 2-3 hours
+- MVP prefabs (5): 8-10 hours
+- UI updates: 2-3 hours
+- Testing: 2-3 hours
+- **Total: 19-26 hours**
+
+## Success Criteria
+
+1. Built-in prefabs available immediately
+2. Work offline without network
+3. Clear "Built-in" distinction in UI
+4. Categories organize prefabs logically
+5. Import flow works smoothly
+6. Bundle size < 5MB
+
+## Future Enhancements
+
+- User can hide built-in prefabs
+- Community voting for built-in inclusion
+- Per-category enable/disable
+- Built-in prefab updates notification
+- Prefab source code viewing

dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-003-component-export.md

@@ -0,0 +1,380 @@
+# COMP-003: Component Export to Repository
+
+## Overview
+
+Enable users to export components from their project to a GitHub repository, creating a personal component library. This allows sharing components across projects and with team members.
+
+## Context
+
+Currently, component sharing is manual:
+1. Export components as zip (Cmd+Shift+E)
+2. Manually upload to GitHub or share file
+3. Others download and import
+
+This task streamlines the process:
+1. Right-click component → "Export to Repository"
+2. Select target repository
+3. Component is committed with metadata
+4. Available in NodePicker for other projects
+
+### Existing Export Flow
+
+From `exportProjectComponents.ts`:
+```typescript
+export function exportProjectComponents() {
+  ProjectImporter.instance.listComponentsAndDependencies(
+    ProjectModel.instance._retainedProjectDirectory,
+    (components) => {
+      // Shows export popup
+      // User selects components
+      // Creates zip file
+    }
+  );
+}
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Export Entry Points**
+   - Right-click component → "Export to Repository"
+   - Component sheet context menu → "Export Sheet to Repository"
+   - File menu → "Export Components to Repository"
+
+2. **Repository Selection**
+   - List user's GitHub repositories
+   - "Create new repository" option
+   - Remember last used repository
+   - Suggest `noodl-components` naming convention
+
+3. **Component Selection**
+   - Select individual components
+   - Select entire sheets
+   - Auto-select dependencies
+   - Preview what will be exported
+
+4. **Metadata Entry**
+   - Component name (prefilled)
+   - Description
+   - Tags
+   - Version (auto-increment option)
+   - Category selection
+
+5. **Export Process**
+   - Create component directory structure
+   - Generate prefab.json manifest
+   - Commit to repository
+   - Optional: Push immediately or stage
+
+6. **Repository Structure**
+   - Standard directory layout
+   - index.json manifest for discovery
+   - README generation
+   - License file option
+
+### Non-Functional Requirements
+
+- Export completes in < 30 seconds
+- Works with existing repositories
+- Handles large components (100+ nodes)
+- Conflict detection with existing exports
+
+## Technical Approach
+
+### 1. Repository Structure Convention
+
+```
+my-noodl-components/
+├── index.json                    # Repository manifest
+├── README.md                     # Auto-generated docs
+├── LICENSE                       # Optional license
+└── components/
+    ├── my-button/
+    │   ├── prefab.json          # Component metadata
+    │   ├── component.ndjson     # Noodl component data
+    │   ├── dependencies/        # Style/variant dependencies
+    │   └── assets/              # Images, fonts
+    ├── my-card/
+    │   └── ...
+    └── my-form/
+        └── ...
+```
+
+### 2. Repository Manifest (index.json)
+
+```json
+{
+  "$schema": "https://opennoodl.net/schemas/component-repo-v1.json",
+  "name": "My Noodl Components",
+  "description": "Personal component library",
+  "author": {
+    "name": "John Doe",
+    "github": "johndoe"
+  },
+  "version": "1.0.0",
+  "noodlVersion": ">=2.10.0",
+  "components": [
+    {
+      "id": "my-button",
+      "name": "My Button",
+      "description": "Custom styled button",
+      "version": "1.2.0",
+      "path": "components/my-button",
+      "tags": ["form", "button"],
+      "category": "Forms"
+    }
+  ],
+  "updatedAt": "2024-01-15T10:30:00Z"
+}
+```
+
+### 3. Component Export Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ComponentExportService.ts
+
+interface ExportOptions {
+  components: ComponentModel[];
+  repository: GitHubRepo;
+  metadata: {
+    description: string;
+    tags: string[];
+    category: string;
+    version?: string;
+  };
+  commitMessage?: string;
+  pushImmediately?: boolean;
+}
+
+interface ExportResult {
+  success: boolean;
+  exportedComponents: string[];
+  commitSha?: string;
+  error?: string;
+}
+
+class ComponentExportService {
+  private static instance: ComponentExportService;
+  
+  // Export flow
+  async exportToRepository(options: ExportOptions): Promise<ExportResult>;
+  
+  // Repository management
+  async listUserRepositories(): Promise<GitHubRepo[]>;
+  async createComponentRepository(name: string): Promise<GitHubRepo>;
+  async validateRepository(repo: GitHubRepo): Promise<boolean>;
+  
+  // Component preparation
+  async prepareExport(components: ComponentModel[]): Promise<ExportPackage>;
+  async resolveExportDependencies(components: ComponentModel[]): Promise<ComponentModel[]>;
+  
+  // File generation
+  generatePrefabManifest(component: ComponentModel, metadata: ExportMetadata): PrefabManifest;
+  generateRepoManifest(repo: GitHubRepo, components: PrefabManifest[]): RepoManifest;
+  generateReadme(repo: GitHubRepo, components: PrefabManifest[]): string;
+}
+```
+
+### 4. Export Modal Flow
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Export to Repository                                          [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ COMPONENTS TO EXPORT                                                │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ ☑ MyButton                                     + 2 dependencies │ │
+│ │   └─ ☑ ButtonStyles (variant)                                   │ │
+│ │   └─ ☑ PrimaryColor (color style)                               │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ TARGET REPOSITORY                                                   │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ johndoe/noodl-components                                    [▾] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│ [+ Create new repository]                                          │
+│                                                                     │
+│ METADATA                                                            │
+│ Name:        [My Button                                          ] │
+│ Description: [Custom styled button with loading state            ] │
+│ Tags:        [form] [button] [+]                                   │
+│ Category:    [Forms ▾]                                             │
+│ Version:     [1.0.0    ] ☑ Auto-increment                         │
+│                                                                     │
+│ COMMIT                                                              │
+│ Message:     [Add MyButton component                             ] │
+│              ☑ Push to GitHub immediately                          │
+│                                                                     │
+│                                              [Cancel]  [Export]    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Export Process Flow
+
+```typescript
+async exportToRepository(options: ExportOptions): Promise<ExportResult> {
+  const { components, repository, metadata } = options;
+  
+  // 1. Clone or open repository locally
+  const localRepo = await this.getLocalRepository(repository);
+  
+  // 2. Resolve all dependencies
+  const allComponents = await this.resolveExportDependencies(components);
+  
+  // 3. Generate component files
+  for (const component of allComponents) {
+    const componentDir = path.join(localRepo.path, 'components', component.id);
+    
+    // Export component data
+    await this.exportComponentData(component, componentDir);
+    
+    // Generate prefab manifest
+    const manifest = this.generatePrefabManifest(component, metadata);
+    await fs.writeJson(path.join(componentDir, 'prefab.json'), manifest);
+  }
+  
+  // 4. Update repository manifest
+  const repoManifest = await this.updateRepoManifest(localRepo, allComponents);
+  
+  // 5. Update README
+  await this.updateReadme(localRepo, repoManifest);
+  
+  // 6. Commit changes
+  const git = new Git(mergeProject);
+  await git.openRepository(localRepo.path);
+  await git.commit(options.commitMessage || `Add ${components[0].name}`);
+  
+  // 7. Push if requested
+  if (options.pushImmediately) {
+    await git.push({});
+  }
+  
+  return {
+    success: true,
+    exportedComponents: allComponents.map(c => c.name),
+    commitSha: await git.getHeadCommitId()
+  };
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/ComponentExportService.ts`
+2. `packages/noodl-core-ui/src/components/modals/ExportToRepoModal/ExportToRepoModal.tsx`
+3. `packages/noodl-core-ui/src/components/modals/ExportToRepoModal/ComponentSelector.tsx`
+4. `packages/noodl-core-ui/src/components/modals/ExportToRepoModal/RepoSelector.tsx`
+5. `packages/noodl-core-ui/src/components/modals/ExportToRepoModal/MetadataForm.tsx`
+6. `packages/noodl-core-ui/src/components/modals/CreateRepoModal/CreateRepoModal.tsx`
+7. `packages/noodl-editor/src/editor/src/utils/componentExporter.ts` - Low-level export utilities
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/views/nodegrapheditor.js`
+   - Add right-click context menu option
+
+2. `packages/noodl-editor/src/editor/src/views/panels/componentspanel.tsx`
+   - Add export option to component context menu
+
+3. `packages/noodl-editor/src/editor/src/utils/exportProjectComponents.ts`
+   - Refactor to share code with repository export
+
+4. `packages/noodl-editor/src/editor/src/models/prefab/sources/GitHubPrefabSource.ts`
+   - Implement full source for reading from component repos
+
+## Implementation Steps
+
+### Phase 1: Export Service Foundation
+1. Create ComponentExportService
+2. Implement dependency resolution
+3. Create file generation utilities
+4. Define repository structure
+
+### Phase 2: Repository Management
+1. List user repositories (via GitHub API)
+2. Create new repository flow
+3. Local repository management
+4. Clone/pull existing repos
+
+### Phase 3: Export Modal
+1. Create ExportToRepoModal
+2. Create ComponentSelector
+3. Create RepoSelector
+4. Create MetadataForm
+
+### Phase 4: Git Integration
+1. Stage exported files
+2. Commit with message
+3. Push to remote
+4. Handle conflicts
+
+### Phase 5: Context Menu Integration
+1. Add to component right-click menu
+2. Add to sheet context menu
+3. Add to File menu
+
+### Phase 6: Testing & Polish
+1. Test with various component types
+2. Test dependency resolution
+3. Error handling
+4. Progress indication
+
+## Testing Checklist
+
+- [ ] Export single component works
+- [ ] Export multiple components works
+- [ ] Dependencies auto-selected
+- [ ] Repository selection lists repos
+- [ ] Create new repository works
+- [ ] Metadata saved correctly
+- [ ] Files committed to repo
+- [ ] Push to GitHub works
+- [ ] Repository manifest updated
+- [ ] README generated/updated
+- [ ] Handles existing components (update)
+- [ ] Version auto-increment works
+- [ ] Error messages helpful
+
+## Dependencies
+
+- COMP-001 (Prefab System Refactoring)
+- GIT-001 (GitHub OAuth) - for repository access
+
+## Blocked By
+
+- COMP-001
+- GIT-001
+
+## Blocks
+
+- COMP-004 (Organization Components)
+- COMP-005 (Component Import with Version Control)
+
+## Estimated Effort
+
+- Export service: 4-5 hours
+- Repository management: 3-4 hours
+- Export modal: 4-5 hours
+- Git integration: 3-4 hours
+- Context menu: 2-3 hours
+- Testing & polish: 3-4 hours
+- **Total: 19-25 hours**
+
+## Success Criteria
+
+1. Components can be exported via right-click
+2. Dependencies are automatically included
+3. Repository structure is consistent
+4. Manifests are generated correctly
+5. Git operations work smoothly
+6. Components are importable via COMP-004+
+
+## Future Enhancements
+
+- Export to npm package
+- Export to Noodl marketplace
+- Batch export multiple components
+- Export templates/starters
+- Preview component before export
+- Export history/versioning

dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-004-organization-components.md

@@ -0,0 +1,396 @@
+# COMP-004: Organization Components Repository
+
+## Overview
+
+Enable teams to share a central component repository at the organization level. When a user belongs to a GitHub organization, they can access shared components from that org's component repository, creating a design system that's consistent across all team projects.
+
+## Context
+
+Individual developers can export components to personal repos (COMP-003), but teams need:
+- Shared component library accessible to all org members
+- Consistent design system across projects
+- Centralized component governance
+- Version control for team components
+
+This task adds organization-level component repositories to the prefab source system.
+
+### Organization Flow
+
+```
+User authenticates with GitHub (GIT-001)
+    ↓
+System detects user's organizations
+    ↓
+For each org, check for `noodl-components` repo
+    ↓
+Register as prefab source if found
+    ↓
+Components appear in NodePicker
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Organization Detection**
+   - Detect user's GitHub organizations
+   - Check for component repository in each org
+   - Support custom repo names (configurable)
+   - Handle multiple organizations
+
+2. **Repository Discovery**
+   - Auto-detect `{org}/noodl-components` repos
+   - Validate repository structure
+   - Read repository manifest
+   - Cache organization components
+
+3. **Component Access**
+   - List org components in NodePicker
+   - Show org badge on components
+   - Filter by organization
+   - Search across all org repos
+
+4. **Permission Handling**
+   - Respect GitHub permissions
+   - Handle private repositories
+   - Clear error messages for access issues
+   - Re-auth prompt when needed
+
+5. **Organization Settings**
+   - Enable/disable specific org repos
+   - Priority ordering between orgs
+   - Refresh/sync controls
+   - View org repo on GitHub
+
+### Non-Functional Requirements
+
+- Org components load within 3 seconds
+- Cached for offline use after first load
+- Handles orgs with 100+ components
+- Works with GitHub Enterprise (future)
+
+## Technical Approach
+
+### 1. Organization Prefab Source
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/prefab/sources/OrganizationPrefabSource.ts
+
+interface OrganizationConfig {
+  orgName: string;
+  repoName: string;
+  enabled: boolean;
+  priority: number;
+}
+
+class OrganizationPrefabSource implements PrefabSource {
+  config: PrefabSourceConfig;
+  
+  constructor(private orgConfig: OrganizationConfig) {
+    this.config = {
+      id: `org:${orgConfig.orgName}`,
+      name: orgConfig.orgName,
+      priority: orgConfig.priority,
+      enabled: orgConfig.enabled
+    };
+  }
+  
+  async initialize(): Promise<void> {
+    // Verify repo access
+    const hasAccess = await this.verifyRepoAccess();
+    if (!hasAccess) {
+      throw new PrefabSourceError('No access to organization repository');
+    }
+    
+    // Load manifest
+    await this.loadManifest();
+  }
+  
+  async listPrefabs(): Promise<PrefabMetadata[]> {
+    const manifest = await this.getManifest();
+    return manifest.components.map(c => ({
+      ...c,
+      id: `org:${this.orgConfig.orgName}:${c.id}`,
+      source: 'organization',
+      organization: this.orgConfig.orgName
+    }));
+  }
+  
+  async downloadPrefab(id: string): Promise<string> {
+    // Clone specific component from repo
+    const componentPath = this.getComponentPath(id);
+    return await this.downloadFromGitHub(componentPath);
+  }
+}
+```
+
+### 2. Organization Discovery Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/OrganizationService.ts
+
+interface Organization {
+  name: string;
+  displayName: string;
+  avatarUrl: string;
+  hasComponentRepo: boolean;
+  componentRepoUrl?: string;
+  memberCount?: number;
+}
+
+class OrganizationService {
+  private static instance: OrganizationService;
+  
+  // Discovery
+  async discoverOrganizations(): Promise<Organization[]>;
+  async checkForComponentRepo(orgName: string): Promise<boolean>;
+  async validateComponentRepo(orgName: string, repoName: string): Promise<boolean>;
+  
+  // Registration
+  async registerOrgSource(org: Organization): Promise<void>;
+  async unregisterOrgSource(orgName: string): Promise<void>;
+  
+  // Settings
+  getOrgSettings(orgName: string): OrganizationConfig;
+  updateOrgSettings(orgName: string, settings: Partial<OrganizationConfig>): void;
+  
+  // Refresh
+  async refreshOrgComponents(orgName: string): Promise<void>;
+  async refreshAllOrgs(): Promise<void>;
+}
+```
+
+### 3. Auto-Registration on Login
+
+```typescript
+// Integration with GitHub OAuth
+
+async function onGitHubAuthenticated(token: string): Promise<void> {
+  const orgService = OrganizationService.instance;
+  const registry = PrefabRegistry.instance;
+  
+  // Discover user's organizations
+  const orgs = await orgService.discoverOrganizations();
+  
+  for (const org of orgs) {
+    // Check for component repo
+    const hasRepo = await orgService.checkForComponentRepo(org.name);
+    
+    if (hasRepo) {
+      // Register as prefab source
+      const source = new OrganizationPrefabSource({
+        orgName: org.name,
+        repoName: 'noodl-components',
+        enabled: true,
+        priority: 80  // Below built-in, above docs
+      });
+      
+      registry.registerSource(source);
+    }
+  }
+}
+```
+
+### 4. Organization Settings UI
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Organization Components                                             │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Connected Organizations                                             │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ [🏢] Acme Corp                                                  │ │
+│ │     noodl-components • 24 components • Last synced: 2h ago      │ │
+│ │     [☑ Enabled] [⚙️ Settings] [🔄 Sync] [↗️ View on GitHub]      │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ [🏢] StartupXYZ                                                 │ │
+│ │     noodl-components • 8 components • Last synced: 1d ago       │ │
+│ │     [☑ Enabled] [⚙️ Settings] [🔄 Sync] [↗️ View on GitHub]      │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ [🏢] OpenSource Collective                                      │ │
+│ │     ⚠️ No component repository found                             │ │
+│ │     [Create Repository]                                          │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ [🔄 Refresh Organizations]                                          │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. NodePicker Integration
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Prefabs                                                             │
+├─────────────────────────────────────────────────────────────────────┤
+│ 🔍 Search prefabs...                                                │
+├─────────────────────────────────────────────────────────────────────┤
+│ Source: [All Sources ▾]  Category: [All ▾]                         │
+│         • All Sources                                               │
+│         • Built-in                                                  │
+│         • Acme Corp                                                 │
+│         • StartupXYZ                                                │
+│         • Community                                                 │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ ACME CORP                                                          │
+│ ┌────────────────────────────────────────────────────────────────┐ │
+│ │ 🏢 AcmeButton                              v2.1.0    [Clone]   │ │
+│ │    Standard button following Acme design system                │ │
+│ ├────────────────────────────────────────────────────────────────┤ │
+│ │ 🏢 AcmeCard                                v1.3.0    [Clone]   │ │
+│ │    Card component with Acme styling                            │ │
+│ └────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ BUILT-IN                                                           │
+│ ┌────────────────────────────────────────────────────────────────┐ │
+│ │ 📦 Form Input                              v1.0.0    [Clone]   │ │
+│ │    Standard form input with validation                         │ │
+│ └────────────────────────────────────────────────────────────────┘ │
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/models/prefab/sources/OrganizationPrefabSource.ts`
+2. `packages/noodl-editor/src/editor/src/services/OrganizationService.ts`
+3. `packages/noodl-core-ui/src/components/settings/OrganizationSettings/OrganizationSettings.tsx`
+4. `packages/noodl-core-ui/src/components/settings/OrganizationSettings/OrgCard.tsx`
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/views/OrganizationsView.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/services/GitHubOAuthService.ts`
+   - Trigger org discovery on auth
+
+2. `packages/noodl-editor/src/editor/src/models/prefab/PrefabRegistry.ts`
+   - Handle org sources dynamically
+   - Add source filtering
+
+3. `packages/noodl-editor/src/editor/src/views/NodePicker/tabs/NodePickerSearchView/NodePickerSearchView.tsx`
+   - Add source filter dropdown
+   - Show org badges
+
+4. `packages/noodl-editor/src/editor/src/views/NodePicker/components/ModuleCard/ModuleCard.tsx`
+   - Show organization name
+   - Different styling for org components
+
+5. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Add Organizations section/page
+
+## Implementation Steps
+
+### Phase 1: Organization Discovery
+1. Create OrganizationService
+2. Implement GitHub org listing
+3. Check for component repos
+4. Store org data
+
+### Phase 2: Organization Source
+1. Create OrganizationPrefabSource
+2. Implement manifest loading
+3. Implement component downloading
+4. Add to PrefabRegistry
+
+### Phase 3: Auto-Registration
+1. Hook into OAuth flow
+2. Auto-register on login
+3. Handle permission changes
+4. Persist org settings
+
+### Phase 4: Settings UI
+1. Create OrganizationSettings component
+2. Create OrgCard component
+3. Add to Settings panel
+4. Implement enable/disable
+
+### Phase 5: NodePicker Integration
+1. Add source filter
+2. Show org grouping
+3. Add org badges
+4. Update search
+
+### Phase 6: Polish
+1. Sync/refresh functionality
+2. Error handling
+3. Offline support
+4. Performance optimization
+
+## Testing Checklist
+
+- [ ] Organizations discovered on login
+- [ ] Component repos detected
+- [ ] Source registered for orgs with repos
+- [ ] Components appear in NodePicker
+- [ ] Source filter works
+- [ ] Org badge displays
+- [ ] Enable/disable works
+- [ ] Sync refreshes components
+- [ ] Private repos accessible
+- [ ] Permission errors handled
+- [ ] Works with multiple orgs
+- [ ] Caching works offline
+- [ ] Settings persist
+
+## Dependencies
+
+- COMP-001 (Prefab System Refactoring)
+- COMP-003 (Component Export) - for repository structure
+- GIT-001 (GitHub OAuth) - for organization access
+
+## Blocked By
+
+- COMP-001
+- GIT-001
+
+## Blocks
+
+- COMP-005 (depends on org repos existing)
+- COMP-006 (depends on org repos existing)
+
+## Estimated Effort
+
+- Organization discovery: 3-4 hours
+- OrganizationPrefabSource: 4-5 hours
+- Auto-registration: 2-3 hours
+- Settings UI: 3-4 hours
+- NodePicker integration: 3-4 hours
+- Polish & testing: 3-4 hours
+- **Total: 18-24 hours**
+
+## Success Criteria
+
+1. Orgs auto-detected on GitHub login
+2. Component repos discovered automatically
+3. Org components appear in NodePicker
+4. Can filter by organization
+5. Settings allow enable/disable
+6. Works with private repositories
+7. Clear error messages for access issues
+
+## Repository Setup Guide (For Users)
+
+To create an organization component repository:
+
+1. Create repo named `noodl-components` in your org
+2. Add `index.json` manifest file:
+```json
+{
+  "name": "Acme Components",
+  "version": "1.0.0",
+  "components": []
+}
+```
+3. Export components using COMP-003
+4. Noodl will auto-detect the repository
+
+## Future Enhancements
+
+- GitHub Enterprise support
+- Repository templates
+- Permission levels (read/write per component)
+- Component approval workflow
+- Usage analytics per org
+- Component deprecation notices
+- Multi-repo per org support

dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-005-component-import-version-control.md

@@ -0,0 +1,414 @@
+# COMP-005: Component Import with Version Control
+
+## Overview
+
+Track the source and version of imported components, enabling update notifications, selective updates, and clear understanding of component provenance. When a component is imported from a repository, remember where it came from and notify users when updates are available.
+
+## Context
+
+Currently, imported components lose connection to their source:
+- No tracking of where component came from
+- No awareness of available updates
+- No way to re-sync with source
+- Manual process to check for new versions
+
+This task adds version tracking and update management:
+- Track component source (built-in, org, personal, docs)
+- Store version information
+- Check for updates periodically
+- Enable selective component updates
+
+### Import Flow Today
+
+```
+User clicks "Clone" → Component imported → No source tracking
+```
+
+### Import Flow After This Task
+
+```
+User clicks "Clone" → Component imported → Source/version tracked
+    ↓
+Background: Check for updates periodically
+    ↓
+Notification: "2 components have updates available"
+    ↓
+User reviews and selects updates
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Source Tracking**
+   - Record source repository/location for each import
+   - Store version at time of import
+   - Track import timestamp
+   - Handle components without source (legacy)
+
+2. **Version Information**
+   - Display current version in component panel
+   - Show source badge (Built-in, Org name, etc.)
+   - Link to source documentation
+   - View changelog
+
+3. **Update Detection**
+   - Background check for available updates
+   - Badge/indicator for components with updates
+   - List all updatable components
+   - Compare current vs available version
+
+4. **Update Process**
+   - Preview what changes in update
+   - Selective update (choose which to update)
+   - Backup current before update
+   - Rollback option if update fails
+
+5. **Import Metadata Storage**
+   - Store in project metadata
+   - Survive project export/import
+   - Handle renamed components
+
+### Non-Functional Requirements
+
+- Update check < 5 seconds
+- No performance impact on project load
+- Works offline (shows cached status)
+- Handles 100+ tracked components
+
+## Technical Approach
+
+### 1. Import Metadata Schema
+
+```typescript
+// Stored in project.json metadata
+interface ComponentImportMetadata {
+  components: ImportedComponent[];
+  lastUpdateCheck: string;  // ISO timestamp
+}
+
+interface ImportedComponent {
+  componentId: string;       // Internal Noodl component ID
+  componentName: string;     // Display name at import time
+  source: ComponentSource;
+  importedVersion: string;
+  importedAt: string;        // ISO timestamp
+  lastUpdatedAt?: string;    // When user last updated
+  updateAvailable?: string;  // Available version if any
+  checksum?: string;         // For detecting local modifications
+}
+
+interface ComponentSource {
+  type: 'builtin' | 'organization' | 'personal' | 'docs' | 'unknown';
+  repository?: string;       // GitHub repo URL
+  organization?: string;     // Org name if type is 'organization'
+  prefabId: string;          // ID in source manifest
+}
+```
+
+### 2. Import Tracking Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ComponentTrackingService.ts
+
+class ComponentTrackingService {
+  private static instance: ComponentTrackingService;
+  
+  // On import
+  async trackImport(
+    componentId: string,
+    source: ComponentSource,
+    version: string
+  ): Promise<void>;
+  
+  // Queries
+  getImportedComponents(): ImportedComponent[];
+  getComponentSource(componentId: string): ComponentSource | null;
+  getComponentsWithUpdates(): ImportedComponent[];
+  
+  // Update checking
+  async checkForUpdates(): Promise<UpdateCheckResult>;
+  async checkComponentUpdate(componentId: string): Promise<UpdateInfo | null>;
+  
+  // Update application
+  async updateComponent(componentId: string): Promise<UpdateResult>;
+  async updateAllComponents(componentIds: string[]): Promise<UpdateResult[]>;
+  async rollbackUpdate(componentId: string): Promise<void>;
+  
+  // Metadata
+  async saveMetadata(): Promise<void>;
+  async loadMetadata(): Promise<void>;
+}
+
+interface UpdateCheckResult {
+  checked: number;
+  updatesAvailable: number;
+  components: {
+    componentId: string;
+    currentVersion: string;
+    availableVersion: string;
+    changelogUrl?: string;
+  }[];
+}
+```
+
+### 3. Update Check Process
+
+```typescript
+async checkForUpdates(): Promise<UpdateCheckResult> {
+  const imported = this.getImportedComponents();
+  const result: UpdateCheckResult = {
+    checked: 0,
+    updatesAvailable: 0,
+    components: []
+  };
+  
+  // Group by source for efficient checking
+  const bySource = groupBy(imported, c => c.source.repository);
+  
+  for (const [repo, components] of Object.entries(bySource)) {
+    const source = PrefabRegistry.instance.getSource(repo);
+    if (!source) continue;
+    
+    // Fetch latest manifest
+    const manifest = await source.getManifest();
+    
+    for (const component of components) {
+      result.checked++;
+      
+      const latest = manifest.components.find(
+        c => c.id === component.source.prefabId
+      );
+      
+      if (latest && semver.gt(latest.version, component.importedVersion)) {
+        result.updatesAvailable++;
+        result.components.push({
+          componentId: component.componentId,
+          currentVersion: component.importedVersion,
+          availableVersion: latest.version,
+          changelogUrl: latest.changelog
+        });
+        
+        // Update metadata
+        component.updateAvailable = latest.version;
+      }
+    }
+  }
+  
+  await this.saveMetadata();
+  return result;
+}
+```
+
+### 4. UI Components
+
+#### Component Panel Badge
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Components                                                          │
+├─────────────────────────────────────────────────────────────────────┤
+│ ├── Pages                                                           │
+│ │   └── HomePage                                                    │
+│ │   └── LoginPage                                                   │
+│ ├── Components                                                      │
+│ │   └── AcmeButton  [🏢 v2.1.0] [⬆️ Update]                         │
+│ │   └── AcmeCard    [🏢 v1.3.0]                                     │
+│ │   └── MyCustomButton                                              │
+│ │   └── FormInput   [📦 v1.0.0]                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Update Available Notification
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ 🔔 Component Updates Available                                      │
+│                                                                     │
+│ 2 components have updates available from your organization.         │
+│                                                                     │
+│ [View Updates]                                    [Remind Me Later] │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Update Modal
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Component Updates                                             [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Available Updates                                                   │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ ☑ AcmeButton                                                    │ │
+│ │   Current: v2.1.0 → Available: v2.2.0                           │ │
+│ │   Source: Acme Corp                                             │ │
+│ │   Changes: Added loading state, fixed hover color               │ │
+│ │   [View Full Changelog]                                          │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ ☑ AcmeCard                                                      │ │
+│ │   Current: v1.3.0 → Available: v1.4.0                           │ │
+│ │   Source: Acme Corp                                             │ │
+│ │   Changes: Added shadow variants                                │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ⚠️ Updates will replace your imported components. Local            │
+│    modifications may be lost.                                       │
+│                                                                     │
+│                                    [Cancel]  [Update Selected (2)]  │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Integration Points
+
+```typescript
+// Hook into existing import flow
+// packages/noodl-editor/src/editor/src/models/modulelibrarymodel.ts
+
+async installPrefab(prefabId: string, options?: InstallOptions): Promise<void> {
+  // ... existing import logic ...
+  
+  // After successful import, track it
+  const source = this.detectSource(prefabId);
+  const version = await this.getPrefabVersion(prefabId);
+  
+  for (const componentId of importedComponentIds) {
+    await ComponentTrackingService.instance.trackImport(
+      componentId,
+      source,
+      version
+    );
+  }
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/ComponentTrackingService.ts`
+2. `packages/noodl-core-ui/src/components/common/ComponentSourceBadge/ComponentSourceBadge.tsx`
+3. `packages/noodl-core-ui/src/components/modals/ComponentUpdatesModal/ComponentUpdatesModal.tsx`
+4. `packages/noodl-core-ui/src/components/modals/ComponentUpdatesModal/UpdateItem.tsx`
+5. `packages/noodl-core-ui/src/components/notifications/UpdateAvailableToast/UpdateAvailableToast.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/models/modulelibrarymodel.ts`
+   - Track imports after install
+   - Add version detection
+
+2. `packages/noodl-editor/src/editor/src/views/panels/componentspanel.tsx`
+   - Show source badge
+   - Show update indicator
+   - Add "Check for Updates" action
+
+3. `packages/noodl-editor/src/editor/src/models/projectmodel.ts`
+   - Store/load import metadata
+   - Add to project.json
+
+4. `packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx`
+   - Periodic update check
+   - Show update notification
+
+5. `packages/noodl-editor/src/editor/src/utils/projectimporter.js`
+   - Return component IDs after import
+   - Support update (re-import)
+
+## Implementation Steps
+
+### Phase 1: Tracking Infrastructure
+1. Create ComponentTrackingService
+2. Define metadata schema
+3. Add to project.json structure
+4. Implement track/load/save
+
+### Phase 2: Import Integration
+1. Hook into installPrefab
+2. Extract version from manifest
+3. Track after successful import
+4. Handle import errors
+
+### Phase 3: Update Checking
+1. Implement checkForUpdates
+2. Compare versions (semver)
+3. Store update availability
+4. Background check timer
+
+### Phase 4: UI - Badges & Indicators
+1. Create ComponentSourceBadge
+2. Add to component panel
+3. Show update indicator
+4. Add "Check for Updates" button
+
+### Phase 5: UI - Update Modal
+1. Create ComponentUpdatesModal
+2. Show changelog summaries
+3. Selective update checkboxes
+4. Implement update action
+
+### Phase 6: Update Application
+1. Backup current component
+2. Re-import from source
+3. Update metadata
+4. Handle errors/rollback
+
+## Testing Checklist
+
+- [ ] Import tracks source correctly
+- [ ] Version stored in metadata
+- [ ] Badge shows in component panel
+- [ ] Update check finds updates
+- [ ] Notification appears when updates available
+- [ ] Update modal lists all updates
+- [ ] Selective update works
+- [ ] Update replaces component correctly
+- [ ] Changelog link works
+- [ ] Rollback restores previous
+- [ ] Works with built-in prefabs
+- [ ] Works with org prefabs
+- [ ] Legacy imports show "unknown" source
+- [ ] Offline shows cached status
+
+## Dependencies
+
+- COMP-001 (Prefab System Refactoring)
+- COMP-002 (Built-in Prefabs) - for version tracking
+- COMP-004 (Organization Components) - for org tracking
+
+## Blocked By
+
+- COMP-001
+- COMP-002
+
+## Blocks
+
+- COMP-006 (extends tracking for forking)
+
+## Estimated Effort
+
+- Tracking service: 4-5 hours
+- Import integration: 3-4 hours
+- Update checking: 3-4 hours
+- UI badges/indicators: 3-4 hours
+- Update modal: 3-4 hours
+- Update application: 3-4 hours
+- **Total: 19-25 hours**
+
+## Success Criteria
+
+1. Imported components track their source
+2. Version visible in component panel
+3. Updates detected automatically
+4. Users notified of available updates
+5. Selective update works smoothly
+6. Update preserves project integrity
+
+## Future Enhancements
+
+- Auto-update option (for trusted sources)
+- Diff view before update
+- Local modification detection
+- Update scheduling
+- Update history
+- Component dependency updates
+- Breaking change warnings

dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-006-forking-pr-workflow.md

@@ -0,0 +1,498 @@
+# COMP-006: Component Forking & PR Workflow
+
+## Overview
+
+Enable users to fork imported components, make modifications, and contribute changes back to the source repository via pull requests. This creates a collaborative component ecosystem where improvements can flow back to the team or community.
+
+## Context
+
+With COMP-005, users can import components and track their source. But when they need to modify a component:
+- Modifications are local only
+- No way to share improvements back
+- No way to propose changes to org components
+- Forked components lose connection to source
+
+This task enables:
+- Fork components with upstream tracking
+- Local modifications tracked separately
+- Contribute changes via PR workflow
+- Merge upstream updates into forked components
+
+### Forking Flow
+
+```
+Import component (COMP-005)
+    ↓
+User modifies component
+    ↓
+System detects local modifications ("forked")
+    ↓
+User can:
+  - Submit PR to upstream
+  - Merge upstream updates into fork
+  - Revert to upstream version
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Fork Detection**
+   - Detect when imported component is modified
+   - Mark as "forked" in tracking metadata
+   - Track original vs modified state
+   - Calculate diff from upstream
+
+2. **Fork Management**
+   - View fork status in component panel
+   - See what changed from upstream
+   - Option to "unfork" (reset to upstream)
+   - Maintain fork while pulling upstream updates
+
+3. **PR Creation**
+   - "Contribute Back" action on forked components
+   - Opens PR creation flow
+   - Exports component changes
+   - Creates branch in upstream repo
+   - Opens GitHub PR interface
+
+4. **Upstream Sync**
+   - Pull upstream changes into fork
+   - Merge or rebase local changes
+   - Conflict detection
+   - Selective merge (choose what to pull)
+
+5. **Visual Indicators**
+   - "Forked" badge on modified components
+   - "Modified from v2.1.0" indicator
+   - Diff count ("3 changes")
+   - PR status if submitted
+
+### Non-Functional Requirements
+
+- Fork detection < 1 second
+- Diff calculation < 3 seconds
+- Works with large components (100+ nodes)
+- No performance impact on editing
+
+## Technical Approach
+
+### 1. Fork Tracking Extension
+
+```typescript
+// Extension to COMP-005 ImportedComponent
+interface ImportedComponent {
+  // ... existing fields ...
+  
+  // Fork tracking
+  isFork: boolean;
+  forkStatus?: ForkStatus;
+  originalChecksum?: string;     // Checksum at import time
+  currentChecksum?: string;      // Checksum of current state
+  upstreamVersion?: string;      // Latest upstream version
+  
+  // PR tracking
+  activePR?: {
+    number: number;
+    url: string;
+    status: 'open' | 'merged' | 'closed';
+    branch: string;
+  };
+}
+
+interface ForkStatus {
+  changesCount: number;
+  lastModified: string;
+  canMergeUpstream: boolean;
+  hasConflicts: boolean;
+}
+```
+
+### 2. Fork Detection Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ComponentForkService.ts
+
+class ComponentForkService {
+  private static instance: ComponentForkService;
+  
+  // Fork detection
+  async detectForks(): Promise<ForkDetectionResult>;
+  async isComponentForked(componentId: string): Promise<boolean>;
+  async calculateDiff(componentId: string): Promise<ComponentDiff>;
+  
+  // Fork management
+  async markAsForked(componentId: string): Promise<void>;
+  async unfork(componentId: string): Promise<void>;  // Reset to upstream
+  
+  // Upstream sync
+  async canMergeUpstream(componentId: string): Promise<MergeCheck>;
+  async mergeUpstream(componentId: string): Promise<MergeResult>;
+  async previewMerge(componentId: string): Promise<MergePreview>;
+  
+  // PR workflow
+  async createContribution(componentId: string): Promise<ContributionResult>;
+  async checkPRStatus(componentId: string): Promise<PRStatus>;
+  
+  // Diff/comparison
+  async exportDiff(componentId: string): Promise<ComponentDiff>;
+  async compareWithUpstream(componentId: string): Promise<ComparisonResult>;
+}
+
+interface ComponentDiff {
+  componentId: string;
+  changes: Change[];
+  nodesAdded: number;
+  nodesRemoved: number;
+  nodesModified: number;
+  propertiesChanged: number;
+}
+
+interface Change {
+  type: 'added' | 'removed' | 'modified';
+  path: string;  // Path in component tree
+  description: string;
+  before?: any;
+  after?: any;
+}
+```
+
+### 3. Checksum Calculation
+
+```typescript
+// Calculate stable checksum for component state
+function calculateComponentChecksum(component: ComponentModel): string {
+  // Serialize component in stable order
+  const serialized = stableSerialize({
+    nodes: component.nodes.map(serializeNode),
+    connections: component.connections.map(serializeConnection),
+    properties: component.properties,
+    // Exclude metadata that changes (ids, timestamps)
+  });
+  
+  return crypto.createHash('sha256').update(serialized).digest('hex');
+}
+
+// Detect if component was modified
+async function detectModification(componentId: string): Promise<boolean> {
+  const metadata = ComponentTrackingService.instance.getComponentSource(componentId);
+  if (!metadata?.originalChecksum) return false;
+  
+  const component = ProjectModel.instance.getComponentWithId(componentId);
+  const currentChecksum = calculateComponentChecksum(component);
+  
+  return currentChecksum !== metadata.originalChecksum;
+}
+```
+
+### 4. PR Creation Flow
+
+```typescript
+async createContribution(componentId: string): Promise<ContributionResult> {
+  const tracking = ComponentTrackingService.instance;
+  const metadata = tracking.getComponentSource(componentId);
+  
+  if (!metadata?.source.repository) {
+    throw new Error('Cannot contribute: no upstream repository');
+  }
+  
+  // 1. Export modified component
+  const component = ProjectModel.instance.getComponentWithId(componentId);
+  const exportedFiles = await exportComponent(component);
+  
+  // 2. Create branch in upstream repo
+  const branchName = `component-update/${metadata.componentName}-${Date.now()}`;
+  const github = GitHubApiClient.instance;
+  
+  await github.createBranch(
+    metadata.source.repository,
+    branchName,
+    'main'
+  );
+  
+  // 3. Commit changes to branch
+  await github.commitFiles(
+    metadata.source.repository,
+    branchName,
+    exportedFiles,
+    `Update ${metadata.componentName} component`
+  );
+  
+  // 4. Create PR
+  const pr = await github.createPullRequest(
+    metadata.source.repository,
+    {
+      title: `Update ${metadata.componentName} component`,
+      body: generatePRDescription(metadata, exportedFiles),
+      head: branchName,
+      base: 'main'
+    }
+  );
+  
+  // 5. Track PR in metadata
+  metadata.activePR = {
+    number: pr.number,
+    url: pr.html_url,
+    status: 'open',
+    branch: branchName
+  };
+  await tracking.saveMetadata();
+  
+  return {
+    success: true,
+    prUrl: pr.html_url,
+    prNumber: pr.number
+  };
+}
+```
+
+### 5. UI Components
+
+#### Fork Badge in Component Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Components                                                          │
+├─────────────────────────────────────────────────────────────────────┤
+│ ├── AcmeButton  [🏢 v2.1.0] [🔀 Forked +3]                          │
+│ │   ├── Right-click options:                                       │
+│ │   │   • View Changes from Upstream                               │
+│ │   │   • Merge Upstream Changes                                   │
+│ │   │   • Contribute Changes (Create PR)                           │
+│ │   │   • Reset to Upstream                                        │
+│ │   │   ──────────────────────                                     │
+│ │   │   • PR #42 Open ↗                                            │
+│ │   └──                                                             │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Diff View Modal
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Changes in AcmeButton                                         [×]  │
+│ Forked from v2.1.0                                                 │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Summary: 3 nodes modified, 1 added, 0 removed                      │
+│                                                                     │
+│ CHANGES                                                             │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ + Added: LoadingSpinner node                                    │ │
+│ │   └─ Displays while button action is processing                 │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ ~ Modified: Button/backgroundColor                              │ │
+│ │   └─ #3B82F6 → #2563EB (darker blue)                           │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ ~ Modified: Button/borderRadius                                 │ │
+│ │   └─ 4px → 8px                                                  │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ ~ Modified: HoverState/scale                                    │ │
+│ │   └─ 1.02 → 1.05                                                │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│              [Reset to Upstream]  [Contribute Changes]  [Close]    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### PR Creation Modal
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Contribute Changes                                            [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ You're about to create a Pull Request to:                          │
+│ 🏢 acme-corp/noodl-components                                       │
+│                                                                     │
+│ Component: AcmeButton                                               │
+│ Changes: 3 modifications, 1 addition                               │
+│                                                                     │
+│ PR Title:                                                           │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Update AcmeButton: add loading state, adjust styling           │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ Description:                                                        │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ This PR updates the AcmeButton component with:                  │ │
+│ │ - Added loading spinner during async actions                    │ │
+│ │ - Darker blue for better contrast                               │ │
+│ │ - Larger border radius for modern look                          │ │
+│ │ - More pronounced hover effect                                  │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ☑ Open PR in browser after creation                                │
+│                                                                     │
+│                                         [Cancel]  [Create PR]      │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 6. Upstream Merge Flow
+
+```typescript
+async mergeUpstream(componentId: string): Promise<MergeResult> {
+  const tracking = ComponentTrackingService.instance;
+  const metadata = tracking.getComponentSource(componentId);
+  
+  // 1. Get upstream version
+  const source = PrefabRegistry.instance.getSource(metadata.source.repository);
+  const upstreamPath = await source.downloadPrefab(metadata.source.prefabId);
+  
+  // 2. Get current component
+  const currentComponent = ProjectModel.instance.getComponentWithId(componentId);
+  
+  // 3. Get original version (at import time)
+  const originalPath = await this.getOriginalVersion(componentId);
+  
+  // 4. Three-way merge
+  const mergeResult = await mergeComponents(
+    originalPath,    // Base
+    upstreamPath,    // Theirs (upstream)
+    currentComponent // Ours (local modifications)
+  );
+  
+  if (mergeResult.hasConflicts) {
+    // Show conflict resolution UI
+    return { success: false, conflicts: mergeResult.conflicts };
+  }
+  
+  // 5. Apply merged result
+  await applyMergedComponent(componentId, mergeResult.merged);
+  
+  // 6. Update metadata
+  metadata.importedVersion = upstreamVersion;
+  metadata.originalChecksum = calculateChecksum(mergeResult.merged);
+  await tracking.saveMetadata();
+  
+  return { success: true };
+}
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/ComponentForkService.ts`
+2. `packages/noodl-editor/src/editor/src/utils/componentChecksum.ts`
+3. `packages/noodl-editor/src/editor/src/utils/componentMerge.ts`
+4. `packages/noodl-core-ui/src/components/modals/ComponentDiffModal/ComponentDiffModal.tsx`
+5. `packages/noodl-core-ui/src/components/modals/CreatePRModal/CreatePRModal.tsx`
+6. `packages/noodl-core-ui/src/components/modals/MergeUpstreamModal/MergeUpstreamModal.tsx`
+7. `packages/noodl-core-ui/src/components/common/ForkBadge/ForkBadge.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/services/ComponentTrackingService.ts`
+   - Add fork tracking fields
+   - Add checksum calculation
+   - Integration with ForkService
+
+2. `packages/noodl-editor/src/editor/src/views/panels/componentspanel.tsx`
+   - Add fork badge
+   - Add fork-related context menu items
+
+3. `packages/noodl-editor/src/editor/src/services/GitHubApiClient.ts`
+   - Add branch creation
+   - Add file commit
+   - Add PR creation
+
+4. `packages/noodl-editor/src/editor/src/models/projectmodel.ts`
+   - Hook component save to detect modifications
+
+## Implementation Steps
+
+### Phase 1: Fork Detection
+1. Implement checksum calculation
+2. Store original checksum on import
+3. Detect modifications on component save
+4. Mark forked components
+
+### Phase 2: Diff Calculation
+1. Implement component diff algorithm
+2. Create human-readable change descriptions
+3. Calculate change counts
+
+### Phase 3: UI - Fork Indicators
+1. Create ForkBadge component
+2. Add to component panel
+3. Add context menu items
+4. Show fork status
+
+### Phase 4: UI - Diff View
+1. Create ComponentDiffModal
+2. Show changes list
+3. Add action buttons
+
+### Phase 5: PR Workflow
+1. Implement branch creation
+2. Implement file commit
+3. Implement PR creation
+4. Create CreatePRModal
+
+### Phase 6: Upstream Merge
+1. Implement three-way merge
+2. Create MergeUpstreamModal
+3. Handle conflicts
+4. Update metadata after merge
+
+## Testing Checklist
+
+- [ ] Modification detected correctly
+- [ ] Fork badge appears
+- [ ] Diff calculated accurately
+- [ ] Diff modal shows changes
+- [ ] PR creation works
+- [ ] PR opens in browser
+- [ ] PR status tracked
+- [ ] Upstream merge works (no conflicts)
+- [ ] Conflict detection works
+- [ ] Reset to upstream works
+- [ ] Multiple forks tracked
+- [ ] Works with org repos
+- [ ] Works with personal repos
+- [ ] Checksum stable across saves
+
+## Dependencies
+
+- COMP-003 (Component Export)
+- COMP-004 (Organization Components)
+- COMP-005 (Component Import Version Control)
+- GIT-001 (GitHub OAuth)
+
+## Blocked By
+
+- COMP-005
+
+## Blocks
+
+- None (final task in COMP series)
+
+## Estimated Effort
+
+- Fork detection & checksum: 4-5 hours
+- Diff calculation: 4-5 hours
+- Fork UI (badges, menus): 3-4 hours
+- Diff view modal: 3-4 hours
+- PR workflow: 5-6 hours
+- Upstream merge: 5-6 hours
+- Testing & polish: 4-5 hours
+- **Total: 28-35 hours**
+
+## Success Criteria
+
+1. Modified components detected as forks
+2. Fork badge visible in UI
+3. Diff view shows changes clearly
+4. PR creation works end-to-end
+5. PR status tracked
+6. Upstream merge works smoothly
+7. Conflict handling is clear
+
+## Future Enhancements
+
+- Visual diff editor
+- Partial contribution (select changes for PR)
+- Auto-update after PR merged
+- Fork from fork (nested forks)
+- Component version branches
+- Conflict resolution UI
+- PR review integration

dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-overview.md

@@ -0,0 +1,339 @@
+# COMP Series: Shared Component System
+
+## Overview
+
+The COMP series transforms Noodl's component sharing from manual zip file exchanges into a modern, Git-based collaborative ecosystem. Teams can share design systems via organization repositories, individuals can build personal component libraries, and improvements can flow back upstream via pull requests.
+
+## Target Environment
+
+- **Editor**: React 19 version only
+- **Runtime**: Not affected (components work in any runtime)
+- **Backwards Compatibility**: Existing prefabs continue to work
+
+## Task Dependency Graph
+
+```
+COMP-001 (Prefab System Refactoring)
+    │
+    ├────────────────────────┬───────────────────────┐
+    ↓                        ↓                       ↓
+COMP-002 (Built-in)    COMP-003 (Export)      GIT-001 (OAuth)
+    │                        │                       │
+    ↓                        ↓                       │
+    │                  COMP-004 (Org Components) ←───┘
+    │                        │
+    └────────────┬───────────┘
+                 ↓
+         COMP-005 (Version Control)
+                 │
+                 ↓
+         COMP-006 (Forking & PR)
+```
+
+## Task Summary
+
+| Task ID | Name | Est. Hours | Priority |
+|---------|------|------------|----------|
+| COMP-001 | Prefab System Refactoring | 14-20 | Critical |
+| COMP-002 | Built-in Prefabs | 19-26 | High |
+| COMP-003 | Component Export to Repository | 19-25 | High |
+| COMP-004 | Organization Components Repository | 18-24 | High |
+| COMP-005 | Component Import with Version Control | 19-25 | Medium |
+| COMP-006 | Component Forking & PR Workflow | 28-35 | Medium |
+
+**Total Estimated: 117-155 hours**
+
+## Implementation Order
+
+### Phase 1: Foundation (Weeks 1-2)
+1. **COMP-001** - Refactor prefab system for multiple sources
+
+### Phase 2: Local & Built-in (Weeks 3-4)
+2. **COMP-002** - Bundle essential prefabs with editor
+
+### Phase 3: Export & Organization (Weeks 5-7)
+3. **COMP-003** - Enable exporting to GitHub repositories
+4. **COMP-004** - Auto-detect and load organization repos
+
+### Phase 4: Version Control & Collaboration (Weeks 8-10)
+5. **COMP-005** - Track imports, detect updates
+6. **COMP-006** - Fork detection, PR workflow
+
+## Existing Infrastructure
+
+### ModuleLibraryModel
+
+```typescript
+// Current implementation
+class ModuleLibraryModel {
+  modules: IModule[];    // External libraries
+  prefabs: IModule[];    // Component bundles
+  
+  fetchModules(type: 'modules' | 'prefabs'): Promise<IModule[]>;
+  installModule(path: string): Promise<void>;
+  installPrefab(path: string): Promise<void>;
+}
+```
+
+### ProjectImporter
+
+```typescript
+// Handles actual component import
+class ProjectImporter {
+  listComponentsAndDependencies(dir, callback);
+  checkForCollisions(imports, callback);
+  import(dir, imports, callback);
+}
+```
+
+### NodePicker
+
+```
+packages/noodl-editor/src/editor/src/views/NodePicker/
+├── NodePicker.tsx           # Main component
+├── NodePicker.context.tsx   # State management
+├── tabs/
+│   ├── NodeLibrary/         # Built-in nodes
+│   ├── NodePickerSearchView/ # Prefabs & modules
+│   └── ImportFromProject/   # Import from other project
+└── components/
+    └── ModuleCard/          # Prefab/module display card
+```
+
+### Export Functionality
+
+```typescript
+// exportProjectComponents.ts
+export function exportProjectComponents() {
+  // Shows export popup
+  // User selects components
+  // Creates zip file with dependencies
+}
+```
+
+## New Architecture
+
+### PrefabRegistry (COMP-001)
+
+Central hub for all prefab sources:
+
+```typescript
+class PrefabRegistry {
+  private sources: Map<string, PrefabSource>;
+  
+  registerSource(source: PrefabSource): void;
+  getAllPrefabs(): Promise<PrefabMetadata[]>;
+  installPrefab(id: string): Promise<void>;
+}
+```
+
+### Source Types
+
+| Source | Priority | Description |
+|--------|----------|-------------|
+| BuiltInPrefabSource | 100 | Bundled with editor |
+| OrganizationPrefabSource | 80 | Team component repos |
+| PersonalPrefabSource | 70 | User's own repos |
+| DocsPrefabSource | 50 | Community prefabs |
+
+### Component Tracking (COMP-005)
+
+```typescript
+interface ImportedComponent {
+  componentId: string;
+  source: ComponentSource;
+  importedVersion: string;
+  isFork: boolean;
+  updateAvailable?: string;
+  activePR?: PRInfo;
+}
+```
+
+## Repository Structure Convention
+
+All component repositories follow this structure:
+
+```
+noodl-components/
+├── index.json              # Repository manifest
+├── README.md               # Documentation
+├── LICENSE                 # License file
+└── components/
+    ├── component-name/
+    │   ├── prefab.json     # Component metadata
+    │   ├── component.ndjson # Component data
+    │   ├── dependencies/   # Styles, variants
+    │   └── assets/         # Images, fonts
+    └── ...
+```
+
+### Manifest Format (index.json)
+
+```json
+{
+  "name": "Acme Design System",
+  "version": "2.1.0",
+  "noodlVersion": ">=2.10.0",
+  "components": [
+    {
+      "id": "acme-button",
+      "name": "Acme Button",
+      "version": "2.1.0",
+      "path": "components/acme-button"
+    }
+  ]
+}
+```
+
+## Key User Flows
+
+### 1. Team Member Imports Org Component
+
+```
+User opens NodePicker
+    ↓
+Sees "Acme Corp" section with org components
+    ↓
+Clicks "Clone" on AcmeButton
+    ↓
+Component imported, source tracked
+    ↓
+Later: notification "AcmeButton update available"
+```
+
+### 2. Developer Shares Component
+
+```
+User right-clicks component
+    ↓
+Selects "Export to Repository"
+    ↓
+Chooses personal repo or org repo
+    ↓
+Fills metadata (description, tags)
+    ↓
+Component committed and pushed
+```
+
+### 3. Developer Improves Org Component
+
+```
+User modifies imported AcmeButton
+    ↓
+System detects fork, shows badge
+    ↓
+User right-clicks → "Contribute Changes"
+    ↓
+PR created in org repo
+    ↓
+Team reviews and merges
+```
+
+## Services to Create
+
+| Service | Purpose |
+|---------|---------|
+| PrefabRegistry | Central source management |
+| ComponentTrackingService | Import/version tracking |
+| ComponentExportService | Export to repositories |
+| OrganizationService | Org detection & management |
+| ComponentForkService | Fork detection & PR workflow |
+
+## UI Components to Create
+
+| Component | Location | Purpose |
+|-----------|----------|---------|
+| ComponentSourceBadge | noodl-core-ui | Show source (Built-in, Org, etc.) |
+| ForkBadge | noodl-core-ui | Show fork status |
+| ExportToRepoModal | noodl-core-ui | Export workflow |
+| ComponentUpdatesModal | noodl-core-ui | Update selection |
+| ComponentDiffModal | noodl-core-ui | View changes |
+| CreatePRModal | noodl-core-ui | PR creation |
+| OrganizationSettings | noodl-core-ui | Org repo settings |
+
+## Dependencies on Other Series
+
+### Required from GIT Series
+- GIT-001 (GitHub OAuth) - Required for COMP-003, COMP-004
+
+### Enables for Future
+- Community marketplace
+- Component ratings/reviews
+- Usage analytics
+
+## Testing Strategy
+
+### Unit Tests
+- Source registration
+- Metadata parsing
+- Checksum calculation
+- Version comparison
+
+### Integration Tests
+- Full import flow
+- Export to repo flow
+- Update detection
+- PR creation
+
+### Manual Testing
+- Multiple organizations
+- Large component libraries
+- Offline scenarios
+- Permission edge cases
+
+## Cline Usage Notes
+
+### Before Starting Each Task
+
+1. Read task document completely
+2. Review existing prefab system:
+   - `modulelibrarymodel.ts`
+   - `projectimporter.js`
+   - `NodePicker/` views
+3. Understand export flow:
+   - `exportProjectComponents.ts`
+
+### Key Gotchas
+
+1. **Singleton Pattern**: `ModuleLibraryModel.instance` is used everywhere
+2. **Async Import**: Import process is callback-based, not Promise
+3. **Collision Handling**: Existing collision detection must be preserved
+4. **File Paths**: Components use relative paths internally
+
+### Testing Prefabs
+
+```bash
+# Run editor tests
+npm run test:editor
+
+# Manual: Open NodePicker, try importing prefab
+```
+
+## Success Criteria (Series Complete)
+
+1. ✅ Multiple prefab sources supported
+2. ✅ Built-in prefabs available offline
+3. ✅ Components exportable to GitHub
+4. ✅ Organization repos auto-detected
+5. ✅ Import source/version tracked
+6. ✅ Updates detected and installable
+7. ✅ Forks can create PRs upstream
+
+## Future Work (Post-COMP)
+
+The COMP series enables:
+- **Marketplace**: Paid/free component marketplace
+- **Analytics**: Usage tracking per component
+- **Ratings**: Community ratings and reviews
+- **Templates**: Project templates from components
+- **Subscriptions**: Organization component subscriptions
+
+## Files in This Series
+
+- `COMP-001-prefab-system-refactoring.md`
+- `COMP-002-builtin-prefabs.md`
+- `COMP-003-component-export.md`
+- `COMP-004-organization-components.md`
+- `COMP-005-component-import-version-control.md`
+- `COMP-006-forking-pr-workflow.md`
+- `COMP-OVERVIEW.md` (this file)

dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-001-ai-project-scaffolding.md

@@ -0,0 +1,481 @@
+# AI-001: AI Project Scaffolding
+
+## Overview
+
+Enable users to describe their project idea in natural language and have AI generate a complete project scaffold with pages, components, data models, and basic styling. This transforms the "blank canvas" experience into an intelligent starting point.
+
+## Context
+
+Currently, project creation offers:
+- Blank "Hello World" template
+- Pre-built template gallery (limited selection)
+- Manual component-by-component building
+
+New users face a steep learning curve:
+- Don't know where to start
+- Overwhelmed by node options
+- No guidance on structure
+
+AI scaffolding provides:
+- Describe idea → Get working structure
+- Industry best practices baked in
+- Learning through example
+- Faster time-to-prototype
+
+### Existing Infrastructure
+
+From `AiAssistantModel.ts`:
+```typescript
+// Existing AI templates
+docsTemplates = [
+  { label: 'REST API', template: 'rest' },
+  { label: 'Form Validation', template: 'function-form-validation' },
+  { label: 'AI Function', template: 'function' },
+  // ...
+]
+```
+
+From `TemplateRegistry`:
+```typescript
+// Download and extract project templates
+templateRegistry.download({ templateUrl }) → zipPath
+```
+
+From `LocalProjectsModel`:
+```typescript
+// Create new project from template
+newProject(callback, { name, path, projectTemplate })
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Natural Language Input**
+   - Free-form text description of project
+   - Example prompts for inspiration
+   - Clarifying questions from AI
+   - Refinement through conversation
+
+2. **Project Analysis**
+   - Identify project type (app, dashboard, form, etc.)
+   - Extract features and functionality
+   - Determine data models needed
+   - Suggest appropriate structure
+
+3. **Scaffold Generation**
+   - Create page structure
+   - Generate component hierarchy
+   - Set up navigation flow
+   - Create placeholder data models
+   - Apply appropriate styling
+
+4. **Preview & Refinement**
+   - Preview generated structure before creation
+   - Modify/refine via chat
+   - Accept or regenerate parts
+   - Explain what was generated
+
+5. **Project Creation**
+   - Create actual Noodl project
+   - Import generated components
+   - Set up routing/navigation
+   - Open in editor
+
+### Non-Functional Requirements
+
+- Generation completes in < 30 seconds
+- Works with Claude API (Anthropic)
+- Graceful handling of API errors
+- Clear progress indication
+- Cost-effective token usage
+
+## Technical Approach
+
+### 1. AI Scaffolding Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/AiScaffoldingService.ts
+
+interface ProjectDescription {
+  rawText: string;
+  clarifications?: Record<string, string>;
+}
+
+interface ScaffoldResult {
+  projectType: ProjectType;
+  pages: PageDefinition[];
+  components: ComponentDefinition[];
+  dataModels: DataModelDefinition[];
+  navigation: NavigationDefinition;
+  styling: StylingDefinition;
+  explanation: string;
+}
+
+interface PageDefinition {
+  name: string;
+  route: string;
+  description: string;
+  components: string[];  // Component names used
+  layout: 'stack' | 'grid' | 'sidebar' | 'tabs';
+}
+
+interface ComponentDefinition {
+  name: string;
+  type: 'visual' | 'logic' | 'data';
+  description: string;
+  inputs: PortDefinition[];
+  outputs: PortDefinition[];
+  children?: ComponentDefinition[];
+  prefab?: string;  // Use existing prefab if available
+}
+
+class AiScaffoldingService {
+  private static instance: AiScaffoldingService;
+  
+  // Main flow
+  async analyzeDescription(description: string): Promise<AnalysisResult>;
+  async generateScaffold(description: ProjectDescription): Promise<ScaffoldResult>;
+  async refineScaffold(scaffold: ScaffoldResult, feedback: string): Promise<ScaffoldResult>;
+  
+  // Project creation
+  async createProject(scaffold: ScaffoldResult, name: string, path: string): Promise<ProjectModel>;
+  
+  // Conversation
+  async askClarification(description: string): Promise<ClarificationQuestion[]>;
+  async chat(messages: ChatMessage[]): Promise<ChatResponse>;
+}
+```
+
+### 2. Prompt Engineering
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/prompts/scaffolding.ts
+
+const SYSTEM_PROMPT = `You are an expert Noodl application architect. 
+Your task is to analyze project descriptions and generate detailed scaffolds
+for visual low-code applications.
+
+Noodl is a visual programming platform with:
+- Pages (screens/routes)
+- Components (reusable UI elements)
+- Nodes (visual programming blocks)
+- Data models (objects, arrays, variables)
+- Logic nodes (conditions, loops, functions)
+
+When generating scaffolds, consider:
+1. User experience and navigation flow
+2. Data management and state
+3. Reusability of components
+4. Mobile-first responsive design
+5. Performance and loading states
+
+Output JSON following the ScaffoldResult schema.`;
+
+const ANALYSIS_PROMPT = `Analyze this project description and identify:
+1. Project type (app, dashboard, form, e-commerce, etc.)
+2. Main features/functionality
+3. User roles/personas
+4. Data entities needed
+5. Key user flows
+6. Potential complexity areas
+
+Description: {description}`;
+
+const SCAFFOLD_PROMPT = `Generate a complete Noodl project scaffold for:
+
+Project Type: {projectType}
+Features: {features}
+Data Models: {dataModels}
+
+Create:
+1. Page structure with routes
+2. Component hierarchy
+3. Navigation flow
+4. Data model definitions
+5. Styling theme
+
+Use these available prefabs when appropriate:
+{availablePrefabs}`;
+```
+
+### 3. Scaffold to Project Converter
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/ScaffoldConverter.ts
+
+class ScaffoldConverter {
+  // Convert scaffold definitions to actual Noodl components
+  async convertToProject(scaffold: ScaffoldResult): Promise<ProjectFiles> {
+    const project = new ProjectModel();
+    
+    // Create pages
+    for (const page of scaffold.pages) {
+      const pageComponent = await this.createPage(page);
+      project.addComponent(pageComponent);
+    }
+    
+    // Create reusable components
+    for (const component of scaffold.components) {
+      const comp = await this.createComponent(component);
+      project.addComponent(comp);
+    }
+    
+    // Set up navigation
+    await this.setupNavigation(project, scaffold.navigation);
+    
+    // Apply styling
+    await this.applyStyles(project, scaffold.styling);
+    
+    return project;
+  }
+  
+  private async createPage(page: PageDefinition): Promise<ComponentModel> {
+    // Create component with page layout
+    const component = ComponentModel.create({
+      name: page.name,
+      type: 'page'
+    });
+    
+    // Add layout container based on page.layout
+    const layout = this.createLayout(page.layout);
+    component.addChild(layout);
+    
+    // Add referenced components
+    for (const compName of page.components) {
+      const ref = this.createComponentReference(compName);
+      layout.addChild(ref);
+    }
+    
+    return component;
+  }
+  
+  private async createComponent(def: ComponentDefinition): Promise<ComponentModel> {
+    // Check if we can use a prefab
+    if (def.prefab) {
+      return await this.importPrefab(def.prefab, def);
+    }
+    
+    // Create custom component
+    const component = ComponentModel.create({
+      name: def.name,
+      type: def.type
+    });
+    
+    // Add ports
+    for (const input of def.inputs) {
+      component.addInput(input);
+    }
+    for (const output of def.outputs) {
+      component.addOutput(output);
+    }
+    
+    // Add children
+    if (def.children) {
+      for (const child of def.children) {
+        const childComp = await this.createComponent(child);
+        component.addChild(childComp);
+      }
+    }
+    
+    return component;
+  }
+}
+```
+
+### 4. UI Flow
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Create New Project                                            [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ ○ Start from scratch                                               │
+│ ○ Use a template                                                    │
+│ ● Describe your project (AI)                                       │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Describe what you want to build...                              │ │
+│ │                                                                 │ │
+│ │ I want to build a task management app where users can create   │ │
+│ │ projects, add tasks with due dates, and track progress with    │ │
+│ │ a kanban board view.                                           │ │
+│ │                                                                 │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ 💡 Examples:                                                        │
+│ • "A recipe app with categories and favorites"                     │
+│ • "An e-commerce dashboard with sales charts"                      │
+│ • "A booking system for a salon"                                   │
+│                                                                     │
+│                                       [Cancel]  [Generate Project]  │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Preview & Refinement
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Project Preview                                               [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ STRUCTURE                           │ CHAT                          │
+│ ┌─────────────────────────────────┐ │ ┌─────────────────────────────┐│
+│ │ 📁 Pages                        │ │ │ 🤖 I've created a task     ││
+│ │   📄 HomePage                   │ │ │ management app with:        ││
+│ │   📄 ProjectsPage               │ │ │                             ││
+│ │   📄 KanbanBoard                │ │ │ • 4 pages for navigation    ││
+│ │   📄 TaskDetail                 │ │ │ • Kanban board component    ││
+│ │                                 │ │ │ • Task and Project models   ││
+│ │ 📁 Components                   │ │ │ • Drag-and-drop ready       ││
+│ │   🧩 TaskCard                   │ │ │                             ││
+│ │   🧩 KanbanColumn               │ │ │ Want me to add anything?    ││
+│ │   🧩 ProjectCard                │ │ ├─────────────────────────────┤│
+│ │   🧩 NavBar                     │ │ │ Add a calendar view too     ││
+│ │                                 │ │ │                        [Send]││
+│ │ 📁 Data Models                  │ │ └─────────────────────────────┘│
+│ │   📊 Task                       │ │                                │
+│ │   📊 Project                    │ │                                │
+│ │   📊 User                       │ │                                │
+│ └─────────────────────────────────┘ │                                │
+│                                                                     │
+│                          [Regenerate]  [Edit Manually]  [Create]   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/AiScaffoldingService.ts`
+2. `packages/noodl-editor/src/editor/src/services/ai/prompts/scaffolding.ts`
+3. `packages/noodl-editor/src/editor/src/services/ai/ScaffoldConverter.ts`
+4. `packages/noodl-editor/src/editor/src/services/ai/AnthropicClient.ts`
+5. `packages/noodl-core-ui/src/components/modals/AiProjectModal/AiProjectModal.tsx`
+6. `packages/noodl-core-ui/src/components/modals/AiProjectModal/ProjectDescriptionInput.tsx`
+7. `packages/noodl-core-ui/src/components/modals/AiProjectModal/ScaffoldPreview.tsx`
+8. `packages/noodl-core-ui/src/components/modals/AiProjectModal/RefinementChat.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/views/projectsview.ts`
+   - Add "Describe your project" option
+   - Launch AiProjectModal
+
+2. `packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx`
+   - Add AI project creation button
+
+3. `packages/noodl-editor/src/editor/src/utils/LocalProjectsModel.ts`
+   - Add `newProjectFromScaffold()` method
+
+## Implementation Steps
+
+### Phase 1: AI Infrastructure
+1. Create AnthropicClient wrapper
+2. Implement prompt templates
+3. Set up API key management
+4. Create scaffolding service skeleton
+
+### Phase 2: Scaffold Generation
+1. Implement analyzeDescription
+2. Implement generateScaffold
+3. Test with various descriptions
+4. Refine prompts based on results
+
+### Phase 3: Scaffold Converter
+1. Implement page creation
+2. Implement component creation
+3. Implement navigation setup
+4. Implement styling application
+
+### Phase 4: UI - Input Phase
+1. Create AiProjectModal
+2. Create ProjectDescriptionInput
+3. Add example prompts
+4. Integrate with launcher
+
+### Phase 5: UI - Preview Phase
+1. Create ScaffoldPreview
+2. Create structure tree view
+3. Create RefinementChat
+4. Add edit/regenerate actions
+
+### Phase 6: Project Creation
+1. Implement createProject
+2. Handle prefab imports
+3. Open project in editor
+4. Show success/onboarding
+
+## Testing Checklist
+
+- [ ] Description analysis extracts features correctly
+- [ ] Scaffold generation produces valid structure
+- [ ] Prefabs used when appropriate
+- [ ] Converter creates valid components
+- [ ] Pages have correct routing
+- [ ] Navigation works between pages
+- [ ] Styling applied consistently
+- [ ] Refinement chat updates scaffold
+- [ ] Project opens in editor
+- [ ] Error handling for API failures
+- [ ] Rate limiting handled gracefully
+
+## Dependencies
+
+- Anthropic API access (Claude)
+- COMP-002 (Built-in Prefabs) - for scaffold components
+
+## Blocked By
+
+- None (can start immediately)
+
+## Blocks
+
+- AI-002 (Component Suggestions)
+- AI-003 (Natural Language Editing)
+
+## Estimated Effort
+
+- AI infrastructure: 4-5 hours
+- Scaffold generation: 6-8 hours
+- Scaffold converter: 6-8 hours
+- UI input phase: 4-5 hours
+- UI preview phase: 5-6 hours
+- Project creation: 3-4 hours
+- Testing & refinement: 4-5 hours
+- **Total: 32-41 hours**
+
+## Success Criteria
+
+1. Users can describe project in natural language
+2. AI generates appropriate structure
+3. Preview shows clear scaffold
+4. Refinement chat enables adjustments
+5. Created project is functional
+6. Time from idea to working scaffold < 2 minutes
+
+## Example Prompts & Outputs
+
+### Example 1: Task Manager
+
+**Input:** "A task management app where users can create projects, add tasks with due dates, and track progress with a kanban board"
+
+**Output:**
+- Pages: Home, Projects, Kanban, TaskDetail
+- Components: TaskCard, KanbanColumn, ProjectCard, NavBar
+- Data: Task (title, description, dueDate, status), Project (name, tasks[])
+
+### Example 2: Recipe App
+
+**Input:** "A recipe app with categories, favorites, and a shopping list generator"
+
+**Output:**
+- Pages: Home, Categories, RecipeDetail, Favorites, ShoppingList
+- Components: RecipeCard, CategoryTile, IngredientList, AddToFavoritesButton
+- Data: Recipe, Category, Ingredient, ShoppingItem
+
+## Future Enhancements
+
+- Voice input for description
+- Screenshot/mockup to scaffold
+- Integration with design systems
+- Multi-language support
+- Template learning from user projects

dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-002-ai-component-suggestions.md

@@ -0,0 +1,507 @@
+# AI-002: AI Component Suggestions
+
+## Overview
+
+Provide intelligent, context-aware component suggestions as users build their projects. When a user is working on a component, AI analyzes the context and suggests relevant nodes, connections, or entire sub-components that would complement what they're building.
+
+## Context
+
+Currently, users must:
+- Know what node they need
+- Search through the node picker
+- Understand which nodes work together
+- Manually create common patterns
+
+This creates friction for:
+- New users learning the platform
+- Experienced users building repetitive patterns
+- Anyone implementing common UI patterns
+
+AI suggestions provide:
+- "What you might need next" recommendations
+- Common pattern recognition
+- Learning through suggestion
+- Faster workflow for experts
+
+### Integration with Existing AI
+
+From `AiAssistantModel.ts`:
+```typescript
+// Existing AI node templates
+templates: AiTemplate[] = docsTemplates.map(...)
+
+// Activity tracking
+addActivity({ id, type, title, prompt, node, graph })
+```
+
+This task extends the AI capabilities to work alongside normal editing, not just through dedicated AI nodes.
+
+## Requirements
+
+### Functional Requirements
+
+1. **Context Analysis**
+   - Analyze current component structure
+   - Identify incomplete patterns
+   - Detect user intent from recent actions
+   - Consider project-wide context
+
+2. **Suggestion Types**
+   - **Node suggestions**: "Add a Loading state?"
+   - **Connection suggestions**: "Connect this to..."
+   - **Pattern completion**: "Complete this form with validation?"
+   - **Prefab suggestions**: "Use the Form Input prefab?"
+
+3. **Suggestion Display**
+   - Non-intrusive inline hints
+   - Expandable detail panel
+   - One-click insertion
+   - Keyboard shortcuts
+
+4. **Learning & Relevance**
+   - Learn from user accepts/rejects
+   - Improve relevance over time
+   - Consider user skill level
+   - Avoid repetitive suggestions
+
+5. **Control & Settings**
+   - Enable/disable suggestions
+   - Suggestion frequency
+   - Types of suggestions
+   - Reset learned preferences
+
+### Non-Functional Requirements
+
+- Suggestions appear within 500ms
+- No blocking of user actions
+- Minimal API calls (batch/cache)
+- Works offline (basic patterns)
+
+## Technical Approach
+
+### 1. Suggestion Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/AiSuggestionService.ts
+
+interface SuggestionContext {
+  component: ComponentModel;
+  selectedNodes: NodeGraphNode[];
+  recentActions: EditorAction[];
+  projectContext: ProjectContext;
+  userPreferences: UserPreferences;
+}
+
+interface Suggestion {
+  id: string;
+  type: 'node' | 'connection' | 'pattern' | 'prefab';
+  confidence: number;  // 0-1
+  title: string;
+  description: string;
+  preview?: string;  // Visual preview
+  action: SuggestionAction;
+  dismissable: boolean;
+}
+
+interface SuggestionAction {
+  type: 'insert_node' | 'create_connection' | 'insert_pattern' | 'import_prefab';
+  payload: any;
+}
+
+class AiSuggestionService {
+  private static instance: AiSuggestionService;
+  private suggestionCache: Map<string, Suggestion[]> = new Map();
+  private userFeedback: UserFeedbackStore;
+  
+  // Main API
+  async getSuggestions(context: SuggestionContext): Promise<Suggestion[]>;
+  async applySuggestion(suggestion: Suggestion): Promise<void>;
+  async dismissSuggestion(suggestion: Suggestion): Promise<void>;
+  
+  // Feedback
+  recordAccept(suggestion: Suggestion): void;
+  recordReject(suggestion: Suggestion): void;
+  recordIgnore(suggestion: Suggestion): void;
+  
+  // Settings
+  setEnabled(enabled: boolean): void;
+  setFrequency(frequency: SuggestionFrequency): void;
+  getSuggestionSettings(): SuggestionSettings;
+}
+```
+
+### 2. Context Analyzer
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/ContextAnalyzer.ts
+
+interface AnalysisResult {
+  componentType: ComponentType;
+  currentPattern: Pattern | null;
+  incompletePatterns: IncompletePattern[];
+  missingConnections: MissingConnection[];
+  suggestedEnhancements: Enhancement[];
+}
+
+class ContextAnalyzer {
+  // Pattern detection
+  detectPatterns(component: ComponentModel): Pattern[];
+  detectIncompletePatterns(component: ComponentModel): IncompletePattern[];
+  
+  // Connection analysis
+  findMissingConnections(nodes: NodeGraphNode[]): MissingConnection[];
+  findOrphanedNodes(component: ComponentModel): NodeGraphNode[];
+  
+  // Intent inference
+  inferUserIntent(recentActions: EditorAction[]): UserIntent;
+  
+  // Project context
+  getRelatedComponents(component: ComponentModel): ComponentModel[];
+  getDataModelContext(component: ComponentModel): DataModel[];
+}
+
+// Common patterns to detect
+const PATTERNS = {
+  FORM_INPUT: {
+    nodes: ['TextInput', 'Label'],
+    missing: ['Validation', 'ErrorDisplay'],
+    suggestion: 'Add form validation?'
+  },
+  LIST_ITEM: {
+    nodes: ['Repeater', 'Group'],
+    missing: ['ItemClick', 'DeleteAction'],
+    suggestion: 'Add item interactions?'
+  },
+  DATA_FETCH: {
+    nodes: ['REST'],
+    missing: ['LoadingState', 'ErrorState'],
+    suggestion: 'Add loading and error states?'
+  },
+  // ... more patterns
+};
+```
+
+### 3. Suggestion Engine
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/SuggestionEngine.ts
+
+class SuggestionEngine {
+  private contextAnalyzer: ContextAnalyzer;
+  private patternLibrary: PatternLibrary;
+  private prefabMatcher: PrefabMatcher;
+  
+  async generateSuggestions(context: SuggestionContext): Promise<Suggestion[]> {
+    const suggestions: Suggestion[] = [];
+    
+    // 1. Local pattern matching (no API)
+    const localSuggestions = this.getLocalSuggestions(context);
+    suggestions.push(...localSuggestions);
+    
+    // 2. AI-powered suggestions (API call)
+    if (this.shouldCallApi(context)) {
+      const aiSuggestions = await this.getAiSuggestions(context);
+      suggestions.push(...aiSuggestions);
+    }
+    
+    // 3. Prefab matching
+    const prefabSuggestions = this.getPrefabSuggestions(context);
+    suggestions.push(...prefabSuggestions);
+    
+    // 4. Rank and filter
+    return this.rankSuggestions(suggestions, context);
+  }
+  
+  private getLocalSuggestions(context: SuggestionContext): Suggestion[] {
+    const analysis = this.contextAnalyzer.analyze(context.component);
+    const suggestions: Suggestion[] = [];
+    
+    // Pattern completion
+    for (const incomplete of analysis.incompletePatterns) {
+      suggestions.push({
+        type: 'pattern',
+        title: incomplete.completionTitle,
+        description: incomplete.description,
+        confidence: incomplete.confidence,
+        action: {
+          type: 'insert_pattern',
+          payload: incomplete.completionNodes
+        }
+      });
+    }
+    
+    // Missing connections
+    for (const missing of analysis.missingConnections) {
+      suggestions.push({
+        type: 'connection',
+        title: `Connect ${missing.from} to ${missing.to}`,
+        confidence: missing.confidence,
+        action: {
+          type: 'create_connection',
+          payload: missing
+        }
+      });
+    }
+    
+    return suggestions;
+  }
+}
+```
+
+### 4. UI Components
+
+#### Inline Suggestion Hint
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Canvas                                                              │
+│                                                                     │
+│   ┌─────────────┐      ┌─────────────┐                             │
+│   │ TextInput   │──────│ Variable    │                             │
+│   └─────────────┘      └─────────────┘                             │
+│          │                                                          │
+│          ▼                                                          │
+│   ┌─────────────────────────────────────────┐                      │
+│   │ 💡 Add form validation?          [+ Add]│                      │
+│   │    Validate input and show errors       │                      │
+│   └─────────────────────────────────────────┘                      │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Suggestion Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ 💡 Suggestions                                              [×]    │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Based on your current component:                                   │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 🧩 Complete Form Pattern                              [+ Apply] │ │
+│ │    Add validation, error states, and submit handling            │ │
+│ │    Confidence: ████████░░ 85%                                   │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ 📦 Use "Form Input" Prefab                            [+ Apply] │ │
+│ │    Replace with pre-built form input component                  │ │
+│ │    Confidence: ███████░░░ 75%                                   │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ 🔗 Connect to Submit button                           [+ Apply] │ │
+│ │    Wire up the form submission flow                             │ │
+│ │    Confidence: ██████░░░░ 65%                                   │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ [⚙️ Suggestion Settings]                                            │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Pattern Library
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/PatternLibrary.ts
+
+interface PatternDefinition {
+  id: string;
+  name: string;
+  description: string;
+  trigger: PatternTrigger;
+  completion: PatternCompletion;
+  examples: string[];
+}
+
+const PATTERNS: PatternDefinition[] = [
+  {
+    id: 'form-validation',
+    name: 'Form Validation',
+    description: 'Add input validation with error display',
+    trigger: {
+      hasNodes: ['TextInput', 'Variable'],
+      missingNodes: ['Function', 'Condition', 'Text'],
+      nodeCount: { min: 2, max: 5 }
+    },
+    completion: {
+      nodes: [
+        { type: 'Function', name: 'Validate' },
+        { type: 'Condition', name: 'IsValid' },
+        { type: 'Text', name: 'ErrorMessage' }
+      ],
+      connections: [
+        { from: 'TextInput.value', to: 'Validate.input' },
+        { from: 'Validate.result', to: 'IsValid.condition' },
+        { from: 'IsValid.false', to: 'ErrorMessage.visible' }
+      ]
+    }
+  },
+  {
+    id: 'loading-state',
+    name: 'Loading State',
+    description: 'Add loading indicator during async operations',
+    trigger: {
+      hasNodes: ['REST'],
+      missingNodes: ['Condition', 'Group'],
+    },
+    completion: {
+      nodes: [
+        { type: 'Variable', name: 'IsLoading' },
+        { type: 'Group', name: 'LoadingSpinner' },
+        { type: 'Condition', name: 'ShowContent' }
+      ],
+      connections: [
+        { from: 'REST.fetch', to: 'IsLoading.set(true)' },
+        { from: 'REST.success', to: 'IsLoading.set(false)' },
+        { from: 'IsLoading.value', to: 'LoadingSpinner.visible' }
+      ]
+    }
+  },
+  // ... more patterns
+];
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/AiSuggestionService.ts`
+2. `packages/noodl-editor/src/editor/src/services/ai/ContextAnalyzer.ts`
+3. `packages/noodl-editor/src/editor/src/services/ai/SuggestionEngine.ts`
+4. `packages/noodl-editor/src/editor/src/services/ai/PatternLibrary.ts`
+5. `packages/noodl-editor/src/editor/src/services/ai/PrefabMatcher.ts`
+6. `packages/noodl-core-ui/src/components/ai/SuggestionHint/SuggestionHint.tsx`
+7. `packages/noodl-core-ui/src/components/ai/SuggestionPanel/SuggestionPanel.tsx`
+8. `packages/noodl-core-ui/src/components/ai/SuggestionCard/SuggestionCard.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/views/nodegrapheditor.js`
+   - Hook into node selection/creation
+   - Trigger suggestion generation
+   - Display suggestion hints
+
+2. `packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx`
+   - Add suggestion panel toggle
+   - Handle suggestion keybindings
+
+3. `packages/noodl-editor/src/editor/src/models/AiAssistant/AiAssistantModel.ts`
+   - Integrate suggestion service
+   - Share context with AI nodes
+
+4. `packages/noodl-editor/src/editor/src/stores/EditorSettings.ts`
+   - Add suggestion settings
+
+## Implementation Steps
+
+### Phase 1: Context Analysis
+1. Create ContextAnalyzer
+2. Implement pattern detection
+3. Implement connection analysis
+4. Test with various components
+
+### Phase 2: Pattern Library
+1. Define pattern schema
+2. Create initial patterns (10-15)
+3. Implement pattern matching
+4. Test pattern triggers
+
+### Phase 3: Suggestion Engine
+1. Create SuggestionEngine
+2. Implement local suggestions
+3. Implement AI suggestions
+4. Add ranking/filtering
+
+### Phase 4: UI - Inline Hints
+1. Create SuggestionHint component
+2. Position near relevant nodes
+3. Add apply/dismiss actions
+4. Animate appearance
+
+### Phase 5: UI - Panel
+1. Create SuggestionPanel
+2. Create SuggestionCard
+3. Add settings access
+4. Handle keyboard shortcuts
+
+### Phase 6: Feedback & Learning
+1. Track accept/reject
+2. Adjust confidence scores
+3. Improve relevance
+4. Add user settings
+
+## Testing Checklist
+
+- [ ] Patterns detected correctly
+- [ ] Suggestions appear at right time
+- [ ] Apply action works correctly
+- [ ] Dismiss removes suggestion
+- [ ] Inline hint positions correctly
+- [ ] Panel shows all suggestions
+- [ ] Settings persist
+- [ ] Works offline (local patterns)
+- [ ] API suggestions enhance local
+- [ ] Feedback recorded
+- [ ] Performance < 500ms
+
+## Dependencies
+
+- AI-001 (AI Project Scaffolding) - for AI infrastructure
+- COMP-002 (Built-in Prefabs) - for prefab matching
+
+## Blocked By
+
+- AI-001 (for AnthropicClient)
+
+## Blocks
+
+- AI-003 (Natural Language Editing)
+
+## Estimated Effort
+
+- Context analyzer: 4-5 hours
+- Pattern library: 4-5 hours
+- Suggestion engine: 5-6 hours
+- UI inline hints: 3-4 hours
+- UI panel: 4-5 hours
+- Feedback system: 3-4 hours
+- Testing & refinement: 4-5 hours
+- **Total: 27-34 hours**
+
+## Success Criteria
+
+1. Suggestions appear contextually
+2. Pattern completion works smoothly
+3. Prefab matching finds relevant prefabs
+4. Apply action inserts correctly
+5. Users can control suggestions
+6. Suggestions improve over time
+
+## Pattern Categories
+
+### Forms
+- Form validation
+- Form submission
+- Input formatting
+- Error display
+
+### Data
+- Loading states
+- Error handling
+- Refresh/retry
+- Pagination
+
+### Navigation
+- Page transitions
+- Breadcrumbs
+- Tab navigation
+- Modal flows
+
+### Lists
+- Item selection
+- Delete/edit actions
+- Drag and drop
+- Filtering
+
+## Future Enhancements
+
+- Real-time suggestions while typing
+- Team-shared patterns
+- Auto-apply for obvious patterns
+- Pattern creation from selection
+- AI-powered custom patterns

dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-003-natural-language-editing.md

@@ -0,0 +1,565 @@
+# AI-003: Natural Language Editing
+
+## Overview
+
+Enable users to modify their projects using natural language commands. Instead of manually finding and configuring nodes, users can say "make this button blue" or "add a loading spinner when fetching data" and have AI make the changes.
+
+## Context
+
+Current editing workflow:
+1. Select node in canvas
+2. Find property in sidebar
+3. Understand property options
+4. Make change
+5. Repeat for related nodes
+
+Natural language editing:
+1. Select component or node
+2. Describe what you want
+3. AI makes the changes
+4. Review and accept/modify
+
+This is especially powerful for:
+- Styling changes across multiple elements
+- Logic modifications that span nodes
+- Refactoring component structure
+- Complex multi-step changes
+
+### Existing AI Foundation
+
+From `AiAssistantModel.ts`:
+```typescript
+// Chat history for AI interactions
+class ChatHistory {
+  messages: ChatMessage[];
+  add(message: ChatMessage): void;
+}
+
+// AI context per node
+class AiCopilotContext {
+  template: AiTemplate;
+  chatHistory: ChatHistory;
+  node: NodeGraphNode;
+}
+```
+
+## Requirements
+
+### Functional Requirements
+
+1. **Command Input**
+   - Command palette (Cmd+K style)
+   - Inline text input on selection
+   - Voice input (optional)
+   - Recent commands history
+
+2. **Command Understanding**
+   - Style changes: "make it red", "add shadow"
+   - Structure changes: "add a header", "wrap in a card"
+   - Logic changes: "show loading while fetching"
+   - Data changes: "sort by date", "filter active items"
+
+3. **Change Preview**
+   - Show what will change before applying
+   - Highlight affected nodes
+   - Before/after comparison
+   - Explanation of changes
+
+4. **Change Application**
+   - Apply changes atomically
+   - Support undo/redo
+   - Handle errors gracefully
+   - Learn from corrections
+
+5. **Scope Selection**
+   - Selected node(s) only
+   - Current component
+   - Related components
+   - Entire project
+
+### Non-Functional Requirements
+
+- Response time < 3 seconds
+- Changes are reversible
+- Works on any component type
+- Graceful degradation without API
+
+## Technical Approach
+
+### 1. Natural Language Command Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/NaturalLanguageService.ts
+
+interface CommandContext {
+  selection: NodeGraphNode[];
+  component: ComponentModel;
+  project: ProjectModel;
+  recentCommands: Command[];
+}
+
+interface Command {
+  id: string;
+  text: string;
+  timestamp: Date;
+  result: CommandResult;
+}
+
+interface CommandResult {
+  success: boolean;
+  changes: Change[];
+  explanation: string;
+  undoAction?: () => void;
+}
+
+interface Change {
+  type: 'property' | 'node' | 'connection' | 'structure';
+  target: string;
+  before: any;
+  after: any;
+  description: string;
+}
+
+class NaturalLanguageService {
+  private static instance: NaturalLanguageService;
+  
+  // Main API
+  async parseCommand(text: string, context: CommandContext): Promise<ParsedCommand>;
+  async previewChanges(command: ParsedCommand): Promise<ChangePreview>;
+  async applyChanges(preview: ChangePreview): Promise<CommandResult>;
+  async undoCommand(commandId: string): Promise<void>;
+  
+  // Command history
+  getRecentCommands(): Command[];
+  searchCommands(query: string): Command[];
+  
+  // Learning
+  recordCorrection(commandId: string, correction: Change[]): void;
+}
+```
+
+### 2. Command Parser
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/CommandParser.ts
+
+interface ParsedCommand {
+  intent: CommandIntent;
+  targets: CommandTarget[];
+  modifications: Modification[];
+  confidence: number;
+}
+
+enum CommandIntent {
+  STYLE_CHANGE = 'style_change',
+  STRUCTURE_CHANGE = 'structure_change',
+  LOGIC_CHANGE = 'logic_change',
+  DATA_CHANGE = 'data_change',
+  CREATE = 'create',
+  DELETE = 'delete',
+  CONNECT = 'connect',
+  UNKNOWN = 'unknown'
+}
+
+interface CommandTarget {
+  type: 'node' | 'component' | 'property' | 'connection';
+  selector: string;  // How to find it
+  resolved?: any;    // Actual reference
+}
+
+class CommandParser {
+  private patterns: CommandPattern[];
+  
+  async parse(text: string, context: CommandContext): Promise<ParsedCommand> {
+    // 1. Try local pattern matching first (fast)
+    const localMatch = this.matchLocalPatterns(text);
+    if (localMatch.confidence > 0.9) {
+      return localMatch;
+    }
+    
+    // 2. Use AI for complex commands
+    const aiParsed = await this.aiParse(text, context);
+    
+    // 3. Merge and validate
+    return this.mergeAndValidate(localMatch, aiParsed, context);
+  }
+  
+  private matchLocalPatterns(text: string): ParsedCommand {
+    // Pattern: "make [target] [color]"
+    // Pattern: "add [element] to [target]"
+    // Pattern: "connect [source] to [destination]"
+    // etc.
+  }
+  
+  private async aiParse(text: string, context: CommandContext): Promise<ParsedCommand> {
+    const prompt = `Parse this Noodl editing command:
+    Command: "${text}"
+    
+    Current selection: ${context.selection.map(n => n.type.localName).join(', ')}
+    Component: ${context.component.name}
+    
+    Output JSON with: intent, targets, modifications`;
+    
+    const response = await this.anthropicClient.complete(prompt);
+    return JSON.parse(response);
+  }
+}
+```
+
+### 3. Change Generator
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/ChangeGenerator.ts
+
+class ChangeGenerator {
+  // Generate actual changes from parsed command
+  async generateChanges(command: ParsedCommand, context: CommandContext): Promise<Change[]> {
+    const changes: Change[] = [];
+    
+    switch (command.intent) {
+      case CommandIntent.STYLE_CHANGE:
+        changes.push(...this.generateStyleChanges(command, context));
+        break;
+      case CommandIntent.STRUCTURE_CHANGE:
+        changes.push(...await this.generateStructureChanges(command, context));
+        break;
+      case CommandIntent.LOGIC_CHANGE:
+        changes.push(...await this.generateLogicChanges(command, context));
+        break;
+      // ...
+    }
+    
+    return changes;
+  }
+  
+  private generateStyleChanges(command: ParsedCommand, context: CommandContext): Change[] {
+    const changes: Change[] = [];
+    
+    for (const target of command.targets) {
+      const node = this.resolveTarget(target, context);
+      
+      for (const mod of command.modifications) {
+        const propertyName = this.mapToNoodlProperty(mod.property);
+        const newValue = this.parseValue(mod.value, propertyName);
+        
+        changes.push({
+          type: 'property',
+          target: node.id,
+          before: node.parameters[propertyName],
+          after: newValue,
+          description: `Change ${propertyName} to ${newValue}`
+        });
+      }
+    }
+    
+    return changes;
+  }
+  
+  private async generateStructureChanges(
+    command: ParsedCommand, 
+    context: CommandContext
+  ): Promise<Change[]> {
+    // Use AI to generate node structure
+    const prompt = `Generate Noodl node structure for:
+    "${command.modifications.map(m => m.description).join(', ')}"
+    
+    Current context: ${JSON.stringify(context.selection.map(n => n.type.localName))}
+    
+    Output JSON array of nodes to create and connections`;
+    
+    const response = await this.anthropicClient.complete(prompt);
+    return this.parseStructureResponse(response);
+  }
+}
+```
+
+### 4. UI Components
+
+#### Command Palette
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ 🔮 What do you want to do?                                    [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Make the button larger and add a hover effect                  │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ Selected: Button, Text                                             │
+│                                                                     │
+│ Recent:                                                             │
+│ • "Add loading spinner to the form"                                │
+│ • "Make all headers blue"                                          │
+│ • "Connect the submit button to the API"                           │
+│                                                                     │
+│ Examples:                                                           │
+│ • "Wrap this in a card with shadow"                                │
+│ • "Add validation to all inputs"                                   │
+│ • "Show error message when API fails"                              │
+│                                                                     │
+│                                                   [Preview Changes] │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Change Preview
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Preview Changes                                               [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Command: "Make the button larger and add a hover effect"           │
+│                                                                     │
+│ Changes to apply:                                                   │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ ✓ Button                                                        │ │
+│ │   • width: 100px → 150px                                        │ │
+│ │   • height: 40px → 50px                                         │ │
+│ │   • fontSize: 14px → 16px                                       │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ + New: HoverState                                               │ │
+│ │   • scale: 1.05                                                 │ │
+│ │   • transition: 200ms                                           │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ 🤖 "I'll increase the button size by 50% and add a subtle scale   │
+│    effect on hover with a smooth transition."                       │
+│                                                                     │
+│                          [Cancel]  [Modify]  [Apply Changes]       │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Inline Command
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Canvas                                                              │
+│                                                                     │
+│   ┌─────────────────┐                                              │
+│   │    [Button]     │ ← Selected                                   │
+│   │   Click me      │                                              │
+│   └─────────────────┘                                              │
+│          │                                                          │
+│   ┌──────┴──────────────────────────────────────────────┐          │
+│   │ 🔮 Make it red with rounded corners        [Enter] │          │
+│   └─────────────────────────────────────────────────────┘          │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Command Patterns
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/CommandPatterns.ts
+
+const COMMAND_PATTERNS: CommandPattern[] = [
+  // Style patterns
+  {
+    pattern: /make (?:it |this |the )?(.+?) (red|blue|green|...)/i,
+    intent: CommandIntent.STYLE_CHANGE,
+    extract: (match) => ({
+      target: match[1] || 'selection',
+      property: 'backgroundColor',
+      value: match[2]
+    })
+  },
+  {
+    pattern: /(?:set |change )?(?:the )?(.+?) (?:to |=) (.+)/i,
+    intent: CommandIntent.STYLE_CHANGE,
+    extract: (match) => ({
+      property: match[1],
+      value: match[2]
+    })
+  },
+  
+  // Structure patterns
+  {
+    pattern: /add (?:a |an )?(.+?) (?:to |inside |in) (.+)/i,
+    intent: CommandIntent.STRUCTURE_CHANGE,
+    extract: (match) => ({
+      nodeType: match[1],
+      target: match[2]
+    })
+  },
+  {
+    pattern: /wrap (?:it |this |selection )?in (?:a |an )?(.+)/i,
+    intent: CommandIntent.STRUCTURE_CHANGE,
+    extract: (match) => ({
+      action: 'wrap',
+      wrapper: match[1]
+    })
+  },
+  
+  // Logic patterns
+  {
+    pattern: /show (.+?) when (.+)/i,
+    intent: CommandIntent.LOGIC_CHANGE,
+    extract: (match) => ({
+      action: 'conditional_show',
+      target: match[1],
+      condition: match[2]
+    })
+  },
+  {
+    pattern: /connect (.+?) to (.+)/i,
+    intent: CommandIntent.CONNECT,
+    extract: (match) => ({
+      source: match[1],
+      destination: match[2]
+    })
+  }
+];
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/NaturalLanguageService.ts`
+2. `packages/noodl-editor/src/editor/src/services/ai/CommandParser.ts`
+3. `packages/noodl-editor/src/editor/src/services/ai/ChangeGenerator.ts`
+4. `packages/noodl-editor/src/editor/src/services/ai/CommandPatterns.ts`
+5. `packages/noodl-core-ui/src/components/ai/CommandPalette/CommandPalette.tsx`
+6. `packages/noodl-core-ui/src/components/ai/ChangePreview/ChangePreview.tsx`
+7. `packages/noodl-core-ui/src/components/ai/InlineCommand/InlineCommand.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/views/nodegrapheditor.js`
+   - Add command palette trigger (Cmd+K)
+   - Add inline command on selection
+   - Handle change application
+
+2. `packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx`
+   - Add keyboard shortcut handler
+   - Mount command palette
+
+3. `packages/noodl-editor/src/editor/src/models/NodeGraphModel.ts`
+   - Add atomic change application
+   - Support undo for AI changes
+
+## Implementation Steps
+
+### Phase 1: Command Infrastructure
+1. Create NaturalLanguageService
+2. Implement command history
+3. Set up undo/redo support
+
+### Phase 2: Command Parser
+1. Create CommandParser
+2. Define local patterns
+3. Implement AI parsing
+4. Test parsing accuracy
+
+### Phase 3: Change Generator
+1. Create ChangeGenerator
+2. Implement style changes
+3. Implement structure changes
+4. Implement logic changes
+
+### Phase 4: UI - Command Palette
+1. Create CommandPalette component
+2. Add keyboard shortcut
+3. Show recent/examples
+4. Handle input
+
+### Phase 5: UI - Change Preview
+1. Create ChangePreview component
+2. Show before/after
+3. Add explanation
+4. Handle apply/cancel
+
+### Phase 6: UI - Inline Command
+1. Create InlineCommand component
+2. Position near selection
+3. Handle quick commands
+
+### Phase 7: Learning & Improvement
+1. Track command success
+2. Record corrections
+3. Improve pattern matching
+
+## Testing Checklist
+
+- [ ] Style commands work correctly
+- [ ] Structure commands create nodes
+- [ ] Logic commands set up conditions
+- [ ] Preview shows accurate changes
+- [ ] Apply actually makes changes
+- [ ] Undo reverts changes
+- [ ] Keyboard shortcuts work
+- [ ] Recent commands saved
+- [ ] Error handling graceful
+- [ ] Complex commands work
+- [ ] Multi-target commands work
+
+## Dependencies
+
+- AI-001 (AI Project Scaffolding) - for AnthropicClient
+- AI-002 (Component Suggestions) - for context analysis
+
+## Blocked By
+
+- AI-001
+
+## Blocks
+
+- AI-004 (AI Design Assistance)
+
+## Estimated Effort
+
+- Command service: 4-5 hours
+- Command parser: 5-6 hours
+- Change generator: 6-8 hours
+- UI command palette: 4-5 hours
+- UI change preview: 4-5 hours
+- UI inline command: 3-4 hours
+- Testing & refinement: 4-5 hours
+- **Total: 30-38 hours**
+
+## Success Criteria
+
+1. Natural language commands understood
+2. Preview shows accurate changes
+3. Changes applied correctly
+4. Undo/redo works
+5. < 3 second response time
+6. 80%+ command success rate
+
+## Command Examples
+
+### Style Changes
+- "Make it red"
+- "Add a shadow"
+- "Increase font size to 18"
+- "Round the corners"
+- "Make all buttons blue"
+
+### Structure Changes
+- "Add a header"
+- "Wrap in a card"
+- "Add a loading spinner"
+- "Create a sidebar"
+- "Split into two columns"
+
+### Logic Changes
+- "Show loading while fetching"
+- "Hide when empty"
+- "Disable until form is valid"
+- "Navigate to home on click"
+- "Show error message on failure"
+
+### Data Changes
+- "Sort by date"
+- "Filter completed items"
+- "Group by category"
+- "Limit to 10 items"
+
+## Future Enhancements
+
+- Voice input
+- Multi-language support
+- Command macros
+- Batch changes
+- Command sharing
+- Context-aware autocomplete

dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-004-ai-design-assistance.md

@@ -0,0 +1,681 @@
+# AI-004: AI Design Assistance
+
+## Overview
+
+Provide AI-powered design feedback and improvements. Analyze components for design issues (accessibility, consistency, spacing) and suggest or auto-apply fixes. Transform rough layouts into polished designs.
+
+## Context
+
+Many Noodl users are developers or designers who may not have deep expertise in both areas. Common issues include:
+- Inconsistent spacing and alignment
+- Accessibility problems (contrast, touch targets)
+- Missing hover/focus states
+- Unbalanced layouts
+- Poor color combinations
+
+AI Design Assistance provides:
+- Automated design review
+- One-click fixes for common issues
+- Style consistency enforcement
+- Accessibility compliance checking
+- Layout optimization suggestions
+
+## Requirements
+
+### Functional Requirements
+
+1. **Design Analysis**
+   - Scan component/page for issues
+   - Categorize by severity (error, warning, info)
+   - Group by type (spacing, color, typography, etc.)
+   - Provide explanations
+
+2. **Issue Categories**
+   - **Accessibility**: Contrast, touch targets, labels
+   - **Consistency**: Spacing, colors, typography
+   - **Layout**: Alignment, balance, whitespace
+   - **Interaction**: Hover, focus, active states
+   - **Responsiveness**: Breakpoint issues
+
+3. **Fix Application**
+   - One-click fix for individual issues
+   - "Fix all" for category
+   - Preview before applying
+   - Explain what was fixed
+
+4. **Design Improvement**
+   - "Polish this" command
+   - Transform rough layouts
+   - Suggest design alternatives
+   - Apply consistent styling
+
+5. **Design System Enforcement**
+   - Check against project styles
+   - Suggest using existing styles
+   - Identify one-off values
+   - Propose new styles
+
+### Non-Functional Requirements
+
+- Analysis completes in < 5 seconds
+- Fixes don't break functionality
+- Respects existing design intent
+- Works with any component structure
+
+## Technical Approach
+
+### 1. Design Analysis Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/DesignAnalysisService.ts
+
+interface DesignIssue {
+  id: string;
+  type: IssueType;
+  severity: 'error' | 'warning' | 'info';
+  category: IssueCategory;
+  node: NodeGraphNode;
+  property?: string;
+  message: string;
+  explanation: string;
+  fix?: DesignFix;
+}
+
+enum IssueCategory {
+  ACCESSIBILITY = 'accessibility',
+  CONSISTENCY = 'consistency',
+  LAYOUT = 'layout',
+  INTERACTION = 'interaction',
+  RESPONSIVENESS = 'responsiveness'
+}
+
+interface DesignFix {
+  description: string;
+  changes: PropertyChange[];
+  preview?: string;
+}
+
+class DesignAnalysisService {
+  private static instance: DesignAnalysisService;
+  private analyzers: DesignAnalyzer[] = [];
+  
+  // Analysis
+  async analyzeComponent(component: ComponentModel): Promise<DesignIssue[]>;
+  async analyzePage(page: ComponentModel): Promise<DesignIssue[]>;
+  async analyzeProject(project: ProjectModel): Promise<DesignIssue[]>;
+  
+  // Fixes
+  async applyFix(issue: DesignIssue): Promise<void>;
+  async applyAllFixes(issues: DesignIssue[]): Promise<void>;
+  async previewFix(issue: DesignIssue): Promise<FixPreview>;
+  
+  // Polish
+  async polishComponent(component: ComponentModel): Promise<PolishResult>;
+  async suggestImprovements(component: ComponentModel): Promise<Improvement[]>;
+  
+  // Design system
+  async checkDesignSystem(component: ComponentModel): Promise<DesignSystemIssue[]>;
+  async suggestStyles(component: ComponentModel): Promise<StyleSuggestion[]>;
+}
+```
+
+### 2. Design Analyzers
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/analyzers/
+
+// Base analyzer
+interface DesignAnalyzer {
+  name: string;
+  category: IssueCategory;
+  analyze(component: ComponentModel): DesignIssue[];
+}
+
+// Accessibility Analyzer
+class AccessibilityAnalyzer implements DesignAnalyzer {
+  name = 'Accessibility';
+  category = IssueCategory.ACCESSIBILITY;
+  
+  analyze(component: ComponentModel): DesignIssue[] {
+    const issues: DesignIssue[] = [];
+    
+    component.forEachNode(node => {
+      // Check contrast
+      if (this.hasTextAndBackground(node)) {
+        const contrast = this.calculateContrast(
+          node.parameters.color,
+          node.parameters.backgroundColor
+        );
+        if (contrast < 4.5) {
+          issues.push({
+            type: 'low-contrast',
+            severity: contrast < 3 ? 'error' : 'warning',
+            category: IssueCategory.ACCESSIBILITY,
+            node,
+            message: `Low color contrast (${contrast.toFixed(1)}:1)`,
+            explanation: 'WCAG requires 4.5:1 for normal text',
+            fix: {
+              description: 'Adjust colors for better contrast',
+              changes: this.suggestContrastFix(node)
+            }
+          });
+        }
+      }
+      
+      // Check touch targets
+      if (this.isInteractive(node)) {
+        const size = this.getSize(node);
+        if (size.width < 44 || size.height < 44) {
+          issues.push({
+            type: 'small-touch-target',
+            severity: 'warning',
+            category: IssueCategory.ACCESSIBILITY,
+            node,
+            message: 'Touch target too small',
+            explanation: 'Minimum 44x44px recommended for touch',
+            fix: {
+              description: 'Increase size to 44x44px minimum',
+              changes: [
+                { property: 'width', value: Math.max(size.width, 44) },
+                { property: 'height', value: Math.max(size.height, 44) }
+              ]
+            }
+          });
+        }
+      }
+      
+      // Check labels
+      if (this.isFormInput(node) && !this.hasLabel(node)) {
+        issues.push({
+          type: 'missing-label',
+          severity: 'error',
+          category: IssueCategory.ACCESSIBILITY,
+          node,
+          message: 'Form input missing label',
+          explanation: 'Screen readers need labels to identify inputs'
+        });
+      }
+    });
+    
+    return issues;
+  }
+}
+
+// Consistency Analyzer
+class ConsistencyAnalyzer implements DesignAnalyzer {
+  name = 'Consistency';
+  category = IssueCategory.CONSISTENCY;
+  
+  analyze(component: ComponentModel): DesignIssue[] {
+    const issues: DesignIssue[] = [];
+    
+    // Collect all values
+    const spacings = this.collectSpacings(component);
+    const colors = this.collectColors(component);
+    const fontSizes = this.collectFontSizes(component);
+    
+    // Check for one-offs
+    const spacingOneOffs = this.findOneOffs(spacings, SPACING_SCALE);
+    const colorOneOffs = this.findOneOffs(colors, component.colorStyles);
+    const fontOneOffs = this.findOneOffs(fontSizes, FONT_SCALE);
+    
+    // Report issues
+    for (const oneOff of spacingOneOffs) {
+      issues.push({
+        type: 'inconsistent-spacing',
+        severity: 'info',
+        category: IssueCategory.CONSISTENCY,
+        node: oneOff.node,
+        property: oneOff.property,
+        message: `Non-standard spacing: ${oneOff.value}`,
+        explanation: 'Consider using a standard spacing value',
+        fix: {
+          description: `Change to ${oneOff.suggestion}`,
+          changes: [{ property: oneOff.property, value: oneOff.suggestion }]
+        }
+      });
+    }
+    
+    return issues;
+  }
+}
+
+// Layout Analyzer
+class LayoutAnalyzer implements DesignAnalyzer {
+  name = 'Layout';
+  category = IssueCategory.LAYOUT;
+  
+  analyze(component: ComponentModel): DesignIssue[] {
+    const issues: DesignIssue[] = [];
+    
+    // Check alignment
+    const alignmentIssues = this.checkAlignment(component);
+    issues.push(...alignmentIssues);
+    
+    // Check whitespace balance
+    const whitespaceIssues = this.checkWhitespace(component);
+    issues.push(...whitespaceIssues);
+    
+    // Check visual hierarchy
+    const hierarchyIssues = this.checkHierarchy(component);
+    issues.push(...hierarchyIssues);
+    
+    return issues;
+  }
+}
+
+// Interaction Analyzer
+class InteractionAnalyzer implements DesignAnalyzer {
+  name = 'Interaction';
+  category = IssueCategory.INTERACTION;
+  
+  analyze(component: ComponentModel): DesignIssue[] {
+    const issues: DesignIssue[] = [];
+    
+    component.forEachNode(node => {
+      if (this.isInteractive(node)) {
+        // Check hover state
+        if (!this.hasHoverState(node)) {
+          issues.push({
+            type: 'missing-hover',
+            severity: 'warning',
+            category: IssueCategory.INTERACTION,
+            node,
+            message: 'Missing hover state',
+            explanation: 'Interactive elements should have hover feedback',
+            fix: {
+              description: 'Add subtle hover effect',
+              changes: this.generateHoverState(node)
+            }
+          });
+        }
+        
+        // Check focus state
+        if (!this.hasFocusState(node)) {
+          issues.push({
+            type: 'missing-focus',
+            severity: 'error',
+            category: IssueCategory.INTERACTION,
+            node,
+            message: 'Missing focus state',
+            explanation: 'Keyboard users need visible focus indicators'
+          });
+        }
+      }
+    });
+    
+    return issues;
+  }
+}
+```
+
+### 3. AI Polish Engine
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/PolishEngine.ts
+
+interface PolishResult {
+  before: ComponentSnapshot;
+  after: ComponentSnapshot;
+  changes: Change[];
+  explanation: string;
+}
+
+class PolishEngine {
+  async polishComponent(component: ComponentModel): Promise<PolishResult> {
+    // 1. Analyze current state
+    const issues = await DesignAnalysisService.instance.analyzeComponent(component);
+    
+    // 2. Apply automatic fixes
+    const autoFixable = issues.filter(i => i.fix && i.severity !== 'error');
+    for (const issue of autoFixable) {
+      await this.applyFix(issue);
+    }
+    
+    // 3. Use AI for creative improvements
+    const aiImprovements = await this.getAiImprovements(component);
+    
+    // 4. Apply AI suggestions
+    for (const improvement of aiImprovements) {
+      await this.applyImprovement(improvement);
+    }
+    
+    return {
+      before: this.originalSnapshot,
+      after: this.currentSnapshot,
+      changes: this.recordedChanges,
+      explanation: this.generateExplanation()
+    };
+  }
+  
+  private async getAiImprovements(component: ComponentModel): Promise<Improvement[]> {
+    const prompt = `Analyze this Noodl component and suggest design improvements:
+    
+    Component structure:
+    ${this.serializeComponent(component)}
+    
+    Current styles:
+    ${this.serializeStyles(component)}
+    
+    Suggest improvements for:
+    1. Visual hierarchy
+    2. Whitespace and breathing room
+    3. Color harmony
+    4. Typography refinement
+    5. Micro-interactions
+    
+    Output JSON array of improvements with property changes.`;
+    
+    const response = await this.anthropicClient.complete(prompt);
+    return JSON.parse(response);
+  }
+}
+```
+
+### 4. UI Components
+
+#### Design Review Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Design Review                                               [×]    │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ 📊 Overview                                                         │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 🔴 2 Errors   🟡 5 Warnings   🔵 3 Info                         │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ 🔴 ERRORS                                           [Fix All (2)]  │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ ♿ Low color contrast on "Submit" button                  [Fix] │ │
+│ │   Contrast ratio 2.1:1, needs 4.5:1                             │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ ♿ Missing label on email input                           [Fix] │ │
+│ │   Screen readers cannot identify this input                      │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ 🟡 WARNINGS                                         [Fix All (5)]  │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 📐 Inconsistent spacing (12px vs 16px scale)             [Fix] │ │
+│ │ 👆 Touch target too small (32x32px)                      [Fix] │ │
+│ │ ✨ Missing hover state on buttons                        [Fix] │ │
+│ │ ...                                                              │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│                                    [Analyze Again]  [✨ Polish All] │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Polish Preview
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ ✨ Polish Preview                                             [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ BEFORE                           AFTER                              │
+│ ┌────────────────────────┐      ┌────────────────────────┐         │
+│ │  ┌──────────────────┐  │      │  ┌──────────────────┐  │         │
+│ │  │   Cramped card   │  │      │  │                  │  │         │
+│ │  │   No shadow      │  │  →   │  │   Polished card  │  │         │
+│ │  │   Basic button   │  │      │  │   with shadow    │  │         │
+│ │  └──────────────────┘  │      │  │   and spacing    │  │         │
+│ │                        │      │  └──────────────────┘  │         │
+│ └────────────────────────┘      └────────────────────────┘         │
+│                                                                     │
+│ Changes Applied:                                                    │
+│ • Added 24px padding to card                                       │
+│ • Added subtle shadow (0 2px 8px rgba(0,0,0,0.1))                 │
+│ • Increased button padding (12px 24px)                             │
+│ • Added hover state with 0.95 scale                                │
+│ • Adjusted border radius to 12px                                   │
+│                                                                     │
+│                                         [Revert]  [Apply Polish]   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5. Design Rules Engine
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/ai/DesignRules.ts
+
+interface DesignRule {
+  id: string;
+  name: string;
+  description: string;
+  category: IssueCategory;
+  severity: 'error' | 'warning' | 'info';
+  check: (node: NodeGraphNode, context: DesignContext) => RuleViolation | null;
+  fix?: (violation: RuleViolation) => PropertyChange[];
+}
+
+const DESIGN_RULES: DesignRule[] = [
+  // Accessibility
+  {
+    id: 'min-contrast',
+    name: 'Minimum Color Contrast',
+    description: 'Text must have sufficient contrast with background',
+    category: IssueCategory.ACCESSIBILITY,
+    severity: 'error',
+    check: (node, ctx) => {
+      if (!hasTextAndBackground(node)) return null;
+      const contrast = calculateContrast(node.parameters.color, node.parameters.backgroundColor);
+      if (contrast < 4.5) {
+        return { node, contrast, required: 4.5 };
+      }
+      return null;
+    },
+    fix: (violation) => suggestContrastFix(violation.node, violation.required)
+  },
+  
+  {
+    id: 'min-touch-target',
+    name: 'Minimum Touch Target Size',
+    description: 'Interactive elements must be at least 44x44px',
+    category: IssueCategory.ACCESSIBILITY,
+    severity: 'warning',
+    check: (node) => {
+      if (!isInteractive(node)) return null;
+      const size = getSize(node);
+      if (size.width < 44 || size.height < 44) {
+        return { node, size, required: { width: 44, height: 44 } };
+      }
+      return null;
+    },
+    fix: (violation) => [
+      { property: 'width', value: Math.max(violation.size.width, 44) },
+      { property: 'height', value: Math.max(violation.size.height, 44) }
+    ]
+  },
+  
+  // Consistency
+  {
+    id: 'spacing-scale',
+    name: 'Use Spacing Scale',
+    description: 'Spacing should follow the design system scale',
+    category: IssueCategory.CONSISTENCY,
+    severity: 'info',
+    check: (node) => {
+      const spacing = getSpacingValues(node);
+      const nonStandard = spacing.filter(s => !SPACING_SCALE.includes(s));
+      if (nonStandard.length > 0) {
+        return { node, nonStandard, scale: SPACING_SCALE };
+      }
+      return null;
+    },
+    fix: (violation) => violation.nonStandard.map(s => ({
+      property: s.property,
+      value: findClosest(s.value, SPACING_SCALE)
+    }))
+  },
+  
+  // Interaction
+  {
+    id: 'hover-state',
+    name: 'Interactive Hover State',
+    description: 'Interactive elements should have hover feedback',
+    category: IssueCategory.INTERACTION,
+    severity: 'warning',
+    check: (node) => {
+      if (isInteractive(node) && !hasHoverState(node)) {
+        return { node };
+      }
+      return null;
+    },
+    fix: (violation) => generateDefaultHoverState(violation.node)
+  },
+  
+  // ... more rules
+];
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/DesignAnalysisService.ts`
+2. `packages/noodl-editor/src/editor/src/services/ai/analyzers/AccessibilityAnalyzer.ts`
+3. `packages/noodl-editor/src/editor/src/services/ai/analyzers/ConsistencyAnalyzer.ts`
+4. `packages/noodl-editor/src/editor/src/services/ai/analyzers/LayoutAnalyzer.ts`
+5. `packages/noodl-editor/src/editor/src/services/ai/analyzers/InteractionAnalyzer.ts`
+6. `packages/noodl-editor/src/editor/src/services/ai/PolishEngine.ts`
+7. `packages/noodl-editor/src/editor/src/services/ai/DesignRules.ts`
+8. `packages/noodl-core-ui/src/components/ai/DesignReviewPanel/DesignReviewPanel.tsx`
+9. `packages/noodl-core-ui/src/components/ai/DesignIssueCard/DesignIssueCard.tsx`
+10. `packages/noodl-core-ui/src/components/ai/PolishPreview/PolishPreview.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx`
+   - Add Design Review panel toggle
+   - Add menu option
+
+2. `packages/noodl-editor/src/editor/src/views/panels/propertiespanel/`
+   - Add issue indicators on properties
+   - Quick fix buttons
+
+3. `packages/noodl-editor/src/editor/src/views/nodegrapheditor.js`
+   - Highlight nodes with issues
+   - Add "Polish" context menu
+
+## Implementation Steps
+
+### Phase 1: Analysis Infrastructure
+1. Create DesignAnalysisService
+2. Define issue types and categories
+3. Create analyzer base class
+4. Implement fix application
+
+### Phase 2: Core Analyzers
+1. Implement AccessibilityAnalyzer
+2. Implement ConsistencyAnalyzer
+3. Implement LayoutAnalyzer
+4. Implement InteractionAnalyzer
+
+### Phase 3: Polish Engine
+1. Create PolishEngine
+2. Implement auto-fix application
+3. Add AI improvement suggestions
+4. Generate explanations
+
+### Phase 4: UI - Review Panel
+1. Create DesignReviewPanel
+2. Create DesignIssueCard
+3. Group issues by category
+4. Add fix buttons
+
+### Phase 5: UI - Polish Preview
+1. Create PolishPreview
+2. Show before/after
+3. List changes
+4. Apply/revert actions
+
+### Phase 6: Integration
+1. Add to editor menus
+2. Highlight issues on canvas
+3. Add keyboard shortcuts
+
+## Testing Checklist
+
+- [ ] Accessibility issues detected
+- [ ] Contrast calculation accurate
+- [ ] Touch target check works
+- [ ] Consistency issues found
+- [ ] Fixes don't break layout
+- [ ] Polish improves design
+- [ ] Preview accurate
+- [ ] Undo works
+- [ ] Performance acceptable
+- [ ] Works on all component types
+
+## Dependencies
+
+- AI-001 (AI Project Scaffolding) - for AnthropicClient
+- AI-003 (Natural Language Editing) - for change application
+
+## Blocked By
+
+- AI-001
+
+## Blocks
+
+- None (final task in AI series)
+
+## Estimated Effort
+
+- Analysis service: 4-5 hours
+- Accessibility analyzer: 4-5 hours
+- Consistency analyzer: 3-4 hours
+- Layout analyzer: 3-4 hours
+- Interaction analyzer: 3-4 hours
+- Polish engine: 5-6 hours
+- UI review panel: 4-5 hours
+- UI polish preview: 3-4 hours
+- Integration: 3-4 hours
+- **Total: 32-41 hours**
+
+## Success Criteria
+
+1. Issues detected accurately
+2. Fixes don't break functionality
+3. Polish improves design quality
+4. Accessibility issues caught
+5. One-click fixes work
+6. Preview shows accurate changes
+
+## Design Rules Categories
+
+### Accessibility (WCAG)
+- Color contrast (4.5:1 text, 3:1 large)
+- Touch targets (44x44px)
+- Focus indicators
+- Label associations
+- Alt text for images
+
+### Consistency
+- Spacing scale adherence
+- Color from palette
+- Typography scale
+- Border radius consistency
+- Shadow consistency
+
+### Layout
+- Alignment on grid
+- Balanced whitespace
+- Visual hierarchy
+- Content grouping
+
+### Interaction
+- Hover states
+- Focus states
+- Active states
+- Loading states
+- Error states
+
+## Future Enhancements
+
+- Design system integration
+- Custom rule creation
+- Team design standards
+- A/B testing suggestions
+- Animation review
+- Performance impact analysis

dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-overview.md

@@ -0,0 +1,425 @@
+# AI Series: AI-Powered Development
+
+## Overview
+
+The AI series transforms OpenNoodl from a visual development tool into an intelligent development partner. Users can describe what they want to build, receive contextual suggestions, edit with natural language, and get automatic design feedback—all powered by Claude AI.
+
+## Target Environment
+
+- **Editor**: React 19 version only
+- **Runtime**: Not affected
+- **API**: Anthropic Claude API
+- **Fallback**: Graceful degradation without API
+
+## Task Dependency Graph
+
+```
+AI-001 (Project Scaffolding)
+    │
+    ├──────────────────────────┐
+    ↓                          ↓
+AI-002 (Suggestions)     AI-003 (NL Editing)
+    │                          │
+    └──────────┬───────────────┘
+               ↓
+        AI-004 (Design Assistance)
+```
+
+## Task Summary
+
+| Task ID | Name | Est. Hours | Priority |
+|---------|------|------------|----------|
+| AI-001 | AI Project Scaffolding | 32-41 | Critical |
+| AI-002 | AI Component Suggestions | 27-34 | High |
+| AI-003 | Natural Language Editing | 30-38 | High |
+| AI-004 | AI Design Assistance | 32-41 | Medium |
+
+**Total Estimated: 121-154 hours**
+
+## Implementation Order
+
+### Phase 1: Foundation (Weeks 1-3)
+1. **AI-001** - Project scaffolding with AI
+   - Establishes Anthropic API integration
+   - Creates core AI services
+   - Delivers immediate user value
+
+### Phase 2: In-Editor Intelligence (Weeks 4-6)
+2. **AI-002** - Component suggestions
+   - Context-aware recommendations
+   - Pattern library foundation
+3. **AI-003** - Natural language editing
+   - Command palette for AI edits
+   - Change preview and application
+
+### Phase 3: Design Quality (Weeks 7-8)
+4. **AI-004** - Design assistance
+   - Automated design review
+   - Polish and improvements
+
+## Existing Infrastructure
+
+### AiAssistantModel
+
+```typescript
+// Current AI node system
+class AiAssistantModel {
+  templates: AiTemplate[];  // REST, Function, Form Validation, etc.
+  
+  createNode(templateId, parentModel, pos);
+  createContext(node);
+  send(context);
+}
+```
+
+### AI Templates
+
+```typescript
+docsTemplates = [
+  { label: 'REST API', template: 'rest' },
+  { label: 'Form Validation', template: 'function-form-validation' },
+  { label: 'AI Function', template: 'function' },
+  { label: 'Write to database', template: 'function-crud' }
+];
+```
+
+### Template Registry
+
+```typescript
+// Project template system
+templateRegistry.list({});  // List available templates
+templateRegistry.download({ templateUrl });  // Download template
+```
+
+### LocalProjectsModel
+
+```typescript
+// Project creation
+LocalProjectsModel.newProject(callback, {
+  name,
+  path,
+  projectTemplate
+});
+```
+
+## New Architecture
+
+### Core AI Services
+
+```
+packages/noodl-editor/src/editor/src/services/
+├── ai/
+│   ├── AnthropicClient.ts       # Claude API wrapper
+│   ├── prompts/                  # Prompt templates
+│   │   ├── scaffolding.ts
+│   │   ├── suggestions.ts
+│   │   └── editing.ts
+│   ├── ContextAnalyzer.ts       # Component analysis
+│   ├── PatternLibrary.ts        # Known patterns
+│   ├── CommandParser.ts         # NL command parsing
+│   ├── ChangeGenerator.ts       # Generate changes
+│   └── analyzers/               # Design analyzers
+│       ├── AccessibilityAnalyzer.ts
+│       ├── ConsistencyAnalyzer.ts
+│       └── ...
+├── AiScaffoldingService.ts
+├── AiSuggestionService.ts
+├── NaturalLanguageService.ts
+└── DesignAnalysisService.ts
+```
+
+### Service Hierarchy
+
+| Service | Purpose |
+|---------|---------|
+| AnthropicClient | Claude API communication |
+| AiScaffoldingService | Project generation |
+| AiSuggestionService | Context-aware suggestions |
+| NaturalLanguageService | Command parsing & execution |
+| DesignAnalysisService | Design review & fixes |
+
+## API Integration
+
+### Anthropic Client
+
+```typescript
+class AnthropicClient {
+  private apiKey: string;
+  private model = 'claude-sonnet-4-20250514';
+  
+  async complete(prompt: string, options?: CompletionOptions): Promise<string>;
+  async chat(messages: Message[]): Promise<Message>;
+  async stream(prompt: string, onChunk: (chunk: string) => void): Promise<void>;
+}
+```
+
+### API Key Management
+
+```typescript
+// Settings storage
+interface AiSettings {
+  apiKey: string;  // Stored securely
+  enabled: boolean;
+  features: {
+    scaffolding: boolean;
+    suggestions: boolean;
+    naturalLanguage: boolean;
+    designAssistance: boolean;
+  };
+}
+```
+
+## Key User Flows
+
+### 1. Create Project from Description
+
+```
+User opens "New Project"
+    ↓
+Selects "Describe your project"
+    ↓
+Types: "A task management app with kanban board"
+    ↓
+AI generates scaffold
+    ↓
+User previews & refines via chat
+    ↓
+Creates actual project
+```
+
+### 2. Get Suggestions While Building
+
+```
+User adds TextInput node
+    ↓
+System detects incomplete form pattern
+    ↓
+Shows suggestion: "Add form validation?"
+    ↓
+User clicks "Apply"
+    ↓
+Validation nodes added automatically
+```
+
+### 3. Edit with Natural Language
+
+```
+User selects Button node
+    ↓
+Presses Cmd+K
+    ↓
+Types: "Make it larger with a hover effect"
+    ↓
+Preview shows changes
+    ↓
+User clicks "Apply"
+```
+
+### 4. Design Review & Polish
+
+```
+User opens Design Review panel
+    ↓
+AI analyzes component
+    ↓
+Shows: "2 accessibility issues, 3 warnings"
+    ↓
+User clicks "Fix All" or "Polish"
+    ↓
+Changes applied automatically
+```
+
+## UI Components to Create
+
+| Component | Package | Purpose |
+|-----------|---------|---------|
+| AiProjectModal | noodl-core-ui | Project scaffolding UI |
+| ScaffoldPreview | noodl-core-ui | Preview generated structure |
+| SuggestionHint | noodl-core-ui | Inline suggestion display |
+| SuggestionPanel | noodl-core-ui | Full suggestions list |
+| CommandPalette | noodl-core-ui | NL command input |
+| ChangePreview | noodl-core-ui | Show pending changes |
+| DesignReviewPanel | noodl-core-ui | Design issues list |
+| PolishPreview | noodl-core-ui | Before/after comparison |
+
+## Prompt Engineering
+
+### System Prompts
+
+```typescript
+// Scaffolding
+const SCAFFOLD_SYSTEM = `You are an expert Noodl application architect.
+Generate detailed project scaffolds for visual low-code applications.
+Consider: UX flow, data management, reusability, performance.`;
+
+// Suggestions
+const SUGGESTION_SYSTEM = `You analyze Noodl components and suggest
+improvements. Focus on: pattern completion, best practices, 
+common UI patterns, data handling.`;
+
+// Natural Language
+const NL_SYSTEM = `You parse natural language commands for editing
+Noodl visual components. Output structured changes that can be
+applied to the node graph.`;
+
+// Design
+const DESIGN_SYSTEM = `You are a design expert analyzing Noodl
+components for accessibility, consistency, and visual quality.
+Suggest concrete property changes.`;
+```
+
+### Context Serialization
+
+```typescript
+// Serialize component for AI context
+function serializeForAi(component: ComponentModel): string {
+  return JSON.stringify({
+    name: component.name,
+    nodes: component.nodes.map(n => ({
+      type: n.type.localName,
+      id: n.id,
+      parameters: n.parameters,
+      children: n.children?.map(c => c.id)
+    })),
+    connections: component.connections.map(c => ({
+      from: `${c.sourceNode.id}.${c.sourcePort}`,
+      to: `${c.targetNode.id}.${c.targetPort}`
+    }))
+  }, null, 2);
+}
+```
+
+## Performance Considerations
+
+### Token Management
+- Keep prompts concise
+- Truncate large components
+- Cache common patterns locally
+- Batch similar requests
+
+### Response Times
+- Scaffold generation: < 30 seconds
+- Suggestions: < 500ms (local), < 3s (AI)
+- NL parsing: < 3 seconds
+- Design analysis: < 5 seconds
+
+### Offline Support
+- Local pattern library for suggestions
+- Cached design rules
+- Basic NL patterns
+- Graceful degradation
+
+## Settings & Configuration
+
+```typescript
+interface AiConfiguration {
+  // API
+  apiKey: string;
+  apiEndpoint: string;  // For custom/proxy
+  model: string;
+  
+  // Features
+  features: {
+    scaffolding: boolean;
+    suggestions: boolean;
+    naturalLanguage: boolean;
+    designAssistance: boolean;
+  };
+  
+  // Suggestions
+  suggestions: {
+    enabled: boolean;
+    frequency: 'always' | 'sometimes' | 'manual';
+    showInline: boolean;
+    showPanel: boolean;
+  };
+  
+  // Design
+  design: {
+    autoAnalyze: boolean;
+    showInCanvas: boolean;
+    strictAccessibility: boolean;
+  };
+}
+```
+
+## Testing Strategy
+
+### Unit Tests
+- Prompt generation
+- Response parsing
+- Pattern matching
+- Change generation
+
+### Integration Tests
+- Full scaffold flow
+- Suggestion pipeline
+- NL command execution
+- Design analysis
+
+### Manual Testing
+- Various project descriptions
+- Edge case components
+- Complex NL commands
+- Accessibility scenarios
+
+## Cline Usage Notes
+
+### Before Starting Each Task
+
+1. Read existing AI infrastructure:
+   - `AiAssistantModel.ts`
+   - Related AI components in `noodl-core-ui`
+2. Understand prompt patterns from existing templates
+3. Review how changes are applied to node graph
+
+### Key Integration Points
+
+1. **Node Graph**: All changes go through `NodeGraphModel`
+2. **Undo/Redo**: Must integrate with `UndoManager`
+3. **Project Model**: Scaffolds create full project structure
+4. **Settings**: Store in `EditorSettings`
+
+### API Key Handling
+
+- Never log API keys
+- Store securely (electron safeStorage)
+- Clear from memory after use
+- Support environment variable override
+
+## Success Criteria (Series Complete)
+
+1. ✅ Users can create projects from descriptions
+2. ✅ Contextual suggestions appear while building
+3. ✅ Natural language commands modify components
+4. ✅ Design issues automatically detected
+5. ✅ One-click fixes for common issues
+6. ✅ Works offline with reduced functionality
+
+## Future Work (Post-AI Series)
+
+The AI series enables:
+- **Voice Control**: Voice input for commands
+- **Image to Project**: Screenshot to scaffold
+- **Code Generation**: Export to React/Vue
+- **AI Debugging**: Debug logic issues
+- **Performance Optimization**: AI-suggested optimizations
+
+## Files in This Series
+
+- `AI-001-ai-project-scaffolding.md`
+- `AI-002-ai-component-suggestions.md`
+- `AI-003-natural-language-editing.md`
+- `AI-004-ai-design-assistance.md`
+- `AI-OVERVIEW.md` (this file)
+
+## External Dependencies
+
+### Anthropic API
+- Model: claude-sonnet-4-20250514 (default)
+- Rate limits: Handle gracefully
+- Costs: Optimize token usage
+
+### No Additional Packages Required
+- Uses existing HTTP infrastructure
+- No additional AI libraries needed

dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-001-one-click-deploy.md

@@ -0,0 +1,579 @@
+# DEPLOY-001: One-Click Deploy Integrations
+
+## Overview
+
+Add one-click deployment to popular hosting platforms (Netlify, Vercel, GitHub Pages). Users can deploy their frontend directly from the editor without manual file handling or CLI tools.
+
+## Context
+
+Currently, deployment requires:
+1. Deploy to local folder
+2. Manually upload to hosting platform
+3. Configure hosting settings separately
+4. Repeat for every deployment
+
+This friction discourages frequent deployments and makes it harder for non-technical users to share their work.
+
+### Existing Infrastructure
+
+From `deployer.ts`:
+```typescript
+export async function deployToFolder({
+  project,
+  direntry,
+  environment,
+  baseUrl,
+  envVariables,
+  runtimeType = 'deploy'
+}: DeployToFolderOptions)
+```
+
+From `compilation.ts`:
+```typescript
+class Compilation {
+  deployToFolder(direntry, options): Promise<void>;
+  // Build scripts for pre/post deploy
+}
+```
+
+From `DeployToFolderTab.tsx`:
+- Current UI for folder selection
+- Environment selection dropdown
+
+## Requirements
+
+### Functional Requirements
+
+1. **Platform Integrations**
+   - Netlify (OAuth + API)
+   - Vercel (OAuth + API)
+   - GitHub Pages (via GitHub API)
+   - Cloudflare Pages (OAuth + API)
+
+2. **Deploy Flow**
+   - One-click deploy from editor
+   - Platform selection dropdown
+   - Site/project selection or creation
+   - Environment variables configuration
+   - Deploy progress indication
+
+3. **Site Management**
+   - List user's sites on each platform
+   - Create new site from editor
+   - Link project to existing site
+   - View deployment history
+
+4. **Configuration**
+   - Environment variables per platform
+   - Custom domain display
+   - Build settings (if needed)
+   - Deploy hooks
+
+5. **Status & History**
+   - Deploy status in editor
+   - Link to live site
+   - Deployment history
+   - Rollback option (if supported)
+
+### Non-Functional Requirements
+
+- Deploy completes in < 2 minutes
+- Works with existing deploy-to-folder logic
+- Secure token storage
+- Clear error messages
+
+## Technical Approach
+
+### 1. Deploy Service Architecture
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/DeployService.ts
+
+interface DeployTarget {
+  id: string;
+  name: string;
+  platform: DeployPlatform;
+  siteId: string;
+  siteName: string;
+  url: string;
+  customDomain?: string;
+  lastDeployedAt?: string;
+  envVariables?: Record<string, string>;
+}
+
+enum DeployPlatform {
+  NETLIFY = 'netlify',
+  VERCEL = 'vercel',
+  GITHUB_PAGES = 'github_pages',
+  CLOUDFLARE = 'cloudflare',
+  LOCAL_FOLDER = 'local_folder'
+}
+
+interface DeployResult {
+  success: boolean;
+  deployId: string;
+  url: string;
+  buildTime: number;
+  error?: string;
+}
+
+class DeployService {
+  private static instance: DeployService;
+  private providers: Map<DeployPlatform, DeployProvider> = new Map();
+  
+  // Provider management
+  registerProvider(provider: DeployProvider): void;
+  getProvider(platform: DeployPlatform): DeployProvider;
+  
+  // Authentication
+  async authenticate(platform: DeployPlatform): Promise<void>;
+  async disconnect(platform: DeployPlatform): Promise<void>;
+  isAuthenticated(platform: DeployPlatform): boolean;
+  
+  // Site management
+  async listSites(platform: DeployPlatform): Promise<Site[]>;
+  async createSite(platform: DeployPlatform, name: string): Promise<Site>;
+  async linkSite(project: ProjectModel, target: DeployTarget): Promise<void>;
+  
+  // Deployment
+  async deploy(project: ProjectModel, target: DeployTarget): Promise<DeployResult>;
+  async getDeployStatus(deployId: string): Promise<DeployStatus>;
+  async getDeployHistory(target: DeployTarget): Promise<Deployment[]>;
+}
+```
+
+### 2. Deploy Provider Interface
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/deploy/DeployProvider.ts
+
+interface DeployProvider {
+  readonly platform: DeployPlatform;
+  readonly name: string;
+  readonly icon: string;
+  
+  // Authentication
+  authenticate(): Promise<AuthResult>;
+  disconnect(): Promise<void>;
+  isAuthenticated(): boolean;
+  getUser(): Promise<User | null>;
+  
+  // Sites
+  listSites(): Promise<Site[]>;
+  createSite(name: string, options?: CreateSiteOptions): Promise<Site>;
+  deleteSite(siteId: string): Promise<void>;
+  
+  // Deployment
+  deploy(siteId: string, files: DeployFiles): Promise<DeployResult>;
+  getDeployStatus(deployId: string): Promise<DeployStatus>;
+  getDeployHistory(siteId: string): Promise<Deployment[]>;
+  cancelDeploy(deployId: string): Promise<void>;
+  
+  // Configuration
+  getEnvVariables(siteId: string): Promise<Record<string, string>>;
+  setEnvVariables(siteId: string, vars: Record<string, string>): Promise<void>;
+}
+```
+
+### 3. Netlify Provider
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/deploy/providers/NetlifyProvider.ts
+
+class NetlifyProvider implements DeployProvider {
+  platform = DeployPlatform.NETLIFY;
+  name = 'Netlify';
+  icon = 'netlify-icon.svg';
+  
+  private clientId = 'YOUR_NETLIFY_CLIENT_ID';
+  private redirectUri = 'noodl://netlify-callback';
+  private token: string | null = null;
+  
+  async authenticate(): Promise<AuthResult> {
+    // OAuth flow
+    const authUrl = `https://app.netlify.com/authorize?` +
+      `client_id=${this.clientId}&` +
+      `response_type=token&` +
+      `redirect_uri=${encodeURIComponent(this.redirectUri)}`;
+    
+    // Open in browser, handle callback via deep link
+    const token = await this.handleOAuthCallback(authUrl);
+    this.token = token;
+    
+    await this.storeToken(token);
+    return { success: true };
+  }
+  
+  async listSites(): Promise<Site[]> {
+    const response = await fetch('https://api.netlify.com/api/v1/sites', {
+      headers: { Authorization: `Bearer ${this.token}` }
+    });
+    
+    const sites = await response.json();
+    return sites.map(s => ({
+      id: s.id,
+      name: s.name,
+      url: s.ssl_url || s.url,
+      customDomain: s.custom_domain,
+      updatedAt: s.updated_at
+    }));
+  }
+  
+  async createSite(name: string): Promise<Site> {
+    const response = await fetch('https://api.netlify.com/api/v1/sites', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ name })
+    });
+    
+    const site = await response.json();
+    return {
+      id: site.id,
+      name: site.name,
+      url: site.ssl_url || site.url
+    };
+  }
+  
+  async deploy(siteId: string, files: DeployFiles): Promise<DeployResult> {
+    // Create deploy
+    const deploy = await this.createDeploy(siteId);
+    
+    // Upload files using Netlify's digest-based upload
+    const fileHashes = await this.calculateHashes(files);
+    const required = await this.getRequiredFiles(deploy.id, fileHashes);
+    
+    for (const file of required) {
+      await this.uploadFile(deploy.id, file);
+    }
+    
+    // Finalize deploy
+    return await this.finalizeDeploy(deploy.id);
+  }
+}
+```
+
+### 4. Vercel Provider
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/deploy/providers/VercelProvider.ts
+
+class VercelProvider implements DeployProvider {
+  platform = DeployPlatform.VERCEL;
+  name = 'Vercel';
+  icon = 'vercel-icon.svg';
+  
+  private clientId = 'YOUR_VERCEL_CLIENT_ID';
+  private token: string | null = null;
+  
+  async authenticate(): Promise<AuthResult> {
+    // Vercel uses OAuth 2.0
+    const state = this.generateState();
+    const authUrl = `https://vercel.com/integrations/noodl/new?` +
+      `state=${state}`;
+    
+    const token = await this.handleOAuthCallback(authUrl);
+    this.token = token;
+    return { success: true };
+  }
+  
+  async deploy(projectId: string, files: DeployFiles): Promise<DeployResult> {
+    // Vercel deployment API
+    const deployment = await fetch('https://api.vercel.com/v13/deployments', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        name: projectId,
+        files: await this.prepareFiles(files),
+        projectSettings: {
+          framework: null  // Static site
+        }
+      })
+    });
+    
+    const result = await deployment.json();
+    return {
+      success: true,
+      deployId: result.id,
+      url: `https://${result.url}`,
+      buildTime: 0
+    };
+  }
+}
+```
+
+### 5. GitHub Pages Provider
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/deploy/providers/GitHubPagesProvider.ts
+
+class GitHubPagesProvider implements DeployProvider {
+  platform = DeployPlatform.GITHUB_PAGES;
+  name = 'GitHub Pages';
+  icon = 'github-icon.svg';
+  
+  async authenticate(): Promise<AuthResult> {
+    // Reuse GitHub OAuth from GIT-001
+    const githubService = GitHubOAuthService.instance;
+    if (!githubService.isAuthenticated()) {
+      await githubService.authenticate();
+    }
+    return { success: true };
+  }
+  
+  async listSites(): Promise<Site[]> {
+    // List repos with GitHub Pages enabled
+    const repos = await this.githubApi.listRepos();
+    const pagesRepos = repos.filter(r => r.has_pages);
+    
+    return pagesRepos.map(r => ({
+      id: r.full_name,
+      name: r.name,
+      url: `https://${r.owner.login}.github.io/${r.name}`,
+      repo: r.full_name
+    }));
+  }
+  
+  async deploy(repoFullName: string, files: DeployFiles): Promise<DeployResult> {
+    const [owner, repo] = repoFullName.split('/');
+    
+    // Create/update gh-pages branch
+    const branch = 'gh-pages';
+    
+    // Get current tree (if exists)
+    let baseTree: string | null = null;
+    try {
+      const ref = await this.githubApi.getRef(owner, repo, `heads/${branch}`);
+      const commit = await this.githubApi.getCommit(owner, repo, ref.object.sha);
+      baseTree = commit.tree.sha;
+    } catch {
+      // Branch doesn't exist yet
+    }
+    
+    // Create blobs for all files
+    const tree = await this.createTree(owner, repo, files, baseTree);
+    
+    // Create commit
+    const commit = await this.githubApi.createCommit(owner, repo, {
+      message: 'Deploy from Noodl',
+      tree: tree.sha,
+      parents: baseTree ? [baseTree] : []
+    });
+    
+    // Update branch reference
+    await this.githubApi.updateRef(owner, repo, `heads/${branch}`, commit.sha);
+    
+    return {
+      success: true,
+      deployId: commit.sha,
+      url: `https://${owner}.github.io/${repo}`,
+      buildTime: 0
+    };
+  }
+}
+```
+
+### 6. UI Components
+
+#### Deploy Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Deploy                                                        [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ DEPLOY TARGET                                                       │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 🌐 Netlify                                                  [▾] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ SITE                                                                │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ my-noodl-app                                                [▾] │ │
+│ │ https://my-noodl-app.netlify.app                                │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│ [+ Create New Site]                                                │
+│                                                                     │
+│ ENVIRONMENT                                                         │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Production                                                  [▾] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Last deployed: 2 hours ago                                      │ │
+│ │ Deploy time: 45 seconds                                         │ │
+│ │ [View Site ↗] [View Deploy History]                             │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│                                                  [🚀 Deploy Now]   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Deploy Progress
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Deploying to Netlify...                                            │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ ████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░  35%                      │
+│                                                                     │
+│ ✓ Building project                                                 │
+│ ✓ Exporting files (127 files)                                      │
+│ ◐ Uploading to Netlify...                                          │
+│ ○ Finalizing deploy                                                │
+│                                                                     │
+│                                                        [Cancel]    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/DeployService.ts`
+2. `packages/noodl-editor/src/editor/src/services/deploy/DeployProvider.ts`
+3. `packages/noodl-editor/src/editor/src/services/deploy/providers/NetlifyProvider.ts`
+4. `packages/noodl-editor/src/editor/src/services/deploy/providers/VercelProvider.ts`
+5. `packages/noodl-editor/src/editor/src/services/deploy/providers/GitHubPagesProvider.ts`
+6. `packages/noodl-editor/src/editor/src/services/deploy/providers/CloudflareProvider.ts`
+7. `packages/noodl-core-ui/src/components/deploy/DeployPanel/DeployPanel.tsx`
+8. `packages/noodl-core-ui/src/components/deploy/DeployProgress/DeployProgress.tsx`
+9. `packages/noodl-core-ui/src/components/deploy/SiteSelector/SiteSelector.tsx`
+10. `packages/noodl-core-ui/src/components/deploy/PlatformSelector/PlatformSelector.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx`
+   - Add platform tabs
+   - Integrate new deploy flow
+
+2. `packages/noodl-editor/src/editor/src/utils/compilation/compilation.ts`
+   - Add deploy to platform method
+   - Hook into build scripts
+
+3. `packages/noodl-editor/src/main/src/main.js`
+   - Add deep link handlers for OAuth callbacks
+
+4. `packages/noodl-editor/src/editor/src/models/projectmodel.ts`
+   - Store deploy target configuration
+
+## Implementation Steps
+
+### Phase 1: Service Architecture
+1. Create DeployService
+2. Define DeployProvider interface
+3. Implement provider registration
+4. Set up token storage
+
+### Phase 2: Netlify Integration
+1. Implement NetlifyProvider
+2. Add OAuth flow
+3. Implement site listing
+4. Implement deployment
+
+### Phase 3: Vercel Integration
+1. Implement VercelProvider
+2. Add OAuth flow
+3. Implement deployment
+
+### Phase 4: GitHub Pages Integration
+1. Implement GitHubPagesProvider
+2. Reuse GitHub OAuth
+3. Implement gh-pages deployment
+
+### Phase 5: UI Components
+1. Create DeployPanel
+2. Create platform/site selectors
+3. Create progress indicator
+4. Integrate with existing popup
+
+### Phase 6: Testing & Polish
+1. Test each provider
+2. Error handling
+3. Progress accuracy
+4. Deploy history
+
+## Testing Checklist
+
+- [ ] Netlify OAuth works
+- [ ] Netlify site listing works
+- [ ] Netlify deployment succeeds
+- [ ] Vercel OAuth works
+- [ ] Vercel deployment succeeds
+- [ ] GitHub Pages deployment works
+- [ ] Progress indicator accurate
+- [ ] Error messages helpful
+- [ ] Deploy history shows
+- [ ] Site links work
+- [ ] Token storage secure
+- [ ] Disconnect works
+
+## Dependencies
+
+- GIT-001 (GitHub OAuth) - for GitHub Pages
+
+## Blocked By
+
+- None (can start immediately)
+
+## Blocks
+
+- DEPLOY-002 (Preview Deployments)
+- DEPLOY-003 (Deploy Settings)
+
+## Estimated Effort
+
+- Service architecture: 4-5 hours
+- Netlify provider: 5-6 hours
+- Vercel provider: 4-5 hours
+- GitHub Pages provider: 4-5 hours
+- Cloudflare provider: 4-5 hours
+- UI components: 5-6 hours
+- Testing & polish: 4-5 hours
+- **Total: 30-37 hours**
+
+## Success Criteria
+
+1. One-click deploy to Netlify works
+2. One-click deploy to Vercel works
+3. One-click deploy to GitHub Pages works
+4. Site creation from editor works
+5. Deploy progress visible
+6. Deploy history accessible
+
+## Platform-Specific Notes
+
+### Netlify
+- Uses digest-based uploads (efficient)
+- Supports deploy previews (branch deploys)
+- Has good API documentation
+- Free tier: 100GB bandwidth/month
+
+### Vercel
+- File-based deployment API
+- Automatic HTTPS
+- Edge functions support
+- Free tier: 100GB bandwidth/month
+
+### GitHub Pages
+- No OAuth app needed (reuse GitHub)
+- Limited to public repos on free tier
+- Jekyll processing (can disable with .nojekyll)
+- Free for public repos
+
+### Cloudflare Pages
+- Similar to Netlify/Vercel
+- Global CDN
+- Free tier generous
+
+## Future Enhancements
+
+- AWS S3 + CloudFront
+- Firebase Hosting
+- Surge.sh
+- Custom server deployment (SFTP/SSH)
+- Docker container deployment

dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-002-preview-deployments.md

@@ -0,0 +1,510 @@
+# DEPLOY-002: Preview Deployments
+
+## Overview
+
+Enable automatic preview deployments for each git branch or commit. When users push changes, a preview URL is automatically generated so stakeholders can review before merging to production.
+
+## Context
+
+Currently, sharing work-in-progress requires:
+1. Manual deploy to a staging site
+2. Share URL with stakeholders
+3. Remember which deploy corresponds to which version
+4. Manually clean up old deploys
+
+Preview deployments provide:
+- Automatic URL per branch/PR
+- Easy sharing with stakeholders
+- Visual history of changes
+- Automatic cleanup
+
+This is especially valuable for:
+- Design reviews
+- QA testing
+- Client approvals
+- Team collaboration
+
+### Integration with GIT Series
+
+From GIT-002:
+- Git status tracking per project
+- Branch awareness
+- Commit detection
+
+This task leverages that infrastructure to trigger preview deploys.
+
+## Requirements
+
+### Functional Requirements
+
+1. **Automatic Previews**
+   - Deploy preview on branch push
+   - Unique URL per branch
+   - Update preview on new commits
+   - Delete preview on branch delete
+
+2. **Manual Previews**
+   - "Deploy Preview" button in editor
+   - Generate shareable URL
+   - Named previews (optional)
+   - Expiration settings
+
+3. **Preview Management**
+   - List all active previews
+   - View preview URL
+   - Delete individual previews
+   - Set auto-cleanup rules
+
+4. **Sharing**
+   - Copy preview URL
+   - QR code for mobile
+   - Optional password protection
+   - Expiration timer
+
+5. **Integration with PRs**
+   - Comment preview URL on PR
+   - Update comment on new commits
+   - Status check integration
+
+### Non-Functional Requirements
+
+- Preview available within 2 minutes
+- Support 10+ concurrent previews
+- Auto-cleanup after configurable period
+- Works with all deploy providers
+
+## Technical Approach
+
+### 1. Preview Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/PreviewDeployService.ts
+
+interface PreviewDeployment {
+  id: string;
+  projectId: string;
+  branch: string;
+  commitSha: string;
+  url: string;
+  platform: DeployPlatform;
+  siteId: string;
+  status: PreviewStatus;
+  createdAt: string;
+  expiresAt?: string;
+  password?: string;
+  name?: string;
+}
+
+enum PreviewStatus {
+  PENDING = 'pending',
+  BUILDING = 'building',
+  READY = 'ready',
+  FAILED = 'failed',
+  EXPIRED = 'expired'
+}
+
+interface PreviewConfig {
+  enabled: boolean;
+  autoDeployBranches: boolean;
+  excludeBranches: string[];  // e.g., ['main', 'master']
+  expirationDays: number;
+  maxPreviews: number;
+  passwordProtect: boolean;
+  commentOnPR: boolean;
+}
+
+class PreviewDeployService {
+  private static instance: PreviewDeployService;
+  
+  // Preview management
+  async createPreview(options: CreatePreviewOptions): Promise<PreviewDeployment>;
+  async updatePreview(previewId: string): Promise<PreviewDeployment>;
+  async deletePreview(previewId: string): Promise<void>;
+  async listPreviews(projectId: string): Promise<PreviewDeployment[]>;
+  
+  // Auto-deployment
+  async onBranchPush(projectId: string, branch: string, commitSha: string): Promise<void>;
+  async onBranchDelete(projectId: string, branch: string): Promise<void>;
+  
+  // PR integration
+  async commentOnPR(preview: PreviewDeployment): Promise<void>;
+  async updatePRComment(preview: PreviewDeployment): Promise<void>;
+  
+  // Cleanup
+  async cleanupExpiredPreviews(): Promise<void>;
+  async enforceMaxPreviews(projectId: string): Promise<void>;
+  
+  // Configuration
+  getConfig(projectId: string): PreviewConfig;
+  setConfig(projectId: string, config: Partial<PreviewConfig>): void;
+}
+```
+
+### 2. Branch-Based Preview Naming
+
+```typescript
+// Generate preview URLs based on branch
+function generatePreviewUrl(platform: DeployPlatform, branch: string, projectName: string): string {
+  const sanitizedBranch = sanitizeBranchName(branch);
+  
+  switch (platform) {
+    case DeployPlatform.NETLIFY:
+      // Netlify: branch--sitename.netlify.app
+      return `https://${sanitizedBranch}--${projectName}.netlify.app`;
+      
+    case DeployPlatform.VERCEL:
+      // Vercel: project-branch-hash.vercel.app
+      return `https://${projectName}-${sanitizedBranch}.vercel.app`;
+      
+    case DeployPlatform.GITHUB_PAGES:
+      // GitHub Pages: use subdirectory or separate branch
+      return `https://${owner}.github.io/${repo}/preview/${sanitizedBranch}`;
+      
+    default:
+      return '';
+  }
+}
+
+function sanitizeBranchName(branch: string): string {
+  return branch
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .substring(0, 50);
+}
+```
+
+### 3. Git Integration Hook
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/PreviewDeployService.ts
+
+// Hook into git operations
+class PreviewDeployService {
+  constructor() {
+    // Listen for git events
+    EventDispatcher.instance.on('git.push.success', this.handlePush.bind(this));
+    EventDispatcher.instance.on('git.branch.delete', this.handleBranchDelete.bind(this));
+  }
+  
+  private async handlePush(event: GitPushEvent): Promise<void> {
+    const config = this.getConfig(event.projectId);
+    
+    if (!config.enabled || !config.autoDeployBranches) {
+      return;
+    }
+    
+    // Check if branch is excluded
+    if (config.excludeBranches.includes(event.branch)) {
+      return;
+    }
+    
+    // Check if we already have a preview for this branch
+    const existing = await this.findPreviewByBranch(event.projectId, event.branch);
+    
+    if (existing) {
+      // Update existing preview
+      await this.updatePreview(existing.id);
+    } else {
+      // Create new preview
+      await this.createPreview({
+        projectId: event.projectId,
+        branch: event.branch,
+        commitSha: event.commitSha
+      });
+    }
+    
+    // Comment on PR if enabled
+    if (config.commentOnPR) {
+      const pr = await this.findPRForBranch(event.projectId, event.branch);
+      if (pr) {
+        await this.commentOnPR(existing || await this.getLatestPreview(event.projectId, event.branch));
+      }
+    }
+  }
+  
+  private async handleBranchDelete(event: GitBranchDeleteEvent): Promise<void> {
+    const preview = await this.findPreviewByBranch(event.projectId, event.branch);
+    if (preview) {
+      await this.deletePreview(preview.id);
+    }
+  }
+}
+```
+
+### 4. PR Comment Integration
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/PreviewDeployService.ts
+
+async commentOnPR(preview: PreviewDeployment): Promise<void> {
+  const github = GitHubApiClient.instance;
+  const project = ProjectModel.instance;
+  const remote = project.getRemoteUrl();
+  
+  if (!remote || !remote.includes('github.com')) {
+    return;  // Only GitHub PRs supported
+  }
+  
+  const { owner, repo } = parseGitHubUrl(remote);
+  const pr = await github.findPRByBranch(owner, repo, preview.branch);
+  
+  if (!pr) {
+    return;
+  }
+  
+  const commentBody = this.generatePRComment(preview);
+  
+  // Check for existing Noodl comment
+  const existingComment = await github.findComment(owner, repo, pr.number, '<!-- noodl-preview -->');
+  
+  if (existingComment) {
+    await github.updateComment(owner, repo, existingComment.id, commentBody);
+  } else {
+    await github.createComment(owner, repo, pr.number, commentBody);
+  }
+}
+
+private generatePRComment(preview: PreviewDeployment): string {
+  return `<!-- noodl-preview -->
+## 🚀 Noodl Preview Deployment
+
+| Status | URL |
+|--------|-----|
+| ${this.getStatusEmoji(preview.status)} ${preview.status} | [${preview.url}](${preview.url}) |
+
+**Branch:** \`${preview.branch}\`  
+**Commit:** \`${preview.commitSha.substring(0, 7)}\`  
+**Updated:** ${new Date(preview.createdAt).toLocaleString()}
+
+---
+<sub>Deployed automatically by Noodl</sub>`;
+}
+```
+
+### 5. UI Components
+
+#### Preview Manager Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Preview Deployments                                           [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ ACTIVE PREVIEWS (3)                                                │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 🌿 feature/new-dashboard                           [Copy URL]  │ │
+│ │    https://feature-new-dashboard--myapp.netlify.app            │ │
+│ │    Updated 10 minutes ago • Commit abc1234                     │ │
+│ │    [Open ↗] [QR Code] [Delete]                                 │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ 🌿 feature/login-redesign                          [Copy URL]  │ │
+│ │    https://feature-login-redesign--myapp.netlify.app           │ │
+│ │    Updated 2 hours ago • Commit def5678                        │ │
+│ │    [Open ↗] [QR Code] [Delete]                                 │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ 🌿 bugfix/form-validation                          [Copy URL]  │ │
+│ │    https://bugfix-form-validation--myapp.netlify.app           │ │
+│ │    Updated yesterday • Commit ghi9012                          │ │
+│ │    [Open ↗] [QR Code] [Delete]                                 │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ SETTINGS                                                            │
+│ ☑ Auto-deploy branches                                             │
+│ ☑ Comment preview URL on PRs                                       │
+│ Exclude branches: main, master                                     │
+│ Auto-delete after: [7 days ▾]                                      │
+│                                                                     │
+│                                        [+ Create Manual Preview]   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### QR Code Modal
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Share Preview                                                 [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│                    ┌─────────────────┐                             │
+│                    │ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄│                             │
+│                    │ █     █ █     █│                             │
+│                    │ █ ███ █ █ ███ █│   Scan to open              │
+│                    │ █     █ █     █│   on mobile                 │
+│                    │ ▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀│                             │
+│                    └─────────────────┘                             │
+│                                                                     │
+│ feature/new-dashboard                                              │
+│ https://feature-new-dashboard--myapp.netlify.app                   │
+│                                                                     │
+│                              [Copy URL]  [Download QR]  [Close]    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Create Manual Preview
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Create Preview                                                [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Preview Name (optional):                                           │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ client-review-dec-15                                           │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ Expires in:                                                         │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 7 days                                                      [▾] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ☐ Password protect                                                 │
+│   Password: [••••••••                                            ] │
+│                                                                     │
+│ Deploy from:                                                        │
+│ ○ Current state (uncommitted changes included)                     │
+│ ● Current branch (feature/new-dashboard)                           │
+│ ○ Specific commit: [abc1234 ▾]                                     │
+│                                                                     │
+│                                      [Cancel]  [Create Preview]    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/PreviewDeployService.ts`
+2. `packages/noodl-core-ui/src/components/deploy/PreviewManager/PreviewManager.tsx`
+3. `packages/noodl-core-ui/src/components/deploy/PreviewCard/PreviewCard.tsx`
+4. `packages/noodl-core-ui/src/components/deploy/CreatePreviewModal/CreatePreviewModal.tsx`
+5. `packages/noodl-core-ui/src/components/deploy/QRCodeModal/QRCodeModal.tsx`
+6. `packages/noodl-core-ui/src/components/deploy/PreviewSettings/PreviewSettings.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/services/DeployService.ts`
+   - Add preview deployment methods
+   - Integrate with deploy providers
+
+2. `packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx`
+   - Add "Previews" tab
+   - Integrate PreviewManager
+
+3. `packages/noodl-editor/src/editor/src/models/projectmodel.ts`
+   - Store preview configuration
+   - Track active previews
+
+4. `packages/noodl-editor/src/editor/src/services/GitHubApiClient.ts`
+   - Add PR comment methods
+   - Add PR lookup by branch
+
+## Implementation Steps
+
+### Phase 1: Preview Service
+1. Create PreviewDeployService
+2. Implement preview creation
+3. Implement preview deletion
+4. Add configuration storage
+
+### Phase 2: Git Integration
+1. Hook into push events
+2. Hook into branch delete events
+3. Implement auto-deployment
+4. Test with branches
+
+### Phase 3: PR Integration
+1. Implement PR comment creation
+2. Implement comment updating
+3. Add status emoji handling
+4. Test with GitHub PRs
+
+### Phase 4: UI - Preview Manager
+1. Create PreviewManager component
+2. Create PreviewCard component
+3. Add copy/share functionality
+4. Implement delete action
+
+### Phase 5: UI - Create Preview
+1. Create CreatePreviewModal
+2. Add expiration options
+3. Add password protection
+4. Add source selection
+
+### Phase 6: UI - QR & Sharing
+1. Create QRCodeModal
+2. Add QR code generation
+3. Add download option
+4. Polish sharing UX
+
+## Testing Checklist
+
+- [ ] Auto-preview on push works
+- [ ] Preview URL is correct
+- [ ] PR comment created
+- [ ] PR comment updated on new commit
+- [ ] Manual preview creation works
+- [ ] Preview deletion works
+- [ ] Auto-cleanup works
+- [ ] QR code generates correctly
+- [ ] Password protection works
+- [ ] Expiration works
+- [ ] Multiple previews supported
+
+## Dependencies
+
+- DEPLOY-001 (One-Click Deploy) - for deploy providers
+- GIT-001 (GitHub OAuth) - for PR comments
+- GIT-002 (Git Status) - for branch awareness
+
+## Blocked By
+
+- DEPLOY-001
+
+## Blocks
+
+- None
+
+## Estimated Effort
+
+- Preview service: 5-6 hours
+- Git integration: 4-5 hours
+- PR integration: 3-4 hours
+- UI preview manager: 4-5 hours
+- UI create preview: 3-4 hours
+- UI QR/sharing: 2-3 hours
+- Testing & polish: 3-4 hours
+- **Total: 24-31 hours**
+
+## Success Criteria
+
+1. Auto-preview deploys on branch push
+2. Preview URL unique per branch
+3. PR comments posted automatically
+4. Manual previews can be created
+5. QR codes work for mobile testing
+6. Expired previews auto-cleaned
+
+## Platform-Specific Implementation
+
+### Netlify
+- Branch deploys built-in
+- URL pattern: `branch--site.netlify.app`
+- Easy configuration
+
+### Vercel
+- Preview deployments automatic
+- URL pattern: `project-branch-hash.vercel.app`
+- Good GitHub integration
+
+### GitHub Pages
+- Need separate approach (subdirectory or deploy to different branch)
+- Less native support for branch previews
+
+## Future Enhancements
+
+- Visual regression testing
+- Screenshot comparison
+- Performance metrics per preview
+- A/B testing setup
+- Preview environments (staging, QA)
+- Slack/Teams notifications

dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-003-deploy-settings.md

@@ -0,0 +1,533 @@
+# DEPLOY-003: Deploy Settings & Environment Variables
+
+## Overview
+
+Provide comprehensive deployment configuration including environment variables, build settings, custom domains, and deployment rules. Users can manage different environments (development, staging, production) with different configurations.
+
+## Context
+
+Currently:
+- Environment variables set per deploy manually
+- No persistent environment configuration
+- No distinction between environments
+- Custom domain setup requires external configuration
+
+This task adds:
+- Persistent environment variable management
+- Multiple environment profiles
+- Custom domain configuration
+- Build optimization settings
+- Deploy rules and triggers
+
+## Requirements
+
+### Functional Requirements
+
+1. **Environment Variables**
+   - Add/edit/delete variables
+   - Sensitive variable masking
+   - Import from .env file
+   - Export to .env file
+   - Variable validation
+
+2. **Environment Profiles**
+   - Development, Staging, Production presets
+   - Custom profiles
+   - Variables per profile
+   - Easy switching
+
+3. **Custom Domains**
+   - View current domains
+   - Add custom domain
+   - SSL certificate status
+   - DNS configuration help
+
+4. **Build Settings**
+   - Output directory
+   - Base URL configuration
+   - Asset optimization
+   - Source maps (dev only)
+
+5. **Deploy Rules**
+   - Auto-deploy on push
+   - Branch-based rules
+   - Deploy schedule
+   - Deploy hooks/webhooks
+
+### Non-Functional Requirements
+
+- Variables encrypted at rest
+- Sensitive values never logged
+- Sync with platform settings
+- Works offline (cached)
+
+## Technical Approach
+
+### 1. Environment Configuration Service
+
+```typescript
+// packages/noodl-editor/src/editor/src/services/EnvironmentConfigService.ts
+
+interface EnvironmentVariable {
+  key: string;
+  value: string;
+  sensitive: boolean;  // Masked in UI
+  scope: VariableScope;
+}
+
+enum VariableScope {
+  BUILD = 'build',      // Available during build
+  RUNTIME = 'runtime',  // Injected into app
+  BOTH = 'both'
+}
+
+interface EnvironmentProfile {
+  id: string;
+  name: string;
+  description?: string;
+  variables: EnvironmentVariable[];
+  isDefault: boolean;
+  platform?: DeployPlatform;  // If linked to a platform
+}
+
+interface DeploySettings {
+  outputDirectory: string;
+  baseUrl: string;
+  assetOptimization: boolean;
+  sourceMaps: boolean;
+  cleanUrls: boolean;
+  trailingSlash: boolean;
+}
+
+class EnvironmentConfigService {
+  private static instance: EnvironmentConfigService;
+  
+  // Profiles
+  async getProfiles(projectId: string): Promise<EnvironmentProfile[]>;
+  async createProfile(projectId: string, profile: Omit<EnvironmentProfile, 'id'>): Promise<EnvironmentProfile>;
+  async updateProfile(projectId: string, profileId: string, updates: Partial<EnvironmentProfile>): Promise<void>;
+  async deleteProfile(projectId: string, profileId: string): Promise<void>;
+  
+  // Variables
+  async getVariables(projectId: string, profileId: string): Promise<EnvironmentVariable[]>;
+  async setVariable(projectId: string, profileId: string, variable: EnvironmentVariable): Promise<void>;
+  async deleteVariable(projectId: string, profileId: string, key: string): Promise<void>;
+  async importFromEnvFile(projectId: string, profileId: string, content: string): Promise<void>;
+  async exportToEnvFile(projectId: string, profileId: string): Promise<string>;
+  
+  // Build settings
+  async getDeploySettings(projectId: string): Promise<DeploySettings>;
+  async updateDeploySettings(projectId: string, settings: Partial<DeploySettings>): Promise<void>;
+  
+  // Platform sync
+  async syncWithPlatform(projectId: string, profileId: string, platform: DeployPlatform): Promise<void>;
+  async pullFromPlatform(projectId: string, platform: DeployPlatform): Promise<EnvironmentVariable[]>;
+}
+```
+
+### 2. Environment Storage
+
+```typescript
+// Store in project metadata, encrypted
+interface ProjectDeployConfig {
+  profiles: EnvironmentProfile[];
+  activeProfileId: string;
+  deploySettings: DeploySettings;
+  domains: CustomDomain[];
+  deployRules: DeployRule[];
+}
+
+// Encryption for sensitive values
+class SecureStorage {
+  async encrypt(value: string): Promise<string>;
+  async decrypt(value: string): Promise<string>;
+}
+
+// Store encrypted in project.json
+{
+  "metadata": {
+    "deployConfig": {
+      "profiles": [
+        {
+          "id": "prod",
+          "name": "Production",
+          "variables": [
+            {
+              "key": "API_URL",
+              "value": "https://api.example.com",  // Plain text
+              "sensitive": false
+            },
+            {
+              "key": "API_KEY",
+              "value": "encrypted:abc123...",  // Encrypted
+              "sensitive": true
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+```
+
+### 3. Domain Configuration
+
+```typescript
+interface CustomDomain {
+  domain: string;
+  platform: DeployPlatform;
+  siteId: string;
+  status: DomainStatus;
+  sslStatus: SSLStatus;
+  dnsRecords?: DNSRecord[];
+}
+
+enum DomainStatus {
+  PENDING = 'pending',
+  ACTIVE = 'active',
+  FAILED = 'failed'
+}
+
+enum SSLStatus {
+  PENDING = 'pending',
+  ACTIVE = 'active',
+  EXPIRED = 'expired',
+  FAILED = 'failed'
+}
+
+interface DNSRecord {
+  type: 'A' | 'CNAME' | 'TXT';
+  name: string;
+  value: string;
+  required: boolean;
+}
+
+class DomainService {
+  async addDomain(siteId: string, domain: string): Promise<CustomDomain>;
+  async verifyDomain(domainId: string): Promise<DomainStatus>;
+  async getDNSInstructions(domain: string): Promise<DNSRecord[]>;
+  async checkSSL(domainId: string): Promise<SSLStatus>;
+}
+```
+
+### 4. Deploy Rules
+
+```typescript
+interface DeployRule {
+  id: string;
+  name: string;
+  enabled: boolean;
+  trigger: DeployTrigger;
+  conditions: DeployCondition[];
+  actions: DeployAction[];
+}
+
+interface DeployTrigger {
+  type: 'push' | 'schedule' | 'manual' | 'webhook';
+  config: PushConfig | ScheduleConfig | WebhookConfig;
+}
+
+interface PushConfig {
+  branches: string[];  // Glob patterns
+  paths?: string[];    // Only deploy if these paths changed
+}
+
+interface ScheduleConfig {
+  cron: string;  // Cron expression
+  timezone: string;
+}
+
+interface DeployCondition {
+  type: 'branch' | 'tag' | 'path' | 'message';
+  operator: 'equals' | 'contains' | 'matches';
+  value: string;
+}
+
+interface DeployAction {
+  type: 'deploy' | 'notify' | 'webhook';
+  config: DeployActionConfig | NotifyConfig | WebhookConfig;
+}
+```
+
+### 5. UI Components
+
+#### Environment Variables Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Environment Variables                                         [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Profile: [Production ▾]    [+ New Profile]                         │
+│                                                                     │
+│ VARIABLES                                           [Import .env]  │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Key                    Value                   Scope      [⋯]  │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ API_URL                https://api.example.com  Runtime   [✎🗑] │ │
+│ │ API_KEY                ••••••••••••••••••••••  Runtime   [✎🗑] │ │
+│ │ ANALYTICS_ID           UA-12345678-1           Runtime   [✎🗑] │ │
+│ │ DEBUG                  false                   Build     [✎🗑] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ [+ Add Variable]                                    [Export .env]  │
+│                                                                     │
+│ ☑ Sync with Netlify                                                │
+│ Last synced: 5 minutes ago                          [Sync Now]    │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Build Settings Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Build Settings                                                [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ OUTPUT                                                              │
+│ Output Directory:    [dist                                      ]  │
+│ Base URL:           [/                                          ]  │
+│                                                                     │
+│ OPTIMIZATION                                                        │
+│ ☑ Optimize assets (minify JS/CSS)                                  │
+│ ☐ Generate source maps (increases build size)                      │
+│ ☑ Clean URLs (remove .html extension)                              │
+│ ☐ Trailing slash on URLs                                           │
+│                                                                     │
+│ ADVANCED                                                            │
+│ Build Command:      [npm run build                              ]  │
+│ Publish Directory:  [build                                      ]  │
+│                                                                     │
+│ NODE VERSION                                                        │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 18 (LTS)                                                    [▾] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│                                                  [Save Settings]   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Custom Domains Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Custom Domains                                                [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ CONNECTED DOMAINS                                                   │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ 🌐 myapp.com                                                    │ │
+│ │    ✓ DNS Configured  ✓ SSL Active                               │ │
+│ │    Primary domain                                    [Remove]   │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ 🌐 www.myapp.com                                                │ │
+│ │    ✓ DNS Configured  ✓ SSL Active                               │ │
+│ │    Redirects to myapp.com                            [Remove]   │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ [+ Add Custom Domain]                                              │
+│                                                                     │
+│ DEFAULT DOMAIN                                                      │
+│ https://myapp.netlify.app                              [Copy]      │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Add Domain Modal
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Add Custom Domain                                             [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ Domain:                                                             │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ app.example.com                                                 │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ DNS CONFIGURATION REQUIRED                                         │
+│                                                                     │
+│ Add these records to your DNS provider:                            │
+│                                                                     │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Type    Name    Value                                    [Copy] │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ CNAME   app     myapp.netlify.app                        [Copy] │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ ⚠️ DNS changes can take up to 48 hours to propagate               │
+│                                                                     │
+│ Status: ⏳ Waiting for DNS verification...                         │
+│                                                                     │
+│                               [Cancel]  [Verify Domain]  [Done]   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+#### Deploy Rules Panel
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ Deploy Rules                                                  [×]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│ RULES                                                [+ Add Rule]  │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ ☑ Auto-deploy production                                        │ │
+│ │   When: Push to main                                            │ │
+│ │   Deploy to: Production                              [Edit 🗑]  │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ ☑ Preview branches                                              │ │
+│ │   When: Push to feature/*                                       │ │
+│ │   Deploy to: Preview                                 [Edit 🗑]  │ │
+│ ├─────────────────────────────────────────────────────────────────┤ │
+│ │ ☐ Scheduled deploy                                              │ │
+│ │   When: Daily at 2:00 AM UTC                                    │ │
+│ │   Deploy to: Production                              [Edit 🗑]  │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│ WEBHOOKS                                          [+ Add Webhook]  │
+│ ┌─────────────────────────────────────────────────────────────────┐ │
+│ │ Build hook URL:                                                 │ │
+│ │ https://api.netlify.com/build_hooks/abc123          [Copy] [🔄] │ │
+│ │ Trigger: POST request to this URL                               │ │
+│ └─────────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## Files to Create
+
+1. `packages/noodl-editor/src/editor/src/services/EnvironmentConfigService.ts`
+2. `packages/noodl-editor/src/editor/src/services/DomainService.ts`
+3. `packages/noodl-editor/src/editor/src/services/DeployRulesService.ts`
+4. `packages/noodl-core-ui/src/components/deploy/EnvironmentVariables/EnvironmentVariables.tsx`
+5. `packages/noodl-core-ui/src/components/deploy/EnvironmentVariables/VariableRow.tsx`
+6. `packages/noodl-core-ui/src/components/deploy/EnvironmentVariables/ProfileSelector.tsx`
+7. `packages/noodl-core-ui/src/components/deploy/BuildSettings/BuildSettings.tsx`
+8. `packages/noodl-core-ui/src/components/deploy/CustomDomains/CustomDomains.tsx`
+9. `packages/noodl-core-ui/src/components/deploy/CustomDomains/AddDomainModal.tsx`
+10. `packages/noodl-core-ui/src/components/deploy/DeployRules/DeployRules.tsx`
+11. `packages/noodl-core-ui/src/components/deploy/DeployRules/RuleEditor.tsx`
+
+## Files to Modify
+
+1. `packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx`
+   - Add settings tabs
+   - Integrate new panels
+
+2. `packages/noodl-editor/src/editor/src/utils/compilation/compilation.ts`
+   - Use environment variables from config
+   - Apply build settings
+
+3. `packages/noodl-editor/src/editor/src/models/projectmodel.ts`
+   - Store deploy configuration
+   - Load/save config
+
+4. `packages/noodl-editor/src/editor/src/services/DeployService.ts`
+   - Apply environment variables to deploy
+   - Handle domain configuration
+
+## Implementation Steps
+
+### Phase 1: Environment Variables
+1. Create EnvironmentConfigService
+2. Implement variable storage
+3. Implement encryption for sensitive values
+4. Add import/export .env
+
+### Phase 2: Environment Profiles
+1. Add profile management
+2. Implement profile switching
+3. Add default profiles (dev/staging/prod)
+4. UI for profile management
+
+### Phase 3: UI - Variables Panel
+1. Create EnvironmentVariables component
+2. Create VariableRow component
+3. Add add/edit/delete functionality
+4. Add import/export buttons
+
+### Phase 4: Build Settings
+1. Create build settings storage
+2. Create BuildSettings component
+3. Integrate with compilation
+4. Test with deployments
+
+### Phase 5: Custom Domains
+1. Create DomainService
+2. Implement platform-specific domain APIs
+3. Create CustomDomains component
+4. Create AddDomainModal
+
+### Phase 6: Deploy Rules
+1. Create DeployRulesService
+2. Implement rule evaluation
+3. Create DeployRules component
+4. Create RuleEditor
+
+## Testing Checklist
+
+- [ ] Variables saved correctly
+- [ ] Sensitive values encrypted
+- [ ] Variables applied to deploy
+- [ ] Import .env works
+- [ ] Export .env works
+- [ ] Profile switching works
+- [ ] Build settings applied
+- [ ] Custom domain setup works
+- [ ] DNS verification works
+- [ ] Deploy rules trigger correctly
+- [ ] Webhooks work
+- [ ] Platform sync works
+
+## Dependencies
+
+- DEPLOY-001 (One-Click Deploy) - for platform integration
+
+## Blocked By
+
+- DEPLOY-001
+
+## Blocks
+
+- None (final DEPLOY task)
+
+## Estimated Effort
+
+- Environment config service: 4-5 hours
+- Variable storage/encryption: 3-4 hours
+- Environment profiles: 3-4 hours
+- UI variables panel: 4-5 hours
+- Build settings: 3-4 hours
+- Custom domains: 4-5 hours
+- Deploy rules: 4-5 hours
+- Testing & polish: 3-4 hours
+- **Total: 28-36 hours**
+
+## Success Criteria
+
+1. Environment variables persist across deploys
+2. Sensitive values properly secured
+3. Multiple profiles supported
+4. Import/export .env works
+5. Custom domains configurable
+6. Deploy rules automate deployments
+7. Settings sync with platforms
+
+## Security Considerations
+
+- Sensitive values encrypted at rest
+- Never log sensitive values
+- Use platform-native secret storage where available
+- Clear memory after use
+- Validate input to prevent injection
+
+## Future Enhancements
+
+- Environment variable inheritance
+- Secret rotation reminders
+- Integration with secret managers (Vault, AWS Secrets)
+- A/B testing configuration
+- Feature flags integration
+- Monitoring/alerting integration

dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-overview.md

@@ -0,0 +1,385 @@
+# DEPLOY Series: Deployment Automation
+
+## Overview
+
+The DEPLOY series transforms Noodl's deployment from manual folder exports into a modern, automated deployment pipeline. Users can deploy to popular hosting platforms with one click, get automatic preview URLs for each branch, and manage environment variables and domains directly from the editor.
+
+## Target Environment
+
+- **Editor**: React 19 version only
+- **Platforms**: Netlify, Vercel, GitHub Pages, Cloudflare Pages
+- **Backwards Compatibility**: Existing deploy-to-folder continues to work
+
+## Task Dependency Graph
+
+```
+DEPLOY-001 (One-Click Deploy)
+    │
+    ├─────────────────────┐
+    ↓                     ↓
+DEPLOY-002 (Previews)  DEPLOY-003 (Settings)
+```
+
+## Task Summary
+
+| Task ID | Name | Est. Hours | Priority |
+|---------|------|------------|----------|
+| DEPLOY-001 | One-Click Deploy Integrations | 30-37 | Critical |
+| DEPLOY-002 | Preview Deployments | 24-31 | High |
+| DEPLOY-003 | Deploy Settings & Environment Variables | 28-36 | High |
+
+**Total Estimated: 82-104 hours**
+
+## Implementation Order
+
+### Phase 1: Core Deployment (Weeks 1-2)
+1. **DEPLOY-001** - One-click deploy to platforms
+   - Establishes provider architecture
+   - OAuth flows for each platform
+   - Core deployment functionality
+
+### Phase 2: Preview & Settings (Weeks 3-4)
+2. **DEPLOY-002** - Preview deployments
+   - Branch-based previews
+   - PR integration
+   - Sharing features
+
+3. **DEPLOY-003** - Deploy settings
+   - Environment variables
+   - Custom domains
+   - Deploy rules
+
+## Existing Infrastructure
+
+### Deployer
+
+```typescript
+// packages/noodl-editor/src/editor/src/utils/compilation/build/deployer.ts
+export async function deployToFolder({
+  project,
+  direntry,
+  environment,
+  baseUrl,
+  envVariables,
+  runtimeType = 'deploy'
+}: DeployToFolderOptions)
+```
+
+### Compilation
+
+```typescript
+// packages/noodl-editor/src/editor/src/utils/compilation/compilation.ts
+class Compilation {
+  deployToFolder(direntry, options): Promise<void>;
+  // Build scripts system for pre/post deploy
+}
+```
+
+### Deploy UI
+
+```typescript
+// Current deploy popup with folder selection
+DeployToFolderTab.tsx
+DeployPopup.tsx
+```
+
+### Cloud Services
+
+```typescript
+// packages/noodl-editor/src/editor/src/models/CloudServices.ts
+interface Environment {
+  id: string;
+  name: string;
+  url: string;
+  appId: string;
+  masterKey?: string;
+}
+```
+
+## New Architecture
+
+### Service Layer
+
+```
+packages/noodl-editor/src/editor/src/services/
+├── DeployService.ts              # Central deployment service
+├── PreviewDeployService.ts       # Preview management
+├── EnvironmentConfigService.ts   # Env vars & profiles
+├── DomainService.ts              # Custom domain management
+├── DeployRulesService.ts         # Automation rules
+└── deploy/
+    ├── DeployProvider.ts         # Provider interface
+    └── providers/
+        ├── NetlifyProvider.ts
+        ├── VercelProvider.ts
+        ├── GitHubPagesProvider.ts
+        └── CloudflareProvider.ts
+```
+
+### Provider Interface
+
+```typescript
+interface DeployProvider {
+  readonly platform: DeployPlatform;
+  readonly name: string;
+  
+  // Authentication
+  authenticate(): Promise<AuthResult>;
+  isAuthenticated(): boolean;
+  
+  // Sites
+  listSites(): Promise<Site[]>;
+  createSite(name: string): Promise<Site>;
+  
+  // Deployment
+  deploy(siteId: string, files: DeployFiles): Promise<DeployResult>;
+  getDeployStatus(deployId: string): Promise<DeployStatus>;
+  
+  // Configuration
+  getEnvVariables(siteId: string): Promise<Record<string, string>>;
+  setEnvVariables(siteId: string, vars: Record<string, string>): Promise<void>;
+}
+```
+
+## Platform Comparison
+
+| Feature | Netlify | Vercel | GitHub Pages | Cloudflare |
+|---------|---------|--------|--------------|------------|
+| OAuth | ✓ | ✓ | Via GitHub | ✓ |
+| Preview Deploys | ✓ | ✓ | Manual | ✓ |
+| Custom Domains | ✓ | ✓ | ✓ | ✓ |
+| Env Variables | ✓ | ✓ | Secrets only | ✓ |
+| Deploy Hooks | ✓ | ✓ | Actions | ✓ |
+| Free Tier | 100GB/mo | 100GB/mo | Unlimited* | 100K/day |
+
+*GitHub Pages: Free for public repos, requires Pro for private
+
+## Key User Flows
+
+### 1. First-Time Deploy
+
+```
+User clicks "Deploy"
+    ↓
+Select platform (Netlify, Vercel, etc.)
+    ↓
+Authenticate with platform (OAuth)
+    ↓
+Create new site or select existing
+    ↓
+Configure environment variables
+    ↓
+Deploy → Get live URL
+```
+
+### 2. Subsequent Deploys
+
+```
+User clicks "Deploy"
+    ↓
+Site already linked
+    ↓
+One-click deploy
+    ↓
+Progress indicator
+    ↓
+Success → Link to site
+```
+
+### 3. Preview Workflow
+
+```
+User pushes feature branch
+    ↓
+Auto-deploy preview
+    ↓
+Comment on PR with preview URL
+    ↓
+Stakeholder reviews
+    ↓
+Merge → Production deploy
+    ↓
+Preview auto-cleaned
+```
+
+## UI Components to Create
+
+| Component | Package | Purpose |
+|-----------|---------|---------|
+| DeployPanel | noodl-core-ui | Main deploy interface |
+| PlatformSelector | noodl-core-ui | Platform choice |
+| SiteSelector | noodl-core-ui | Site choice |
+| DeployProgress | noodl-core-ui | Progress indicator |
+| PreviewManager | noodl-core-ui | Preview list |
+| EnvironmentVariables | noodl-core-ui | Var management |
+| CustomDomains | noodl-core-ui | Domain setup |
+| DeployRules | noodl-core-ui | Automation rules |
+
+## Data Models
+
+### Deploy Target
+
+```typescript
+interface DeployTarget {
+  id: string;
+  name: string;
+  platform: DeployPlatform;
+  siteId: string;
+  siteName: string;
+  url: string;
+  customDomain?: string;
+  lastDeployedAt?: string;
+}
+```
+
+### Preview Deployment
+
+```typescript
+interface PreviewDeployment {
+  id: string;
+  projectId: string;
+  branch: string;
+  commitSha: string;
+  url: string;
+  status: PreviewStatus;
+  createdAt: string;
+  expiresAt?: string;
+}
+```
+
+### Environment Profile
+
+```typescript
+interface EnvironmentProfile {
+  id: string;
+  name: string;
+  variables: EnvironmentVariable[];
+  isDefault: boolean;
+}
+
+interface EnvironmentVariable {
+  key: string;
+  value: string;
+  sensitive: boolean;
+}
+```
+
+## Security Considerations
+
+### Token Storage
+- OAuth tokens stored in electron safeStorage
+- Never logged or displayed
+- Cleared on disconnect
+
+### Sensitive Variables
+- Encrypted at rest
+- Masked in UI (•••••)
+- Never exported to .env without warning
+
+### Platform Security
+- Minimum OAuth scopes
+- Token refresh handling
+- Secure redirect handling
+
+## Testing Strategy
+
+### Unit Tests
+- Provider method isolation
+- Token handling
+- File preparation
+
+### Integration Tests
+- OAuth flow mocking
+- Deploy API mocking
+- Full deploy cycle
+
+### Manual Testing
+- Real deployments to each platform
+- Custom domain setup
+- Preview workflow
+
+## Cline Usage Notes
+
+### Before Starting Each Task
+
+1. Review existing deployment infrastructure:
+   - `deployer.ts`
+   - `compilation.ts`
+   - `DeployPopup/`
+
+2. Understand build output:
+   - How project.json is exported
+   - How bundles are created
+   - How index.html is generated
+
+### Key Integration Points
+
+1. **Compilation**: Use existing `deployToFolder` for file preparation
+2. **Cloud Services**: Existing environment model can inform design
+3. **Git Integration**: Leverage GIT series for branch awareness
+
+### Platform API Notes
+
+- **Netlify**: Uses digest-based upload (SHA1 hashes)
+- **Vercel**: File-based deployment API
+- **GitHub Pages**: Git-based via GitHub API
+- **Cloudflare**: Similar to Netlify/Vercel
+
+## Success Criteria (Series Complete)
+
+1. ✅ One-click deploy to 4 platforms
+2. ✅ OAuth authentication flow works
+3. ✅ Site creation from editor works
+4. ✅ Preview deploys auto-generated
+5. ✅ PR comments posted automatically
+6. ✅ Environment variables managed
+7. ✅ Custom domains configurable
+8. ✅ Deploy rules automate workflow
+
+## Future Work (Post-DEPLOY)
+
+The DEPLOY series enables:
+- **CI/CD Integration**: Connect to GitHub Actions, GitLab CI
+- **Performance Monitoring**: Lighthouse scores per deploy
+- **A/B Testing**: Deploy variants to subsets
+- **Rollback**: One-click rollback to previous deploy
+- **Multi-Region**: Deploy to multiple regions
+
+## Files in This Series
+
+- `DEPLOY-001-one-click-deploy.md`
+- `DEPLOY-002-preview-deployments.md`
+- `DEPLOY-003-deploy-settings.md`
+- `DEPLOY-OVERVIEW.md` (this file)
+
+## External Dependencies
+
+### Platform OAuth
+
+| Platform | OAuth Type | Client ID Required |
+|----------|------------|-------------------|
+| Netlify | OAuth 2.0 | Yes |
+| Vercel | OAuth 2.0 | Yes |
+| GitHub | OAuth 2.0 | From GIT-001 |
+| Cloudflare | OAuth 2.0 | Yes |
+
+### API Endpoints
+
+- Netlify: `api.netlify.com/api/v1`
+- Vercel: `api.vercel.com/v13`
+- GitHub: `api.github.com`
+- Cloudflare: `api.cloudflare.com/client/v4`
+
+## Complete Roadmap Summary
+
+With the DEPLOY series complete, the full OpenNoodl modernization roadmap includes:
+
+| Series | Tasks | Hours | Focus |
+|--------|-------|-------|-------|
+| DASH | 4 tasks | 43-63 | Dashboard UX |
+| GIT | 5 tasks | 68-96 | Git integration |
+| COMP | 6 tasks | 117-155 | Shared components |
+| AI | 4 tasks | 121-154 | AI assistance |
+| DEPLOY | 3 tasks | 82-104 | Deployment |
+
+**Grand Total: 22 tasks, 431-572 hours**

packages/noodl-editor/src/editor/src/models/migration/MigrationSession.ts

@@ -0,0 +1,587 @@
+/**
+ * MigrationSession
+ *
+ * State machine for managing the React 19 migration process.
+ * Handles step transitions, progress tracking, and session persistence.
+ *
+ * @module noodl-editor/models/migration
+ * @since 1.2.0
+ */
+
+import { EventDispatcher } from '../../../../shared/utils/EventDispatcher';
+import { detectRuntimeVersion, scanProjectForMigration } from './ProjectScanner';
+import {
+  MigrationSession as MigrationSessionState,
+  MigrationStep,
+  MigrationScan,
+  MigrationProgress,
+  MigrationResult,
+  MigrationLogEntry,
+  AIConfig,
+  AIBudget,
+  AIPreferences,
+  RuntimeVersionInfo
+} from './types';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Default AI budget configuration
+ */
+const DEFAULT_AI_BUDGET: AIBudget = {
+  maxPerSession: 5.0, // $5 max per migration session
+  spent: 0,
+  pauseIncrement: 1.0, // Pause and confirm every $1
+  showEstimates: true
+};
+
+/**
+ * Default AI preferences
+ */
+const DEFAULT_AI_PREFERENCES: AIPreferences = {
+  preferFunctional: true,
+  preserveComments: true,
+  verboseOutput: false
+};
+
+// =============================================================================
+// MigrationSessionManager
+// =============================================================================
+
+/**
+ * Manages the migration session state machine.
+ * Extends EventDispatcher for reactive updates to UI.
+ */
+export class MigrationSessionManager extends EventDispatcher {
+  private session: MigrationSessionState | null = null;
+
+  /**
+   * Creates a new migration session for a project
+   */
+  async createSession(
+    sourcePath: string,
+    projectName: string
+  ): Promise<MigrationSessionState> {
+    // Generate unique session ID
+    const sessionId = `migration-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    // Detect runtime version
+    const versionInfo = await detectRuntimeVersion(sourcePath);
+
+    // Only allow migration of React 17 projects
+    if (versionInfo.version !== 'react17' && versionInfo.version !== 'unknown') {
+      throw new Error(
+        `Project is already using ${versionInfo.version}. Migration not needed.`
+      );
+    }
+
+    // Create session
+    this.session = {
+      id: sessionId,
+      step: 'confirm',
+      source: {
+        path: sourcePath,
+        name: projectName,
+        runtimeVersion: 'react17'
+      },
+      target: {
+        path: '', // Will be set when user confirms
+        copied: false
+      }
+    };
+
+    this.notifyListeners('sessionCreated', { session: this.session });
+    return this.session;
+  }
+
+  /**
+   * Gets the current session
+   */
+  getSession(): MigrationSessionState | null {
+    return this.session;
+  }
+
+  /**
+   * Gets the current step
+   */
+  getCurrentStep(): MigrationStep | null {
+    return this.session?.step ?? null;
+  }
+
+  /**
+   * Validates if a step transition is allowed
+   */
+  private canTransitionTo(from: MigrationStep, to: MigrationStep): boolean {
+    const allowedTransitions: Record<MigrationStep, MigrationStep[]> = {
+      confirm: ['scanning'],
+      scanning: ['report', 'failed'],
+      report: ['configureAi', 'migrating'], // Can skip AI config if no AI needed
+      configureAi: ['migrating'],
+      migrating: ['complete', 'failed'],
+      complete: [], // Terminal state
+      failed: ['confirm'] // Can retry from beginning
+    };
+
+    return allowedTransitions[from]?.includes(to) ?? false;
+  }
+
+  /**
+   * Transitions to a new step
+   */
+  async transitionTo(step: MigrationStep): Promise<void> {
+    if (!this.session) {
+      throw new Error('No active migration session');
+    }
+
+    const currentStep = this.session.step;
+
+    if (!this.canTransitionTo(currentStep, step)) {
+      throw new Error(
+        `Invalid transition from "${currentStep}" to "${step}"`
+      );
+    }
+
+    const previousStep = this.session.step;
+    this.session.step = step;
+
+    this.notifyListeners('stepChanged', {
+      session: this.session,
+      previousStep,
+      newStep: step
+    });
+  }
+
+  /**
+   * Sets the target path for the migrated project copy
+   */
+  setTargetPath(targetPath: string): void {
+    if (!this.session) {
+      throw new Error('No active migration session');
+    }
+
+    this.session.target.path = targetPath;
+    this.notifyListeners('targetPathSet', {
+      session: this.session,
+      targetPath
+    });
+  }
+
+  /**
+   * Starts scanning the project for migration needs
+   */
+  async startScanning(): Promise<MigrationScan> {
+    if (!this.session) {
+      throw new Error('No active migration session');
+    }
+
+    await this.transitionTo('scanning');
+
+    try {
+      const scan = await scanProjectForMigration(
+        this.session.source.path,
+        (progress, currentItem, stats) => {
+          this.notifyListeners('scanProgress', {
+            session: this.session,
+            progress,
+            currentItem,
+            stats
+          });
+        }
+      );
+
+      this.session.scan = scan;
+      await this.transitionTo('report');
+
+      this.notifyListeners('scanComplete', {
+        session: this.session,
+        scan
+      });
+
+      return scan;
+    } catch (error) {
+      await this.transitionTo('failed');
+      throw error;
+    }
+  }
+
+  /**
+   * Configures AI settings for the migration
+   */
+  configureAI(config: Partial<AIConfig>): void {
+    if (!this.session) {
+      throw new Error('No active migration session');
+    }
+
+    this.session.ai = {
+      enabled: config.enabled ?? false,
+      apiKey: config.apiKey,
+      budget: config.budget ?? DEFAULT_AI_BUDGET,
+      preferences: config.preferences ?? DEFAULT_AI_PREFERENCES
+    };
+
+    this.notifyListeners('aiConfigured', {
+      session: this.session,
+      ai: this.session.ai
+    });
+  }
+
+  /**
+   * Starts the migration process
+   */
+  async startMigration(): Promise<MigrationResult> {
+    if (!this.session) {
+      throw new Error('No active migration session');
+    }
+
+    if (!this.session.scan) {
+      throw new Error('Project must be scanned before migration');
+    }
+
+    await this.transitionTo('migrating');
+
+    const startTime = Date.now();
+
+    // Initialize progress
+    this.session.progress = {
+      phase: 'copying',
+      current: 0,
+      total: this.getTotalMigrationSteps(),
+      log: []
+    };
+
+    try {
+      // Phase 1: Copy project
+      await this.executeCopyPhase();
+
+      // Phase 2: Automatic migrations
+      await this.executeAutomaticPhase();
+
+      // Phase 3: AI-assisted migrations (if enabled)
+      if (this.session.ai?.enabled) {
+        await this.executeAIAssistedPhase();
+      }
+
+      // Phase 4: Finalize
+      await this.executeFinalizePhase();
+
+      // Calculate result
+      const result: MigrationResult = {
+        success: true,
+        migrated: this.getSuccessfulMigrationCount(),
+        needsReview: this.getNeedsReviewCount(),
+        failed: this.getFailedCount(),
+        totalCost: this.session.ai?.budget.spent ?? 0,
+        duration: Date.now() - startTime
+      };
+
+      this.session.result = result;
+      await this.transitionTo('complete');
+
+      this.notifyListeners('migrationComplete', {
+        session: this.session,
+        result
+      });
+
+      return result;
+    } catch (error) {
+      const result: MigrationResult = {
+        success: false,
+        migrated: this.getSuccessfulMigrationCount(),
+        needsReview: this.getNeedsReviewCount(),
+        failed: this.getFailedCount() + 1,
+        totalCost: this.session.ai?.budget.spent ?? 0,
+        duration: Date.now() - startTime
+      };
+
+      this.session.result = result;
+      await this.transitionTo('failed');
+
+      this.notifyListeners('migrationFailed', {
+        session: this.session,
+        error,
+        result
+      });
+
+      throw error;
+    }
+  }
+
+  /**
+   * Adds a log entry to the migration progress
+   */
+  addLogEntry(entry: Omit<MigrationLogEntry, 'timestamp'>): void {
+    if (!this.session?.progress) return;
+
+    const logEntry: MigrationLogEntry = {
+      ...entry,
+      timestamp: new Date().toISOString()
+    };
+
+    this.session.progress.log.push(logEntry);
+
+    this.notifyListeners('logEntry', {
+      session: this.session,
+      entry: logEntry
+    });
+  }
+
+  /**
+   * Updates migration progress
+   */
+  updateProgress(updates: Partial<MigrationProgress>): void {
+    if (!this.session?.progress) return;
+
+    Object.assign(this.session.progress, updates);
+
+    this.notifyListeners('progressUpdated', {
+      session: this.session,
+      progress: this.session.progress
+    });
+  }
+
+  /**
+   * Cancels the current migration session
+   */
+  cancelSession(): void {
+    if (!this.session) return;
+
+    const session = this.session;
+    this.session = null;
+
+    this.notifyListeners('sessionCancelled', { session });
+  }
+
+  /**
+   * Resets a failed session to retry
+   */
+  async resetForRetry(): Promise<void> {
+    if (!this.session) {
+      throw new Error('No active migration session');
+    }
+
+    if (this.session.step !== 'failed') {
+      throw new Error('Can only reset failed sessions');
+    }
+
+    await this.transitionTo('confirm');
+
+    // Clear progress and result
+    this.session.progress = undefined;
+    this.session.result = undefined;
+    this.session.target.copied = false;
+
+    this.notifyListeners('sessionReset', { session: this.session });
+  }
+
+  // ===========================================================================
+  // Private Migration Phase Methods
+  // ===========================================================================
+
+  private getTotalMigrationSteps(): number {
+    if (!this.session?.scan) return 0;
+    const { categories } = this.session.scan;
+    return (
+      1 + // Copy phase
+      categories.automatic.length +
+      categories.simpleFixes.length +
+      categories.needsReview.length +
+      1 // Finalize phase
+    );
+  }
+
+  private getSuccessfulMigrationCount(): number {
+    // Count from log entries
+    return (
+      this.session?.progress?.log.filter((l) => l.level === 'success').length ?? 0
+    );
+  }
+
+  private getNeedsReviewCount(): number {
+    return this.session?.scan?.categories.needsReview.length ?? 0;
+  }
+
+  private getFailedCount(): number {
+    return (
+      this.session?.progress?.log.filter((l) => l.level === 'error').length ?? 0
+    );
+  }
+
+  private async executeCopyPhase(): Promise<void> {
+    this.updateProgress({ phase: 'copying', current: 0 });
+    this.addLogEntry({
+      level: 'info',
+      message: 'Creating project copy...'
+    });
+
+    // TODO: Implement actual file copying using filesystem
+    // For now, this is a placeholder
+
+    await this.simulateDelay(500);
+
+    if (this.session) {
+      this.session.target.copied = true;
+    }
+
+    this.addLogEntry({
+      level: 'success',
+      message: 'Project copied successfully'
+    });
+
+    this.updateProgress({ current: 1 });
+  }
+
+  private async executeAutomaticPhase(): Promise<void> {
+    if (!this.session?.scan) return;
+
+    this.updateProgress({ phase: 'automatic' });
+    this.addLogEntry({
+      level: 'info',
+      message: 'Applying automatic migrations...'
+    });
+
+    const { automatic, simpleFixes } = this.session.scan.categories;
+    const allAutomatic = [...automatic, ...simpleFixes];
+
+    for (let i = 0; i < allAutomatic.length; i++) {
+      const component = allAutomatic[i];
+
+      this.updateProgress({
+        current: 1 + i,
+        currentComponent: component.name
+      });
+
+      // TODO: Implement actual automatic fixes
+      await this.simulateDelay(100);
+
+      this.addLogEntry({
+        level: 'success',
+        component: component.name,
+        message: `Migrated automatically`
+      });
+    }
+  }
+
+  private async executeAIAssistedPhase(): Promise<void> {
+    if (!this.session?.scan || !this.session.ai?.enabled) return;
+
+    this.updateProgress({ phase: 'ai-assisted' });
+    this.addLogEntry({
+      level: 'info',
+      message: 'Starting AI-assisted migration...'
+    });
+
+    const { needsReview } = this.session.scan.categories;
+
+    for (let i = 0; i < needsReview.length; i++) {
+      const component = needsReview[i];
+
+      this.updateProgress({
+        currentComponent: component.name
+      });
+
+      // TODO: Implement actual AI migration using Claude API
+      await this.simulateDelay(200);
+
+      this.addLogEntry({
+        level: 'warning',
+        component: component.name,
+        message: 'AI migration not yet implemented - marked for manual review'
+      });
+    }
+  }
+
+  private async executeFinalizePhase(): Promise<void> {
+    this.updateProgress({ phase: 'finalizing' });
+    this.addLogEntry({
+      level: 'info',
+      message: 'Finalizing migration...'
+    });
+
+    // TODO: Update project.json with migration metadata
+    await this.simulateDelay(200);
+
+    this.addLogEntry({
+      level: 'success',
+      message: 'Migration finalized'
+    });
+
+    this.updateProgress({
+      current: this.getTotalMigrationSteps()
+    });
+  }
+
+  private simulateDelay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+}
+
+// =============================================================================
+// Singleton Export
+// =============================================================================
+
+/**
+ * Global migration session manager instance
+ */
+export const migrationSessionManager = new MigrationSessionManager();
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Checks if a project needs migration
+ */
+export async function checkProjectNeedsMigration(
+  projectPath: string
+): Promise<{
+  needsMigration: boolean;
+  versionInfo: RuntimeVersionInfo;
+}> {
+  const versionInfo = await detectRuntimeVersion(projectPath);
+
+  return {
+    needsMigration: versionInfo.version === 'react17' || versionInfo.version === 'unknown',
+    versionInfo
+  };
+}
+
+/**
+ * Gets a human-readable step label
+ */
+export function getStepLabel(step: MigrationStep): string {
+  const labels: Record<MigrationStep, string> = {
+    confirm: 'Confirm Migration',
+    scanning: 'Scanning Project',
+    report: 'Migration Report',
+    configureAi: 'Configure AI Assistance',
+    migrating: 'Migrating',
+    complete: 'Migration Complete',
+    failed: 'Migration Failed'
+  };
+  return labels[step];
+}
+
+/**
+ * Gets the step number for progress display (1-indexed)
+ */
+export function getStepNumber(step: MigrationStep): number {
+  const order: MigrationStep[] = [
+    'confirm',
+    'scanning',
+    'report',
+    'configureAi',
+    'migrating',
+    'complete'
+  ];
+  const index = order.indexOf(step);
+  return index >= 0 ? index + 1 : 0;
+}
+
+/**
+ * Gets total number of steps for progress display
+ */
+export function getTotalSteps(includeAi: boolean): number {
+  return includeAi ? 6 : 5;
+}

packages/noodl-editor/src/editor/src/models/migration/ProjectScanner.ts

@@ -0,0 +1,619 @@
+/**
+ * ProjectScanner
+ *
+ * Handles detection of project runtime versions and scanning for legacy React patterns
+ * that need migration. Uses a 5-tier detection system with confidence levels.
+ *
+ * @module noodl-editor/models/migration
+ * @since 1.2.0
+ */
+
+import { filesystem } from '@noodl/platform';
+
+import {
+  RuntimeVersionInfo,
+  RuntimeVersion,
+  LegacyPatternScan,
+  LegacyPattern,
+  MigrationScan,
+  ComponentMigrationInfo,
+  MigrationIssue
+} from './types';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * OpenNoodl version number that introduced React 19
+ * Projects created with this version or later use React 19
+ */
+const REACT19_MIN_VERSION = '1.2.0';
+
+/**
+ * Date when OpenNoodl fork was created
+ * Projects before this date are assumed to be legacy React 17
+ */
+const OPENNOODL_FORK_DATE = new Date('2024-01-01');
+
+/**
+ * Patterns to detect legacy React code that needs migration
+ */
+const LEGACY_PATTERNS: LegacyPattern[] = [
+  {
+    regex: /componentWillMount\s*\(/,
+    name: 'componentWillMount',
+    type: 'componentWillMount',
+    description: 'componentWillMount lifecycle method (removed in React 19)',
+    autoFixable: false
+  },
+  {
+    regex: /componentWillReceiveProps\s*\(/,
+    name: 'componentWillReceiveProps',
+    type: 'componentWillReceiveProps',
+    description: 'componentWillReceiveProps lifecycle method (removed in React 19)',
+    autoFixable: false
+  },
+  {
+    regex: /componentWillUpdate\s*\(/,
+    name: 'componentWillUpdate',
+    type: 'componentWillUpdate',
+    description: 'componentWillUpdate lifecycle method (removed in React 19)',
+    autoFixable: false
+  },
+  {
+    regex: /UNSAFE_componentWillMount/,
+    name: 'UNSAFE_componentWillMount',
+    type: 'unsafeLifecycle',
+    description: 'UNSAFE_componentWillMount lifecycle method (removed in React 19)',
+    autoFixable: false
+  },
+  {
+    regex: /UNSAFE_componentWillReceiveProps/,
+    name: 'UNSAFE_componentWillReceiveProps',
+    type: 'unsafeLifecycle',
+    description: 'UNSAFE_componentWillReceiveProps lifecycle method (removed in React 19)',
+    autoFixable: false
+  },
+  {
+    regex: /UNSAFE_componentWillUpdate/,
+    name: 'UNSAFE_componentWillUpdate',
+    type: 'unsafeLifecycle',
+    description: 'UNSAFE_componentWillUpdate lifecycle method (removed in React 19)',
+    autoFixable: false
+  },
+  {
+    regex: /ref\s*=\s*["'][^"']+["']/,
+    name: 'String ref',
+    type: 'stringRef',
+    description: 'String refs are removed in React 19, use createRef() or useRef()',
+    autoFixable: true
+  },
+  {
+    regex: /contextTypes\s*=/,
+    name: 'Legacy contextTypes',
+    type: 'legacyContext',
+    description: 'Legacy contextTypes API is removed in React 19',
+    autoFixable: false
+  },
+  {
+    regex: /childContextTypes\s*=/,
+    name: 'Legacy childContextTypes',
+    type: 'legacyContext',
+    description: 'Legacy childContextTypes API is removed in React 19',
+    autoFixable: false
+  },
+  {
+    regex: /getChildContext\s*\(/,
+    name: 'getChildContext',
+    type: 'legacyContext',
+    description: 'getChildContext method is removed in React 19',
+    autoFixable: false
+  },
+  {
+    regex: /React\.createFactory/,
+    name: 'createFactory',
+    type: 'createFactory',
+    description: 'React.createFactory is removed in React 19',
+    autoFixable: true
+  },
+  {
+    regex: /ReactDOM\.findDOMNode/,
+    name: 'findDOMNode',
+    type: 'findDOMNode',
+    description: 'ReactDOM.findDOMNode is removed in React 19',
+    autoFixable: false
+  },
+  {
+    regex: /ReactDOM\.render\s*\(/,
+    name: 'ReactDOM.render',
+    type: 'reactDomRender',
+    description: 'ReactDOM.render is removed in React 19, use createRoot',
+    autoFixable: true
+  }
+];
+
+// =============================================================================
+// Project JSON Types
+// =============================================================================
+
+interface ProjectJson {
+  name?: string;
+  version?: string;
+  editorVersion?: string;
+  runtimeVersion?: RuntimeVersion;
+  migratedFrom?: {
+    version: 'react17';
+    date: string;
+    originalPath: string;
+    aiAssisted: boolean;
+  };
+  createdAt?: string;
+  components?: Array<{
+    id: string;
+    name: string;
+    graph?: unknown;
+  }>;
+  metadata?: Record<string, unknown>;
+  settings?: Record<string, unknown>;
+}
+
+// =============================================================================
+// Version Detection
+// =============================================================================
+
+/**
+ * Compares two semantic version strings
+ * @returns -1 if a < b, 0 if a == b, 1 if a > b
+ */
+function compareVersions(a: string, b: string): number {
+  const partsA = a.split('.').map(Number);
+  const partsB = b.split('.').map(Number);
+
+  for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
+    const numA = partsA[i] || 0;
+    const numB = partsB[i] || 0;
+    if (numA < numB) return -1;
+    if (numA > numB) return 1;
+  }
+  return 0;
+}
+
+/**
+ * Reads the project.json file from a project directory
+ */
+async function readProjectJson(projectPath: string): Promise<ProjectJson | null> {
+  try {
+    const projectJsonPath = `${projectPath}/project.json`;
+    const content = await filesystem.readJson(projectJsonPath);
+    return content as ProjectJson;
+  } catch (error) {
+    console.warn(`Could not read project.json from ${projectPath}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Gets the creation date of a project from filesystem metadata
+ * Note: The IFileSystem interface doesn't expose birthtime, so this returns null
+ * and relies on other detection methods. Could be enhanced in platform-electron.
+ */
+async function getProjectCreationDate(_projectPath: string): Promise<Date | null> {
+  // IFileSystem doesn't have stat or birthtime access
+  // This would need platform-specific implementation
+  return null;
+}
+
+/**
+ * Detects the runtime version of a project using a 5-tier detection system.
+ *
+ * Detection order:
+ * 1. Explicit runtimeVersion field in project.json (highest confidence)
+ * 2. migratedFrom metadata (indicates already migrated)
+ * 3. Editor version number comparison
+ * 4. Legacy code pattern scanning
+ * 5. Project creation date heuristic (lowest confidence)
+ *
+ * @param projectPath - Path to the project directory
+ * @returns Runtime version info with confidence level
+ */
+export async function detectRuntimeVersion(projectPath: string): Promise<RuntimeVersionInfo> {
+  const indicators: string[] = [];
+
+  // Read project.json
+  const projectJson = await readProjectJson(projectPath);
+
+  if (!projectJson) {
+    return {
+      version: 'unknown',
+      confidence: 'low',
+      indicators: ['Could not read project.json']
+    };
+  }
+
+  // ==========================================================================
+  // Check 1: Explicit runtimeVersion field (most reliable)
+  // ==========================================================================
+  if (projectJson.runtimeVersion) {
+    return {
+      version: projectJson.runtimeVersion,
+      confidence: 'high',
+      indicators: ['Explicit runtimeVersion field in project.json']
+    };
+  }
+
+  // ==========================================================================
+  // Check 2: Look for migratedFrom field (indicates already migrated)
+  // ==========================================================================
+  if (projectJson.migratedFrom) {
+    return {
+      version: 'react19',
+      confidence: 'high',
+      indicators: ['Project has migratedFrom metadata - already migrated']
+    };
+  }
+
+  // ==========================================================================
+  // Check 3: Check editor version number
+  // OpenNoodl 1.2+ = React 19, earlier = React 17
+  // ==========================================================================
+  const editorVersion = projectJson.editorVersion || projectJson.version;
+  if (editorVersion && typeof editorVersion === 'string') {
+    // Clean up version string (remove 'v' prefix if present)
+    const cleanVersion = editorVersion.replace(/^v/, '');
+
+    // Check if it's a valid semver-like string
+    if (/^\d+\.\d+/.test(cleanVersion)) {
+      const comparison = compareVersions(cleanVersion, REACT19_MIN_VERSION);
+
+      if (comparison >= 0) {
+        indicators.push(`Editor version ${editorVersion} >= ${REACT19_MIN_VERSION}`);
+        return {
+          version: 'react19',
+          confidence: 'high',
+          indicators
+        };
+      } else {
+        indicators.push(`Editor version ${editorVersion} < ${REACT19_MIN_VERSION}`);
+        return {
+          version: 'react17',
+          confidence: 'high',
+          indicators
+        };
+      }
+    }
+  }
+
+  // ==========================================================================
+  // Check 4: Heuristic - scan for React 17 specific patterns in custom code
+  // ==========================================================================
+  const legacyPatterns = await scanForLegacyPatterns(projectPath);
+  if (legacyPatterns.found) {
+    indicators.push(`Found legacy React patterns: ${legacyPatterns.patterns.join(', ')}`);
+    return {
+      version: 'react17',
+      confidence: 'medium',
+      indicators
+    };
+  }
+
+  // ==========================================================================
+  // Check 5: Project creation date heuristic
+  // Projects created before OpenNoodl fork are assumed React 17
+  // ==========================================================================
+  const createdAt = projectJson.createdAt
+    ? new Date(projectJson.createdAt)
+    : await getProjectCreationDate(projectPath);
+
+  if (createdAt && createdAt < OPENNOODL_FORK_DATE) {
+    indicators.push(`Project created ${createdAt.toISOString()} (before OpenNoodl fork)`);
+    return {
+      version: 'react17',
+      confidence: 'medium',
+      indicators
+    };
+  }
+
+  // ==========================================================================
+  // Default: Unknown - could be either version
+  // ==========================================================================
+  return {
+    version: 'unknown',
+    confidence: 'low',
+    indicators: ['No version indicators found - manual verification recommended']
+  };
+}
+
+// =============================================================================
+// Legacy Pattern Scanning
+// =============================================================================
+
+/**
+ * Scans a project directory for legacy React patterns in JavaScript files.
+ * Looks for componentWillMount, string refs, legacy context, etc.
+ *
+ * @param projectPath - Path to the project directory
+ * @returns Object containing found patterns and file locations
+ */
+export async function scanForLegacyPatterns(projectPath: string): Promise<LegacyPatternScan> {
+  const result: LegacyPatternScan = {
+    found: false,
+    patterns: [],
+    files: []
+  };
+
+  try {
+    // List all files in the project directory
+    const allFiles = await listFilesRecursively(projectPath);
+
+    // Filter to JS/JSX/TS/TSX files, excluding node_modules
+    const jsFiles = allFiles.filter((file) => {
+      const isJsFile = /\.(js|jsx|ts|tsx)$/.test(file);
+      const isNotNodeModules = !file.includes('node_modules');
+      return isJsFile && isNotNodeModules;
+    });
+
+    // Scan each file for legacy patterns
+    for (const file of jsFiles) {
+      try {
+        const content = await filesystem.readFile(file);
+        const lines = content.split('\n');
+
+        for (const pattern of LEGACY_PATTERNS) {
+          lines.forEach((line, index) => {
+            if (pattern.regex.test(line)) {
+              result.found = true;
+
+              if (!result.patterns.includes(pattern.name)) {
+                result.patterns.push(pattern.name);
+              }
+
+              result.files.push({
+                path: file,
+                line: index + 1,
+                pattern: pattern.name,
+                content: line.trim()
+              });
+            }
+          });
+        }
+      } catch (readError) {
+        // Skip files we can't read
+        console.warn(`Could not read file ${file}:`, readError);
+      }
+    }
+  } catch (error) {
+    console.error('Error scanning for legacy patterns:', error);
+  }
+
+  return result;
+}
+
+/**
+ * Recursively lists all files in a directory
+ */
+async function listFilesRecursively(dirPath: string): Promise<string[]> {
+  const files: string[] = [];
+
+  try {
+    const entries = await filesystem.listDirectory(dirPath);
+
+    for (const entry of entries) {
+      if (entry.isDirectory) {
+        // Skip node_modules and hidden directories
+        if (entry.name.startsWith('.') || entry.name === 'node_modules') {
+          continue;
+        }
+        const subFiles = await listFilesRecursively(entry.fullPath);
+        files.push(...subFiles);
+      } else {
+        files.push(entry.fullPath);
+      }
+    }
+  } catch (error) {
+    console.warn(`Could not list directory ${dirPath}:`, error);
+  }
+
+  return files;
+}
+
+// =============================================================================
+// Full Project Scan
+// =============================================================================
+
+/**
+ * Counter for generating unique issue IDs
+ */
+let issueIdCounter = 0;
+
+/**
+ * Generates a unique issue ID
+ */
+function generateIssueId(): string {
+  return `issue-${Date.now()}-${++issueIdCounter}`;
+}
+
+/**
+ * Performs a full migration scan of a project.
+ * Analyzes all components and JS files for migration needs.
+ *
+ * @param projectPath - Path to the project directory
+ * @param onProgress - Optional callback for progress updates
+ * @returns Full migration scan results
+ */
+export async function scanProjectForMigration(
+  projectPath: string,
+  onProgress?: (progress: number, currentItem: string, stats: { components: number; nodes: number; jsFiles: number }) => void
+): Promise<MigrationScan> {
+  const projectJson = await readProjectJson(projectPath);
+
+  const stats = {
+    components: 0,
+    nodes: 0,
+    jsFiles: 0
+  };
+
+  const categories: MigrationScan['categories'] = {
+    automatic: [],
+    simpleFixes: [],
+    needsReview: []
+  };
+
+  // Count components from project.json
+  if (projectJson?.components) {
+    stats.components = projectJson.components.length;
+
+    // Count total nodes across all components
+    projectJson.components.forEach((component) => {
+      if (component.graph && typeof component.graph === 'object') {
+        const graph = component.graph as { roots?: Array<{ children?: unknown[] }> };
+        if (graph.roots) {
+          stats.nodes += countNodesInRoots(graph.roots);
+        }
+      }
+    });
+  }
+
+  // Scan JavaScript files for issues
+  const allFiles = await listFilesRecursively(projectPath);
+  const jsFiles = allFiles.filter(
+    (file) => /\.(js|jsx|ts|tsx)$/.test(file) && !file.includes('node_modules')
+  );
+  stats.jsFiles = jsFiles.length;
+
+  // Group issues by file/component
+  const fileIssues: Map<string, MigrationIssue[]> = new Map();
+
+  for (let i = 0; i < jsFiles.length; i++) {
+    const file = jsFiles[i];
+    const relativePath = file.replace(projectPath, '').replace(/^\//, '');
+
+    onProgress?.((i / jsFiles.length) * 100, relativePath, stats);
+
+    try {
+      const content = await filesystem.readFile(file);
+      const lines = content.split('\n');
+      const issues: MigrationIssue[] = [];
+
+      for (const pattern of LEGACY_PATTERNS) {
+        lines.forEach((line, lineIndex) => {
+          if (pattern.regex.test(line)) {
+            issues.push({
+              id: generateIssueId(),
+              type: pattern.type,
+              description: pattern.description,
+              location: {
+                file: relativePath,
+                line: lineIndex + 1
+              },
+              autoFixable: pattern.autoFixable,
+              fix: pattern.autoFixable
+                ? { type: 'automatic', description: `Auto-fix ${pattern.name}` }
+                : { type: 'ai-required', description: `AI assistance needed for ${pattern.name}` }
+            });
+          }
+        });
+      }
+
+      if (issues.length > 0) {
+        fileIssues.set(relativePath, issues);
+      }
+    } catch {
+      // Skip files we can't read
+    }
+  }
+
+  // Categorize files by issue severity
+  for (const [filePath, issues] of fileIssues.entries()) {
+    const hasAutoFixableOnly = issues.every((issue) => issue.autoFixable);
+    const estimatedCost = estimateAICost(issues.length);
+
+    const componentInfo: ComponentMigrationInfo = {
+      id: filePath.replace(/[^a-zA-Z0-9]/g, '-'),
+      name: filePath.split('/').pop() || filePath,
+      path: filePath,
+      issues,
+      estimatedCost: hasAutoFixableOnly ? 0 : estimatedCost
+    };
+
+    if (hasAutoFixableOnly) {
+      categories.simpleFixes.push(componentInfo);
+    } else {
+      categories.needsReview.push(componentInfo);
+    }
+  }
+
+  // All components without issues are automatic
+  if (projectJson?.components) {
+    const filesWithIssues = new Set(fileIssues.keys());
+
+    projectJson.components.forEach((component) => {
+      // Check if this component has any JS with issues
+      // For now, assume all components without explicit issues are automatic
+      const componentPath = component.name.replace(/\//g, '-');
+
+      if (!filesWithIssues.has(componentPath)) {
+        categories.automatic.push({
+          id: component.id,
+          name: component.name,
+          path: component.name,
+          issues: [],
+          estimatedCost: 0
+        });
+      }
+    });
+  }
+
+  return {
+    completedAt: new Date().toISOString(),
+    totalComponents: stats.components,
+    totalNodes: stats.nodes,
+    customJsFiles: stats.jsFiles,
+    categories
+  };
+}
+
+/**
+ * Counts nodes in a graph roots array
+ */
+function countNodesInRoots(roots: Array<{ children?: unknown[] }>): number {
+  let count = 0;
+
+  function countRecursive(nodes: unknown[]): void {
+    for (const node of nodes) {
+      count++;
+      if (node && typeof node === 'object' && 'children' in node) {
+        const children = (node as { children?: unknown[] }).children;
+        if (Array.isArray(children)) {
+          countRecursive(children);
+        }
+      }
+    }
+  }
+
+  countRecursive(roots);
+  return count;
+}
+
+/**
+ * Estimates AI cost for migrating issues
+ * Based on ~$0.01 per simple issue, ~$0.05 per complex issue
+ */
+function estimateAICost(issueCount: number): number {
+  // Rough estimate: $0.03 per issue on average
+  return issueCount * 0.03;
+}
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export {
+  LEGACY_PATTERNS,
+  REACT19_MIN_VERSION,
+  OPENNOODL_FORK_DATE,
+  readProjectJson,
+  compareVersions
+};
+
+export type { ProjectJson };

packages/noodl-editor/src/editor/src/models/migration/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Migration Module
+ *
+ * Provides tools for migrating legacy Noodl projects (React 17)
+ * to the new OpenNoodl runtime (React 19).
+ *
+ * @module noodl-editor/models/migration
+ * @since 1.2.0
+ */
+
+// Types
+export * from './types';
+
+// Project Scanner
+export {
+  detectRuntimeVersion,
+  scanForLegacyPatterns,
+  scanProjectForMigration,
+  LEGACY_PATTERNS,
+  REACT19_MIN_VERSION,
+  OPENNOODL_FORK_DATE,
+  readProjectJson,
+  compareVersions
+} from './ProjectScanner';
+export type { ProjectJson } from './ProjectScanner';
+
+// Migration Session Manager
+export {
+  MigrationSessionManager,
+  migrationSessionManager,
+  checkProjectNeedsMigration,
+  getStepLabel,
+  getStepNumber,
+  getTotalSteps
+} from './MigrationSession';

packages/noodl-editor/src/editor/src/models/migration/types.ts

@@ -0,0 +1,347 @@
+/**
+ * Migration System Types
+ * 
+ * Type definitions for the React 19 migration system that allows users
+ * to upgrade legacy Noodl projects (React 17) to the new OpenNoodl runtime (React 19).
+ * 
+ * @module noodl-editor/models/migration
+ * @since 1.2.0
+ */
+
+// =============================================================================
+// Runtime Version Types
+// =============================================================================
+
+export type RuntimeVersion = 'react17' | 'react19' | 'unknown';
+
+export type ConfidenceLevel = 'high' | 'medium' | 'low';
+
+/**
+ * Result of detecting the runtime version of a project
+ */
+export interface RuntimeVersionInfo {
+  version: RuntimeVersion;
+  confidence: ConfidenceLevel;
+  indicators: string[];
+}
+
+// =============================================================================
+// Migration Issue Types
+// =============================================================================
+
+export type MigrationIssueType =
+  | 'componentWillMount'
+  | 'componentWillReceiveProps'
+  | 'componentWillUpdate'
+  | 'unsafeLifecycle'
+  | 'stringRef'
+  | 'legacyContext'
+  | 'createFactory'
+  | 'findDOMNode'
+  | 'reactDomRender'
+  | 'other';
+
+/**
+ * A specific migration issue found in a component
+ */
+export interface MigrationIssue {
+  id: string;
+  type: MigrationIssueType;
+  description: string;
+  location: {
+    file: string;
+    line: number;
+    column?: number;
+  };
+  autoFixable: boolean;
+  fix?: {
+    type: 'automatic' | 'ai-required';
+    description: string;
+  };
+}
+
+/**
+ * Information about a component that needs migration
+ */
+export interface ComponentMigrationInfo {
+  id: string;
+  name: string;
+  path: string;
+  issues: MigrationIssue[];
+  estimatedCost?: number;
+}
+
+// =============================================================================
+// Migration Session Types
+// =============================================================================
+
+export type MigrationStep =
+  | 'confirm'
+  | 'scanning'
+  | 'report'
+  | 'configureAi'
+  | 'migrating'
+  | 'complete'
+  | 'failed';
+
+export type MigrationPhase = 'copying' | 'automatic' | 'ai-assisted' | 'finalizing';
+
+/**
+ * Results of scanning a project for migration needs
+ */
+export interface MigrationScan {
+  completedAt: string;
+  totalComponents: number;
+  totalNodes: number;
+  customJsFiles: number;
+  categories: {
+    /** Components that migrate automatically (no code changes) */
+    automatic: ComponentMigrationInfo[];
+    /** Components with simple, auto-fixable issues */
+    simpleFixes: ComponentMigrationInfo[];
+    /** Components that need manual review or AI assistance */
+    needsReview: ComponentMigrationInfo[];
+  };
+}
+
+/**
+ * A single entry in the migration log
+ */
+export interface MigrationLogEntry {
+  timestamp: string;
+  level: 'info' | 'success' | 'warning' | 'error';
+  component?: string;
+  message: string;
+  details?: string;
+  cost?: number;
+}
+
+/**
+ * Progress information during migration
+ */
+export interface MigrationProgress {
+  phase: MigrationPhase;
+  current: number;
+  total: number;
+  currentComponent?: string;
+  log: MigrationLogEntry[];
+}
+
+/**
+ * Final result of a migration
+ */
+export interface MigrationResult {
+  success: boolean;
+  migrated: number;
+  needsReview: number;
+  failed: number;
+  totalCost: number;
+  duration: number;
+}
+
+/**
+ * Complete migration session state
+ */
+export interface MigrationSession {
+  id: string;
+  step: MigrationStep;
+
+  /** Source project (React 17) */
+  source: {
+    path: string;
+    name: string;
+    runtimeVersion: 'react17';
+  };
+
+  /** Target (copy) project */
+  target: {
+    path: string;
+    copied: boolean;
+  };
+
+  /** Scan results */
+  scan?: MigrationScan;
+
+  /** AI configuration */
+  ai?: AIConfig;
+
+  /** Migration progress */
+  progress?: MigrationProgress;
+
+  /** Final result */
+  result?: MigrationResult;
+}
+
+// =============================================================================
+// AI Migration Types
+// =============================================================================
+
+/**
+ * Budget configuration for AI-assisted migration
+ */
+export interface AIBudget {
+  /** Maximum spend per migration session in dollars */
+  maxPerSession: number;
+  /** Amount spent so far */
+  spent: number;
+  /** Pause and ask after each increment */
+  pauseIncrement: number;
+  /** Whether to show cost estimates */
+  showEstimates: boolean;
+}
+
+/**
+ * User preferences for AI migration
+ */
+export interface AIPreferences {
+  /** Prefer converting to functional components with hooks */
+  preferFunctional: boolean;
+  /** Keep existing code comments */
+  preserveComments: boolean;
+  /** Add explanatory comments to changes */
+  verboseOutput: boolean;
+}
+
+/**
+ * Complete AI configuration
+ */
+export interface AIConfig {
+  enabled: boolean;
+  /** API key - only stored in memory during session */
+  apiKey?: string;
+  budget: AIBudget;
+  preferences: AIPreferences;
+}
+
+/**
+ * Response from Claude when migrating a component
+ */
+export interface AIMigrationResponse {
+  success: boolean;
+  code: string | null;
+  changes: string[];
+  warnings: string[];
+  confidence: number;
+  reason?: string;
+  suggestion?: string;
+  tokensUsed: {
+    input: number;
+    output: number;
+  };
+  cost: number;
+}
+
+/**
+ * Request for user decision when AI migration fails
+ */
+export interface AIDecisionRequest {
+  componentId: string;
+  componentName: string;
+  attempts: number;
+  attemptHistory: Array<{
+    code: string | null;
+    error: string;
+    cost: number;
+  }>;
+  costSpent: number;
+  retryCost: number;
+}
+
+/**
+ * User's decision on how to proceed with a failed AI migration
+ */
+export interface AIDecision {
+  componentId: string;
+  action: 'retry' | 'skip' | 'manual' | 'getHelp';
+}
+
+// =============================================================================
+// Project Manifest Extensions
+// =============================================================================
+
+/**
+ * Status of a component after migration
+ */
+export type ComponentMigrationStatus = 'auto' | 'ai-migrated' | 'needs-review' | 'manually-fixed';
+
+/**
+ * Migration note for a component stored in project.json
+ */
+export interface ComponentMigrationNote {
+  status: ComponentMigrationStatus;
+  issues?: string[];
+  aiSuggestion?: string;
+  dismissedAt?: string;
+}
+
+/**
+ * Information about the original project before migration
+ */
+export interface MigratedFromInfo {
+  version: 'react17';
+  date: string;
+  originalPath: string;
+  aiAssisted: boolean;
+}
+
+/**
+ * Extensions to the project.json manifest for migration tracking
+ */
+export interface ProjectMigrationMetadata {
+  /** Current runtime version */
+  runtimeVersion?: RuntimeVersion;
+  /** Information about the source project if this was migrated */
+  migratedFrom?: MigratedFromInfo;
+  /** Migration notes per component */
+  migrationNotes?: Record<string, ComponentMigrationNote>;
+}
+
+// =============================================================================
+// Legacy Pattern Definitions
+// =============================================================================
+
+/**
+ * Pattern definition for detecting legacy React code
+ */
+export interface LegacyPattern {
+  regex: RegExp;
+  name: string;
+  type: MigrationIssueType;
+  description: string;
+  autoFixable: boolean;
+}
+
+/**
+ * Result of scanning for legacy patterns in a project
+ */
+export interface LegacyPatternScan {
+  found: boolean;
+  patterns: string[];
+  files: Array<{
+    path: string;
+    line: number;
+    pattern: string;
+    content?: string;
+  }>;
+}
+
+// =============================================================================
+// Event Types
+// =============================================================================
+
+export type MigrationEventType =
+  | 'scan-started'
+  | 'scan-progress'
+  | 'scan-complete'
+  | 'migration-started'
+  | 'migration-progress'
+  | 'migration-complete'
+  | 'migration-failed'
+  | 'ai-decision-required'
+  | 'budget-pause-required';
+
+export interface MigrationEvent {
+  type: MigrationEventType;
+  sessionId: string;
+  data?: unknown;
+}

packages/noodl-viewer-react/noodl-viewer-react.js

@@ -7,6 +7,9 @@ import Viewer, { ssrSetupRuntime } from './src/viewer.jsx';
 
 registerPolyfills();
 
+// React 19 root management
+let currentRoot = null;
+
 function createArgs() {
   // Support SSR
   if (typeof window === 'undefined') {
@@ -44,14 +47,31 @@ export default {
 
     const noodlRuntime = new NoodlRuntime(runtimeArgs);
 
-    ReactDOM.render(React.createElement(Viewer, { noodlRuntime, noodlModules }, null), element);
+    // React 19: Use createRoot instead of ReactDOM.render
+    if (currentRoot) {
+      currentRoot.unmount();
+    }
+    currentRoot = ReactDOM.createRoot(element);
+    currentRoot.render(React.createElement(Viewer, { noodlRuntime, noodlModules }, null));
   },
   renderDeployed(element, noodlModules, projectData) {
+    // React 19: Use hydrateRoot for SSR, createRoot for client-side
     // React SSR adds a 'data-reactroot' attribute on the root element to be able to hydrate the app.
     if (element.children.length > 0 && !!element.children[0].hasAttribute('data-reactroot')) {
-      ReactDOM.hydrate(this.createElement(noodlModules, projectData), element);
+      currentRoot = ReactDOM.hydrateRoot(element, this.createElement(noodlModules, projectData));
     } else {
-      ReactDOM.render(this.createElement(noodlModules, projectData), element);
+      if (currentRoot) {
+        currentRoot.unmount();
+      }
+      currentRoot = ReactDOM.createRoot(element);
+      currentRoot.render(this.createElement(noodlModules, projectData));
+    }
+  },
+  /** Unmount the current React root */
+  unmount() {
+    if (currentRoot) {
+      currentRoot.unmount();
+      currentRoot = null;
     }
   },
   /** This can be called for server side rendering too. */

packages/noodl-viewer-react/src/components/visual/Drag/Drag.tsx

@@ -73,18 +73,18 @@ export class Drag extends React.Component<DragProps, State> {
     setDragValues({ x, y, deltaX: 0, deltaY: 0 }, this.props);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps: DragProps) {
+  componentDidUpdate(prevProps: DragProps) {
     const props = this.props;
 
-    if (props.inputPositionX !== nextProps.inputPositionX) {
-      this.setState({ x: nextProps.inputPositionX });
-      props.positionX && props.positionX(nextProps.inputPositionX);
-      props.deltaX && props.deltaX(nextProps.inputPositionX - props.inputPositionX);
+    if (prevProps.inputPositionX !== props.inputPositionX) {
+      this.setState({ x: props.inputPositionX });
+      props.positionX && props.positionX(props.inputPositionX);
+      props.deltaX && props.deltaX(props.inputPositionX - prevProps.inputPositionX);
     }
-    if (props.inputPositionY !== nextProps.inputPositionY) {
-      this.setState({ y: nextProps.inputPositionY });
-      props.positionY && props.positionY(nextProps.inputPositionY);
-      props.deltaY && props.deltaY(nextProps.inputPositionY - props.inputPositionY);
+    if (prevProps.inputPositionY !== props.inputPositionY) {
+      this.setState({ y: props.inputPositionY });
+      props.positionY && props.positionY(props.inputPositionY);
+      props.deltaY && props.deltaY(props.inputPositionY - prevProps.inputPositionY);
     }
   }
 

packages/noodl-viewer-react/src/components/visual/Group/Group.tsx

@@ -68,19 +68,6 @@ export class Group extends React.Component<GroupProps> {
     this.props.noodlNode.context.setNodeFocused(this.props.noodlNode, false);
   }
 
-  componentDidUpdate() {
-    if (this.scrollNeedsToInit) {
-      this.setupIScroll();
-      this.scrollNeedsToInit = false;
-    }
-
-    if (this.iScroll) {
-      setTimeout(() => {
-        this.iScroll && this.iScroll.refresh();
-      }, 0);
-    }
-  }
-
   scrollToIndex(index, duration) {
     if (this.iScroll) {
       const child = this.scrollRef.current.children[0].children[index] as HTMLElement;
@@ -171,19 +158,19 @@ export class Group extends React.Component<GroupProps> {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps: GroupProps) {
+  componentDidUpdate(prevProps: GroupProps) {
     const scrollHasUpdated =
-      this.props.scrollSnapEnabled !== nextProps.scrollSnapEnabled ||
-      this.props.onScrollPositionChanged !== nextProps.onScrollPositionChanged ||
-      this.props.onScrollStart !== nextProps.onScrollStart ||
-      this.props.onScrollEnd !== nextProps.onScrollEnd ||
-      this.props.showScrollbar !== nextProps.showScrollbar ||
-      this.props.scrollEnabled !== nextProps.scrollEnabled ||
-      this.props.nativeScroll !== nextProps.nativeScroll ||
-      this.props.scrollSnapToEveryItem !== nextProps.scrollSnapToEveryItem ||
-      this.props.layout !== nextProps.layout ||
-      this.props.flexWrap !== nextProps.flexWrap ||
-      this.props.scrollBounceEnabled !== nextProps.scrollBounceEnabled;
+      prevProps.scrollSnapEnabled !== this.props.scrollSnapEnabled ||
+      prevProps.onScrollPositionChanged !== this.props.onScrollPositionChanged ||
+      prevProps.onScrollStart !== this.props.onScrollStart ||
+      prevProps.onScrollEnd !== this.props.onScrollEnd ||
+      prevProps.showScrollbar !== this.props.showScrollbar ||
+      prevProps.scrollEnabled !== this.props.scrollEnabled ||
+      prevProps.nativeScroll !== this.props.nativeScroll ||
+      prevProps.scrollSnapToEveryItem !== this.props.scrollSnapToEveryItem ||
+      prevProps.layout !== this.props.layout ||
+      prevProps.flexWrap !== this.props.flexWrap ||
+      prevProps.scrollBounceEnabled !== this.props.scrollBounceEnabled;
 
     if (scrollHasUpdated) {
       if (this.iScroll) {
@@ -191,7 +178,19 @@ export class Group extends React.Component<GroupProps> {
         this.iScroll = undefined;
       }
 
-      this.scrollNeedsToInit = nextProps.scrollEnabled && !nextProps.nativeScroll;
+      this.scrollNeedsToInit = this.props.scrollEnabled && !this.props.nativeScroll;
+    }
+
+    // Handle scroll initialization (moved from the old componentDidUpdate)
+    if (this.scrollNeedsToInit) {
+      this.setupIScroll();
+      this.scrollNeedsToInit = false;
+    }
+
+    if (this.iScroll) {
+      setTimeout(() => {
+        this.iScroll && this.iScroll.refresh();
+      }, 0);
     }
   }
 

packages/noodl-viewer-react/src/react-component-node.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import DOMBoundingBoxObserver from './dom-boundingbox-oberver';
 import Layout from './layout';
@@ -127,6 +126,14 @@ class NoodlReactComponent extends React.Component {
     const props = {
       ref: (ref) => {
         noodlNode.innerReactComponentRef = ref;
+        // React 19: Store DOM element reference directly for getDOMElement()
+        // This avoids using the deprecated findDOMNode
+        if (ref && ref instanceof Element) {
+          noodlNode._domElement = ref;
+        } else if (ref && typeof ref === 'object' && ref.nodeType === 1) {
+          // ref is already a DOM element
+          noodlNode._domElement = ref;
+        }
       },
       style: finalStyle,
       //the noodl props coming from the node
@@ -659,7 +666,15 @@ function createNodeFromReactComponent(def) {
           noodlNode: this,
           ref: (ref) => {
             this.reactComponentRef = ref;
-            this.boundingBoxObserver.setTarget(ReactDOM.findDOMNode(ref));
+            // React 19: Use stored DOM element instead of findDOMNode
+            // The _domElement is set by the ref callback in NoodlReactComponent
+            // We need to wait a frame for the inner ref to be set
+            if (ref) {
+              requestAnimationFrame(() => {
+                const domElement = this._domElement || this.getDOMElement();
+                this.boundingBoxObserver.setTarget(domElement);
+              });
+            }
           }
         });
       },
@@ -800,10 +815,28 @@ function createNodeFromReactComponent(def) {
         return this.reactComponentRef;
       },
       getDOMElement() {
-        const ref = this.getRef();
-        if (!ref) return;
+        // React 19: Use stored DOM element reference instead of findDOMNode
+        // The _domElement is set by the ref callback in NoodlReactComponent
+        if (this._domElement) {
+          return this._domElement;
+        }
         
-        return ReactDOM.findDOMNode(ref);
+        // Fallback: try to get DOM element from innerReactComponentRef
+        const innerRef = this.innerReactComponentRef;
+        if (innerRef && innerRef instanceof Element) {
+          return innerRef;
+        }
+        
+        // Legacy fallback for backwards compatibility (will be removed)
+        const ref = this.getRef();
+        if (!ref) return null;
+        
+        // If ref is a DOM element, return it directly
+        if (ref instanceof Element) {
+          return ref;
+        }
+        
+        return null;
       },
       getVisualParentNode() {
         if (this.parent) return this.parent;

packages/noodl-viewer-react/static/shared/react-dom.production.min.js

@@ -1,4 +1,5 @@
-/** @license React v16.8.1
+/**
+ * @license React
  * react-dom.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -6,214 +7,261 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
+(function(){/*
  Modernizr 3.0.0pre (Custom Build) | MIT
 */
-'use strict';(function(fa,ub){"object"===typeof exports&&"undefined"!==typeof module?module.exports=ub(require("react")):"function"===typeof define&&define.amd?define(["react"],ub):fa.ReactDOM=ub(fa.React)})(this,function(fa){function ub(a,b,c,d,e,f,g,h){if(!a){a=void 0;if(void 0===b)a=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[c,d,e,f,g,h],k=0;a=Error(b.replace(/%s/g,function(){return l[k++]}));
-a.name="Invariant Violation"}a.framesToPop=1;throw a;}}function n(a){for(var b=arguments.length-1,c="https://reactjs.org/docs/error-decoder.html?invariant="+a,d=0;d<b;d++)c+="&args[]="+encodeURIComponent(arguments[d+1]);ub(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",c)}function vh(a,b,c,d,e,f,g,h,l){vb=!1;fc=null;wh.apply(xh,arguments)}function yh(a,b,c,d,e,f,g,h,l){vh.apply(this,arguments);
-if(vb){if(vb){var k=fc;vb=!1;fc=null}else n("198"),k=void 0;gc||(gc=!0,dd=k)}}function Je(){if(hc)for(var a in Qa){var b=Qa[a],c=hc.indexOf(a);-1<c?void 0:n("96",a);if(!ic[c]){b.extractEvents?void 0:n("97",a);ic[c]=b;c=b.eventTypes;for(var d in c){var e=void 0;var f=c[d],g=b,h=d;ed.hasOwnProperty(h)?n("99",h):void 0;ed[h]=f;var l=f.phasedRegistrationNames;if(l){for(e in l)l.hasOwnProperty(e)&&Ke(l[e],g,h);e=!0}else f.registrationName?(Ke(f.registrationName,g,h),e=!0):e=!1;e?void 0:n("98",d,a)}}}}
-function Ke(a,b,c){Ra[a]?n("100",a):void 0;Ra[a]=b;fd[a]=b.eventTypes[c].dependencies}function Le(a,b,c){var d=a.type||"unknown-event";a.currentTarget=Me(c);yh(d,b,void 0,a);a.currentTarget=null}function Sa(a,b){null==b?n("30"):void 0;if(null==a)return b;if(Array.isArray(a)){if(Array.isArray(b))return a.push.apply(a,b),a;a.push(b);return a}return Array.isArray(b)?[a].concat(b):[a,b]}function gd(a,b,c){Array.isArray(a)?a.forEach(b,c):a&&b.call(c,a)}function Ne(a,b){var c=a.stateNode;if(!c)return null;
-var d=hd(c);if(!d)return null;c=d[b];a:switch(b){case "onClick":case "onClickCapture":case "onDoubleClick":case "onDoubleClickCapture":case "onMouseDown":case "onMouseDownCapture":case "onMouseMove":case "onMouseMoveCapture":case "onMouseUp":case "onMouseUpCapture":(d=!d.disabled)||(a=a.type,d=!("button"===a||"input"===a||"select"===a||"textarea"===a));a=!d;break a;default:a=!1}if(a)return null;c&&"function"!==typeof c?n("231",b,typeof c):void 0;return c}function id(a){null!==a&&(wb=Sa(wb,a));a=wb;
-wb=null;if(a&&(gd(a,zh),wb?n("95"):void 0,gc))throw a=dd,gc=!1,dd=null,a;}function jc(a){if(a[ha])return a[ha];for(;!a[ha];)if(a.parentNode)a=a.parentNode;else return null;a=a[ha];return 5===a.tag||6===a.tag?a:null}function Oe(a){a=a[ha];return!a||5!==a.tag&&6!==a.tag?null:a}function Ga(a){if(5===a.tag||6===a.tag)return a.stateNode;n("33")}function jd(a){return a[kc]||null}function ia(a){do a=a.return;while(a&&5!==a.tag);return a?a:null}function Pe(a,b,c){if(b=Ne(a,c.dispatchConfig.phasedRegistrationNames[b]))c._dispatchListeners=
-Sa(c._dispatchListeners,b),c._dispatchInstances=Sa(c._dispatchInstances,a)}function Ah(a){if(a&&a.dispatchConfig.phasedRegistrationNames){for(var b=a._targetInst,c=[];b;)c.push(b),b=ia(b);for(b=c.length;0<b--;)Pe(c[b],"captured",a);for(b=0;b<c.length;b++)Pe(c[b],"bubbled",a)}}function kd(a,b,c){a&&c&&c.dispatchConfig.registrationName&&(b=Ne(a,c.dispatchConfig.registrationName))&&(c._dispatchListeners=Sa(c._dispatchListeners,b),c._dispatchInstances=Sa(c._dispatchInstances,a))}function Bh(a){a&&a.dispatchConfig.registrationName&&
-kd(a._targetInst,null,a)}function Ta(a){gd(a,Ah)}function lc(a,b){var c={};c[a.toLowerCase()]=b.toLowerCase();c["Webkit"+a]="webkit"+b;c["Moz"+a]="moz"+b;return c}function mc(a){if(ld[a])return ld[a];if(!Ua[a])return a;var b=Ua[a],c;for(c in b)if(b.hasOwnProperty(c)&&c in Qe)return ld[a]=b[c];return a}function Re(){if(nc)return nc;var a,b=md,c=b.length,d,e="value"in ta?ta.value:ta.textContent,f=e.length;for(a=0;a<c&&b[a]===e[a];a++);var g=c-a;for(d=1;d<=g&&b[c-d]===e[f-d];d++);return nc=e.slice(a,
-1<d?1-d:void 0)}function oc(){return!0}function pc(){return!1}function N(a,b,c,d){this.dispatchConfig=a;this._targetInst=b;this.nativeEvent=c;a=this.constructor.Interface;for(var e in a)a.hasOwnProperty(e)&&((b=a[e])?this[e]=b(c):"target"===e?this.target=d:this[e]=c[e]);this.isDefaultPrevented=(null!=c.defaultPrevented?c.defaultPrevented:!1===c.returnValue)?oc:pc;this.isPropagationStopped=pc;return this}function Ch(a,b,c,d){if(this.eventPool.length){var e=this.eventPool.pop();this.call(e,a,b,c,d);
-return e}return new this(a,b,c,d)}function Dh(a){a instanceof this?void 0:n("279");a.destructor();10>this.eventPool.length&&this.eventPool.push(a)}function Se(a){a.eventPool=[];a.getPooled=Ch;a.release=Dh}function Te(a,b){switch(a){case "keyup":return-1!==Eh.indexOf(b.keyCode);case "keydown":return 229!==b.keyCode;case "keypress":case "mousedown":case "blur":return!0;default:return!1}}function Ue(a){a=a.detail;return"object"===typeof a&&"data"in a?a.data:null}function Fh(a,b){switch(a){case "compositionend":return Ue(b);
-case "keypress":if(32!==b.which)return null;Ve=!0;return We;case "textInput":return a=b.data,a===We&&Ve?null:a;default:return null}}function Gh(a,b){if(Va)return"compositionend"===a||!nd&&Te(a,b)?(a=Re(),nc=md=ta=null,Va=!1,a):null;switch(a){case "paste":return null;case "keypress":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1<b.char.length)return b.char;if(b.which)return String.fromCharCode(b.which)}return null;case "compositionend":return Xe&&"ko"!==b.locale?null:b.data;
-default:return null}}function Ye(a){if(a=Ze(a)){"function"!==typeof od?n("280"):void 0;var b=hd(a.stateNode);od(a.stateNode,a.type,b)}}function $e(a){Wa?Xa?Xa.push(a):Xa=[a]:Wa=a}function af(){if(Wa){var a=Wa,b=Xa;Xa=Wa=null;Ye(a);if(b)for(a=0;a<b.length;a++)Ye(b[a])}}function bf(a,b){if(pd)return a(b);pd=!0;try{return cf(a,b)}finally{if(pd=!1,null!==Wa||null!==Xa)df(),af()}}function ef(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return"input"===b?!!Hh[a.type]:"textarea"===b?!0:!1}function qd(a){a=
-a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}function ff(a){if(!ua)return!1;a="on"+a;var b=a in document;b||(b=document.createElement("div"),b.setAttribute(a,"return;"),b="function"===typeof b[a]);return b}function gf(a){var b=a.type;return(a=a.nodeName)&&"input"===a.toLowerCase()&&("checkbox"===b||"radio"===b)}function Ih(a){var b=gf(a)?"checked":"value",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=
-""+a[b];if(!a.hasOwnProperty(b)&&"undefined"!==typeof c&&"function"===typeof c.get&&"function"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=""+a;f.call(this,a)}});Object.defineProperty(a,b,{enumerable:c.enumerable});return{getValue:function(){return d},setValue:function(a){d=""+a},stopTracking:function(){a._valueTracker=null;delete a[b]}}}}function qc(a){a._valueTracker||(a._valueTracker=Ih(a))}function hf(a){if(!a)return!1;
-var b=a._valueTracker;if(!b)return!0;var c=b.getValue();var d="";a&&(d=gf(a)?a.checked?"true":"false":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function xb(a){if(null===a||"object"!==typeof a)return null;a=jf&&a[jf]||a["@@iterator"];return"function"===typeof a?a:null}function va(a){if(null==a)return null;if("function"===typeof a)return a.displayName||a.name||null;if("string"===typeof a)return a;switch(a){case rd:return"ConcurrentMode";case wa:return"Fragment";case Ya:return"Portal";case rc:return"Profiler";
-case sd:return"StrictMode";case td:return"Suspense"}if("object"===typeof a)switch(a.$$typeof){case kf:return"Context.Consumer";case lf:return"Context.Provider";case ud:var b=a.render;b=b.displayName||b.name||"";return a.displayName||(""!==b?"ForwardRef("+b+")":"ForwardRef");case vd:return va(a.type);case mf:if(a=1===a._status?a._result:null)return va(a)}return null}function wd(a){var b="";do{a:switch(a.tag){case 3:case 4:case 6:case 7:case 10:case 9:var c="";break a;default:var d=a._debugOwner,e=
-a._debugSource,f=va(a.type);c=null;d&&(c=va(d.type));d=f;f="";e?f=" (at "+e.fileName.replace(Jh,"")+":"+e.lineNumber+")":c&&(f=" (created by "+c+")");c="\n    in "+(d||"Unknown")+f}b+=c;a=a.return}while(a);return b}function Kh(a){if(nf.call(of,a))return!0;if(nf.call(pf,a))return!1;if(Lh.test(a))return of[a]=!0;pf[a]=!0;return!1}function Mh(a,b,c,d){if(null!==c&&0===c.type)return!1;switch(typeof b){case "function":case "symbol":return!0;case "boolean":if(d)return!1;if(null!==c)return!c.acceptsBooleans;
-a=a.toLowerCase().slice(0,5);return"data-"!==a&&"aria-"!==a;default:return!1}}function Nh(a,b,c,d){if(null===b||"undefined"===typeof b||Mh(a,b,c,d))return!0;if(d)return!1;if(null!==c)switch(c.type){case 3:return!b;case 4:return!1===b;case 5:return isNaN(b);case 6:return isNaN(b)||1>b}return!1}function J(a,b,c,d,e){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b}function xd(a,b,c,d){var e=F.hasOwnProperty(b)?
-F[b]:null;var f=null!==e?0===e.type:d?!1:!(2<b.length)||"o"!==b[0]&&"O"!==b[0]||"n"!==b[1]&&"N"!==b[1]?!1:!0;f||(Nh(b,c,e,d)&&(c=null),d||null===e?Kh(b)&&(null===c?a.removeAttribute(b):a.setAttribute(b,""+c)):e.mustUseProperty?a[e.propertyName]=null===c?3===e.type?!1:"":c:(b=e.attributeName,d=e.attributeNamespace,null===c?a.removeAttribute(b):(e=e.type,c=3===e||4===e&&!0===c?"":""+c,d?a.setAttributeNS(d,b,c):a.setAttribute(b,c))))}function xa(a){switch(typeof a){case "boolean":case "number":case "object":case "string":case "undefined":return a;
-default:return""}}function yd(a,b){var c=b.checked;return K({},b,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}function qf(a,b){var c=null==b.defaultValue?"":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=xa(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:"checkbox"===b.type||"radio"===b.type?null!=b.checked:null!=b.value}}function rf(a,b){b=b.checked;null!=b&&xd(a,"checked",b,!1)}function zd(a,
-b){rf(a,b);var c=xa(b.value),d=b.type;if(null!=c)if("number"===d){if(0===c&&""===a.value||a.value!=c)a.value=""+c}else a.value!==""+c&&(a.value=""+c);else if("submit"===d||"reset"===d){a.removeAttribute("value");return}b.hasOwnProperty("value")?Ad(a,b.type,c):b.hasOwnProperty("defaultValue")&&Ad(a,b.type,xa(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked)}function sf(a,b,c){if(b.hasOwnProperty("value")||b.hasOwnProperty("defaultValue")){var d=b.type;
-if(!("submit"!==d&&"reset"!==d||void 0!==b.value&&null!==b.value))return;b=""+a._wrapperState.initialValue;c||b===a.value||(a.value=b);a.defaultValue=b}c=a.name;""!==c&&(a.name="");a.defaultChecked=!a.defaultChecked;a.defaultChecked=!!a._wrapperState.initialChecked;""!==c&&(a.name=c)}function Ad(a,b,c){if("number"!==b||a.ownerDocument.activeElement!==a)null==c?a.defaultValue=""+a._wrapperState.initialValue:a.defaultValue!==""+c&&(a.defaultValue=""+c)}function tf(a,b,c){a=N.getPooled(uf.change,a,b,
-c);a.type="change";$e(c);Ta(a);return a}function Oh(a){id(a)}function sc(a){var b=Ga(a);if(hf(b))return a}function Ph(a,b){if("change"===a)return b}function vf(){yb&&(yb.detachEvent("onpropertychange",wf),zb=yb=null)}function wf(a){"value"===a.propertyName&&sc(zb)&&(a=tf(zb,a,qd(a)),bf(Oh,a))}function Qh(a,b,c){"focus"===a?(vf(),yb=b,zb=c,yb.attachEvent("onpropertychange",wf)):"blur"===a&&vf()}function Rh(a,b){if("selectionchange"===a||"keyup"===a||"keydown"===a)return sc(zb)}function Sh(a,b){if("click"===
-a)return sc(b)}function Th(a,b){if("input"===a||"change"===a)return sc(b)}function Uh(a){var b=this.nativeEvent;return b.getModifierState?b.getModifierState(a):(a=Vh[a])?!!b[a]:!1}function Bd(a){return Uh}function Ha(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}function Ab(a,b){if(Ha(a,b))return!0;if("object"!==typeof a||null===a||"object"!==typeof b||null===b)return!1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==d.length)return!1;for(d=0;d<c.length;d++)if(!Wh.call(b,c[d])||!Ha(a[c[d]],
-b[c[d]]))return!1;return!0}function Bb(a){var b=a;if(a.alternate)for(;b.return;)b=b.return;else{if(0!==(b.effectTag&2))return 1;for(;b.return;)if(b=b.return,0!==(b.effectTag&2))return 1}return 3===b.tag?2:3}function xf(a){2!==Bb(a)?n("188"):void 0}function Xh(a){var b=a.alternate;if(!b)return b=Bb(a),3===b?n("188"):void 0,1===b?null:a;for(var c=a,d=b;;){var e=c.return,f=e?e.alternate:null;if(!e||!f)break;if(e.child===f.child){for(var g=e.child;g;){if(g===c)return xf(e),a;if(g===d)return xf(e),b;g=
-g.sibling}n("188")}if(c.return!==d.return)c=e,d=f;else{g=!1;for(var h=e.child;h;){if(h===c){g=!0;c=e;d=f;break}if(h===d){g=!0;d=e;c=f;break}h=h.sibling}if(!g){for(h=f.child;h;){if(h===c){g=!0;c=f;d=e;break}if(h===d){g=!0;d=f;c=e;break}h=h.sibling}g?void 0:n("189")}}c.alternate!==d?n("190"):void 0}3!==c.tag?n("188"):void 0;return c.stateNode.current===c?a:b}function yf(a){a=Xh(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child)b.child.return=b,b=b.child;else{if(b===a)break;
-for(;!b.sibling;){if(!b.return||b.return===a)return null;b=b.return}b.sibling.return=b.return;b=b.sibling}}return null}function tc(a){var b=a.keyCode;"charCode"in a?(a=a.charCode,0===a&&13===b&&(a=13)):a=b;10===a&&(a=13);return 32<=a||13===a?a:0}function zf(a,b){var c=a[0];a=a[1];var d="on"+(a[0].toUpperCase()+a.slice(1));b={phasedRegistrationNames:{bubbled:d,captured:d+"Capture"},dependencies:[c],isInteractive:b};Af[a]=b;Cd[c]=b}function Yh(a){var b=a.targetInst,c=b;do{if(!c){a.ancestors.push(c);
-break}var d;for(d=c;d.return;)d=d.return;d=3!==d.tag?null:d.stateNode.containerInfo;if(!d)break;a.ancestors.push(c);c=jc(d)}while(c);for(c=0;c<a.ancestors.length;c++){b=a.ancestors[c];var e=qd(a.nativeEvent);d=a.topLevelType;for(var f=a.nativeEvent,g=null,h=0;h<ic.length;h++){var l=ic[h];l&&(l=l.extractEvents(d,b,f,e))&&(g=Sa(g,l))}id(g)}}function r(a,b){if(!b)return null;var c=(Bf(a)?Cf:uc).bind(null,a);b.addEventListener(a,c,!1)}function vc(a,b){if(!b)return null;var c=(Bf(a)?Cf:uc).bind(null,a);
-b.addEventListener(a,c,!0)}function Cf(a,b){Df(uc,a,b)}function uc(a,b){if(wc){var c=qd(b);c=jc(c);null===c||"number"!==typeof c.tag||2===Bb(c)||(c=null);if(xc.length){var d=xc.pop();d.topLevelType=a;d.nativeEvent=b;d.targetInst=c;a=d}else a={topLevelType:a,nativeEvent:b,targetInst:c,ancestors:[]};try{bf(Yh,a)}finally{a.topLevelType=null,a.nativeEvent=null,a.targetInst=null,a.ancestors.length=0,10>xc.length&&xc.push(a)}}}function Ef(a){Object.prototype.hasOwnProperty.call(a,yc)||(a[yc]=Zh++,Ff[a[yc]]=
-{});return Ff[a[yc]]}function Dd(a){a=a||("undefined"!==typeof document?document:void 0);if("undefined"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}}function Gf(a){for(;a&&a.firstChild;)a=a.firstChild;return a}function Hf(a,b){var c=Gf(a);a=0;for(var d;c;){if(3===c.nodeType){d=a+c.textContent.length;if(a<=b&&d>=b)return{node:c,offset:b-a};a=d}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode}c=void 0}c=Gf(c)}}function If(a,b){return a&&b?a===
-b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?If(a,b.parentNode):"contains"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1}function Jf(){for(var a=window,b=Dd();b instanceof a.HTMLIFrameElement;){try{a=b.contentDocument.defaultView}catch(c){break}b=Dd(a.document)}return b}function Ed(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&("input"===b&&("text"===a.type||"search"===a.type||"tel"===a.type||"url"===a.type||"password"===a.type)||"textarea"===b||
-"true"===a.contentEditable)}function Kf(a,b){var c=b.window===b?b.document:9===b.nodeType?b:b.ownerDocument;if(Fd||null==Za||Za!==Dd(c))return null;c=Za;"selectionStart"in c&&Ed(c)?c={start:c.selectionStart,end:c.selectionEnd}:(c=(c.ownerDocument&&c.ownerDocument.defaultView||window).getSelection(),c={anchorNode:c.anchorNode,anchorOffset:c.anchorOffset,focusNode:c.focusNode,focusOffset:c.focusOffset});return Cb&&Ab(Cb,c)?null:(Cb=c,a=N.getPooled(Lf.select,Gd,a,b),a.type="select",a.target=Za,Ta(a),
-a)}function $h(a){var b="";fa.Children.forEach(a,function(a){null!=a&&(b+=a)});return b}function Hd(a,b){a=K({children:void 0},b);if(b=$h(b.children))a.children=b;return a}function $a(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e<c.length;e++)b["$"+c[e]]=!0;for(c=0;c<a.length;c++)e=b.hasOwnProperty("$"+a[c].value),a[c].selected!==e&&(a[c].selected=e),e&&d&&(a[c].defaultSelected=!0)}else{c=""+xa(c);b=null;for(e=0;e<a.length;e++){if(a[e].value===c){a[e].selected=!0;d&&(a[e].defaultSelected=!0);return}null!==
-b||a[e].disabled||(b=a[e])}null!==b&&(b.selected=!0)}}function Id(a,b){null!=b.dangerouslySetInnerHTML?n("91"):void 0;return K({},b,{value:void 0,defaultValue:void 0,children:""+a._wrapperState.initialValue})}function Mf(a,b){var c=b.value;null==c&&(c=b.defaultValue,b=b.children,null!=b&&(null!=c?n("92"):void 0,Array.isArray(b)&&(1>=b.length?void 0:n("93"),b=b[0]),c=b),null==c&&(c=""));a._wrapperState={initialValue:xa(c)}}function Nf(a,b){var c=xa(b.value),d=xa(b.defaultValue);null!=c&&(c=""+c,c!==
-a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=""+d)}function Of(a){switch(a){case "svg":return"http://www.w3.org/2000/svg";case "math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function Jd(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?Of(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":a}function Pf(a,b,c){return null==b||"boolean"===typeof b||
-""===b?"":c||"number"!==typeof b||0===b||Db.hasOwnProperty(a)&&Db[a]?(""+b).trim():b+"px"}function Qf(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf("--"),e=Pf(c,b[c],d);"float"===c&&(c="cssFloat");d?a.setProperty(c,e):a[c]=e}}function Kd(a,b){b&&(ai[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML?n("137",a,""):void 0),null!=b.dangerouslySetInnerHTML&&(null!=b.children?n("60"):void 0,"object"===typeof b.dangerouslySetInnerHTML&&"__html"in b.dangerouslySetInnerHTML?
-void 0:n("61")),null!=b.style&&"object"!==typeof b.style?n("62",""):void 0)}function Ld(a,b){if(-1===a.indexOf("-"))return"string"===typeof b.is;switch(a){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":return!1;default:return!0}}function ja(a,b){a=9===a.nodeType||11===a.nodeType?a:a.ownerDocument;var c=Ef(a);b=fd[b];for(var d=0;d<b.length;d++){var e=b[d];if(!c.hasOwnProperty(e)||
-!c[e]){switch(e){case "scroll":vc("scroll",a);break;case "focus":case "blur":vc("focus",a);vc("blur",a);c.blur=!0;c.focus=!0;break;case "cancel":case "close":ff(e)&&vc(e,a);break;case "invalid":case "submit":case "reset":break;default:-1===Eb.indexOf(e)&&r(e,a)}c[e]=!0}}}function zc(){}function Rf(a,b){switch(a){case "button":case "input":case "select":case "textarea":return!!b.autoFocus}return!1}function Md(a,b){return"textarea"===a||"option"===a||"noscript"===a||"string"===typeof b.children||"number"===
-typeof b.children||"object"===typeof b.dangerouslySetInnerHTML&&null!==b.dangerouslySetInnerHTML&&null!=b.dangerouslySetInnerHTML.__html}function bi(a,b,c,d,e,f){a[kc]=e;"input"===c&&"radio"===e.type&&null!=e.name&&rf(a,e);Ld(c,d);d=Ld(c,e);for(f=0;f<b.length;f+=2){var g=b[f],h=b[f+1];"style"===g?Qf(a,h):"dangerouslySetInnerHTML"===g?Sf(a,h):"children"===g?Fb(a,h):xd(a,g,h,d)}switch(c){case "input":zd(a,e);break;case "textarea":Nf(a,e);break;case "select":b=a._wrapperState.wasMultiple,a._wrapperState.wasMultiple=
-!!e.multiple,c=e.value,null!=c?$a(a,!!e.multiple,c,!1):b!==!!e.multiple&&(null!=e.defaultValue?$a(a,!!e.multiple,e.defaultValue,!0):$a(a,!!e.multiple,e.multiple?[]:"",!1))}}function Nd(a){for(a=a.nextSibling;a&&1!==a.nodeType&&3!==a.nodeType;)a=a.nextSibling;return a}function Tf(a){for(a=a.firstChild;a&&1!==a.nodeType&&3!==a.nodeType;)a=a.nextSibling;return a}function H(a,b){0>ab||(a.current=Od[ab],Od[ab]=null,ab--)}function Q(a,b,c){ab++;Od[ab]=a.current;a.current=b}function bb(a,b){var c=a.type.contextTypes;
-if(!c)return ya;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function O(a){a=a.childContextTypes;return null!==a&&void 0!==a}function Ac(a){H(R,a);H(L,a)}function Pd(a){H(R,a);H(L,a)}function Uf(a,b,c){L.current!==ya?n("168"):void 0;Q(L,b,a);Q(R,c,a)}function Vf(a,b,
-c){var d=a.stateNode;a=b.childContextTypes;if("function"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)e in a?void 0:n("108",va(b)||"Unknown",e);return K({},c,d)}function Bc(a){var b=a.stateNode;b=b&&b.__reactInternalMemoizedMergedChildContext||ya;Ia=L.current;Q(L,b,a);Q(R,R.current,a);return!0}function Wf(a,b,c){var d=a.stateNode;d?void 0:n("169");c?(b=Vf(a,b,Ia),d.__reactInternalMemoizedMergedChildContext=b,H(R,a),H(L,a),Q(L,b,a)):H(R,a);Q(R,c,a)}function Xf(a){return function(b){try{return a(b)}catch(c){}}}
-function ci(a){if("undefined"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var b=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(b.isDisabled||!b.supportsFiber)return!0;try{var c=b.inject(a);Qd=Xf(function(a){return b.onCommitFiberRoot(c,a)});Rd=Xf(function(a){return b.onCommitFiberUnmount(c,a)})}catch(d){}return!0}function di(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null;this.index=0;this.ref=null;this.pendingProps=b;this.contextDependencies=
-this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.effectTag=0;this.lastEffect=this.firstEffect=this.nextEffect=null;this.childExpirationTime=this.expirationTime=0;this.alternate=null}function Sd(a){a=a.prototype;return!(!a||!a.isReactComponent)}function ei(a){if("function"===typeof a)return Sd(a)?1:0;if(void 0!==a&&null!==a){a=a.$$typeof;if(a===ud)return 11;if(a===vd)return 14}return 2}function Ja(a,b,c){c=a.alternate;null===c?(c=V(a.tag,b,a.key,a.mode),c.elementType=a.elementType,
-c.type=a.type,c.stateNode=a.stateNode,c.alternate=a,a.alternate=c):(c.pendingProps=b,c.effectTag=0,c.nextEffect=null,c.firstEffect=null,c.lastEffect=null);c.childExpirationTime=a.childExpirationTime;c.expirationTime=a.expirationTime;c.child=a.child;c.memoizedProps=a.memoizedProps;c.memoizedState=a.memoizedState;c.updateQueue=a.updateQueue;c.contextDependencies=a.contextDependencies;c.sibling=a.sibling;c.index=a.index;c.ref=a.ref;return c}function Cc(a,b,c,d,e,f){var g=2;d=a;if("function"===typeof a)Sd(a)&&
-(g=1);else if("string"===typeof a)g=5;else a:switch(a){case wa:return za(c.children,e,f,b);case rd:return Yf(c,e|3,f,b);case sd:return Yf(c,e|2,f,b);case rc:return a=V(12,c,b,e|4),a.elementType=rc,a.type=rc,a.expirationTime=f,a;case td:return a=V(13,c,b,e),b=td,a.elementType=b,a.type=b,a.expirationTime=f,a;default:if("object"===typeof a&&null!==a)switch(a.$$typeof){case lf:g=10;break a;case kf:g=9;break a;case ud:g=11;break a;case vd:g=14;break a;case mf:g=16;d=null;break a}n("130",null==a?a:typeof a,
-"")}b=V(g,c,b,e);b.elementType=a;b.type=d;b.expirationTime=f;return b}function za(a,b,c,d){a=V(7,a,d,b);a.expirationTime=c;return a}function Yf(a,b,c,d){a=V(8,a,d,b);b=0===(b&1)?sd:rd;a.elementType=b;a.type=b;a.expirationTime=c;return a}function Td(a,b,c){a=V(6,a,null,b);a.expirationTime=c;return a}function Ud(a,b,c){b=V(4,null!==a.children?a.children:[],a.key,b);b.expirationTime=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}function Gb(a,
-b){a.didError=!1;var c=a.earliestPendingTime;0===c?a.earliestPendingTime=a.latestPendingTime=b:c<b?a.earliestPendingTime=b:a.latestPendingTime>b&&(a.latestPendingTime=b);Dc(b,a)}function Zf(a,b){a.didError=!1;a.latestPingedTime>=b&&(a.latestPingedTime=0);var c=a.earliestPendingTime,d=a.latestPendingTime;c===b?a.earliestPendingTime=d===b?a.latestPendingTime=0:d:d===b&&(a.latestPendingTime=c);c=a.earliestSuspendedTime;d=a.latestSuspendedTime;0===c?a.earliestSuspendedTime=a.latestSuspendedTime=b:c<b?
-a.earliestSuspendedTime=b:d>b&&(a.latestSuspendedTime=b);Dc(b,a)}function $f(a,b){var c=a.earliestPendingTime;a=a.earliestSuspendedTime;c>b&&(b=c);a>b&&(b=a);return b}function Dc(a,b){var c=b.earliestSuspendedTime,d=b.latestSuspendedTime,e=b.earliestPendingTime,f=b.latestPingedTime;e=0!==e?e:f;0===e&&(0===a||d<a)&&(e=d);a=e;0!==a&&c>a&&(a=c);b.nextExpirationTimeToWorkOn=e;b.expirationTime=a}function U(a,b){if(a&&a.defaultProps){b=K({},b);a=a.defaultProps;for(var c in a)void 0===b[c]&&(b[c]=a[c])}return b}
-function fi(a){var b=a._result;switch(a._status){case 1:return b;case 2:throw b;case 0:throw b;default:a._status=0;b=a._ctor;b=b();b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b)},function(b){0===a._status&&(a._status=2,a._result=b)});switch(a._status){case 1:return a._result;case 2:throw a._result;}a._result=b;throw b;}}function Ec(a,b,c,d){b=a.memoizedState;c=c(d,b);c=null===c||void 0===c?b:K({},b,c);a.memoizedState=c;d=a.updateQueue;null!==d&&0===a.expirationTime&&(d.baseState=
-c)}function ag(a,b,c,d,e,f,g){a=a.stateNode;return"function"===typeof a.shouldComponentUpdate?a.shouldComponentUpdate(d,f,g):b.prototype&&b.prototype.isPureReactComponent?!Ab(c,d)||!Ab(e,f):!0}function bg(a,b,c,d){var e=!1;d=ya;var f=b.contextType;"object"===typeof f&&null!==f?f=W(f):(d=O(b)?Ia:L.current,e=b.contextTypes,f=(e=null!==e&&void 0!==e)?bb(a,d):ya);b=new b(c,f);a.memoizedState=null!==b.state&&void 0!==b.state?b.state:null;b.updater=Fc;a.stateNode=b;b._reactInternalFiber=a;e&&(a=a.stateNode,
-a.__reactInternalMemoizedUnmaskedChildContext=d,a.__reactInternalMemoizedMaskedChildContext=f);return b}function cg(a,b,c,d){a=b.state;"function"===typeof b.componentWillReceiveProps&&b.componentWillReceiveProps(c,d);"function"===typeof b.UNSAFE_componentWillReceiveProps&&b.UNSAFE_componentWillReceiveProps(c,d);b.state!==a&&Fc.enqueueReplaceState(b,b.state,null)}function Vd(a,b,c,d){var e=a.stateNode;e.props=c;e.state=a.memoizedState;e.refs=dg;var f=b.contextType;"object"===typeof f&&null!==f?e.context=
-W(f):(f=O(b)?Ia:L.current,e.context=bb(a,f));f=a.updateQueue;null!==f&&(Hb(a,f,c,e,d),e.state=a.memoizedState);f=b.getDerivedStateFromProps;"function"===typeof f&&(Ec(a,b,f,c),e.state=a.memoizedState);"function"===typeof b.getDerivedStateFromProps||"function"===typeof e.getSnapshotBeforeUpdate||"function"!==typeof e.UNSAFE_componentWillMount&&"function"!==typeof e.componentWillMount||(b=e.state,"function"===typeof e.componentWillMount&&e.componentWillMount(),"function"===typeof e.UNSAFE_componentWillMount&&
-e.UNSAFE_componentWillMount(),b!==e.state&&Fc.enqueueReplaceState(e,e.state,null),f=a.updateQueue,null!==f&&(Hb(a,f,c,e,d),e.state=a.memoizedState));"function"===typeof e.componentDidMount&&(a.effectTag|=4)}function Ib(a,b,c){a=c.ref;if(null!==a&&"function"!==typeof a&&"object"!==typeof a){if(c._owner){c=c._owner;var d=void 0;c&&(1!==c.tag?n("309"):void 0,d=c.stateNode);d?void 0:n("147",a);var e=""+a;if(null!==b&&null!==b.ref&&"function"===typeof b.ref&&b.ref._stringRef===e)return b.ref;b=function(a){var b=
-d.refs;b===dg&&(b=d.refs={});null===a?delete b[e]:b[e]=a};b._stringRef=e;return b}"string"!==typeof a?n("284"):void 0;c._owner?void 0:n("290",a)}return a}function Gc(a,b){"textarea"!==a.type&&n("31","[object Object]"===Object.prototype.toString.call(b)?"object with keys {"+Object.keys(b).join(", ")+"}":b,"")}function eg(a){function b(b,c){if(a){var d=b.lastEffect;null!==d?(d.nextEffect=c,b.lastEffect=c):b.firstEffect=b.lastEffect=c;c.nextEffect=null;c.effectTag=8}}function c(c,d){if(!a)return null;
-for(;null!==d;)b(c,d),d=d.sibling;return null}function d(a,b){for(a=new Map;null!==b;)null!==b.key?a.set(b.key,b):a.set(b.index,b),b=b.sibling;return a}function e(a,b,c){a=Ja(a,b,c);a.index=0;a.sibling=null;return a}function f(b,c,d){b.index=d;if(!a)return c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.effectTag=2,c):d;b.effectTag=2;return c}function g(b){a&&null===b.alternate&&(b.effectTag=2);return b}function h(a,b,c,d){if(null===b||6!==b.tag)return b=Td(c,a.mode,d),b.return=a,b;b=e(b,c,d);
-b.return=a;return b}function l(a,b,c,d){if(null!==b&&b.elementType===c.type)return d=e(b,c.props,d),d.ref=Ib(a,b,c),d.return=a,d;d=Cc(c.type,c.key,c.props,null,a.mode,d);d.ref=Ib(a,b,c);d.return=a;return d}function k(a,b,c,d){if(null===b||4!==b.tag||b.stateNode.containerInfo!==c.containerInfo||b.stateNode.implementation!==c.implementation)return b=Ud(c,a.mode,d),b.return=a,b;b=e(b,c.children||[],d);b.return=a;return b}function m(a,b,c,d,f){if(null===b||7!==b.tag)return b=za(c,a.mode,d,f),b.return=
-a,b;b=e(b,c,d);b.return=a;return b}function fg(a,b,c){if("string"===typeof b||"number"===typeof b)return b=Td(""+b,a.mode,c),b.return=a,b;if("object"===typeof b&&null!==b){switch(b.$$typeof){case Hc:return c=Cc(b.type,b.key,b.props,null,a.mode,c),c.ref=Ib(a,null,b),c.return=a,c;case Ya:return b=Ud(b,a.mode,c),b.return=a,b}if(Ic(b)||xb(b))return b=za(b,a.mode,c,null),b.return=a,b;Gc(a,b)}return null}function p(a,b,c,d){var e=null!==b?b.key:null;if("string"===typeof c||"number"===typeof c)return null!==
-e?null:h(a,b,""+c,d);if("object"===typeof c&&null!==c){switch(c.$$typeof){case Hc:return c.key===e?c.type===wa?m(a,b,c.props.children,d,e):l(a,b,c,d):null;case Ya:return c.key===e?k(a,b,c,d):null}if(Ic(c)||xb(c))return null!==e?null:m(a,b,c,d,null);Gc(a,c)}return null}function r(a,b,c,d,e){if("string"===typeof d||"number"===typeof d)return a=a.get(c)||null,h(b,a,""+d,e);if("object"===typeof d&&null!==d){switch(d.$$typeof){case Hc:return a=a.get(null===d.key?c:d.key)||null,d.type===wa?m(b,a,d.props.children,
-e,d.key):l(b,a,d,e);case Ya:return a=a.get(null===d.key?c:d.key)||null,k(b,a,d,e)}if(Ic(d)||xb(d))return a=a.get(c)||null,m(b,a,d,e,null);Gc(b,d)}return null}function w(e,g,h,k){for(var l=null,m=null,q=g,n=g=0,t=null;null!==q&&n<h.length;n++){q.index>n?(t=q,q=null):t=q.sibling;var G=p(e,q,h[n],k);if(null===G){null===q&&(q=t);break}a&&q&&null===G.alternate&&b(e,q);g=f(G,g,n);null===m?l=G:m.sibling=G;m=G;q=t}if(n===h.length)return c(e,q),l;if(null===q){for(;n<h.length;n++)if(q=fg(e,h[n],k))g=f(q,g,
-n),null===m?l=q:m.sibling=q,m=q;return l}for(q=d(e,q);n<h.length;n++)if(t=r(q,e,n,h[n],k))a&&null!==t.alternate&&q.delete(null===t.key?n:t.key),g=f(t,g,n),null===m?l=t:m.sibling=t,m=t;a&&q.forEach(function(a){return b(e,a)});return l}function B(e,g,h,k){var l=xb(h);"function"!==typeof l?n("150"):void 0;h=l.call(h);null==h?n("151"):void 0;for(var m=l=null,q=g,t=g=0,G=null,u=h.next();null!==q&&!u.done;t++,u=h.next()){q.index>t?(G=q,q=null):G=q.sibling;var z=p(e,q,u.value,k);if(null===z){q||(q=G);break}a&&
-q&&null===z.alternate&&b(e,q);g=f(z,g,t);null===m?l=z:m.sibling=z;m=z;q=G}if(u.done)return c(e,q),l;if(null===q){for(;!u.done;t++,u=h.next())u=fg(e,u.value,k),null!==u&&(g=f(u,g,t),null===m?l=u:m.sibling=u,m=u);return l}for(q=d(e,q);!u.done;t++,u=h.next())u=r(q,e,t,u.value,k),null!==u&&(a&&null!==u.alternate&&q.delete(null===u.key?t:u.key),g=f(u,g,t),null===m?l=u:m.sibling=u,m=u);a&&q.forEach(function(a){return b(e,a)});return l}return function(a,d,f,h){var k="object"===typeof f&&null!==f&&f.type===
-wa&&null===f.key;k&&(f=f.props.children);var l="object"===typeof f&&null!==f;if(l)switch(f.$$typeof){case Hc:a:{l=f.key;for(k=d;null!==k;){if(k.key===l)if(7===k.tag?f.type===wa:k.elementType===f.type){c(a,k.sibling);d=e(k,f.type===wa?f.props.children:f.props,h);d.ref=Ib(a,k,f);d.return=a;a=d;break a}else{c(a,k);break}else b(a,k);k=k.sibling}f.type===wa?(d=za(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=Cc(f.type,f.key,f.props,null,a.mode,h),h.ref=Ib(a,d,f),h.return=a,a=h)}return g(a);case Ya:a:{for(k=
-f.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[],h);d.return=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=Ud(f,a.mode,h);d.return=a;a=d}return g(a)}if("string"===typeof f||"number"===typeof f)return f=""+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f,h),d.return=a,a=d):(c(a,d),d=Td(f,a.mode,h),d.return=a,a=d),g(a);if(Ic(f))return w(a,d,f,h);if(xb(f))return B(a,d,f,
-h);l&&Gc(a,f);if("undefined"===typeof f&&!k)switch(a.tag){case 1:case 0:h=a.type,n("152",h.displayName||h.name||"Component")}return c(a,d)}}function Ka(a){a===Jb?n("174"):void 0;return a}function Xd(a,b){Q(Kb,b,a);Q(Lb,a,a);Q(X,Jb,a);var c=b.nodeType;switch(c){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:Jd(null,"");break;default:c=8===c?b.parentNode:b,b=c.namespaceURI||null,c=c.tagName,b=Jd(b,c)}H(X,a);Q(X,b,a)}function cb(a){H(X,a);H(Lb,a);H(Kb,a)}function gg(a){Ka(Kb.current);var b=Ka(X.current);
-var c=Jd(b,a.type);b!==c&&(Q(Lb,a,a),Q(X,c,a))}function Yd(a){Lb.current===a&&(H(X,a),H(Lb,a))}function Y(){n("307")}function Zd(a,b){if(null===b)return!1;for(var c=0;c<b.length&&c<a.length;c++)if(!Ha(a[c],b[c]))return!1;return!0}function $d(a,b,c,d,e,f){Mb=f;Aa=b;Z=null!==a?a.memoizedState:null;Jc.current=null===Z?gi:hg;b=c(d,e);if(Nb){do Nb=!1,Ob+=1,Z=null!==a?a.memoizedState:null,db=eb,aa=M=x=null,Jc.current=hg,b=c(d,e);while(Nb);ka=null;Ob=0}Jc.current=ae;a=Aa;a.memoizedState=eb;a.expirationTime=
-Pb;a.updateQueue=aa;a.effectTag|=Qb;a=null!==x&&null!==x.next;Mb=0;db=M=eb=Z=x=Aa=null;Pb=0;aa=null;Qb=0;a?n("300"):void 0;return b}function be(){Jc.current=ae;Mb=0;db=M=eb=Z=x=Aa=null;Pb=0;aa=null;Qb=0;Nb=!1;ka=null;Ob=0}function fb(){var a={memoizedState:null,baseState:null,queue:null,baseUpdate:null,next:null};null===M?eb=M=a:M=M.next=a;return M}function Rb(){if(null!==db)M=db,db=M.next,x=Z,Z=null!==x?x.next:null;else{null===Z?n("310"):void 0;x=Z;var a={memoizedState:x.memoizedState,baseState:x.baseState,
-queue:x.queue,baseUpdate:x.baseUpdate,next:null};M=null===M?eb=a:M.next=a;Z=x.next}return M}function ig(a,b){return"function"===typeof b?b(a):b}function jg(a,b,c){b=Rb();c=b.queue;null===c?n("311"):void 0;if(0<Ob){var d=c.dispatch;if(null!==ka){var e=ka.get(c);if(void 0!==e){ka.delete(c);var f=b.memoizedState;do f=a(f,e.action),e=e.next;while(null!==e);Ha(f,b.memoizedState)||(la=!0);b.memoizedState=f;b.baseUpdate===c.last&&(b.baseState=f);return[f,d]}}return[b.memoizedState,d]}d=c.last;var g=b.baseUpdate;
-f=b.baseState;null!==g?(null!==d&&(d.next=null),d=g.next):d=null!==d?d.next:null;if(null!==d){var h=e=null,l=d,k=!1;do{var m=l.expirationTime;m<Mb?(k||(k=!0,h=g,e=f),m>Pb&&(Pb=m)):f=l.eagerReducer===a?l.eagerState:a(f,l.action);g=l;l=l.next}while(null!==l&&l!==d);k||(h=g,e=f);Ha(f,b.memoizedState)||(la=!0);b.memoizedState=f;b.baseUpdate=h;b.baseState=e;c.eagerReducer=a;c.eagerState=f}return[b.memoizedState,c.dispatch]}function ce(a,b,c,d){a={tag:a,create:b,destroy:c,deps:d,next:null};null===aa?(aa=
-{lastEffect:null},aa.lastEffect=a.next=a):(b=aa.lastEffect,null===b?aa.lastEffect=a.next=a:(c=b.next,b.next=a,a.next=c,aa.lastEffect=a));return a}function de(a,b,c,d){var e=fb();Qb|=a;e.memoizedState=ce(b,c,void 0,void 0===d?null:d)}function ee(a,b,c,d){var e=Rb();d=void 0===d?null:d;var f=void 0;if(null!==x){var g=x.memoizedState;f=g.destroy;if(null!==d&&Zd(d,g.deps)){ce(gb,c,f,d);return}}Qb|=a;e.memoizedState=ce(b,c,f,d)}function kg(a,b){if("function"===typeof b)return a=a(),b(a),function(){b(null)};
-if(null!==b&&void 0!==b)return a=a(),b.current=a,function(){b.current=null}}function lg(a,b){}function mg(a,b,c){25>Ob?void 0:n("301");var d=a.alternate;if(a===Aa||null!==d&&d===Aa)if(Nb=!0,a={expirationTime:Mb,action:c,eagerReducer:null,eagerState:null,next:null},null===ka&&(ka=new Map),c=ka.get(b),void 0===c)ka.set(b,a);else{for(b=c;null!==b.next;)b=b.next;b.next=a}else{hb();var e=ma();e=ib(e,a);var f={expirationTime:e,action:c,eagerReducer:null,eagerState:null,next:null},g=b.last;if(null===g)f.next=
-f;else{var h=g.next;null!==h&&(f.next=h);g.next=f}b.last=f;if(0===a.expirationTime&&(null===d||0===d.expirationTime)&&(d=b.eagerReducer,null!==d))try{var l=b.eagerState,k=d(l,c);f.eagerReducer=d;f.eagerState=k;if(Ha(k,l))return}catch(m){}finally{}Ba(a,e)}}function ng(a,b){var c=V(5,null,null,0);c.elementType="DELETED";c.type="DELETED";c.stateNode=b;c.return=a;c.effectTag=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c}function og(a,b){switch(a.tag){case 5:var c=
-a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,!0):!1;case 6:return b=""===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,!0):!1;default:return!1}}function pg(a){if(La){var b=jb;if(b){var c=b;if(!og(a,b)){b=Nd(c);if(!b||!og(a,b)){a.effectTag|=2;La=!1;na=a;return}ng(na,c)}na=a;jb=Tf(b)}else a.effectTag|=2,La=!1,na=a}}function qg(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag;)a=a.return;na=a}function fe(a){if(a!==na)return!1;
-if(!La)return qg(a),La=!0,!1;var b=a.type;if(5!==a.tag||"head"!==b&&"body"!==b&&!Md(b,a.memoizedProps))for(b=jb;b;)ng(a,b),b=Nd(b);qg(a);jb=na?Nd(a.stateNode):null;return!0}function ge(){jb=na=null;La=!1}function S(a,b,c,d){b.child=null===a?he(b,null,c,d):kb(b,a.child,c,d)}function rg(a,b,c,d,e){c=c.render;var f=b.ref;lb(b,e);d=$d(a,b,c,d,f,e);if(null!==a&&!la)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),oa(a,b,e);b.effectTag|=1;S(a,b,d,e);return b.child}
-function sg(a,b,c,d,e,f){if(null===a){var g=c.type;if("function"===typeof g&&!Sd(g)&&void 0===g.defaultProps&&null===c.compare&&void 0===c.defaultProps)return b.tag=15,b.type=g,tg(a,b,g,d,e,f);a=Cc(c.type,null,d,null,b.mode,f);a.ref=b.ref;a.return=b;return b.child=a}g=a.child;if(e<f&&(e=g.memoizedProps,c=c.compare,c=null!==c?c:Ab,c(e,d)&&a.ref===b.ref))return oa(a,b,f);b.effectTag|=1;a=Ja(g,d,f);a.ref=b.ref;a.return=b;return b.child=a}function tg(a,b,c,d,e,f){return null!==a&&Ab(a.memoizedProps,d)&&
-a.ref===b.ref&&(la=!1,e<f)?oa(a,b,f):ie(a,b,c,d,f)}function ug(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.effectTag|=128}function ie(a,b,c,d,e){var f=O(c)?Ia:L.current;f=bb(b,f);lb(b,e);c=$d(a,b,c,d,f,e);if(null!==a&&!la)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),oa(a,b,e);b.effectTag|=1;S(a,b,c,e);return b.child}function vg(a,b,c,d,e){if(O(c)){var f=!0;Bc(b)}else f=!1;lb(b,e);if(null===b.stateNode)null!==a&&(a.alternate=null,
-b.alternate=null,b.effectTag|=2),bg(b,c,d,e),Vd(b,c,d,e),d=!0;else if(null===a){var g=b.stateNode,h=b.memoizedProps;g.props=h;var l=g.context,k=c.contextType;"object"===typeof k&&null!==k?k=W(k):(k=O(c)?Ia:L.current,k=bb(b,k));var m=c.getDerivedStateFromProps,n="function"===typeof m||"function"===typeof g.getSnapshotBeforeUpdate;n||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps||(h!==d||l!==k)&&cg(b,g,d,k);Ca=!1;var p=b.memoizedState;l=g.state=
-p;var r=b.updateQueue;null!==r&&(Hb(b,r,d,g,e),l=b.memoizedState);h!==d||p!==l||R.current||Ca?("function"===typeof m&&(Ec(b,c,m,d),l=b.memoizedState),(h=Ca||ag(b,c,h,d,p,l,k))?(n||"function"!==typeof g.UNSAFE_componentWillMount&&"function"!==typeof g.componentWillMount||("function"===typeof g.componentWillMount&&g.componentWillMount(),"function"===typeof g.UNSAFE_componentWillMount&&g.UNSAFE_componentWillMount()),"function"===typeof g.componentDidMount&&(b.effectTag|=4)):("function"===typeof g.componentDidMount&&
-(b.effectTag|=4),b.memoizedProps=d,b.memoizedState=l),g.props=d,g.state=l,g.context=k,d=h):("function"===typeof g.componentDidMount&&(b.effectTag|=4),d=!1)}else g=b.stateNode,h=b.memoizedProps,g.props=b.type===b.elementType?h:U(b.type,h),l=g.context,k=c.contextType,"object"===typeof k&&null!==k?k=W(k):(k=O(c)?Ia:L.current,k=bb(b,k)),m=c.getDerivedStateFromProps,(n="function"===typeof m||"function"===typeof g.getSnapshotBeforeUpdate)||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==
-typeof g.componentWillReceiveProps||(h!==d||l!==k)&&cg(b,g,d,k),Ca=!1,l=b.memoizedState,p=g.state=l,r=b.updateQueue,null!==r&&(Hb(b,r,d,g,e),p=b.memoizedState),h!==d||l!==p||R.current||Ca?("function"===typeof m&&(Ec(b,c,m,d),p=b.memoizedState),(m=Ca||ag(b,c,h,d,l,p,k))?(n||"function"!==typeof g.UNSAFE_componentWillUpdate&&"function"!==typeof g.componentWillUpdate||("function"===typeof g.componentWillUpdate&&g.componentWillUpdate(d,p,k),"function"===typeof g.UNSAFE_componentWillUpdate&&g.UNSAFE_componentWillUpdate(d,
-p,k)),"function"===typeof g.componentDidUpdate&&(b.effectTag|=4),"function"===typeof g.getSnapshotBeforeUpdate&&(b.effectTag|=256)):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),b.memoizedProps=d,b.memoizedState=p),g.props=d,g.state=p,g.context=k,d=m):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&l===a.memoizedState||
-(b.effectTag|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),d=!1);return je(a,b,c,d,f,e)}function je(a,b,c,d,e,f){ug(a,b);var g=0!==(b.effectTag&64);if(!d&&!g)return e&&Wf(b,c,!1),oa(a,b,f);d=b.stateNode;hi.current=b;var h=g&&"function"!==typeof c.getDerivedStateFromError?null:d.render();b.effectTag|=1;null!==a&&g?(b.child=kb(b,a.child,null,f),b.child=kb(b,null,h,f)):S(a,b,h,f);b.memoizedState=d.state;e&&Wf(b,c,!0);return b.child}function wg(a){var b=
-a.stateNode;b.pendingContext?Uf(a,b.pendingContext,b.pendingContext!==b.context):b.context&&Uf(a,b.context,!1);Xd(a,b.containerInfo)}function xg(a,b,c){var d=b.mode,e=b.pendingProps,f=b.memoizedState;if(0===(b.effectTag&64)){f=null;var g=!1}else f={timedOutAt:null!==f?f.timedOutAt:0},g=!0,b.effectTag&=-65;if(null===a)if(g){var h=e.fallback;a=za(null,d,0,null);0===(b.mode&1)&&(a.child=null!==b.memoizedState?b.child.child:b.child);d=za(h,d,c,null);a.sibling=d;c=a;c.return=d.return=b}else c=d=he(b,null,
-e.children,c);else null!==a.memoizedState?(d=a.child,h=d.sibling,g?(c=e.fallback,e=Ja(d,d.pendingProps,0),0===(b.mode&1)&&(g=null!==b.memoizedState?b.child.child:b.child,g!==d.child&&(e.child=g)),d=e.sibling=Ja(h,c,h.expirationTime),c=e,e.childExpirationTime=0,c.return=d.return=b):c=d=kb(b,d.child,e.children,c)):(h=a.child,g?(g=e.fallback,e=za(null,d,0,null),e.child=h,0===(b.mode&1)&&(e.child=null!==b.memoizedState?b.child.child:b.child),d=e.sibling=za(g,d,c,null),d.effectTag|=2,c=e,e.childExpirationTime=
-0,c.return=d.return=b):d=c=kb(b,h,e.children,c)),b.stateNode=a.stateNode;b.memoizedState=f;b.child=c;return d}function oa(a,b,c){null!==a&&(b.contextDependencies=a.contextDependencies);if(b.childExpirationTime<c)return null;null!==a&&b.child!==a.child?n("153"):void 0;if(null!==b.child){a=b.child;c=Ja(a,a.pendingProps,a.expirationTime);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=Ja(a,a.pendingProps,a.expirationTime),c.return=b;c.sibling=null}return b.child}function ii(a,b,c){var d=
-b.expirationTime;if(null!==a)if(a.memoizedProps!==b.pendingProps||R.current)la=!0;else{if(d<c){la=!1;switch(b.tag){case 3:wg(b);ge();break;case 5:gg(b);break;case 1:O(b.type)&&Bc(b);break;case 4:Xd(b,b.stateNode.containerInfo);break;case 10:yg(b,b.memoizedProps.value);break;case 13:if(null!==b.memoizedState){d=b.child.childExpirationTime;if(0!==d&&d>=c)return xg(a,b,c);b=oa(a,b,c);return null!==b?b.sibling:null}}return oa(a,b,c)}}else la=!1;b.expirationTime=0;switch(b.tag){case 2:d=b.elementType;
-null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);a=b.pendingProps;var e=bb(b,L.current);lb(b,c);e=$d(null,b,d,a,e,c);b.effectTag|=1;if("object"===typeof e&&null!==e&&"function"===typeof e.render&&void 0===e.$$typeof){b.tag=1;be();if(O(d)){var f=!0;Bc(b)}else f=!1;b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null;var g=d.getDerivedStateFromProps;"function"===typeof g&&Ec(b,d,g,a);e.updater=Fc;b.stateNode=e;e._reactInternalFiber=b;Vd(b,d,a,c);b=je(null,b,d,!0,f,c)}else b.tag=
-0,S(null,b,e,c),b=b.child;return b;case 16:e=b.elementType;null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);f=b.pendingProps;a=fi(e);b.type=a;e=b.tag=ei(a);f=U(a,f);g=void 0;switch(e){case 0:g=ie(null,b,a,f,c);break;case 1:g=vg(null,b,a,f,c);break;case 11:g=rg(null,b,a,f,c);break;case 14:g=sg(null,b,a,U(a.type,f),d,c);break;default:n("306",a,"")}return g;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:U(d,e),ie(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,e=b.elementType===
-d?e:U(d,e),vg(a,b,d,e,c);case 3:wg(b);d=b.updateQueue;null===d?n("282"):void 0;e=b.memoizedState;e=null!==e?e.element:null;Hb(b,d,b.pendingProps,null,c);d=b.memoizedState.element;if(d===e)ge(),b=oa(a,b,c);else{e=b.stateNode;if(e=(null===a||null===a.child)&&e.hydrate)jb=Tf(b.stateNode.containerInfo),na=b,e=La=!0;e?(b.effectTag|=2,b.child=he(b,null,d,c)):(S(a,b,d,c),ge());b=b.child}return b;case 5:return gg(b),null===a&&pg(b),d=b.type,e=b.pendingProps,f=null!==a?a.memoizedProps:null,g=e.children,Md(d,
-e)?g=null:null!==f&&Md(d,f)&&(b.effectTag|=16),ug(a,b),1!==c&&b.mode&1&&e.hidden?(b.expirationTime=b.childExpirationTime=1,b=null):(S(a,b,g,c),b=b.child),b;case 6:return null===a&&pg(b),null;case 13:return xg(a,b,c);case 4:return Xd(b,b.stateNode.containerInfo),d=b.pendingProps,null===a?b.child=kb(b,null,d,c):S(a,b,d,c),b.child;case 11:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:U(d,e),rg(a,b,d,e,c);case 7:return S(a,b,b.pendingProps,c),b.child;case 8:return S(a,b,b.pendingProps.children,
-c),b.child;case 12:return S(a,b,b.pendingProps.children,c),b.child;case 10:a:{d=b.type._context;e=b.pendingProps;g=b.memoizedProps;f=e.value;yg(b,f);if(null!==g){var h=g.value;f=Ha(h,f)?0:("function"===typeof d._calculateChangedBits?d._calculateChangedBits(h,f):1073741823)|0;if(0===f){if(g.children===e.children&&!R.current){b=oa(a,b,c);break a}}else for(h=b.child,null!==h&&(h.return=b);null!==h;){var l=h.contextDependencies;if(null!==l){g=h.child;for(var k=l.first;null!==k;){if(k.context===d&&0!==
-(k.observedBits&f)){1===h.tag&&(k=Da(c),k.tag=Kc,pa(h,k));h.expirationTime<c&&(h.expirationTime=c);k=h.alternate;null!==k&&k.expirationTime<c&&(k.expirationTime=c);for(var m=h.return;null!==m;){k=m.alternate;if(m.childExpirationTime<c)m.childExpirationTime=c,null!==k&&k.childExpirationTime<c&&(k.childExpirationTime=c);else if(null!==k&&k.childExpirationTime<c)k.childExpirationTime=c;else break;m=m.return}l.expirationTime<c&&(l.expirationTime=c);break}k=k.next}}else g=10===h.tag?h.type===b.type?null:
-h.child:h.child;if(null!==g)g.return=h;else for(g=h;null!==g;){if(g===b){g=null;break}h=g.sibling;if(null!==h){h.return=g.return;g=h;break}g=g.return}h=g}}S(a,b,e.children,c);b=b.child}return b;case 9:return e=b.type,f=b.pendingProps,d=f.children,lb(b,c),e=W(e,f.unstable_observedBits),d=d(e),b.effectTag|=1,S(a,b,d,c),b.child;case 14:return e=b.type,f=U(e,b.pendingProps),f=U(e.type,f),sg(a,b,e,f,d,c);case 15:return tg(a,b,b.type,b.pendingProps,d,c);case 17:return d=b.type,e=b.pendingProps,e=b.elementType===
-d?e:U(d,e),null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2),b.tag=1,O(d)?(a=!0,Bc(b)):a=!1,lb(b,c),bg(b,d,e,c),Vd(b,d,e,c),je(null,b,d,!0,a,c);default:n("156")}}function yg(a,b){var c=a.type._context;Q(ke,c._currentValue,a);c._currentValue=b}function le(a){var b=ke.current;H(ke,a);a.type._context._currentValue=b}function lb(a,b){Sb=a;Tb=Ma=null;var c=a.contextDependencies;null!==c&&c.expirationTime>=b&&(la=!0);a.contextDependencies=null}function W(a,b){if(Tb!==a&&!1!==b&&0!==b){if("number"!==
-typeof b||1073741823===b)Tb=a,b=1073741823;b={context:a,observedBits:b,next:null};null===Ma?(null===Sb?n("308"):void 0,Ma=b,Sb.contextDependencies={first:b,expirationTime:0}):Ma=Ma.next=b}return a._currentValue}function Lc(a){return{baseState:a,firstUpdate:null,lastUpdate:null,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function me(a){return{baseState:a.baseState,firstUpdate:a.firstUpdate,lastUpdate:a.lastUpdate,
-firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function Da(a){return{expirationTime:a,tag:zg,payload:null,callback:null,next:null,nextEffect:null}}function Mc(a,b){null===a.lastUpdate?a.firstUpdate=a.lastUpdate=b:(a.lastUpdate.next=b,a.lastUpdate=b)}function pa(a,b){var c=a.alternate;if(null===c){var d=a.updateQueue;var e=null;null===d&&(d=a.updateQueue=Lc(a.memoizedState))}else d=a.updateQueue,e=c.updateQueue,null===
-d?null===e?(d=a.updateQueue=Lc(a.memoizedState),e=c.updateQueue=Lc(c.memoizedState)):d=a.updateQueue=me(e):null===e&&(e=c.updateQueue=me(d));null===e||d===e?Mc(d,b):null===d.lastUpdate||null===e.lastUpdate?(Mc(d,b),Mc(e,b)):(Mc(d,b),e.lastUpdate=b)}function Ag(a,b){var c=a.updateQueue;c=null===c?a.updateQueue=Lc(a.memoizedState):Bg(a,c);null===c.lastCapturedUpdate?c.firstCapturedUpdate=c.lastCapturedUpdate=b:(c.lastCapturedUpdate.next=b,c.lastCapturedUpdate=b)}function Bg(a,b){var c=a.alternate;null!==
-c&&b===c.updateQueue&&(b=a.updateQueue=me(b));return b}function Cg(a,b,c,d,e,f){switch(c.tag){case Dg:return a=c.payload,"function"===typeof a?a.call(f,d,e):a;case ne:a.effectTag=a.effectTag&-2049|64;case zg:a=c.payload;e="function"===typeof a?a.call(f,d,e):a;if(null===e||void 0===e)break;return K({},d,e);case Kc:Ca=!0}return d}function Hb(a,b,c,d,e){Ca=!1;b=Bg(a,b);for(var f=b.baseState,g=null,h=0,l=b.firstUpdate,k=f;null!==l;){var m=l.expirationTime;m<e?(null===g&&(g=l,f=k),h<m&&(h=m)):(k=Cg(a,
-b,l,k,c,d),null!==l.callback&&(a.effectTag|=32,l.nextEffect=null,null===b.lastEffect?b.firstEffect=b.lastEffect=l:(b.lastEffect.nextEffect=l,b.lastEffect=l)));l=l.next}m=null;for(l=b.firstCapturedUpdate;null!==l;){var n=l.expirationTime;n<e?(null===m&&(m=l,null===g&&(f=k)),h<n&&(h=n)):(k=Cg(a,b,l,k,c,d),null!==l.callback&&(a.effectTag|=32,l.nextEffect=null,null===b.lastCapturedEffect?b.firstCapturedEffect=b.lastCapturedEffect=l:(b.lastCapturedEffect.nextEffect=l,b.lastCapturedEffect=l)));l=l.next}null===
-g&&(b.lastUpdate=null);null===m?b.lastCapturedUpdate=null:a.effectTag|=32;null===g&&null===m&&(f=k);b.baseState=f;b.firstUpdate=g;b.firstCapturedUpdate=m;a.expirationTime=h;a.memoizedState=k}function Eg(a,b,c,d){null!==b.firstCapturedUpdate&&(null!==b.lastUpdate&&(b.lastUpdate.next=b.firstCapturedUpdate,b.lastUpdate=b.lastCapturedUpdate),b.firstCapturedUpdate=b.lastCapturedUpdate=null);Fg(b.firstEffect,c);b.firstEffect=b.lastEffect=null;Fg(b.firstCapturedEffect,c);b.firstCapturedEffect=b.lastCapturedEffect=
-null}function Fg(a,b){for(;null!==a;){var c=a.callback;if(null!==c){a.callback=null;var d=b;"function"!==typeof c?n("191",c):void 0;c.call(d)}a=a.nextEffect}}function Nc(a,b){return{value:a,source:b,stack:wd(b)}}function Ub(a){a.effectTag|=4}function Gg(a,b){var c=b.source,d=b.stack;null===d&&null!==c&&(d=wd(c));null!==c&&va(c.type);b=b.value;null!==a&&1===a.tag&&va(a.type);try{console.error(b)}catch(e){setTimeout(function(){throw e;})}}function Hg(a){var b=a.ref;if(null!==b)if("function"===typeof b)try{b(null)}catch(c){Na(a,
-c)}else b.current=null}function Vb(a,b,c){c=c.updateQueue;c=null!==c?c.lastEffect:null;if(null!==c){var d=c=c.next;do{if((d.tag&a)!==gb){var e=d.destroy;d.destroy=void 0;void 0!==e&&e()}(d.tag&b)!==gb&&(e=d.create,d.destroy=e());d=d.next}while(d!==c)}}function ji(a,b){for(var c=a;;){if(5===c.tag){var d=c.stateNode;if(b)d.style.display="none";else{d=c.stateNode;var e=c.memoizedProps.style;e=void 0!==e&&null!==e&&e.hasOwnProperty("display")?e.display:null;d.style.display=Pf("display",e)}}else if(6===
-c.tag)c.stateNode.nodeValue=b?"":c.memoizedProps;else if(13===c.tag&&null!==c.memoizedState){d=c.child.sibling;d.return=c;c=d;continue}else if(null!==c.child){c.child.return=c;c=c.child;continue}if(c===a)break;for(;null===c.sibling;){if(null===c.return||c.return===a)return;c=c.return}c.sibling.return=c.return;c=c.sibling}}function Ig(a){"function"===typeof Rd&&Rd(a);switch(a.tag){case 0:case 11:case 14:case 15:var b=a.updateQueue;if(null!==b&&(b=b.lastEffect,null!==b)){var c=b=b.next;do{var d=c.destroy;
-if(void 0!==d){var e=a;try{d()}catch(f){Na(e,f)}}c=c.next}while(c!==b)}break;case 1:Hg(a);b=a.stateNode;if("function"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(f){Na(a,f)}break;case 5:Hg(a);break;case 4:Jg(a)}}function Kg(a){return 5===a.tag||3===a.tag||4===a.tag}function Lg(a){a:{for(var b=a.return;null!==b;){if(Kg(b)){var c=b;break a}b=b.return}n("160");c=void 0}var d=b=void 0;switch(c.tag){case 5:b=c.stateNode;d=!1;break;
-case 3:b=c.stateNode.containerInfo;d=!0;break;case 4:b=c.stateNode.containerInfo;d=!0;break;default:n("161")}c.effectTag&16&&(Fb(b,""),c.effectTag&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||Kg(c.return)){c=null;break a}c=c.return}c.sibling.return=c.return;for(c=c.sibling;5!==c.tag&&6!==c.tag;){if(c.effectTag&2)continue b;if(null===c.child||4===c.tag)continue b;else c.child.return=c,c=c.child}if(!(c.effectTag&2)){c=c.stateNode;break a}}for(var e=a;;){if(5===e.tag||6===e.tag)if(c)if(d){var f=
-b,g=e.stateNode,h=c;8===f.nodeType?f.parentNode.insertBefore(g,h):f.insertBefore(g,h)}else b.insertBefore(e.stateNode,c);else d?(g=b,h=e.stateNode,8===g.nodeType?(f=g.parentNode,f.insertBefore(h,g)):(f=g,f.appendChild(h)),g=g._reactRootContainer,null!==g&&void 0!==g||null!==f.onclick||(f.onclick=zc)):b.appendChild(e.stateNode);else if(4!==e.tag&&null!==e.child){e.child.return=e;e=e.child;continue}if(e===a)break;for(;null===e.sibling;){if(null===e.return||e.return===a)return;e=e.return}e.sibling.return=
-e.return;e=e.sibling}}function Jg(a){for(var b=a,c=!1,d=void 0,e=void 0;;){if(!c){c=b.return;a:for(;;){null===c?n("160"):void 0;switch(c.tag){case 5:d=c.stateNode;e=!1;break a;case 3:d=c.stateNode.containerInfo;e=!0;break a;case 4:d=c.stateNode.containerInfo;e=!0;break a}c=c.return}c=!0}if(5===b.tag||6===b.tag){a:for(var f=b,g=f;;)if(Ig(g),null!==g.child&&4!==g.tag)g.child.return=g,g=g.child;else{if(g===f)break;for(;null===g.sibling;){if(null===g.return||g.return===f)break a;g=g.return}g.sibling.return=
-g.return;g=g.sibling}e?(f=d,g=b.stateNode,8===f.nodeType?f.parentNode.removeChild(g):f.removeChild(g)):d.removeChild(b.stateNode)}else if(4===b.tag?(d=b.stateNode.containerInfo,e=!0):Ig(b),null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return;b=b.return;4===b.tag&&(c=!1)}b.sibling.return=b.return;b=b.sibling}}function Mg(a,b){switch(b.tag){case 0:case 11:case 14:case 15:Vb(Wb,ki,b);break;case 1:break;case 5:var c=b.stateNode;
-if(null!=c){var d=b.memoizedProps;a=null!==a?a.memoizedProps:d;var e=b.type,f=b.updateQueue;b.updateQueue=null;null!==f&&bi(c,f,e,a,d,b)}break;case 6:null===b.stateNode?n("162"):void 0;b.stateNode.nodeValue=b.memoizedProps;break;case 3:break;case 12:break;case 13:c=b.memoizedState;d=void 0;a=b;null===c?d=!1:(d=!0,a=b.child,0===c.timedOutAt&&(c.timedOutAt=ma()));null!==a&&ji(a,d);c=b.updateQueue;if(null!==c){b.updateQueue=null;var g=b.stateNode;null===g&&(g=b.stateNode=new li);c.forEach(function(a){var c=
-mi.bind(null,b,a);g.has(a)||(g.add(a),a.then(c,c))})}break;case 17:break;default:n("163")}}function oe(a,b,c){c=Da(c);c.tag=ne;c.payload={element:null};var d=b.value;c.callback=function(){pe(d);Gg(a,b)};return c}function Ng(a,b,c){c=Da(c);c.tag=ne;var d=a.type.getDerivedStateFromError;if("function"===typeof d){var e=b.value;c.payload=function(){return d(e)}}var f=a.stateNode;null!==f&&"function"===typeof f.componentDidCatch&&(c.callback=function(){"function"!==typeof d&&(null===Ea?Ea=new Set([this]):
-Ea.add(this));var c=b.value,e=b.stack;Gg(a,b);this.componentDidCatch(c,{componentStack:null!==e?e:""})});return c}function ni(a,b){switch(a.tag){case 1:return O(a.type)&&Ac(a),b=a.effectTag,b&2048?(a.effectTag=b&-2049|64,a):null;case 3:return cb(a),Pd(a),b=a.effectTag,0!==(b&64)?n("285"):void 0,a.effectTag=b&-2049|64,a;case 5:return Yd(a),null;case 13:return b=a.effectTag,b&2048?(a.effectTag=b&-2049|64,a):null;case 4:return cb(a),null;case 10:return le(a),null;default:return null}}function Og(){if(null!==
-B)for(var a=B.return;null!==a;){var b=a;switch(b.tag){case 1:var c=b.type.childContextTypes;null!==c&&void 0!==c&&Ac(b);break;case 3:cb(b);Pd(b);break;case 5:Yd(b);break;case 4:cb(b);break;case 10:le(b)}a=a.return}ba=null;P=0;Oa=-1;qe=!1;B=null}function oi(a,b){Oc=Pc=re=null;var c=A;A=!0;do{if(b.effectTag&512){var d=!1,e=void 0;try{var f=b;Vb(se,gb,f);Vb(gb,te,f)}catch(g){d=!0,e=g}d&&Na(b,e)}b=b.nextEffect}while(null!==b);A=c;c=a.expirationTime;0!==c&&Qc(a,c)}function hb(){null!==Pc&&pi(Pc);null!==
-Oc&&Oc()}function Pg(a){for(;;){var b=a.alternate,c=a.return,d=a.sibling;if(0===(a.effectTag&1024)){B=a;a:{var e=b;b=a;var f=P;var g=b.pendingProps;switch(b.tag){case 2:break;case 16:break;case 15:case 0:break;case 1:O(b.type)&&Ac(b);break;case 3:cb(b);Pd(b);g=b.stateNode;g.pendingContext&&(g.context=g.pendingContext,g.pendingContext=null);if(null===e||null===e.child)fe(b),b.effectTag&=-3;ue(b);break;case 5:Yd(b);var h=Ka(Kb.current);f=b.type;if(null!==e&&null!=b.stateNode)Qg(e,b,f,g,h),e.ref!==b.ref&&
-(b.effectTag|=128);else if(g){var l=Ka(X.current);if(fe(b)){g=b;e=g.stateNode;var k=g.type,m=g.memoizedProps,p=h;e[ha]=g;e[kc]=m;f=void 0;h=k;switch(h){case "iframe":case "object":r("load",e);break;case "video":case "audio":for(k=0;k<Eb.length;k++)r(Eb[k],e);break;case "source":r("error",e);break;case "img":case "image":case "link":r("error",e);r("load",e);break;case "form":r("reset",e);r("submit",e);break;case "details":r("toggle",e);break;case "input":qf(e,m);r("invalid",e);ja(p,"onChange");break;
-case "select":e._wrapperState={wasMultiple:!!m.multiple};r("invalid",e);ja(p,"onChange");break;case "textarea":Mf(e,m),r("invalid",e),ja(p,"onChange")}Kd(h,m);k=null;for(f in m)m.hasOwnProperty(f)&&(l=m[f],"children"===f?"string"===typeof l?e.textContent!==l&&(k=["children",l]):"number"===typeof l&&e.textContent!==""+l&&(k=["children",""+l]):Ra.hasOwnProperty(f)&&null!=l&&ja(p,f));switch(h){case "input":qc(e);sf(e,m,!0);break;case "textarea":qc(e);f=e.textContent;f===e._wrapperState.initialValue&&
-(e.value=f);break;case "select":case "option":break;default:"function"===typeof m.onClick&&(e.onclick=zc)}f=k;g.updateQueue=f;g=null!==f?!0:!1;g&&Ub(b)}else{m=b;e=f;p=g;k=9===h.nodeType?h:h.ownerDocument;"http://www.w3.org/1999/xhtml"===l&&(l=Of(e));"http://www.w3.org/1999/xhtml"===l?"script"===e?(e=k.createElement("div"),e.innerHTML="<script>\x3c/script>",k=e.removeChild(e.firstChild)):"string"===typeof p.is?k=k.createElement(e,{is:p.is}):(k=k.createElement(e),"select"===e&&p.multiple&&(k.multiple=
-!0)):k=k.createElementNS(l,e);e=k;e[ha]=m;e[kc]=g;Rg(e,b,!1,!1);m=e;k=f;p=g;var x=h,F=Ld(k,p);switch(k){case "iframe":case "object":r("load",m);h=p;break;case "video":case "audio":for(h=0;h<Eb.length;h++)r(Eb[h],m);h=p;break;case "source":r("error",m);h=p;break;case "img":case "image":case "link":r("error",m);r("load",m);h=p;break;case "form":r("reset",m);r("submit",m);h=p;break;case "details":r("toggle",m);h=p;break;case "input":qf(m,p);h=yd(m,p);r("invalid",m);ja(x,"onChange");break;case "option":h=
-Hd(m,p);break;case "select":m._wrapperState={wasMultiple:!!p.multiple};h=K({},p,{value:void 0});r("invalid",m);ja(x,"onChange");break;case "textarea":Mf(m,p);h=Id(m,p);r("invalid",m);ja(x,"onChange");break;default:h=p}Kd(k,h);l=void 0;var w=k,A=m,G=h;for(l in G)if(G.hasOwnProperty(l)){var q=G[l];"style"===l?Qf(A,q):"dangerouslySetInnerHTML"===l?(q=q?q.__html:void 0,null!=q&&Sf(A,q)):"children"===l?"string"===typeof q?("textarea"!==w||""!==q)&&Fb(A,q):"number"===typeof q&&Fb(A,""+q):"suppressContentEditableWarning"!==
-l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(Ra.hasOwnProperty(l)?null!=q&&ja(x,l):null!=q&&xd(A,l,q,F))}switch(k){case "input":qc(m);sf(m,p,!1);break;case "textarea":qc(m);h=m.textContent;h===m._wrapperState.initialValue&&(m.value=h);break;case "option":null!=p.value&&m.setAttribute("value",""+xa(p.value));break;case "select":h=m;m=p;h.multiple=!!m.multiple;p=m.value;null!=p?$a(h,!!m.multiple,p,!1):null!=m.defaultValue&&$a(h,!!m.multiple,m.defaultValue,!0);break;default:"function"===typeof h.onClick&&
-(m.onclick=zc)}(g=Rf(f,g))&&Ub(b);b.stateNode=e}null!==b.ref&&(b.effectTag|=128)}else null===b.stateNode?n("166"):void 0;break;case 6:e&&null!=b.stateNode?Sg(e,b,e.memoizedProps,g):("string"!==typeof g&&(null===b.stateNode?n("166"):void 0),e=Ka(Kb.current),Ka(X.current),fe(b)?(g=b,f=g.stateNode,e=g.memoizedProps,f[ha]=g,(g=f.nodeValue!==e)&&Ub(b)):(f=b,g=(9===e.nodeType?e:e.ownerDocument).createTextNode(g),g[ha]=b,f.stateNode=g));break;case 11:break;case 13:g=b.memoizedState;if(0!==(b.effectTag&64)){b.expirationTime=
-f;B=b;break a}g=null!==g;f=null!==e&&null!==e.memoizedState;null!==e&&!g&&f&&(e=e.child.sibling,null!==e&&(h=b.firstEffect,null!==h?(b.firstEffect=e,e.nextEffect=h):(b.firstEffect=b.lastEffect=e,e.nextEffect=null),e.effectTag=8));if(g||f)b.effectTag|=4;break;case 7:break;case 8:break;case 12:break;case 4:cb(b);ue(b);break;case 10:le(b);break;case 9:break;case 14:break;case 17:O(b.type)&&Ac(b);break;default:n("156")}B=null}b=a;if(1===P||1!==b.childExpirationTime){g=0;for(f=b.child;null!==f;)e=f.expirationTime,
-h=f.childExpirationTime,e>g&&(g=e),h>g&&(g=h),f=f.sibling;b.childExpirationTime=g}if(null!==B)return B;null!==c&&0===(c.effectTag&1024)&&(null===c.firstEffect&&(c.firstEffect=a.firstEffect),null!==a.lastEffect&&(null!==c.lastEffect&&(c.lastEffect.nextEffect=a.firstEffect),c.lastEffect=a.lastEffect),1<a.effectTag&&(null!==c.lastEffect?c.lastEffect.nextEffect=a:c.firstEffect=a,c.lastEffect=a))}else{a=ni(a,P);if(null!==a)return a.effectTag&=1023,a;null!==c&&(c.firstEffect=c.lastEffect=null,c.effectTag|=
-1024)}if(null!==d)return d;if(null!==c)a=c;else break}return null}function Tg(a){var b=ii(a.alternate,a,P);a.memoizedProps=a.pendingProps;null===b&&(b=Pg(a));Ug.current=null;return b}function Vg(a,b){Fa?n("243"):void 0;hb();Fa=!0;var c=ve.current;ve.current=ae;var d=a.nextExpirationTimeToWorkOn;if(d!==P||a!==ba||null===B)Og(),ba=a,P=d,B=Ja(ba.current,null,P),a.pendingCommitExpirationTime=0;var e=!1;do{try{if(b)for(;null!==B&&!Rc();)B=Tg(B);else for(;null!==B;)B=Tg(B)}catch(Wd){if(Tb=Ma=Sb=null,be(),
-null===B)e=!0,pe(Wd);else{null===B?n("271"):void 0;var f=B,g=f.return;if(null===g)e=!0,pe(Wd);else{a:{var h=a,l=g,k=f,m=Wd;g=P;k.effectTag|=1024;k.firstEffect=k.lastEffect=null;if(null!==m&&"object"===typeof m&&"function"===typeof m.then){var p=m;m=l;var r=-1,x=-1;do{if(13===m.tag){var w=m.alternate;if(null!==w&&(w=w.memoizedState,null!==w)){x=10*(1073741822-w.timedOutAt);break}w=m.pendingProps.maxDuration;if("number"===typeof w)if(0>=w)r=0;else if(-1===r||w<r)r=w}m=m.return}while(null!==m);m=l;do{if(w=
-13===m.tag)w=void 0===m.memoizedProps.fallback?!1:null===m.memoizedState;if(w){l=m.updateQueue;null===l?(l=new Set,l.add(p),m.updateQueue=l):l.add(p);if(0===(m.mode&1)){m.effectTag|=64;k.effectTag&=-1957;1===k.tag&&(null===k.alternate?k.tag=17:(g=Da(1073741823),g.tag=Kc,pa(k,g)));k.expirationTime=1073741823;break a}k=h.pingCache;null===k?(k=h.pingCache=new qi,l=new Set,k.set(p,l)):(l=k.get(p),void 0===l&&(l=new Set,k.set(p,l)));l.has(g)||(l.add(g),k=ri.bind(null,h,p,g),p.then(k,k));-1===r?h=1073741823:
-(-1===x&&(x=10*(1073741822-$f(h,g))-5E3),h=x+r);0<=h&&Oa<h&&(Oa=h);m.effectTag|=2048;m.expirationTime=g;break a}m=m.return}while(null!==m);m=Error((va(k.type)||"A React component")+" suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display."+wd(k))}qe=!0;m=Nc(m,k);h=l;do{switch(h.tag){case 3:h.effectTag|=2048;h.expirationTime=g;g=oe(h,m,g);Ag(h,g);break a;case 1:if(p=m,r=h.type,
-x=h.stateNode,0===(h.effectTag&64)&&("function"===typeof r.getDerivedStateFromError||null!==x&&"function"===typeof x.componentDidCatch&&(null===Ea||!Ea.has(x)))){h.effectTag|=2048;h.expirationTime=g;g=Ng(h,p,g);Ag(h,g);break a}}h=h.return}while(null!==h)}B=Pg(f);continue}}}break}while(1);Fa=!1;ve.current=c;Tb=Ma=Sb=null;be();if(e)ba=null,a.finishedWork=null;else if(null!==B)a.finishedWork=null;else{c=a.current.alternate;null===c?n("281"):void 0;ba=null;if(qe){e=a.latestPendingTime;f=a.latestSuspendedTime;
-g=a.latestPingedTime;if(0!==e&&e<d||0!==f&&f<d||0!==g&&g<d){Zf(a,d);we(a,c,d,a.expirationTime,-1);return}if(!a.didError&&b){a.didError=!0;d=a.nextExpirationTimeToWorkOn=d;b=a.expirationTime=1073741823;we(a,c,d,b,-1);return}}b&&-1!==Oa?(Zf(a,d),b=10*(1073741822-$f(a,d)),b<Oa&&(Oa=b),b=10*(1073741822-ma()),b=Oa-b,we(a,c,d,a.expirationTime,0>b?0:b)):(a.pendingCommitExpirationTime=d,a.finishedWork=c)}}function Na(a,b){for(var c=a.return;null!==c;){switch(c.tag){case 1:var d=c.stateNode;if("function"===
-typeof c.type.getDerivedStateFromError||"function"===typeof d.componentDidCatch&&(null===Ea||!Ea.has(d))){a=Nc(b,a);a=Ng(c,a,1073741823);pa(c,a);Ba(c,1073741823);return}break;case 3:a=Nc(b,a);a=oe(c,a,1073741823);pa(c,a);Ba(c,1073741823);return}c=c.return}3===a.tag&&(c=Nc(b,a),c=oe(a,c,1073741823),pa(a,c),Ba(a,1073741823))}function ib(a,b){0!==Xb?a=Xb:Fa?a=Sc?1073741823:P:b.mode&1?(a=mb?1073741822-10*(((1073741822-a+15)/10|0)+1):1073741822-25*(((1073741822-a+500)/25|0)+1),null!==ba&&a===P&&--a):a=
-1073741823;mb&&(0===qa||a<qa)&&(qa=a);return a}function ri(a,b,c){var d=a.pingCache;null!==d&&d.delete(b);if(null!==ba&&P===c)ba=null;else if(b=a.earliestSuspendedTime,d=a.latestSuspendedTime,0!==b&&c<=b&&c>=d){a.didError=!1;b=a.latestPingedTime;if(0===b||b>c)a.latestPingedTime=c;Dc(c,a);c=a.expirationTime;0!==c&&Qc(a,c)}}function mi(a,b){var c=a.stateNode;null!==c&&c.delete(b);b=ma();b=ib(b,a);a=Wg(a,b);null!==a&&(Gb(a,b),b=a.expirationTime,0!==b&&Qc(a,b))}function Wg(a,b){a.expirationTime<b&&(a.expirationTime=
-b);var c=a.alternate;null!==c&&c.expirationTime<b&&(c.expirationTime=b);var d=a.return,e=null;if(null===d&&3===a.tag)e=a.stateNode;else for(;null!==d;){c=d.alternate;d.childExpirationTime<b&&(d.childExpirationTime=b);null!==c&&c.childExpirationTime<b&&(c.childExpirationTime=b);if(null===d.return&&3===d.tag){e=d.stateNode;break}d=d.return}return e}function Ba(a,b){a=Wg(a,b);null!==a&&(!Fa&&0!==P&&b>P&&Og(),Gb(a,b),Fa&&!Sc&&ba===a||Qc(a,a.expirationTime),Yb>si&&(Yb=0,n("185")))}function Xg(a,b,c,d,
-e){var f=Xb;Xb=1073741823;try{return a(b,c,d,e)}finally{Xb=f}}function Zb(){ca=1073741822-((xe()-ye)/10|0)}function Yg(a,b){if(0!==Tc){if(b<Tc)return;null!==Uc&&Zg(Uc)}Tc=b;a=xe()-ye;Uc=$g(ti,{timeout:10*(1073741822-b)-a})}function we(a,b,c,d,e){a.expirationTime=d;0!==e||Rc()?0<e&&(a.timeoutHandle=ui(vi.bind(null,a,b,c),e)):(a.pendingCommitExpirationTime=c,a.finishedWork=b)}function vi(a,b,c){a.pendingCommitExpirationTime=c;a.finishedWork=b;Zb();nb=ca;ah(a,c)}function ma(){if(A)return nb;Vc();if(0===
-C||1===C)Zb(),nb=ca;return nb}function Qc(a,b){null===a.nextScheduledRoot?(a.expirationTime=b,null===I?(da=I=a,a.nextScheduledRoot=a):(I=I.nextScheduledRoot=a,I.nextScheduledRoot=da)):b>a.expirationTime&&(a.expirationTime=b);A||(E?Wc&&(ea=a,C=1073741823,Xc(a,1073741823,!1)):1073741823===b?ra(1073741823,!1):Yg(a,b))}function Vc(){var a=0,b=null;if(null!==I)for(var c=I,d=da;null!==d;){var e=d.expirationTime;if(0===e){null===c||null===I?n("244"):void 0;if(d===d.nextScheduledRoot){da=I=d.nextScheduledRoot=
-null;break}else if(d===da)da=e=d.nextScheduledRoot,I.nextScheduledRoot=e,d.nextScheduledRoot=null;else if(d===I){I=c;I.nextScheduledRoot=da;d.nextScheduledRoot=null;break}else c.nextScheduledRoot=d.nextScheduledRoot,d.nextScheduledRoot=null;d=c.nextScheduledRoot}else{e>a&&(a=e,b=d);if(d===I)break;if(1073741823===a)break;c=d;d=d.nextScheduledRoot}}ea=b;C=a}function Rc(){return Yc?!0:wi()?Yc=!0:!1}function ti(){try{if(!Rc()&&null!==da){Zb();var a=da;do{var b=a.expirationTime;0!==b&&ca<=b&&(a.nextExpirationTimeToWorkOn=
-ca);a=a.nextScheduledRoot}while(a!==da)}ra(0,!0)}finally{Yc=!1}}function ra(a,b){Vc();if(b)for(Zb(),nb=ca;null!==ea&&0!==C&&a<=C&&!(Yc&&ca>C);)Xc(ea,C,ca>C),Vc(),Zb(),nb=ca;else for(;null!==ea&&0!==C&&a<=C;)Xc(ea,C,!1),Vc();b&&(Tc=0,Uc=null);0!==C&&Yg(ea,C);Yb=0;ze=null;if(null!==ob)for(a=ob,ob=null,b=0;b<a.length;b++){var c=a[b];try{c._onComplete()}catch(d){pb||(pb=!0,Zc=d)}}if(pb)throw a=Zc,Zc=null,pb=!1,a;}function ah(a,b){A?n("253"):void 0;ea=a;C=b;Xc(a,b,!1);ra(1073741823,!1)}function Xc(a,b,
-c){A?n("245"):void 0;A=!0;if(c){var d=a.finishedWork;null!==d?$c(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,-1!==d&&(a.timeoutHandle=-1,bh(d)),Vg(a,c),d=a.finishedWork,null!==d&&(Rc()?a.finishedWork=d:$c(a,d,b)))}else d=a.finishedWork,null!==d?$c(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,-1!==d&&(a.timeoutHandle=-1,bh(d)),Vg(a,c),d=a.finishedWork,null!==d&&$c(a,d,b));A=!1}function $c(a,b,c){var d=a.firstBatch;if(null!==d&&d._expirationTime>=c&&(null===ob?ob=[d]:ob.push(d),d._defer)){a.finishedWork=
-b;a.expirationTime=0;return}a.finishedWork=null;a===ze?Yb++:(ze=a,Yb=0);Sc=Fa=!0;a.current===b?n("177"):void 0;c=a.pendingCommitExpirationTime;0===c?n("261"):void 0;a.pendingCommitExpirationTime=0;d=b.expirationTime;var e=b.childExpirationTime;d=e>d?e:d;a.didError=!1;0===d?(a.earliestPendingTime=0,a.latestPendingTime=0,a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=0):(d<a.latestPingedTime&&(a.latestPingedTime=0),e=a.latestPendingTime,0!==e&&(e>d?a.earliestPendingTime=a.latestPendingTime=
-0:a.earliestPendingTime>d&&(a.earliestPendingTime=a.latestPendingTime)),e=a.earliestSuspendedTime,0===e?Gb(a,d):d<a.latestSuspendedTime?(a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=0,Gb(a,d)):d>e&&Gb(a,d));Dc(0,a);Ug.current=null;1<b.effectTag?null!==b.lastEffect?(b.lastEffect.nextEffect=b,d=b.firstEffect):d=b:d=b.firstEffect;Ae=wc;e=Jf();if(Ed(e)){if("selectionStart"in e)var f={start:e.selectionStart,end:e.selectionEnd};else a:{f=(f=e.ownerDocument)&&f.defaultView||window;
-var g=f.getSelection&&f.getSelection();if(g&&0!==g.rangeCount){f=g.anchorNode;var h=g.anchorOffset,l=g.focusNode;g=g.focusOffset;try{f.nodeType,l.nodeType}catch(qb){f=null;break a}var k=0,m=-1,r=-1,x=0,B=0,w=e,A=null;b:for(;;){for(var G;;){w!==f||0!==h&&3!==w.nodeType||(m=k+h);w!==l||0!==g&&3!==w.nodeType||(r=k+g);3===w.nodeType&&(k+=w.nodeValue.length);if(null===(G=w.firstChild))break;A=w;w=G}for(;;){if(w===e)break b;A===f&&++x===h&&(m=k);A===l&&++B===g&&(r=k);if(null!==(G=w.nextSibling))break;w=
-A;A=w.parentNode}w=G}f=-1===m||-1===r?null:{start:m,end:r}}else f=null}f=f||{start:0,end:0}}else f=null;Be={focusedElem:e,selectionRange:f};wc=!1;for(p=d;null!==p;){e=!1;f=void 0;try{for(;null!==p;){if(p.effectTag&256)a:{var q=p.alternate;h=p;switch(h.tag){case 0:case 11:case 15:Vb(xi,gb,h);break a;case 1:if(h.effectTag&256&&null!==q){var t=q.memoizedProps,z=q.memoizedState,F=h.stateNode,K=F.getSnapshotBeforeUpdate(h.elementType===h.type?t:U(h.type,t),z);F.__reactInternalSnapshotBeforeUpdate=K}break a;
-case 3:case 5:case 6:case 4:case 17:break a;default:n("163")}}p=p.nextEffect}}catch(qb){e=!0,f=qb}e&&(null===p?n("178"):void 0,Na(p,f),null!==p&&(p=p.nextEffect))}for(p=d;null!==p;){q=!1;t=void 0;try{for(;null!==p;){var y=p.effectTag;y&16&&Fb(p.stateNode,"");if(y&128){var D=p.alternate;if(null!==D){var v=D.ref;null!==v&&("function"===typeof v?v(null):v.current=null)}}switch(y&14){case 2:Lg(p);p.effectTag&=-3;break;case 6:Lg(p);p.effectTag&=-3;Mg(p.alternate,p);break;case 4:Mg(p.alternate,p);break;
-case 8:z=p;Jg(z);z.return=null;z.child=null;z.memoizedState=null;z.updateQueue=null;var u=z.alternate;null!==u&&(u.return=null,u.child=null,u.memoizedState=null,u.updateQueue=null)}p=p.nextEffect}}catch(qb){q=!0,t=qb}q&&(null===p?n("178"):void 0,Na(p,t),null!==p&&(p=p.nextEffect))}v=Be;D=Jf();y=v.focusedElem;q=v.selectionRange;if(D!==y&&y&&y.ownerDocument&&If(y.ownerDocument.documentElement,y)){null!==q&&Ed(y)&&(D=q.start,v=q.end,void 0===v&&(v=D),"selectionStart"in y?(y.selectionStart=D,y.selectionEnd=
-Math.min(v,y.value.length)):(v=(D=y.ownerDocument||document)&&D.defaultView||window,v.getSelection&&(v=v.getSelection(),t=y.textContent.length,u=Math.min(q.start,t),q=void 0===q.end?u:Math.min(q.end,t),!v.extend&&u>q&&(t=q,q=u,u=t),t=Hf(y,u),z=Hf(y,q),t&&z&&(1!==v.rangeCount||v.anchorNode!==t.node||v.anchorOffset!==t.offset||v.focusNode!==z.node||v.focusOffset!==z.offset)&&(D=D.createRange(),D.setStart(t.node,t.offset),v.removeAllRanges(),u>q?(v.addRange(D),v.extend(z.node,z.offset)):(D.setEnd(z.node,
-z.offset),v.addRange(D))))));D=[];for(v=y;v=v.parentNode;)1===v.nodeType&&D.push({element:v,left:v.scrollLeft,top:v.scrollTop});"function"===typeof y.focus&&y.focus();for(y=0;y<D.length;y++)v=D[y],v.element.scrollLeft=v.left,v.element.scrollTop=v.top}Be=null;wc=!!Ae;Ae=null;a.current=b;for(p=d;null!==p;){y=!1;D=void 0;try{for(v=a,u=c;null!==p;){var C=p.effectTag;if(C&36){var E=p.alternate;q=p;t=u;switch(q.tag){case 0:case 11:case 15:Vb(yi,$b,q);break;case 1:var H=q.stateNode;if(q.effectTag&4)if(null===
-E)H.componentDidMount();else{var O=q.elementType===q.type?E.memoizedProps:U(q.type,E.memoizedProps);H.componentDidUpdate(O,E.memoizedState,H.__reactInternalSnapshotBeforeUpdate)}var L=q.updateQueue;null!==L&&Eg(q,L,H,t);break;case 3:var M=q.updateQueue;if(null!==M){z=null;if(null!==q.child)switch(q.child.tag){case 5:z=q.child.stateNode;break;case 1:z=q.child.stateNode}Eg(q,M,z,t)}break;case 5:var P=q.stateNode;null===E&&q.effectTag&4&&Rf(q.type,q.memoizedProps)&&P.focus();break;case 6:break;case 4:break;
-case 12:break;case 13:break;case 17:break;default:n("163")}}if(C&128){var I=p.ref;if(null!==I){var N=p.stateNode;switch(p.tag){case 5:var J=N;break;default:J=N}"function"===typeof I?I(J):I.current=J}}C&512&&(re=v);p=p.nextEffect}}catch(qb){y=!0,D=qb}y&&(null===p?n("178"):void 0,Na(p,D),null!==p&&(p=p.nextEffect))}null!==d&&null!==re&&(C=oi.bind(null,a,d),Pc=zi(C),Oc=C);Fa=Sc=!1;"function"===typeof Qd&&Qd(b.stateNode);C=b.expirationTime;b=b.childExpirationTime;b=b>C?b:C;0===b&&(Ea=null);a.expirationTime=
-b;a.finishedWork=null}function pe(a){null===ea?n("246"):void 0;ea.expirationTime=0;pb||(pb=!0,Zc=a)}function ch(a,b){var c=E;E=!0;try{return a(b)}finally{(E=c)||A||ra(1073741823,!1)}}function dh(a,b){if(E&&!Wc){Wc=!0;try{return a(b)}finally{Wc=!1}}return a(b)}function eh(a,b,c){if(mb)return a(b,c);E||A||0===qa||(ra(qa,!1),qa=0);var d=mb,e=E;E=mb=!0;try{return a(b,c)}finally{mb=d,(E=e)||A||ra(1073741823,!1)}}function fh(a,b,c,d,e){var f=b.current;a:if(c){c=c._reactInternalFiber;b:{2===Bb(c)&&1===c.tag?
-void 0:n("170");var g=c;do{switch(g.tag){case 3:g=g.stateNode.context;break b;case 1:if(O(g.type)){g=g.stateNode.__reactInternalMemoizedMergedChildContext;break b}}g=g.return}while(null!==g);n("171");g=void 0}if(1===c.tag){var h=c.type;if(O(h)){c=Vf(c,h,g);break a}}c=g}else c=ya;null===b.context?b.context=c:b.pendingContext=c;b=e;e=Da(d);e.payload={element:a};b=void 0===b?null:b;null!==b&&(e.callback=b);hb();pa(f,e);Ba(f,d);return d}function Ce(a,b,c,d){var e=b.current,f=ma();e=ib(f,e);return fh(a,
-b,c,e,d)}function De(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return a.child.stateNode;default:return a.child.stateNode}}function Ai(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:Ya,key:null==d?null:""+d,children:a,containerInfo:b,implementation:c}}function ac(a){var b=1073741822-25*(((1073741822-ma()+500)/25|0)+1);b>=Ee&&(b=Ee-1);this._expirationTime=Ee=b;this._root=a;this._callbacks=this._next=null;this._hasChildren=this._didComplete=
-!1;this._children=null;this._defer=!0}function rb(){this._callbacks=null;this._didCommit=!1;this._onCommit=this._onCommit.bind(this)}function sb(a,b,c){b=V(3,null,null,b?3:0);a={current:b,containerInfo:a,pendingChildren:null,pingCache:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,didError:!1,pendingCommitExpirationTime:0,finishedWork:null,timeoutHandle:-1,context:null,pendingContext:null,hydrate:c,nextExpirationTimeToWorkOn:0,expirationTime:0,
-firstBatch:null,nextScheduledRoot:null};this._internalRoot=b.stateNode=a}function tb(a){return!(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!==a.nodeType||" react-mount-point-unstable "!==a.nodeValue))}function Bi(a,b){b||(b=a?9===a.nodeType?a.documentElement:a.firstChild:null,b=!(!b||1!==b.nodeType||!b.hasAttribute("data-reactroot")));if(!b)for(var c;c=a.lastChild;)a.removeChild(c);return new sb(a,!1,b)}function ad(a,b,c,d,e){var f=c._reactRootContainer;if(f){if("function"===typeof e){var g=
-e;e=function(){var a=De(f._internalRoot);g.call(a)}}null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)}else{f=c._reactRootContainer=Bi(c,d);if("function"===typeof e){var h=e;e=function(){var a=De(f._internalRoot);h.call(a)}}dh(function(){null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)})}return De(f._internalRoot)}function gh(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;tb(b)?void 0:n("200");return Ai(a,b,null,c)}fa?void 0:n("227");var wh=function(a,
-b,c,d,e,f,g,h,l){var k=Array.prototype.slice.call(arguments,3);try{b.apply(c,k)}catch(m){this.onError(m)}},vb=!1,fc=null,gc=!1,dd=null,xh={onError:function(a){vb=!0;fc=a}},hc=null,Qa={},ic=[],ed={},Ra={},fd={},hd=null,Ze=null,Me=null,wb=null,zh=function(a){if(a){var b=a._dispatchListeners,c=a._dispatchInstances;if(Array.isArray(b))for(var d=0;d<b.length&&!a.isPropagationStopped();d++)Le(a,b[d],c[d]);else b&&Le(a,b,c);a._dispatchListeners=null;a._dispatchInstances=null;a.isPersistent()||a.constructor.release(a)}},
-Fe={injectEventPluginOrder:function(a){hc?n("101"):void 0;hc=Array.prototype.slice.call(a);Je()},injectEventPluginsByName:function(a){var b=!1,c;for(c in a)if(a.hasOwnProperty(c)){var d=a[c];Qa.hasOwnProperty(c)&&Qa[c]===d||(Qa[c]?n("102",c):void 0,Qa[c]=d,b=!0)}b&&Je()}},hh=Math.random().toString(36).slice(2),ha="__reactInternalInstance$"+hh,kc="__reactEventHandlers$"+hh,ua=!("undefined"===typeof window||!window.document||!window.document.createElement),Ua={animationend:lc("Animation","AnimationEnd"),
-animationiteration:lc("Animation","AnimationIteration"),animationstart:lc("Animation","AnimationStart"),transitionend:lc("Transition","TransitionEnd")},ld={},Qe={};ua&&(Qe=document.createElement("div").style,"AnimationEvent"in window||(delete Ua.animationend.animation,delete Ua.animationiteration.animation,delete Ua.animationstart.animation),"TransitionEvent"in window||delete Ua.transitionend.transition);var ih=mc("animationend"),jh=mc("animationiteration"),kh=mc("animationstart"),lh=mc("transitionend"),
-Eb="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),ta=null,md=null,nc=null,K=fa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.assign;K(N.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():"unknown"!==typeof a.returnValue&&(a.returnValue=!1),this.isDefaultPrevented=
-oc)},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():"unknown"!==typeof a.cancelBubble&&(a.cancelBubble=!0),this.isPropagationStopped=oc)},persist:function(){this.isPersistent=oc},isPersistent:pc,destructor:function(){var a=this.constructor.Interface,b;for(b in a)this[b]=null;this.nativeEvent=this._targetInst=this.dispatchConfig=null;this.isPropagationStopped=this.isDefaultPrevented=pc;this._dispatchInstances=this._dispatchListeners=null}});N.Interface=
-{type:null,target:null,currentTarget:function(){return null},eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(a){return a.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null};N.extend=function(a){function b(){return c.apply(this,arguments)}var c=this,d=function(){};d.prototype=c.prototype;d=new d;K(d,b.prototype);b.prototype=d;b.prototype.constructor=b;b.Interface=K({},c.Interface,a);b.extend=c.extend;Se(b);return b};Se(N);var Ci=N.extend({data:null}),Di=N.extend({data:null}),
-Eh=[9,13,27,32],nd=ua&&"CompositionEvent"in window,bc=null;ua&&"documentMode"in document&&(bc=document.documentMode);var Ei=ua&&"TextEvent"in window&&!bc,Xe=ua&&(!nd||bc&&8<bc&&11>=bc),We=String.fromCharCode(32),sa={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},
-compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},Ve=!1,Va=!1,Fi={eventTypes:sa,extractEvents:function(a,b,c,d){var e=void 0;var f=void 0;if(nd)b:{switch(a){case "compositionstart":e=
-sa.compositionStart;break b;case "compositionend":e=sa.compositionEnd;break b;case "compositionupdate":e=sa.compositionUpdate;break b}e=void 0}else Va?Te(a,c)&&(e=sa.compositionEnd):"keydown"===a&&229===c.keyCode&&(e=sa.compositionStart);e?(Xe&&"ko"!==c.locale&&(Va||e!==sa.compositionStart?e===sa.compositionEnd&&Va&&(f=Re()):(ta=d,md="value"in ta?ta.value:ta.textContent,Va=!0)),e=Ci.getPooled(e,b,c,d),f?e.data=f:(f=Ue(c),null!==f&&(e.data=f)),Ta(e),f=e):f=null;(a=Ei?Fh(a,c):Gh(a,c))?(b=Di.getPooled(sa.beforeInput,
-b,c,d),b.data=a,Ta(b)):b=null;return null===f?b:null===b?f:[f,b]}},od=null,Wa=null,Xa=null,cf=function(a,b){return a(b)},Df=function(a,b,c){return a(b,c)},df=function(){},pd=!1,Hh={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},Pa=fa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;Pa.hasOwnProperty("ReactCurrentDispatcher")||(Pa.ReactCurrentDispatcher={current:null});var Jh=/^(.*)[\\\/]/,T="function"===
-typeof Symbol&&Symbol.for,Hc=T?Symbol.for("react.element"):60103,Ya=T?Symbol.for("react.portal"):60106,wa=T?Symbol.for("react.fragment"):60107,sd=T?Symbol.for("react.strict_mode"):60108,rc=T?Symbol.for("react.profiler"):60114,lf=T?Symbol.for("react.provider"):60109,kf=T?Symbol.for("react.context"):60110,rd=T?Symbol.for("react.concurrent_mode"):60111,ud=T?Symbol.for("react.forward_ref"):60112,td=T?Symbol.for("react.suspense"):60113,vd=T?Symbol.for("react.memo"):60115,mf=T?Symbol.for("react.lazy"):
-60116,jf="function"===typeof Symbol&&Symbol.iterator,Lh=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,nf=Object.prototype.hasOwnProperty,pf={},of={},F={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(a){F[a]=
-new J(a,0,!1,a,null)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){var b=a[0];F[b]=new J(b,1,!1,a[1],null)});["contentEditable","draggable","spellCheck","value"].forEach(function(a){F[a]=new J(a,2,!1,a.toLowerCase(),null)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){F[a]=new J(a,2,!1,a,null)});"allowFullScreen async autoFocus autoPlay controls default defer disabled formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){F[a]=
-new J(a,3,!1,a.toLowerCase(),null)});["checked","multiple","muted","selected"].forEach(function(a){F[a]=new J(a,3,!0,a,null)});["capture","download"].forEach(function(a){F[a]=new J(a,4,!1,a,null)});["cols","rows","size","span"].forEach(function(a){F[a]=new J(a,6,!1,a,null)});["rowSpan","start"].forEach(function(a){F[a]=new J(a,5,!1,a.toLowerCase(),null)});var Ge=/[\-:]([a-z])/g,He=function(a){return a[1].toUpperCase()};"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=
-a.replace(Ge,He);F[b]=new J(b,1,!1,a,null)});"xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(Ge,He);F[b]=new J(b,1,!1,a,"http://www.w3.org/1999/xlink")});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(Ge,He);F[b]=new J(b,1,!1,a,"http://www.w3.org/XML/1998/namespace")});F.tabIndex=new J("tabIndex",1,!1,"tabindex",null);var uf={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},
-dependencies:"blur change click focus input keydown keyup selectionchange".split(" ")}},yb=null,zb=null,Ie=!1;ua&&(Ie=ff("input")&&(!document.documentMode||9<document.documentMode));var Gi={eventTypes:uf,_isInputEventSupported:Ie,extractEvents:function(a,b,c,d){var e=b?Ga(b):window,f=void 0,g=void 0,h=e.nodeName&&e.nodeName.toLowerCase();"select"===h||"input"===h&&"file"===e.type?f=Ph:ef(e)?Ie?f=Th:(f=Rh,g=Qh):(h=e.nodeName)&&"input"===h.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)&&(f=
-Sh);if(f&&(f=f(a,b)))return tf(f,c,d);g&&g(a,e,b);"blur"===a&&(a=e._wrapperState)&&a.controlled&&"number"===e.type&&Ad(e,"number",e.value)}},cc=N.extend({view:null,detail:null}),Vh={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"},mh=0,nh=0,oh=!1,ph=!1,dc=cc.extend({screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:Bd,button:null,buttons:null,relatedTarget:function(a){return a.relatedTarget||
-(a.fromElement===a.srcElement?a.toElement:a.fromElement)},movementX:function(a){if("movementX"in a)return a.movementX;var b=mh;mh=a.screenX;return oh?"mousemove"===a.type?a.screenX-b:0:(oh=!0,0)},movementY:function(a){if("movementY"in a)return a.movementY;var b=nh;nh=a.screenY;return ph?"mousemove"===a.type?a.screenY-b:0:(ph=!0,0)}}),qh=dc.extend({pointerId:null,width:null,height:null,pressure:null,tangentialPressure:null,tiltX:null,tiltY:null,twist:null,pointerType:null,isPrimary:null}),ec={mouseEnter:{registrationName:"onMouseEnter",
-dependencies:["mouseout","mouseover"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["mouseout","mouseover"]},pointerEnter:{registrationName:"onPointerEnter",dependencies:["pointerout","pointerover"]},pointerLeave:{registrationName:"onPointerLeave",dependencies:["pointerout","pointerover"]}},Hi={eventTypes:ec,extractEvents:function(a,b,c,d){var e="mouseover"===a||"pointerover"===a,f="mouseout"===a||"pointerout"===a;if(e&&(c.relatedTarget||c.fromElement)||!f&&!e)return null;e=d.window===
-d?d:(e=d.ownerDocument)?e.defaultView||e.parentWindow:window;f?(f=b,b=(b=c.relatedTarget||c.toElement)?jc(b):null):f=null;if(f===b)return null;var g=void 0,h=void 0,l=void 0,k=void 0;if("mouseout"===a||"mouseover"===a)g=dc,h=ec.mouseLeave,l=ec.mouseEnter,k="mouse";else if("pointerout"===a||"pointerover"===a)g=qh,h=ec.pointerLeave,l=ec.pointerEnter,k="pointer";var m=null==f?e:Ga(f);e=null==b?e:Ga(b);a=g.getPooled(h,f,c,d);a.type=k+"leave";a.target=m;a.relatedTarget=e;c=g.getPooled(l,b,c,d);c.type=
-k+"enter";c.target=e;c.relatedTarget=m;d=b;if(f&&d)a:{b=f;e=d;k=0;for(g=b;g;g=ia(g))k++;g=0;for(l=e;l;l=ia(l))g++;for(;0<k-g;)b=ia(b),k--;for(;0<g-k;)e=ia(e),g--;for(;k--;){if(b===e||b===e.alternate)break a;b=ia(b);e=ia(e)}b=null}else b=null;e=b;for(b=[];f&&f!==e;){k=f.alternate;if(null!==k&&k===e)break;b.push(f);f=ia(f)}for(f=[];d&&d!==e;){k=d.alternate;if(null!==k&&k===e)break;f.push(d);d=ia(d)}for(d=0;d<b.length;d++)kd(b[d],"bubbled",a);for(d=f.length;0<d--;)kd(f[d],"captured",c);return[a,c]}},
-Wh=Object.prototype.hasOwnProperty,Ii=N.extend({animationName:null,elapsedTime:null,pseudoElement:null}),Ji=N.extend({clipboardData:function(a){return"clipboardData"in a?a.clipboardData:window.clipboardData}}),Ki=cc.extend({relatedTarget:null}),Li={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},Mi={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",
-16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Ni=cc.extend({key:function(a){if(a.key){var b=Li[a.key]||a.key;if("Unidentified"!==b)return b}return"keypress"===a.type?(a=tc(a),13===a?"Enter":
-String.fromCharCode(a)):"keydown"===a.type||"keyup"===a.type?Mi[a.keyCode]||"Unidentified":""},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:Bd,charCode:function(a){return"keypress"===a.type?tc(a):0},keyCode:function(a){return"keydown"===a.type||"keyup"===a.type?a.keyCode:0},which:function(a){return"keypress"===a.type?tc(a):"keydown"===a.type||"keyup"===a.type?a.keyCode:0}}),Oi=dc.extend({dataTransfer:null}),Pi=cc.extend({touches:null,targetTouches:null,
-changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:Bd}),Qi=N.extend({propertyName:null,elapsedTime:null,pseudoElement:null}),Ri=dc.extend({deltaX:function(a){return"deltaX"in a?a.deltaX:"wheelDeltaX"in a?-a.wheelDeltaX:0},deltaY:function(a){return"deltaY"in a?a.deltaY:"wheelDeltaY"in a?-a.wheelDeltaY:"wheelDelta"in a?-a.wheelDelta:0},deltaZ:null,deltaMode:null}),Si=[["abort","abort"],[ih,"animationEnd"],[jh,"animationIteration"],[kh,"animationStart"],["canplay",
-"canPlay"],["canplaythrough","canPlayThrough"],["drag","drag"],["dragenter","dragEnter"],["dragexit","dragExit"],["dragleave","dragLeave"],["dragover","dragOver"],["durationchange","durationChange"],["emptied","emptied"],["encrypted","encrypted"],["ended","ended"],["error","error"],["gotpointercapture","gotPointerCapture"],["load","load"],["loadeddata","loadedData"],["loadedmetadata","loadedMetadata"],["loadstart","loadStart"],["lostpointercapture","lostPointerCapture"],["mousemove","mouseMove"],
-["mouseout","mouseOut"],["mouseover","mouseOver"],["playing","playing"],["pointermove","pointerMove"],["pointerout","pointerOut"],["pointerover","pointerOver"],["progress","progress"],["scroll","scroll"],["seeking","seeking"],["stalled","stalled"],["suspend","suspend"],["timeupdate","timeUpdate"],["toggle","toggle"],["touchmove","touchMove"],[lh,"transitionEnd"],["waiting","waiting"],["wheel","wheel"]],Af={},Cd={};[["blur","blur"],["cancel","cancel"],["click","click"],["close","close"],["contextmenu",
-"contextMenu"],["copy","copy"],["cut","cut"],["auxclick","auxClick"],["dblclick","doubleClick"],["dragend","dragEnd"],["dragstart","dragStart"],["drop","drop"],["focus","focus"],["input","input"],["invalid","invalid"],["keydown","keyDown"],["keypress","keyPress"],["keyup","keyUp"],["mousedown","mouseDown"],["mouseup","mouseUp"],["paste","paste"],["pause","pause"],["play","play"],["pointercancel","pointerCancel"],["pointerdown","pointerDown"],["pointerup","pointerUp"],["ratechange","rateChange"],["reset",
-"reset"],["seeked","seeked"],["submit","submit"],["touchcancel","touchCancel"],["touchend","touchEnd"],["touchstart","touchStart"],["volumechange","volumeChange"]].forEach(function(a){zf(a,!0)});Si.forEach(function(a){zf(a,!1)});var rh={eventTypes:Af,isInteractiveTopLevelEventType:function(a){a=Cd[a];return void 0!==a&&!0===a.isInteractive},extractEvents:function(a,b,c,d){var e=Cd[a];if(!e)return null;switch(a){case "keypress":if(0===tc(c))return null;case "keydown":case "keyup":a=Ni;break;case "blur":case "focus":a=
-Ki;break;case "click":if(2===c.button)return null;case "auxclick":case "dblclick":case "mousedown":case "mousemove":case "mouseup":case "mouseout":case "mouseover":case "contextmenu":a=dc;break;case "drag":case "dragend":case "dragenter":case "dragexit":case "dragleave":case "dragover":case "dragstart":case "drop":a=Oi;break;case "touchcancel":case "touchend":case "touchmove":case "touchstart":a=Pi;break;case ih:case jh:case kh:a=Ii;break;case lh:a=Qi;break;case "scroll":a=cc;break;case "wheel":a=
-Ri;break;case "copy":case "cut":case "paste":a=Ji;break;case "gotpointercapture":case "lostpointercapture":case "pointercancel":case "pointerdown":case "pointermove":case "pointerout":case "pointerover":case "pointerup":a=qh;break;default:a=N}b=a.getPooled(e,b,c,d);Ta(b);return b}},Bf=rh.isInteractiveTopLevelEventType,xc=[],wc=!0,Ff={},Zh=0,yc="_reactListenersID"+(""+Math.random()).slice(2),Ti=ua&&"documentMode"in document&&11>=document.documentMode,Lf={select:{phasedRegistrationNames:{bubbled:"onSelect",
-captured:"onSelectCapture"},dependencies:"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange".split(" ")}},Za=null,Gd=null,Cb=null,Fd=!1,Ui={eventTypes:Lf,extractEvents:function(a,b,c,d){var e=d.window===d?d.document:9===d.nodeType?d:d.ownerDocument,f;if(!(f=!e)){a:{e=Ef(e);f=fd.onSelect;for(var g=0;g<f.length;g++){var h=f[g];if(!e.hasOwnProperty(h)||!e[h]){e=!1;break a}}e=!0}f=!e}if(f)return null;e=b?Ga(b):window;switch(a){case "focus":if(ef(e)||"true"===e.contentEditable)Za=
-e,Gd=b,Cb=null;break;case "blur":Cb=Gd=Za=null;break;case "mousedown":Fd=!0;break;case "contextmenu":case "mouseup":case "dragend":return Fd=!1,Kf(c,d);case "selectionchange":if(Ti)break;case "keydown":case "keyup":return Kf(c,d)}return null}};Fe.injectEventPluginOrder("ResponderEventPlugin SimpleEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin".split(" "));(function(a,b,c){hd=a;Ze=b;Me=c})(jd,Oe,Ga);Fe.injectEventPluginsByName({SimpleEventPlugin:rh,EnterLeaveEventPlugin:Hi,
-ChangeEventPlugin:Gi,SelectEventPlugin:Ui,BeforeInputEventPlugin:Fi});var bd=void 0,Sf=function(a){return"undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)})}:a}(function(a,b){if("http://www.w3.org/2000/svg"!==a.namespaceURI||"innerHTML"in a)a.innerHTML=b;else{bd=bd||document.createElement("div");bd.innerHTML="<svg>"+b+"</svg>";for(b=bd.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}}),
-Fb=function(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b},Db={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,
-lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},Vi=["Webkit","ms","Moz","O"];Object.keys(Db).forEach(function(a){Vi.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);Db[b]=Db[a]})});var ai=K({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,
-source:!0,track:!0,wbr:!0}),cd=fa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler,Zg=cd.unstable_cancelCallback,xe=cd.unstable_now,$g=cd.unstable_scheduleCallback,wi=cd.unstable_shouldYield,Ae=null,Be=null,ui="function"===typeof setTimeout?setTimeout:void 0,bh="function"===typeof clearTimeout?clearTimeout:void 0,zi=$g,pi=Zg;new Set;var Od=[],ab=-1,ya={},L={current:ya},R={current:!1},Ia=ya,Qd=null,Rd=null,V=function(a,b,c,d){return new di(a,b,c,d)},dg=(new fa.Component).refs,Fc={isMounted:function(a){return(a=
-a._reactInternalFiber)?2===Bb(a):!1},enqueueSetState:function(a,b,c){a=a._reactInternalFiber;var d=ma();d=ib(d,a);var e=Da(d);e.payload=b;void 0!==c&&null!==c&&(e.callback=c);hb();pa(a,e);Ba(a,d)},enqueueReplaceState:function(a,b,c){a=a._reactInternalFiber;var d=ma();d=ib(d,a);var e=Da(d);e.tag=Dg;e.payload=b;void 0!==c&&null!==c&&(e.callback=c);hb();pa(a,e);Ba(a,d)},enqueueForceUpdate:function(a,b){a=a._reactInternalFiber;var c=ma();c=ib(c,a);var d=Da(c);d.tag=Kc;void 0!==b&&null!==b&&(d.callback=
-b);hb();pa(a,d);Ba(a,c)}},Ic=Array.isArray,kb=eg(!0),he=eg(!1),Jb={},X={current:Jb},Lb={current:Jb},Kb={current:Jb},gb=0,xi=2,Wb=4,ki=8,yi=16,$b=32,te=64,se=128,Jc=Pa.ReactCurrentDispatcher,Mb=0,Aa=null,x=null,Z=null,eb=null,M=null,db=null,Pb=0,aa=null,Qb=0,Nb=!1,ka=null,Ob=0,ae={readContext:W,useCallback:Y,useContext:Y,useEffect:Y,useImperativeHandle:Y,useLayoutEffect:Y,useMemo:Y,useReducer:Y,useRef:Y,useState:Y,useDebugValue:Y},gi={readContext:W,useCallback:function(a,b){fb().memoizedState=[a,void 0===
-b?null:b];return a},useContext:W,useEffect:function(a,b){return de(516,se|te,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):[a];return de(4,Wb|$b,kg.bind(null,b,a),c)},useLayoutEffect:function(a,b){return de(4,Wb|$b,a,b)},useMemo:function(a,b){var c=fb();b=void 0===b?null:b;a=a();c.memoizedState=[a,b];return a},useReducer:function(a,b,c){var d=fb();b=void 0!==c?c(b):b;d.memoizedState=d.baseState=b;a=d.queue={last:null,dispatch:null,eagerReducer:a,eagerState:b};a=a.dispatch=
-mg.bind(null,Aa,a);return[d.memoizedState,a]},useRef:function(a){var b=fb();a={current:a};return b.memoizedState=a},useState:function(a){var b=fb();"function"===typeof a&&(a=a());b.memoizedState=b.baseState=a;a=b.queue={last:null,dispatch:null,eagerReducer:ig,eagerState:a};a=a.dispatch=mg.bind(null,Aa,a);return[b.memoizedState,a]},useDebugValue:lg},hg={readContext:W,useCallback:function(a,b){var c=Rb();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Zd(b,d[1]))return d[0];c.memoizedState=
-[a,b];return a},useContext:W,useEffect:function(a,b){return ee(516,se|te,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):[a];return ee(4,Wb|$b,kg.bind(null,b,a),c)},useLayoutEffect:function(a,b){return ee(4,Wb|$b,a,b)},useMemo:function(a,b){var c=Rb();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&Zd(b,d[1]))return d[0];a=a();c.memoizedState=[a,b];return a},useReducer:jg,useRef:function(a){return Rb().memoizedState},useState:function(a){return jg(ig,
-a)},useDebugValue:lg},na=null,jb=null,La=!1,hi=Pa.ReactCurrentOwner,la=!1,ke={current:null},Sb=null,Ma=null,Tb=null,zg=0,Dg=1,Kc=2,ne=3,Ca=!1,Rg=void 0,ue=void 0,Qg=void 0,Sg=void 0;Rg=function(a,b,c,d){for(c=b.child;null!==c;){if(5===c.tag||6===c.tag)a.appendChild(c.stateNode);else if(4!==c.tag&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return}c.sibling.return=c.return;c=c.sibling}};ue=function(a){};Qg=function(a,
-b,c,d,e){var f=a.memoizedProps;if(f!==d){var g=b.stateNode;Ka(X.current);a=null;switch(c){case "input":f=yd(g,f);d=yd(g,d);a=[];break;case "option":f=Hd(g,f);d=Hd(g,d);a=[];break;case "select":f=K({},f,{value:void 0});d=K({},d,{value:void 0});a=[];break;case "textarea":f=Id(g,f);d=Id(g,d);a=[];break;default:"function"!==typeof f.onClick&&"function"===typeof d.onClick&&(g.onclick=zc)}Kd(c,d);g=c=void 0;var h=null;for(c in f)if(!d.hasOwnProperty(c)&&f.hasOwnProperty(c)&&null!=f[c])if("style"===c){var l=
-f[c];for(g in l)l.hasOwnProperty(g)&&(h||(h={}),h[g]="")}else"dangerouslySetInnerHTML"!==c&&"children"!==c&&"suppressContentEditableWarning"!==c&&"suppressHydrationWarning"!==c&&"autoFocus"!==c&&(Ra.hasOwnProperty(c)?a||(a=[]):(a=a||[]).push(c,null));for(c in d){var k=d[c];l=null!=f?f[c]:void 0;if(d.hasOwnProperty(c)&&k!==l&&(null!=k||null!=l))if("style"===c)if(l){for(g in l)!l.hasOwnProperty(g)||k&&k.hasOwnProperty(g)||(h||(h={}),h[g]="");for(g in k)k.hasOwnProperty(g)&&l[g]!==k[g]&&(h||(h={}),h[g]=
-k[g])}else h||(a||(a=[]),a.push(c,h)),h=k;else"dangerouslySetInnerHTML"===c?(k=k?k.__html:void 0,l=l?l.__html:void 0,null!=k&&l!==k&&(a=a||[]).push(c,""+k)):"children"===c?l===k||"string"!==typeof k&&"number"!==typeof k||(a=a||[]).push(c,""+k):"suppressContentEditableWarning"!==c&&"suppressHydrationWarning"!==c&&(Ra.hasOwnProperty(c)?(null!=k&&ja(e,c),a||l===k||(a=[])):(a=a||[]).push(c,k))}h&&(a=a||[]).push("style",h);e=a;(b.updateQueue=e)&&Ub(b)}};Sg=function(a,b,c,d){c!==d&&Ub(b)};var li="function"===
-typeof WeakSet?WeakSet:Set,qi="function"===typeof WeakMap?WeakMap:Map,ve=Pa.ReactCurrentDispatcher,Ug=Pa.ReactCurrentOwner,Ee=1073741822,Xb=0,Fa=!1,B=null,ba=null,P=0,Oa=-1,qe=!1,p=null,Sc=!1,re=null,Pc=null,Oc=null,Ea=null,da=null,I=null,Tc=0,Uc=void 0,A=!1,ea=null,C=0,qa=0,pb=!1,Zc=null,E=!1,Wc=!1,mb=!1,ob=null,ye=xe(),ca=1073741822-(ye/10|0),nb=ca,si=50,Yb=0,ze=null,Yc=!1;od=function(a,b,c){switch(b){case "input":zd(a,c);b=c.name;if("radio"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;
-c=c.querySelectorAll("input[name="+JSON.stringify(""+b)+'][type="radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=jd(d);e?void 0:n("90");hf(d);zd(d,e)}}}break;case "textarea":Nf(a,c);break;case "select":b=c.value,null!=b&&$a(a,!!c.multiple,b,!1)}};ac.prototype.render=function(a){this._defer?void 0:n("250");this._hasChildren=!0;this._children=a;var b=this._root._internalRoot,c=this._expirationTime,d=new rb;fh(a,b,null,c,d._onCommit);return d};ac.prototype.then=function(a){if(this._didComplete)a();
-else{var b=this._callbacks;null===b&&(b=this._callbacks=[]);b.push(a)}};ac.prototype.commit=function(){var a=this._root._internalRoot,b=a.firstBatch;this._defer&&null!==b?void 0:n("251");if(this._hasChildren){var c=this._expirationTime;if(b!==this){this._hasChildren&&(c=this._expirationTime=b._expirationTime,this.render(this._children));for(var d=null,e=b;e!==this;)d=e,e=e._next;null===d?n("251"):void 0;d._next=e._next;this._next=b;a.firstBatch=this}this._defer=!1;ah(a,c);b=this._next;this._next=
-null;b=a.firstBatch=b;null!==b&&b._hasChildren&&b.render(b._children)}else this._next=null,this._defer=!1};ac.prototype._onComplete=function(){if(!this._didComplete){this._didComplete=!0;var a=this._callbacks;if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}};rb.prototype.then=function(a){if(this._didCommit)a();else{var b=this._callbacks;null===b&&(b=this._callbacks=[]);b.push(a)}};rb.prototype._onCommit=function(){if(!this._didCommit){this._didCommit=!0;var a=this._callbacks;if(null!==a)for(var b=
-0;b<a.length;b++){var c=a[b];"function"!==typeof c?n("191",c):void 0;c()}}};sb.prototype.render=function(a,b){var c=this._internalRoot,d=new rb;b=void 0===b?null:b;null!==b&&d.then(b);Ce(a,c,null,d._onCommit);return d};sb.prototype.unmount=function(a){var b=this._internalRoot,c=new rb;a=void 0===a?null:a;null!==a&&c.then(a);Ce(null,b,null,c._onCommit);return c};sb.prototype.legacy_renderSubtreeIntoContainer=function(a,b,c){var d=this._internalRoot,e=new rb;c=void 0===c?null:c;null!==c&&e.then(c);
-Ce(b,d,a,e._onCommit);return e};sb.prototype.createBatch=function(){var a=new ac(this),b=a._expirationTime,c=this._internalRoot,d=c.firstBatch;if(null===d)c.firstBatch=a,a._next=null;else{for(c=null;null!==d&&d._expirationTime>=b;)c=d,d=d._next;a._next=d;null!==c&&(c._next=a)}return a};(function(a,b,c){cf=a;Df=b;df=c})(ch,eh,function(){A||0===qa||(ra(qa,!1),qa=0)});var sh={createPortal:gh,findDOMNode:function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;void 0===
-b&&("function"===typeof a.render?n("188"):n("268",Object.keys(a)));a=yf(b);a=null===a?null:a.stateNode;return a},hydrate:function(a,b,c){tb(b)?void 0:n("200");return ad(null,a,b,!0,c)},render:function(a,b,c){tb(b)?void 0:n("200");return ad(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,b,c,d){tb(c)?void 0:n("200");null==a||void 0===a._reactInternalFiber?n("38"):void 0;return ad(a,b,c,!1,d)},unmountComponentAtNode:function(a){tb(a)?void 0:n("40");return a._reactRootContainer?(dh(function(){ad(null,
-null,a,!1,function(){a._reactRootContainer=null})}),!0):!1},unstable_createPortal:function(){return gh.apply(void 0,arguments)},unstable_batchedUpdates:ch,unstable_interactiveUpdates:eh,flushSync:function(a,b){A?n("187"):void 0;var c=E;E=!0;try{return Xg(a,b)}finally{E=c,ra(1073741823,!1)}},unstable_createRoot:function(a,b){tb(a)?void 0:n("299","unstable_createRoot");return new sb(a,!0,null!=b&&!0===b.hydrate)},unstable_flushControlled:function(a){var b=E;E=!0;try{Xg(a)}finally{(E=b)||A||ra(1073741823,
-!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[Oe,Ga,jd,Fe.injectEventPluginsByName,ed,Ta,function(a){gd(a,Bh)},$e,af,uc,id]}};(function(a){var b=a.findFiberByHostInstance;return ci(K({},a,{overrideProps:null,currentDispatcherRef:Pa.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=yf(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:jc,bundleType:0,version:"16.8.1",rendererPackageName:"react-dom"});
-var th={default:sh},uh=th&&sh||th;return uh.default||uh});
+'use strict';(function(Q,zb){"object"===typeof exports&&"undefined"!==typeof module?zb(exports,require("react")):"function"===typeof define&&define.amd?define(["exports","react"],zb):(Q=Q||self,zb(Q.ReactDOM={},Q.React))})(this,function(Q,zb){function m(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return"Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}
+function mb(a,b){Ab(a,b);Ab(a+"Capture",b)}function Ab(a,b){$b[a]=b;for(a=0;a<b.length;a++)cg.add(b[a])}function bj(a){if(Zd.call(dg,a))return!0;if(Zd.call(eg,a))return!1;if(cj.test(a))return dg[a]=!0;eg[a]=!0;return!1}function dj(a,b,c,d){if(null!==c&&0===c.type)return!1;switch(typeof b){case "function":case "symbol":return!0;case "boolean":if(d)return!1;if(null!==c)return!c.acceptsBooleans;a=a.toLowerCase().slice(0,5);return"data-"!==a&&"aria-"!==a;default:return!1}}function ej(a,b,c,d){if(null===
+b||"undefined"===typeof b||dj(a,b,c,d))return!0;if(d)return!1;if(null!==c)switch(c.type){case 3:return!b;case 4:return!1===b;case 5:return isNaN(b);case 6:return isNaN(b)||1>b}return!1}function Y(a,b,c,d,e,f,g){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b;this.sanitizeURL=f;this.removeEmptyString=g}function $d(a,b,c,d){var e=R.hasOwnProperty(b)?R[b]:null;if(null!==e?0!==e.type:d||!(2<b.length)||"o"!==
+b[0]&&"O"!==b[0]||"n"!==b[1]&&"N"!==b[1])ej(b,c,e,d)&&(c=null),d||null===e?bj(b)&&(null===c?a.removeAttribute(b):a.setAttribute(b,""+c)):e.mustUseProperty?a[e.propertyName]=null===c?3===e.type?!1:"":c:(b=e.attributeName,d=e.attributeNamespace,null===c?a.removeAttribute(b):(e=e.type,c=3===e||4===e&&!0===c?"":""+c,d?a.setAttributeNS(d,b,c):a.setAttribute(b,c)))}function ac(a){if(null===a||"object"!==typeof a)return null;a=fg&&a[fg]||a["@@iterator"];return"function"===typeof a?a:null}function bc(a,b,
+c){if(void 0===ae)try{throw Error();}catch(d){ae=(b=d.stack.trim().match(/\n( *(at )?)/))&&b[1]||""}return"\n"+ae+a}function be(a,b){if(!a||ce)return"";ce=!0;var c=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(b)if(b=function(){throw Error();},Object.defineProperty(b.prototype,"props",{set:function(){throw Error();}}),"object"===typeof Reflect&&Reflect.construct){try{Reflect.construct(b,[])}catch(n){var d=n}Reflect.construct(a,[],b)}else{try{b.call()}catch(n){d=n}a.call(b.prototype)}else{try{throw Error();
+}catch(n){d=n}a()}}catch(n){if(n&&d&&"string"===typeof n.stack){for(var e=n.stack.split("\n"),f=d.stack.split("\n"),g=e.length-1,h=f.length-1;1<=g&&0<=h&&e[g]!==f[h];)h--;for(;1<=g&&0<=h;g--,h--)if(e[g]!==f[h]){if(1!==g||1!==h){do if(g--,h--,0>h||e[g]!==f[h]){var k="\n"+e[g].replace(" at new "," at ");a.displayName&&k.includes("<anonymous>")&&(k=k.replace("<anonymous>",a.displayName));return k}while(1<=g&&0<=h)}break}}}finally{ce=!1,Error.prepareStackTrace=c}return(a=a?a.displayName||a.name:"")?bc(a):
+""}function fj(a){switch(a.tag){case 5:return bc(a.type);case 16:return bc("Lazy");case 13:return bc("Suspense");case 19:return bc("SuspenseList");case 0:case 2:case 15:return a=be(a.type,!1),a;case 11:return a=be(a.type.render,!1),a;case 1:return a=be(a.type,!0),a;default:return""}}function de(a){if(null==a)return null;if("function"===typeof a)return a.displayName||a.name||null;if("string"===typeof a)return a;switch(a){case Bb:return"Fragment";case Cb:return"Portal";case ee:return"Profiler";case fe:return"StrictMode";
+case ge:return"Suspense";case he:return"SuspenseList"}if("object"===typeof a)switch(a.$$typeof){case gg:return(a.displayName||"Context")+".Consumer";case hg:return(a._context.displayName||"Context")+".Provider";case ie:var b=a.render;a=a.displayName;a||(a=b.displayName||b.name||"",a=""!==a?"ForwardRef("+a+")":"ForwardRef");return a;case je:return b=a.displayName||null,null!==b?b:de(a.type)||"Memo";case Ta:b=a._payload;a=a._init;try{return de(a(b))}catch(c){}}return null}function gj(a){var b=a.type;
+switch(a.tag){case 24:return"Cache";case 9:return(b.displayName||"Context")+".Consumer";case 10:return(b._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return a=b.render,a=a.displayName||a.name||"",b.displayName||(""!==a?"ForwardRef("+a+")":"ForwardRef");case 7:return"Fragment";case 5:return b;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return de(b);case 8:return b===fe?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";
+case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"===typeof b)return b.displayName||b.name||null;if("string"===typeof b)return b}return null}function Ua(a){switch(typeof a){case "boolean":case "number":case "string":case "undefined":return a;case "object":return a;default:return""}}function ig(a){var b=a.type;return(a=a.nodeName)&&"input"===a.toLowerCase()&&("checkbox"===b||"radio"===
+b)}function hj(a){var b=ig(a)?"checked":"value",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=""+a[b];if(!a.hasOwnProperty(b)&&"undefined"!==typeof c&&"function"===typeof c.get&&"function"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=""+a;f.call(this,a)}});Object.defineProperty(a,b,{enumerable:c.enumerable});return{getValue:function(){return d},setValue:function(a){d=""+a},stopTracking:function(){a._valueTracker=
+null;delete a[b]}}}}function Pc(a){a._valueTracker||(a._valueTracker=hj(a))}function jg(a){if(!a)return!1;var b=a._valueTracker;if(!b)return!0;var c=b.getValue();var d="";a&&(d=ig(a)?a.checked?"true":"false":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}function Qc(a){a=a||("undefined"!==typeof document?document:void 0);if("undefined"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}}function ke(a,b){var c=b.checked;return E({},b,{defaultChecked:void 0,defaultValue:void 0,
+value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}function kg(a,b){var c=null==b.defaultValue?"":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=Ua(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:"checkbox"===b.type||"radio"===b.type?null!=b.checked:null!=b.value}}function lg(a,b){b=b.checked;null!=b&&$d(a,"checked",b,!1)}function le(a,b){lg(a,b);var c=Ua(b.value),d=b.type;if(null!=c)if("number"===d){if(0===c&&""===a.value||a.value!=
+c)a.value=""+c}else a.value!==""+c&&(a.value=""+c);else if("submit"===d||"reset"===d){a.removeAttribute("value");return}b.hasOwnProperty("value")?me(a,b.type,c):b.hasOwnProperty("defaultValue")&&me(a,b.type,Ua(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked)}function mg(a,b,c){if(b.hasOwnProperty("value")||b.hasOwnProperty("defaultValue")){var d=b.type;if(!("submit"!==d&&"reset"!==d||void 0!==b.value&&null!==b.value))return;b=""+a._wrapperState.initialValue;
+c||b===a.value||(a.value=b);a.defaultValue=b}c=a.name;""!==c&&(a.name="");a.defaultChecked=!!a._wrapperState.initialChecked;""!==c&&(a.name=c)}function me(a,b,c){if("number"!==b||Qc(a.ownerDocument)!==a)null==c?a.defaultValue=""+a._wrapperState.initialValue:a.defaultValue!==""+c&&(a.defaultValue=""+c)}function Db(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e<c.length;e++)b["$"+c[e]]=!0;for(c=0;c<a.length;c++)e=b.hasOwnProperty("$"+a[c].value),a[c].selected!==e&&(a[c].selected=e),e&&d&&(a[c].defaultSelected=
+!0)}else{c=""+Ua(c);b=null;for(e=0;e<a.length;e++){if(a[e].value===c){a[e].selected=!0;d&&(a[e].defaultSelected=!0);return}null!==b||a[e].disabled||(b=a[e])}null!==b&&(b.selected=!0)}}function ne(a,b){if(null!=b.dangerouslySetInnerHTML)throw Error(m(91));return E({},b,{value:void 0,defaultValue:void 0,children:""+a._wrapperState.initialValue})}function ng(a,b){var c=b.value;if(null==c){c=b.children;b=b.defaultValue;if(null!=c){if(null!=b)throw Error(m(92));if(cc(c)){if(1<c.length)throw Error(m(93));
+c=c[0]}b=c}null==b&&(b="");c=b}a._wrapperState={initialValue:Ua(c)}}function og(a,b){var c=Ua(b.value),d=Ua(b.defaultValue);null!=c&&(c=""+c,c!==a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=""+d)}function pg(a,b){b=a.textContent;b===a._wrapperState.initialValue&&""!==b&&null!==b&&(a.value=b)}function qg(a){switch(a){case "svg":return"http://www.w3.org/2000/svg";case "math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}
+function oe(a,b){return null==a||"http://www.w3.org/1999/xhtml"===a?qg(b):"http://www.w3.org/2000/svg"===a&&"foreignObject"===b?"http://www.w3.org/1999/xhtml":a}function rg(a,b,c){return null==b||"boolean"===typeof b||""===b?"":c||"number"!==typeof b||0===b||dc.hasOwnProperty(a)&&dc[a]?(""+b).trim():b+"px"}function sg(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf("--"),e=rg(c,b[c],d);"float"===c&&(c="cssFloat");d?a.setProperty(c,e):a[c]=e}}function pe(a,b){if(b){if(ij[a]&&
+(null!=b.children||null!=b.dangerouslySetInnerHTML))throw Error(m(137,a));if(null!=b.dangerouslySetInnerHTML){if(null!=b.children)throw Error(m(60));if("object"!==typeof b.dangerouslySetInnerHTML||!("__html"in b.dangerouslySetInnerHTML))throw Error(m(61));}if(null!=b.style&&"object"!==typeof b.style)throw Error(m(62));}}function qe(a,b){if(-1===a.indexOf("-"))return"string"===typeof b.is;switch(a){case "annotation-xml":case "color-profile":case "font-face":case "font-face-src":case "font-face-uri":case "font-face-format":case "font-face-name":case "missing-glyph":return!1;
+default:return!0}}function re(a){a=a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}function tg(a){if(a=ec(a)){if("function"!==typeof se)throw Error(m(280));var b=a.stateNode;b&&(b=Rc(b),se(a.stateNode,a.type,b))}}function ug(a){Eb?Fb?Fb.push(a):Fb=[a]:Eb=a}function vg(){if(Eb){var a=Eb,b=Fb;Fb=Eb=null;tg(a);if(b)for(a=0;a<b.length;a++)tg(b[a])}}function wg(a,b,c){if(te)return a(b,c);te=!0;try{return xg(a,b,c)}finally{if(te=
+!1,null!==Eb||null!==Fb)yg(),vg()}}function fc(a,b){var c=a.stateNode;if(null===c)return null;var d=Rc(c);if(null===d)return null;c=d[b];a:switch(b){case "onClick":case "onClickCapture":case "onDoubleClick":case "onDoubleClickCapture":case "onMouseDown":case "onMouseDownCapture":case "onMouseMove":case "onMouseMoveCapture":case "onMouseUp":case "onMouseUpCapture":case "onMouseEnter":(d=!d.disabled)||(a=a.type,d=!("button"===a||"input"===a||"select"===a||"textarea"===a));a=!d;break a;default:a=!1}if(a)return null;
+if(c&&"function"!==typeof c)throw Error(m(231,b,typeof c));return c}function jj(a,b,c,d,e,f,g,h,k){gc=!1;Sc=null;kj.apply(lj,arguments)}function mj(a,b,c,d,e,f,g,h,k){jj.apply(this,arguments);if(gc){if(gc){var n=Sc;gc=!1;Sc=null}else throw Error(m(198));Tc||(Tc=!0,ue=n)}}function nb(a){var b=a,c=a;if(a.alternate)for(;b.return;)b=b.return;else{a=b;do b=a,0!==(b.flags&4098)&&(c=b.return),a=b.return;while(a)}return 3===b.tag?c:null}function zg(a){if(13===a.tag){var b=a.memoizedState;null===b&&(a=a.alternate,
+null!==a&&(b=a.memoizedState));if(null!==b)return b.dehydrated}return null}function Ag(a){if(nb(a)!==a)throw Error(m(188));}function nj(a){var b=a.alternate;if(!b){b=nb(a);if(null===b)throw Error(m(188));return b!==a?null:a}for(var c=a,d=b;;){var e=c.return;if(null===e)break;var f=e.alternate;if(null===f){d=e.return;if(null!==d){c=d;continue}break}if(e.child===f.child){for(f=e.child;f;){if(f===c)return Ag(e),a;if(f===d)return Ag(e),b;f=f.sibling}throw Error(m(188));}if(c.return!==d.return)c=e,d=f;
+else{for(var g=!1,h=e.child;h;){if(h===c){g=!0;c=e;d=f;break}if(h===d){g=!0;d=e;c=f;break}h=h.sibling}if(!g){for(h=f.child;h;){if(h===c){g=!0;c=f;d=e;break}if(h===d){g=!0;d=f;c=e;break}h=h.sibling}if(!g)throw Error(m(189));}}if(c.alternate!==d)throw Error(m(190));}if(3!==c.tag)throw Error(m(188));return c.stateNode.current===c?a:b}function Bg(a){a=nj(a);return null!==a?Cg(a):null}function Cg(a){if(5===a.tag||6===a.tag)return a;for(a=a.child;null!==a;){var b=Cg(a);if(null!==b)return b;a=a.sibling}return null}
+function oj(a,b){if(Ca&&"function"===typeof Ca.onCommitFiberRoot)try{Ca.onCommitFiberRoot(Uc,a,void 0,128===(a.current.flags&128))}catch(c){}}function pj(a){a>>>=0;return 0===a?32:31-(qj(a)/rj|0)|0}function hc(a){switch(a&-a){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return a&
+4194240;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return a&130023424;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return a}}function Vc(a,b){var c=a.pendingLanes;if(0===c)return 0;var d=0,e=a.suspendedLanes,f=a.pingedLanes,g=c&268435455;if(0!==g){var h=g&~e;0!==h?d=hc(h):(f&=g,0!==f&&(d=hc(f)))}else g=c&~e,0!==g?d=hc(g):0!==f&&(d=hc(f));if(0===d)return 0;if(0!==b&&b!==d&&0===(b&e)&&
+(e=d&-d,f=b&-b,e>=f||16===e&&0!==(f&4194240)))return b;0!==(d&4)&&(d|=c&16);b=a.entangledLanes;if(0!==b)for(a=a.entanglements,b&=d;0<b;)c=31-ta(b),e=1<<c,d|=a[c],b&=~e;return d}function sj(a,b){switch(a){case 1:case 2:case 4:return b+250;case 8:case 16:case 32:case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return b+5E3;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return-1;
+case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function tj(a,b){for(var c=a.suspendedLanes,d=a.pingedLanes,e=a.expirationTimes,f=a.pendingLanes;0<f;){var g=31-ta(f),h=1<<g,k=e[g];if(-1===k){if(0===(h&c)||0!==(h&d))e[g]=sj(h,b)}else k<=b&&(a.expiredLanes|=h);f&=~h}}function ve(a){a=a.pendingLanes&-1073741825;return 0!==a?a:a&1073741824?1073741824:0}function Dg(){var a=Wc;Wc<<=1;0===(Wc&4194240)&&(Wc=64);return a}function we(a){for(var b=[],c=0;31>c;c++)b.push(a);
+return b}function ic(a,b,c){a.pendingLanes|=b;536870912!==b&&(a.suspendedLanes=0,a.pingedLanes=0);a=a.eventTimes;b=31-ta(b);a[b]=c}function uj(a,b){var c=a.pendingLanes&~b;a.pendingLanes=b;a.suspendedLanes=0;a.pingedLanes=0;a.expiredLanes&=b;a.mutableReadLanes&=b;a.entangledLanes&=b;b=a.entanglements;var d=a.eventTimes;for(a=a.expirationTimes;0<c;){var e=31-ta(c),f=1<<e;b[e]=0;d[e]=-1;a[e]=-1;c&=~f}}function xe(a,b){var c=a.entangledLanes|=b;for(a=a.entanglements;c;){var d=31-ta(c),e=1<<d;e&b|a[d]&
+b&&(a[d]|=b);c&=~e}}function Eg(a){a&=-a;return 1<a?4<a?0!==(a&268435455)?16:536870912:4:1}function Fg(a,b){switch(a){case "focusin":case "focusout":Va=null;break;case "dragenter":case "dragleave":Wa=null;break;case "mouseover":case "mouseout":Xa=null;break;case "pointerover":case "pointerout":jc.delete(b.pointerId);break;case "gotpointercapture":case "lostpointercapture":kc.delete(b.pointerId)}}function lc(a,b,c,d,e,f){if(null===a||a.nativeEvent!==f)return a={blockedOn:b,domEventName:c,eventSystemFlags:d,
+nativeEvent:f,targetContainers:[e]},null!==b&&(b=ec(b),null!==b&&Gg(b)),a;a.eventSystemFlags|=d;b=a.targetContainers;null!==e&&-1===b.indexOf(e)&&b.push(e);return a}function vj(a,b,c,d,e){switch(b){case "focusin":return Va=lc(Va,a,b,c,d,e),!0;case "dragenter":return Wa=lc(Wa,a,b,c,d,e),!0;case "mouseover":return Xa=lc(Xa,a,b,c,d,e),!0;case "pointerover":var f=e.pointerId;jc.set(f,lc(jc.get(f)||null,a,b,c,d,e));return!0;case "gotpointercapture":return f=e.pointerId,kc.set(f,lc(kc.get(f)||null,a,b,
+c,d,e)),!0}return!1}function Hg(a){var b=ob(a.target);if(null!==b){var c=nb(b);if(null!==c)if(b=c.tag,13===b){if(b=zg(c),null!==b){a.blockedOn=b;wj(a.priority,function(){xj(c)});return}}else if(3===b&&c.stateNode.current.memoizedState.isDehydrated){a.blockedOn=3===c.tag?c.stateNode.containerInfo:null;return}}a.blockedOn=null}function Xc(a){if(null!==a.blockedOn)return!1;for(var b=a.targetContainers;0<b.length;){var c=ye(a.domEventName,a.eventSystemFlags,b[0],a.nativeEvent);if(null===c){c=a.nativeEvent;
+var d=new c.constructor(c.type,c);ze=d;c.target.dispatchEvent(d);ze=null}else return b=ec(c),null!==b&&Gg(b),a.blockedOn=c,!1;b.shift()}return!0}function Ig(a,b,c){Xc(a)&&c.delete(b)}function yj(){Ae=!1;null!==Va&&Xc(Va)&&(Va=null);null!==Wa&&Xc(Wa)&&(Wa=null);null!==Xa&&Xc(Xa)&&(Xa=null);jc.forEach(Ig);kc.forEach(Ig)}function mc(a,b){a.blockedOn===b&&(a.blockedOn=null,Ae||(Ae=!0,Jg(Kg,yj)))}function nc(a){if(0<Yc.length){mc(Yc[0],a);for(var b=1;b<Yc.length;b++){var c=Yc[b];c.blockedOn===a&&(c.blockedOn=
+null)}}null!==Va&&mc(Va,a);null!==Wa&&mc(Wa,a);null!==Xa&&mc(Xa,a);b=function(b){return mc(b,a)};jc.forEach(b);kc.forEach(b);for(b=0;b<Ya.length;b++)c=Ya[b],c.blockedOn===a&&(c.blockedOn=null);for(;0<Ya.length&&(b=Ya[0],null===b.blockedOn);)Hg(b),null===b.blockedOn&&Ya.shift()}function zj(a,b,c,d){var e=z,f=Gb.transition;Gb.transition=null;try{z=1,Be(a,b,c,d)}finally{z=e,Gb.transition=f}}function Aj(a,b,c,d){var e=z,f=Gb.transition;Gb.transition=null;try{z=4,Be(a,b,c,d)}finally{z=e,Gb.transition=
+f}}function Be(a,b,c,d){if(Zc){var e=ye(a,b,c,d);if(null===e)Ce(a,b,d,$c,c),Fg(a,d);else if(vj(e,a,b,c,d))d.stopPropagation();else if(Fg(a,d),b&4&&-1<Bj.indexOf(a)){for(;null!==e;){var f=ec(e);null!==f&&Cj(f);f=ye(a,b,c,d);null===f&&Ce(a,b,d,$c,c);if(f===e)break;e=f}null!==e&&d.stopPropagation()}else Ce(a,b,d,null,c)}}function ye(a,b,c,d){$c=null;a=re(d);a=ob(a);if(null!==a)if(b=nb(a),null===b)a=null;else if(c=b.tag,13===c){a=zg(b);if(null!==a)return a;a=null}else if(3===c){if(b.stateNode.current.memoizedState.isDehydrated)return 3===
+b.tag?b.stateNode.containerInfo:null;a=null}else b!==a&&(a=null);$c=a;return null}function Lg(a){switch(a){case "cancel":case "click":case "close":case "contextmenu":case "copy":case "cut":case "auxclick":case "dblclick":case "dragend":case "dragstart":case "drop":case "focusin":case "focusout":case "input":case "invalid":case "keydown":case "keypress":case "keyup":case "mousedown":case "mouseup":case "paste":case "pause":case "play":case "pointercancel":case "pointerdown":case "pointerup":case "ratechange":case "reset":case "resize":case "seeked":case "submit":case "touchcancel":case "touchend":case "touchstart":case "volumechange":case "change":case "selectionchange":case "textInput":case "compositionstart":case "compositionend":case "compositionupdate":case "beforeblur":case "afterblur":case "beforeinput":case "blur":case "fullscreenchange":case "focus":case "hashchange":case "popstate":case "select":case "selectstart":return 1;
+case "drag":case "dragenter":case "dragexit":case "dragleave":case "dragover":case "mousemove":case "mouseout":case "mouseover":case "pointermove":case "pointerout":case "pointerover":case "scroll":case "toggle":case "touchmove":case "wheel":case "mouseenter":case "mouseleave":case "pointerenter":case "pointerleave":return 4;case "message":switch(Dj()){case De:return 1;case Mg:return 4;case ad:case Ej:return 16;case Ng:return 536870912;default:return 16}default:return 16}}function Og(){if(bd)return bd;
+var a,b=Ee,c=b.length,d,e="value"in Za?Za.value:Za.textContent,f=e.length;for(a=0;a<c&&b[a]===e[a];a++);var g=c-a;for(d=1;d<=g&&b[c-d]===e[f-d];d++);return bd=e.slice(a,1<d?1-d:void 0)}function cd(a){var b=a.keyCode;"charCode"in a?(a=a.charCode,0===a&&13===b&&(a=13)):a=b;10===a&&(a=13);return 32<=a||13===a?a:0}function dd(){return!0}function Pg(){return!1}function ka(a){function b(b,d,e,f,g){this._reactName=b;this._targetInst=e;this.type=d;this.nativeEvent=f;this.target=g;this.currentTarget=null;
+for(var c in a)a.hasOwnProperty(c)&&(b=a[c],this[c]=b?b(f):f[c]);this.isDefaultPrevented=(null!=f.defaultPrevented?f.defaultPrevented:!1===f.returnValue)?dd:Pg;this.isPropagationStopped=Pg;return this}E(b.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():"unknown"!==typeof a.returnValue&&(a.returnValue=!1),this.isDefaultPrevented=dd)},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():
+"unknown"!==typeof a.cancelBubble&&(a.cancelBubble=!0),this.isPropagationStopped=dd)},persist:function(){},isPersistent:dd});return b}function Fj(a){var b=this.nativeEvent;return b.getModifierState?b.getModifierState(a):(a=Gj[a])?!!b[a]:!1}function Fe(a){return Fj}function Qg(a,b){switch(a){case "keyup":return-1!==Hj.indexOf(b.keyCode);case "keydown":return 229!==b.keyCode;case "keypress":case "mousedown":case "focusout":return!0;default:return!1}}function Rg(a){a=a.detail;return"object"===typeof a&&
+"data"in a?a.data:null}function Ij(a,b){switch(a){case "compositionend":return Rg(b);case "keypress":if(32!==b.which)return null;Sg=!0;return Tg;case "textInput":return a=b.data,a===Tg&&Sg?null:a;default:return null}}function Jj(a,b){if(Hb)return"compositionend"===a||!Ge&&Qg(a,b)?(a=Og(),bd=Ee=Za=null,Hb=!1,a):null;switch(a){case "paste":return null;case "keypress":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1<b.char.length)return b.char;if(b.which)return String.fromCharCode(b.which)}return null;
+case "compositionend":return Ug&&"ko"!==b.locale?null:b.data;default:return null}}function Vg(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return"input"===b?!!Kj[a.type]:"textarea"===b?!0:!1}function Lj(a){if(!Ia)return!1;a="on"+a;var b=a in document;b||(b=document.createElement("div"),b.setAttribute(a,"return;"),b="function"===typeof b[a]);return b}function Wg(a,b,c,d){ug(d);b=ed(b,"onChange");0<b.length&&(c=new He("onChange","change",null,c,d),a.push({event:c,listeners:b}))}function Mj(a){Xg(a,
+0)}function fd(a){var b=Ib(a);if(jg(b))return a}function Nj(a,b){if("change"===a)return b}function Yg(){oc&&(oc.detachEvent("onpropertychange",Zg),pc=oc=null)}function Zg(a){if("value"===a.propertyName&&fd(pc)){var b=[];Wg(b,pc,a,re(a));wg(Mj,b)}}function Oj(a,b,c){"focusin"===a?(Yg(),oc=b,pc=c,oc.attachEvent("onpropertychange",Zg)):"focusout"===a&&Yg()}function Pj(a,b){if("selectionchange"===a||"keyup"===a||"keydown"===a)return fd(pc)}function Qj(a,b){if("click"===a)return fd(b)}function Rj(a,b){if("input"===
+a||"change"===a)return fd(b)}function Sj(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}function qc(a,b){if(ua(a,b))return!0;if("object"!==typeof a||null===a||"object"!==typeof b||null===b)return!1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==d.length)return!1;for(d=0;d<c.length;d++){var e=c[d];if(!Zd.call(b,e)||!ua(a[e],b[e]))return!1}return!0}function $g(a){for(;a&&a.firstChild;)a=a.firstChild;return a}function ah(a,b){var c=$g(a);a=0;for(var d;c;){if(3===c.nodeType){d=a+c.textContent.length;
+if(a<=b&&d>=b)return{node:c,offset:b-a};a=d}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode}c=void 0}c=$g(c)}}function bh(a,b){return a&&b?a===b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?bh(a,b.parentNode):"contains"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1}function ch(){for(var a=window,b=Qc();b instanceof a.HTMLIFrameElement;){try{var c="string"===typeof b.contentWindow.location.href}catch(d){c=!1}if(c)a=b.contentWindow;else break;
+b=Qc(a.document)}return b}function Ie(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&("input"===b&&("text"===a.type||"search"===a.type||"tel"===a.type||"url"===a.type||"password"===a.type)||"textarea"===b||"true"===a.contentEditable)}function Tj(a){var b=ch(),c=a.focusedElem,d=a.selectionRange;if(b!==c&&c&&c.ownerDocument&&bh(c.ownerDocument.documentElement,c)){if(null!==d&&Ie(c))if(b=d.start,a=d.end,void 0===a&&(a=b),"selectionStart"in c)c.selectionStart=b,c.selectionEnd=Math.min(a,c.value.length);
+else if(a=(b=c.ownerDocument||document)&&b.defaultView||window,a.getSelection){a=a.getSelection();var e=c.textContent.length,f=Math.min(d.start,e);d=void 0===d.end?f:Math.min(d.end,e);!a.extend&&f>d&&(e=d,d=f,f=e);e=ah(c,f);var g=ah(c,d);e&&g&&(1!==a.rangeCount||a.anchorNode!==e.node||a.anchorOffset!==e.offset||a.focusNode!==g.node||a.focusOffset!==g.offset)&&(b=b.createRange(),b.setStart(e.node,e.offset),a.removeAllRanges(),f>d?(a.addRange(b),a.extend(g.node,g.offset)):(b.setEnd(g.node,g.offset),
+a.addRange(b)))}b=[];for(a=c;a=a.parentNode;)1===a.nodeType&&b.push({element:a,left:a.scrollLeft,top:a.scrollTop});"function"===typeof c.focus&&c.focus();for(c=0;c<b.length;c++)a=b[c],a.element.scrollLeft=a.left,a.element.scrollTop=a.top}}function dh(a,b,c){var d=c.window===c?c.document:9===c.nodeType?c:c.ownerDocument;Je||null==Jb||Jb!==Qc(d)||(d=Jb,"selectionStart"in d&&Ie(d)?d={start:d.selectionStart,end:d.selectionEnd}:(d=(d.ownerDocument&&d.ownerDocument.defaultView||window).getSelection(),d=
+{anchorNode:d.anchorNode,anchorOffset:d.anchorOffset,focusNode:d.focusNode,focusOffset:d.focusOffset}),rc&&qc(rc,d)||(rc=d,d=ed(Ke,"onSelect"),0<d.length&&(b=new He("onSelect","select",null,b,c),a.push({event:b,listeners:d}),b.target=Jb)))}function gd(a,b){var c={};c[a.toLowerCase()]=b.toLowerCase();c["Webkit"+a]="webkit"+b;c["Moz"+a]="moz"+b;return c}function hd(a){if(Le[a])return Le[a];if(!Kb[a])return a;var b=Kb[a],c;for(c in b)if(b.hasOwnProperty(c)&&c in eh)return Le[a]=b[c];return a}function $a(a,
+b){fh.set(a,b);mb(b,[a])}function gh(a,b,c){var d=a.type||"unknown-event";a.currentTarget=c;mj(d,b,void 0,a);a.currentTarget=null}function Xg(a,b){b=0!==(b&4);for(var c=0;c<a.length;c++){var d=a[c],e=d.event;d=d.listeners;a:{var f=void 0;if(b)for(var g=d.length-1;0<=g;g--){var h=d[g],k=h.instance,n=h.currentTarget;h=h.listener;if(k!==f&&e.isPropagationStopped())break a;gh(e,h,n);f=k}else for(g=0;g<d.length;g++){h=d[g];k=h.instance;n=h.currentTarget;h=h.listener;if(k!==f&&e.isPropagationStopped())break a;
+gh(e,h,n);f=k}}}if(Tc)throw a=ue,Tc=!1,ue=null,a;}function B(a,b){var c=b[Me];void 0===c&&(c=b[Me]=new Set);var d=a+"__bubble";c.has(d)||(hh(b,a,2,!1),c.add(d))}function Ne(a,b,c){var d=0;b&&(d|=4);hh(c,a,d,b)}function sc(a){if(!a[id]){a[id]=!0;cg.forEach(function(b){"selectionchange"!==b&&(Uj.has(b)||Ne(b,!1,a),Ne(b,!0,a))});var b=9===a.nodeType?a:a.ownerDocument;null===b||b[id]||(b[id]=!0,Ne("selectionchange",!1,b))}}function hh(a,b,c,d,e){switch(Lg(b)){case 1:e=zj;break;case 4:e=Aj;break;default:e=
+Be}c=e.bind(null,b,c,a);e=void 0;!Oe||"touchstart"!==b&&"touchmove"!==b&&"wheel"!==b||(e=!0);d?void 0!==e?a.addEventListener(b,c,{capture:!0,passive:e}):a.addEventListener(b,c,!0):void 0!==e?a.addEventListener(b,c,{passive:e}):a.addEventListener(b,c,!1)}function Ce(a,b,c,d,e){var f=d;if(0===(b&1)&&0===(b&2)&&null!==d)a:for(;;){if(null===d)return;var g=d.tag;if(3===g||4===g){var h=d.stateNode.containerInfo;if(h===e||8===h.nodeType&&h.parentNode===e)break;if(4===g)for(g=d.return;null!==g;){var k=g.tag;
+if(3===k||4===k)if(k=g.stateNode.containerInfo,k===e||8===k.nodeType&&k.parentNode===e)return;g=g.return}for(;null!==h;){g=ob(h);if(null===g)return;k=g.tag;if(5===k||6===k){d=f=g;continue a}h=h.parentNode}}d=d.return}wg(function(){var d=f,e=re(c),g=[];a:{var h=fh.get(a);if(void 0!==h){var k=He,m=a;switch(a){case "keypress":if(0===cd(c))break a;case "keydown":case "keyup":k=Vj;break;case "focusin":m="focus";k=Pe;break;case "focusout":m="blur";k=Pe;break;case "beforeblur":case "afterblur":k=Pe;break;
+case "click":if(2===c.button)break a;case "auxclick":case "dblclick":case "mousedown":case "mousemove":case "mouseup":case "mouseout":case "mouseover":case "contextmenu":k=ih;break;case "drag":case "dragend":case "dragenter":case "dragexit":case "dragleave":case "dragover":case "dragstart":case "drop":k=Wj;break;case "touchcancel":case "touchend":case "touchmove":case "touchstart":k=Xj;break;case jh:case kh:case lh:k=Yj;break;case mh:k=Zj;break;case "scroll":k=ak;break;case "wheel":k=bk;break;case "copy":case "cut":case "paste":k=
+ck;break;case "gotpointercapture":case "lostpointercapture":case "pointercancel":case "pointerdown":case "pointermove":case "pointerout":case "pointerover":case "pointerup":k=nh}var l=0!==(b&4),p=!l&&"scroll"===a,w=l?null!==h?h+"Capture":null:h;l=[];for(var A=d,t;null!==A;){t=A;var M=t.stateNode;5===t.tag&&null!==M&&(t=M,null!==w&&(M=fc(A,w),null!=M&&l.push(tc(A,M,t))));if(p)break;A=A.return}0<l.length&&(h=new k(h,m,null,c,e),g.push({event:h,listeners:l}))}}if(0===(b&7)){a:{h="mouseover"===a||"pointerover"===
+a;k="mouseout"===a||"pointerout"===a;if(h&&c!==ze&&(m=c.relatedTarget||c.fromElement)&&(ob(m)||m[Ja]))break a;if(k||h){h=e.window===e?e:(h=e.ownerDocument)?h.defaultView||h.parentWindow:window;if(k){if(m=c.relatedTarget||c.toElement,k=d,m=m?ob(m):null,null!==m&&(p=nb(m),m!==p||5!==m.tag&&6!==m.tag))m=null}else k=null,m=d;if(k!==m){l=ih;M="onMouseLeave";w="onMouseEnter";A="mouse";if("pointerout"===a||"pointerover"===a)l=nh,M="onPointerLeave",w="onPointerEnter",A="pointer";p=null==k?h:Ib(k);t=null==
+m?h:Ib(m);h=new l(M,A+"leave",k,c,e);h.target=p;h.relatedTarget=t;M=null;ob(e)===d&&(l=new l(w,A+"enter",m,c,e),l.target=t,l.relatedTarget=p,M=l);p=M;if(k&&m)b:{l=k;w=m;A=0;for(t=l;t;t=Lb(t))A++;t=0;for(M=w;M;M=Lb(M))t++;for(;0<A-t;)l=Lb(l),A--;for(;0<t-A;)w=Lb(w),t--;for(;A--;){if(l===w||null!==w&&l===w.alternate)break b;l=Lb(l);w=Lb(w)}l=null}else l=null;null!==k&&oh(g,h,k,l,!1);null!==m&&null!==p&&oh(g,p,m,l,!0)}}}a:{h=d?Ib(d):window;k=h.nodeName&&h.nodeName.toLowerCase();if("select"===k||"input"===
+k&&"file"===h.type)var ma=Nj;else if(Vg(h))if(ph)ma=Rj;else{ma=Pj;var va=Oj}else(k=h.nodeName)&&"input"===k.toLowerCase()&&("checkbox"===h.type||"radio"===h.type)&&(ma=Qj);if(ma&&(ma=ma(a,d))){Wg(g,ma,c,e);break a}va&&va(a,h,d);"focusout"===a&&(va=h._wrapperState)&&va.controlled&&"number"===h.type&&me(h,"number",h.value)}va=d?Ib(d):window;switch(a){case "focusin":if(Vg(va)||"true"===va.contentEditable)Jb=va,Ke=d,rc=null;break;case "focusout":rc=Ke=Jb=null;break;case "mousedown":Je=!0;break;case "contextmenu":case "mouseup":case "dragend":Je=
+!1;dh(g,c,e);break;case "selectionchange":if(dk)break;case "keydown":case "keyup":dh(g,c,e)}var ab;if(Ge)b:{switch(a){case "compositionstart":var da="onCompositionStart";break b;case "compositionend":da="onCompositionEnd";break b;case "compositionupdate":da="onCompositionUpdate";break b}da=void 0}else Hb?Qg(a,c)&&(da="onCompositionEnd"):"keydown"===a&&229===c.keyCode&&(da="onCompositionStart");da&&(Ug&&"ko"!==c.locale&&(Hb||"onCompositionStart"!==da?"onCompositionEnd"===da&&Hb&&(ab=Og()):(Za=e,Ee=
+"value"in Za?Za.value:Za.textContent,Hb=!0)),va=ed(d,da),0<va.length&&(da=new qh(da,a,null,c,e),g.push({event:da,listeners:va}),ab?da.data=ab:(ab=Rg(c),null!==ab&&(da.data=ab))));if(ab=ek?Ij(a,c):Jj(a,c))d=ed(d,"onBeforeInput"),0<d.length&&(e=new fk("onBeforeInput","beforeinput",null,c,e),g.push({event:e,listeners:d}),e.data=ab)}Xg(g,b)})}function tc(a,b,c){return{instance:a,listener:b,currentTarget:c}}function ed(a,b){for(var c=b+"Capture",d=[];null!==a;){var e=a,f=e.stateNode;5===e.tag&&null!==
+f&&(e=f,f=fc(a,c),null!=f&&d.unshift(tc(a,f,e)),f=fc(a,b),null!=f&&d.push(tc(a,f,e)));a=a.return}return d}function Lb(a){if(null===a)return null;do a=a.return;while(a&&5!==a.tag);return a?a:null}function oh(a,b,c,d,e){for(var f=b._reactName,g=[];null!==c&&c!==d;){var h=c,k=h.alternate,n=h.stateNode;if(null!==k&&k===d)break;5===h.tag&&null!==n&&(h=n,e?(k=fc(c,f),null!=k&&g.unshift(tc(c,k,h))):e||(k=fc(c,f),null!=k&&g.push(tc(c,k,h))));c=c.return}0!==g.length&&a.push({event:b,listeners:g})}function rh(a){return("string"===
+typeof a?a:""+a).replace(gk,"\n").replace(hk,"")}function jd(a,b,c,d){b=rh(b);if(rh(a)!==b&&c)throw Error(m(425));}function kd(){}function Qe(a,b){return"textarea"===a||"noscript"===a||"string"===typeof b.children||"number"===typeof b.children||"object"===typeof b.dangerouslySetInnerHTML&&null!==b.dangerouslySetInnerHTML&&null!=b.dangerouslySetInnerHTML.__html}function ik(a){setTimeout(function(){throw a;})}function Re(a,b){var c=b,d=0;do{var e=c.nextSibling;a.removeChild(c);if(e&&8===e.nodeType)if(c=
+e.data,"/$"===c){if(0===d){a.removeChild(e);nc(b);return}d--}else"$"!==c&&"$?"!==c&&"$!"!==c||d++;c=e}while(c);nc(b)}function Ka(a){for(;null!=a;a=a.nextSibling){var b=a.nodeType;if(1===b||3===b)break;if(8===b){b=a.data;if("$"===b||"$!"===b||"$?"===b)break;if("/$"===b)return null}}return a}function sh(a){a=a.previousSibling;for(var b=0;a;){if(8===a.nodeType){var c=a.data;if("$"===c||"$!"===c||"$?"===c){if(0===b)return a;b--}else"/$"===c&&b++}a=a.previousSibling}return null}function ob(a){var b=a[Da];
+if(b)return b;for(var c=a.parentNode;c;){if(b=c[Ja]||c[Da]){c=b.alternate;if(null!==b.child||null!==c&&null!==c.child)for(a=sh(a);null!==a;){if(c=a[Da])return c;a=sh(a)}return b}a=c;c=a.parentNode}return null}function ec(a){a=a[Da]||a[Ja];return!a||5!==a.tag&&6!==a.tag&&13!==a.tag&&3!==a.tag?null:a}function Ib(a){if(5===a.tag||6===a.tag)return a.stateNode;throw Error(m(33));}function Rc(a){return a[uc]||null}function bb(a){return{current:a}}function v(a,b){0>Mb||(a.current=Se[Mb],Se[Mb]=null,Mb--)}
+function y(a,b,c){Mb++;Se[Mb]=a.current;a.current=b}function Nb(a,b){var c=a.type.contextTypes;if(!c)return cb;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function ea(a){a=a.childContextTypes;return null!==a&&void 0!==a}function th(a,b,c){if(J.current!==cb)throw Error(m(168));
+y(J,b);y(S,c)}function uh(a,b,c){var d=a.stateNode;b=b.childContextTypes;if("function"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)if(!(e in b))throw Error(m(108,gj(a)||"Unknown",e));return E({},c,d)}function ld(a){a=(a=a.stateNode)&&a.__reactInternalMemoizedMergedChildContext||cb;pb=J.current;y(J,a);y(S,S.current);return!0}function vh(a,b,c){var d=a.stateNode;if(!d)throw Error(m(169));c?(a=uh(a,b,pb),d.__reactInternalMemoizedMergedChildContext=a,v(S),v(J),y(J,a)):v(S);
+y(S,c)}function wh(a){null===La?La=[a]:La.push(a)}function jk(a){md=!0;wh(a)}function db(){if(!Te&&null!==La){Te=!0;var a=0,b=z;try{var c=La;for(z=1;a<c.length;a++){var d=c[a];do d=d(!0);while(null!==d)}La=null;md=!1}catch(e){throw null!==La&&(La=La.slice(a+1)),xh(De,db),e;}finally{z=b,Te=!1}}return null}function qb(a,b){Ob[Pb++]=nd;Ob[Pb++]=od;od=a;nd=b}function yh(a,b,c){na[oa++]=Ma;na[oa++]=Na;na[oa++]=rb;rb=a;var d=Ma;a=Na;var e=32-ta(d)-1;d&=~(1<<e);c+=1;var f=32-ta(b)+e;if(30<f){var g=e-e%5;
+f=(d&(1<<g)-1).toString(32);d>>=g;e-=g;Ma=1<<32-ta(b)+e|c<<e|d;Na=f+a}else Ma=1<<f|c<<e|d,Na=a}function Ue(a){null!==a.return&&(qb(a,1),yh(a,1,0))}function Ve(a){for(;a===od;)od=Ob[--Pb],Ob[Pb]=null,nd=Ob[--Pb],Ob[Pb]=null;for(;a===rb;)rb=na[--oa],na[oa]=null,Na=na[--oa],na[oa]=null,Ma=na[--oa],na[oa]=null}function zh(a,b){var c=pa(5,null,null,0);c.elementType="DELETED";c.stateNode=b;c.return=a;b=a.deletions;null===b?(a.deletions=[c],a.flags|=16):b.push(c)}function Ah(a,b){switch(a.tag){case 5:var c=
+a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,la=a,fa=Ka(b.firstChild),!0):!1;case 6:return b=""===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,la=a,fa=null,!0):!1;case 13:return b=8!==b.nodeType?null:b,null!==b?(c=null!==rb?{id:Ma,overflow:Na}:null,a.memoizedState={dehydrated:b,treeContext:c,retryLane:1073741824},c=pa(18,null,null,0),c.stateNode=b,c.return=a,a.child=c,la=a,fa=null,!0):!1;default:return!1}}function We(a){return 0!==
+(a.mode&1)&&0===(a.flags&128)}function Xe(a){if(D){var b=fa;if(b){var c=b;if(!Ah(a,b)){if(We(a))throw Error(m(418));b=Ka(c.nextSibling);var d=la;b&&Ah(a,b)?zh(d,c):(a.flags=a.flags&-4097|2,D=!1,la=a)}}else{if(We(a))throw Error(m(418));a.flags=a.flags&-4097|2;D=!1;la=a}}}function Bh(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag&&13!==a.tag;)a=a.return;la=a}function pd(a){if(a!==la)return!1;if(!D)return Bh(a),D=!0,!1;var b;(b=3!==a.tag)&&!(b=5!==a.tag)&&(b=a.type,b="head"!==b&&"body"!==b&&!Qe(a.type,
+a.memoizedProps));if(b&&(b=fa)){if(We(a)){for(a=fa;a;)a=Ka(a.nextSibling);throw Error(m(418));}for(;b;)zh(a,b),b=Ka(b.nextSibling)}Bh(a);if(13===a.tag){a=a.memoizedState;a=null!==a?a.dehydrated:null;if(!a)throw Error(m(317));a:{a=a.nextSibling;for(b=0;a;){if(8===a.nodeType){var c=a.data;if("/$"===c){if(0===b){fa=Ka(a.nextSibling);break a}b--}else"$"!==c&&"$!"!==c&&"$?"!==c||b++}a=a.nextSibling}fa=null}}else fa=la?Ka(a.stateNode.nextSibling):null;return!0}function Qb(){fa=la=null;D=!1}function Ye(a){null===
+wa?wa=[a]:wa.push(a)}function vc(a,b,c){a=c.ref;if(null!==a&&"function"!==typeof a&&"object"!==typeof a){if(c._owner){c=c._owner;if(c){if(1!==c.tag)throw Error(m(309));var d=c.stateNode}if(!d)throw Error(m(147,a));var e=d,f=""+a;if(null!==b&&null!==b.ref&&"function"===typeof b.ref&&b.ref._stringRef===f)return b.ref;b=function(a){var b=e.refs;null===a?delete b[f]:b[f]=a};b._stringRef=f;return b}if("string"!==typeof a)throw Error(m(284));if(!c._owner)throw Error(m(290,a));}return a}function qd(a,b){a=
+Object.prototype.toString.call(b);throw Error(m(31,"[object Object]"===a?"object with keys {"+Object.keys(b).join(", ")+"}":a));}function Ch(a){var b=a._init;return b(a._payload)}function Dh(a){function b(b,c){if(a){var d=b.deletions;null===d?(b.deletions=[c],b.flags|=16):d.push(c)}}function c(c,d){if(!a)return null;for(;null!==d;)b(c,d),d=d.sibling;return null}function d(a,b){for(a=new Map;null!==b;)null!==b.key?a.set(b.key,b):a.set(b.index,b),b=b.sibling;return a}function e(a,b){a=eb(a,b);a.index=
+0;a.sibling=null;return a}function f(b,c,d){b.index=d;if(!a)return b.flags|=1048576,c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.flags|=2,c):d;b.flags|=2;return c}function g(b){a&&null===b.alternate&&(b.flags|=2);return b}function h(a,b,c,d){if(null===b||6!==b.tag)return b=Ze(c,a.mode,d),b.return=a,b;b=e(b,c);b.return=a;return b}function k(a,b,c,d){var f=c.type;if(f===Bb)return l(a,b,c.props.children,d,c.key);if(null!==b&&(b.elementType===f||"object"===typeof f&&null!==f&&f.$$typeof===Ta&&
+Ch(f)===b.type))return d=e(b,c.props),d.ref=vc(a,b,c),d.return=a,d;d=rd(c.type,c.key,c.props,null,a.mode,d);d.ref=vc(a,b,c);d.return=a;return d}function n(a,b,c,d){if(null===b||4!==b.tag||b.stateNode.containerInfo!==c.containerInfo||b.stateNode.implementation!==c.implementation)return b=$e(c,a.mode,d),b.return=a,b;b=e(b,c.children||[]);b.return=a;return b}function l(a,b,c,d,f){if(null===b||7!==b.tag)return b=sb(c,a.mode,d,f),b.return=a,b;b=e(b,c);b.return=a;return b}function u(a,b,c){if("string"===
+typeof b&&""!==b||"number"===typeof b)return b=Ze(""+b,a.mode,c),b.return=a,b;if("object"===typeof b&&null!==b){switch(b.$$typeof){case sd:return c=rd(b.type,b.key,b.props,null,a.mode,c),c.ref=vc(a,null,b),c.return=a,c;case Cb:return b=$e(b,a.mode,c),b.return=a,b;case Ta:var d=b._init;return u(a,d(b._payload),c)}if(cc(b)||ac(b))return b=sb(b,a.mode,c,null),b.return=a,b;qd(a,b)}return null}function r(a,b,c,d){var e=null!==b?b.key:null;if("string"===typeof c&&""!==c||"number"===typeof c)return null!==
+e?null:h(a,b,""+c,d);if("object"===typeof c&&null!==c){switch(c.$$typeof){case sd:return c.key===e?k(a,b,c,d):null;case Cb:return c.key===e?n(a,b,c,d):null;case Ta:return e=c._init,r(a,b,e(c._payload),d)}if(cc(c)||ac(c))return null!==e?null:l(a,b,c,d,null);qd(a,c)}return null}function p(a,b,c,d,e){if("string"===typeof d&&""!==d||"number"===typeof d)return a=a.get(c)||null,h(b,a,""+d,e);if("object"===typeof d&&null!==d){switch(d.$$typeof){case sd:return a=a.get(null===d.key?c:d.key)||null,k(b,a,d,
+e);case Cb:return a=a.get(null===d.key?c:d.key)||null,n(b,a,d,e);case Ta:var f=d._init;return p(a,b,c,f(d._payload),e)}if(cc(d)||ac(d))return a=a.get(c)||null,l(b,a,d,e,null);qd(b,d)}return null}function x(e,g,h,k){for(var n=null,m=null,l=g,t=g=0,q=null;null!==l&&t<h.length;t++){l.index>t?(q=l,l=null):q=l.sibling;var A=r(e,l,h[t],k);if(null===A){null===l&&(l=q);break}a&&l&&null===A.alternate&&b(e,l);g=f(A,g,t);null===m?n=A:m.sibling=A;m=A;l=q}if(t===h.length)return c(e,l),D&&qb(e,t),n;if(null===l){for(;t<
+h.length;t++)l=u(e,h[t],k),null!==l&&(g=f(l,g,t),null===m?n=l:m.sibling=l,m=l);D&&qb(e,t);return n}for(l=d(e,l);t<h.length;t++)q=p(l,e,t,h[t],k),null!==q&&(a&&null!==q.alternate&&l.delete(null===q.key?t:q.key),g=f(q,g,t),null===m?n=q:m.sibling=q,m=q);a&&l.forEach(function(a){return b(e,a)});D&&qb(e,t);return n}function I(e,g,h,k){var n=ac(h);if("function"!==typeof n)throw Error(m(150));h=n.call(h);if(null==h)throw Error(m(151));for(var l=n=null,q=g,t=g=0,A=null,w=h.next();null!==q&&!w.done;t++,w=
+h.next()){q.index>t?(A=q,q=null):A=q.sibling;var x=r(e,q,w.value,k);if(null===x){null===q&&(q=A);break}a&&q&&null===x.alternate&&b(e,q);g=f(x,g,t);null===l?n=x:l.sibling=x;l=x;q=A}if(w.done)return c(e,q),D&&qb(e,t),n;if(null===q){for(;!w.done;t++,w=h.next())w=u(e,w.value,k),null!==w&&(g=f(w,g,t),null===l?n=w:l.sibling=w,l=w);D&&qb(e,t);return n}for(q=d(e,q);!w.done;t++,w=h.next())w=p(q,e,t,w.value,k),null!==w&&(a&&null!==w.alternate&&q.delete(null===w.key?t:w.key),g=f(w,g,t),null===l?n=w:l.sibling=
+w,l=w);a&&q.forEach(function(a){return b(e,a)});D&&qb(e,t);return n}function v(a,d,f,h){"object"===typeof f&&null!==f&&f.type===Bb&&null===f.key&&(f=f.props.children);if("object"===typeof f&&null!==f){switch(f.$$typeof){case sd:a:{for(var k=f.key,n=d;null!==n;){if(n.key===k){k=f.type;if(k===Bb){if(7===n.tag){c(a,n.sibling);d=e(n,f.props.children);d.return=a;a=d;break a}}else if(n.elementType===k||"object"===typeof k&&null!==k&&k.$$typeof===Ta&&Ch(k)===n.type){c(a,n.sibling);d=e(n,f.props);d.ref=vc(a,
+n,f);d.return=a;a=d;break a}c(a,n);break}else b(a,n);n=n.sibling}f.type===Bb?(d=sb(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=rd(f.type,f.key,f.props,null,a.mode,h),h.ref=vc(a,d,f),h.return=a,a=h)}return g(a);case Cb:a:{for(n=f.key;null!==d;){if(d.key===n)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[]);d.return=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=$e(f,a.mode,h);d.return=a;
+a=d}return g(a);case Ta:return n=f._init,v(a,d,n(f._payload),h)}if(cc(f))return x(a,d,f,h);if(ac(f))return I(a,d,f,h);qd(a,f)}return"string"===typeof f&&""!==f||"number"===typeof f?(f=""+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f),d.return=a,a=d):(c(a,d),d=Ze(f,a.mode,h),d.return=a,a=d),g(a)):c(a,d)}return v}function af(){bf=Rb=td=null}function cf(a,b){b=ud.current;v(ud);a._currentValue=b}function df(a,b,c){for(;null!==a;){var d=a.alternate;(a.childLanes&b)!==b?(a.childLanes|=b,null!==d&&(d.childLanes|=
+b)):null!==d&&(d.childLanes&b)!==b&&(d.childLanes|=b);if(a===c)break;a=a.return}}function Sb(a,b){td=a;bf=Rb=null;a=a.dependencies;null!==a&&null!==a.firstContext&&(0!==(a.lanes&b)&&(ha=!0),a.firstContext=null)}function qa(a){var b=a._currentValue;if(bf!==a)if(a={context:a,memoizedValue:b,next:null},null===Rb){if(null===td)throw Error(m(308));Rb=a;td.dependencies={lanes:0,firstContext:a}}else Rb=Rb.next=a;return b}function ef(a){null===tb?tb=[a]:tb.push(a)}function Eh(a,b,c,d){var e=b.interleaved;
+null===e?(c.next=c,ef(b)):(c.next=e.next,e.next=c);b.interleaved=c;return Oa(a,d)}function Oa(a,b){a.lanes|=b;var c=a.alternate;null!==c&&(c.lanes|=b);c=a;for(a=a.return;null!==a;)a.childLanes|=b,c=a.alternate,null!==c&&(c.childLanes|=b),c=a,a=a.return;return 3===c.tag?c.stateNode:null}function ff(a){a.updateQueue={baseState:a.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function Fh(a,b){a=a.updateQueue;b.updateQueue===a&&(b.updateQueue=
+{baseState:a.baseState,firstBaseUpdate:a.firstBaseUpdate,lastBaseUpdate:a.lastBaseUpdate,shared:a.shared,effects:a.effects})}function Pa(a,b){return{eventTime:a,lane:b,tag:0,payload:null,callback:null,next:null}}function fb(a,b,c){var d=a.updateQueue;if(null===d)return null;d=d.shared;if(0!==(p&2)){var e=d.pending;null===e?b.next=b:(b.next=e.next,e.next=b);d.pending=b;return kk(a,c)}e=d.interleaved;null===e?(b.next=b,ef(d)):(b.next=e.next,e.next=b);d.interleaved=b;return Oa(a,c)}function vd(a,b,c){b=
+b.updateQueue;if(null!==b&&(b=b.shared,0!==(c&4194240))){var d=b.lanes;d&=a.pendingLanes;c|=d;b.lanes=c;xe(a,c)}}function Gh(a,b){var c=a.updateQueue,d=a.alternate;if(null!==d&&(d=d.updateQueue,c===d)){var e=null,f=null;c=c.firstBaseUpdate;if(null!==c){do{var g={eventTime:c.eventTime,lane:c.lane,tag:c.tag,payload:c.payload,callback:c.callback,next:null};null===f?e=f=g:f=f.next=g;c=c.next}while(null!==c);null===f?e=f=b:f=f.next=b}else e=f=b;c={baseState:d.baseState,firstBaseUpdate:e,lastBaseUpdate:f,
+shared:d.shared,effects:d.effects};a.updateQueue=c;return}a=c.lastBaseUpdate;null===a?c.firstBaseUpdate=b:a.next=b;c.lastBaseUpdate=b}function wd(a,b,c,d){var e=a.updateQueue;gb=!1;var f=e.firstBaseUpdate,g=e.lastBaseUpdate,h=e.shared.pending;if(null!==h){e.shared.pending=null;var k=h,n=k.next;k.next=null;null===g?f=n:g.next=n;g=k;var l=a.alternate;null!==l&&(l=l.updateQueue,h=l.lastBaseUpdate,h!==g&&(null===h?l.firstBaseUpdate=n:h.next=n,l.lastBaseUpdate=k))}if(null!==f){var m=e.baseState;g=0;l=
+n=k=null;h=f;do{var r=h.lane,p=h.eventTime;if((d&r)===r){null!==l&&(l=l.next={eventTime:p,lane:0,tag:h.tag,payload:h.payload,callback:h.callback,next:null});a:{var x=a,v=h;r=b;p=c;switch(v.tag){case 1:x=v.payload;if("function"===typeof x){m=x.call(p,m,r);break a}m=x;break a;case 3:x.flags=x.flags&-65537|128;case 0:x=v.payload;r="function"===typeof x?x.call(p,m,r):x;if(null===r||void 0===r)break a;m=E({},m,r);break a;case 2:gb=!0}}null!==h.callback&&0!==h.lane&&(a.flags|=64,r=e.effects,null===r?e.effects=
+[h]:r.push(h))}else p={eventTime:p,lane:r,tag:h.tag,payload:h.payload,callback:h.callback,next:null},null===l?(n=l=p,k=m):l=l.next=p,g|=r;h=h.next;if(null===h)if(h=e.shared.pending,null===h)break;else r=h,h=r.next,r.next=null,e.lastBaseUpdate=r,e.shared.pending=null}while(1);null===l&&(k=m);e.baseState=k;e.firstBaseUpdate=n;e.lastBaseUpdate=l;b=e.shared.interleaved;if(null!==b){e=b;do g|=e.lane,e=e.next;while(e!==b)}else null===f&&(e.shared.lanes=0);ra|=g;a.lanes=g;a.memoizedState=m}}function Hh(a,
+b,c){a=b.effects;b.effects=null;if(null!==a)for(b=0;b<a.length;b++){var d=a[b],e=d.callback;if(null!==e){d.callback=null;d=c;if("function"!==typeof e)throw Error(m(191,e));e.call(d)}}}function ub(a){if(a===wc)throw Error(m(174));return a}function gf(a,b){y(xc,b);y(yc,a);y(Ea,wc);a=b.nodeType;switch(a){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:oe(null,"");break;default:a=8===a?b.parentNode:b,b=a.namespaceURI||null,a=a.tagName,b=oe(b,a)}v(Ea);y(Ea,b)}function Tb(a){v(Ea);v(yc);v(xc)}function Ih(a){ub(xc.current);
+var b=ub(Ea.current);var c=oe(b,a.type);b!==c&&(y(yc,a),y(Ea,c))}function hf(a){yc.current===a&&(v(Ea),v(yc))}function xd(a){for(var b=a;null!==b;){if(13===b.tag){var c=b.memoizedState;if(null!==c&&(c=c.dehydrated,null===c||"$?"===c.data||"$!"===c.data))return b}else if(19===b.tag&&void 0!==b.memoizedProps.revealOrder){if(0!==(b.flags&128))return b}else if(null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return null;b=b.return}b.sibling.return=
+b.return;b=b.sibling}return null}function jf(){for(var a=0;a<kf.length;a++)kf[a]._workInProgressVersionPrimary=null;kf.length=0}function V(){throw Error(m(321));}function lf(a,b){if(null===b)return!1;for(var c=0;c<b.length&&c<a.length;c++)if(!ua(a[c],b[c]))return!1;return!0}function mf(a,b,c,d,e,f){vb=f;C=b;b.memoizedState=null;b.updateQueue=null;b.lanes=0;yd.current=null===a||null===a.memoizedState?lk:mk;a=c(d,e);if(zc){f=0;do{zc=!1;Ac=0;if(25<=f)throw Error(m(301));f+=1;N=K=null;b.updateQueue=null;
+yd.current=nk;a=c(d,e)}while(zc)}yd.current=zd;b=null!==K&&null!==K.next;vb=0;N=K=C=null;Ad=!1;if(b)throw Error(m(300));return a}function nf(){var a=0!==Ac;Ac=0;return a}function Fa(){var a={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};null===N?C.memoizedState=N=a:N=N.next=a;return N}function sa(){if(null===K){var a=C.alternate;a=null!==a?a.memoizedState:null}else a=K.next;var b=null===N?C.memoizedState:N.next;if(null!==b)N=b,K=a;else{if(null===a)throw Error(m(310));K=a;
+a={memoizedState:K.memoizedState,baseState:K.baseState,baseQueue:K.baseQueue,queue:K.queue,next:null};null===N?C.memoizedState=N=a:N=N.next=a}return N}function Bc(a,b){return"function"===typeof b?b(a):b}function of(a,b,c){b=sa();c=b.queue;if(null===c)throw Error(m(311));c.lastRenderedReducer=a;var d=K,e=d.baseQueue,f=c.pending;if(null!==f){if(null!==e){var g=e.next;e.next=f.next;f.next=g}d.baseQueue=e=f;c.pending=null}if(null!==e){f=e.next;d=d.baseState;var h=g=null,k=null,n=f;do{var l=n.lane;if((vb&
+l)===l)null!==k&&(k=k.next={lane:0,action:n.action,hasEagerState:n.hasEagerState,eagerState:n.eagerState,next:null}),d=n.hasEagerState?n.eagerState:a(d,n.action);else{var u={lane:l,action:n.action,hasEagerState:n.hasEagerState,eagerState:n.eagerState,next:null};null===k?(h=k=u,g=d):k=k.next=u;C.lanes|=l;ra|=l}n=n.next}while(null!==n&&n!==f);null===k?g=d:k.next=h;ua(d,b.memoizedState)||(ha=!0);b.memoizedState=d;b.baseState=g;b.baseQueue=k;c.lastRenderedState=d}a=c.interleaved;if(null!==a){e=a;do f=
+e.lane,C.lanes|=f,ra|=f,e=e.next;while(e!==a)}else null===e&&(c.lanes=0);return[b.memoizedState,c.dispatch]}function pf(a,b,c){b=sa();c=b.queue;if(null===c)throw Error(m(311));c.lastRenderedReducer=a;var d=c.dispatch,e=c.pending,f=b.memoizedState;if(null!==e){c.pending=null;var g=e=e.next;do f=a(f,g.action),g=g.next;while(g!==e);ua(f,b.memoizedState)||(ha=!0);b.memoizedState=f;null===b.baseQueue&&(b.baseState=f);c.lastRenderedState=f}return[f,d]}function Jh(a,b,c){}function Kh(a,b,c){c=C;var d=sa(),
+e=b(),f=!ua(d.memoizedState,e);f&&(d.memoizedState=e,ha=!0);d=d.queue;qf(Lh.bind(null,c,d,a),[a]);if(d.getSnapshot!==b||f||null!==N&&N.memoizedState.tag&1){c.flags|=2048;Cc(9,Mh.bind(null,c,d,e,b),void 0,null);if(null===O)throw Error(m(349));0!==(vb&30)||Nh(c,b,e)}return e}function Nh(a,b,c){a.flags|=16384;a={getSnapshot:b,value:c};b=C.updateQueue;null===b?(b={lastEffect:null,stores:null},C.updateQueue=b,b.stores=[a]):(c=b.stores,null===c?b.stores=[a]:c.push(a))}function Mh(a,b,c,d){b.value=c;b.getSnapshot=
+d;Oh(b)&&Ph(a)}function Lh(a,b,c){return c(function(){Oh(b)&&Ph(a)})}function Oh(a){var b=a.getSnapshot;a=a.value;try{var c=b();return!ua(a,c)}catch(d){return!0}}function Ph(a){var b=Oa(a,1);null!==b&&xa(b,a,1,-1)}function Qh(a){var b=Fa();"function"===typeof a&&(a=a());b.memoizedState=b.baseState=a;a={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:Bc,lastRenderedState:a};b.queue=a;a=a.dispatch=ok.bind(null,C,a);return[b.memoizedState,a]}function Cc(a,b,c,d){a={tag:a,create:b,
+destroy:c,deps:d,next:null};b=C.updateQueue;null===b?(b={lastEffect:null,stores:null},C.updateQueue=b,b.lastEffect=a.next=a):(c=b.lastEffect,null===c?b.lastEffect=a.next=a:(d=c.next,c.next=a,a.next=d,b.lastEffect=a));return a}function Rh(a){return sa().memoizedState}function Bd(a,b,c,d){var e=Fa();C.flags|=a;e.memoizedState=Cc(1|b,c,void 0,void 0===d?null:d)}function Cd(a,b,c,d){var e=sa();d=void 0===d?null:d;var f=void 0;if(null!==K){var g=K.memoizedState;f=g.destroy;if(null!==d&&lf(d,g.deps)){e.memoizedState=
+Cc(b,c,f,d);return}}C.flags|=a;e.memoizedState=Cc(1|b,c,f,d)}function Sh(a,b){return Bd(8390656,8,a,b)}function qf(a,b){return Cd(2048,8,a,b)}function Th(a,b){return Cd(4,2,a,b)}function Uh(a,b){return Cd(4,4,a,b)}function Vh(a,b){if("function"===typeof b)return a=a(),b(a),function(){b(null)};if(null!==b&&void 0!==b)return a=a(),b.current=a,function(){b.current=null}}function Wh(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return Cd(4,4,Vh.bind(null,b,a),c)}function rf(a,b){}function Xh(a,b){var c=
+sa();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&lf(b,d[1]))return d[0];c.memoizedState=[a,b];return a}function Yh(a,b){var c=sa();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&lf(b,d[1]))return d[0];a=a();c.memoizedState=[a,b];return a}function Zh(a,b,c){if(0===(vb&21))return a.baseState&&(a.baseState=!1,ha=!0),a.memoizedState=c;ua(c,b)||(c=Dg(),C.lanes|=c,ra|=c,a.baseState=!0);return b}function pk(a,b,c){c=z;z=0!==c&&4>c?c:4;a(!0);var d=sf.transition;sf.transition=
+{};try{a(!1),b()}finally{z=c,sf.transition=d}}function $h(){return sa().memoizedState}function qk(a,b,c){var d=hb(a);c={lane:d,action:c,hasEagerState:!1,eagerState:null,next:null};if(ai(a))bi(b,c);else if(c=Eh(a,b,c,d),null!==c){var e=Z();xa(c,a,d,e);ci(c,b,d)}}function ok(a,b,c){var d=hb(a),e={lane:d,action:c,hasEagerState:!1,eagerState:null,next:null};if(ai(a))bi(b,e);else{var f=a.alternate;if(0===a.lanes&&(null===f||0===f.lanes)&&(f=b.lastRenderedReducer,null!==f))try{var g=b.lastRenderedState,
+h=f(g,c);e.hasEagerState=!0;e.eagerState=h;if(ua(h,g)){var k=b.interleaved;null===k?(e.next=e,ef(b)):(e.next=k.next,k.next=e);b.interleaved=e;return}}catch(n){}finally{}c=Eh(a,b,e,d);null!==c&&(e=Z(),xa(c,a,d,e),ci(c,b,d))}}function ai(a){var b=a.alternate;return a===C||null!==b&&b===C}function bi(a,b){zc=Ad=!0;var c=a.pending;null===c?b.next=b:(b.next=c.next,c.next=b);a.pending=b}function ci(a,b,c){if(0!==(c&4194240)){var d=b.lanes;d&=a.pendingLanes;c|=d;b.lanes=c;xe(a,c)}}function ya(a,b){if(a&&
+a.defaultProps){b=E({},b);a=a.defaultProps;for(var c in a)void 0===b[c]&&(b[c]=a[c]);return b}return b}function tf(a,b,c,d){b=a.memoizedState;c=c(d,b);c=null===c||void 0===c?b:E({},b,c);a.memoizedState=c;0===a.lanes&&(a.updateQueue.baseState=c)}function di(a,b,c,d,e,f,g){a=a.stateNode;return"function"===typeof a.shouldComponentUpdate?a.shouldComponentUpdate(d,f,g):b.prototype&&b.prototype.isPureReactComponent?!qc(c,d)||!qc(e,f):!0}function ei(a,b,c){var d=!1,e=cb;var f=b.contextType;"object"===typeof f&&
+null!==f?f=qa(f):(e=ea(b)?pb:J.current,d=b.contextTypes,f=(d=null!==d&&void 0!==d)?Nb(a,e):cb);b=new b(c,f);a.memoizedState=null!==b.state&&void 0!==b.state?b.state:null;b.updater=Dd;a.stateNode=b;b._reactInternals=a;d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=e,a.__reactInternalMemoizedMaskedChildContext=f);return b}function fi(a,b,c,d){a=b.state;"function"===typeof b.componentWillReceiveProps&&b.componentWillReceiveProps(c,d);"function"===typeof b.UNSAFE_componentWillReceiveProps&&
+b.UNSAFE_componentWillReceiveProps(c,d);b.state!==a&&Dd.enqueueReplaceState(b,b.state,null)}function uf(a,b,c,d){var e=a.stateNode;e.props=c;e.state=a.memoizedState;e.refs={};ff(a);var f=b.contextType;"object"===typeof f&&null!==f?e.context=qa(f):(f=ea(b)?pb:J.current,e.context=Nb(a,f));e.state=a.memoizedState;f=b.getDerivedStateFromProps;"function"===typeof f&&(tf(a,b,f,c),e.state=a.memoizedState);"function"===typeof b.getDerivedStateFromProps||"function"===typeof e.getSnapshotBeforeUpdate||"function"!==
+typeof e.UNSAFE_componentWillMount&&"function"!==typeof e.componentWillMount||(b=e.state,"function"===typeof e.componentWillMount&&e.componentWillMount(),"function"===typeof e.UNSAFE_componentWillMount&&e.UNSAFE_componentWillMount(),b!==e.state&&Dd.enqueueReplaceState(e,e.state,null),wd(a,c,e,d),e.state=a.memoizedState);"function"===typeof e.componentDidMount&&(a.flags|=4194308)}function Ub(a,b){try{var c="",d=b;do c+=fj(d),d=d.return;while(d);var e=c}catch(f){e="\nError generating stack: "+f.message+
+"\n"+f.stack}return{value:a,source:b,stack:e,digest:null}}function vf(a,b,c){return{value:a,source:null,stack:null!=c?c:null,digest:null!=b?b:null}}function wf(a,b){try{console.error(b.value)}catch(c){setTimeout(function(){throw c;})}}function gi(a,b,c){c=Pa(-1,c);c.tag=3;c.payload={element:null};var d=b.value;c.callback=function(){Ed||(Ed=!0,xf=d);wf(a,b)};return c}function hi(a,b,c){c=Pa(-1,c);c.tag=3;var d=a.type.getDerivedStateFromError;if("function"===typeof d){var e=b.value;c.payload=function(){return d(e)};
+c.callback=function(){wf(a,b)}}var f=a.stateNode;null!==f&&"function"===typeof f.componentDidCatch&&(c.callback=function(){wf(a,b);"function"!==typeof d&&(null===ib?ib=new Set([this]):ib.add(this));var c=b.stack;this.componentDidCatch(b.value,{componentStack:null!==c?c:""})});return c}function ii(a,b,c){var d=a.pingCache;if(null===d){d=a.pingCache=new rk;var e=new Set;d.set(b,e)}else e=d.get(b),void 0===e&&(e=new Set,d.set(b,e));e.has(c)||(e.add(c),a=sk.bind(null,a,b,c),b.then(a,a))}function ji(a){do{var b;
+if(b=13===a.tag)b=a.memoizedState,b=null!==b?null!==b.dehydrated?!0:!1:!0;if(b)return a;a=a.return}while(null!==a);return null}function ki(a,b,c,d,e){if(0===(a.mode&1))return a===b?a.flags|=65536:(a.flags|=128,c.flags|=131072,c.flags&=-52805,1===c.tag&&(null===c.alternate?c.tag=17:(b=Pa(-1,1),b.tag=2,fb(c,b,1))),c.lanes|=1),a;a.flags|=65536;a.lanes=e;return a}function aa(a,b,c,d){b.child=null===a?li(b,null,c,d):Vb(b,a.child,c,d)}function mi(a,b,c,d,e){c=c.render;var f=b.ref;Sb(b,e);d=mf(a,b,c,d,f,
+e);c=nf();if(null!==a&&!ha)return b.updateQueue=a.updateQueue,b.flags&=-2053,a.lanes&=~e,Qa(a,b,e);D&&c&&Ue(b);b.flags|=1;aa(a,b,d,e);return b.child}function ni(a,b,c,d,e){if(null===a){var f=c.type;if("function"===typeof f&&!yf(f)&&void 0===f.defaultProps&&null===c.compare&&void 0===c.defaultProps)return b.tag=15,b.type=f,oi(a,b,f,d,e);a=rd(c.type,null,d,b,b.mode,e);a.ref=b.ref;a.return=b;return b.child=a}f=a.child;if(0===(a.lanes&e)){var g=f.memoizedProps;c=c.compare;c=null!==c?c:qc;if(c(g,d)&&a.ref===
+b.ref)return Qa(a,b,e)}b.flags|=1;a=eb(f,d);a.ref=b.ref;a.return=b;return b.child=a}function oi(a,b,c,d,e){if(null!==a){var f=a.memoizedProps;if(qc(f,d)&&a.ref===b.ref)if(ha=!1,b.pendingProps=d=f,0!==(a.lanes&e))0!==(a.flags&131072)&&(ha=!0);else return b.lanes=a.lanes,Qa(a,b,e)}return zf(a,b,c,d,e)}function pi(a,b,c){var d=b.pendingProps,e=d.children,f=null!==a?a.memoizedState:null;if("hidden"===d.mode)if(0===(b.mode&1))b.memoizedState={baseLanes:0,cachePool:null,transitions:null},y(Ga,ba),ba|=c;
+else{if(0===(c&1073741824))return a=null!==f?f.baseLanes|c:c,b.lanes=b.childLanes=1073741824,b.memoizedState={baseLanes:a,cachePool:null,transitions:null},b.updateQueue=null,y(Ga,ba),ba|=a,null;b.memoizedState={baseLanes:0,cachePool:null,transitions:null};d=null!==f?f.baseLanes:c;y(Ga,ba);ba|=d}else null!==f?(d=f.baseLanes|c,b.memoizedState=null):d=c,y(Ga,ba),ba|=d;aa(a,b,e,c);return b.child}function qi(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.flags|=512,b.flags|=2097152}function zf(a,
+b,c,d,e){var f=ea(c)?pb:J.current;f=Nb(b,f);Sb(b,e);c=mf(a,b,c,d,f,e);d=nf();if(null!==a&&!ha)return b.updateQueue=a.updateQueue,b.flags&=-2053,a.lanes&=~e,Qa(a,b,e);D&&d&&Ue(b);b.flags|=1;aa(a,b,c,e);return b.child}function ri(a,b,c,d,e){if(ea(c)){var f=!0;ld(b)}else f=!1;Sb(b,e);if(null===b.stateNode)Fd(a,b),ei(b,c,d),uf(b,c,d,e),d=!0;else if(null===a){var g=b.stateNode,h=b.memoizedProps;g.props=h;var k=g.context,n=c.contextType;"object"===typeof n&&null!==n?n=qa(n):(n=ea(c)?pb:J.current,n=Nb(b,
+n));var l=c.getDerivedStateFromProps,m="function"===typeof l||"function"===typeof g.getSnapshotBeforeUpdate;m||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps||(h!==d||k!==n)&&fi(b,g,d,n);gb=!1;var r=b.memoizedState;g.state=r;wd(b,d,g,e);k=b.memoizedState;h!==d||r!==k||S.current||gb?("function"===typeof l&&(tf(b,c,l,d),k=b.memoizedState),(h=gb||di(b,c,h,d,r,k,n))?(m||"function"!==typeof g.UNSAFE_componentWillMount&&"function"!==typeof g.componentWillMount||
+("function"===typeof g.componentWillMount&&g.componentWillMount(),"function"===typeof g.UNSAFE_componentWillMount&&g.UNSAFE_componentWillMount()),"function"===typeof g.componentDidMount&&(b.flags|=4194308)):("function"===typeof g.componentDidMount&&(b.flags|=4194308),b.memoizedProps=d,b.memoizedState=k),g.props=d,g.state=k,g.context=n,d=h):("function"===typeof g.componentDidMount&&(b.flags|=4194308),d=!1)}else{g=b.stateNode;Fh(a,b);h=b.memoizedProps;n=b.type===b.elementType?h:ya(b.type,h);g.props=
+n;m=b.pendingProps;r=g.context;k=c.contextType;"object"===typeof k&&null!==k?k=qa(k):(k=ea(c)?pb:J.current,k=Nb(b,k));var p=c.getDerivedStateFromProps;(l="function"===typeof p||"function"===typeof g.getSnapshotBeforeUpdate)||"function"!==typeof g.UNSAFE_componentWillReceiveProps&&"function"!==typeof g.componentWillReceiveProps||(h!==m||r!==k)&&fi(b,g,d,k);gb=!1;r=b.memoizedState;g.state=r;wd(b,d,g,e);var x=b.memoizedState;h!==m||r!==x||S.current||gb?("function"===typeof p&&(tf(b,c,p,d),x=b.memoizedState),
+(n=gb||di(b,c,n,d,r,x,k)||!1)?(l||"function"!==typeof g.UNSAFE_componentWillUpdate&&"function"!==typeof g.componentWillUpdate||("function"===typeof g.componentWillUpdate&&g.componentWillUpdate(d,x,k),"function"===typeof g.UNSAFE_componentWillUpdate&&g.UNSAFE_componentWillUpdate(d,x,k)),"function"===typeof g.componentDidUpdate&&(b.flags|=4),"function"===typeof g.getSnapshotBeforeUpdate&&(b.flags|=1024)):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&r===a.memoizedState||(b.flags|=
+4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&r===a.memoizedState||(b.flags|=1024),b.memoizedProps=d,b.memoizedState=x),g.props=d,g.state=x,g.context=k,d=n):("function"!==typeof g.componentDidUpdate||h===a.memoizedProps&&r===a.memoizedState||(b.flags|=4),"function"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&r===a.memoizedState||(b.flags|=1024),d=!1)}return Af(a,b,c,d,f,e)}function Af(a,b,c,d,e,f){qi(a,b);var g=0!==(b.flags&128);if(!d&&!g)return e&&vh(b,c,!1),
+Qa(a,b,f);d=b.stateNode;tk.current=b;var h=g&&"function"!==typeof c.getDerivedStateFromError?null:d.render();b.flags|=1;null!==a&&g?(b.child=Vb(b,a.child,null,f),b.child=Vb(b,null,h,f)):aa(a,b,h,f);b.memoizedState=d.state;e&&vh(b,c,!0);return b.child}function si(a){var b=a.stateNode;b.pendingContext?th(a,b.pendingContext,b.pendingContext!==b.context):b.context&&th(a,b.context,!1);gf(a,b.containerInfo)}function ti(a,b,c,d,e){Qb();Ye(e);b.flags|=256;aa(a,b,c,d);return b.child}function Bf(a){return{baseLanes:a,
+cachePool:null,transitions:null}}function ui(a,b,c){var d=b.pendingProps,e=F.current,f=!1,g=0!==(b.flags&128),h;(h=g)||(h=null!==a&&null===a.memoizedState?!1:0!==(e&2));if(h)f=!0,b.flags&=-129;else if(null===a||null!==a.memoizedState)e|=1;y(F,e&1);if(null===a){Xe(b);a=b.memoizedState;if(null!==a&&(a=a.dehydrated,null!==a))return 0===(b.mode&1)?b.lanes=1:"$!"===a.data?b.lanes=8:b.lanes=1073741824,null;g=d.children;a=d.fallback;return f?(d=b.mode,f=b.child,g={mode:"hidden",children:g},0===(d&1)&&null!==
+f?(f.childLanes=0,f.pendingProps=g):f=Gd(g,d,0,null),a=sb(a,d,c,null),f.return=b,a.return=b,f.sibling=a,b.child=f,b.child.memoizedState=Bf(c),b.memoizedState=Cf,a):Df(b,g)}e=a.memoizedState;if(null!==e&&(h=e.dehydrated,null!==h))return uk(a,b,g,d,h,e,c);if(f){f=d.fallback;g=b.mode;e=a.child;h=e.sibling;var k={mode:"hidden",children:d.children};0===(g&1)&&b.child!==e?(d=b.child,d.childLanes=0,d.pendingProps=k,b.deletions=null):(d=eb(e,k),d.subtreeFlags=e.subtreeFlags&14680064);null!==h?f=eb(h,f):(f=
+sb(f,g,c,null),f.flags|=2);f.return=b;d.return=b;d.sibling=f;b.child=d;d=f;f=b.child;g=a.child.memoizedState;g=null===g?Bf(c):{baseLanes:g.baseLanes|c,cachePool:null,transitions:g.transitions};f.memoizedState=g;f.childLanes=a.childLanes&~c;b.memoizedState=Cf;return d}f=a.child;a=f.sibling;d=eb(f,{mode:"visible",children:d.children});0===(b.mode&1)&&(d.lanes=c);d.return=b;d.sibling=null;null!==a&&(c=b.deletions,null===c?(b.deletions=[a],b.flags|=16):c.push(a));b.child=d;b.memoizedState=null;return d}
+function Df(a,b,c){b=Gd({mode:"visible",children:b},a.mode,0,null);b.return=a;return a.child=b}function Hd(a,b,c,d){null!==d&&Ye(d);Vb(b,a.child,null,c);a=Df(b,b.pendingProps.children);a.flags|=2;b.memoizedState=null;return a}function uk(a,b,c,d,e,f,g){if(c){if(b.flags&256)return b.flags&=-257,d=vf(Error(m(422))),Hd(a,b,g,d);if(null!==b.memoizedState)return b.child=a.child,b.flags|=128,null;f=d.fallback;e=b.mode;d=Gd({mode:"visible",children:d.children},e,0,null);f=sb(f,e,g,null);f.flags|=2;d.return=
+b;f.return=b;d.sibling=f;b.child=d;0!==(b.mode&1)&&Vb(b,a.child,null,g);b.child.memoizedState=Bf(g);b.memoizedState=Cf;return f}if(0===(b.mode&1))return Hd(a,b,g,null);if("$!"===e.data){d=e.nextSibling&&e.nextSibling.dataset;if(d)var h=d.dgst;d=h;f=Error(m(419));d=vf(f,d,void 0);return Hd(a,b,g,d)}h=0!==(g&a.childLanes);if(ha||h){d=O;if(null!==d){switch(g&-g){case 4:e=2;break;case 16:e=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:e=
+32;break;case 536870912:e=268435456;break;default:e=0}e=0!==(e&(d.suspendedLanes|g))?0:e;0!==e&&e!==f.retryLane&&(f.retryLane=e,Oa(a,e),xa(d,a,e,-1))}Ef();d=vf(Error(m(421)));return Hd(a,b,g,d)}if("$?"===e.data)return b.flags|=128,b.child=a.child,b=vk.bind(null,a),e._reactRetry=b,null;a=f.treeContext;fa=Ka(e.nextSibling);la=b;D=!0;wa=null;null!==a&&(na[oa++]=Ma,na[oa++]=Na,na[oa++]=rb,Ma=a.id,Na=a.overflow,rb=b);b=Df(b,d.children);b.flags|=4096;return b}function vi(a,b,c){a.lanes|=b;var d=a.alternate;
+null!==d&&(d.lanes|=b);df(a.return,b,c)}function Ff(a,b,c,d,e){var f=a.memoizedState;null===f?a.memoizedState={isBackwards:b,rendering:null,renderingStartTime:0,last:d,tail:c,tailMode:e}:(f.isBackwards=b,f.rendering=null,f.renderingStartTime=0,f.last=d,f.tail=c,f.tailMode=e)}function wi(a,b,c){var d=b.pendingProps,e=d.revealOrder,f=d.tail;aa(a,b,d.children,c);d=F.current;if(0!==(d&2))d=d&1|2,b.flags|=128;else{if(null!==a&&0!==(a.flags&128))a:for(a=b.child;null!==a;){if(13===a.tag)null!==a.memoizedState&&
+vi(a,c,b);else if(19===a.tag)vi(a,c,b);else if(null!==a.child){a.child.return=a;a=a.child;continue}if(a===b)break a;for(;null===a.sibling;){if(null===a.return||a.return===b)break a;a=a.return}a.sibling.return=a.return;a=a.sibling}d&=1}y(F,d);if(0===(b.mode&1))b.memoizedState=null;else switch(e){case "forwards":c=b.child;for(e=null;null!==c;)a=c.alternate,null!==a&&null===xd(a)&&(e=c),c=c.sibling;c=e;null===c?(e=b.child,b.child=null):(e=c.sibling,c.sibling=null);Ff(b,!1,e,c,f);break;case "backwards":c=
+null;e=b.child;for(b.child=null;null!==e;){a=e.alternate;if(null!==a&&null===xd(a)){b.child=e;break}a=e.sibling;e.sibling=c;c=e;e=a}Ff(b,!0,c,null,f);break;case "together":Ff(b,!1,null,null,void 0);break;default:b.memoizedState=null}return b.child}function Fd(a,b){0===(b.mode&1)&&null!==a&&(a.alternate=null,b.alternate=null,b.flags|=2)}function Qa(a,b,c){null!==a&&(b.dependencies=a.dependencies);ra|=b.lanes;if(0===(c&b.childLanes))return null;if(null!==a&&b.child!==a.child)throw Error(m(153));if(null!==
+b.child){a=b.child;c=eb(a,a.pendingProps);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=eb(a,a.pendingProps),c.return=b;c.sibling=null}return b.child}function wk(a,b,c){switch(b.tag){case 3:si(b);Qb();break;case 5:Ih(b);break;case 1:ea(b.type)&&ld(b);break;case 4:gf(b,b.stateNode.containerInfo);break;case 10:var d=b.type._context,e=b.memoizedProps.value;y(ud,d._currentValue);d._currentValue=e;break;case 13:d=b.memoizedState;if(null!==d){if(null!==d.dehydrated)return y(F,F.current&
+1),b.flags|=128,null;if(0!==(c&b.child.childLanes))return ui(a,b,c);y(F,F.current&1);a=Qa(a,b,c);return null!==a?a.sibling:null}y(F,F.current&1);break;case 19:d=0!==(c&b.childLanes);if(0!==(a.flags&128)){if(d)return wi(a,b,c);b.flags|=128}e=b.memoizedState;null!==e&&(e.rendering=null,e.tail=null,e.lastEffect=null);y(F,F.current);if(d)break;else return null;case 22:case 23:return b.lanes=0,pi(a,b,c)}return Qa(a,b,c)}function Dc(a,b){if(!D)switch(a.tailMode){case "hidden":b=a.tail;for(var c=null;null!==
+b;)null!==b.alternate&&(c=b),b=b.sibling;null===c?a.tail=null:c.sibling=null;break;case "collapsed":c=a.tail;for(var d=null;null!==c;)null!==c.alternate&&(d=c),c=c.sibling;null===d?b||null===a.tail?a.tail=null:a.tail.sibling=null:d.sibling=null}}function W(a){var b=null!==a.alternate&&a.alternate.child===a.child,c=0,d=0;if(b)for(var e=a.child;null!==e;)c|=e.lanes|e.childLanes,d|=e.subtreeFlags&14680064,d|=e.flags&14680064,e.return=a,e=e.sibling;else for(e=a.child;null!==e;)c|=e.lanes|e.childLanes,
+d|=e.subtreeFlags,d|=e.flags,e.return=a,e=e.sibling;a.subtreeFlags|=d;a.childLanes=c;return b}function xk(a,b,c){var d=b.pendingProps;Ve(b);switch(b.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return W(b),null;case 1:return ea(b.type)&&(v(S),v(J)),W(b),null;case 3:d=b.stateNode;Tb();v(S);v(J);jf();d.pendingContext&&(d.context=d.pendingContext,d.pendingContext=null);if(null===a||null===a.child)pd(b)?b.flags|=4:null===a||a.memoizedState.isDehydrated&&0===(b.flags&
+256)||(b.flags|=1024,null!==wa&&(Gf(wa),wa=null));xi(a,b);W(b);return null;case 5:hf(b);var e=ub(xc.current);c=b.type;if(null!==a&&null!=b.stateNode)yk(a,b,c,d,e),a.ref!==b.ref&&(b.flags|=512,b.flags|=2097152);else{if(!d){if(null===b.stateNode)throw Error(m(166));W(b);return null}a=ub(Ea.current);if(pd(b)){d=b.stateNode;c=b.type;var f=b.memoizedProps;d[Da]=b;d[uc]=f;a=0!==(b.mode&1);switch(c){case "dialog":B("cancel",d);B("close",d);break;case "iframe":case "object":case "embed":B("load",d);break;
+case "video":case "audio":for(e=0;e<Ec.length;e++)B(Ec[e],d);break;case "source":B("error",d);break;case "img":case "image":case "link":B("error",d);B("load",d);break;case "details":B("toggle",d);break;case "input":kg(d,f);B("invalid",d);break;case "select":d._wrapperState={wasMultiple:!!f.multiple};B("invalid",d);break;case "textarea":ng(d,f),B("invalid",d)}pe(c,f);e=null;for(var g in f)if(f.hasOwnProperty(g)){var h=f[g];"children"===g?"string"===typeof h?d.textContent!==h&&(!0!==f.suppressHydrationWarning&&
+jd(d.textContent,h,a),e=["children",h]):"number"===typeof h&&d.textContent!==""+h&&(!0!==f.suppressHydrationWarning&&jd(d.textContent,h,a),e=["children",""+h]):$b.hasOwnProperty(g)&&null!=h&&"onScroll"===g&&B("scroll",d)}switch(c){case "input":Pc(d);mg(d,f,!0);break;case "textarea":Pc(d);pg(d);break;case "select":case "option":break;default:"function"===typeof f.onClick&&(d.onclick=kd)}d=e;b.updateQueue=d;null!==d&&(b.flags|=4)}else{g=9===e.nodeType?e:e.ownerDocument;"http://www.w3.org/1999/xhtml"===
+a&&(a=qg(c));"http://www.w3.org/1999/xhtml"===a?"script"===c?(a=g.createElement("div"),a.innerHTML="<script>\x3c/script>",a=a.removeChild(a.firstChild)):"string"===typeof d.is?a=g.createElement(c,{is:d.is}):(a=g.createElement(c),"select"===c&&(g=a,d.multiple?g.multiple=!0:d.size&&(g.size=d.size))):a=g.createElementNS(a,c);a[Da]=b;a[uc]=d;zk(a,b,!1,!1);b.stateNode=a;a:{g=qe(c,d);switch(c){case "dialog":B("cancel",a);B("close",a);e=d;break;case "iframe":case "object":case "embed":B("load",a);e=d;break;
+case "video":case "audio":for(e=0;e<Ec.length;e++)B(Ec[e],a);e=d;break;case "source":B("error",a);e=d;break;case "img":case "image":case "link":B("error",a);B("load",a);e=d;break;case "details":B("toggle",a);e=d;break;case "input":kg(a,d);e=ke(a,d);B("invalid",a);break;case "option":e=d;break;case "select":a._wrapperState={wasMultiple:!!d.multiple};e=E({},d,{value:void 0});B("invalid",a);break;case "textarea":ng(a,d);e=ne(a,d);B("invalid",a);break;default:e=d}pe(c,e);h=e;for(f in h)if(h.hasOwnProperty(f)){var k=
+h[f];"style"===f?sg(a,k):"dangerouslySetInnerHTML"===f?(k=k?k.__html:void 0,null!=k&&yi(a,k)):"children"===f?"string"===typeof k?("textarea"!==c||""!==k)&&Fc(a,k):"number"===typeof k&&Fc(a,""+k):"suppressContentEditableWarning"!==f&&"suppressHydrationWarning"!==f&&"autoFocus"!==f&&($b.hasOwnProperty(f)?null!=k&&"onScroll"===f&&B("scroll",a):null!=k&&$d(a,f,k,g))}switch(c){case "input":Pc(a);mg(a,d,!1);break;case "textarea":Pc(a);pg(a);break;case "option":null!=d.value&&a.setAttribute("value",""+Ua(d.value));
+break;case "select":a.multiple=!!d.multiple;f=d.value;null!=f?Db(a,!!d.multiple,f,!1):null!=d.defaultValue&&Db(a,!!d.multiple,d.defaultValue,!0);break;default:"function"===typeof e.onClick&&(a.onclick=kd)}switch(c){case "button":case "input":case "select":case "textarea":d=!!d.autoFocus;break a;case "img":d=!0;break a;default:d=!1}}d&&(b.flags|=4)}null!==b.ref&&(b.flags|=512,b.flags|=2097152)}W(b);return null;case 6:if(a&&null!=b.stateNode)Ak(a,b,a.memoizedProps,d);else{if("string"!==typeof d&&null===
+b.stateNode)throw Error(m(166));c=ub(xc.current);ub(Ea.current);if(pd(b)){d=b.stateNode;c=b.memoizedProps;d[Da]=b;if(f=d.nodeValue!==c)if(a=la,null!==a)switch(a.tag){case 3:jd(d.nodeValue,c,0!==(a.mode&1));break;case 5:!0!==a.memoizedProps.suppressHydrationWarning&&jd(d.nodeValue,c,0!==(a.mode&1))}f&&(b.flags|=4)}else d=(9===c.nodeType?c:c.ownerDocument).createTextNode(d),d[Da]=b,b.stateNode=d}W(b);return null;case 13:v(F);d=b.memoizedState;if(null===a||null!==a.memoizedState&&null!==a.memoizedState.dehydrated){if(D&&
+null!==fa&&0!==(b.mode&1)&&0===(b.flags&128)){for(f=fa;f;)f=Ka(f.nextSibling);Qb();b.flags|=98560;f=!1}else if(f=pd(b),null!==d&&null!==d.dehydrated){if(null===a){if(!f)throw Error(m(318));f=b.memoizedState;f=null!==f?f.dehydrated:null;if(!f)throw Error(m(317));f[Da]=b}else Qb(),0===(b.flags&128)&&(b.memoizedState=null),b.flags|=4;W(b);f=!1}else null!==wa&&(Gf(wa),wa=null),f=!0;if(!f)return b.flags&65536?b:null}if(0!==(b.flags&128))return b.lanes=c,b;d=null!==d;d!==(null!==a&&null!==a.memoizedState)&&
+d&&(b.child.flags|=8192,0!==(b.mode&1)&&(null===a||0!==(F.current&1)?0===L&&(L=3):Ef()));null!==b.updateQueue&&(b.flags|=4);W(b);return null;case 4:return Tb(),xi(a,b),null===a&&sc(b.stateNode.containerInfo),W(b),null;case 10:return cf(b.type._context),W(b),null;case 17:return ea(b.type)&&(v(S),v(J)),W(b),null;case 19:v(F);f=b.memoizedState;if(null===f)return W(b),null;d=0!==(b.flags&128);g=f.rendering;if(null===g)if(d)Dc(f,!1);else{if(0!==L||null!==a&&0!==(a.flags&128))for(a=b.child;null!==a;){g=
+xd(a);if(null!==g){b.flags|=128;Dc(f,!1);d=g.updateQueue;null!==d&&(b.updateQueue=d,b.flags|=4);b.subtreeFlags=0;d=c;for(c=b.child;null!==c;)f=c,a=d,f.flags&=14680066,g=f.alternate,null===g?(f.childLanes=0,f.lanes=a,f.child=null,f.subtreeFlags=0,f.memoizedProps=null,f.memoizedState=null,f.updateQueue=null,f.dependencies=null,f.stateNode=null):(f.childLanes=g.childLanes,f.lanes=g.lanes,f.child=g.child,f.subtreeFlags=0,f.deletions=null,f.memoizedProps=g.memoizedProps,f.memoizedState=g.memoizedState,
+f.updateQueue=g.updateQueue,f.type=g.type,a=g.dependencies,f.dependencies=null===a?null:{lanes:a.lanes,firstContext:a.firstContext}),c=c.sibling;y(F,F.current&1|2);return b.child}a=a.sibling}null!==f.tail&&P()>Hf&&(b.flags|=128,d=!0,Dc(f,!1),b.lanes=4194304)}else{if(!d)if(a=xd(g),null!==a){if(b.flags|=128,d=!0,c=a.updateQueue,null!==c&&(b.updateQueue=c,b.flags|=4),Dc(f,!0),null===f.tail&&"hidden"===f.tailMode&&!g.alternate&&!D)return W(b),null}else 2*P()-f.renderingStartTime>Hf&&1073741824!==c&&(b.flags|=
+128,d=!0,Dc(f,!1),b.lanes=4194304);f.isBackwards?(g.sibling=b.child,b.child=g):(c=f.last,null!==c?c.sibling=g:b.child=g,f.last=g)}if(null!==f.tail)return b=f.tail,f.rendering=b,f.tail=b.sibling,f.renderingStartTime=P(),b.sibling=null,c=F.current,y(F,d?c&1|2:c&1),b;W(b);return null;case 22:case 23:return ba=Ga.current,v(Ga),d=null!==b.memoizedState,null!==a&&null!==a.memoizedState!==d&&(b.flags|=8192),d&&0!==(b.mode&1)?0!==(ba&1073741824)&&(W(b),b.subtreeFlags&6&&(b.flags|=8192)):W(b),null;case 24:return null;
+case 25:return null}throw Error(m(156,b.tag));}function Bk(a,b,c){Ve(b);switch(b.tag){case 1:return ea(b.type)&&(v(S),v(J)),a=b.flags,a&65536?(b.flags=a&-65537|128,b):null;case 3:return Tb(),v(S),v(J),jf(),a=b.flags,0!==(a&65536)&&0===(a&128)?(b.flags=a&-65537|128,b):null;case 5:return hf(b),null;case 13:v(F);a=b.memoizedState;if(null!==a&&null!==a.dehydrated){if(null===b.alternate)throw Error(m(340));Qb()}a=b.flags;return a&65536?(b.flags=a&-65537|128,b):null;case 19:return v(F),null;case 4:return Tb(),
+null;case 10:return cf(b.type._context),null;case 22:case 23:return ba=Ga.current,v(Ga),null;case 24:return null;default:return null}}function Wb(a,b){var c=a.ref;if(null!==c)if("function"===typeof c)try{c(null)}catch(d){G(a,b,d)}else c.current=null}function If(a,b,c){try{c()}catch(d){G(a,b,d)}}function Ck(a,b){Jf=Zc;a=ch();if(Ie(a)){if("selectionStart"in a)var c={start:a.selectionStart,end:a.selectionEnd};else a:{c=(c=a.ownerDocument)&&c.defaultView||window;var d=c.getSelection&&c.getSelection();
+if(d&&0!==d.rangeCount){c=d.anchorNode;var e=d.anchorOffset,f=d.focusNode;d=d.focusOffset;try{c.nodeType,f.nodeType}catch(M){c=null;break a}var g=0,h=-1,k=-1,n=0,q=0,u=a,r=null;b:for(;;){for(var p;;){u!==c||0!==e&&3!==u.nodeType||(h=g+e);u!==f||0!==d&&3!==u.nodeType||(k=g+d);3===u.nodeType&&(g+=u.nodeValue.length);if(null===(p=u.firstChild))break;r=u;u=p}for(;;){if(u===a)break b;r===c&&++n===e&&(h=g);r===f&&++q===d&&(k=g);if(null!==(p=u.nextSibling))break;u=r;r=u.parentNode}u=p}c=-1===h||-1===k?null:
+{start:h,end:k}}else c=null}c=c||{start:0,end:0}}else c=null;Kf={focusedElem:a,selectionRange:c};Zc=!1;for(l=b;null!==l;)if(b=l,a=b.child,0!==(b.subtreeFlags&1028)&&null!==a)a.return=b,l=a;else for(;null!==l;){b=l;try{var x=b.alternate;if(0!==(b.flags&1024))switch(b.tag){case 0:case 11:case 15:break;case 1:if(null!==x){var v=x.memoizedProps,z=x.memoizedState,w=b.stateNode,A=w.getSnapshotBeforeUpdate(b.elementType===b.type?v:ya(b.type,v),z);w.__reactInternalSnapshotBeforeUpdate=A}break;case 3:var t=
+b.stateNode.containerInfo;1===t.nodeType?t.textContent="":9===t.nodeType&&t.documentElement&&t.removeChild(t.documentElement);break;case 5:case 6:case 4:case 17:break;default:throw Error(m(163));}}catch(M){G(b,b.return,M)}a=b.sibling;if(null!==a){a.return=b.return;l=a;break}l=b.return}x=zi;zi=!1;return x}function Gc(a,b,c){var d=b.updateQueue;d=null!==d?d.lastEffect:null;if(null!==d){var e=d=d.next;do{if((e.tag&a)===a){var f=e.destroy;e.destroy=void 0;void 0!==f&&If(b,c,f)}e=e.next}while(e!==d)}}
+function Id(a,b){b=b.updateQueue;b=null!==b?b.lastEffect:null;if(null!==b){var c=b=b.next;do{if((c.tag&a)===a){var d=c.create;c.destroy=d()}c=c.next}while(c!==b)}}function Lf(a){var b=a.ref;if(null!==b){var c=a.stateNode;switch(a.tag){case 5:a=c;break;default:a=c}"function"===typeof b?b(a):b.current=a}}function Ai(a){var b=a.alternate;null!==b&&(a.alternate=null,Ai(b));a.child=null;a.deletions=null;a.sibling=null;5===a.tag&&(b=a.stateNode,null!==b&&(delete b[Da],delete b[uc],delete b[Me],delete b[Dk],
+delete b[Ek]));a.stateNode=null;a.return=null;a.dependencies=null;a.memoizedProps=null;a.memoizedState=null;a.pendingProps=null;a.stateNode=null;a.updateQueue=null}function Bi(a){return 5===a.tag||3===a.tag||4===a.tag}function Ci(a){a:for(;;){for(;null===a.sibling;){if(null===a.return||Bi(a.return))return null;a=a.return}a.sibling.return=a.return;for(a=a.sibling;5!==a.tag&&6!==a.tag&&18!==a.tag;){if(a.flags&2)continue a;if(null===a.child||4===a.tag)continue a;else a.child.return=a,a=a.child}if(!(a.flags&
+2))return a.stateNode}}function Mf(a,b,c){var d=a.tag;if(5===d||6===d)a=a.stateNode,b?8===c.nodeType?c.parentNode.insertBefore(a,b):c.insertBefore(a,b):(8===c.nodeType?(b=c.parentNode,b.insertBefore(a,c)):(b=c,b.appendChild(a)),c=c._reactRootContainer,null!==c&&void 0!==c||null!==b.onclick||(b.onclick=kd));else if(4!==d&&(a=a.child,null!==a))for(Mf(a,b,c),a=a.sibling;null!==a;)Mf(a,b,c),a=a.sibling}function Nf(a,b,c){var d=a.tag;if(5===d||6===d)a=a.stateNode,b?c.insertBefore(a,b):c.appendChild(a);
+else if(4!==d&&(a=a.child,null!==a))for(Nf(a,b,c),a=a.sibling;null!==a;)Nf(a,b,c),a=a.sibling}function jb(a,b,c){for(c=c.child;null!==c;)Di(a,b,c),c=c.sibling}function Di(a,b,c){if(Ca&&"function"===typeof Ca.onCommitFiberUnmount)try{Ca.onCommitFiberUnmount(Uc,c)}catch(h){}switch(c.tag){case 5:X||Wb(c,b);case 6:var d=T,e=za;T=null;jb(a,b,c);T=d;za=e;null!==T&&(za?(a=T,c=c.stateNode,8===a.nodeType?a.parentNode.removeChild(c):a.removeChild(c)):T.removeChild(c.stateNode));break;case 18:null!==T&&(za?
+(a=T,c=c.stateNode,8===a.nodeType?Re(a.parentNode,c):1===a.nodeType&&Re(a,c),nc(a)):Re(T,c.stateNode));break;case 4:d=T;e=za;T=c.stateNode.containerInfo;za=!0;jb(a,b,c);T=d;za=e;break;case 0:case 11:case 14:case 15:if(!X&&(d=c.updateQueue,null!==d&&(d=d.lastEffect,null!==d))){e=d=d.next;do{var f=e,g=f.destroy;f=f.tag;void 0!==g&&(0!==(f&2)?If(c,b,g):0!==(f&4)&&If(c,b,g));e=e.next}while(e!==d)}jb(a,b,c);break;case 1:if(!X&&(Wb(c,b),d=c.stateNode,"function"===typeof d.componentWillUnmount))try{d.props=
+c.memoizedProps,d.state=c.memoizedState,d.componentWillUnmount()}catch(h){G(c,b,h)}jb(a,b,c);break;case 21:jb(a,b,c);break;case 22:c.mode&1?(X=(d=X)||null!==c.memoizedState,jb(a,b,c),X=d):jb(a,b,c);break;default:jb(a,b,c)}}function Ei(a){var b=a.updateQueue;if(null!==b){a.updateQueue=null;var c=a.stateNode;null===c&&(c=a.stateNode=new Fk);b.forEach(function(b){var d=Gk.bind(null,a,b);c.has(b)||(c.add(b),b.then(d,d))})}}function Aa(a,b,c){c=b.deletions;if(null!==c)for(var d=0;d<c.length;d++){var e=
+c[d];try{var f=a,g=b,h=g;a:for(;null!==h;){switch(h.tag){case 5:T=h.stateNode;za=!1;break a;case 3:T=h.stateNode.containerInfo;za=!0;break a;case 4:T=h.stateNode.containerInfo;za=!0;break a}h=h.return}if(null===T)throw Error(m(160));Di(f,g,e);T=null;za=!1;var k=e.alternate;null!==k&&(k.return=null);e.return=null}catch(n){G(e,b,n)}}if(b.subtreeFlags&12854)for(b=b.child;null!==b;)Fi(b,a),b=b.sibling}function Fi(a,b,c){var d=a.alternate;c=a.flags;switch(a.tag){case 0:case 11:case 14:case 15:Aa(b,a);
+Ha(a);if(c&4){try{Gc(3,a,a.return),Id(3,a)}catch(I){G(a,a.return,I)}try{Gc(5,a,a.return)}catch(I){G(a,a.return,I)}}break;case 1:Aa(b,a);Ha(a);c&512&&null!==d&&Wb(d,d.return);break;case 5:Aa(b,a);Ha(a);c&512&&null!==d&&Wb(d,d.return);if(a.flags&32){var e=a.stateNode;try{Fc(e,"")}catch(I){G(a,a.return,I)}}if(c&4&&(e=a.stateNode,null!=e)){var f=a.memoizedProps,g=null!==d?d.memoizedProps:f,h=a.type,k=a.updateQueue;a.updateQueue=null;if(null!==k)try{"input"===h&&"radio"===f.type&&null!=f.name&&lg(e,f);
+qe(h,g);var n=qe(h,f);for(g=0;g<k.length;g+=2){var q=k[g],u=k[g+1];"style"===q?sg(e,u):"dangerouslySetInnerHTML"===q?yi(e,u):"children"===q?Fc(e,u):$d(e,q,u,n)}switch(h){case "input":le(e,f);break;case "textarea":og(e,f);break;case "select":var r=e._wrapperState.wasMultiple;e._wrapperState.wasMultiple=!!f.multiple;var p=f.value;null!=p?Db(e,!!f.multiple,p,!1):r!==!!f.multiple&&(null!=f.defaultValue?Db(e,!!f.multiple,f.defaultValue,!0):Db(e,!!f.multiple,f.multiple?[]:"",!1))}e[uc]=f}catch(I){G(a,a.return,
+I)}}break;case 6:Aa(b,a);Ha(a);if(c&4){if(null===a.stateNode)throw Error(m(162));e=a.stateNode;f=a.memoizedProps;try{e.nodeValue=f}catch(I){G(a,a.return,I)}}break;case 3:Aa(b,a);Ha(a);if(c&4&&null!==d&&d.memoizedState.isDehydrated)try{nc(b.containerInfo)}catch(I){G(a,a.return,I)}break;case 4:Aa(b,a);Ha(a);break;case 13:Aa(b,a);Ha(a);e=a.child;e.flags&8192&&(f=null!==e.memoizedState,e.stateNode.isHidden=f,!f||null!==e.alternate&&null!==e.alternate.memoizedState||(Of=P()));c&4&&Ei(a);break;case 22:q=
+null!==d&&null!==d.memoizedState;a.mode&1?(X=(n=X)||q,Aa(b,a),X=n):Aa(b,a);Ha(a);if(c&8192){n=null!==a.memoizedState;if((a.stateNode.isHidden=n)&&!q&&0!==(a.mode&1))for(l=a,q=a.child;null!==q;){for(u=l=q;null!==l;){r=l;p=r.child;switch(r.tag){case 0:case 11:case 14:case 15:Gc(4,r,r.return);break;case 1:Wb(r,r.return);var x=r.stateNode;if("function"===typeof x.componentWillUnmount){c=r;b=r.return;try{d=c,x.props=d.memoizedProps,x.state=d.memoizedState,x.componentWillUnmount()}catch(I){G(c,b,I)}}break;
+case 5:Wb(r,r.return);break;case 22:if(null!==r.memoizedState){Gi(u);continue}}null!==p?(p.return=r,l=p):Gi(u)}q=q.sibling}a:for(q=null,u=a;;){if(5===u.tag){if(null===q){q=u;try{e=u.stateNode,n?(f=e.style,"function"===typeof f.setProperty?f.setProperty("display","none","important"):f.display="none"):(h=u.stateNode,k=u.memoizedProps.style,g=void 0!==k&&null!==k&&k.hasOwnProperty("display")?k.display:null,h.style.display=rg("display",g))}catch(I){G(a,a.return,I)}}}else if(6===u.tag){if(null===q)try{u.stateNode.nodeValue=
+n?"":u.memoizedProps}catch(I){G(a,a.return,I)}}else if((22!==u.tag&&23!==u.tag||null===u.memoizedState||u===a)&&null!==u.child){u.child.return=u;u=u.child;continue}if(u===a)break a;for(;null===u.sibling;){if(null===u.return||u.return===a)break a;q===u&&(q=null);u=u.return}q===u&&(q=null);u.sibling.return=u.return;u=u.sibling}}break;case 19:Aa(b,a);Ha(a);c&4&&Ei(a);break;case 21:break;default:Aa(b,a),Ha(a)}}function Ha(a){var b=a.flags;if(b&2){try{a:{for(var c=a.return;null!==c;){if(Bi(c)){var d=c;
+break a}c=c.return}throw Error(m(160));}switch(d.tag){case 5:var e=d.stateNode;d.flags&32&&(Fc(e,""),d.flags&=-33);var f=Ci(a);Nf(a,f,e);break;case 3:case 4:var g=d.stateNode.containerInfo,h=Ci(a);Mf(a,h,g);break;default:throw Error(m(161));}}catch(k){G(a,a.return,k)}a.flags&=-3}b&4096&&(a.flags&=-4097)}function Hk(a,b,c){l=a;Hi(a,b,c)}function Hi(a,b,c){for(var d=0!==(a.mode&1);null!==l;){var e=l,f=e.child;if(22===e.tag&&d){var g=null!==e.memoizedState||Jd;if(!g){var h=e.alternate,k=null!==h&&null!==
+h.memoizedState||X;h=Jd;var n=X;Jd=g;if((X=k)&&!n)for(l=e;null!==l;)g=l,k=g.child,22===g.tag&&null!==g.memoizedState?Ii(e):null!==k?(k.return=g,l=k):Ii(e);for(;null!==f;)l=f,Hi(f,b,c),f=f.sibling;l=e;Jd=h;X=n}Ji(a,b,c)}else 0!==(e.subtreeFlags&8772)&&null!==f?(f.return=e,l=f):Ji(a,b,c)}}function Ji(a,b,c){for(;null!==l;){b=l;if(0!==(b.flags&8772)){c=b.alternate;try{if(0!==(b.flags&8772))switch(b.tag){case 0:case 11:case 15:X||Id(5,b);break;case 1:var d=b.stateNode;if(b.flags&4&&!X)if(null===c)d.componentDidMount();
+else{var e=b.elementType===b.type?c.memoizedProps:ya(b.type,c.memoizedProps);d.componentDidUpdate(e,c.memoizedState,d.__reactInternalSnapshotBeforeUpdate)}var f=b.updateQueue;null!==f&&Hh(b,f,d);break;case 3:var g=b.updateQueue;if(null!==g){c=null;if(null!==b.child)switch(b.child.tag){case 5:c=b.child.stateNode;break;case 1:c=b.child.stateNode}Hh(b,g,c)}break;case 5:var h=b.stateNode;if(null===c&&b.flags&4){c=h;var k=b.memoizedProps;switch(b.type){case "button":case "input":case "select":case "textarea":k.autoFocus&&
+c.focus();break;case "img":k.src&&(c.src=k.src)}}break;case 6:break;case 4:break;case 12:break;case 13:if(null===b.memoizedState){var n=b.alternate;if(null!==n){var q=n.memoizedState;if(null!==q){var p=q.dehydrated;null!==p&&nc(p)}}}break;case 19:case 17:case 21:case 22:case 23:case 25:break;default:throw Error(m(163));}X||b.flags&512&&Lf(b)}catch(r){G(b,b.return,r)}}if(b===a){l=null;break}c=b.sibling;if(null!==c){c.return=b.return;l=c;break}l=b.return}}function Gi(a){for(;null!==l;){var b=l;if(b===
+a){l=null;break}var c=b.sibling;if(null!==c){c.return=b.return;l=c;break}l=b.return}}function Ii(a){for(;null!==l;){var b=l;try{switch(b.tag){case 0:case 11:case 15:var c=b.return;try{Id(4,b)}catch(k){G(b,c,k)}break;case 1:var d=b.stateNode;if("function"===typeof d.componentDidMount){var e=b.return;try{d.componentDidMount()}catch(k){G(b,e,k)}}var f=b.return;try{Lf(b)}catch(k){G(b,f,k)}break;case 5:var g=b.return;try{Lf(b)}catch(k){G(b,g,k)}}}catch(k){G(b,b.return,k)}if(b===a){l=null;break}var h=b.sibling;
+if(null!==h){h.return=b.return;l=h;break}l=b.return}}function Hc(){Hf=P()+500}function Z(){return 0!==(p&6)?P():-1!==Kd?Kd:Kd=P()}function hb(a){if(0===(a.mode&1))return 1;if(0!==(p&2)&&0!==U)return U&-U;if(null!==Ik.transition)return 0===Ld&&(Ld=Dg()),Ld;a=z;if(0!==a)return a;a=window.event;a=void 0===a?16:Lg(a.type);return a}function xa(a,b,c,d){if(50<Ic)throw Ic=0,Pf=null,Error(m(185));ic(a,c,d);if(0===(p&2)||a!==O)a===O&&(0===(p&2)&&(Md|=c),4===L&&kb(a,U)),ia(a,d),1===c&&0===p&&0===(b.mode&1)&&
+(Hc(),md&&db())}function ia(a,b){var c=a.callbackNode;tj(a,b);var d=Vc(a,a===O?U:0);if(0===d)null!==c&&Ki(c),a.callbackNode=null,a.callbackPriority=0;else if(b=d&-d,a.callbackPriority!==b){null!=c&&Ki(c);if(1===b)0===a.tag?jk(Li.bind(null,a)):wh(Li.bind(null,a)),Jk(function(){0===(p&6)&&db()}),c=null;else{switch(Eg(d)){case 1:c=De;break;case 4:c=Mg;break;case 16:c=ad;break;case 536870912:c=Ng;break;default:c=ad}c=Mi(c,Ni.bind(null,a))}a.callbackPriority=b;a.callbackNode=c}}function Ni(a,b){Kd=-1;
+Ld=0;if(0!==(p&6))throw Error(m(327));var c=a.callbackNode;if(Xb()&&a.callbackNode!==c)return null;var d=Vc(a,a===O?U:0);if(0===d)return null;if(0!==(d&30)||0!==(d&a.expiredLanes)||b)b=Nd(a,d);else{b=d;var e=p;p|=2;var f=Oi();if(O!==a||U!==b)Ra=null,Hc(),wb(a,b);do try{Kk();break}catch(h){Pi(a,h)}while(1);af();Od.current=f;p=e;null!==H?b=0:(O=null,U=0,b=L)}if(0!==b){2===b&&(e=ve(a),0!==e&&(d=e,b=Qf(a,e)));if(1===b)throw c=Jc,wb(a,0),kb(a,d),ia(a,P()),c;if(6===b)kb(a,d);else{e=a.current.alternate;
+if(0===(d&30)&&!Lk(e)&&(b=Nd(a,d),2===b&&(f=ve(a),0!==f&&(d=f,b=Qf(a,f))),1===b))throw c=Jc,wb(a,0),kb(a,d),ia(a,P()),c;a.finishedWork=e;a.finishedLanes=d;switch(b){case 0:case 1:throw Error(m(345));case 2:xb(a,ja,Ra);break;case 3:kb(a,d);if((d&130023424)===d&&(b=Of+500-P(),10<b)){if(0!==Vc(a,0))break;e=a.suspendedLanes;if((e&d)!==d){Z();a.pingedLanes|=a.suspendedLanes&e;break}a.timeoutHandle=Rf(xb.bind(null,a,ja,Ra),b);break}xb(a,ja,Ra);break;case 4:kb(a,d);if((d&4194240)===d)break;b=a.eventTimes;
+for(e=-1;0<d;){var g=31-ta(d);f=1<<g;g=b[g];g>e&&(e=g);d&=~f}d=e;d=P()-d;d=(120>d?120:480>d?480:1080>d?1080:1920>d?1920:3E3>d?3E3:4320>d?4320:1960*Mk(d/1960))-d;if(10<d){a.timeoutHandle=Rf(xb.bind(null,a,ja,Ra),d);break}xb(a,ja,Ra);break;case 5:xb(a,ja,Ra);break;default:throw Error(m(329));}}}ia(a,P());return a.callbackNode===c?Ni.bind(null,a):null}function Qf(a,b){var c=Kc;a.current.memoizedState.isDehydrated&&(wb(a,b).flags|=256);a=Nd(a,b);2!==a&&(b=ja,ja=c,null!==b&&Gf(b));return a}function Gf(a){null===
+ja?ja=a:ja.push.apply(ja,a)}function Lk(a){for(var b=a;;){if(b.flags&16384){var c=b.updateQueue;if(null!==c&&(c=c.stores,null!==c))for(var d=0;d<c.length;d++){var e=c[d],f=e.getSnapshot;e=e.value;try{if(!ua(f(),e))return!1}catch(g){return!1}}}c=b.child;if(b.subtreeFlags&16384&&null!==c)c.return=b,b=c;else{if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return!0;b=b.return}b.sibling.return=b.return;b=b.sibling}}return!0}function kb(a,b){b&=~Sf;b&=~Md;a.suspendedLanes|=b;a.pingedLanes&=
+~b;for(a=a.expirationTimes;0<b;){var c=31-ta(b),d=1<<c;a[c]=-1;b&=~d}}function Li(a){if(0!==(p&6))throw Error(m(327));Xb();var b=Vc(a,0);if(0===(b&1))return ia(a,P()),null;var c=Nd(a,b);if(0!==a.tag&&2===c){var d=ve(a);0!==d&&(b=d,c=Qf(a,d))}if(1===c)throw c=Jc,wb(a,0),kb(a,b),ia(a,P()),c;if(6===c)throw Error(m(345));a.finishedWork=a.current.alternate;a.finishedLanes=b;xb(a,ja,Ra);ia(a,P());return null}function Tf(a,b){var c=p;p|=1;try{return a(b)}finally{p=c,0===p&&(Hc(),md&&db())}}function yb(a){null!==
+lb&&0===lb.tag&&0===(p&6)&&Xb();var b=p;p|=1;var c=ca.transition,d=z;try{if(ca.transition=null,z=1,a)return a()}finally{z=d,ca.transition=c,p=b,0===(p&6)&&db()}}function wb(a,b){a.finishedWork=null;a.finishedLanes=0;var c=a.timeoutHandle;-1!==c&&(a.timeoutHandle=-1,Nk(c));if(null!==H)for(c=H.return;null!==c;){var d=c;Ve(d);switch(d.tag){case 1:d=d.type.childContextTypes;null!==d&&void 0!==d&&(v(S),v(J));break;case 3:Tb();v(S);v(J);jf();break;case 5:hf(d);break;case 4:Tb();break;case 13:v(F);break;
+case 19:v(F);break;case 10:cf(d.type._context);break;case 22:case 23:ba=Ga.current,v(Ga)}c=c.return}O=a;H=a=eb(a.current,null);U=ba=b;L=0;Jc=null;Sf=Md=ra=0;ja=Kc=null;if(null!==tb){for(b=0;b<tb.length;b++)if(c=tb[b],d=c.interleaved,null!==d){c.interleaved=null;var e=d.next,f=c.pending;if(null!==f){var g=f.next;f.next=e;d.next=g}c.pending=d}tb=null}return a}function Pi(a,b){do{var c=H;try{af();yd.current=zd;if(Ad){for(var d=C.memoizedState;null!==d;){var e=d.queue;null!==e&&(e.pending=null);d=d.next}Ad=
+!1}vb=0;N=K=C=null;zc=!1;Ac=0;Uf.current=null;if(null===c||null===c.return){L=1;Jc=b;H=null;break}a:{var f=a,g=c.return,h=c,k=b;b=U;h.flags|=32768;if(null!==k&&"object"===typeof k&&"function"===typeof k.then){var n=k,l=h,p=l.tag;if(0===(l.mode&1)&&(0===p||11===p||15===p)){var r=l.alternate;r?(l.updateQueue=r.updateQueue,l.memoizedState=r.memoizedState,l.lanes=r.lanes):(l.updateQueue=null,l.memoizedState=null)}var v=ji(g);if(null!==v){v.flags&=-257;ki(v,g,h,f,b);v.mode&1&&ii(f,n,b);b=v;k=n;var x=b.updateQueue;
+if(null===x){var z=new Set;z.add(k);b.updateQueue=z}else x.add(k);break a}else{if(0===(b&1)){ii(f,n,b);Ef();break a}k=Error(m(426))}}else if(D&&h.mode&1){var y=ji(g);if(null!==y){0===(y.flags&65536)&&(y.flags|=256);ki(y,g,h,f,b);Ye(Ub(k,h));break a}}f=k=Ub(k,h);4!==L&&(L=2);null===Kc?Kc=[f]:Kc.push(f);f=g;do{switch(f.tag){case 3:f.flags|=65536;b&=-b;f.lanes|=b;var w=gi(f,k,b);Gh(f,w);break a;case 1:h=k;var A=f.type,t=f.stateNode;if(0===(f.flags&128)&&("function"===typeof A.getDerivedStateFromError||
+null!==t&&"function"===typeof t.componentDidCatch&&(null===ib||!ib.has(t)))){f.flags|=65536;b&=-b;f.lanes|=b;var B=hi(f,h,b);Gh(f,B);break a}}f=f.return}while(null!==f)}Qi(c)}catch(ma){b=ma;H===c&&null!==c&&(H=c=c.return);continue}break}while(1)}function Oi(){var a=Od.current;Od.current=zd;return null===a?zd:a}function Ef(){if(0===L||3===L||2===L)L=4;null===O||0===(ra&268435455)&&0===(Md&268435455)||kb(O,U)}function Nd(a,b){var c=p;p|=2;var d=Oi();if(O!==a||U!==b)Ra=null,wb(a,b);do try{Ok();break}catch(e){Pi(a,
+e)}while(1);af();p=c;Od.current=d;if(null!==H)throw Error(m(261));O=null;U=0;return L}function Ok(){for(;null!==H;)Ri(H)}function Kk(){for(;null!==H&&!Pk();)Ri(H)}function Ri(a){var b=Qk(a.alternate,a,ba);a.memoizedProps=a.pendingProps;null===b?Qi(a):H=b;Uf.current=null}function Qi(a){var b=a;do{var c=b.alternate;a=b.return;if(0===(b.flags&32768)){if(c=xk(c,b,ba),null!==c){H=c;return}}else{c=Bk(c,b);if(null!==c){c.flags&=32767;H=c;return}if(null!==a)a.flags|=32768,a.subtreeFlags=0,a.deletions=null;
+else{L=6;H=null;return}}b=b.sibling;if(null!==b){H=b;return}H=b=a}while(null!==b);0===L&&(L=5)}function xb(a,b,c){var d=z,e=ca.transition;try{ca.transition=null,z=1,Rk(a,b,c,d)}finally{ca.transition=e,z=d}return null}function Rk(a,b,c,d){do Xb();while(null!==lb);if(0!==(p&6))throw Error(m(327));c=a.finishedWork;var e=a.finishedLanes;if(null===c)return null;a.finishedWork=null;a.finishedLanes=0;if(c===a.current)throw Error(m(177));a.callbackNode=null;a.callbackPriority=0;var f=c.lanes|c.childLanes;
+uj(a,f);a===O&&(H=O=null,U=0);0===(c.subtreeFlags&2064)&&0===(c.flags&2064)||Pd||(Pd=!0,Mi(ad,function(){Xb();return null}));f=0!==(c.flags&15990);if(0!==(c.subtreeFlags&15990)||f){f=ca.transition;ca.transition=null;var g=z;z=1;var h=p;p|=4;Uf.current=null;Ck(a,c);Fi(c,a);Tj(Kf);Zc=!!Jf;Kf=Jf=null;a.current=c;Hk(c,a,e);Sk();p=h;z=g;ca.transition=f}else a.current=c;Pd&&(Pd=!1,lb=a,Qd=e);f=a.pendingLanes;0===f&&(ib=null);oj(c.stateNode,d);ia(a,P());if(null!==b)for(d=a.onRecoverableError,c=0;c<b.length;c++)e=
+b[c],d(e.value,{componentStack:e.stack,digest:e.digest});if(Ed)throw Ed=!1,a=xf,xf=null,a;0!==(Qd&1)&&0!==a.tag&&Xb();f=a.pendingLanes;0!==(f&1)?a===Pf?Ic++:(Ic=0,Pf=a):Ic=0;db();return null}function Xb(){if(null!==lb){var a=Eg(Qd),b=ca.transition,c=z;try{ca.transition=null;z=16>a?16:a;if(null===lb)var d=!1;else{a=lb;lb=null;Qd=0;if(0!==(p&6))throw Error(m(331));var e=p;p|=4;for(l=a.current;null!==l;){var f=l,g=f.child;if(0!==(l.flags&16)){var h=f.deletions;if(null!==h){for(var k=0;k<h.length;k++){var n=
+h[k];for(l=n;null!==l;){var q=l;switch(q.tag){case 0:case 11:case 15:Gc(8,q,f)}var u=q.child;if(null!==u)u.return=q,l=u;else for(;null!==l;){q=l;var r=q.sibling,v=q.return;Ai(q);if(q===n){l=null;break}if(null!==r){r.return=v;l=r;break}l=v}}}var x=f.alternate;if(null!==x){var y=x.child;if(null!==y){x.child=null;do{var C=y.sibling;y.sibling=null;y=C}while(null!==y)}}l=f}}if(0!==(f.subtreeFlags&2064)&&null!==g)g.return=f,l=g;else b:for(;null!==l;){f=l;if(0!==(f.flags&2048))switch(f.tag){case 0:case 11:case 15:Gc(9,
+f,f.return)}var w=f.sibling;if(null!==w){w.return=f.return;l=w;break b}l=f.return}}var A=a.current;for(l=A;null!==l;){g=l;var t=g.child;if(0!==(g.subtreeFlags&2064)&&null!==t)t.return=g,l=t;else b:for(g=A;null!==l;){h=l;if(0!==(h.flags&2048))try{switch(h.tag){case 0:case 11:case 15:Id(9,h)}}catch(ma){G(h,h.return,ma)}if(h===g){l=null;break b}var B=h.sibling;if(null!==B){B.return=h.return;l=B;break b}l=h.return}}p=e;db();if(Ca&&"function"===typeof Ca.onPostCommitFiberRoot)try{Ca.onPostCommitFiberRoot(Uc,
+a)}catch(ma){}d=!0}return d}finally{z=c,ca.transition=b}}return!1}function Si(a,b,c){b=Ub(c,b);b=gi(a,b,1);a=fb(a,b,1);b=Z();null!==a&&(ic(a,1,b),ia(a,b))}function G(a,b,c){if(3===a.tag)Si(a,a,c);else for(;null!==b;){if(3===b.tag){Si(b,a,c);break}else if(1===b.tag){var d=b.stateNode;if("function"===typeof b.type.getDerivedStateFromError||"function"===typeof d.componentDidCatch&&(null===ib||!ib.has(d))){a=Ub(c,a);a=hi(b,a,1);b=fb(b,a,1);a=Z();null!==b&&(ic(b,1,a),ia(b,a));break}}b=b.return}}function sk(a,
+b,c){var d=a.pingCache;null!==d&&d.delete(b);b=Z();a.pingedLanes|=a.suspendedLanes&c;O===a&&(U&c)===c&&(4===L||3===L&&(U&130023424)===U&&500>P()-Of?wb(a,0):Sf|=c);ia(a,b)}function Ti(a,b){0===b&&(0===(a.mode&1)?b=1:(b=Rd,Rd<<=1,0===(Rd&130023424)&&(Rd=4194304)));var c=Z();a=Oa(a,b);null!==a&&(ic(a,b,c),ia(a,c))}function vk(a){var b=a.memoizedState,c=0;null!==b&&(c=b.retryLane);Ti(a,c)}function Gk(a,b){var c=0;switch(a.tag){case 13:var d=a.stateNode;var e=a.memoizedState;null!==e&&(c=e.retryLane);
+break;case 19:d=a.stateNode;break;default:throw Error(m(314));}null!==d&&d.delete(b);Ti(a,c)}function Mi(a,b){return xh(a,b)}function Tk(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null;this.index=0;this.ref=null;this.pendingProps=b;this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.subtreeFlags=this.flags=0;this.deletions=null;this.childLanes=this.lanes=0;this.alternate=null}function yf(a){a=
+a.prototype;return!(!a||!a.isReactComponent)}function Uk(a){if("function"===typeof a)return yf(a)?1:0;if(void 0!==a&&null!==a){a=a.$$typeof;if(a===ie)return 11;if(a===je)return 14}return 2}function eb(a,b){var c=a.alternate;null===c?(c=pa(a.tag,b,a.key,a.mode),c.elementType=a.elementType,c.type=a.type,c.stateNode=a.stateNode,c.alternate=a,a.alternate=c):(c.pendingProps=b,c.type=a.type,c.flags=0,c.subtreeFlags=0,c.deletions=null);c.flags=a.flags&14680064;c.childLanes=a.childLanes;c.lanes=a.lanes;c.child=
+a.child;c.memoizedProps=a.memoizedProps;c.memoizedState=a.memoizedState;c.updateQueue=a.updateQueue;b=a.dependencies;c.dependencies=null===b?null:{lanes:b.lanes,firstContext:b.firstContext};c.sibling=a.sibling;c.index=a.index;c.ref=a.ref;return c}function rd(a,b,c,d,e,f){var g=2;d=a;if("function"===typeof a)yf(a)&&(g=1);else if("string"===typeof a)g=5;else a:switch(a){case Bb:return sb(c.children,e,f,b);case fe:g=8;e|=8;break;case ee:return a=pa(12,c,b,e|2),a.elementType=ee,a.lanes=f,a;case ge:return a=
+pa(13,c,b,e),a.elementType=ge,a.lanes=f,a;case he:return a=pa(19,c,b,e),a.elementType=he,a.lanes=f,a;case Ui:return Gd(c,e,f,b);default:if("object"===typeof a&&null!==a)switch(a.$$typeof){case hg:g=10;break a;case gg:g=9;break a;case ie:g=11;break a;case je:g=14;break a;case Ta:g=16;d=null;break a}throw Error(m(130,null==a?a:typeof a,""));}b=pa(g,c,b,e);b.elementType=a;b.type=d;b.lanes=f;return b}function sb(a,b,c,d){a=pa(7,a,d,b);a.lanes=c;return a}function Gd(a,b,c,d){a=pa(22,a,d,b);a.elementType=
+Ui;a.lanes=c;a.stateNode={isHidden:!1};return a}function Ze(a,b,c){a=pa(6,a,null,b);a.lanes=c;return a}function $e(a,b,c){b=pa(4,null!==a.children?a.children:[],a.key,b);b.lanes=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}function Vk(a,b,c,d,e){this.tag=b;this.containerInfo=a;this.finishedWork=this.pingCache=this.current=this.pendingChildren=null;this.timeoutHandle=-1;this.callbackNode=this.pendingContext=this.context=null;this.callbackPriority=
+0;this.eventTimes=we(0);this.expirationTimes=we(-1);this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0;this.entanglements=we(0);this.identifierPrefix=d;this.onRecoverableError=e;this.mutableSourceEagerHydrationData=null}function Vf(a,b,c,d,e,f,g,h,k,l){a=new Vk(a,b,c,h,k);1===b?(b=1,!0===f&&(b|=8)):b=0;f=pa(3,null,null,b);a.current=f;f.stateNode=a;f.memoizedState={element:d,isDehydrated:c,cache:null,transitions:null,
+pendingSuspenseBoundaries:null};ff(f);return a}function Wk(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:Cb,key:null==d?null:""+d,children:a,containerInfo:b,implementation:c}}function Vi(a){if(!a)return cb;a=a._reactInternals;a:{if(nb(a)!==a||1!==a.tag)throw Error(m(170));var b=a;do{switch(b.tag){case 3:b=b.stateNode.context;break a;case 1:if(ea(b.type)){b=b.stateNode.__reactInternalMemoizedMergedChildContext;break a}}b=b.return}while(null!==b);throw Error(m(171));
+}if(1===a.tag){var c=a.type;if(ea(c))return uh(a,c,b)}return b}function Wi(a,b,c,d,e,f,g,h,k,l){a=Vf(c,d,!0,a,e,f,g,h,k);a.context=Vi(null);c=a.current;d=Z();e=hb(c);f=Pa(d,e);f.callback=void 0!==b&&null!==b?b:null;fb(c,f,e);a.current.lanes=e;ic(a,e,d);ia(a,d);return a}function Sd(a,b,c,d){var e=b.current,f=Z(),g=hb(e);c=Vi(c);null===b.context?b.context=c:b.pendingContext=c;b=Pa(f,g);b.payload={element:a};d=void 0===d?null:d;null!==d&&(b.callback=d);a=fb(e,b,g);null!==a&&(xa(a,e,g,f),vd(a,e,g));return g}
+function Td(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return a.child.stateNode;default:return a.child.stateNode}}function Xi(a,b){a=a.memoizedState;if(null!==a&&null!==a.dehydrated){var c=a.retryLane;a.retryLane=0!==c&&c<b?c:b}}function Wf(a,b){Xi(a,b);(a=a.alternate)&&Xi(a,b)}function Xk(a){a=Bg(a);return null===a?null:a.stateNode}function Yk(a){return null}function Xf(a){this._internalRoot=a}function Ud(a){this._internalRoot=a}function Yf(a){return!(!a||1!==a.nodeType&&9!==
+a.nodeType&&11!==a.nodeType)}function Vd(a){return!(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!==a.nodeType||" react-mount-point-unstable "!==a.nodeValue))}function Yi(){}function Zk(a,b,c,d,e){if(e){if("function"===typeof d){var f=d;d=function(){var a=Td(g);f.call(a)}}var g=Wi(b,d,a,0,null,!1,!1,"",Yi);a._reactRootContainer=g;a[Ja]=g.current;sc(8===a.nodeType?a.parentNode:a);yb();return g}for(;e=a.lastChild;)a.removeChild(e);if("function"===typeof d){var h=d;d=function(){var a=Td(k);
+h.call(a)}}var k=Vf(a,0,!1,null,null,!1,!1,"",Yi);a._reactRootContainer=k;a[Ja]=k.current;sc(8===a.nodeType?a.parentNode:a);yb(function(){Sd(b,k,c,d)});return k}function Wd(a,b,c,d,e){var f=c._reactRootContainer;if(f){var g=f;if("function"===typeof e){var h=e;e=function(){var a=Td(g);h.call(a)}}Sd(b,g,a,e)}else g=Zk(c,b,a,e,d);return Td(g)}var cg=new Set,$b={},Ia=!("undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement),Zd=Object.prototype.hasOwnProperty,
+cj=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,eg={},dg={},R={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(a){R[a]=
+new Y(a,0,!1,a,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){var b=a[0];R[b]=new Y(b,1,!1,a[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(a){R[a]=new Y(a,2,!1,a.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){R[a]=new Y(a,2,!1,a,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){R[a]=
+new Y(a,3,!1,a.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(a){R[a]=new Y(a,3,!0,a,null,!1,!1)});["capture","download"].forEach(function(a){R[a]=new Y(a,4,!1,a,null,!1,!1)});["cols","rows","size","span"].forEach(function(a){R[a]=new Y(a,6,!1,a,null,!1,!1)});["rowSpan","start"].forEach(function(a){R[a]=new Y(a,5,!1,a.toLowerCase(),null,!1,!1)});var Zf=/[\-:]([a-z])/g,$f=function(a){return a[1].toUpperCase()};"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=
+a.replace(Zf,$f);R[b]=new Y(b,1,!1,a,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(Zf,$f);R[b]=new Y(b,1,!1,a,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(Zf,$f);R[b]=new Y(b,1,!1,a,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(a){R[a]=new Y(a,1,!1,a.toLowerCase(),null,!1,!1)});R.xlinkHref=new Y("xlinkHref",
+1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(a){R[a]=new Y(a,1,!1,a.toLowerCase(),null,!0,!0)});var Sa=zb.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,sd=Symbol.for("react.element"),Cb=Symbol.for("react.portal"),Bb=Symbol.for("react.fragment"),fe=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),hg=Symbol.for("react.provider"),gg=Symbol.for("react.context"),ie=Symbol.for("react.forward_ref"),ge=Symbol.for("react.suspense"),
+he=Symbol.for("react.suspense_list"),je=Symbol.for("react.memo"),Ta=Symbol.for("react.lazy");Symbol.for("react.scope");Symbol.for("react.debug_trace_mode");var Ui=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden");Symbol.for("react.cache");Symbol.for("react.tracing_marker");var fg=Symbol.iterator,E=Object.assign,ae,ce=!1,cc=Array.isArray,Xd,yi=function(a){return"undefined"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,
+c,d,e)})}:a}(function(a,b){if("http://www.w3.org/2000/svg"!==a.namespaceURI||"innerHTML"in a)a.innerHTML=b;else{Xd=Xd||document.createElement("div");Xd.innerHTML="<svg>"+b.valueOf().toString()+"</svg>";for(b=Xd.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}}),Fc=function(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b},dc={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,
+borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,
+strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},$k=["Webkit","ms","Moz","O"];Object.keys(dc).forEach(function(a){$k.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);dc[b]=dc[a]})});var ij=E({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}),ze=null,se=null,Eb=null,Fb=null,xg=function(a,b){return a(b)},yg=function(){},te=!1,Oe=!1;if(Ia)try{var Lc={};Object.defineProperty(Lc,
+"passive",{get:function(){Oe=!0}});window.addEventListener("test",Lc,Lc);window.removeEventListener("test",Lc,Lc)}catch(a){Oe=!1}var kj=function(a,b,c,d,e,f,g,h,k){var l=Array.prototype.slice.call(arguments,3);try{b.apply(c,l)}catch(q){this.onError(q)}},gc=!1,Sc=null,Tc=!1,ue=null,lj={onError:function(a){gc=!0;Sc=a}},Ba=zb.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler,Jg=Ba.unstable_scheduleCallback,Kg=Ba.unstable_NormalPriority,xh=Jg,Ki=Ba.unstable_cancelCallback,Pk=Ba.unstable_shouldYield,
+Sk=Ba.unstable_requestPaint,P=Ba.unstable_now,Dj=Ba.unstable_getCurrentPriorityLevel,De=Ba.unstable_ImmediatePriority,Mg=Ba.unstable_UserBlockingPriority,ad=Kg,Ej=Ba.unstable_LowPriority,Ng=Ba.unstable_IdlePriority,Uc=null,Ca=null,ta=Math.clz32?Math.clz32:pj,qj=Math.log,rj=Math.LN2,Wc=64,Rd=4194304,z=0,Ae=!1,Yc=[],Va=null,Wa=null,Xa=null,jc=new Map,kc=new Map,Ya=[],Bj="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" "),
+Gb=Sa.ReactCurrentBatchConfig,Zc=!0,$c=null,Za=null,Ee=null,bd=null,Yb={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(a){return a.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},He=ka(Yb),Mc=E({},Yb,{view:0,detail:0}),ak=ka(Mc),ag,bg,Nc,Yd=E({},Mc,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:Fe,button:0,buttons:0,relatedTarget:function(a){return void 0===a.relatedTarget?a.fromElement===a.srcElement?a.toElement:a.fromElement:
+a.relatedTarget},movementX:function(a){if("movementX"in a)return a.movementX;a!==Nc&&(Nc&&"mousemove"===a.type?(ag=a.screenX-Nc.screenX,bg=a.screenY-Nc.screenY):bg=ag=0,Nc=a);return ag},movementY:function(a){return"movementY"in a?a.movementY:bg}}),ih=ka(Yd),al=E({},Yd,{dataTransfer:0}),Wj=ka(al),bl=E({},Mc,{relatedTarget:0}),Pe=ka(bl),cl=E({},Yb,{animationName:0,elapsedTime:0,pseudoElement:0}),Yj=ka(cl),dl=E({},Yb,{clipboardData:function(a){return"clipboardData"in a?a.clipboardData:window.clipboardData}}),
+ck=ka(dl),el=E({},Yb,{data:0}),qh=ka(el),fk=qh,fl={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},gl={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",
+112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Gj={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"},hl=E({},Mc,{key:function(a){if(a.key){var b=fl[a.key]||a.key;if("Unidentified"!==b)return b}return"keypress"===a.type?(a=cd(a),13===a?"Enter":String.fromCharCode(a)):"keydown"===a.type||"keyup"===a.type?gl[a.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,
+metaKey:0,repeat:0,locale:0,getModifierState:Fe,charCode:function(a){return"keypress"===a.type?cd(a):0},keyCode:function(a){return"keydown"===a.type||"keyup"===a.type?a.keyCode:0},which:function(a){return"keypress"===a.type?cd(a):"keydown"===a.type||"keyup"===a.type?a.keyCode:0}}),Vj=ka(hl),il=E({},Yd,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0}),nh=ka(il),jl=E({},Mc,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,
+ctrlKey:0,shiftKey:0,getModifierState:Fe}),Xj=ka(jl),kl=E({},Yb,{propertyName:0,elapsedTime:0,pseudoElement:0}),Zj=ka(kl),ll=E({},Yd,{deltaX:function(a){return"deltaX"in a?a.deltaX:"wheelDeltaX"in a?-a.wheelDeltaX:0},deltaY:function(a){return"deltaY"in a?a.deltaY:"wheelDeltaY"in a?-a.wheelDeltaY:"wheelDelta"in a?-a.wheelDelta:0},deltaZ:0,deltaMode:0}),bk=ka(ll),Hj=[9,13,27,32],Ge=Ia&&"CompositionEvent"in window,Oc=null;Ia&&"documentMode"in document&&(Oc=document.documentMode);var ek=Ia&&"TextEvent"in
+window&&!Oc,Ug=Ia&&(!Ge||Oc&&8<Oc&&11>=Oc),Tg=String.fromCharCode(32),Sg=!1,Hb=!1,Kj={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},oc=null,pc=null,ph=!1;Ia&&(ph=Lj("input")&&(!document.documentMode||9<document.documentMode));var ua="function"===typeof Object.is?Object.is:Sj,dk=Ia&&"documentMode"in document&&11>=document.documentMode,Jb=null,Ke=null,rc=null,Je=!1,Kb={animationend:gd("Animation","AnimationEnd"),
+animationiteration:gd("Animation","AnimationIteration"),animationstart:gd("Animation","AnimationStart"),transitionend:gd("Transition","TransitionEnd")},Le={},eh={};Ia&&(eh=document.createElement("div").style,"AnimationEvent"in window||(delete Kb.animationend.animation,delete Kb.animationiteration.animation,delete Kb.animationstart.animation),"TransitionEvent"in window||delete Kb.transitionend.transition);var jh=hd("animationend"),kh=hd("animationiteration"),lh=hd("animationstart"),mh=hd("transitionend"),
+fh=new Map,Zi="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");
+(function(){for(var a=0;a<Zi.length;a++){var b=Zi[a],c=b.toLowerCase();b=b[0].toUpperCase()+b.slice(1);$a(c,"on"+b)}$a(jh,"onAnimationEnd");$a(kh,"onAnimationIteration");$a(lh,"onAnimationStart");$a("dblclick","onDoubleClick");$a("focusin","onFocus");$a("focusout","onBlur");$a(mh,"onTransitionEnd")})();Ab("onMouseEnter",["mouseout","mouseover"]);Ab("onMouseLeave",["mouseout","mouseover"]);Ab("onPointerEnter",["pointerout","pointerover"]);Ab("onPointerLeave",["pointerout","pointerover"]);mb("onChange",
+"change click focusin focusout input keydown keyup selectionchange".split(" "));mb("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" "));mb("onBeforeInput",["compositionend","keypress","textInput","paste"]);mb("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" "));mb("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" "));mb("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));
+var Ec="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Uj=new Set("cancel close invalid load scroll toggle".split(" ").concat(Ec)),id="_reactListening"+Math.random().toString(36).slice(2),gk=/\r\n?/g,hk=/\u0000|\uFFFD/g,Jf=null,Kf=null,Rf="function"===typeof setTimeout?setTimeout:void 0,Nk="function"===typeof clearTimeout?
+clearTimeout:void 0,$i="function"===typeof Promise?Promise:void 0,Jk="function"===typeof queueMicrotask?queueMicrotask:"undefined"!==typeof $i?function(a){return $i.resolve(null).then(a).catch(ik)}:Rf,Zb=Math.random().toString(36).slice(2),Da="__reactFiber$"+Zb,uc="__reactProps$"+Zb,Ja="__reactContainer$"+Zb,Me="__reactEvents$"+Zb,Dk="__reactListeners$"+Zb,Ek="__reactHandles$"+Zb,Se=[],Mb=-1,cb={},J=bb(cb),S=bb(!1),pb=cb,La=null,md=!1,Te=!1,Ob=[],Pb=0,od=null,nd=0,na=[],oa=0,rb=null,Ma=1,Na="",la=
+null,fa=null,D=!1,wa=null,Ik=Sa.ReactCurrentBatchConfig,Vb=Dh(!0),li=Dh(!1),ud=bb(null),td=null,Rb=null,bf=null,tb=null,kk=Oa,gb=!1,wc={},Ea=bb(wc),yc=bb(wc),xc=bb(wc),F=bb(0),kf=[],yd=Sa.ReactCurrentDispatcher,sf=Sa.ReactCurrentBatchConfig,vb=0,C=null,K=null,N=null,Ad=!1,zc=!1,Ac=0,ml=0,zd={readContext:qa,useCallback:V,useContext:V,useEffect:V,useImperativeHandle:V,useInsertionEffect:V,useLayoutEffect:V,useMemo:V,useReducer:V,useRef:V,useState:V,useDebugValue:V,useDeferredValue:V,useTransition:V,
+useMutableSource:V,useSyncExternalStore:V,useId:V,unstable_isNewReconciler:!1},lk={readContext:qa,useCallback:function(a,b){Fa().memoizedState=[a,void 0===b?null:b];return a},useContext:qa,useEffect:Sh,useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):null;return Bd(4194308,4,Vh.bind(null,b,a),c)},useLayoutEffect:function(a,b){return Bd(4194308,4,a,b)},useInsertionEffect:function(a,b){return Bd(4,2,a,b)},useMemo:function(a,b){var c=Fa();b=void 0===b?null:b;a=a();c.memoizedState=
+[a,b];return a},useReducer:function(a,b,c){var d=Fa();b=void 0!==c?c(b):b;d.memoizedState=d.baseState=b;a={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:a,lastRenderedState:b};d.queue=a;a=a.dispatch=qk.bind(null,C,a);return[d.memoizedState,a]},useRef:function(a){var b=Fa();a={current:a};return b.memoizedState=a},useState:Qh,useDebugValue:rf,useDeferredValue:function(a){return Fa().memoizedState=a},useTransition:function(){var a=Qh(!1),b=a[0];a=pk.bind(null,a[1]);Fa().memoizedState=
+a;return[b,a]},useMutableSource:function(a,b,c){},useSyncExternalStore:function(a,b,c){var d=C,e=Fa();if(D){if(void 0===c)throw Error(m(407));c=c()}else{c=b();if(null===O)throw Error(m(349));0!==(vb&30)||Nh(d,b,c)}e.memoizedState=c;var f={value:c,getSnapshot:b};e.queue=f;Sh(Lh.bind(null,d,f,a),[a]);d.flags|=2048;Cc(9,Mh.bind(null,d,f,c,b),void 0,null);return c},useId:function(){var a=Fa(),b=O.identifierPrefix;if(D){var c=Na;var d=Ma;c=(d&~(1<<32-ta(d)-1)).toString(32)+c;b=":"+b+"R"+c;c=Ac++;0<c&&
+(b+="H"+c.toString(32));b+=":"}else c=ml++,b=":"+b+"r"+c.toString(32)+":";return a.memoizedState=b},unstable_isNewReconciler:!1},mk={readContext:qa,useCallback:Xh,useContext:qa,useEffect:qf,useImperativeHandle:Wh,useInsertionEffect:Th,useLayoutEffect:Uh,useMemo:Yh,useReducer:of,useRef:Rh,useState:function(a){return of(Bc)},useDebugValue:rf,useDeferredValue:function(a){var b=sa();return Zh(b,K.memoizedState,a)},useTransition:function(){var a=of(Bc)[0],b=sa().memoizedState;return[a,b]},useMutableSource:Jh,
+useSyncExternalStore:Kh,useId:$h,unstable_isNewReconciler:!1},nk={readContext:qa,useCallback:Xh,useContext:qa,useEffect:qf,useImperativeHandle:Wh,useInsertionEffect:Th,useLayoutEffect:Uh,useMemo:Yh,useReducer:pf,useRef:Rh,useState:function(a){return pf(Bc)},useDebugValue:rf,useDeferredValue:function(a){var b=sa();return null===K?b.memoizedState=a:Zh(b,K.memoizedState,a)},useTransition:function(){var a=pf(Bc)[0],b=sa().memoizedState;return[a,b]},useMutableSource:Jh,useSyncExternalStore:Kh,useId:$h,
+unstable_isNewReconciler:!1},Dd={isMounted:function(a){return(a=a._reactInternals)?nb(a)===a:!1},enqueueSetState:function(a,b,c){a=a._reactInternals;var d=Z(),e=hb(a),f=Pa(d,e);f.payload=b;void 0!==c&&null!==c&&(f.callback=c);b=fb(a,f,e);null!==b&&(xa(b,a,e,d),vd(b,a,e))},enqueueReplaceState:function(a,b,c){a=a._reactInternals;var d=Z(),e=hb(a),f=Pa(d,e);f.tag=1;f.payload=b;void 0!==c&&null!==c&&(f.callback=c);b=fb(a,f,e);null!==b&&(xa(b,a,e,d),vd(b,a,e))},enqueueForceUpdate:function(a,b){a=a._reactInternals;
+var c=Z(),d=hb(a),e=Pa(c,d);e.tag=2;void 0!==b&&null!==b&&(e.callback=b);b=fb(a,e,d);null!==b&&(xa(b,a,d,c),vd(b,a,d))}},rk="function"===typeof WeakMap?WeakMap:Map,tk=Sa.ReactCurrentOwner,ha=!1,Cf={dehydrated:null,treeContext:null,retryLane:0};var zk=function(a,b,c,d){for(c=b.child;null!==c;){if(5===c.tag||6===c.tag)a.appendChild(c.stateNode);else if(4!==c.tag&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return}c.sibling.return=
+c.return;c=c.sibling}};var xi=function(a,b){};var yk=function(a,b,c,d,e){var f=a.memoizedProps;if(f!==d){a=b.stateNode;ub(Ea.current);e=null;switch(c){case "input":f=ke(a,f);d=ke(a,d);e=[];break;case "select":f=E({},f,{value:void 0});d=E({},d,{value:void 0});e=[];break;case "textarea":f=ne(a,f);d=ne(a,d);e=[];break;default:"function"!==typeof f.onClick&&"function"===typeof d.onClick&&(a.onclick=kd)}pe(c,d);var g;c=null;for(l in f)if(!d.hasOwnProperty(l)&&f.hasOwnProperty(l)&&null!=f[l])if("style"===
+l){var h=f[l];for(g in h)h.hasOwnProperty(g)&&(c||(c={}),c[g]="")}else"dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&($b.hasOwnProperty(l)?e||(e=[]):(e=e||[]).push(l,null));for(l in d){var k=d[l];h=null!=f?f[l]:void 0;if(d.hasOwnProperty(l)&&k!==h&&(null!=k||null!=h))if("style"===l)if(h){for(g in h)!h.hasOwnProperty(g)||k&&k.hasOwnProperty(g)||(c||(c={}),c[g]="");for(g in k)k.hasOwnProperty(g)&&h[g]!==k[g]&&(c||
+(c={}),c[g]=k[g])}else c||(e||(e=[]),e.push(l,c)),c=k;else"dangerouslySetInnerHTML"===l?(k=k?k.__html:void 0,h=h?h.__html:void 0,null!=k&&h!==k&&(e=e||[]).push(l,k)):"children"===l?"string"!==typeof k&&"number"!==typeof k||(e=e||[]).push(l,""+k):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&($b.hasOwnProperty(l)?(null!=k&&"onScroll"===l&&B("scroll",a),e||h===k||(e=[])):(e=e||[]).push(l,k))}c&&(e=e||[]).push("style",c);var l=e;if(b.updateQueue=l)b.flags|=4}};var Ak=function(a,
+b,c,d){c!==d&&(b.flags|=4)};var Jd=!1,X=!1,Fk="function"===typeof WeakSet?WeakSet:Set,l=null,zi=!1,T=null,za=!1,Mk=Math.ceil,Od=Sa.ReactCurrentDispatcher,Uf=Sa.ReactCurrentOwner,ca=Sa.ReactCurrentBatchConfig,p=0,O=null,H=null,U=0,ba=0,Ga=bb(0),L=0,Jc=null,ra=0,Md=0,Sf=0,Kc=null,ja=null,Of=0,Hf=Infinity,Ra=null,Ed=!1,xf=null,ib=null,Pd=!1,lb=null,Qd=0,Ic=0,Pf=null,Kd=-1,Ld=0;var Qk=function(a,b,c){if(null!==a)if(a.memoizedProps!==b.pendingProps||S.current)ha=!0;else{if(0===(a.lanes&c)&&0===(b.flags&
+128))return ha=!1,wk(a,b,c);ha=0!==(a.flags&131072)?!0:!1}else ha=!1,D&&0!==(b.flags&1048576)&&yh(b,nd,b.index);b.lanes=0;switch(b.tag){case 2:var d=b.type;Fd(a,b);a=b.pendingProps;var e=Nb(b,J.current);Sb(b,c);e=mf(null,b,d,a,e,c);var f=nf();b.flags|=1;"object"===typeof e&&null!==e&&"function"===typeof e.render&&void 0===e.$$typeof?(b.tag=1,b.memoizedState=null,b.updateQueue=null,ea(d)?(f=!0,ld(b)):f=!1,b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null,ff(b),e.updater=Dd,b.stateNode=
+e,e._reactInternals=b,uf(b,d,a,c),b=Af(null,b,d,!0,f,c)):(b.tag=0,D&&f&&Ue(b),aa(null,b,e,c),b=b.child);return b;case 16:d=b.elementType;a:{Fd(a,b);a=b.pendingProps;e=d._init;d=e(d._payload);b.type=d;e=b.tag=Uk(d);a=ya(d,a);switch(e){case 0:b=zf(null,b,d,a,c);break a;case 1:b=ri(null,b,d,a,c);break a;case 11:b=mi(null,b,d,a,c);break a;case 14:b=ni(null,b,d,ya(d.type,a),c);break a}throw Error(m(306,d,""));}return b;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:ya(d,e),zf(a,b,d,e,c);
+case 1:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:ya(d,e),ri(a,b,d,e,c);case 3:a:{si(b);if(null===a)throw Error(m(387));d=b.pendingProps;f=b.memoizedState;e=f.element;Fh(a,b);wd(b,d,null,c);var g=b.memoizedState;d=g.element;if(f.isDehydrated)if(f={element:d,isDehydrated:!1,cache:g.cache,pendingSuspenseBoundaries:g.pendingSuspenseBoundaries,transitions:g.transitions},b.updateQueue.baseState=f,b.memoizedState=f,b.flags&256){e=Ub(Error(m(423)),b);b=ti(a,b,d,c,e);break a}else if(d!==e){e=
+Ub(Error(m(424)),b);b=ti(a,b,d,c,e);break a}else for(fa=Ka(b.stateNode.containerInfo.firstChild),la=b,D=!0,wa=null,c=li(b,null,d,c),b.child=c;c;)c.flags=c.flags&-3|4096,c=c.sibling;else{Qb();if(d===e){b=Qa(a,b,c);break a}aa(a,b,d,c)}b=b.child}return b;case 5:return Ih(b),null===a&&Xe(b),d=b.type,e=b.pendingProps,f=null!==a?a.memoizedProps:null,g=e.children,Qe(d,e)?g=null:null!==f&&Qe(d,f)&&(b.flags|=32),qi(a,b),aa(a,b,g,c),b.child;case 6:return null===a&&Xe(b),null;case 13:return ui(a,b,c);case 4:return gf(b,
+b.stateNode.containerInfo),d=b.pendingProps,null===a?b.child=Vb(b,null,d,c):aa(a,b,d,c),b.child;case 11:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:ya(d,e),mi(a,b,d,e,c);case 7:return aa(a,b,b.pendingProps,c),b.child;case 8:return aa(a,b,b.pendingProps.children,c),b.child;case 12:return aa(a,b,b.pendingProps.children,c),b.child;case 10:a:{d=b.type._context;e=b.pendingProps;f=b.memoizedProps;g=e.value;y(ud,d._currentValue);d._currentValue=g;if(null!==f)if(ua(f.value,g)){if(f.children===
+e.children&&!S.current){b=Qa(a,b,c);break a}}else for(f=b.child,null!==f&&(f.return=b);null!==f;){var h=f.dependencies;if(null!==h){g=f.child;for(var k=h.firstContext;null!==k;){if(k.context===d){if(1===f.tag){k=Pa(-1,c&-c);k.tag=2;var l=f.updateQueue;if(null!==l){l=l.shared;var p=l.pending;null===p?k.next=k:(k.next=p.next,p.next=k);l.pending=k}}f.lanes|=c;k=f.alternate;null!==k&&(k.lanes|=c);df(f.return,c,b);h.lanes|=c;break}k=k.next}}else if(10===f.tag)g=f.type===b.type?null:f.child;else if(18===
+f.tag){g=f.return;if(null===g)throw Error(m(341));g.lanes|=c;h=g.alternate;null!==h&&(h.lanes|=c);df(g,c,b);g=f.sibling}else g=f.child;if(null!==g)g.return=f;else for(g=f;null!==g;){if(g===b){g=null;break}f=g.sibling;if(null!==f){f.return=g.return;g=f;break}g=g.return}f=g}aa(a,b,e.children,c);b=b.child}return b;case 9:return e=b.type,d=b.pendingProps.children,Sb(b,c),e=qa(e),d=d(e),b.flags|=1,aa(a,b,d,c),b.child;case 14:return d=b.type,e=ya(d,b.pendingProps),e=ya(d.type,e),ni(a,b,d,e,c);case 15:return oi(a,
+b,b.type,b.pendingProps,c);case 17:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:ya(d,e),Fd(a,b),b.tag=1,ea(d)?(a=!0,ld(b)):a=!1,Sb(b,c),ei(b,d,e),uf(b,d,e,c),Af(null,b,d,!0,a,c);case 19:return wi(a,b,c);case 22:return pi(a,b,c)}throw Error(m(156,b.tag));};var pa=function(a,b,c,d){return new Tk(a,b,c,d)},aj="function"===typeof reportError?reportError:function(a){console.error(a)};Ud.prototype.render=Xf.prototype.render=function(a){var b=this._internalRoot;if(null===b)throw Error(m(409));
+Sd(a,b,null,null)};Ud.prototype.unmount=Xf.prototype.unmount=function(){var a=this._internalRoot;if(null!==a){this._internalRoot=null;var b=a.containerInfo;yb(function(){Sd(null,a,null,null)});b[Ja]=null}};Ud.prototype.unstable_scheduleHydration=function(a){if(a){var b=nl();a={blockedOn:null,target:a,priority:b};for(var c=0;c<Ya.length&&0!==b&&b<Ya[c].priority;c++);Ya.splice(c,0,a);0===c&&Hg(a)}};var Cj=function(a){switch(a.tag){case 3:var b=a.stateNode;if(b.current.memoizedState.isDehydrated){var c=
+hc(b.pendingLanes);0!==c&&(xe(b,c|1),ia(b,P()),0===(p&6)&&(Hc(),db()))}break;case 13:yb(function(){var b=Oa(a,1);if(null!==b){var c=Z();xa(b,a,1,c)}}),Wf(a,1)}};var Gg=function(a){if(13===a.tag){var b=Oa(a,134217728);if(null!==b){var c=Z();xa(b,a,134217728,c)}Wf(a,134217728)}};var xj=function(a){if(13===a.tag){var b=hb(a),c=Oa(a,b);if(null!==c){var d=Z();xa(c,a,b,d)}Wf(a,b)}};var nl=function(){return z};var wj=function(a,b){var c=z;try{return z=a,b()}finally{z=c}};se=function(a,b,c){switch(b){case "input":le(a,
+c);b=c.name;if("radio"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll("input[name="+JSON.stringify(""+b)+'][type="radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=Rc(d);if(!e)throw Error(m(90));jg(d);le(d,e)}}}break;case "textarea":og(a,c);break;case "select":b=c.value,null!=b&&Db(a,!!c.multiple,b,!1)}};(function(a,b,c){xg=a;yg=c})(Tf,function(a,b,c,d,e){var f=z,g=ca.transition;try{return ca.transition=null,z=1,a(b,c,d,e)}finally{z=f,ca.transition=
+g,0===p&&Hc()}},yb);var ol={usingClientEntryPoint:!1,Events:[ec,Ib,Rc,ug,vg,Tf]};(function(a){a={bundleType:a.bundleType,version:a.version,rendererPackageName:a.rendererPackageName,rendererConfig:a.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:Sa.ReactCurrentDispatcher,findHostInstanceByFiber:Xk,
+findFiberByHostInstance:a.findFiberByHostInstance||Yk,findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.3.1"};if("undefined"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)a=!1;else{var b=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(b.isDisabled||!b.supportsFiber)a=!0;else{try{Uc=b.inject(a),Ca=b}catch(c){}a=b.checkDCE?!0:!1}}return a})({findFiberByHostInstance:ob,bundleType:0,version:"18.3.1-next-f1338f8080-20240426",
+rendererPackageName:"react-dom"});Q.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=ol;Q.createPortal=function(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Yf(b))throw Error(m(200));return Wk(a,b,null,c)};Q.createRoot=function(a,b){if(!Yf(a))throw Error(m(299));var c=!1,d="",e=aj;null!==b&&void 0!==b&&(!0===b.unstable_strictMode&&(c=!0),void 0!==b.identifierPrefix&&(d=b.identifierPrefix),void 0!==b.onRecoverableError&&(e=b.onRecoverableError));b=Vf(a,1,!1,null,null,
+c,!1,d,e);a[Ja]=b.current;sc(8===a.nodeType?a.parentNode:a);return new Xf(b)};Q.findDOMNode=function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternals;if(void 0===b){if("function"===typeof a.render)throw Error(m(188));a=Object.keys(a).join(",");throw Error(m(268,a));}a=Bg(b);a=null===a?null:a.stateNode;return a};Q.flushSync=function(a){return yb(a)};Q.hydrate=function(a,b,c){if(!Vd(b))throw Error(m(200));return Wd(null,a,b,!0,c)};Q.hydrateRoot=function(a,b,c){if(!Yf(a))throw Error(m(405));
+var d=null!=c&&c.hydratedSources||null,e=!1,f="",g=aj;null!==c&&void 0!==c&&(!0===c.unstable_strictMode&&(e=!0),void 0!==c.identifierPrefix&&(f=c.identifierPrefix),void 0!==c.onRecoverableError&&(g=c.onRecoverableError));b=Wi(b,null,a,1,null!=c?c:null,e,!1,f,g);a[Ja]=b.current;sc(a);if(d)for(a=0;a<d.length;a++)c=d[a],e=c._getVersion,e=e(c._source),null==b.mutableSourceEagerHydrationData?b.mutableSourceEagerHydrationData=[c,e]:b.mutableSourceEagerHydrationData.push(c,e);return new Ud(b)};Q.render=
+function(a,b,c){if(!Vd(b))throw Error(m(200));return Wd(null,a,b,!1,c)};Q.unmountComponentAtNode=function(a){if(!Vd(a))throw Error(m(40));return a._reactRootContainer?(yb(function(){Wd(null,null,a,!1,function(){a._reactRootContainer=null;a[Ja]=null})}),!0):!1};Q.unstable_batchedUpdates=Tf;Q.unstable_renderSubtreeIntoContainer=function(a,b,c,d){if(!Vd(c))throw Error(m(200));if(null==a||void 0===a._reactInternals)throw Error(m(38));return Wd(a,b,c,!1,d)};Q.version="18.3.1-next-f1338f8080-20240426"});
+})();

packages/noodl-viewer-react/static/shared/react.production.min.js

@@ -1,4 +1,5 @@
-/** @license React v16.8.1
+/**
+ * @license React
  * react.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -6,27 +7,25 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';(function(M,q){"object"===typeof exports&&"undefined"!==typeof module?module.exports=q():"function"===typeof define&&define.amd?define(q):M.React=q()})(this,function(){function M(a,b,d,f,p,c,e,h){if(!a){a=void 0;if(void 0===b)a=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var n=[d,f,p,c,e,h],ta=0;a=Error(b.replace(/%s/g,function(){return n[ta++]}));a.name="Invariant Violation"}a.framesToPop=
-1;throw a;}}function q(a){for(var b=arguments.length-1,d="https://reactjs.org/docs/error-decoder.html?invariant="+a,f=0;f<b;f++)d+="&args[]="+encodeURIComponent(arguments[f+1]);M(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",d)}function t(a,b,d){this.props=a;this.context=b;this.refs=ba;this.updater=d||ca}function da(){}function N(a,b,d){this.props=a;this.context=b;this.refs=ba;this.updater=
-d||ca}function u(){if(!x){var a=c.expirationTime;C?O():C=!0;D(ua,a)}}function P(){var a=c,b=c.next;if(c===b)c=null;else{var d=c.previous;c=d.next=b;b.previous=d}a.next=a.previous=null;d=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,p=E;g=a;E=b;try{var n=d()}finally{g=f,E=p}if("function"===typeof n)if(n={callback:n,priorityLevel:a,expirationTime:b,next:null,previous:null},null===c)c=n.next=n.previous=n;else{d=null;a=c;do{if(a.expirationTime>=b){d=a;break}a=a.next}while(a!==c);null===d?d=
-c:d===c&&(c=n,u());b=d.previous;b.next=d.previous=n;n.next=d;n.previous=b}}function Q(){if(-1===l&&null!==c&&1===c.priorityLevel){x=!0;try{do P();while(null!==c&&1===c.priorityLevel)}finally{x=!1,null!==c?u():C=!1}}}function ua(a){x=!0;var b=F;F=a;try{if(a)for(;null!==c;){var d=k();if(c.expirationTime<=d){do P();while(null!==c&&c.expirationTime<=d)}else break}else if(null!==c){do P();while(null!==c&&!G())}}finally{x=!1,F=b,null!==c?u():C=!1,Q()}}function ea(a,b,d){var f=void 0,p={},c=null,e=null;
-if(null!=b)for(f in void 0!==b.ref&&(e=b.ref),void 0!==b.key&&(c=""+b.key),b)fa.call(b,f)&&!ha.hasOwnProperty(f)&&(p[f]=b[f]);var h=arguments.length-2;if(1===h)p.children=d;else if(1<h){for(var g=Array(h),k=0;k<h;k++)g[k]=arguments[k+2];p.children=g}if(a&&a.defaultProps)for(f in h=a.defaultProps,h)void 0===p[f]&&(p[f]=h[f]);return{$$typeof:y,type:a,key:c,ref:e,props:p,_owner:R.current}}function va(a,b){return{$$typeof:y,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function S(a){return"object"===
-typeof a&&null!==a&&a.$$typeof===y}function wa(a){var b={"=":"=0",":":"=2"};return"$"+(""+a).replace(/[=:]/g,function(a){return b[a]})}function ia(a,b,d,f){if(H.length){var c=H.pop();c.result=a;c.keyPrefix=b;c.func=d;c.context=f;c.count=0;return c}return{result:a,keyPrefix:b,func:d,context:f,count:0}}function ja(a){a.result=null;a.keyPrefix=null;a.func=null;a.context=null;a.count=0;10>H.length&&H.push(a)}function T(a,b,d,f){var c=typeof a;if("undefined"===c||"boolean"===c)a=null;var e=!1;if(null===
-a)e=!0;else switch(c){case "string":case "number":e=!0;break;case "object":switch(a.$$typeof){case y:case xa:e=!0}}if(e)return d(f,a,""===b?"."+U(a,0):b),1;e=0;b=""===b?".":b+":";if(Array.isArray(a))for(var g=0;g<a.length;g++){c=a[g];var h=b+U(c,g);e+=T(c,h,d,f)}else if(null===a||"object"!==typeof a?h=null:(h=ka&&a[ka]||a["@@iterator"],h="function"===typeof h?h:null),"function"===typeof h)for(a=h.call(a),g=0;!(c=a.next()).done;)c=c.value,h=b+U(c,g++),e+=T(c,h,d,f);else"object"===c&&(d=""+a,q("31",
-"[object Object]"===d?"object with keys {"+Object.keys(a).join(", ")+"}":d,""));return e}function V(a,b,d){return null==a?0:T(a,"",b,d)}function U(a,b){return"object"===typeof a&&null!==a&&null!=a.key?wa(a.key):b.toString(36)}function ya(a,b,d){a.func.call(a.context,b,a.count++)}function za(a,b,d){var f=a.result,c=a.keyPrefix;a=a.func.call(a.context,b,a.count++);Array.isArray(a)?W(a,f,d,function(a){return a}):null!=a&&(S(a)&&(a=va(a,c+(!a.key||b&&b.key===a.key?"":(""+a.key).replace(la,"$&/")+"/")+
-d)),f.push(a))}function W(a,b,d,f,c){var e="";null!=d&&(e=(""+d).replace(la,"$&/")+"/");b=ia(b,e,f,c);V(a,za,b);ja(b)}function m(){var a=ma.current;null===a?q("307"):void 0;return a}var e="function"===typeof Symbol&&Symbol.for,y=e?Symbol.for("react.element"):60103,xa=e?Symbol.for("react.portal"):60106,r=e?Symbol.for("react.fragment"):60107,X=e?Symbol.for("react.strict_mode"):60108,Aa=e?Symbol.for("react.profiler"):60114,Ba=e?Symbol.for("react.provider"):60109,Ca=e?Symbol.for("react.context"):60110,
-Da=e?Symbol.for("react.concurrent_mode"):60111,Ea=e?Symbol.for("react.forward_ref"):60112,Fa=e?Symbol.for("react.suspense"):60113,Ga=e?Symbol.for("react.memo"):60115,Ha=e?Symbol.for("react.lazy"):60116,ka="function"===typeof Symbol&&Symbol.iterator,na=Object.getOwnPropertySymbols,Ia=Object.prototype.hasOwnProperty,Ja=Object.prototype.propertyIsEnumerable,I=function(){try{if(!Object.assign)return!1;var a=new String("abc");a[5]="de";if("5"===Object.getOwnPropertyNames(a)[0])return!1;var b={};for(a=
-0;10>a;a++)b["_"+String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(b).map(function(a){return b[a]}).join(""))return!1;var d={};"abcdefghijklmnopqrst".split("").forEach(function(a){d[a]=a});return"abcdefghijklmnopqrst"!==Object.keys(Object.assign({},d)).join("")?!1:!0}catch(f){return!1}}()?Object.assign:function(a,b){if(null===a||void 0===a)throw new TypeError("Object.assign cannot be called with null or undefined");var d=Object(a);for(var c,e=1;e<arguments.length;e++){var g=Object(arguments[e]);
-for(var k in g)Ia.call(g,k)&&(d[k]=g[k]);if(na){c=na(g);for(var h=0;h<c.length;h++)Ja.call(g,c[h])&&(d[c[h]]=g[c[h]])}}return d},ca={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,d){},enqueueReplaceState:function(a,b,d,c){},enqueueSetState:function(a,b,d,c){}},ba={};t.prototype.isReactComponent={};t.prototype.setState=function(a,b){"object"!==typeof a&&"function"!==typeof a&&null!=a?q("85"):void 0;this.updater.enqueueSetState(this,a,b,"setState")};t.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,
-a,"forceUpdate")};da.prototype=t.prototype;e=N.prototype=new da;e.constructor=N;I(e,t.prototype);e.isPureReactComponent=!0;var c=null,F=!1,g=3,l=-1,E=-1,x=!1,C=!1,Ka=Date,La="function"===typeof setTimeout?setTimeout:void 0,Ma="function"===typeof clearTimeout?clearTimeout:void 0,oa="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,pa="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,qa,ra,Y=function(a){qa=oa(function(b){Ma(ra);a(b)});ra=La(function(){pa(qa);
-a(k())},100)};if("object"===typeof performance&&"function"===typeof performance.now){var Na=performance;var k=function(){return Na.now()}}else k=function(){return Ka.now()};e=null;"undefined"!==typeof window?e=window:"undefined"!==typeof global&&(e=global);if(e&&e._schedMock){e=e._schedMock;var D=e[0];var O=e[1];var G=e[2];k=e[3]}else if("undefined"===typeof window||"function"!==typeof MessageChannel){var v=null,Oa=function(a){if(null!==v)try{v(a)}finally{v=null}};D=function(a,b){null!==v?setTimeout(D,
-0,a):(v=a,setTimeout(Oa,0,!1))};O=function(){v=null};G=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof oa&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!==typeof pa&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var w=null,J=!1,z=-1,A=!1,Z=!1,K=0,
-L=33,B=33;G=function(){return K<=k()};e=new MessageChannel;var sa=e.port2;e.port1.onmessage=function(a){J=!1;a=w;var b=z;w=null;z=-1;var d=k(),c=!1;if(0>=K-d)if(-1!==b&&b<=d)c=!0;else{A||(A=!0,Y(aa));w=a;z=b;return}if(null!==a){Z=!0;try{a(c)}finally{Z=!1}}};var aa=function(a){if(null!==w){Y(aa);var b=a-K+B;b<B&&L<B?(8>b&&(b=8),B=b<L?L:b):L=b;K=a+B;J||(J=!0,sa.postMessage(void 0))}else A=!1};D=function(a,b){w=a;z=b;Z||0>b?sa.postMessage(void 0):A||(A=!0,Y(aa))};O=function(){w=null;J=!1;z=-1}}var Pa=
-0,ma={current:null},R={current:null};e={ReactCurrentDispatcher:ma,ReactCurrentOwner:R,assign:I};I(e,{Scheduler:{unstable_cancelCallback:function(a){var b=a.next;if(null!==b){if(b===a)c=null;else{a===c&&(c=b);var d=a.previous;d.next=b;b.previous=d}a.next=a.previous=null}},unstable_shouldYield:function(){return!F&&(null!==c&&c.expirationTime<E||G())},unstable_now:k,unstable_scheduleCallback:function(a,b){var d=-1!==l?l:k();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=d+b.timeout;
-else switch(g){case 1:b=d+-1;break;case 2:b=d+250;break;case 5:b=d+1073741823;break;case 4:b=d+1E4;break;default:b=d+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===c)c=a.next=a.previous=a,u();else{d=null;var f=c;do{if(f.expirationTime>b){d=f;break}f=f.next}while(f!==c);null===d?d=c:d===c&&(c=a,u());b=d.previous;b.next=d.previous=a;a.next=d;a.previous=b}return a},unstable_runWithPriority:function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=
-3}var d=g,c=l;g=a;l=k();try{return b()}finally{g=d,l=c,Q()}},unstable_wrapCallback:function(a){var b=g;return function(){var d=g,c=l;g=b;l=k();try{return a.apply(this,arguments)}finally{g=d,l=c,Q()}}},unstable_getFirstCallbackNode:function(){return c},unstable_pauseExecution:function(){},unstable_continueExecution:function(){null!==c&&u()},unstable_getCurrentPriorityLevel:function(){return g}},SchedulerTracing:{__interactionsRef:null,__subscriberRef:null,unstable_clear:function(a){return a()},unstable_getCurrent:function(){return null},
-unstable_getThreadID:function(){return++Pa},unstable_subscribe:function(a){},unstable_trace:function(a,b,d){return d()},unstable_unsubscribe:function(a){},unstable_wrap:function(a){return a}}});var fa=Object.prototype.hasOwnProperty,ha={key:!0,ref:!0,__self:!0,__source:!0},la=/\/+/g,H=[];r={Children:{map:function(a,b,d){if(null==a)return a;var c=[];W(a,c,null,b,d);return c},forEach:function(a,b,d){if(null==a)return a;b=ia(null,null,b,d);V(a,ya,b);ja(b)},count:function(a){return V(a,function(){return null},
-null)},toArray:function(a){var b=[];W(a,b,null,function(a){return a});return b},only:function(a){S(a)?void 0:q("143");return a}},createRef:function(){return{current:null}},Component:t,PureComponent:N,createContext:function(a,b){void 0===b&&(b=null);a={$$typeof:Ca,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:Ba,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:Ea,render:a}},lazy:function(a){return{$$typeof:Ha,
-_ctor:a,_status:-1,_result:null}},memo:function(a,b){return{$$typeof:Ga,type:a,compare:void 0===b?null:b}},useCallback:function(a,b){return m().useCallback(a,b)},useContext:function(a,b){return m().useContext(a,b)},useEffect:function(a,b){return m().useEffect(a,b)},useImperativeHandle:function(a,b,d){return m().useImperativeHandle(a,b,d)},useDebugValue:function(a,b){},useLayoutEffect:function(a,b){return m().useLayoutEffect(a,b)},useMemo:function(a,b){return m().useMemo(a,b)},useReducer:function(a,
-b,d){return m().useReducer(a,b,d)},useRef:function(a){return m().useRef(a)},useState:function(a){return m().useState(a)},Fragment:r,StrictMode:X,Suspense:Fa,createElement:ea,cloneElement:function(a,b,d){null===a||void 0===a?q("267",a):void 0;var c=void 0,e=I({},a.props),g=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=R.current);void 0!==b.key&&(g=""+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(c in b)fa.call(b,c)&&!ha.hasOwnProperty(c)&&(e[c]=void 0===
-b[c]&&void 0!==l?l[c]:b[c])}c=arguments.length-2;if(1===c)e.children=d;else if(1<c){l=Array(c);for(var m=0;m<c;m++)l[m]=arguments[m+2];e.children=l}return{$$typeof:y,type:a.type,key:g,ref:k,props:e,_owner:h}},createFactory:function(a){var b=ea.bind(null,a);b.type=a;return b},isValidElement:S,version:"16.8.1",unstable_ConcurrentMode:Da,unstable_Profiler:Aa,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:e};r=(X={default:r},r)||X;return r.default||r});
+(function(){'use strict';(function(c,x){"object"===typeof exports&&"undefined"!==typeof module?x(exports):"function"===typeof define&&define.amd?define(["exports"],x):(c=c||self,x(c.React={}))})(this,function(c){function x(a){if(null===a||"object"!==typeof a)return null;a=V&&a[V]||a["@@iterator"];return"function"===typeof a?a:null}function w(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Y(){}function K(a,b,e){this.props=a;this.context=b;this.refs=W;this.updater=e||X}function Z(a,b,
+e){var m,d={},c=null,h=null;if(null!=b)for(m in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(c=""+b.key),b)aa.call(b,m)&&!ba.hasOwnProperty(m)&&(d[m]=b[m]);var l=arguments.length-2;if(1===l)d.children=e;else if(1<l){for(var f=Array(l),k=0;k<l;k++)f[k]=arguments[k+2];d.children=f}if(a&&a.defaultProps)for(m in l=a.defaultProps,l)void 0===d[m]&&(d[m]=l[m]);return{$$typeof:y,type:a,key:c,ref:h,props:d,_owner:L.current}}function oa(a,b){return{$$typeof:y,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}
+function M(a){return"object"===typeof a&&null!==a&&a.$$typeof===y}function pa(a){var b={"=":"=0",":":"=2"};return"$"+a.replace(/[=:]/g,function(a){return b[a]})}function N(a,b){return"object"===typeof a&&null!==a&&null!=a.key?pa(""+a.key):b.toString(36)}function B(a,b,e,m,d){var c=typeof a;if("undefined"===c||"boolean"===c)a=null;var h=!1;if(null===a)h=!0;else switch(c){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case y:case qa:h=!0}}if(h)return h=a,d=d(h),a=""===m?"."+
+N(h,0):m,ca(d)?(e="",null!=a&&(e=a.replace(da,"$&/")+"/"),B(d,b,e,"",function(a){return a})):null!=d&&(M(d)&&(d=oa(d,e+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(da,"$&/")+"/")+a)),b.push(d)),1;h=0;m=""===m?".":m+":";if(ca(a))for(var l=0;l<a.length;l++){c=a[l];var f=m+N(c,l);h+=B(c,b,e,f,d)}else if(f=x(a),"function"===typeof f)for(a=f.call(a),l=0;!(c=a.next()).done;)c=c.value,f=m+N(c,l++),h+=B(c,b,e,f,d);else if("object"===c)throw b=String(a),Error("Objects are not valid as a React child (found: "+
+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}function C(a,b,e){if(null==a)return a;var c=[],d=0;B(a,c,"","",function(a){return b.call(e,a,d++)});return c}function ra(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b});-1===a._status&&(a._status=
+0,a._result=b)}if(1===a._status)return a._result.default;throw a._result;}function O(a,b){var e=a.length;a.push(b);a:for(;0<e;){var c=e-1>>>1,d=a[c];if(0<D(d,b))a[c]=b,a[e]=d,e=c;else break a}}function p(a){return 0===a.length?null:a[0]}function E(a){if(0===a.length)return null;var b=a[0],e=a.pop();if(e!==b){a[0]=e;a:for(var c=0,d=a.length,k=d>>>1;c<k;){var h=2*(c+1)-1,l=a[h],f=h+1,g=a[f];if(0>D(l,e))f<d&&0>D(g,l)?(a[c]=g,a[f]=e,c=f):(a[c]=l,a[h]=e,c=h);else if(f<d&&0>D(g,e))a[c]=g,a[f]=e,c=f;else break a}}return b}
+function D(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}function P(a){for(var b=p(r);null!==b;){if(null===b.callback)E(r);else if(b.startTime<=a)E(r),b.sortIndex=b.expirationTime,O(q,b);else break;b=p(r)}}function Q(a){z=!1;P(a);if(!u)if(null!==p(q))u=!0,R(S);else{var b=p(r);null!==b&&T(Q,b.startTime-a)}}function S(a,b){u=!1;z&&(z=!1,ea(A),A=-1);F=!0;var c=k;try{P(b);for(n=p(q);null!==n&&(!(n.expirationTime>b)||a&&!fa());){var m=n.callback;if("function"===typeof m){n.callback=null;
+k=n.priorityLevel;var d=m(n.expirationTime<=b);b=v();"function"===typeof d?n.callback=d:n===p(q)&&E(q);P(b)}else E(q);n=p(q)}if(null!==n)var g=!0;else{var h=p(r);null!==h&&T(Q,h.startTime-b);g=!1}return g}finally{n=null,k=c,F=!1}}function fa(){return v()-ha<ia?!1:!0}function R(a){G=a;H||(H=!0,I())}function T(a,b){A=ja(function(){a(v())},b)}function ka(a){throw Error("act(...) is not supported in production builds of React.");}var y=Symbol.for("react.element"),qa=Symbol.for("react.portal"),sa=Symbol.for("react.fragment"),
+ta=Symbol.for("react.strict_mode"),ua=Symbol.for("react.profiler"),va=Symbol.for("react.provider"),wa=Symbol.for("react.context"),xa=Symbol.for("react.forward_ref"),ya=Symbol.for("react.suspense"),za=Symbol.for("react.memo"),Aa=Symbol.for("react.lazy"),V=Symbol.iterator,X={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,m){},enqueueSetState:function(a,b,c,m){}},la=Object.assign,W={};w.prototype.isReactComponent={};w.prototype.setState=function(a,
+b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState")};w.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};Y.prototype=w.prototype;var t=K.prototype=new Y;t.constructor=K;la(t,w.prototype);t.isPureReactComponent=!0;var ca=Array.isArray,aa=Object.prototype.hasOwnProperty,L={current:null},
+ba={key:!0,ref:!0,__self:!0,__source:!0},da=/\/+/g,g={current:null},J={transition:null};if("object"===typeof performance&&"function"===typeof performance.now){var Ba=performance;var v=function(){return Ba.now()}}else{var ma=Date,Ca=ma.now();v=function(){return ma.now()-Ca}}var q=[],r=[],Da=1,n=null,k=3,F=!1,u=!1,z=!1,ja="function"===typeof setTimeout?setTimeout:null,ea="function"===typeof clearTimeout?clearTimeout:null,na="undefined"!==typeof setImmediate?setImmediate:null;"undefined"!==typeof navigator&&
+void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var H=!1,G=null,A=-1,ia=5,ha=-1,U=function(){if(null!==G){var a=v();ha=a;var b=!0;try{b=G(!0,a)}finally{b?I():(H=!1,G=null)}}else H=!1};if("function"===typeof na)var I=function(){na(U)};else if("undefined"!==typeof MessageChannel){t=new MessageChannel;var Ea=t.port2;t.port1.onmessage=U;I=function(){Ea.postMessage(null)}}else I=function(){ja(U,0)};t={ReactCurrentDispatcher:g,
+ReactCurrentOwner:L,ReactCurrentBatchConfig:J,Scheduler:{__proto__:null,unstable_ImmediatePriority:1,unstable_UserBlockingPriority:2,unstable_NormalPriority:3,unstable_IdlePriority:5,unstable_LowPriority:4,unstable_runWithPriority:function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=k;k=a;try{return b()}finally{k=c}},unstable_next:function(a){switch(k){case 1:case 2:case 3:var b=3;break;default:b=k}var c=k;k=b;try{return a()}finally{k=c}},unstable_scheduleCallback:function(a,
+b,c){var e=v();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?e+c:e):c=e;switch(a){case 1:var d=-1;break;case 2:d=250;break;case 5:d=1073741823;break;case 4:d=1E4;break;default:d=5E3}d=c+d;a={id:Da++,callback:b,priorityLevel:a,startTime:c,expirationTime:d,sortIndex:-1};c>e?(a.sortIndex=c,O(r,a),null===p(q)&&a===p(r)&&(z?(ea(A),A=-1):z=!0,T(Q,c-e))):(a.sortIndex=d,O(q,a),u||F||(u=!0,R(S)));return a},unstable_cancelCallback:function(a){a.callback=null},unstable_wrapCallback:function(a){var b=
+k;return function(){var c=k;k=b;try{return a.apply(this,arguments)}finally{k=c}}},unstable_getCurrentPriorityLevel:function(){return k},unstable_shouldYield:fa,unstable_requestPaint:function(){},unstable_continueExecution:function(){u||F||(u=!0,R(S))},unstable_pauseExecution:function(){},unstable_getFirstCallbackNode:function(){return p(q)},get unstable_now(){return v},unstable_forceFrameRate:function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):
+ia=0<a?Math.floor(1E3/a):5},unstable_Profiling:null}};c.Children={map:C,forEach:function(a,b,c){C(a,function(){b.apply(this,arguments)},c)},count:function(a){var b=0;C(a,function(){b++});return b},toArray:function(a){return C(a,function(a){return a})||[]},only:function(a){if(!M(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};c.Component=w;c.Fragment=sa;c.Profiler=ua;c.PureComponent=K;c.StrictMode=ta;c.Suspense=ya;c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=
+t;c.act=ka;c.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var e=la({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=L.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var l=a.type.defaultProps;for(f in b)aa.call(b,f)&&!ba.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==l?l[f]:b[f])}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){l=
+Array(f);for(var g=0;g<f;g++)l[g]=arguments[g+2];e.children=l}return{$$typeof:y,type:a.type,key:d,ref:k,props:e,_owner:h}};c.createContext=function(a){a={$$typeof:wa,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:va,_context:a};return a.Consumer=a};c.createElement=Z;c.createFactory=function(a){var b=Z.bind(null,a);b.type=a;return b};c.createRef=function(){return{current:null}};c.forwardRef=function(a){return{$$typeof:xa,
+render:a}};c.isValidElement=M;c.lazy=function(a){return{$$typeof:Aa,_payload:{_status:-1,_result:a},_init:ra}};c.memo=function(a,b){return{$$typeof:za,type:a,compare:void 0===b?null:b}};c.startTransition=function(a,b){b=J.transition;J.transition={};try{a()}finally{J.transition=b}};c.unstable_act=ka;c.useCallback=function(a,b){return g.current.useCallback(a,b)};c.useContext=function(a){return g.current.useContext(a)};c.useDebugValue=function(a,b){};c.useDeferredValue=function(a){return g.current.useDeferredValue(a)};
+c.useEffect=function(a,b){return g.current.useEffect(a,b)};c.useId=function(){return g.current.useId()};c.useImperativeHandle=function(a,b,c){return g.current.useImperativeHandle(a,b,c)};c.useInsertionEffect=function(a,b){return g.current.useInsertionEffect(a,b)};c.useLayoutEffect=function(a,b){return g.current.useLayoutEffect(a,b)};c.useMemo=function(a,b){return g.current.useMemo(a,b)};c.useReducer=function(a,b,c){return g.current.useReducer(a,b,c)};c.useRef=function(a){return g.current.useRef(a)};
+c.useState=function(a){return g.current.useState(a)};c.useSyncExternalStore=function(a,b,c){return g.current.useSyncExternalStore(a,b,c)};c.useTransition=function(){return g.current.useTransition()};c.version="18.3.1"});
+})();

packages/noodl-viewer-react/static/ssr/package.json

@@ -15,8 +15,8 @@
     "express": "^4.18.2",
     "node-fetch": "^3.3.1",
     "node-cache": "^5.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "xmlhttprequest": "^1.8.0"
   },
   "devDependencies": {

project-examples/version 1.1.0/template-project/project-truncated.json

@@ -0,0 +1 @@
+{"name":"Noodl Starter Template","components":[{"name":"/#__cloud__/SendGrid/Send Email","id":"55e43c55-c5ec-c1bb-10ea-fdd520e6dc28","graph":{"connections":[{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"Do","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"run"},{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"Text","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-Text"},{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"Html","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-Html"},{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"To","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-To"},{"fromId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","fromProperty":"out-Success","toId":"10a94c4f-0c3e-5250-70f2-5bd02a335402","toProperty":"Success"},{"fromId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","fromProperty":"out-Failure","toId":"10a94c4f-0c3e-5250-70f2-5bd02a335402","toProperty":"Failure"},{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"From","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-From"},{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"Subject","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-Subject"},{"fromId":"3efa1bbb-61fa-71ac-931a-cb900841f03c","fromProperty":"API Key","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-APIKey"},{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"CC","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-CC"},{"fromId":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","fromProperty":"BCC","toId":"ab378886-2b3f-7ad0-6eff-75318b66fe21","toProperty":"in-BCC"}],"roots":[{"id":"a5af92ae-5a67-8e9a-edee-3e83a50a9810","type":"Component Inputs","x":-312,"y":-62,"parameters":{},"ports":[{"name":"Do","plug":"output","type":"*","index":0}