diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c872416
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+*.log
+.DS_Store
+dist/*.map
diff --git a/ANALYSIS.md b/ANALYSIS.md
new file mode 100644
index 0000000..0c12888
--- /dev/null
+++ b/ANALYSIS.md
@@ -0,0 +1,422 @@
+# draw.io Custom Shapes with JavaScript Logic — Architecture Analysis
+
+## Executive Summary
+
+**Can you build custom shapes with JS logic and import them as a library into draw.io?**
+
+**YES** — via the **Plugin system**. draw.io supports fully programmable shapes written in JavaScript that can be loaded as plugins in both the desktop (Electron) app and self-hosted/web instances. These plugins can define shapes with conditional rendering, computed geometry, dynamic behavior, and expose them in the sidebar palette for drag-and-drop use.
+
+The standard "library import" (File > Open Library) only supports declarative XML — but plugins give you **more** power, not less.
+
+---
+
+## Table of Contents
+
+1. [Shape Systems Overview](#shape-systems-overview)
+2. [XML Stencils (Declarative)](#xml-stencils-declarative)
+3. [JavaScript Shape Classes (Programmatic)](#javascript-shape-classes-programmatic)
+4. [The Plugin Architecture](#the-plugin-architecture)
+5. [Loading Plugins in Desktop App](#loading-plugins-in-desktop-app)
+6. [Loading Plugins in Web/Self-Hosted](#loading-plugins-in-webself-hosted)
+7. [Shape Registration Flow](#shape-registration-flow)
+8. [Canvas API Reference](#canvas-api-reference)
+9. [Limitations and Considerations](#limitations-and-considerations)
+10. [Comparison Matrix](#comparison-matrix)
+
+---
+
+## Shape Systems Overview
+
+draw.io has **two completely separate shape definition systems**:
+
+| System | Format | JS Logic? | Import Method |
+|--------|--------|-----------|---------------|
+| XML Stencils | `.xml` stencil files | ❌ No (declarative only) | `mxStencilRegistry` / Open Library |
+| JS Shape Classes | `.js` files | ✅ Full programmatic | Plugin system / `mxCellRenderer.registerShape()` |
+
+When a cell is rendered, the resolution order is:
+
+```
+Cell style "shape=NAME" →
+  1. mxCellRenderer.defaultShapes[NAME]  → JS Shape class
+  2. mxStencilRegistry.stencils[NAME]    → XML Stencil instance
+  3. Dynamic loading (if enabled)        → Load from library registry
+```
+
+---
+
+## XML Stencils (Declarative)
+
+Located in: `src/main/webapp/stencils/*.xml`
+
+XML stencils define shapes using a drawing vocabulary:
+
+```xml
+<shapes name="mxgraph.rack.Oracle">
+  <shape name="Server" w="19.5" h="121" aspect="variable">
+    <connections>
+      <constraint x="0.5" y="0" perimeter="0" name="top"/>
+      <constraint x="0.5" y="1" perimeter="0" name="bottom"/>
+    </connections>
+    <background>
+      <rect x="0" y="0" w="19.5" h="121"/>
+    </background>
+    <foreground>
+      <fillstroke/>
+      <rect x="2" y="5" w="15.5" h="20"/>
+      <stroke/>
+    </foreground>
+  </shape>
+</shapes>
+```
+
+### Capabilities
+- Drawing primitives: `move`, `line`, `quad`, `curve`, `arc`, `rect`, `roundrect`, `ellipse`, `close`
+- Styling: `strokecolor`, `fillcolor`, `fontcolor`, `alpha`, `strokewidth`, `dashed`
+- State: `save` / `restore`
+- Sub-shapes: `<include-shape name="...">`
+
+### Limitations
+- **No loops, conditionals, or computed geometry**
+- **No JavaScript execution** (except limited `allowEval` for text/image values)
+- Purely static vector drawing instructions
+
+---
+
+## JavaScript Shape Classes (Programmatic)
+
+Located in: `src/main/webapp/shapes/*.js` (~47 files)
+
+Examples: `mxBootstrap.js`, `mxKubernetes.js`, `mxElectrical.js`, `mxNetworks.js`, `mxRack.js`
+
+JS shapes extend `mxShape` and have **full programmatic power**:
+
+```javascript
+function MyShape(bounds, fill, stroke, strokewidth) {
+    mxShape.call(this);
+    this.bounds = bounds;
+    this.fill = fill;
+    this.stroke = stroke;
+    this.strokewidth = (strokewidth != null) ? strokewidth : 1;
+}
+
+mxUtils.extend(MyShape, mxShape);
+
+MyShape.prototype.paintVertexShape = function(c, x, y, w, h) {
+    c.translate(x, y);
+
+    // Full JS: conditionals, loops, math, style reading
+    var mode = mxUtils.getValue(this.style, 'mode', 'default');
+    var segments = parseInt(mxUtils.getValue(this.style, 'segments', '4'));
+
+    if (mode === 'alert') {
+        c.setFillColor('#ff4444');
+    }
+
+    // Computed geometry
+    for (var i = 0; i < segments; i++) {
+        var segH = h / segments;
+        c.rect(0, i * segH, w, segH - 2);
+        c.fillAndStroke();
+    }
+};
+
+// Register globally
+mxCellRenderer.registerShape('mxgraph.myLib.myShape', MyShape);
+```
+
+### Capabilities
+- Conditional rendering based on style properties
+- Loops and computed geometry
+- Math and dynamic calculations
+- Reading per-instance style parameters via `mxUtils.getValue(this.style, ...)`
+- Full canvas API access
+- Custom connection points
+- Override `getConstraints()` for dynamic connection point generation
+
+---
+
+## The Plugin Architecture
+
+### Plugin Structure
+
+Every draw.io plugin follows this pattern:
+
+```javascript
+// Shape definitions (execute immediately at load time)
+function CustomShape() { /* ... */ }
+mxUtils.extend(CustomShape, mxShape);
+CustomShape.prototype.paintVertexShape = function(c, x, y, w, h) { /* ... */ };
+mxCellRenderer.registerShape('mxgraph.custom.shapeName', CustomShape);
+
+// UI integration (executes when draw.io is ready)
+Draw.loadPlugin(function(ui) {
+    // ui = EditorUi instance — full access to the application
+
+    // Add sidebar palette
+    var fns = [
+        ui.sidebar.createVertexTemplateEntry(
+            'shape=mxgraph.custom.shapeName;fillColor=#dae8fc;',
+            120, 80, '', 'My Custom Shape', null, null, 'search keywords'
+        )
+    ];
+    ui.sidebar.addPaletteFunctions('customPalette', 'My Custom Library', true, fns);
+
+    // Can also: add menus, actions, event listeners, modify graph behavior
+});
+```
+
+### What `Draw.loadPlugin(callback)` Provides
+
+The callback receives `ui` (EditorUi instance) with access to:
+
+| Object | Purpose |
+|--------|---------|
+| `ui.editor.graph` | The mxGraph instance (model, view, styles) |
+| `ui.sidebar` | Sidebar/palette management |
+| `ui.menus` | Menu system |
+| `ui.actions` | Action registry |
+| `ui.editor` | Editor instance |
+| Global: `mxShape`, `mxCellRenderer`, `mxUtils`, `mxConstants` | All mxGraph APIs |
+
+### Production Example: `rackF5.js`
+
+The `plugins/rackF5.js` file (1674 lines) is a real-world plugin that:
+- Defines ~20+ shape classes with full JS rendering
+- Uses conditionals based on style (`hasEars`, `isFront`, `isDC`, `psNum`)
+- Registers all shapes with `mxCellRenderer.registerShape()`
+- Adds a complete sidebar palette via `Draw.loadPlugin()`
+
+---
+
+## Loading Plugins in Desktop App
+
+The draw.io Electron app (desktop) has **full plugin support** via **Extras > Plugins**:
+
+### Method 1: Built-in Plugins
+A dropdown of pre-packaged plugins (`App.publicPlugin`):
+- `ex` (explore), `tips`, `svgdata`, `number`, `sql`, `props`, `text`, `anim`, `update`, `trees`, `replay`, `anon`, `webcola`, `tags`
+
+### Method 2: External Plugins (Custom `.js` Files)
+
+1. **Enable external plugins** (one-time):
+   - The app checks `requestSync('isPluginsEnabled')`
+   - If disabled, it shows "pluginsDisabled" message
+   - Enable via app preferences or configuration
+
+2. **Install your plugin**:
+   - Extras > Plugins → "Select File..."
+   - Native file dialog opens, filtered for `.js` files
+   - Plugin is copied to App Data folder (`installPlugin` action)
+   - Registered in `mxSettings`
+
+3. **Restart draw.io** — plugin loads on next startup
+
+### Loading sequence (from source):
+```
+App startup
+  → mxSettings.getPlugins() returns saved plugin list
+  → App.initPluginCallback() creates Draw object + queue
+  → For each plugin:
+    ├─ Built-in (starts with ./plugins/) → load relative path
+    └─ External → requestSync('getPluginFile') → load from file:// App Data
+  → Scripts loaded via <script> tags
+  → Draw.loadPlugin(callback) pushes to queue
+  → Once UI ready: queue callbacks invoked with EditorUi instance
+```
+
+### Security
+- Paths containing `..` are rejected
+- External plugins stored in sandboxed App Data folder
+- Non-built-in plugins blocked unless explicitly enabled
+
+### App Data locations:
+- **Linux**: `~/.config/draw.io/plugins/`
+- **Windows**: `%APPDATA%\draw.io\plugins\`
+- **macOS**: `~/Library/Application Support/draw.io/plugins/`
+
+---
+
+## Loading Plugins in Web/Self-Hosted
+
+### URL Parameter
+```
+https://your-drawio.com/?p=pluginKey
+```
+Where `pluginKey` maps to a path in `App.pluginRegistry`.
+
+### Configuration JSON
+In draw.io configuration (Extras > Configuration):
+```json
+{
+  "plugins": ["https://your-server.com/path/to/plugin.js"]
+}
+```
+
+### Self-Hosted Docker
+Set environment variable:
+```
+DRAWIO_PLUGINS_ALLOW_CUSTOM=true
+```
+
+Then configure via URL params or configuration JSON.
+
+### `ALLOW_CUSTOM_PLUGINS`
+In `Init.js`, `ALLOW_CUSTOM_PLUGINS` must be `true` for non-built-in plugin URLs. Self-hosted instances can set this; app.diagrams.net (cloud) restricts it.
+
+---
+
+## Shape Registration Flow
+
+```
+┌────────────────────────────────────────────────────────────┐
+│ Plugin .js file loaded (via <script> or eval)              │
+├────────────────────────────────────────────────────────────┤
+│                                                            │
+│  1. Shape class defined (extends mxShape)                  │
+│  2. paintVertexShape() implemented with JS logic           │
+│  3. mxCellRenderer.registerShape(name, Constructor)        │
+│     → stored in mxCellRenderer.defaultShapes[name]         │
+│                                                            │
+│  4. Draw.loadPlugin(function(ui) { ... })                  │
+│     → Callback queued until UI ready                       │
+│     → When invoked:                                        │
+│       a. Creates palette entries referencing shape names    │
+│       b. ui.sidebar.addPaletteFunctions(...)               │
+│       c. Shapes appear in sidebar for drag-and-drop        │
+│                                                            │
+├────────────────────────────────────────────────────────────┤
+│ At render time:                                            │
+│  Cell style: "shape=mxgraph.myLib.myShape;param=value;"    │
+│  → mxCellRenderer looks up defaultShapes['mxgraph.myLib.myShape'] │
+│  → Instantiates shape, calls paintVertexShape(c,x,y,w,h)  │
+│  → Shape reads style params, draws conditionally           │
+└────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Canvas API Reference
+
+The `c` parameter in `paintVertexShape(c, x, y, w, h)` is an `mxAbstractCanvas2D` instance:
+
+### Drawing
+| Method | Description |
+|--------|-------------|
+| `c.begin()` | Start a new path |
+| `c.moveTo(x, y)` | Move to point |
+| `c.lineTo(x, y)` | Line to point |
+| `c.quadTo(x1, y1, x2, y2)` | Quadratic curve |
+| `c.curveTo(x1, y1, x2, y2, x3, y3)` | Cubic curve |
+| `c.arcTo(rx, ry, angle, largeArc, sweep, x, y)` | Arc |
+| `c.close()` | Close path |
+| `c.rect(x, y, w, h)` | Rectangle |
+| `c.roundrect(x, y, w, h, dx, dy)` | Rounded rectangle |
+| `c.ellipse(x, y, w, h)` | Ellipse |
+
+### Rendering
+| Method | Description |
+|--------|-------------|
+| `c.fill()` | Fill current path |
+| `c.stroke()` | Stroke current path |
+| `c.fillAndStroke()` | Fill and stroke |
+
+### Style
+| Method | Description |
+|--------|-------------|
+| `c.setFillColor(color)` | Set fill color |
+| `c.setStrokeColor(color)` | Set stroke color |
+| `c.setStrokeWidth(width)` | Set stroke width |
+| `c.setFontColor(color)` | Set text color |
+| `c.setFontSize(size)` | Set font size |
+| `c.setFontFamily(family)` | Set font family |
+| `c.setAlpha(alpha)` | Set opacity (0-1) |
+| `c.setDashed(dashed)` | Toggle dashing |
+| `c.setDashPattern(pattern)` | Set dash pattern |
+| `c.setLineCap(cap)` | Line cap style |
+| `c.setLineJoin(join)` | Line join style |
+| `c.setShadow(shadow)` | Toggle shadow |
+| `c.setGradient(c1, c2, x, y, w, h, dir, a1, a2)` | Set gradient fill |
+
+### Transform & State
+| Method | Description |
+|--------|-------------|
+| `c.translate(x, y)` | Translate origin |
+| `c.rotate(theta, flipH, flipV, cx, cy)` | Rotate |
+| `c.scale(s)` | Scale |
+| `c.save()` | Save state |
+| `c.restore()` | Restore state |
+
+### Text & Images
+| Method | Description |
+|--------|-------------|
+| `c.text(x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir)` | Draw text |
+| `c.image(x, y, w, h, src, aspect, flipH, flipV)` | Draw image |
+
+### Reading Style Values
+```javascript
+var value = mxUtils.getValue(this.style, 'paramName', 'defaultValue');
+```
+
+---
+
+## Limitations and Considerations
+
+### What Plugins CAN Do
+- ✅ Define shapes with full JavaScript logic (conditionals, loops, computed geometry)
+- ✅ Read per-instance style parameters for dynamic rendering
+- ✅ Add sidebar palettes for drag-and-drop
+- ✅ Add menus, actions, keyboard shortcuts
+- ✅ Listen to graph events (selection, edit, etc.)
+- ✅ Modify export behavior
+- ✅ Override core graph methods
+- ✅ Access and manipulate the full graph model
+
+### What Plugins CANNOT Do
+- ❌ Be loaded via "File > Open Library" (that's XML-only)
+- ❌ Run in sandboxed/restricted mode on app.diagrams.net (cloud)
+- ❌ Persist custom shape data in the `.drawio` file beyond style strings
+- ❌ Add new file format support easily
+- ❌ Work across draw.io versions without potential API breakage (no stable plugin API contract)
+
+### Security Notes
+- Plugins execute with full page privileges
+- External plugins require explicit user opt-in
+- The desktop app sandboxes plugin storage to App Data
+- Self-hosted instances control plugin trust via `ALLOW_CUSTOM_PLUGINS`
+
+---
+
+## Comparison Matrix
+
+| Feature | XML Library | XML Stencil | JS Plugin |
+|---------|-------------|-------------|-----------|
+| Conditional rendering | ❌ | ❌ | ✅ |
+| Computed geometry | ❌ | ❌ | ✅ |
+| Loop-based drawing | ❌ | ❌ | ✅ |
+| Style-reactive | ❌ | Limited | ✅ |
+| Sidebar palette | ✅ | ✅ | ✅ |
+| Drag-and-drop | ✅ | ✅ | ✅ |
+| File > Open Library | ✅ | ⚠️ (via registry) | ❌ |
+| Desktop app support | ✅ | ✅ | ✅ |
+| Web app support | ✅ | ✅ | ⚠️ (config needed) |
+| User install difficulty | Easy | Moderate | Moderate |
+| Custom connection points | ❌ (fixed) | ✅ (XML) | ✅ (dynamic) |
+| Event handling | ❌ | ❌ | ✅ |
+| Menu integration | ❌ | ❌ | ✅ |
+
+---
+
+## Conclusion
+
+For building custom shapes **with JavaScript logic** that behave as a reusable library in draw.io:
+
+1. **Write a plugin** (`.js` file) that defines shape classes and registers them
+2. **Load it** via Extras > Plugins (desktop) or configuration JSON (web/self-hosted)
+3. **Shapes appear** in the sidebar palette, fully interactive with JS-powered rendering
+
+The plugin system is the officially supported, production-proven mechanism — used internally by draw.io for shapes like F5 rack equipment, and by the ~47 shape library files bundled with the application.
+
+---
+
+*Analysis performed on draw.io source (https://github.com/jgraph/drawio) — commit at time of analysis.*
diff --git a/README.md b/README.md
index bce1541..5b0df19 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,159 @@
-# drawio-custom-shapes
+# draw.io Custom Shapes Example Plugin
 
-Analysis and example plugin for building custom draw.io shapes with JavaScript logic
\ No newline at end of file
+A fully buildable example plugin demonstrating how to create custom draw.io shapes with JavaScript logic.
+
+## What This Is
+
+A draw.io plugin that registers custom shapes with **programmatic rendering** — shapes that use conditionals, loops, computed geometry, and style-reactive behavior. Unlike XML stencils (which are purely declarative), these shapes have full JavaScript power.
+
+## Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Development build (with source maps)
+npm run build:dev
+
+# Production build (minified)
+npm run build
+
+# Watch mode (rebuild on changes)
+npm run watch
+```
+
+Output: `dist/drawio-custom-shapes.js`
+
+## Installation in draw.io
+
+### Desktop App (Electron)
+
+1. Build the plugin: `npm run build`
+2. Open draw.io desktop
+3. **Extras > Plugins**
+4. Enable external plugins if prompted
+5. Click **"Select File..."** → navigate to `dist/drawio-custom-shapes.js`
+6. Restart draw.io
+7. Find "Custom Shapes Example" palette in the sidebar
+
+### Self-Hosted (Docker)
+
+1. Build the plugin: `npm run build`
+2. Copy `dist/drawio-custom-shapes.js` to your draw.io plugins directory
+3. Set environment: `DRAWIO_PLUGINS_ALLOW_CUSTOM=true`
+4. Add to configuration:
+   ```json
+   {
+     "plugins": ["/plugins/drawio-custom-shapes.js"]
+   }
+   ```
+5. Restart the container
+
+### Web (URL parameter)
+
+If you host the plugin file at a URL:
+```
+https://your-drawio.com/?p=YOUR_PLUGIN_KEY
+```
+
+## Project Structure
+
+```
+├── src/
+│   ├── index.js              # Plugin entry point (Draw.loadPlugin wrapper)
+│   ├── shapes/
+│   │   ├── StatusIndicator.js    # Conditional rendering based on status
+│   │   ├── ProgressBar.js        # Computed geometry (percentage-based)
+│   │   ├── DataFlowArrow.js      # Dynamic arrow with animation markers
+│   │   ├── HexagonCluster.js     # Loop-based hexagonal grid
+│   │   └── MetricGauge.js        # Radial gauge with computed arcs
+│   └── palette.js            # Sidebar palette registration
+├── dist/                     # Build output
+├── webpack.config.js         # Build configuration
+├── package.json
+├── ANALYSIS.md               # Full architecture analysis
+└── README.md
+```
+
+## Shape Catalog
+
+### 1. Status Indicator (`customShapes.statusIndicator`)
+A shape that changes color and icon based on a `status` style parameter.
+- Styles: `status=ok|warning|error|unknown`
+- Demonstrates: conditional rendering, style reading
+
+### 2. Progress Bar (`customShapes.progressBar`)
+A horizontal bar that fills based on a percentage value.
+- Styles: `progress=0..100`, `barColor=#4CAF50`
+- Demonstrates: computed geometry, value-based rendering
+
+### 3. Data Flow Arrow (`customShapes.dataFlowArrow`)
+A directional arrow with animated flow indicators.
+- Styles: `direction=right|left|both`, `flowSpeed=fast|medium|slow`
+- Demonstrates: dynamic path generation, pattern rendering
+
+### 4. Hexagon Cluster (`customShapes.hexCluster`)
+A grid of hexagons that adapts to the cell size.
+- Styles: `hexCount=7`, `hexFill=#E3F2FD`
+- Demonstrates: loop-based drawing, mathematical geometry
+
+### 5. Metric Gauge (`customShapes.metricGauge`)
+A radial gauge (speedometer-style) showing a value within a range.
+- Styles: `value=75`, `minVal=0`, `maxVal=100`, `zones=green,yellow,red`
+- Demonstrates: arc computation, gradient zones, text rendering
+
+## Customizing
+
+### Adding a New Shape
+
+1. Create a new file in `src/shapes/YourShape.js`:
+
+```javascript
+import { registerShape, getValue } from '../utils';
+
+export function YourShapeName() {
+    mxShape.call(this);
+}
+
+mxUtils.extend(YourShapeName, mxShape);
+
+YourShapeName.prototype.paintVertexShape = function(c, x, y, w, h) {
+    c.translate(x, y);
+
+    // Read style parameters
+    var myParam = getValue(this.style, 'myParam', 'default');
+
+    // Draw with full JS logic
+    c.begin();
+    c.moveTo(0, 0);
+    c.lineTo(w, h);
+    c.stroke();
+};
+
+// Register the shape
+registerShape('customShapes.yourShape', YourShapeName);
+```
+
+2. Import it in `src/index.js`
+3. Add a palette entry in `src/palette.js`
+4. Rebuild: `npm run build`
+
+### Style Parameters
+
+Shapes read parameters from the cell's style string:
+```
+shape=customShapes.yourShape;myParam=value;fillColor=#fff;
+```
+
+Access in code:
+```javascript
+var val = mxUtils.getValue(this.style, 'myParam', 'default');
+```
+
+## Architecture Notes
+
+See [ANALYSIS.md](./ANALYSIS.md) for the full technical analysis of how draw.io's shape systems work, including the stencil registry, cell renderer, and plugin loading mechanisms.
+
+## License
+
+MIT
diff --git a/dist/drawio-custom-shapes.js b/dist/drawio-custom-shapes.js
new file mode 100644
index 0000000..24d4433
--- /dev/null
+++ b/dist/drawio-custom-shapes.js
@@ -0,0 +1 @@
+(()=>{var e={294(){function e(){mxShape.call(this)}mxUtils.extend(e,mxShape),e.prototype.cst={SHAPE:"customShapes.dataFlowArrow"},e.prototype.customProperties=[{name:"direction",dispName:"Direction",type:"enum",defVal:"right",enumList:[{val:"right",dispName:"Right"},{val:"left",dispName:"Left"},{val:"both",dispName:"Bidirectional"}]},{name:"flowSpeed",dispName:"Flow Speed",type:"enum",defVal:"medium",enumList:[{val:"fast",dispName:"Fast"},{val:"medium",dispName:"Medium"},{val:"slow",dispName:"Slow"}]}],e.prototype.paintVertexShape=function(e,t,o,l,r){e.translate(t,o);var a=mxUtils.getValue(this.style,"direction","right"),s=mxUtils.getValue(this.style,"flowSpeed","medium"),n=mxUtils.getValue(this.style,"flowColor","#1976D2"),i=parseInt(mxUtils.getValue(this.style,"thickness","3")),m=r/2,p=Math.min(r/2,12),h="left"===a||"both"===a?p:0,u="right"===a||"both"===a?l-p:l;e.setStrokeColor(n),e.setStrokeWidth(i),e.setFillColor(n),e.begin(),e.moveTo(h,m),e.lineTo(u,m),e.stroke(),"right"!==a&&"both"!==a||(e.begin(),e.moveTo(l-p,m-p),e.lineTo(l,m),e.lineTo(l-p,m+p),e.close(),e.fillAndStroke()),"left"!==a&&"both"!==a||(e.begin(),e.moveTo(p,m-p),e.lineTo(0,m),e.lineTo(p,m+p),e.close(),e.fillAndStroke());var c={fast:8,medium:14,slow:22},x=c[s]||c.medium,d=Math.max(2,.8*i);e.setFillColor("#FFFFFF"),e.setStrokeWidth(0);for(var C=h+x;C<u-x/2;C+=x)e.ellipse(C-d,m-d,2*d,2*d),e.fill();e.setStrokeColor(n),e.setAlpha(.15),e.setStrokeWidth(3*i),e.begin(),e.moveTo(h,m),e.lineTo(u,m),e.stroke()},mxCellRenderer.registerShape(e.prototype.cst.SHAPE,e)},421(){function e(){mxShape.call(this)}mxUtils.extend(e,mxShape),e.prototype.cst={SHAPE:"customShapes.hexCluster"},e.prototype.customProperties=[{name:"hexCount",dispName:"Hex Count (across)",type:"int",min:1,max:10,defVal:3},{name:"hexFill",dispName:"Hex Fill Color",type:"color",defVal:"#E3F2FD"},{name:"hexStroke",dispName:"Hex Stroke Color",type:"color",defVal:"#1565C0"}],e.prototype.drawHexagon=function(e,t,o,l){e.begin();for(var r=0;r<6;r++){var a=Math.PI/3*r-Math.PI/6,s=t+l*Math.cos(a),n=o+l*Math.sin(a);0===r?e.moveTo(s,n):e.lineTo(s,n)}e.close()},e.prototype.paintVertexShape=function(e,t,o,l,r){e.translate(t,o);var a=parseInt(mxUtils.getValue(this.style,"hexCount","3")),s=mxUtils.getValue(this.style,"hexFill","#E3F2FD"),n=mxUtils.getValue(this.style,"hexStroke","#1565C0"),i=mxUtils.getValue(this.style,"filled",""),m=r-8,p=(l-8)/(a=Math.max(1,Math.min(10,a))),h=p/Math.sqrt(3),u=1.5*h,c=Math.max(1,Math.floor((m-.5*h)/u)),x={};i&&i.split(",").forEach(function(e){x[parseInt(e.trim())]=!0});var d=0;e.setStrokeColor(n),e.setStrokeWidth(1.5);for(var C=0;C<c;C++)for(var S=C%2==0?a:a-1,g=C%2==0?0:p/2,f=0;f<S;f++){var F=4+g+p/2+f*p,k=4+h+C*u;if(!(k+h>r)){var y=""===i||x[d];e.setFillColor(y?s:"#FAFAFA"),e.setAlpha(y?1:.5),this.drawHexagon(e,F,k,.9*h),e.fillAndStroke(),e.setAlpha(1),d++}}e.setStrokeColor(n),e.setStrokeWidth(1),e.setAlpha(.3),e.setDashed(!0),e.rect(0,0,l,r),e.stroke()},mxCellRenderer.registerShape(e.prototype.cst.SHAPE,e)},504(){function e(){mxShape.call(this)}mxUtils.extend(e,mxShape),e.prototype.cst={SHAPE:"customShapes.metricGauge"},e.prototype.customProperties=[{name:"value",dispName:"Value",type:"float",defVal:75},{name:"minVal",dispName:"Min Value",type:"float",defVal:0},{name:"maxVal",dispName:"Max Value",type:"float",defVal:100},{name:"zones",dispName:"Zone Colors (comma-sep)",type:"string",defVal:"#4CAF50,#FF9800,#F44336"},{name:"label",dispName:"Label",type:"string",defVal:""}],e.prototype.paintVertexShape=function(e,t,o,l,r){e.translate(t,o);var a=parseFloat(mxUtils.getValue(this.style,"value","75")),s=parseFloat(mxUtils.getValue(this.style,"minVal","0")),n=parseFloat(mxUtils.getValue(this.style,"maxVal","100")),i=mxUtils.getValue(this.style,"zones","#4CAF50,#FF9800,#F44336"),m=mxUtils.getValue(this.style,"label",""),p=parseInt(mxUtils.getValue(this.style,"arcWidth","8")),h=i.split(","),u=l/2,c=.7*r,x=Math.min(l/2,.65*r)-p,d=Math.PI,C=Math.PI,S=h.length,g=C/S;e.setStrokeWidth(p),e.setLineCap("round");for(var f=0;f<S;f++){e.setStrokeColor(h[f]),e.setAlpha(.3);var F=d-f*g,k=F-g;e.begin();for(var y=0;y<=20;y++){var V=F+y/20*(k-F),E=u+x*Math.cos(V),w=c-x*Math.sin(V);0===y?e.moveTo(E,w):e.lineTo(E,w)}e.stroke()}var v=Math.max(0,Math.min(1,(a-s)/(n-s))),A=d-C*v,T=h[Math.min(S-1,Math.floor(v*S))];e.setStrokeColor(T),e.setAlpha(1),e.setStrokeWidth(p);var M=Math.max(2,Math.floor(40*v));for(e.begin(),y=0;y<=M;y++)V=d+y/M*(A-d),E=u+x*Math.cos(V),w=c-x*Math.sin(V),0===y?e.moveTo(E,w):e.lineTo(E,w);e.stroke(),e.setStrokeColor("#333333"),e.setStrokeWidth(2),e.setAlpha(1);var b=.85*x,N=u+b*Math.cos(A),P=c-b*Math.sin(A);e.begin(),e.moveTo(u,c),e.lineTo(N,P),e.stroke(),e.setFillColor("#333333"),e.ellipse(u-4,c-4,8,8),e.fill(),e.setFontColor("#333333"),e.setFontSize(Math.min(.4*x,24)),e.setFontStyle(1),e.text(u,c+.25*x,0,0,String(Math.round(10*a)/10),mxConstants.ALIGN_CENTER,mxConstants.ALIGN_MIDDLE,0,null,0,0,0),m&&(e.setFontColor("#666666"),e.setFontSize(Math.min(.2*x,12)),e.setFontStyle(0),e.text(u,c+.45*x,0,0,m,mxConstants.ALIGN_CENTER,mxConstants.ALIGN_MIDDLE,0,null,0,0,0)),e.setFontColor("#999999"),e.setFontSize(Math.min(.15*x,10)),e.text(u-x,c+12,0,0,String(s),mxConstants.ALIGN_CENTER,mxConstants.ALIGN_TOP,0,null,0,0,0),e.text(u+x,c+12,0,0,String(n),mxConstants.ALIGN_CENTER,mxConstants.ALIGN_TOP,0,null,0,0,0)},mxCellRenderer.registerShape(e.prototype.cst.SHAPE,e)},879(){function e(){mxShape.call(this)}mxUtils.extend(e,mxShape),e.prototype.cst={SHAPE:"customShapes.progressBar"},e.prototype.customProperties=[{name:"progress",dispName:"Progress (%)",type:"int",min:0,max:100,defVal:50},{name:"barColor",dispName:"Bar Color",type:"color",defVal:"#4CAF50"}],e.prototype.paintVertexShape=function(e,t,o,l,r){e.translate(t,o);var a=parseInt(mxUtils.getValue(this.style,"progress","50")),s=mxUtils.getValue(this.style,"barColor","#4CAF50"),n=mxUtils.getValue(this.style,"showPercent","1"),i=mxUtils.getValue(this.style,"animated","0");a=Math.max(0,Math.min(100,a));var m=Math.min(r/2,8);e.setFillColor("#E0E0E0"),e.setStrokeColor("#BDBDBD"),e.setStrokeWidth(1),e.roundrect(0,0,l,r,m,m),e.fillAndStroke();var p=(l-4)*a/100;if(p>0&&(e.setStrokeWidth(0),e.setFillColor(s),a<30?e.setFillColor("#F44336"):a<70?e.setFillColor(s):e.setFillColor("#2E7D32"),e.roundrect(2,2,p,r-4,m-1,m-1),e.fill(),"1"===i&&p>10)){e.setStrokeColor("rgba(255,255,255,0.3)"),e.setStrokeWidth(2);for(var h=12;h<p-4;h+=12)e.begin(),e.moveTo(2+h,2),e.lineTo(2+h-4,r-2),e.stroke()}"1"===n&&(e.setFontColor(a>50?"#FFFFFF":"#333333"),e.setFontSize(Math.min(.6*r,14)),e.setFontStyle(1),e.text(l/2,r/2,0,0,a+"%",mxConstants.ALIGN_CENTER,mxConstants.ALIGN_MIDDLE,0,null,0,0,0))},mxCellRenderer.registerShape(e.prototype.cst.SHAPE,e)},656(){function e(){mxShape.call(this)}mxUtils.extend(e,mxShape),e.prototype.cst={SHAPE:"customShapes.statusIndicator"},e.prototype.customProperties=[{name:"status",dispName:"Status",type:"enum",defVal:"unknown",enumList:[{val:"ok",dispName:"OK"},{val:"warning",dispName:"Warning"},{val:"error",dispName:"Error"},{val:"unknown",dispName:"Unknown"}]}],e.prototype.paintVertexShape=function(e,t,o,l,r){e.translate(t,o);var a=mxUtils.getValue(this.style,"status","unknown"),s=mxUtils.getValue(this.style,"showLabel","1"),n={ok:{fill:"#4CAF50",stroke:"#2E7D32",icon:"✓"},warning:{fill:"#FF9800",stroke:"#E65100",icon:"⚠"},error:{fill:"#F44336",stroke:"#B71C1C",icon:"✗"},unknown:{fill:"#9E9E9E",stroke:"#424242",icon:"?"}},i=n[a]||n.unknown;if(e.setFillColor(i.fill),e.setStrokeColor(i.stroke),e.setStrokeWidth(2),l>1.5*r){var m=r/2;e.begin(),e.moveTo(m,0),e.lineTo(l-m,0),e.arcTo(m,m,0,0,1,l-m,r),e.lineTo(m,r),e.arcTo(m,m,0,0,1,m,0),e.close(),e.fillAndStroke()}else{var p=Math.min(l,r),h=l/2,u=r/2;e.ellipse(h-p/2,u-p/2,p,p),e.fillAndStroke()}"1"===s&&(e.setFontColor("#FFFFFF"),e.setFontSize(.4*Math.min(l,r)),e.setFontStyle(1),e.text(l/2,r/2,0,0,i.icon,mxConstants.ALIGN_CENTER,mxConstants.ALIGN_MIDDLE,0,null,0,0,0)),"error"===a&&(e.setStrokeColor(i.fill),e.setStrokeWidth(1),e.setAlpha(.3),e.ellipse(-4,-4,l+8,r+8),e.stroke())},mxCellRenderer.registerShape(e.prototype.cst.SHAPE,e)}};const t={};function o(l){const r=t[l];if(void 0!==r)return r.exports;const a=t[l]={exports:{}};return e[l](a,a.exports,o),a.exports}(()=>{"use strict";o(656),o(879),o(294),o(421),o(504),Draw.loadPlugin(function(e){!function(e){var t=e.sidebar,o=[t.createVertexTemplateEntry("shape=customShapes.statusIndicator;status=ok;showLabel=1;fillColor=none;strokeColor=none;",60,40,"","Status: OK",null,null,"status indicator ok green check"),t.createVertexTemplateEntry("shape=customShapes.statusIndicator;status=warning;showLabel=1;fillColor=none;strokeColor=none;",60,40,"","Status: Warning",null,null,"status indicator warning orange"),t.createVertexTemplateEntry("shape=customShapes.statusIndicator;status=error;showLabel=1;fillColor=none;strokeColor=none;",60,40,"","Status: Error",null,null,"status indicator error red"),t.createVertexTemplateEntry("shape=customShapes.statusIndicator;status=unknown;showLabel=1;fillColor=none;strokeColor=none;",60,40,"","Status: Unknown",null,null,"status indicator unknown grey"),t.createVertexTemplateEntry("shape=customShapes.statusIndicator;status=ok;showLabel=1;fillColor=none;strokeColor=none;",120,30,"","Status Pill: OK",null,null,"status pill indicator wide"),t.createVertexTemplateEntry("shape=customShapes.progressBar;progress=75;barColor=#4CAF50;showPercent=1;fillColor=none;strokeColor=none;",200,30,"","Progress Bar (75%)",null,null,"progress bar percentage loading"),t.createVertexTemplateEntry("shape=customShapes.progressBar;progress=30;barColor=#FF9800;showPercent=1;fillColor=none;strokeColor=none;",200,30,"","Progress Bar (30%)",null,null,"progress bar low warning"),t.createVertexTemplateEntry("shape=customShapes.progressBar;progress=90;barColor=#4CAF50;showPercent=1;animated=1;fillColor=none;strokeColor=none;",200,30,"","Progress Bar Animated (90%)",null,null,"progress bar animated stripes"),t.createVertexTemplateEntry("shape=customShapes.dataFlowArrow;direction=right;flowSpeed=medium;flowColor=#1976D2;fillColor=none;strokeColor=none;",180,40,"","Data Flow → Right",null,null,"data flow arrow right direction"),t.createVertexTemplateEntry("shape=customShapes.dataFlowArrow;direction=left;flowSpeed=medium;flowColor=#1976D2;fillColor=none;strokeColor=none;",180,40,"","Data Flow ← Left",null,null,"data flow arrow left direction"),t.createVertexTemplateEntry("shape=customShapes.dataFlowArrow;direction=both;flowSpeed=fast;flowColor=#7B1FA2;fillColor=none;strokeColor=none;",180,40,"","Data Flow ↔ Bidirectional",null,null,"data flow arrow bidirectional both"),t.createVertexTemplateEntry("shape=customShapes.hexCluster;hexCount=3;hexFill=#E3F2FD;hexStroke=#1565C0;fillColor=none;strokeColor=none;",120,120,"","Hex Cluster (3x)",null,null,"hexagon cluster grid honeycomb"),t.createVertexTemplateEntry("shape=customShapes.hexCluster;hexCount=5;hexFill=#FFF3E0;hexStroke=#E65100;fillColor=none;strokeColor=none;",200,150,"","Hex Cluster (5x)",null,null,"hexagon cluster large grid"),t.createVertexTemplateEntry("shape=customShapes.hexCluster;hexCount=4;hexFill=#E8F5E9;hexStroke=#2E7D32;filled=0,2,5;fillColor=none;strokeColor=none;",160,140,"","Hex Cluster (partial fill)",null,null,"hexagon cluster partial highlight"),t.createVertexTemplateEntry("shape=customShapes.metricGauge;value=75;minVal=0;maxVal=100;label=CPU;fillColor=none;strokeColor=none;",140,100,"","Metric Gauge (75/100)",null,null,"gauge meter speedometer metric"),t.createVertexTemplateEntry("shape=customShapes.metricGauge;value=45;minVal=0;maxVal=100;zones=#4CAF50,#FF9800,#F44336;label=Memory;fillColor=none;strokeColor=none;",140,100,"","Metric Gauge (45/100)",null,null,"gauge meter memory usage"),t.createVertexTemplateEntry("shape=customShapes.metricGauge;value=92;minVal=0;maxVal=100;zones=#4CAF50,#FF9800,#F44336;label=Disk;fillColor=none;strokeColor=none;",140,100,"","Metric Gauge Critical (92/100)",null,null,"gauge meter disk critical high"),t.createVertexTemplateEntry("shape=customShapes.metricGauge;value=3.5;minVal=0;maxVal=5;zones=#F44336,#FF9800,#4CAF50;label=Rating;fillColor=none;strokeColor=none;",140,100,"","Metric Gauge (3.5/5 Rating)",null,null,"gauge rating stars score")];t.addPaletteFunctions("customShapesExample","Custom Shapes Example",!1,o)}(e),console.log("[CustomShapes] Plugin loaded successfully — 5 shapes registered")})})()})();
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d7edf31
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1437 @@
+{
+  "name": "drawio-custom-shapes",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "drawio-custom-shapes",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "webpack": "^5.90.0",
+        "webpack-cli": "^5.1.4"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "26.1.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.1.tgz",
+      "integrity": "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webpack-cli/configtest": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/acorn": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.1.tgz",
+      "integrity": "sha512-HYXq73DDpCtNzOmrFsm9eSwCvWCql0RzqjpDzXN9EadiLJ4DNat0nsZ/Bzmy+Ud12mb4/zKDY0cQ805ZzN+i0A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz",
+      "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.44",
+        "caniuse-lite": "^1.0.30001806",
+        "electron-to-chromium": "^1.5.393",
+        "node-releases": "^2.0.51",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001806",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz",
+      "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.396",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.396.tgz",
+      "integrity": "sha512-yHiw2Y3C3H9U6TMbOfoWK/BPreiOPXRfTWPBwQBoZG6/8TB6eOPnsy5oaRYuatR7Fw2SJ4kKforgufeo7fq0EQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.24.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.3.tgz",
+      "integrity": "sha512-PwKooW9JUzh5chmYfHM3IQl5OkK2u2Nm011MgeZrss3JmFraUx/fqrf78kk8GUMYoibx/14MdwTl/1WKkG7TpQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/envinfo": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.21.0.tgz",
+      "integrity": "sha512-Lw7I8Zp5YKHFCXL7+Dz95g4CcbMEpgvqZNNq3AmlT5XAV6CgAAk6gyAMqn2zjw08K9BHfcNuKrMiCPLByGafow==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz",
+      "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.4.tgz",
+      "integrity": "sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
+      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/interpret": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
+      "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimizer-webpack-plugin": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/minimizer-webpack-plugin/-/minimizer-webpack-plugin-5.6.1.tgz",
+      "integrity": "sha512-DoeAZz8Q1C1znwsUzej1fdoi4jCf7/+Em27ouLqfK/+3m8G+D7yDhUwrc3CNhjSzGUN1kn7Iv4sWmjflQHenpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^4.3.0",
+        "terser": "^5.31.1"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@minify-html/node": {
+          "optional": true
+        },
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/css": {
+          "optional": true
+        },
+        "@swc/html": {
+          "optional": true
+        },
+        "clean-css": {
+          "optional": true
+        },
+        "cssnano": {
+          "optional": true
+        },
+        "csso": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "html-minifier-terser": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.51",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz",
+      "integrity": "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rechoir": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+      "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve": "^1.20.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.49.0.tgz",
+      "integrity": "sha512-SNiDnXyHSrxVcIOtVbULzcTmniUiwcV7Nwdyj1twVubeTmbjoa8p69KKDpfkdoOavuM4/GRm1+ykI8qqnavHoA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.2.tgz",
+      "integrity": "sha512-6i/00NBjP4yGPs+caKSyRfpTF/8Torsu0MOW3mMzIbhgISFder8i7xbqgHlLMwJrdiN8ndBV3UA1/AfzPSr+jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "5.109.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.109.0.tgz",
+      "integrity": "sha512-vomrngskVVXEZF9sMZfYAd4pXZUnfaWdJGlF+BTNF+gJBCKYCQBnOeVPlrh39Ewl7nlCsirDplMy6o5g9xJHBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.8",
+        "@types/json-schema": "^7.0.15",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.16.0",
+        "browserslist": "^4.28.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.24.2",
+        "es-module-lexer": "^2.1.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "graceful-fs": "^4.2.11",
+        "mime-db": "^1.54.0",
+        "minimizer-webpack-plugin": "^5.6.1",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^4.3.3",
+        "tapable": "^2.3.0",
+        "watchpack": "^2.5.2",
+        "webpack-sources": "^3.5.1"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
+        "colorette": "^2.0.14",
+        "commander": "^10.0.1",
+        "cross-spawn": "^7.0.3",
+        "envinfo": "^7.7.3",
+        "fastest-levenshtein": "^1.0.12",
+        "import-local": "^3.0.2",
+        "interpret": "^3.1.1",
+        "rechoir": "^0.8.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generators": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.5.1.tgz",
+      "integrity": "sha512-jyuiGJdtvY434z5bUZrjz67v76/ePNvFZTp9Mdz29IlH4+GPsgyGjiv0fKI+M7BdkU6ADjulUcKAd3tUK3WlEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..155becd
--- /dev/null
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "drawio-custom-shapes",
+  "version": "1.0.0",
+  "description": "Example draw.io plugin with custom JavaScript shapes",
+  "main": "dist/drawio-custom-shapes.js",
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "watch": "webpack --mode development --watch",
+    "clean": "rm -rf dist"
+  },
+  "keywords": ["drawio", "draw.io", "plugin", "shapes", "mxgraph"],
+  "license": "MIT",
+  "devDependencies": {
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.4"
+  }
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..966ccb4
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,27 @@
+/**
+ * draw.io Custom Shapes Example Plugin
+ *
+ * This is the main entry point. It:
+ * 1. Defines and registers custom shape classes (immediately)
+ * 2. Wraps sidebar palette setup in Draw.loadPlugin (deferred until UI ready)
+ *
+ * Global dependencies (provided by draw.io at runtime):
+ * - mxShape, mxUtils, mxCellRenderer, mxConstants (mxGraph library)
+ * - Draw.loadPlugin (draw.io plugin API)
+ */
+
+// Import shape definitions — each registers itself via mxCellRenderer.registerShape()
+import './shapes/StatusIndicator';
+import './shapes/ProgressBar';
+import './shapes/DataFlowArrow';
+import './shapes/HexagonCluster';
+import './shapes/MetricGauge';
+
+// Import and execute palette registration
+import { registerPalette } from './palette';
+
+// Register the plugin with draw.io
+Draw.loadPlugin(function(ui) {
+  registerPalette(ui);
+  console.log('[CustomShapes] Plugin loaded successfully — 5 shapes registered');
+});
diff --git a/src/palette.js b/src/palette.js
new file mode 100644
index 0000000..7a57c76
--- /dev/null
+++ b/src/palette.js
@@ -0,0 +1,116 @@
+/**
+ * Palette Registration
+ *
+ * Creates a sidebar palette section with all custom shapes available
+ * for drag-and-drop onto the canvas.
+ */
+
+export function registerPalette(ui) {
+  var sb = ui.sidebar;
+
+  // Define palette entries — each creates a draggable template
+  var fns = [
+    // Status Indicator variants
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.statusIndicator;status=ok;showLabel=1;fillColor=none;strokeColor=none;',
+      60, 40, '', 'Status: OK',
+      null, null, 'status indicator ok green check'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.statusIndicator;status=warning;showLabel=1;fillColor=none;strokeColor=none;',
+      60, 40, '', 'Status: Warning',
+      null, null, 'status indicator warning orange'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.statusIndicator;status=error;showLabel=1;fillColor=none;strokeColor=none;',
+      60, 40, '', 'Status: Error',
+      null, null, 'status indicator error red'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.statusIndicator;status=unknown;showLabel=1;fillColor=none;strokeColor=none;',
+      60, 40, '', 'Status: Unknown',
+      null, null, 'status indicator unknown grey'
+    ),
+    // Wide pill variant
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.statusIndicator;status=ok;showLabel=1;fillColor=none;strokeColor=none;',
+      120, 30, '', 'Status Pill: OK',
+      null, null, 'status pill indicator wide'
+    ),
+
+    // Progress Bar variants
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.progressBar;progress=75;barColor=#4CAF50;showPercent=1;fillColor=none;strokeColor=none;',
+      200, 30, '', 'Progress Bar (75%)',
+      null, null, 'progress bar percentage loading'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.progressBar;progress=30;barColor=#FF9800;showPercent=1;fillColor=none;strokeColor=none;',
+      200, 30, '', 'Progress Bar (30%)',
+      null, null, 'progress bar low warning'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.progressBar;progress=90;barColor=#4CAF50;showPercent=1;animated=1;fillColor=none;strokeColor=none;',
+      200, 30, '', 'Progress Bar Animated (90%)',
+      null, null, 'progress bar animated stripes'
+    ),
+
+    // Data Flow Arrow variants
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.dataFlowArrow;direction=right;flowSpeed=medium;flowColor=#1976D2;fillColor=none;strokeColor=none;',
+      180, 40, '', 'Data Flow → Right',
+      null, null, 'data flow arrow right direction'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.dataFlowArrow;direction=left;flowSpeed=medium;flowColor=#1976D2;fillColor=none;strokeColor=none;',
+      180, 40, '', 'Data Flow ← Left',
+      null, null, 'data flow arrow left direction'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.dataFlowArrow;direction=both;flowSpeed=fast;flowColor=#7B1FA2;fillColor=none;strokeColor=none;',
+      180, 40, '', 'Data Flow ↔ Bidirectional',
+      null, null, 'data flow arrow bidirectional both'
+    ),
+
+    // Hexagon Cluster variants
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.hexCluster;hexCount=3;hexFill=#E3F2FD;hexStroke=#1565C0;fillColor=none;strokeColor=none;',
+      120, 120, '', 'Hex Cluster (3x)',
+      null, null, 'hexagon cluster grid honeycomb'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.hexCluster;hexCount=5;hexFill=#FFF3E0;hexStroke=#E65100;fillColor=none;strokeColor=none;',
+      200, 150, '', 'Hex Cluster (5x)',
+      null, null, 'hexagon cluster large grid'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.hexCluster;hexCount=4;hexFill=#E8F5E9;hexStroke=#2E7D32;filled=0,2,5;fillColor=none;strokeColor=none;',
+      160, 140, '', 'Hex Cluster (partial fill)',
+      null, null, 'hexagon cluster partial highlight'
+    ),
+
+    // Metric Gauge variants
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.metricGauge;value=75;minVal=0;maxVal=100;label=CPU;fillColor=none;strokeColor=none;',
+      140, 100, '', 'Metric Gauge (75/100)',
+      null, null, 'gauge meter speedometer metric'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.metricGauge;value=45;minVal=0;maxVal=100;zones=#4CAF50,#FF9800,#F44336;label=Memory;fillColor=none;strokeColor=none;',
+      140, 100, '', 'Metric Gauge (45/100)',
+      null, null, 'gauge meter memory usage'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.metricGauge;value=92;minVal=0;maxVal=100;zones=#4CAF50,#FF9800,#F44336;label=Disk;fillColor=none;strokeColor=none;',
+      140, 100, '', 'Metric Gauge Critical (92/100)',
+      null, null, 'gauge meter disk critical high'
+    ),
+    sb.createVertexTemplateEntry(
+      'shape=customShapes.metricGauge;value=3.5;minVal=0;maxVal=5;zones=#F44336,#FF9800,#4CAF50;label=Rating;fillColor=none;strokeColor=none;',
+      140, 100, '', 'Metric Gauge (3.5/5 Rating)',
+      null, null, 'gauge rating stars score'
+    )
+  ];
+
+  sb.addPaletteFunctions('customShapesExample', 'Custom Shapes Example', false, fns);
+}
diff --git a/src/shapes/DataFlowArrow.js b/src/shapes/DataFlowArrow.js
new file mode 100644
index 0000000..4bdf613
--- /dev/null
+++ b/src/shapes/DataFlowArrow.js
@@ -0,0 +1,116 @@
+/**
+ * DataFlowArrow Shape
+ *
+ * A directional arrow with flow indicator dots/dashes.
+ * Demonstrates: dynamic path generation, direction-aware rendering.
+ *
+ * Style parameters:
+ *   - direction: 'right' | 'left' | 'both' (default: 'right')
+ *   - flowSpeed: 'fast' | 'medium' | 'slow' (default: 'medium')
+ *   - flowColor: hex color (default: '#1976D2')
+ *   - thickness: number (default: '3')
+ */
+
+function DataFlowArrowShape() {
+  mxShape.call(this);
+}
+
+mxUtils.extend(DataFlowArrowShape, mxShape);
+
+DataFlowArrowShape.prototype.cst = {
+  SHAPE: 'customShapes.dataFlowArrow'
+};
+
+DataFlowArrowShape.prototype.customProperties = [
+  {
+    name: 'direction',
+    dispName: 'Direction',
+    type: 'enum',
+    defVal: 'right',
+    enumList: [
+      { val: 'right', dispName: 'Right' },
+      { val: 'left', dispName: 'Left' },
+      { val: 'both', dispName: 'Bidirectional' }
+    ]
+  },
+  {
+    name: 'flowSpeed',
+    dispName: 'Flow Speed',
+    type: 'enum',
+    defVal: 'medium',
+    enumList: [
+      { val: 'fast', dispName: 'Fast' },
+      { val: 'medium', dispName: 'Medium' },
+      { val: 'slow', dispName: 'Slow' }
+    ]
+  }
+];
+
+DataFlowArrowShape.prototype.paintVertexShape = function(c, x, y, w, h) {
+  c.translate(x, y);
+
+  var direction = mxUtils.getValue(this.style, 'direction', 'right');
+  var flowSpeed = mxUtils.getValue(this.style, 'flowSpeed', 'medium');
+  var flowColor = mxUtils.getValue(this.style, 'flowColor', '#1976D2');
+  var thickness = parseInt(mxUtils.getValue(this.style, 'thickness', '3'));
+
+  var midY = h / 2;
+  var arrowSize = Math.min(h / 2, 12);
+  var bodyStart = (direction === 'left' || direction === 'both') ? arrowSize : 0;
+  var bodyEnd = (direction === 'right' || direction === 'both') ? w - arrowSize : w;
+
+  // Draw main arrow body
+  c.setStrokeColor(flowColor);
+  c.setStrokeWidth(thickness);
+  c.setFillColor(flowColor);
+
+  // Arrow body line
+  c.begin();
+  c.moveTo(bodyStart, midY);
+  c.lineTo(bodyEnd, midY);
+  c.stroke();
+
+  // Right arrowhead
+  if (direction === 'right' || direction === 'both') {
+    c.begin();
+    c.moveTo(w - arrowSize, midY - arrowSize);
+    c.lineTo(w, midY);
+    c.lineTo(w - arrowSize, midY + arrowSize);
+    c.close();
+    c.fillAndStroke();
+  }
+
+  // Left arrowhead
+  if (direction === 'left' || direction === 'both') {
+    c.begin();
+    c.moveTo(arrowSize, midY - arrowSize);
+    c.lineTo(0, midY);
+    c.lineTo(arrowSize, midY + arrowSize);
+    c.close();
+    c.fillAndStroke();
+  }
+
+  // Flow indicator dots along the arrow body
+  var speeds = { fast: 8, medium: 14, slow: 22 };
+  var spacing = speeds[flowSpeed] || speeds.medium;
+  var dotRadius = Math.max(2, thickness * 0.8);
+
+  c.setFillColor('#FFFFFF');
+  c.setStrokeWidth(0);
+
+  for (var i = bodyStart + spacing; i < bodyEnd - spacing / 2; i += spacing) {
+    c.ellipse(i - dotRadius, midY - dotRadius, dotRadius * 2, dotRadius * 2);
+    c.fill();
+  }
+
+  // Outer glow/pipe effect
+  c.setStrokeColor(flowColor);
+  c.setAlpha(0.15);
+  c.setStrokeWidth(thickness * 3);
+  c.begin();
+  c.moveTo(bodyStart, midY);
+  c.lineTo(bodyEnd, midY);
+  c.stroke();
+};
+
+mxCellRenderer.registerShape(DataFlowArrowShape.prototype.cst.SHAPE, DataFlowArrowShape);
diff --git a/src/shapes/HexagonCluster.js b/src/shapes/HexagonCluster.js
new file mode 100644
index 0000000..d5d4d50
--- /dev/null
+++ b/src/shapes/HexagonCluster.js
@@ -0,0 +1,135 @@
+/**
+ * HexagonCluster Shape
+ *
+ * A grid of hexagons that adapts to the cell dimensions.
+ * Demonstrates: loop-based drawing, mathematical geometry, adaptive layout.
+ *
+ * Style parameters:
+ *   - hexCount: number of hexagons across (default: '3')
+ *   - hexFill: hex color for hexagon fill (default: '#E3F2FD')
+ *   - hexStroke: hex color for hexagon stroke (default: '#1565C0')
+ *   - filled: which hexagons are filled (comma-separated indices, default: all)
+ */
+
+function HexagonClusterShape() {
+  mxShape.call(this);
+}
+
+mxUtils.extend(HexagonClusterShape, mxShape);
+
+HexagonClusterShape.prototype.cst = {
+  SHAPE: 'customShapes.hexCluster'
+};
+
+HexagonClusterShape.prototype.customProperties = [
+  {
+    name: 'hexCount',
+    dispName: 'Hex Count (across)',
+    type: 'int',
+    min: 1,
+    max: 10,
+    defVal: 3
+  },
+  {
+    name: 'hexFill',
+    dispName: 'Hex Fill Color',
+    type: 'color',
+    defVal: '#E3F2FD'
+  },
+  {
+    name: 'hexStroke',
+    dispName: 'Hex Stroke Color',
+    type: 'color',
+    defVal: '#1565C0'
+  }
+];
+
+/**
+ * Draw a single hexagon centered at (cx, cy) with given radius
+ */
+HexagonClusterShape.prototype.drawHexagon = function(c, cx, cy, radius) {
+  c.begin();
+  for (var i = 0; i < 6; i++) {
+    var angle = (Math.PI / 3) * i - Math.PI / 6; // flat-top orientation
+    var px = cx + radius * Math.cos(angle);
+    var py = cy + radius * Math.sin(angle);
+    if (i === 0) {
+      c.moveTo(px, py);
+    } else {
+      c.lineTo(px, py);
+    }
+  }
+  c.close();
+};
+
+HexagonClusterShape.prototype.paintVertexShape = function(c, x, y, w, h) {
+  c.translate(x, y);
+
+  var hexCount = parseInt(mxUtils.getValue(this.style, 'hexCount', '3'));
+  var hexFill = mxUtils.getValue(this.style, 'hexFill', '#E3F2FD');
+  var hexStroke = mxUtils.getValue(this.style, 'hexStroke', '#1565C0');
+  var filledStr = mxUtils.getValue(this.style, 'filled', '');
+
+  // Clamp
+  hexCount = Math.max(1, Math.min(10, hexCount));
+
+  // Calculate hex size based on available width
+  var padding = 4;
+  var availW = w - padding * 2;
+  var availH = h - padding * 2;
+
+  // For flat-top hexagons: width = sqrt(3) * radius, height = 2 * radius
+  var hexWidth = availW / hexCount;
+  var radius = hexWidth / Math.sqrt(3);
+
+  // How many rows fit
+  var rowHeight = radius * 1.5;
+  var rows = Math.max(1, Math.floor((availH - radius * 0.5) / rowHeight));
+
+  // Parse filled indices (which hexagons get highlight color)
+  var filledSet = {};
+  if (filledStr) {
+    filledStr.split(',').forEach(function(idx) {
+      filledSet[parseInt(idx.trim())] = true;
+    });
+  }
+
+  var index = 0;
+
+  c.setStrokeColor(hexStroke);
+  c.setStrokeWidth(1.5);
+
+  for (var row = 0; row < rows; row++) {
+    var colsInRow = (row % 2 === 0) ? hexCount : hexCount - 1;
+    var offsetX = (row % 2 === 0) ? 0 : hexWidth / 2;
+
+    for (var col = 0; col < colsInRow; col++) {
+      var cx = padding + offsetX + hexWidth / 2 + col * hexWidth;
+      var cy = padding + radius + row * rowHeight;
+
+      // Skip if out of bounds
+      if (cy + radius > h) continue;
+
+      // Determine fill: highlighted or default
+      var isHighlighted = filledStr === '' || filledSet[index];
+      c.setFillColor(isHighlighted ? hexFill : '#FAFAFA');
+      c.setAlpha(isHighlighted ? 1.0 : 0.5);
+
+      this.drawHexagon(c, cx, cy, radius * 0.9); // slight gap between hexagons
+      c.fillAndStroke();
+
+      c.setAlpha(1.0);
+      index++;
+    }
+  }
+
+  // Border around entire cluster
+  c.setStrokeColor(hexStroke);
+  c.setStrokeWidth(1);
+  c.setAlpha(0.3);
+  c.setDashed(true);
+  c.rect(0, 0, w, h);
+  c.stroke();
+};
+
+mxCellRenderer.registerShape(HexagonClusterShape.prototype.cst.SHAPE, HexagonClusterShape);
diff --git a/src/shapes/MetricGauge.js b/src/shapes/MetricGauge.js
new file mode 100644
index 0000000..e9ae710
--- /dev/null
+++ b/src/shapes/MetricGauge.js
@@ -0,0 +1,179 @@
+/**
+ * MetricGauge Shape
+ *
+ * A radial gauge (speedometer-style) showing a value within a range.
+ * Demonstrates: arc computation, trigonometry, zone-based coloring, text rendering.
+ *
+ * Style parameters:
+ *   - value: current value (default: '75')
+ *   - minVal: minimum value (default: '0')
+ *   - maxVal: maximum value (default: '100')
+ *   - zones: comma-separated zone colors from low to high (default: '#4CAF50,#FF9800,#F44336')
+ *   - label: text label below the value (default: '')
+ *   - arcWidth: width of the gauge arc (default: '8')
+ */
+
+function MetricGaugeShape() {
+  mxShape.call(this);
+}
+
+mxUtils.extend(MetricGaugeShape, mxShape);
+
+MetricGaugeShape.prototype.cst = {
+  SHAPE: 'customShapes.metricGauge'
+};
+
+MetricGaugeShape.prototype.customProperties = [
+  {
+    name: 'value',
+    dispName: 'Value',
+    type: 'float',
+    defVal: 75
+  },
+  {
+    name: 'minVal',
+    dispName: 'Min Value',
+    type: 'float',
+    defVal: 0
+  },
+  {
+    name: 'maxVal',
+    dispName: 'Max Value',
+    type: 'float',
+    defVal: 100
+  },
+  {
+    name: 'zones',
+    dispName: 'Zone Colors (comma-sep)',
+    type: 'string',
+    defVal: '#4CAF50,#FF9800,#F44336'
+  },
+  {
+    name: 'label',
+    dispName: 'Label',
+    type: 'string',
+    defVal: ''
+  }
+];
+
+MetricGaugeShape.prototype.paintVertexShape = function(c, x, y, w, h) {
+  c.translate(x, y);
+
+  var value = parseFloat(mxUtils.getValue(this.style, 'value', '75'));
+  var minVal = parseFloat(mxUtils.getValue(this.style, 'minVal', '0'));
+  var maxVal = parseFloat(mxUtils.getValue(this.style, 'maxVal', '100'));
+  var zonesStr = mxUtils.getValue(this.style, 'zones', '#4CAF50,#FF9800,#F44336');
+  var label = mxUtils.getValue(this.style, 'label', '');
+  var arcWidth = parseInt(mxUtils.getValue(this.style, 'arcWidth', '8'));
+
+  var zones = zonesStr.split(',');
+
+  // Gauge geometry — 180° arc (semicircle)
+  var cx = w / 2;
+  var cy = h * 0.7; // center slightly below middle to leave room for text
+  var radius = Math.min(w / 2, h * 0.65) - arcWidth;
+  var startAngle = Math.PI; // left (180°)
+  var endAngle = 0;        // right (0°)
+  var totalArc = Math.PI;  // 180 degrees
+
+  // Draw zone arcs (background)
+  var zoneCount = zones.length;
+  var zoneArc = totalArc / zoneCount;
+
+  c.setStrokeWidth(arcWidth);
+  c.setLineCap('round');
+
+  for (var i = 0; i < zoneCount; i++) {
+    c.setStrokeColor(zones[i]);
+    c.setAlpha(0.3); // Background zones are translucent
+
+    var segStart = startAngle - i * zoneArc;
+    var segEnd = segStart - zoneArc;
+
+    // Draw arc segment using small line segments (canvas API approximation)
+    var steps = 20;
+    c.begin();
+    for (var s = 0; s <= steps; s++) {
+      var angle = segStart + (segEnd - segStart) * (s / steps);
+      var px = cx + radius * Math.cos(angle);
+      var py = cy - radius * Math.sin(angle);
+      if (s === 0) {
+        c.moveTo(px, py);
+      } else {
+        c.lineTo(px, py);
+      }
+    }
+    c.stroke();
+  }
+
+  // Draw active value arc (the "filled" portion)
+  var normalizedValue = Math.max(0, Math.min(1, (value - minVal) / (maxVal - minVal)));
+  var valueAngle = startAngle - totalArc * normalizedValue;
+
+  // Determine which zone the value falls in
+  var zoneIndex = Math.min(zoneCount - 1, Math.floor(normalizedValue * zoneCount));
+  var activeColor = zones[zoneIndex];
+
+  c.setStrokeColor(activeColor);
+  c.setAlpha(1.0);
+  c.setStrokeWidth(arcWidth);
+
+  var activeSteps = Math.max(2, Math.floor(40 * normalizedValue));
+  c.begin();
+  for (var s = 0; s <= activeSteps; s++) {
+    var angle = startAngle + (valueAngle - startAngle) * (s / activeSteps);
+    var px = cx + radius * Math.cos(angle);
+    var py = cy - radius * Math.sin(angle);
+    if (s === 0) {
+      c.moveTo(px, py);
+    } else {
+      c.lineTo(px, py);
+    }
+  }
+  c.stroke();
+
+  // Draw needle
+  c.setStrokeColor('#333333');
+  c.setStrokeWidth(2);
+  c.setAlpha(1.0);
+
+  var needleLength = radius * 0.85;
+  var needleX = cx + needleLength * Math.cos(valueAngle);
+  var needleY = cy - needleLength * Math.sin(valueAngle);
+
+  c.begin();
+  c.moveTo(cx, cy);
+  c.lineTo(needleX, needleY);
+  c.stroke();
+
+  // Needle center dot
+  c.setFillColor('#333333');
+  c.ellipse(cx - 4, cy - 4, 8, 8);
+  c.fill();
+
+  // Value text
+  c.setFontColor('#333333');
+  c.setFontSize(Math.min(radius * 0.4, 24));
+  c.setFontStyle(1); // bold
+  c.text(cx, cy + radius * 0.25, 0, 0, String(Math.round(value * 10) / 10),
+    mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
+
+  // Label text
+  if (label) {
+    c.setFontColor('#666666');
+    c.setFontSize(Math.min(radius * 0.2, 12));
+    c.setFontStyle(0); // normal
+    c.text(cx, cy + radius * 0.45, 0, 0, label,
+      mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
+  }
+
+  // Min/Max labels
+  c.setFontColor('#999999');
+  c.setFontSize(Math.min(radius * 0.15, 10));
+  c.text(cx - radius, cy + 12, 0, 0, String(minVal),
+    mxConstants.ALIGN_CENTER, mxConstants.ALIGN_TOP, 0, null, 0, 0, 0);
+  c.text(cx + radius, cy + 12, 0, 0, String(maxVal),
+    mxConstants.ALIGN_CENTER, mxConstants.ALIGN_TOP, 0, null, 0, 0, 0);
+};
+
+mxCellRenderer.registerShape(MetricGaugeShape.prototype.cst.SHAPE, MetricGaugeShape);
diff --git a/src/shapes/ProgressBar.js b/src/shapes/ProgressBar.js
new file mode 100644
index 0000000..118f5eb
--- /dev/null
+++ b/src/shapes/ProgressBar.js
@@ -0,0 +1,107 @@
+/**
+ * ProgressBar Shape
+ *
+ * A horizontal progress bar that fills based on a percentage value.
+ * Demonstrates: computed geometry, value-based rendering, gradient.
+ *
+ * Style parameters:
+ *   - progress: 0-100 (default: 50)
+ *   - barColor: hex color (default: '#4CAF50')
+ *   - showPercent: '1' | '0' (default: '1')
+ *   - animated: '1' | '0' — adds visual markers (default: '0')
+ */
+
+function ProgressBarShape() {
+  mxShape.call(this);
+}
+
+mxUtils.extend(ProgressBarShape, mxShape);
+
+ProgressBarShape.prototype.cst = {
+  SHAPE: 'customShapes.progressBar'
+};
+
+ProgressBarShape.prototype.customProperties = [
+  {
+    name: 'progress',
+    dispName: 'Progress (%)',
+    type: 'int',
+    min: 0,
+    max: 100,
+    defVal: 50
+  },
+  {
+    name: 'barColor',
+    dispName: 'Bar Color',
+    type: 'color',
+    defVal: '#4CAF50'
+  }
+];
+
+ProgressBarShape.prototype.paintVertexShape = function(c, x, y, w, h) {
+  c.translate(x, y);
+
+  var progress = parseInt(mxUtils.getValue(this.style, 'progress', '50'));
+  var barColor = mxUtils.getValue(this.style, 'barColor', '#4CAF50');
+  var showPercent = mxUtils.getValue(this.style, 'showPercent', '1');
+  var animated = mxUtils.getValue(this.style, 'animated', '0');
+
+  // Clamp progress
+  progress = Math.max(0, Math.min(100, progress));
+
+  var borderRadius = Math.min(h / 2, 8);
+  var padding = 2;
+
+  // Background track
+  c.setFillColor('#E0E0E0');
+  c.setStrokeColor('#BDBDBD');
+  c.setStrokeWidth(1);
+  c.roundrect(0, 0, w, h, borderRadius, borderRadius);
+  c.fillAndStroke();
+
+  // Progress fill
+  var fillWidth = ((w - padding * 2) * progress) / 100;
+
+  if (fillWidth > 0) {
+    c.setStrokeWidth(0);
+    c.setFillColor(barColor);
+
+    // Color shifts based on progress level
+    if (progress < 30) {
+      c.setFillColor('#F44336'); // Red for low
+    } else if (progress < 70) {
+      c.setFillColor(barColor); // Default color for mid
+    } else {
+      c.setFillColor('#2E7D32'); // Dark green for high
+    }
+
+    // Draw filled portion with rounded left edge
+    c.roundrect(padding, padding, fillWidth, h - padding * 2,
+      borderRadius - 1, borderRadius - 1);
+    c.fill();
+
+    // Animated stripe markers
+    if (animated === '1' && fillWidth > 10) {
+      c.setStrokeColor('rgba(255,255,255,0.3)');
+      c.setStrokeWidth(2);
+      var stripeSpacing = 12;
+      for (var i = stripeSpacing; i < fillWidth - 4; i += stripeSpacing) {
+        c.begin();
+        c.moveTo(padding + i, padding);
+        c.lineTo(padding + i - 4, h - padding);
+        c.stroke();
+      }
+    }
+  }
+
+  // Percentage text
+  if (showPercent === '1') {
+    c.setFontColor(progress > 50 ? '#FFFFFF' : '#333333');
+    c.setFontSize(Math.min(h * 0.6, 14));
+    c.setFontStyle(1); // bold
+    c.text(w / 2, h / 2, 0, 0, progress + '%',
+      mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
+  }
+};
+
+mxCellRenderer.registerShape(ProgressBarShape.prototype.cst.SHAPE, ProgressBarShape);
diff --git a/src/shapes/StatusIndicator.js b/src/shapes/StatusIndicator.js
new file mode 100644
index 0000000..cee6b22
--- /dev/null
+++ b/src/shapes/StatusIndicator.js
@@ -0,0 +1,99 @@
+/**
+ * StatusIndicator Shape
+ *
+ * A shape that visually indicates status through color and icon.
+ * Demonstrates: conditional rendering, style-parameter reading.
+ *
+ * Style parameters:
+ *   - status: 'ok' | 'warning' | 'error' | 'unknown' (default: 'unknown')
+ *   - showLabel: '1' | '0' (default: '1')
+ */
+
+function StatusIndicatorShape() {
+  mxShape.call(this);
+}
+
+mxUtils.extend(StatusIndicatorShape, mxShape);
+
+StatusIndicatorShape.prototype.cst = {
+  SHAPE: 'customShapes.statusIndicator'
+};
+
+StatusIndicatorShape.prototype.customProperties = [
+  {
+    name: 'status',
+    dispName: 'Status',
+    type: 'enum',
+    defVal: 'unknown',
+    enumList: [
+      { val: 'ok', dispName: 'OK' },
+      { val: 'warning', dispName: 'Warning' },
+      { val: 'error', dispName: 'Error' },
+      { val: 'unknown', dispName: 'Unknown' }
+    ]
+  }
+];
+
+StatusIndicatorShape.prototype.paintVertexShape = function(c, x, y, w, h) {
+  c.translate(x, y);
+
+  var status = mxUtils.getValue(this.style, 'status', 'unknown');
+  var showLabel = mxUtils.getValue(this.style, 'showLabel', '1');
+
+  // Status-dependent colors
+  var colors = {
+    ok:      { fill: '#4CAF50', stroke: '#2E7D32', icon: '✓' },
+    warning: { fill: '#FF9800', stroke: '#E65100', icon: '⚠' },
+    error:   { fill: '#F44336', stroke: '#B71C1C', icon: '✗' },
+    unknown: { fill: '#9E9E9E', stroke: '#424242', icon: '?' }
+  };
+
+  var cfg = colors[status] || colors.unknown;
+
+  // Outer rounded rectangle (the indicator body)
+  c.setFillColor(cfg.fill);
+  c.setStrokeColor(cfg.stroke);
+  c.setStrokeWidth(2);
+
+  // Draw shape — circle if square-ish, pill if wide
+  if (w > h * 1.5) {
+    // Pill shape
+    var radius = h / 2;
+    c.begin();
+    c.moveTo(radius, 0);
+    c.lineTo(w - radius, 0);
+    c.arcTo(radius, radius, 0, 0, 1, w - radius, h);
+    c.lineTo(radius, h);
+    c.arcTo(radius, radius, 0, 0, 1, radius, 0);
+    c.close();
+    c.fillAndStroke();
+  } else {
+    // Circle
+    var size = Math.min(w, h);
+    var cx = w / 2;
+    var cy = h / 2;
+    c.ellipse(cx - size / 2, cy - size / 2, size, size);
+    c.fillAndStroke();
+  }
+
+  // Inner icon/symbol
+  if (showLabel === '1') {
+    c.setFontColor('#FFFFFF');
+    c.setFontSize(Math.min(w, h) * 0.4);
+    c.setFontStyle(1); // bold
+    c.text(w / 2, h / 2, 0, 0, cfg.icon,
+      mxConstants.ALIGN_CENTER, mxConstants.ALIGN_MIDDLE, 0, null, 0, 0, 0);
+  }
+
+  // Pulse ring for 'error' status (visual emphasis)
+  if (status === 'error') {
+    c.setStrokeColor(cfg.fill);
+    c.setStrokeWidth(1);
+    c.setAlpha(0.3);
+    var padding = 4;
+    c.ellipse(-padding, -padding, w + padding * 2, h + padding * 2);
+    c.stroke();
+  }
+};
+
+mxCellRenderer.registerShape(StatusIndicatorShape.prototype.cst.SHAPE, StatusIndicatorShape);
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..79ef193
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,16 @@
+const path = require('path');
+
+module.exports = (env, argv) => ({
+  entry: './src/index.js',
+  output: {
+    filename: 'drawio-custom-shapes.js',
+    path: path.resolve(__dirname, 'dist'),
+    // No library wrapper — draw.io plugins are plain scripts
+    // that call Draw.loadPlugin() as a side effect
+    iife: true
+  },
+  devtool: argv.mode === 'development' ? 'source-map' : false,
+  optimization: {
+    minimize: argv.mode === 'production'
+  }
+});