Application extensions

31. Commerce and content: stable presentation around authoritative transactions

31.1 Use the web's strengths when the task is document-oriented

A catalogue or content application often depends on readable documents, navigable resources, forms and predictable loading. The React web realization can preserve those qualities while sharing component contracts and design decisions with a CMP mobile application.

Surface does not require a canvas to qualify as cross-platform. The web path uses its appropriate semantic elements and platform behavior. Native presentation can use installed media or payment integrations behind qualified boundaries.

Figure 53. A product page reserves media geometry, presents stable selection controls and retains trusted confirmation behavior. A generated comparison can supplement the page without acquiring purchase authority. See the illustrated PDF for the diagram.

The product page composes responsive media, product information, option selection, availability and actions. A larger layout can add a supporting summary. A compact layout prioritizes the content and primary operation without changing the meaning of the selections.

31.2 Loading policy is part of the design

The leading image should be discoverable and sized appropriately. Off-screen product media can load later. Fonts have deliberate fallbacks. The selected option and primary action remain in a stable region while supporting content arrives.

These choices affect more than performance scores. A price or purchase action that moves while the person is about to activate it can cause a real interaction error. A layout that reserves media space protects both reading continuity and target stability.

The image system chooses transfer and decode variants based on actual display needs. A small card does not require an original-size photograph. A high-detail view can acquire a richer variant only when the person opens it.

31.3 Feedback must not overstate transaction success

A product card may lift slightly under the pointer. An Add action can acknowledge contact immediately. The cart, price and stock state still come from authoritative application operations.

A smooth transition into a summary does not prove a purchase succeeded. If stock changed or authorization failed, the UI preserves the selected values and exposes recovery. The confirmation region remains tied to the real transaction outcome.

The design language can change from editorial-flat to tactile or glass-like. It cannot change the action's approval requirements. A translucent treatment also needs an opaque fallback and readable foreground content; essential operations cannot depend on optional visual effects.

31.4 Agent assistance remains bounded

An agent can assemble a comparison from approved product organisms or suggest filters. It can update a supporting graph-owned region. It cannot replace the trusted authentication, consent or payment controls with its own persuasive imitation.

A generated Buy control still resolves to an allowed application capability. Naming the operation does not grant permission. The application checks the current user, selected product, quantity and applicable confirmation policy.

If generation fails, the product page and direct controls remain usable. If a person has already selected options, a new suggestion does not silently reset them. The same editing and revision rules that protect a conversation draft protect a purchase configuration.

31.5 Qualification combines metrics and outcomes

Measure the actual web-vital definitions for the relevant population, then run controlled delays for images and fonts. Change stock while a selection is active. Exercise keyboard checkout, a rejected transaction and a streamed comparison.

The expected outcome is stable operation and truthful state. Optional tactile work must not compete with critical content loading or input. A transaction failure must not be hidden by a successful-looking animation. The same measurements and semantic checks apply when every decorative effect is disabled.

32. Creative software: a specialized scene within a coherent shell

HLD — Arrows follow a gesture preview to one committed operation. The command owner supplies undo and revision semantics. Open the diagram for full size.

32.1 Keep the engine expert at its own work

A media or illustration editor combines a canvas, timeline, properties, asset library and command history. The specialized engine owns scene evaluation and domain-specific manipulation. Surface owns the surrounding controls, theme scopes, focus coordination and graph-bound application capabilities.

Figure 54. The document engine retains its specialized scene and history. Surface supplies the surrounding controls and lifecycle coordination. Tactile effects on the tools are separate from effects authored into the document. See the illustrated PDF for the diagram.

The engine's scene graph is not the application graph. It can contain shapes, tracks or render passes whose meaning is internal to the document. The Reaktor graph owns the document session, access policy and commands exposed to the rest of the application.

32.2 Preview and commit have different semantics

A pen stroke or object drag needs immediate local feedback. The engine can update a preview as input arrives. The committed document operation has history, persistence and collaboration semantics.

Undo should operate on meaningful document commands, not every decorative frame. A hover response should not create history. A theme field must not distort artwork unless the person explicitly applies a document effect.

