# Product edit modal
Open `/en/demo`, `/ku/demo`, or `/ar/demo` from the runnable package checkout:
```sh
composer install
php -S 127.0.0.1:8080 examples/products/router.php
```
Edit a product in either table. Change its name or price, submit, and see both
tables refresh without a page reload. Cancel or Escape discards the draft. The
example supports English/Kurdish/Arabic, RTL, field errors, deleted records,
revoked access and optimistic conflicts. Compiled assets use the release version, for example `reactive-v0.5.1.*`.
The implementation lives in `examples/products/ProductTable.php`, `table.html`,
`schema.php` and `lang/`. The router uses a private SQLite file per demo session
under `sys_get_temp_dir()/flocms-reactive-demo-v0.3`. New example databases use
integer cents, ownership and record versions; old demo databases are not migrated.
Demo login, fixed signing keys and test fixture routes are not production setup.
## Declare candidate and active record state separately
`selectedId` is writable and lets an Edit button propose a record. The `edit`
action reloads that record, checks permissions/ownership/scope and replaces any
submitted draft with its current values. The server then sets locked `editingId`,
`editingVersion` and `editorOpen`. The save action uses those sealed fields and
ignores later changes to the writable candidate selection.
The product catalog is shared with users carrying `catalog.view`; editing also
requires `catalog.edit` and ownership by the current authenticated user. The
featured table additionally requires that the record remains featured. Those
checks run on opening and on subsequent editing requests, including inside the
save transaction. Apply your application's tenant/read/edit policies consistently
when adapting these queries; the example policy is deliberately small.
`instanceKey` is locked initial state and supplies unique IDs for the controls:
```php
Reactive::mount('products', 'catalog', ['instanceKey' => 'catalog']);
Reactive::mount('products', 'featured', [
'instanceKey' => 'featured',
'featuredOnly' => true,
]);
```
Use stable, matching instance keys and unique control IDs for every mounted copy.
Locked state is visible to the browser; it is not a place to store secrets.
## Native dialog template contract
Keep the dialog element in the rendered component, including while closed:
```html
```
Do not render the native `open` attribute yourself. `data-rx-open` is the server
decision; the adapter calls `showModal()` and `close()`, preserving native modal
state during DOM morphs. `data-rx-dialog` names are unique within a component.
The trigger name and close-button name refer to that same dialog.
Native dialogs make the background inert. The adapter wraps Tab/Shift+Tab focus,
honors `autofocus`, keeps focus and selection through draft refreshes, and focuses
the first invalid control (or a `data-rx-error-summary` with `tabindex="-1"`) after
a failed submit. Closing returns focus to the original trigger or its replacement
with the same ID. If that row disappeared, use `data-rx-focus-fallback` on the search
input; otherwise the wrapper receives focus. Removing a component closes its dialog,
detaches listeners and releases the stylesheet's scrolling lock.
Add a status container inside the dialog so network/authentication errors are
visible while the background is inert. The wrapper status container is retained
for updates that fail before a dialog opens or after local cancellation.
## Cancellation and mutations
Escape and `data-rx-dialog-close` close locally, then invoke the named exposed
discard action with no writable draft updates. They clear pending debounce work.
Cancellation still runs session/view authorization on the server. It must only
clear editing state, not write records; incomplete or invalid business drafts must
not block it. The example permits discard after edit permission, ownership or
featured status is lost, while still enforcing `catalog.view`.
If view permission, CSRF, the connection or the server fails during cancellation,
the local dialog remains closed. The page displays the failure and the user can
reload to restore canonical server state. A local close does not authorize any
mutation and does not save the draft.
During a non-refresh action, dialog-bound inputs and action buttons are disabled.
Escape/cancellation is ignored until the request finishes; cancellation cannot
undo a save that already reached the server. Running actions are not automatically
replayed by repeated submits. Ordinary draft refreshes remain debounced and editable.
## Validation, exact prices and optimistic concurrency
Required/name/price checks run only in `save`, so incomplete drafts can update.
ValidationException returns rendered errors with 422 and a fresh signed snapshot.
Accepted invalid drafts stay available for correction and are escaped in templates.
The example accepts ASCII decimal prices from 0 to 999999.99, with at most two
decimal places. Prices remain strings in state and are converted to integer cents
without float arithmetic before storage. Localized labels do not imply localized
numeric parsing; normalize localized digits/formats explicitly if your application
accepts them.
Every save reloads the record and checks its current policy in a transaction.
The database update includes the sealed ID, expected version, authenticated owner
and optional featured scope, and increments the version. A version mismatch or
zero affected rows is a conflict; the newer record is not overwritten. All other
writers to the same resource must increment that version too.
Conflict errors preserve the draft. Close and reopen to load the newer version;
the package does not silently merge fields. Deleted records return an explanatory
error and cannot be recreated by save. Loss of ownership/scope/edit permission
returns 403 and still permits a view-authorized discard. Database exceptions propagate
and roll back instead of becoming a success notification.
Search and pagination remain independent of editor state. A saved name that no
longer matches a search disappears from that table; if its last page becomes empty,
normal pagination clamps to the remaining last page and focus falls back to search.
## Refresh other instances after a commit
The originating component re-renders itself. After committing, the example calls:
```php
$this->refreshComponents('catalog', 'featured');
```
The response carries up to 32 unique, validated component keys. Effects are not
stored in signed snapshots and do not repeat on later refreshes. The browser skips
the origin and invokes each other mounted instance's normal refresh endpoint with
that instance's own session/snapshot/state; current permissions are checked again.
Effects run only for successful responses, including an obsolete action response
whose mutation committed while newer edits suppressed its HTML.
An open target editor retains its draft and sealed version while table rows refresh.
Its next save still checks concurrency. External JavaScript can call
`window.FloReactive.refresh('featured')`; unknown/unmounted keys return false.
These are explicit component refreshes, not nested components or a general event bus.
## Checks and next integration
PHP tests cover record reloads, candidate/active identity separation, locked-state
tampering, permission/ownership/scope changes, exact prices, invalid drafts, deletion,
stale/replayed saves, request metadata, rollback and response-only effects. Browser
tests cover keyboard opening/focus wrapping, cancellation, save/error focus, both
tables, URL preservation, conflicts, deletion, permission loss, failed cancellation,
slow saves, cleanup, refresh APIs, strict CSP and mobile Kurdish/Arabic layouts.
This prototype has no stacked/nested dialog contract, confirmation workflow,
generic notification center or Admin resource schema. The next step is to resolve
the Admin correctness findings and use these contracts in one Admin table/form.