<link rel="stylesheet" href="path/to/mtx-flow.bundle.css">
<script src="path/to/mtx-flow.bundle.min.js"></script>

<script>
  // Everything is under window.mtx
  console.log(mtx.VERSION); // "1.0.0-alpha.1"
</script>

npm install @mtx/flow
# or
yarn add @mtx/flow

import { State, Modal, Dom, Utils, Icons } from '@mtx/flow';

const state = new State('app');
state.set('theme', 'dark');

// Promise-based, no callback spaghetti
await mtx.Modal.alert('Welcome!', 'Hello World');
console.log('User clicked OK');

const state = new mtx.State('myApp');

// Typed set/get
state.set('user', { name: 'John', role: 'admin' });
const user = state.get('user');  // { name: 'John', role: 'admin' }

// Watch for changes
const unsubscribe = state.onChange('user', (newVal, oldVal) => {
  console.log('User changed:', newVal);
});

// Cleanup
unsubscribe();

const picker = new mtx.Dom.Picker({
  onPick: (result) => {
    console.log(result.selector);   // e.g., "#main-nav .btn-login"
    console.log(result.strategy);   // "css" | "id" | "auto"
    console.log(result.element);    // HTMLElement
  },
  onCancel: () => console.log('Cancelled')
});

picker.start();  // Click any element to pick it

src/
├── core/                    # Foundation (always loaded)
│   ├── mtx.ts               # Namespace, config, version
│   ├── mtx-state.ts         # State storage manager
│   ├── mtx-utils.ts         # Shared utilities
│   └── mtx-icons.ts         # SVG icon bundle
├── modules/                 # Feature modules (tree-shakeable)
│   ├── mtx-dom.ts           # Element Picker & DOM resolver
│   └── mtx-modal.ts         # Popup / Modal / Tooltip engine
├── styles/                  # CSS design system
│   ├── variables.css        # --mtxf-* tokens
│   ├── reset.css            # Scoped reset (:where)
│   ├── modal.css            # Modal component styles
│   └── animations.css       # Keyframe presets
└── index.ts                 # Bundle entry point

// Render into a container
mtx.Icons.render(document.getElementById('icon-slot'), mtx.Icons.fa.gear, {
  size: 20,
  color: '#0070f3',
  class: 'my-icon'
});

// Or use the raw SVG string
element.innerHTML = mtx.Icons.fa.circleCheck;

const shape = mtx.Draw.rect('#my-element', { color: 'blue' });

shape.update({ color: 'red', strokeWidth: 4 }); // update properties
shape.refresh();                                // force recalculate position
shape.remove();                                 // erase from DOM

const anim = mtx.Anim.play({
  effect: 'glow',
  target: document.body, // document.body or viewport
  duration: 3000,
  loop: true,
  color: '#0da84e', // Glow border & shadow color
  glowSize: 20, // Shadow blur radius in pixels
  glowBorderWidth: 4, // Neon frame border width in pixels
  glowMinOpacity: 0.4, // Pulsing minimum opacity level
  glowMaxOpacity: 1.0, // Pulsing maximum opacity level
  glowBlinkSpeedMultiplier: 1.0, // Speed multiplier for blinking dot
  showRecBadge: true, // Display top-right RED blinking REC badge
  onComplete: () => console.log('Done!')
});

anim.pause();
anim.resume();
anim.stop();

const tl = new mtx.Timeline({
  autoplay: false,
  loop: false,
  onComplete: () => console.log('Timeline complete')
});

tl.add({ at: 0,      effect: 'typewriter', target: '#title', duration: 1000 })
  .add({ at: '+=200', effect: 'highlight-text', target: '#title', duration: 500 })
  .add({ at: '+=100', effect: 'draw-circle', target: '#button', duration: 800 });

tl.play();
tl.seek(1500); // Seek to 1.5s mark

const conn = new mtx.Connect({
  from: '#box-a',
  to: '#box-b',
  type: 'elbow',
  color: '#0070f3',
  animated: true,
});

conn.attach(); // Add to DOM and begin observers
conn.update({ type: 'curved', color: 'red' }); // update live properties
conn.detach(); // remove from DOM and stop observers

