diff --git a/.claude/skills/hyva-alpine-component b/.claude/skills/hyva-alpine-component
new file mode 120000
index 00000000..cce7ec53
--- /dev/null
+++ b/.claude/skills/hyva-alpine-component
@@ -0,0 +1 @@
+/Users/willem/hyva-ai-tools/skills/hyva-alpine-component
\ No newline at end of file
diff --git a/.claude/skills/hyva-internal-coding-standard b/.claude/skills/hyva-internal-coding-standard
new file mode 120000
index 00000000..46bb644d
--- /dev/null
+++ b/.claude/skills/hyva-internal-coding-standard
@@ -0,0 +1 @@
+/Users/willem/hyva-internal-skills/skills/hyva-internal-coding-standard
\ No newline at end of file
diff --git a/.claude/skills/hyva-internal-skill-security-review b/.claude/skills/hyva-internal-skill-security-review
new file mode 120000
index 00000000..e3a8e569
--- /dev/null
+++ b/.claude/skills/hyva-internal-skill-security-review
@@ -0,0 +1 @@
+/Users/willem/hyva-internal-skills/skills/hyva-internal-skill-security-review
\ No newline at end of file
diff --git a/.claude/skills/hyva-playwright-test b/.claude/skills/hyva-playwright-test
new file mode 120000
index 00000000..e5b22c7d
--- /dev/null
+++ b/.claude/skills/hyva-playwright-test
@@ -0,0 +1 @@
+/Users/willem/hyva-ai-tools/skills/hyva-playwright-test
\ No newline at end of file
diff --git a/.claude/skills/magewire-architecture/SKILL.md b/.claude/skills/magewire-architecture/SKILL.md
new file mode 100644
index 00000000..9df5e171
--- /dev/null
+++ b/.claude/skills/magewire-architecture/SKILL.md
@@ -0,0 +1,596 @@
+---
+name: magewire-architecture
+description: "Internals and extension guide for the Magewire framework: directory layout (src/lib/dist/portman), Mechanisms vs Features, area-scoped DI (frontend/adminhtml), snapshot/state flow, layout containers, JS extension points, and Facades. Use when extending Magewire, creating custom Features or Mechanisms, debugging the framework itself, or understanding how the codebase is structured."
+license: MIT
+metadata:
+ author: Willem Poortman
+---
+
+# Magewire Architecture
+
+Magewire's codebase is split into two layers: an upstream Livewire core (PHP, ported and maintained via Portman) and a Magento integration layer (controllers, blocks, DI, layout, templates). Understanding this split is essential for knowing where to add or change things.
+
+---
+
+## Repository Layout
+
+```
+vendor/magewirephp/magewire/
+├── src/ # Magento module structure (hand-written, must live here for Magento)
+│ ├── Component.php # Base component class (public API)
+│ ├── MagewireServiceProvider.php
+│ ├── Controller/ # Route controllers (magewire/update)
+│ ├── Model/ # Magento-specific models, view utils, fragment handling
+│ ├── Observer/ # Magento event observers
+│ ├── Plugin/ # Magento plugin interceptors
+│ ├── ViewModel/ # MagewireViewModel (utilities facade)
+│ ├── Exceptions/
+│ ├── etc/ # module.xml, di.xml, events.xml, routes.xml
+│ └── view/ # Layout XML, PHTML templates, JS/CSS assets
+│
+├── lib/ # Hand-written custom code + downloaded Livewire source
+│ ├── Livewire/ # Downloaded upstream Livewire source (Portman input cache)
+│ ├── Magewire/ # Hand-written Magewire core (mechanisms, features, enums, runtime)
+│ ├── MagewireBc/ # Hand-written backwards compatibility layer
+│ ├── Magento/ # Hand-written Magento framework integrations
+│ └── Symfony/ # Hand-written Symfony adaptations
+│
+├── portman/ # Portman augmentation files
+│ └── Livewire/ # Augmentations: what to change/extend in upstream Livewire
+│
+├── dist/ # Portman BUILD OUTPUT — do not edit directly
+│ │ # (Livewire source + augmentations, namespace-transformed)
+│ ├── ComponentHook.php
+│ ├── Mechanisms/
+│ └── Features/
+│
+├── themes/ # Theme support sub-modules (e.g. Hyva, Luma)
+├── tests/ # Playwright + other test types
+└── portman.config.php # Controls Portman: source paths, output dir, transformations
+```
+
+**Rule of thumb**: `src/` and `lib/` (excluding `lib/Livewire/`) are yours to edit freely. `dist/` is Portman-generated — changes belong in `portman/Livewire/` (augmentations) or `portman.config.php`. `lib/Livewire/` is the downloaded upstream source cache — don't edit it either.
+
+---
+
+## Bootstrap & Runtime
+
+Magewire boots through `MagewireServiceProvider`, which is triggered by Magento's DI during the request lifecycle. It registers three types of services in order:
+
+1. **Containers** — Internal DI-like containers (MagewireManager, etc.)
+2. **Mechanisms** — Non-optional core infrastructure (sorted, loaded in order)
+3. **Features** — Optional lifecycle hooks (sorted, loaded in order)
+
+Boot modes per service item (`ServiceTypeItemBootMode`):
+- `LAZY` (10) — Boot only when needed
+- `PERSISTENT` (20) — Boot during setup phase, persists across request modes
+- `ALWAYS` (30) — Boot on every request (default)
+
+Runtime state progression: `UNINITIALIZED → SETUP → BOOTING → BOOTED` (or `FAILED / STOPPED`)
+
+Request modes: `PRECEDING` (initial page load) and `SUBSEQUENT` (AJAX update).
+
+---
+
+## Mechanisms
+
+Mechanisms are the non-optional core pipeline. They live in `lib/Magewire/Mechanisms/` (hand-written, Magento-specific) and `dist/Mechanisms/` (ported from Livewire), and run in `sort_order` sequence:
+
+| Sort | Mechanism | Role |
+|------|-----------|------|
+| 1000 | `ResolveComponents` | Discovers and instantiates components from layout blocks |
+| 1050 | `PersistentMiddleware` | Carries persistent data between requests |
+| 1100 | `HandleComponents` | Manages snapshot, properties, synthesizers |
+| 1200 | `HandleRequests` | Orchestrates the full update cycle |
+| 1250 | `DataStore` | Global request-scoped data storage |
+| 1400 | `FrontendAssets` | Serves the JS bundle and manifest |
+
+Mechanisms are registered in `src/etc/frontend/di.xml` and `src/etc/adminhtml/di.xml` separately — never in the global `di.xml`. See the note on area-scoped DI below.
+
+To add a custom mechanism, add an entry to the DI config pointing to a class that extends the mechanism base and implements its contract. Mechanisms cannot be skipped — if you only need optional behavior, use a Feature instead.
+
+---
+
+## Features
+
+Features are optional lifecycle extensions. Each Feature is a `ComponentHook` subclass that hooks into the component lifecycle via `provide()`. They live in `lib/Magewire/Features/` (hand-written, Magewire-specific) or `dist/Features/` (ported from Livewire via Portman).
+
+Key built-in features and their sort orders:
+
+| Sort | Feature | Role |
+|------|---------|------|
+| 700 | `SupportMagewireViewModel` | Auto-injects view_model on blocks |
+| 800 | `SupportMagewireExceptionHandling` | Exception management |
+| 900 | `SupportMagewireRateLimiting` | Rate limiting |
+| 1000 | `SupportNestingComponents` | Parent-child relationships |
+| 1200 | `SupportAttributes` | PHP attribute handling |
+| 1300 | `SupportRedirects` | Redirect effects |
+| 1500 | `SupportLocales` | Locale/i18n support |
+| 1600 | `SupportEvents` | Inter-component events |
+| 5000 | `SupportMagentoLayouts` | Magento layout rendering |
+| 5100 | `SupportMagentoFlashMessages` | Magento session flash messages |
+| 5200 | `SupportMagewireLoaders` | Loader state management |
+| 5200 | `SupportMagewireNotifications` | Toast notification system |
+| 99000 | `SupportLifecycleHooks` | Calls lifecycle methods on components |
+| 99100 | `SupportMagewireBackwardsCompatibility` | Legacy API support |
+
+### Naming Conventions
+
+- `SupportMagewire` prefix — Magewire-specific features (e.g. `SupportMagewireLoaders`)
+- `SupportMagento` prefix — Magento compatibility features (e.g. `SupportMagentoLayouts`)
+
+### The Hook System
+
+Features hook into component lifecycle events using `on()` / `trigger()`. A hook callback must return either another callback (which receives the result) or the original value unchanged.
+
+```php
+use function Magewirephp\Magewire\on;
+
+class SupportMyFeature extends \Magewirephp\Magewire\ComponentHook
+{
+ public static function provide(): void
+ {
+ on('magewire:construct', function () {
+ // Return a callback — it fires AFTER the trigger resolves
+ return function (\Magento\Framework\View\Element\AbstractBlock $block) {
+ // Do something with the block
+ return $block; // Must return the value
+ };
+ });
+ }
+}
+```
+
+Hooks are also observable via Magento's native event system through the `SupportMagentoObserverEvents` feature (sort order 99400). It maps 30+ lifecycle hooks to Magento events with the pattern `magewire_on_{eventname}` (special characters replaced with underscores). This means third-party modules can observe Magewire lifecycle events using standard Magento `events.xml` observers without needing to create a Feature.
+
+### Middleware-Style Hooks
+
+Some hooks support a middleware pattern: if your callback returns a callable, that callable runs **after** the operation completes. This is not available on all hooks — only those that support before/after semantics:
+
+- **`update`** — return a callback that runs after the property is updated (used for `updated*` hooks)
+- **`call`** — return a callback that runs after method execution
+- **`render`** — return a callback that runs after rendering completes (used for `rendered` hook)
+
+```php
+on('update', function ($propertyName, $fullPath, $newValue) {
+ // Runs BEFORE the property update
+
+ return function () use ($fullPath) {
+ // Runs AFTER the property update
+ };
+});
+```
+
+Hooks that do **not** support middleware (e.g., `mount`, `hydrate`, `dehydrate`, `exception`) simply run their callback inline — returning a callable from these has no effect.
+
+### Adding a Custom Feature
+
+1. Create a class extending `Magewirephp\Magewire\ComponentHook`:
+
+```php
+namespace Vendor\Module\Magewire\Features;
+
+use Magewirephp\Magewire\ComponentHook;
+use function Magewirephp\Magewire\on;
+
+class SupportMyFeature extends ComponentHook
+{
+ public static function provide(): void
+ {
+ on('mount', function ($params) {
+ // Runs during mount — no middleware support
+ });
+
+ on('hydrate', function ($memo) { });
+
+ on('dehydrate', function ($context) { });
+
+ on('update', function ($propertyName, $fullPath, $newValue) {
+ // Before update
+ return function () {
+ // After update (middleware pattern)
+ };
+ });
+ }
+}
+```
+
+2. Register in `etc/frontend/di.xml` **and** `etc/adminhtml/di.xml` as needed — never in the global `etc/di.xml`. See the note on area-scoped DI below.
+
+```xml
+
+
+
+
+ Vendor\Module\Magewire\Features\SupportMyFeature
+ 5050
+
+
+
+
+```
+
+Place feature PHP code in `src/Features/SupportMyFeature/` and any JS in its corresponding `view/` subfolder.
+
+**Feature templates live at:** `view/{area}/templates/magewire-features/{feature-name}/` — the same convention applies to core framework features (in the Magewire module) and to theme compatibility features (in theme modules like Hyvä). Keeping JS, UI, and other feature-related PHTMLs co-located in a single folder per feature makes ownership and overrides easy to reason about.
+
+---
+
+## Area-Scoped DI: Why `frontend/di.xml` and `adminhtml/di.xml`
+
+Features and Mechanisms **must** be registered in area-specific DI files (`etc/frontend/di.xml`, `etc/adminhtml/di.xml`) rather than the global `etc/di.xml`.
+
+**Why:** Magento's DI system merges global config into every area. If a Feature or Mechanism were declared in the global `di.xml`, it would be impossible for another module to register a different set for frontend vs adminhtml — the global declaration would apply everywhere and couldn't be selectively overridden per area.
+
+By keeping registrations area-scoped:
+- A feature active on the frontend can be absent in the admin (or replaced with a different implementation)
+- Third-party compatibility modules (e.g. `MagewireCompatibilityWithHyva`) can add their own features to `frontend/di.xml` without affecting the admin
+- The admin panel (`adminhtml/di.xml`) can carry a different, leaner or admin-tailored set of features and mechanisms
+
+**Rule:** When adding a Feature or Mechanism to your own module, always register it in `etc/frontend/di.xml`, `etc/adminhtml/di.xml`, or both — depending on which areas it should be active in. Never use `etc/di.xml` for this.
+
+---
+
+## Component Resolvers & Arguments
+
+The `ResolveComponents` mechanism is Magewire-specific (not ported from Livewire) and is one of the most powerful parts of the framework. It determines **how** a Magento block becomes a Magewire component — and it's designed to be extensible, so that components can come from layout XML, widgets, API calls, or any custom source.
+
+### How Resolution Works
+
+When Magewire encounters a block during rendering, the `ComponentResolverManager` iterates registered resolvers (sorted by DI `sortOrder`) and calls `complies()` on each until one matches. The winning resolver then handles construction (initial page load) and reconstruction (AJAX updates).
+
+Resolvers are registered in area-scoped DI:
+
+```xml
+
+
+
+
+
+ Magewirephp\Magewire\Mechanisms\ResolveComponents\ComponentResolver\LayoutResolver
+
+
+
+
+```
+
+The resolver's DI item name must match its `$accessor` property exactly. The accessor is stored in the component's snapshot memo, so subsequent requests can find the right resolver to reconstruct the component.
+
+### The Resolver Contract
+
+Every resolver extends `ComponentResolver` and implements:
+
+| Method | Purpose |
+|--------|---------|
+| `complies($block, $magewire)` | Lightweight check: does this block belong to this resolver? |
+| `construct($block)` | Initial page load: bind a `Component` instance to the block's `magewire` data key, set `name` and `id` |
+| `reconstruct($request)` | AJAX update: rebuild the block + component from snapshot data (typically calls `construct()` internally) |
+| `arguments()` | Return a `MagewireArguments` subclass for this resolver |
+| `assemble($block, $component)` | Final assembly after construct/reconstruct — sets name, id, alias on the component |
+| `remember()` | Whether this resolver should be cached (default `true`; set `false` for dynamic resolution) |
+
+```php
+namespace Vendor\Module\Mechanisms\ResolveComponents\ComponentResolver;
+
+use Magewirephp\Magewire\Mechanisms\ResolveComponents\ComponentResolver\ComponentResolver;
+
+class WidgetResolver extends ComponentResolver
+{
+ protected string $accessor = 'widget';
+
+ public function complies(AbstractBlock $block, mixed $magewire = null): bool
+ {
+ // Check for widget-specific data
+ $this->conditions()->if(
+ fn () => $block->getData('widget_instance_id') !== null,
+ 'is-widget'
+ );
+
+ return parent::complies($block, $magewire);
+ }
+
+ public function construct(AbstractBlock $block): AbstractBlock
+ {
+ // Instantiate component and bind to block
+ $component = Factory::create(MyWidgetComponent::class);
+ $block->setData('magewire', $component);
+ return $block;
+ }
+
+ public function reconstruct(ComponentRequestContext $request): AbstractBlock
+ {
+ // Rebuild from snapshot — get widget ID from memo, recreate block
+ $widgetId = $request->snapshot->memo['widget_id'] ?? null;
+ $block = $this->widgetRepository->getBlockById($widgetId);
+ return $this->construct($block);
+ }
+
+ public function arguments(): MagewireArguments
+ {
+ return $this->widgetBlockArgumentsFactory->create();
+ }
+}
+```
+
+### ComponentArguments: Structured Block Arguments
+
+Magewire introduces a structured argument system for passing data to components through layout XML. Arguments are extracted from block data during the assembly phase.
+
+**Public arguments** — prefixed with `magewire.`, become component properties:
+
+```xml
+
+
+ Vendor\Module\Magewire\MyComponent
+ 42
+ price
+
+
+```
+
+The `magewire.` prefix is stripped and kebab-case is converted to camelCase:
+- `magewire.product-id` → `productId`
+- `magewire.sort-order` → `sortOrder`
+
+**Group arguments** — prefixed with `magewire:{group}:{key}`, organized into named groups:
+
+```xml
+
+
+ Vendor\Module\Magewire\MyComponent
+ 10
+ 20
+ 3600
+
+
+```
+
+Group arguments are accessed via the `MagewireArguments` API:
+
+```php
+// In your component's mount() — receives the 'mount' group
+public function mount(int $categoryId = 0, int $pageSize = 10): void
+{
+ // $categoryId = 10, $pageSize = 20 (from magewire:mount:*)
+}
+
+// In a resolver or feature — access any group
+$arguments->forMount(); // ['categoryId' => 10, 'pageSize' => 20]
+$arguments->forGroup('config'); // ['cacheTtl' => 3600]
+$arguments->toParams(); // All public arguments as array
+```
+
+**Resolver-specific arguments** — the `magewire:resolver` key can force a specific resolver:
+
+```xml
+widget
+```
+
+**Alias** — the `magewire:alias` key sets a component alias for lookup:
+
+```xml
+shipping-form
+```
+
+### Argument Class Hierarchy
+
+Each resolver provides its own `MagewireArguments` subclass:
+
+```
+MagewireArguments (abstract, extends DataObject)
+ └── BlockMagewireArguments
+ └── LayoutBlockArguments (used by LayoutResolver, marked shared="false" in DI)
+```
+
+Custom resolvers create their own subclass for specialized argument handling (e.g., `WidgetBlockArguments` could extract widget configuration parameters).
+
+### The Layout Resolver
+
+The built-in `LayoutResolver` (accessor: `layout`) handles the most common case — components declared in layout XML. It supports three binding formats:
+
+```xml
+
+Vendor\Module\Magewire\MyComponent
+
+
+
+ Vendor\Module\Magewire\MyComponent
+
+
+
+
+ true
+
+```
+
+On dehydrate, the `LayoutResolver` stores the active layout handles in the snapshot memo. On reconstruction (AJAX), it regenerates the layout from those handles to recover the block.
+
+### Writing a Custom Resolver
+
+To add a new component source (e.g., Magento widgets):
+
+1. Create a resolver class extending `ComponentResolver`
+2. Create a `MagewireArguments` subclass for your argument format
+3. Register in area-scoped DI with a unique accessor name and sort order
+
+```xml
+
+
+
+
+ Vendor\Module\Mechanisms\ResolveComponents\ComponentResolver\WidgetResolver
+
+
+
+
+```
+
+Lower sort orders are evaluated first. The `LayoutResolver` intentionally uses a high sort order (99900) so it acts as a fallback — custom resolvers should use lower numbers to take priority when their `complies()` check matches.
+
+---
+
+## Snapshot & State Flow
+
+The `Snapshot` is the serialized state of a component, round-tripped between frontend and backend as JSON embedded in the HTML.
+
+```
+Snapshot = {
+ data: { /* public properties */ },
+ memo: { /* metadata: resolver class, children, bindings, etc. */ },
+ checksum: /* HMAC of data+memo */
+}
+```
+
+The checksum prevents tampering. On each AJAX request, Magewire validates it before processing.
+
+`Memo` carries non-property metadata. The `ResolveComponents` mechanism writes the component resolver class name into memo so the component can be reconstructed on subsequent requests without needing layout context.
+
+`Effects` accumulates side effects during the request (redirect, events, method return values) and is sent back to the frontend alongside the new snapshot.
+
+### Synthesizers
+
+Synthesizers (in `dist/Mechanisms/HandleComponents/Synthesizers/` for ported ones, `lib/Magewire/Mechanisms/HandleComponents/Synthesizers/` for Magento-specific ones) handle serialization of non-scalar property types (e.g. `DataObject`, PHP enums, collections). To support a custom type in properties, create a synthesizer and register it in DI.
+
+---
+
+## Request Flow (AJAX Update)
+
+```
+POST magewire/update
+ → Update controller (src/Controller/Magewire/Update.php)
+ → HandleRequestFacade::update()
+ → HandleRequests mechanism
+ 1. Reconstruct component from snapshot memo (resolver class)
+ 2. boot() + initialize() hooks
+ 3. hydrate() hooks
+ 4. booted() hook
+ 5. Apply property updates → updating/updated hooks
+ 6. Execute method calls
+ 7. rendering() hook → render template → rendered() hook
+ 8. dehydrate() hooks
+ 9. Generate new snapshot + checksum
+ 10. Return { snapshot, effects, html }
+ ← Alpine.js morphs DOM, stores new snapshot
+```
+
+---
+
+## Layout & Template Integration
+
+Magewire's own layout is defined in `src/view/base/layout/default.xml`. It creates a `magewire` root block that outputs all setup scripts (Alpine.js init, utilities, addons, directives, feature scripts).
+
+Magewire can be bound to any block class — not just `Magewirephp\Magewire\Block\Magewire`. The `ResolveComponents` mechanism discovers all blocks with a `magewire` data argument during layout render, uses the appropriate `ComponentResolver` to instantiate the PHP component class, mounts it, and embeds the snapshot as a `wire:snapshot` attribute on the root element.
+
+### Layout Containers
+
+All Magewire layout output is organized in named containers. Extend via standard Magento layout XML:
+
+```xml
+
+
+
+```
+
+Full layout reference (from `src/view/base/layout/default.xml`). Elements marked **(block)** have templates; **(container)** are injection points.
+
+| Name | Type | Purpose |
+|------|------|---------|
+| `magewire` | block | Root block (`root.phtml`) |
+| `magewire.global` | block | Global JS setup (`js/magewire/global.phtml`) |
+| `magewire.global.before` | container | Before global — holds Alpine load, Alpine code, Alpine components |
+| `magewire.alpinejs.load` | container | Alpine JS loading |
+| `magewire.alpinejs` | container | Custom Alpine JS code (before Magewire Alpine) |
+| `magewire.alpinejs.components` | container | Alpine `Alpine.data()` registrations |
+| `magewire.utilities` | block | Utility parent (`js/magewire/utilities.phtml`) — renders child utilities |
+| `magewire.utilities.after` | container | Inject custom utilities after core ones |
+| `magewire.addons` | block | Addon parent (`js/magewire/addons.phtml`) — renders child addons |
+| `magewire.addons.after` | container | Inject custom addons after core ones |
+| `magewire.global.after` | container | Custom extensions after the global block |
+| `magewire.before` | container | Holds Alpine directives, UI components, Alpine after |
+| `magewire.alpinejs.directives` | container | Custom Alpine directives |
+| `magewire.ui-components` | container | Alpine UI components (notifier lives here) |
+| `magewire.alpinejs.after` | container | Custom Alpine code after Magewire Alpine code |
+| `magewire.before.internal` | container | Debug state blocks |
+| `magewire.internal` | block | Non-overridable core block — do not inject here |
+| `magewire.internal.backwards-compatibility` | container | BC injection point inside internal block |
+| `magewire.directives` | block | Directive parent (`js/magewire/directives.phtml`) — renders child directives |
+| `magewire.features` | block | Feature parent (`js/magewire/features.phtml`) — renders child feature scripts |
+| `magewire.after.internal` | container | Inject content after the internal block |
+| `magewire.disabled` | container | Renders only when Magewire is inactive |
+| `magewire.after` | container | Everything else (debug tools, HTML blocks) |
+| `magewire.legacy` | container | V1 backwards compatibility — do not use for new code |
+
+Note: `magewire.utilities`, `magewire.addons`, `magewire.directives`, and `magewire.features` are **blocks** (not containers). They have parent templates that call `$block->getChildHtml()` to render their children. Add custom children as blocks inside them.
+
+---
+
+## JavaScript Architecture
+
+**All JavaScript must be CSP-compliant.** Never use raw `
+end() ?>
+```
+
+## Facades for Public APIs
+
+When a Feature or Mechanism needs a public API that other modules consume, register a Facade via DI.
+
+```xml
+
+ Vendor\Module\Features\SupportMyFeature
+ Vendor\Module\Features\SupportMyFeature\MyFeatureFacade
+ 5050
+
+```
+
+Access via the service provider:
+
+```php
+$facade = $magewireServiceProvider->getMyFeatureFacade();
+```
+
+Facades live in their feature's subdirectory. This pattern is experimental — check the `magewire-architecture` skill for current status.
diff --git a/.claude/skills/magewire-best-practices/references/javascript.md b/.claude/skills/magewire-best-practices/references/javascript.md
new file mode 100644
index 00000000..b122a3f3
--- /dev/null
+++ b/.claude/skills/magewire-best-practices/references/javascript.md
@@ -0,0 +1,101 @@
+# JavaScript Integration
+
+## CSP-Compatible Scripts Only
+
+All inline JavaScript must use the fragment utility (`$magewireFragment->make()->script()->start()/end()`). Never write raw `
+end() ?>
+```
+
+- `$escaper` is always imported even when not used directly in this file, so subblocks can rely on it.
+- The `@internal` docblock signals that this file is not intended for theme override.
+- Never omit `$script->end()`. The fragment mechanism is only complete when `end()` is called.
+
+**PHP values in JS strings** — always escape through `$escaper->escapeJs()`:
+
+```php
+'escapeJs(__('Too many requests! Please wait.')) ?>'
+```
+
+**PHP comments inside `
+end() ?>
+```
+
+**Layout block** in `src/view/base/layout/default.xml`, inside `magewire.utilities`:
+
+```xml
+
+```
+
+---
+
+## Addon
+
+An addon is a stateful, framework-agnostic API. It is Alpine-reactive when the third argument to
+`register()` is `true`, allowing its state to drive the DOM directly.
+
+**`src/view/base/templates/js/magewire/addons/poll.phtml`**
+
+```php
+getData('view_model');
+$magewireFragment = $magewireViewModel->utils()->fragment();
+?>
+make()->script()->start() ?>
+
+end() ?>
+```
+
+**Layout block** in `src/view/base/layout/default.xml`, inside `magewire.addons`:
+
+```xml
+
+```
+
+---
+
+## Alpine component
+
+An Alpine component is a thin wrapper that exposes addon state and a limited set of methods to HTML templates.
+All logic lives in the addon. The component only provides what the template needs.
+
+Magewire ships `magewire.csp.min.js`, an unmodified copy of Livewire's JavaScript bundle, which includes
+the Alpine CSP build. HTML attribute expressions can only access properties and methods defined on the
+component's returned data object. Closure variables like `const poll = window.MagewireAddons.poll` are
+not in scope from HTML — they must be wrapped in component methods. That is the sole reason for the
+`START/END` comment markers.
+
+**`src/view/base/templates/js/alpinejs/components/magewire-poll.phtml`**
+
+```php
+getData('view_model');
+$magewireFragment = $magewireViewModel->utils()->fragment();
+?>
+make()->script()->start() ?>
+
+end() ?>
+```
+
+**Usage in a theme template:**
+
+```html
+
+
+
+
+
+```
+
+**Layout block** in `src/view/base/layout/default.xml`, inside `magewire.alpinejs.components`:
+
+```xml
+
+```
+
+---
+
+## Directive
+
+A directive adds a declarative HTML attribute. It is self-contained and exports nothing.
+
+**`src/view/base/templates/js/magewire/directives/copy.phtml`**
+
+```php
+getData('view_model');
+$magewireFragment = $magewireViewModel->utils()->fragment();
+?>
+make()->script()->start() ?>
+
+end() ?>
+```
+
+**Usage:**
+
+```html
+
+
+
+
+npm install magewire
+
+```
+
+**Layout block** in `src/view/base/layout/default.xml`, inside `magewire.directives`:
+
+```xml
+
+```
+
+---
+
+## Feature
+
+A feature bridges a Magewire PHP Feature's effects to an addon or utility. It reads effects pushed by PHP
+and calls the appropriate addon methods.
+
+The PHP side pushes a custom effect in `dehydrate()`:
+
+```php
+public function dehydrate(ComponentContext $context): void
+{
+ $context->pushEffect('poll', ['reset' => true]);
+}
+```
+
+**`src/view/base/templates/magewire-features/support-magewire-poll/support-magewire-poll.phtml`**
+
+```php
+getData('view_model');
+$magewireFragment = $magewireViewModel->utils()->fragment();
+?>
+make()->script()->start() ?>
+
+end() ?>
+```
+
+**Layout block** in `src/view/base/layout/default.xml`, inside `magewire.features`:
+
+```xml
+
+```
+
+---
+
+## Frontend-only component
+
+When a component uses frontend-specific APIs (e.g., Hyva's `hyva.getFormKey()`), it goes in `frontend/` instead of `base/`.
+The structure under `js/` is identical — only the view area changes.
+
+**`src/view/frontend/templates/js/alpinejs/components/magewire-form.phtml`**
+
+```php
+getData('view_model');
+$magewireFragment = $magewireViewModel->utils()->fragment();
+?>
+make()->script()->start() ?>
+
+end() ?>
+```
+
+**Layout block** in `src/view/frontend/layout/default.xml`:
+
+```xml
+
+```
diff --git a/.claude/skills/magewire-javascript/references/reference.md b/.claude/skills/magewire-javascript/references/reference.md
new file mode 100644
index 00000000..add97b6f
--- /dev/null
+++ b/.claude/skills/magewire-javascript/references/reference.md
@@ -0,0 +1,372 @@
+# Reference
+
+---
+
+## Naming conventions
+
+| Type | Function name | Example |
+|---|---|---|
+| Utility | `magewire{Name}Utility` | `magewireClipboardUtility` |
+| Addon | `magewire{Name}Addon` | `magewirePollAddon` |
+| Alpine component | `magewire{Name}` | `magewirePoll` |
+| Alpine bindings | `magewire{Name}Bindings` | `magewirePollBindings` |
+| Directive | — (IIFE, no export) | — |
+| Feature | — (event listener, no export) | — |
+
+Registration keys are the camelCase name without prefix or suffix: `'clipboard'`, `'poll'`, `'notifier'`.
+
+---
+
+## Registration calls
+
+```javascript
+// Utility — waits for alpine:init
+document.addEventListener('alpine:init', () => window.MagewireUtilities.register('name', factoryFn), { once: true });
+
+// Addon — immediate; MagewireResource queues reactive items if Alpine is not yet ready
+window.MagewireAddons.register('name', factoryFn, true); // true = Alpine.reactive
+window.MagewireAddons.register('name', factoryFn, false); // false = plain object
+
+// Alpine component
+document.addEventListener('alpine:init', () => Alpine.data('magewire{Name}', factoryFn), { once: true });
+
+// Alpine bindings (optional companion)
+document.addEventListener('alpine:init', () => Alpine.bind('magewire{Name}Bindings', bindingsFn), { once: true });
+
+// Alpine store
+document.addEventListener('alpine:init', () => Alpine.store('name', { ... }));
+
+// Directive
+document.addEventListener('magewire:initialized', event => Magewire.directive('mage:name', handler));
+```
+
+---
+
+## Event timing
+
+| Event | Fires when | Register here |
+|---|---|---|
+| `alpine:init` | Alpine starts, before DOM walk | `Alpine.data`, `Alpine.store`, `Alpine.bind`, utilities, addons (if not immediate) |
+| `magewire:init` | Magewire runtime ready | `Magewire.hook('commit')`, `Magewire.hook('request')`, feature init |
+| `magewire:initialized` | Full init complete | `Magewire.directive()` |
+
+Always add `{ once: true }` to registration listeners.
+
+---
+
+## PHP boilerplate
+
+**Minimal (no PHP values in JS):**
+
+```php
+getData('view_model');
+$magewireFragment = $magewireViewModel->utils()->fragment();
+?>
+make()->script()->start() ?>
+
+end() ?>
+```
+
+**With PHP enum values:**
+
+```php
+use Magewirephp\Magewire\Model\Magewire\Notifier\NotificationStateEnum;
+
+$state = NotificationStateEnum::IDLE->getState(); // used inside escapeJs()
+```
+
+```javascript
+const state = 'escapeJs(NotificationStateEnum::IDLE->getState()) ?>';
+const levels = JSON.parse('');
+```
+
+**PHP comment inside `
+
+ getChildHtml() ?>
+
+```
+
+See `themes/Hyva/view/frontend/templates/script.phtml` for the production version.
+
+## 5. Registering a Feature-scoped bridge script
+
+Use when your theme Feature needs a companion JS file rendered into `magewire.features`.
+
+**`themes/MyTheme/view/frontend/layout/default_mytheme.xml`**
+```xml
+
+
+
+```
+
+**`themes/MyTheme/view/frontend/templates/magewire-features/support-mytheme/bridge.phtml`**
+```php
+getData('magewire_utility');
+$magewireFragment = $magewireUtility->utils()->fragment();
+$script = $magewireFragment->make()->script()->start();
+?>
+
+end(); ?>
+```
+
+The fragment-based script pattern is non-negotiable: it rewrites inline scripts into CSP-compliant form. Raw `
+ HTML;
+ }
+ public static function scriptConfig($options = [])
+ {
+ app(static::class)->hasRenderedScripts = true;
+ $nonce = static::nonce($options);
+ $progressBar = config('livewire.navigate.show_progress_bar', true) ? '' : 'data-no-progress-bar';
+ $attributes = json_encode(['csrf' => app()->has('session.store') ? csrf_token() : '', 'uri' => app('livewire')->getUpdateUri(), 'progressBar' => $progressBar, 'nonce' => isset($options['nonce']) ? $options['nonce'] : '']);
+ return <<window.livewireScriptConfig = {$attributes};
+ HTML;
+ }
+ protected static function usePublishedAssetsIfAvailable($url, $manifest, $nonce)
+ {
+ $assetWarning = null;
+ // Check to see if static assets have been published...
+ if (!file_exists(public_path('vendor/livewire/manifest.json'))) {
+ return [$url, $assetWarning];
+ }
+ $publishedManifest = json_decode(file_get_contents(public_path('vendor/livewire/manifest.json')), true);
+ $versionedFileName = $publishedManifest['/livewire.js'];
+ $fileName = config('app.debug') ? '/livewire.js' : '/livewire.min.js';
+ $versionedFileName = "{$fileName}?id={$versionedFileName}";
+ $assertUrl = config('livewire.asset_url') ?? (app('livewire')->isRunningServerless() ? rtrim(config('app.asset_url'), '/') . "/vendor/livewire{$versionedFileName}" : url("vendor/livewire{$versionedFileName}"));
+ $url = $assertUrl;
+ if ($manifest !== $publishedManifest) {
+ $assetWarning = <<
+ console.warn('Livewire: The published Livewire assets are out of date\\n See: https://livewire.laravel.com/docs/installation#publishing-livewires-frontend-assets')
+
+
+ HTML;
+ }
+ return [$url, $assetWarning];
+ }
+ protected static function minify($subject)
+ {
+ return preg_replace('~(\v|\t|\s{2,})~m', '', $subject);
+ }
+ protected static function nonce($options = [])
+ {
+ $nonce = $options['nonce'] ?? Vite::cspNonce();
+ return $nonce ? "nonce=\"{$nonce}\"" : '';
+ }
+ function __construct(private readonly AssetsRepository $assetsRepository, private readonly RequestInterface $request)
+ {
+ //
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleComponents/Checksum.php b/dist/Mechanisms/HandleComponents/Checksum.php
new file mode 100644
index 00000000..b5dbc069
--- /dev/null
+++ b/dist/Mechanisms/HandleComponents/Checksum.php
@@ -0,0 +1,50 @@
+generate($snapshot)) {
+ trigger('checksum.fail', $checksum, $comparator, $snapshot);
+ throw new CorruptComponentPayloadException();
+ }
+ }
+ /**
+ * @throws FileSystemException
+ * @throws RuntimeException
+ */
+ function generate(array $snapshot): string
+ {
+ $hashKey = $this->deploymentConfig->get('crypt/key');
+ $checksum = hash_hmac('sha256', $this->serializer->serialize($snapshot), $hashKey);
+ trigger('checksum.generate', $checksum, $snapshot);
+ return $checksum;
+ }
+ function __construct(private readonly DeploymentConfig $deploymentConfig, private readonly SerializerInterface $serializer)
+ {
+ //
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleComponents/ComponentContext.php b/dist/Mechanisms/HandleComponents/ComponentContext.php
new file mode 100644
index 00000000..6ddcb744
--- /dev/null
+++ b/dist/Mechanisms/HandleComponents/ComponentContext.php
@@ -0,0 +1,118 @@
+effects = $effects instanceof Effects ? $effects : null ?? ObjectManager::getInstance()->create(Effects::class);
+ $this->memo = $memo instanceof Memo ? $memo : null ?? ObjectManager::getInstance()->create(Memo::class);
+ }
+ public function isMounting()
+ {
+ return $this->mounting;
+ }
+ public function addEffect($key, $value)
+ {
+ $this->getEffects()->setData($key, $value);
+ }
+ public function pushEffect($key, $value, $iKey = null)
+ {
+ $effects = $this->getEffects()->getData();
+ if (!is_array($effects)) {
+ $effects = [];
+ }
+ if ($iKey) {
+ $effects[$key][$iKey] = $value;
+ } else {
+ $effects[$key][] = $value;
+ }
+ $this->getEffects()->setData($effects);
+ return $this;
+ }
+ public function addMemo($key, $value)
+ {
+ $this->getMemo()->setData($key, $value);
+ }
+ public function pushMemo($key, $value, $iKey = null)
+ {
+ $memo = $this->getMemo()->getData();
+ if (!is_array($memo)) {
+ $memo = [];
+ }
+ if ($iKey) {
+ $memo[$key][$iKey] = $value;
+ } else {
+ $memo[$key][] = $value;
+ }
+ $this->getMemo()->setData($memo);
+ return $this;
+ }
+ public function setEffects(Effects $effects)
+ {
+ $this->effects = $effects;
+ return $this;
+ }
+ public function setMemo(Memo $memo)
+ {
+ $this->memo = $memo;
+ return $this;
+ }
+ public function getEffects(): Effects
+ {
+ return $this->effects;
+ }
+ public function getMemo(): Memo
+ {
+ return $this->memo;
+ }
+ public function getComponent(): Component
+ {
+ return $this->component;
+ }
+ public function getBlock(): AbstractBlock
+ {
+ return $this->block;
+ }
+ public function hasEffect($key, $iKey = null): bool
+ {
+ $has = $this->getEffects()->hasData($key);
+ if ($has && $iKey) {
+ $data = $this->getEffects()->getData($key);
+ if (is_array($data)) {
+ return isset($data[$iKey]);
+ }
+ return false;
+ }
+ return $has;
+ }
+ public function hasMemo($key, $iKey = null)
+ {
+ $has = $this->getMemo()->hasData($key);
+ if ($has && $iKey) {
+ $data = $this->getMemo()->getData($key);
+ if (is_array($data)) {
+ return isset($data[$iKey]);
+ }
+ return false;
+ }
+ return $has;
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleComponents/HandleComponents.php b/dist/Mechanisms/HandleComponents/HandleComponents.php
new file mode 100644
index 00000000..0c0bdd62
--- /dev/null
+++ b/dist/Mechanisms/HandleComponents/HandleComponents.php
@@ -0,0 +1,507 @@
+propertySynthesizers, $class);
+ }
+ }
+ public function mount($name, $params = [], $key = null, AbstractBlock|null $block = null, Component|null $component = null)
+ {
+ $parent = last(self::$componentStack);
+ if ($html = $this->shortCircuitMount($name, $params, $key, $parent)) {
+ $shortCircuitHtml = $html;
+ return function (AbstractBlock $block, string $html) use ($shortCircuitHtml) {
+ return [$block, $shortCircuitHtml];
+ };
+ }
+ if ($block === null) {
+ throw new InvalidArgumentException('Argument $block can not be null.');
+ }
+ $context = $this->componentContextFactory->create(['block' => $block, 'component' => $component, 'mounting' => true]);
+ if (config('app.debug')) {
+ $start = microtime(true);
+ }
+ $finish = trigger('mount', $component, $params, $key, $parent);
+ if (config('app.debug')) {
+ trigger('profile', 'mount', $component->getId(), [$start ?? 0, microtime(true)]);
+ }
+ $this->pushOntoComponentStack($component);
+ $start = config('app.debug') ? microtime(true) : null;
+ /*
+ * This function is divided based on the original design due to the presence of both pre and post-render
+ * mechanisms within Magento. It serves as a form of middleware where the Magewire mechanism is embedded
+ * around it, instead of being directly responsible for rendering the component. The standard Block render
+ * mechanism within Magewire remains responsible for the actual rendering process and does return HTML.
+ */
+ return function (AbstractBlock $block, string $html) use ($component, $context, $start, $finish) {
+ if (config('app.debug')) {
+ $start = microtime(true);
+ }
+ $html = $this->render($component, '', $html);
+ if (config('app.debug')) {
+ trigger('profile', 'render', $component->getId(), [$start, microtime(true)]);
+ }
+ if (config('app.debug')) {
+ $start = microtime(true);
+ }
+ trigger('dehydrate', $component, $context);
+ $snapshot = $this->snapshot($component, $context);
+ if (config('app.debug')) {
+ trigger('profile', 'dehydrate', $component->getId(), [$start, microtime(true)]);
+ }
+ trigger('destroy', $component, $context);
+ $html = Utils::insertAttributesIntoHtmlRoot($html, ['wire:snapshot' => $snapshot, 'wire:effects' => $context->getEffects()->toArray()]);
+ $this->popOffComponentStack();
+ return [$block, $finish($html, $snapshot)];
+ };
+ }
+ protected function shortCircuitMount($name, $params, $key, $parent)
+ {
+ $newHtml = null;
+ trigger('pre-mount', $name, $params, $key, $parent, function ($html) use (&$newHtml) {
+ $newHtml = $html;
+ });
+ return $newHtml;
+ }
+ /**
+ * @throws FileSystemException
+ * @throws ComponentNotFoundException
+ * @throws MethodNotFoundException
+ * @throws RuntimeException
+ */
+ public function update($snapshot, $updates, $calls, AbstractBlock|null $block = null)
+ {
+ if ($block === null) {
+ throw new InvalidArgumentException('Argument $block can not be of type null.');
+ }
+ $data = $snapshot['data'];
+ $memo = $snapshot['memo'];
+ if (config('app.debug')) {
+ $start = microtime(true);
+ }
+ [$component, $context] = $this->fromSnapshot($snapshot, $block);
+ $this->pushOntoComponentStack($component);
+ trigger('hydrate', $component, $memo, $context);
+ $this->updateProperties($component, $updates, $data, $context);
+ if (config('app.debug')) {
+ trigger('profile', 'hydrate', $component->getId(), [$start ?? 0, microtime(true)]);
+ }
+ $this->callMethods($component, $calls, $context);
+ /*
+ * This function is divided based on the original design due to the presence of both pre and post-render
+ * mechanisms within Magento. It serves as a form of middleware where the Magewire mechanism is embedded
+ * around it, instead of being directly responsible for rendering the component. The standard Block render
+ * mechanism within Magewire remains responsible for the actual rendering process.
+ */
+ return function (AbstractBlock $block, string $html) use ($snapshot, $context, $component) {
+ if (config('app.debug')) {
+ $start = microtime(true);
+ }
+ if ($html = $this->render($component, '', $html)) {
+ $context->addEffect('html', $html);
+ if (config('app.debug')) {
+ trigger('profile', 'render', $component->getId(), [$start ?? 0, microtime(true)]);
+ }
+ }
+ if (config('app.debug')) {
+ $start = microtime(true);
+ }
+ trigger('dehydrate', $component, $context);
+ $snapshot = $this->snapshot($component, $context);
+ if (config('app.debug')) {
+ trigger('profile', 'dehydrate', $component->getId(), [$start ?? 0, microtime(true)]);
+ }
+ trigger('destroy', $component, $context);
+ $this->popOffComponentStack();
+ return [$snapshot, $context->effects];
+ };
+ }
+ /**
+ * @throws ComponentNotFoundException
+ * @throws FileSystemException
+ * @throws RuntimeException
+ * @throws Exception
+ */
+ public function fromSnapshot($snapshot, AbstractBlock|null $block = null)
+ {
+ if (!$block instanceof AbstractBlock) {
+ throw new Exception(sprintf('Invalid block type: %s', is_object($block) ? get_class($block) : 'Unknown'));
+ } elseif (!$block->getData('magewire') instanceof Component) {
+ throw new ComponentNotFoundException(sprintf('Unable to find component: [%s]', $block->getNameInLayout()));
+ }
+ /** @var Component $component */
+ $component = $block->getData('magewire');
+ $context = $this->componentContextFactory->create(['component' => $component, 'block' => $block]);
+ $this->hydrateProperties($context->getComponent(), $snapshot['data'], $context);
+ return [$component, $context];
+ }
+ public function snapshot($component, $context = null)
+ {
+ $context ??= $this->componentContextFactory->create(['component' => $component]);
+ $data = $this->dehydrateProperties($component, $context);
+ $snapshot = ['data' => $data, 'memo' => ['id' => $component->getId(), 'name' => $component->getName(), ...$context->getMemo()->toArray()]];
+ $snapshot['checksum'] = $this->checksum->generate($snapshot);
+ return $snapshot;
+ }
+ protected function dehydrateProperties($component, $context)
+ {
+ $data = Utils::getPublicPropertiesDefinedOnSubclass($component);
+ foreach ($data as $key => $value) {
+ $data[$key] = $this->dehydrate($value, $context, $key);
+ }
+ return $data;
+ }
+ protected function dehydrate($target, $context, $path)
+ {
+ if (Utils::isAPrimitive($target)) {
+ return $target;
+ }
+ $synth = $this->propertySynth($target, $context, $path);
+ [$data, $meta] = $synth->dehydrate($target, function ($name, $child) use ($context, $path) {
+ return $this->dehydrate($child, $context, "{$path}.{$name}");
+ });
+ $meta['s'] = $synth::getKey();
+ return [$data, $meta];
+ }
+ protected function hydrateProperties($component, $data, $context)
+ {
+ foreach ($data as $key => $value) {
+ if (!property_exists($component, $key)) {
+ continue;
+ }
+ $child = $this->hydrate($value, $context, $key);
+ // Typed properties shouldn't be set back to "null". It will throw an error...
+ if ((new \ReflectionProperty($component, $key))->getType() && is_null($child)) {
+ continue;
+ }
+ $component->{$key} = $child;
+ }
+ }
+ protected function hydrate($valueOrTuple, $context, $path)
+ {
+ if (!Utils::isSyntheticTuple($value = $tuple = $valueOrTuple)) {
+ return $value;
+ }
+ [$value, $meta] = $tuple;
+ if ($this->isRemoval($value) && str($path)->contains('.')) {
+ return $value;
+ }
+ $synth = $this->propertySynth($meta['s'], $context, $path);
+ return $synth->hydrate($value, $meta, function ($name, $child) use ($context, $path) {
+ return $this->hydrate($child, $context, "{$path}.{$name}");
+ });
+ }
+ protected function hydratePropertyUpdate($valueOrTuple, $context, $path)
+ {
+ if (!Utils::isSyntheticTuple($value = $tuple = $valueOrTuple)) {
+ return $value;
+ }
+ [$value, $meta] = $tuple;
+ // Nested properties get set as `__rm__` when they are removed. We don't want to hydrate these.
+ if ($this->isRemoval($value) && str($path)->contains('.')) {
+ return $value;
+ }
+ $synth = $this->propertySynth($meta['s'], $context, $path);
+ return $synth->hydrate($value, $meta, function ($name, $child) {
+ return $child;
+ });
+ }
+ protected function render($component, $default = null, string|null $html = null)
+ {
+ $replace = store($component)->get('skipRender', false);
+ if ($replace) {
+ $replace = value(is_string($html) ? $html : $default);
+ if (!$replace) {
+ return '';
+ }
+ return Utils::insertAttributesIntoHtmlRoot($html, ['wire:id' => $component->getId()]);
+ }
+ [$block, $properties] = $this->getView($component);
+ return $this->trackInRenderStack($component, function () use ($component, $block, $properties, $html) {
+ $finish = trigger('render', $component, $block, $properties);
+ $html = Utils::insertAttributesIntoHtmlRoot($html, ['wire:id' => $component->getId()]);
+ return $finish($html, function ($newHtml) use (&$html) {
+ $html = $newHtml;
+ }, $component->block());
+ });
+ }
+ protected function getView($component)
+ {
+ // WIP
+ // if (method_exists($component, 'render')) {
+ // $block = wrap($component)->render();
+ //
+ // if ($block instanceof AbstractBlock) {
+ // $block->setData($component->getBlock()->getData());
+ // $block->setNameInLayout($component->getBlock()->getNameInLayout());
+ //
+ // $component->getResolver()->construct($block);
+ // }
+ // }
+ return [$component->block(), Utils::getPublicPropertiesDefinedOnSubclass($component)];
+ }
+ protected function trackInRenderStack($component, $callback)
+ {
+ static::$renderStack[] = $component;
+ return tap($callback(), function () {
+ array_pop(static::$renderStack);
+ });
+ }
+ protected function updateProperties($component, $updates, $data, $context)
+ {
+ $finishes = [];
+ foreach ($updates as $path => $value) {
+ $value = $this->hydrateForUpdate($data, $path, $value, $context);
+ // We only want to run "updated" hooks after all properties have
+ // been updated so that each individual hook has the ability
+ // to overwrite the updated states of other properties...
+ $finishes[] = $this->updateProperty($component, $path, $value, $context);
+ }
+ foreach ($finishes as $finish) {
+ $finish();
+ }
+ }
+ public function updateProperty($component, $path, $value, $context)
+ {
+ $segments = explode('.', $path);
+ $property = array_shift($segments);
+ $finish = trigger('update', $component, $path, $value);
+ // Ensure that it's a public property, not on the base class first...
+ if (!in_array($property, array_keys(Utils::getPublicPropertiesDefinedOnSubclass($component)))) {
+ throw new PublicPropertyNotFoundException($property, $component->getName());
+ }
+ // If this isn't a "deep" set, set it directly, otherwise we have to
+ // recursively get up and set down the value through the synths...
+ if (empty($segments)) {
+ $this->setComponentPropertyAwareOfTypes($component, $property, $value);
+ } else {
+ $propertyValue = $component->{$property};
+ $this->setComponentPropertyAwareOfTypes($component, $property, $this->recursivelySetValue($property, $propertyValue, $value, $segments, 0, $context));
+ }
+ return $finish;
+ }
+ protected function hydrateForUpdate($raw, $path, $value, $context)
+ {
+ $meta = $this->getMetaForPath($raw, $path);
+ // If we have meta data already for this property, let's use that to get a synth...
+ if ($meta) {
+ return $this->hydratePropertyUpdate([$value, $meta], $context, $path, $raw);
+ }
+ // If we don't, let's check to see if it's a typed property and fetch the synth that way...
+ $parent = str($path)->contains('.') ? data_get($context->component, str($path)->beforeLast('.')->toString()) : $context->component;
+ $childKey = str($path)->afterLast('.');
+ if ($parent && is_object($parent) && property_exists($parent, $childKey) && Utils::propertyIsTyped($parent, $childKey)) {
+ $type = Utils::getProperty($parent, $childKey)->getType();
+ $types = $type instanceof ReflectionUnionType ? $type->getTypes() : [$type];
+ foreach ($types as $type) {
+ $synth = $this->getSynthesizerByType($type->getName(), $context, $path);
+ if ($synth) {
+ return $synth->hydrateFromType($type->getName(), $value);
+ }
+ }
+ }
+ return $value;
+ }
+ protected function getMetaForPath($raw, $path)
+ {
+ $segments = explode('.', $path);
+ $first = array_shift($segments);
+ [$data, $meta] = Utils::isSyntheticTuple($raw) ? $raw : [$raw, null];
+ if ($path !== '') {
+ $value = $data[$first] ?? null;
+ return $this->getMetaForPath($value, implode('.', $segments));
+ }
+ return $meta;
+ }
+ protected function recursivelySetValue($baseProperty, $target, $leafValue, $segments, $index = 0, $context = null)
+ {
+ $isLastSegment = count($segments) === $index + 1;
+ $property = $segments[$index];
+ $path = implode('.', array_slice($segments, 0, $index + 1));
+ $synth = $this->propertySynth($target, $context, $path);
+ if ($isLastSegment) {
+ $toSet = $leafValue;
+ } else {
+ $propertyTarget = $synth->get($target, $property);
+ // "$path" is a dot-notated key. This means we may need to drill
+ // down and set a value on a deeply nested object. That object
+ // may not exist, so let's find the first one that does...
+ // Here's we've determined we're trying to set a deeply nested
+ // value on an object/array that doesn't exist, so we need
+ // to build up that non-existant nesting structure first.
+ if ($propertyTarget === null) {
+ $propertyTarget = [];
+ }
+ $toSet = $this->recursivelySetValue($baseProperty, $propertyTarget, $leafValue, $segments, $index + 1, $context);
+ }
+ $method = $this->isRemoval($leafValue) && $isLastSegment ? 'unset' : 'set';
+ $pathThusFar = collect([$baseProperty, ...$segments])->slice(0, $index + 1)->join('.');
+ $fullPath = collect([$baseProperty, ...$segments])->join('.');
+ $synth->{$method}($target, $property, $toSet, $pathThusFar, $fullPath);
+ return $target;
+ }
+ protected function setComponentPropertyAwareOfTypes($component, $property, $value)
+ {
+ try {
+ $component->{$property} = $value;
+ } catch (\TypeError $e) {
+ // If an "int" is being set to empty string, unset the property (making it null).
+ // This is common in the case of `wire:model`ing an int to a text field...
+ // If a value is being set to "null", do the same...
+ if ($value === '' || $value === null) {
+ unset($component->{$property});
+ } else {
+ throw $e;
+ }
+ }
+ }
+ /**
+ * @throws MethodNotFoundException
+ */
+ protected function callMethods($root, $calls, $context)
+ {
+ $returns = [];
+ foreach ($calls as $idx => $call) {
+ $method = $call['method'];
+ $params = $call['params'];
+ $earlyReturnCalled = false;
+ $earlyReturn = null;
+ $returnEarly = function ($return = null) use (&$earlyReturnCalled, &$earlyReturn) {
+ $earlyReturnCalled = true;
+ $earlyReturn = $return;
+ };
+ $finish = trigger('call', $root, $method, $params, $context, $returnEarly);
+ if ($earlyReturnCalled) {
+ $returns[] = $finish($earlyReturn);
+ continue;
+ }
+ $methods = Utils::getPublicMethodsDefinedBySubClass($root);
+ // Also remove "render" from the list...
+ $methods = array_values(array_diff($methods, ['render']));
+ // @todo: put this in a better place:
+ $methods[] = '__dispatch';
+ if (!in_array($method, $methods)) {
+ throw new MethodNotFoundException($method);
+ }
+ if (config('app.debug')) {
+ $start = microtime(true);
+ }
+ $return = wrap($root)->{$method}(...$params);
+ if (config('app.debug')) {
+ trigger('profile', 'call' . $idx, $root->getId(), [$start, microtime(true)]);
+ }
+ $returns[] = $finish($return);
+ }
+ $context->addEffect('returns', $returns);
+ }
+ public function findSynth($keyOrTarget, $component): ?Synth
+ {
+ $context = new ComponentContext($component);
+ try {
+ return $this->propertySynth($keyOrTarget, $context, null);
+ } catch (\Exception $e) {
+ return null;
+ }
+ }
+ public function propertySynth($keyOrTarget, $context, $path): Synth
+ {
+ return is_string($keyOrTarget) ? $this->getSynthesizerByKey($keyOrTarget, $context, $path) : $this->getSynthesizerByTarget($keyOrTarget, $context, $path);
+ }
+ /**
+ * @throws Exception
+ */
+ protected function getSynthesizerByKey($key, $context, $path)
+ {
+ foreach ($this->propertySynthesizers as $synth) {
+ if ($synth::getKey() === $key) {
+ return ObjectManager::getInstance()->create($synth, ['context' => $context, 'path' => $path]);
+ }
+ }
+ throw new Exception('No synthesizer found for key: "' . $key . '"');
+ }
+ /**
+ * @throws Exception
+ */
+ protected function getSynthesizerByTarget($target, $context, $path)
+ {
+ foreach ($this->propertySynthesizers as $synth) {
+ if ($synth::match($target)) {
+ return ObjectManager::getInstance()->create($synth, ['context' => $context, 'path' => $path]);
+ }
+ }
+ throw new Exception('Property type not supported in Magewire for property: [' . json_encode($target) . ']');
+ }
+ protected function getSynthesizerByType($type, $context, $path)
+ {
+ foreach ($this->propertySynthesizers as $synth) {
+ if ($synth::matchByType($type)) {
+ return new $synth($context, $path);
+ }
+ }
+ return null;
+ }
+ protected function pushOntoComponentStack($component)
+ {
+ array_push($this::$componentStack, $component);
+ }
+ protected function popOffComponentStack()
+ {
+ array_pop($this::$componentStack);
+ }
+ protected function isRemoval($value)
+ {
+ return $value === '__rm__';
+ }
+ public function __construct(private readonly ComponentContextFactory $componentContextFactory, private readonly Checksum $checksum, protected array $synthesizers = [])
+ {
+ // Improve modularity by injecting property synthesizers via dependency injection.
+ $this->propertySynthesizers = $synthesizers;
+ }
+ public static function provide()
+ {
+ on('pre-mount', function ($target, $view) {
+ return function ($html) use ($view, $target) {
+ if (method_exists($target, 'render')) {
+ return $target->render();
+ }
+ return $html;
+ };
+ });
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleComponents/Synthesizers/ArraySynth.php b/dist/Mechanisms/HandleComponents/Synthesizers/ArraySynth.php
new file mode 100644
index 00000000..3f963151
--- /dev/null
+++ b/dist/Mechanisms/HandleComponents/Synthesizers/ArraySynth.php
@@ -0,0 +1,48 @@
+ $child) {
+ $target[$key] = $dehydrateChild($key, $child);
+ }
+ return [$target, []];
+ }
+ function hydrate($value, $meta, $hydrateChild)
+ {
+ // If we are "hydrating" a value about to be used in an update,
+ // Let's make sure it's actually an array before try to set it.
+ // This is most common in the case of "__rm__" values, but also
+ // applies to any non-array value...
+ if (!is_array($value)) {
+ return $value;
+ }
+ foreach ($value as $key => $child) {
+ $value[$key] = $hydrateChild($key, $child);
+ }
+ return $value;
+ }
+ function set(&$target, $key, $value)
+ {
+ $target[$key] = $value;
+ }
+ function unset(&$target, $key)
+ {
+ unset($target[$key]);
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleComponents/Synthesizers/EnumSynth.php b/dist/Mechanisms/HandleComponents/Synthesizers/EnumSynth.php
new file mode 100644
index 00000000..c67dbfed
--- /dev/null
+++ b/dist/Mechanisms/HandleComponents/Synthesizers/EnumSynth.php
@@ -0,0 +1,42 @@
+value, ['class' => get_class($target)]];
+ }
+ function hydrate($value, $meta)
+ {
+ if ($value === null || $value === '') {
+ return null;
+ }
+ $class = $meta['class'];
+ return $class::from($value);
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleComponents/Synthesizers/FloatSynth.php b/dist/Mechanisms/HandleComponents/Synthesizers/FloatSynth.php
new file mode 100644
index 00000000..cc2bf729
--- /dev/null
+++ b/dist/Mechanisms/HandleComponents/Synthesizers/FloatSynth.php
@@ -0,0 +1,34 @@
+ $child) {
+ $data[$key] = $dehydrateChild($key, $child);
+ }
+ return [$data, []];
+ }
+ function hydrate($value, $meta, $hydrateChild)
+ {
+ $obj = new stdClass();
+ foreach ($value as $key => $child) {
+ $obj->{$key} = $hydrateChild($key, $child);
+ }
+ return $obj;
+ }
+ function set(&$target, $key, $value)
+ {
+ $target->{$key} = $value;
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleComponents/Synthesizers/Synth.php b/dist/Mechanisms/HandleComponents/Synthesizers/Synth.php
new file mode 100644
index 00000000..36e1b5aa
--- /dev/null
+++ b/dist/Mechanisms/HandleComponents/Synthesizers/Synth.php
@@ -0,0 +1,59 @@
+{$key};
+ }
+ function __call($method, $params)
+ {
+ if ($method === 'dehydrate') {
+ throw new \Exception('You must define a "dehydrate" method');
+ }
+ if ($method === 'hydrate') {
+ throw new \Exception('You must define a "hydrate" method');
+ }
+ if ($method === 'hydrateFromType') {
+ throw new \Exception('You must define a "hydrateFromType" method');
+ }
+ if ($method === 'get') {
+ throw new \Exception('This synth doesn\'t support getting properties: ' . get_class($this));
+ }
+ if ($method === 'set') {
+ throw new \Exception('This synth doesn\'t support setting properties: ' . get_class($this));
+ }
+ if ($method === 'unset') {
+ throw new \Exception('This synth doesn\'t support unsetting properties: ' . get_class($this));
+ }
+ if ($method === 'call') {
+ throw new \Exception('This synth doesn\'t support calling methods: ' . get_class($this));
+ }
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/HandleRequests/HandleRequests.php b/dist/Mechanisms/HandleRequests/HandleRequests.php
new file mode 100644
index 00000000..94b3d04e
--- /dev/null
+++ b/dist/Mechanisms/HandleRequests/HandleRequests.php
@@ -0,0 +1,150 @@
+findUpdateRoute() !== null;
+ }
+ function getUpdateUri()
+ {
+ // When routes are cached, $this->updateRoute may be null because
+ // setUpdateRoute() was never called (the route already existed).
+ // In this case, find the route from the router.
+ $route = $this->updateRoute ?? $this->findUpdateRoute();
+ return (string) str(route($route->getName(), [], false))->start('/');
+ }
+ protected function findUpdateRoute()
+ {
+ // Find the route with name ending in 'livewire.update'.
+ // Custom routes can have prefixes (e.g., 'tenant.livewire.update')
+ // so we check for routes ending with 'livewire.update', not just exact matches.
+ // Prioritise custom routes over the default route.
+ $defaultRoute = null;
+ foreach (Route::getRoutes()->getRoutes() as $route) {
+ if (str($route->getName())->endsWith('livewire.update')) {
+ // If it's the default route, save it but keep looking for a custom one
+ if ($route->getName() === 'default.livewire.update') {
+ $defaultRoute = $route;
+ continue;
+ }
+ // Found a custom route, return it immediately
+ return $route;
+ }
+ }
+ return $defaultRoute;
+ }
+ function skipRequestPayloadTamperingMiddleware()
+ {
+ \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::skipWhen(function () {
+ return $this->isLivewireRequest();
+ });
+ \Illuminate\Foundation\Http\Middleware\TrimStrings::skipWhen(function () {
+ return $this->isLivewireRequest();
+ });
+ }
+ function setUpdateRoute($callback)
+ {
+ $route = $callback([self::class, 'handleUpdate']);
+ // Append `livewire.update` to the existing name, if any.
+ if (!str($route->getName())->endsWith('livewire.update')) {
+ $route->name('livewire.update');
+ }
+ $this->updateRoute = $route;
+ }
+ public function isLivewireRequest()
+ {
+ return $this->isMagewireRequest();
+ }
+ function isLivewireRoute()
+ {
+ // @todo: Rename this back to `isLivewireRequest` once the need for it in tests has been fixed.
+ $route = request()->route();
+ if (!$route) {
+ return false;
+ }
+ /*
+ * Check to see if route name ends with `livewire.update`, as if
+ * a custom update route is used and they add a name, then when
+ * we call `->name('livewire.update')` on the route it will
+ * suffix the existing name with `livewire.update`.
+ */
+ return $route->named('*livewire.update');
+ }
+ /**
+ * @return MagewireUpdateResult|mixed|null
+ * @throws ComponentNotFoundException
+ * @throws NoSuchEntityException
+ */
+ public function handleUpdate()
+ {
+ /** @var ComponentRequestContext[] $updates */
+ $requestPayload = $this->request->getParam('components');
+ $finish = trigger('request', $requestPayload);
+ $requestPayload = $finish($requestPayload);
+ $componentResponses = [];
+ foreach ($requestPayload as $componentPayload) {
+ $reconstruct = trigger('magewire:component:reconstruct', $componentPayload);
+ $block = $reconstruct();
+ $component = $block->getData('magewire');
+ if (!$component instanceof Component) {
+ throw new ComponentNotFoundException('Something went wrong during block reconstruction');
+ }
+ /*
+ * Marks the component to indicate that it is being updated, distinguishing it from a preceding page load
+ * or refresh. This notification is crucial for informing other systems about the context of the operation.
+ */
+ store($component)->set('magewire:update', $componentPayload);
+ /*
+ * When the 'toHtml' method is invoked on any block with the 'magewire' argument, it initiates the
+ * rendering lifecycle. During initial (in other words: preceding) page renders, this process is
+ * automatically managed by the framework. However, on subsequent requests, it becomes necessary to
+ * manually trigger this lifecycle for the targeted block.
+ */
+ [$snapshot, $effects] = $this->magewireManager->render($block, $block->toHtml());
+ $componentResponses[] = ['effects' => $effects->toArray(), 'snapshot' => $this->serializer->serialize($snapshot)];
+ }
+ $responsePayload = ['components' => $componentResponses ?? [], 'assets' => []];
+ $finish = trigger('response', $responsePayload);
+ return $finish($responsePayload);
+ }
+ public function __construct(private readonly Http $request, private readonly MagewireManager $magewireManager, private readonly SerializerInterface $serializer, private readonly MagewireServiceProvider $magewireServiceProvider)
+ {
+ //
+ }
+ public function isMagewireRequest()
+ {
+ return $this->magewireServiceProvider->runtime()->mode()->isSubsequent();
+ }
+ public function request(): Http
+ {
+ return $this->request;
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/Mechanism.php b/dist/Mechanisms/Mechanism.php
new file mode 100644
index 00000000..a63fe663
--- /dev/null
+++ b/dist/Mechanisms/Mechanism.php
@@ -0,0 +1,22 @@
+instance(static::class, $this);
+ }
+ function boot()
+ {
+ //
+ }
+}
\ No newline at end of file
diff --git a/dist/Mechanisms/PersistentMiddleware/PersistentMiddleware.php b/dist/Mechanisms/PersistentMiddleware/PersistentMiddleware.php
new file mode 100644
index 00000000..5bd48298
--- /dev/null
+++ b/dist/Mechanisms/PersistentMiddleware/PersistentMiddleware.php
@@ -0,0 +1,146 @@
+extractPathAndMethodFromRequest();
+ $context->addMemo('path', $path);
+ // Although it's a POST request (stored in $method), Livewire still requires a GET value.
+ $context->addMemo('method', 'GET');
+ });
+ on('flush-state', function () {
+ // Only flush these at the end of a full request, so that child components have access to this data.
+ $this->path = null;
+ $this->method = null;
+ });
+ }
+ function addPersistentMiddleware($middleware)
+ {
+ static::$persistentMiddleware = Router::uniqueMiddleware(array_merge(static::$persistentMiddleware, (array) $middleware));
+ }
+ function setPersistentMiddleware($middleware)
+ {
+ static::$persistentMiddleware = Router::uniqueMiddleware((array) $middleware);
+ }
+ function getPersistentMiddleware()
+ {
+ return static::$persistentMiddleware;
+ }
+ protected function extractPathAndMethodFromRequest()
+ {
+ return [$this->request->getBasePath(), $this->request->getMethod()];
+ }
+ protected function extractPathAndMethodFromSnapshot($snapshot)
+ {
+ if (!isset($snapshot['memo']['path']) || !isset($snapshot['memo']['method'])) {
+ return;
+ }
+ // Store these locally, so dynamically added child components can use this data.
+ $this->path = $snapshot['memo']['path'];
+ $this->method = $snapshot['memo']['method'];
+ }
+ protected function applyPersistentMiddleware()
+ {
+ $request = $this->makeFakeRequest();
+ $middleware = $this->getApplicablePersistentMiddleware($request);
+ // Only send through pipeline if there are middleware found
+ if (is_null($middleware)) {
+ return;
+ }
+ Utils::applyMiddleware($request, $middleware);
+ }
+ protected function makeFakeRequest()
+ {
+ $originalPath = $this->formatPath($this->path);
+ $originalMethod = $this->method;
+ $currentPath = $this->formatPath(request()->path());
+ // Clone server bag to ensure changes below don't overwrite the original.
+ $serverBag = clone request()->server;
+ // Replace the Livewire endpoint path with the path from the original request.
+ $serverBag->set('REQUEST_URI', str_replace($currentPath, $originalPath, $serverBag->get('REQUEST_URI')));
+ $serverBag->set('REQUEST_METHOD', $originalMethod);
+ /**
+ * Make the fake request from the current request with path and method changed so
+ * all other request data, such as headers, are available in the fake request,
+ * but merge in the new server bag with the updated `REQUEST_URI`.
+ */
+ $request = request()->duplicate(server: $serverBag->all());
+ return $request;
+ }
+ protected function formatPath($path)
+ {
+ return '/' . ltrim($path, '/');
+ }
+ protected function getApplicablePersistentMiddleware($request)
+ {
+ $route = $this->getRouteFromRequest($request);
+ if (!$route) {
+ return [];
+ }
+ $middleware = app('router')->gatherRouteMiddleware($route);
+ return $this->filterMiddlewareByPersistentMiddleware($middleware);
+ }
+ protected function getRouteFromRequest($request)
+ {
+ try {
+ $route = app('router')->getRoutes()->match($request);
+ $request->setRouteResolver(fn() => $route);
+ } catch (NotFoundHttpException $e) {
+ return null;
+ }
+ return $route;
+ }
+ protected function filterMiddlewareByPersistentMiddleware($middleware)
+ {
+ $middleware = collect($middleware);
+ $persistentMiddleware = collect(app(PersistentMiddleware::class)->getPersistentMiddleware());
+ return $middleware->filter(function ($value, $key) use ($persistentMiddleware) {
+ return $persistentMiddleware->contains(function ($iValue, $iKey) use ($value) {
+ // Some middlewares can be closures.
+ if (!is_string($value)) {
+ return false;
+ }
+ // Ensure any middleware arguments aren't included in the comparison
+ return Str::before($value, ':') == $iValue;
+ });
+ })->values()->all();
+ }
+ function __construct(private readonly Request $request)
+ {
+ //
+ }
+}
\ No newline at end of file
diff --git a/dist/Pipe.php b/dist/Pipe.php
new file mode 100644
index 00000000..f8d46c48
--- /dev/null
+++ b/dist/Pipe.php
@@ -0,0 +1,40 @@
+target = $target;
+ }
+ function __invoke(...$params)
+ {
+ if (empty($params)) {
+ return $this->target;
+ }
+ [$before, $through, $after] = [[], null, []];
+ foreach ($params as $key => $param) {
+ if (!$through) {
+ if (is_callable($param)) {
+ $through = $param;
+ } else {
+ $before[$key] = $param;
+ }
+ } else {
+ $after[$key] = $param;
+ }
+ }
+ $params = [...$before, $this->target, ...$after];
+ $this->target = $through(...$params);
+ return $this;
+ }
+}
\ No newline at end of file
diff --git a/dist/Transparency.php b/dist/Transparency.php
new file mode 100644
index 00000000..77be5485
--- /dev/null
+++ b/dist/Transparency.php
@@ -0,0 +1,44 @@
+target;
+ }
+ function offsetExists(mixed $offset): bool
+ {
+ return isset($this->target[$offset]);
+ }
+ function offsetGet(mixed $offset): mixed
+ {
+ return $this->target[$offset];
+ }
+ function offsetSet(mixed $offset, mixed $value): void
+ {
+ $this->target[$offset] = $value;
+ }
+ function offsetUnset(mixed $offset): void
+ {
+ unset($this->target[$offset]);
+ }
+ function getIterator(): Traversable
+ {
+ return (function () {
+ foreach ($this->target as $key => $value) {
+ yield $key => $value;
+ }
+ })();
+ }
+}
\ No newline at end of file
diff --git a/dist/Wrapped.php b/dist/Wrapped.php
new file mode 100644
index 00000000..319c6e26
--- /dev/null
+++ b/dist/Wrapped.php
@@ -0,0 +1,47 @@
+fallback = $fallback;
+ return $this;
+ }
+ function __call($method, $params)
+ {
+ if (!method_exists($this->target, $method)) {
+ return value($this->fallback);
+ }
+ try {
+ $arguments = $this->methodsMap->getMethodParams($this->target::class, $method);
+ if (count($params) !== 0 && isset($params[0])) {
+ $params = array_combine(array_column($arguments, 'name'), array_intersect_key($params, $arguments));
+ }
+ // Remove parameters that are not required by the method.
+ $params = array_intersect_key($params, array_flip(array_column($arguments, 'name')));
+ return $this->target->{$method}(...$params);
+ } catch (\Throwable $e) {
+ $shouldPropagate = true;
+ $stopPropagation = function () use (&$shouldPropagate) {
+ $shouldPropagate = false;
+ };
+ trigger('exception', $this->target, $e, $stopPropagation);
+ $shouldPropagate && throw $e;
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/Compatibility.md b/docs/Compatibility.md
deleted file mode 100644
index 11325565..00000000
--- a/docs/Compatibility.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# Magewire - Compatibility
-> Please keep in mind that Magewire is currently in a Beta-phase. Therefore not all architectural choices are set in
-> concrete. So make sure you are aware of the risks of building on top of the platform in it's current state.
-
-Magewire is **not** compatible with any specific Laravel Livewire backend version. The Livewire JS package does have a
-matching version as this is a identical copy of it's origin. The goal is to make as much practible front- & backend
-features compatible.
-
-## Magento - 2.3.x
-As it's core, Magewire is build primarily for Magento 2.4.x to get rid of the deprated App\Action controller extend.
-I've gave it a headspin to still be able to use Magewire in Magento 2.3.x. I call it the "vintage" concept of handling
-HTTP subsequent requests. Therefore 2.3.x version will make Magewire HTTP requests to the ```Vintage``` instead of the
-default ```Post``` controller. Just install the extension, no extra configuration required.
-
-```
-composer require magewirephp/magewire
-```
-
-## Magento - RequireJS
-Magewire by default is meant as a Hyva Themes first extension. This means it will only work on Hyva based themes out of
-the box and **will not** work on e.g. Luma or Blank based Magento 2 themes (RequireJS dependend themes).
-
-Because most developers want to work with a more modern and fun tech-stack doesn't mean we forgot all those die-hards
-who still work with the original Magento frontend. Magewire is made compatible via a so-called compatibility
-extension.
-
-Simply install the original Magewire extension and require the compatibility extension alongside. You should be good to
-go after you're done with your default workflow when installed a new extension.
-
-```
-composer require magewirephp/magewire-requirejs
-```
-
-## Magento - Custom XHR requests
-You can walk into a situations where you load HTML via a custom XHR request where the layout gets loaded, the block HTML
-gets rendered and returned with a child block _(A)_ inside of it. When this child _(B)_ block is wired, it will use the
-'magewire_post_livewire' handle for it's subsequent requests. Therefore it's required to define the child (B) block
-inside the 'hyva_default.xml' (Hyvä Themes theme) or 'default.xml' (Luma/Blank theme) layout.
diff --git a/docs/Component.md b/docs/Component.md
deleted file mode 100644
index e369dbdf..00000000
--- a/docs/Component.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Magewire - Component
-> Please keep in mind that Magewire is currently in a Beta-phase. Therefore not all architectural choices are set in
-> concrete. So make sure you are aware of the risks of building on top of the platform in it's current state.
-
-## Making components
-
-**My/Module/Magewire/Explanation.php**
-```php
-getMagewire();
-
-?>
-
- hasFoo()): ?>
- getFoo() ?>
-
-
-```
-You will have $magewire at your disposal as long as you're inside a Magewire component. You're able to validate if a public property is set with the ```has``` prefix. Use a ```get``` prefix to get a public property value.
-
-## Layout
-The idea behind Magewire is that, like Hyva, it uses the strengths of the Magento layout structure. A block can be converted to a Magewire component in an instant just by assigning a Magewire component class. It's the exact same concept as done with ViewModels.
-
-### Register components
-You're not obliged to set a template if the block has a Magewire component. When it's parent block doesn't have a template, Magewire will set the templates based on the component class.
-
-```xml
-
-
-
-
-
-
- \My\Module\Magewire\Explanation
-
-
-
-
-
-```
-
-### Data
-Public properties can be set on page load by an optional ```mount()``` method or via the layout XML. When you want to set it via the layout, you have to use a specific structure.
-
-```xml
-
-
-
-
-
-
-
- \My\Module\Magewire\Explanation
- bar
-
-
-
-
-
-
-```
-**Note**: The public ```$foo``` property will be set if it exists inside you component.
diff --git a/docs/Component/Form.md b/docs/Component/Form.md
deleted file mode 100644
index 2c3fa25f..00000000
--- a/docs/Component/Form.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Magewire - Form Component
-> Please keep in mind that Magewire is currently in a Beta-phase. Therefore not all architectural choices are set in
-> concrete. So make sure you are aware of the risks of building on top of the platform in it's current state.
-
-## Concept
-Soon more...
diff --git a/docs/Component/Pagination.md b/docs/Component/Pagination.md
deleted file mode 100644
index b52abf8b..00000000
--- a/docs/Component/Pagination.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Magewire - Pagination Component
-> Please keep in mind that Magewire is currently in a Beta-phase. Therefore not all architectural choices are set in
-> concrete. So make sure you are aware of the risks of building on top of the platform in it's current state.
-
-## Concept
-Pagination in its current state is designed to give developers complete freedom on how data is retrieved and served.
-A number of obligations are established through the Pagination interface. Its possible there will be an extension of
-this concept in the future that is the roughest of the implementation, taking into account e.g. the use of repositories.
diff --git a/docs/Features.md b/docs/Features.md
deleted file mode 100644
index 37f102fa..00000000
--- a/docs/Features.md
+++ /dev/null
@@ -1,801 +0,0 @@
-# Magewire - Features
-> Please keep in mind that Magewire is currently in a Beta-phase. Therefore not all architectural choices are set in
-> concrete. So make sure you are aware of the risks of building on top of the platform in it's current state.
-
-## Best Practices
-1. Use the Magewire naming conventions and structures.
-2. Use Hydrators to manipulate data before or after a method gets called.
-3. Contribute or create an issue when you found bugs or sucurity issues.
-4. Keep components small and clean
-5. Use the ```My/Module/Magewire/Component``` folder when you introduce a new component type.
-
-## Folder Structure
-| Folder | Description |
-|--------|----------------------------------------------------------------------------------------------------|
-| /src | Root folder inside your module |
-| /src/Magewire | All Magewire components live here (subfolder allowed) |
-| /src/view/frontend/templates/magewire | All Magewire component template files live here (subfolder allowed) |
-
-## JavaScript
-The ```Magewire``` (alias for ```Livewire```) object is globally available on the page after DomContentLoaded. More
-information can be found inside the [Livewire docs](https://laravel-livewire.com/docs/2.x/reference#global-livewire-js).
-
-### Document Events
-- magewire:load
-- magewire:update
-- magewire:available
-- magewire:loader:start ```(event) => {}```
-- magewire:loader:stop ```(event) => {}```
-
-### Lifecycle Hooks
-[Read all about hooks](https://laravel-livewire.com/docs/2.x/reference#js-hooks)
-
-## Block Structure
-```xml
-
-
- \My\Module\Magewire\Explanation
-
-
-
-
-
-
-
-
- \My\Module\Magewire\Explanation
-
-
-
-
-
-
-
-
- \My\Module\Magewire\Explanation
-
-
-```
-
-## Templates
-Options within your block template.
-```php
-getMagewire();
-
-// Check if property exists
-$magewire->hasFoo();
-// Get property value
-$magewire->getFoo();
-// Call a custom method inside your component
-$magewire->myCustomMethod();
-// Overwrite a property after the (optional) mount method was executed
-$magewire->assign('foo', 'barbar');
-?>
-```
-
-### Switch Template
-Switch to another template during a subsequent request.
-```html
-
-
-
-```
-
-```php
-public function login()
-{
- $this->switchTemplate('My_Module::customer/account/dashboard.phtml');
-}
-```
-> **Tip**: Use the power of the layout xml to assign a "switch" template path as a data param assigned to the component.
-> This way your component becomes more dynamic and extensible for other developers.
-
-### Skip Rendering
-Set some data but prevent a frontend DOM replacement while on a subsequent request.
-```php
-public function setSomeProperties(string $value = 'bar')
-{
- // Will set the data but will return null as effects html value.
- $this->assign('foo', $value)->skipRender();
-}
-```
-
-## Component Types
-The base idea behind de default component is to keep things as simple and clean as possible without any constructor
-dependencies. Therefore I've decided to create multiple component to inherit from, who give you the option to use stuff
-like for instance property validation.
-
-```php
-class Explanation extends Magewirephp\Magewire\Component {}
-// OR
-class Explanation extends \Magewirephp\Magewire\Component\Form {}
-// OR
-class Explanation extends \Magewirephp\Magewire\Component\Pagination {}
-```
-
-## Magic Actions & Properties
-Toggle, set or emit without writing any PHP.
-```html
-
-
-
-
-
-
-
-
-
-