This separation is also necessary for agents. An agent can propose a named edit or a preview branch. It does not mutate engine internals outside the command model. Applying the proposal remains visible and reversible where the document model supports it.

32.3 Multiple coordinate systems remain aligned

Canvas pan, zoom and rotation transform document coordinates. UI zoom transforms the surrounding controls. Pixel density affects rendering resolution. The hit-testing and overlay paths must use the corresponding transforms rather than one shared unqualified scale.

A selection outline can be drawn in a separate overlay, but it still identifies the same document object. A visual ghost during a drag is not a second selectable object. Accessibility and agent commands refer to semantic objects rather than their momentary pixel positions.

On a pen-enabled tablet, palettes may be arranged differently from a pointer-driven desktop. A phone profile can offer review and a constrained editing subset. A browser profile advertises the graphics and media capabilities it actually supports.

32.4 Resource pressure is a normal operating condition

Large assets need thumbnails, tiles or proxies. Decoded pixels, playback buffers and GPU residency have separate budgets. A hidden editor can release graphics resources while retaining a document checkpoint and meaningful session state.

Graphics loss should return control to a trusted shell capable of recovery. A failed custom renderer must not remove the application's ability to navigate away or preserve committed work. Loading the next asset must not retain every previous full-resolution decode indefinitely.

The qualification session edits while loading media, changes theme, rotates and zooms, backgrounds and resumes, and introduces graphics loss plus a concurrent change. Correct behavior preserves document coordinates and history, rejects stale operations and does not discard work during resource cleanup.

A watch, television, widget and nonvisual interface impose different attention and input constraints. A television emphasizes directional focus. A watch favors short interactions. A widget exposes a limited template under a platform lifecycle. A voice or text interface presents semantic operations rather than reading a visual tree indiscriminately.

Figure 55. A compact watch-style surface and a directional-focus interface reuse meaning while choosing different interaction structures. Their supported subsets are explicit rather than being scaled-down desktop layouts. See the illustrated PDF for the diagram.

These hosts can use a qualified local graph subset and the relevant capability bindings. Reaktor Graph remains the foundation, but the host does not need the full application's renderer, all data or every privilege. Its component profile states what can be displayed and invoked.

A widget can show a compact event summary and launch an installed action. It need not run a continuous field simulation. A watch can map a contact cue to its supported haptic behavior without supporting procedural shaders. A television can use restrained focus transitions while preserving predictable directional navigation.

A generated suggestion must fit the host's approved template and attention budget. Unsupported content is reduced, handed off to a richer surface or rejected explicitly. An important operation remains available through direct controls rather than requiring a conversation with an agent.

The qualification scenario removes optional effects, loses connectivity, introduces oversized generated content and reopens through a deep link. Essential state and actions remain understandable. The richer destination resumes the correct application context. A stale region must not redirect the person into an unrelated session merely because the host reused a presentation slot.

These profiles are extension contracts, not automatic consequences of compiling the graph for another execution target. A worker or server can supply data and validation, but it is not an interactive display backend simply because it can run application logic.

A common acceptance model across application families

The social and operational examples expose a shared truthfulness requirement. A local contact response can be immediate, but remote acceptance remains an application result. The same separation protects a message send, an order transition and a purchase. Reusing that rule is more valuable than forcing their buttons to have identical dimensions.

The learning and creative examples expose a shared integrity requirement. Decorative UI motion must not alter the domain model. A field can animate a tool or illustrate an affordance, while a simulation result or document edit remains owned by its specialized command model. The boundary makes expressive interfaces compatible with precise work.

The workbench and constrained-host examples expose a shared portability requirement. A wider range of capabilities does not mean the same page should be shown everywhere. A small host presents a useful subset, while a desktop can expose several regions at once. The graph preserves the meaning and authorization of the operations available in either presentation.

Together these requirements define the architecture's reusable core. It preserves application truth, state ownership and controlled execution while allowing composition and realization to vary. The implementation plan tests those properties in a complete CMP application before expanding the renderer matrix.