const player = new mtx.ScenePlayer(scriptJson, {
  mode: 'watch', // 'watch' (simulation) | 'practice' (interactive)
  autoplay: true,
  speed: 1,      // 0.5 to 2
  loop: false,
  onComplete: () => console.log('Scene finished!'),
});
player.start();

const script = new mtx.SceneBuilder('guide-id', 'Form Guide')
  .scene('step-1', 'Fill Form')
  .act('Enter Username')
  .action({ type: 'click', target: '#user-input' })
  .action({ type: 'type', target: '#user-input', text: 'ironman' })
  .build();

const tour = new mtx.Tour({
  steps: [
    { element: '#logo', title: 'Welcome', content: 'This is the main logo.' },
    { element: '#search', title: 'Search', content: 'Search docs here.' }
  ],
  keyboard: true, // arrow keys navigation
  scrollToElement: true,
});
tour.start();

const help = new mtx.TourHelp({
  items: [
    {
      element: '#input-username',
      title: 'Info',
      content: 'Unique username required.',
      animate: 'pulse',
    }
  ]
});
help.show();

const picker = new mtx.TourPicker({
  onPick: (info) => console.log('Picked step:', info),
  onSave: (items) => console.log('Saved custom steps:', items)
});

// Import existing steps for editing
picker.importItems([
  { element: '#logo', title: 'Welcome', content: 'This is the main logo.' },
  { element: '#search', title: 'Search Docs', content: 'Search input.' }
]);

picker.enable(); // starts picker mode
picker.disable(); // stops picker mode

const diagram = new mtx.Diagram({
  container: '#canvas-container',
  readOnly: false
});

// Add Nodes
const n1 = diagram.addNode({ id: 'start', x: 50, y: 100, label: 'Start' });
const n2 = diagram.addNode({ id: 'end', x: 250, y: 100, label: 'End' });

// Connect Nodes
diagram.connect('start', 'end', {
  type: 'curved',
  color: '#0070f3',
  animated: true
});

diagram.undo(); // Undo last drag/add
diagram.redo(); // Redo

// Export compiled standalone SVG string
const svgString = diagram.exportSVG();

const recorder = new mtx.Recorder({
  captureClick: true,         // Record click events
  captureType: true,          // Record typing events
  captureScroll: true,        // Record scroll events
  recordDelays: true,         // Record elapsed time between events as 'wait' steps
  maxDelay: 5000,             // Max duration of wait steps (ms)
  showPanel: true,            // Show floating control panel UI
  panelPosition: 'top-right', // 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
  scriptName: 'My Guide',
});
recorder.start();

recorder.start();             // Start recording
recorder.pause();             // Pause recording
recorder.resume();            // Resume recording
recorder.stop();              // Stop recording
recorder.undoLast();          // Pop and discard the last captured action
recorder.export();            // Get the SceneScript JSON object
recorder.exportJSON();        // Get the SceneScript formatted JSON string
recorder.exportToFile('f.json'); // Trigger download of JSON file
recorder.destroy();           // Cleanup and remove the UI panel

recorder.addAnnotation({
  variant: 'tooltip',
  title: 'Input Step',
  content: 'Please enter your account password here to proceed.',
  target: '#password-input',
});

// Initialize transform overlay for a box
const transform = new mtx.TransformManager({
  element: document.getElementById('box-1'),
  maintainAspectRatio: true,
  scale: 1.0,
  onTransform: (coords) => {
    console.log('Coordinates changed:', coords); // e.g., { left: '10.5%', top: '22.0%', ... }
  },
  onDuplicate: (el) => {
    // Clone and place next to the original
    const clone = el.cloneNode(true);
    clone.style.left = '50%';
    clone.style.top = '50%';
    el.parentElement.appendChild(clone);
    
    // Automatically attach a new manager to the cloned element
    new mtx.TransformManager({ element: clone });
  },
  onDelete: (el) => {
    el.remove();
  }
});

// Update scale on zoom change
window.addEventListener('zoom-change', (e) => {
  transform.setScale(e.detail.zoomFactor);
});