foundry-design 0.2.0-beta.2 → 0.2.0-beta.21

package/dist/skill/foundry-design-control/references/component-workshop.md

@@ -0,0 +1,46 @@
+# Component Workshop
+
+Use Component Workshop to inspect a project-native component as a connected system rather than editing isolated screenshots.
+
+## Enter the workshop
+
+1. Open **Components** from the workspace menu, command palette, or Components tab in Structure.
+2. Choose an indexed component. Prefer one with a live instance on the current canvas.
+3. Select the exact live instance before changing a visual property.
+4. Use the state controls to preview default, hover, focus, pressed, disabled, loading, empty, and error behavior.
+5. Use variants only when the project design graph provides variant properties. Storybook stories are indexed as variant properties.
+
+## Create a source-backed variant
+
+1. Use **Create source variant** only when Component Workshop exposes a writable Storybook, CVA, configured, or TypeScript union axis.
+2. Enter both the human label and the exact source value. Choose a mapped base variant when the new option should preserve its visual treatment.
+3. Stage the operation, then inspect its exact authoring file, adapter, source property, base variant, and preservation evidence in Review.
+4. During Apply, follow the recorded adapter rather than inventing a parallel API: create a named Storybook export, add the option to the existing CVA variant map, or extend the recorded TypeScript union and its existing implementation mapping.
+5. Re-index after the source edit. The new option must return as a mapped variant on the same axis before verification can pass.
+
+`component.variant.create.<property>` is a source-authoring operation, not a CSS property. Never satisfy it with a preview attribute or generated stylesheet.
+
+## Repair cross-instance drift
+
+After selecting a mapped variant, use **Cross-instance drift** to compare only explicitly instrumented instance properties. Missing properties are unknown, not mismatches. A repair stages one exact `variant.<property>` change for each differing instance and retains that instance's source reference. Apply each repair at the narrowest recorded call site, then verify every repaired instance against the selected variant.
+
+State previews are presentation state. They must never create a design change or enter the review ledger. Return to Default before measuring or applying unrelated changes.
+
+## Choose scope safely
+
+- **Instance** changes the selected rendered instance and is available when that instance is live.
+- **Variant** changes the selected mapped variant definition. Keep it disabled until the variant has an exact source reference.
+- **Component** changes the component source for every instance. Keep it disabled until the component itself has an exact source reference.
+
+Do not promote an instance edit to variant or component scope by inference. If the source target is missing or ambiguous, preserve the preview and ask the user to resolve the mapping.
+
+## Review and verify
+
+1. Review each recorded change with its component, selected variant, scope, viewport, theme, and state context.
+2. Apply the narrowest source edit that satisfies the reviewed scope.
+3. Rebuild and verify the selected state at its native artboard dimensions.
+4. For variant scope, verify every rendered instance of the selected variant that is available in the session.
+5. For component scope, verify every rendered instance of that component that is available in the session.
+6. Keep unavailable combinations explicit. Never claim coverage for a state, theme, or viewport that was not rendered and measured.
+7. For a newly created variant, confirm the indexed axis includes the exact new value and that the chosen base treatment was preserved.
+8. For drift repair, confirm the mismatch count returns to zero without changing instances that did not expose that property.

package/dist/skill/foundry-design-control/references/design-branches.md

@@ -0,0 +1,47 @@
+# Design branches
+
+Use Design branches when the user wants to explore materially different visual directions before choosing what should enter Review and apply.
+
+## Branch contract
+
+- Main direction is the source-ready session change set.
+- A branch owns an isolated list of design changes and direct-manipulation operations.
+- Creating a direction from another direction copies its current decisions without linking future edits.
+- Switching directions restores the previous preview values before applying the next direction.
+- Branch navigation is presentation state. It must not edit source, create an Apply run, or mark changes applied.
+- Keep no more than eight active directions in one session. Archive rejected or obsolete directions instead of deleting their rationale.
+
+## Compare and compose
+
+1. Compare two directions in fixed-size iframes using the recorded project viewport.
+2. Treat the branch ledgers as canonical. Never infer a viewport from overflowing content.
+3. Select individual decisions by branch and change identifier.
+4. Combine selections into a new isolated direction. Coalesce only changes with the same target, property, scope, breakpoint, theme, and state.
+5. Record a concise rejection note when a direction is rejected. Preserve that note with the session.
+
+## Promote a direction
+
+Choosing a direction is an explicit boundary:
+
+1. Confirm there is no active Apply run.
+2. Copy the chosen direction into the main change set with fresh identifiers and draft statuses.
+3. Mark the direction as chosen and return the active editing direction to Main.
+4. Open Review and apply. The user must still approve exact changes before the agent edits source.
+
+Never merge a direction directly into project files and never automatically retry or promote a rejected direction.
+
+## Preserve the outcome
+
+Choosing or rejecting a direction creates a portable branch decision record. Read [portable-branch-records.md](portable-branch-records.md) before exporting, importing, restoring, or linking one of these records to Design Memory.
+
+The record preserves evidence without becoming a permanent rule. Adding it to Design Memory is always a separate, explicit user action.
+
+## Verification
+
+- Confirm edits recorded in one branch never appear in another branch or Main.
+- Switch repeatedly and verify the rendered product restores exact before and after values.
+- Compare at the recorded viewport and theme.
+- Combine decisions from at least two branches and verify only selected changes appear in the new direction.
+- Promote the combined direction and confirm Review and apply contains the expected draft changes.
+- Export and re-import chosen and rejected records, verify compatibility evidence, and restore only a current record into a new isolated direction.
+- Verify Light and Dark Foundry interface themes without altering the product theme.

package/dist/skill/foundry-design-control/references/design-system-intelligence.md

@@ -0,0 +1,40 @@
+# Design System Intelligence
+
+Use the Design System workspace to understand and extend the product's existing visual language without silently introducing new conventions.
+
+## Read the system map
+
+1. Open **Design system** from the workspace menu or command palette.
+2. Filter tokens by category and select the semantic token, not merely a matching raw value.
+3. Read its source of truth, aliases, indexed references, literal repetitions, component reach, and file reach.
+4. Treat impact counts as an indexed preview. Dynamic, generated, or runtime-only usage may remain outside the graph and must be reported as unavailable rather than inferred.
+
+## Interpret guidance
+
+- **Literal drift** means an authored literal equals or sits close to a project token.
+- **Component drift** is literal drift inside a source-mapped component.
+- **Near duplicate** means two tokens in the same category fall inside the conservative numeric similarity threshold.
+- **Unused token** means no indexed reference was found. It is evidence for review, not permission to delete the token.
+
+Recommendations explain the matching category, value relationship, and source evidence. Exact token matches rank first in Inspector menus, followed by the nearest compatible project values. Never recommend a token from an unrelated category merely because its serialized value matches.
+
+## Promote recurring values
+
+1. Open **Promote** in the Design System workspace.
+2. Select a recurring authored value and inspect every indexed source location.
+3. Prefer the recommended existing semantic token when its resolved value matches. Foundry ranks the deepest compatible alias chain ahead of a raw primitive so theme and component intent survive the refactor.
+4. When no compatible token exists, review the proposed project-native token name and value. Treat the generated name as a source plan, not an applied convention.
+5. Add the plan to Review. Foundry records the exact locations, resolved value, alias chain, source blast radius, and required rebuild checks in one `token-refactor` operation.
+6. Apply with the active coding agent, re-index the project, and verify every affected consumer before marking the operation complete.
+
+Broken and circular aliases remain visible in the token detail view but never receive an invented resolved value. Dynamic and generated usages remain outside the indexed count and must be reported as unresolved.
+
+## Change the system safely
+
+1. Inspect affected components and contexts before proposing a replacement or token edit.
+2. Preserve semantic aliases when they encode intent across themes, states, or component roles.
+3. Route literal replacements, consolidation, new tokens, and token-value changes into the normal review ledger.
+4. Require an exact source mapping and explicit component, theme, breakpoint, and state scope.
+5. Rebuild and verify every affected rendered context. A token definition change is complete only after its indexed consumers remain visually and functionally correct.
+
+The Design System workspace never applies source changes automatically. Token promotion creates a draft Review operation; only the normal reviewed Apply workflow may change source.

package/dist/skill/foundry-design-control/references/motion-studio.md

@@ -0,0 +1,101 @@
+# Motion Studio
+
+Use Motion Studio when a rendered interface contains motion that must be understood, tuned, or verified against its source.
+
+## Discover rendered motion
+
+1. Select the animated target on the Canvas, then open **Motion studio** from the workspace menu or command palette.
+2. Treat the live browser and timeline as views of the same registered CSS animation, CSS transition, Web Animation, Motion for React animation, GSAP tween, or React Spring animation.
+3. Preserve the source type, duration, delay, easing, iterations, direction, fill mode, animated properties, and keyframes exactly as reported by the adapter.
+4. Use the performance tier and reduced-motion status as evidence. Do not infer compositor safety or accessibility coverage from an animation name alone.
+
+## Preserve project-native motion
+
+Foundry indexes Motion for React, GSAP, and React Spring authoring sites and associates the nearest source-backed preset with an instrumented element. For the strongest runtime evidence, register the actual animation or an equivalent preview on the rendered element:
+
+```ts
+import { registerNativeMotion } from 'foundry-design-web-adapter';
+
+registerNativeMotion(element, {
+  adapter: 'motion',
+  from: { opacity: 0, y: 12 },
+  to: { opacity: 1, y: 0 },
+  transition: { duration: 0.48, ease: [0.16, 1, 0.3, 1] },
+  source: { file: 'src/PrimaryAction.tsx', line: 18 },
+});
+
+registerNativeMotion(element, {
+  adapter: 'gsap',
+  from: { x: -24, opacity: 0 },
+  to: { x: 0, opacity: 1 },
+  config: { duration: 0.6, ease: 'power2.out' },
+  source: { file: 'src/Panel.tsx', line: 32 },
+});
+
+registerNativeMotion(element, {
+  adapter: 'react-spring',
+  from: { y: 16, opacity: 0 },
+  to: { y: 0, opacity: 1 },
+  config: { mass: 1, tension: 210, friction: 24 },
+  source: { file: 'src/Notice.tsx', line: 14 },
+});
+```
+
+- Keep seconds in Motion and GSAP source. Foundry displays milliseconds but records the native `transition.duration` or `vars.duration` property path.
+- Preserve React Spring's physical `mass`, `tension`, and `friction` values rather than flattening the source into a guessed duration.
+- Keep Motion `animate` and `variants`, GSAP `vars`, and React Spring `from`/`to` semantics in Apply evidence.
+- A runtime preview is presentation state. Source changes still enter the existing Review and Apply flow and require rendered verification.
+
+## Preview without recording changes
+
+Play, pause, replay, loop, speed, and timeline scrubbing are presentation controls. They must never enter the change ledger, modify source, or become part of an Apply run. Keep the selected motion and playhead synchronized between Motion Studio and the Inspector.
+
+## Edit timing and keyframes
+
+- Timing edits may update duration, delay, easing, iterations, direction, and fill mode.
+- Keyframe edits preserve the selected property, offset, value, and segment easing.
+- Route edits through the normal bridge so they coalesce by target, property, scope, breakpoint, theme, and state.
+- Require exact source mapping before promoting an edit beyond the selected instance.
+- Never replace a project easing token or motion convention with an unexplained literal when a matching native value exists.
+
+## Shape timing curves
+
+- Use the dedicated **Bezier** editor for CSS cubic Bezier timing. Drag either control point, use its keyboard-accessible handle, enter exact X and Y values, or start from a preset.
+- Preserve all four cubic Bezier coordinates. Preview the resulting travel independently, then record the exact `cubic-bezier(x1, y1, x2, y2)` value through Review.
+- Use the dedicated **Spring** editor to tune mass, stiffness, damping, and initial velocity. Show settling duration and overshoot so the physical response is understandable before it is recorded.
+- CSS has no portable `spring()` timing function. For web targets, keep the exact physical parameters in the live Foundry curve model and generate a deterministic CSS `linear()` approximation for preview, Review, apply, and rendered verification.
+- Treat presets as starting points, not hidden tokens. Every preset must resolve to visible editable values.
+- Curve playback is temporary presentation state. It must never create a design change until the user changes a curve value.
+- Respect reduced-motion preferences in the curve preview while retaining the authored curve values for inspection.
+
+## Author motion paths
+
+- Use the dedicated **Motion path** editor when at least two rendered transform keyframes expose pixel-based translation values.
+- Drag a path point, use Arrow keys for one-pixel changes, hold Shift for eight-pixel changes, or enter exact X and Y coordinates.
+- Preserve scale, rotation, and matrix coefficients when translation changes. Do not convert percentage or otherwise unresolved transforms into guessed pixels.
+- Record path edits as the corresponding transform keyframe value so Review, source mapping, undo, and rebuilt verification keep using the existing keyframe contract.
+- Show native path bounds and total travel distance as inspection evidence. Path geometry is not a new production artifact by itself.
+
+## Compare before and after in sync
+
+- Capture the source baseline once, immediately before the first timing, curve, or keyframe preview change.
+- Draw the source baseline and current preview in one coordinate system. Use one playhead for both paths and evaluate each animation with its own timing curve.
+- Playback, replay, and comparison scrubbing are presentation state. They must not enter Review or mutate the live product animation.
+- Report duration, travel-distance, and keyframe-count deltas without claiming that a larger or smaller value is automatically better.
+- If either side lacks a resolvable path, retain the timing and keyframe editors and explain why path comparison is unavailable.
+
+## Review motion health
+
+- Prefer transform and opacity when the intended effect can remain on the compositor.
+- Flag layout- or paint-heavy properties as evidence, not as automatic rewrite instructions.
+- Treat a matching `prefers-reduced-motion` rule or an intentionally short duration as reduced-motion coverage.
+- Preserve unsupported or ambiguous motion as a finding and ask the user to choose the intended source behavior.
+
+## Verify after apply
+
+1. Rebuild the real application.
+2. Reopen the same target, viewport, theme, breakpoint, and state.
+3. Confirm the requested timing and keyframe values from the rendered animation snapshot.
+4. Replay the full motion and inspect the start, intermediate, and end states.
+5. Confirm transport and scrubbing still leave the change ledger untouched.
+6. Recheck performance classification and reduced-motion coverage, then report any mismatch instead of silently normalizing it.

package/dist/skill/foundry-design-control/references/portable-branch-records.md

@@ -0,0 +1,38 @@
+# Portable branch decision records
+
+Use portable branch records to carry the outcome and evidence of a Design Branch beyond its original session without turning that outcome into an automatic project rule.
+
+## Record contract
+
+- Choosing or rejecting a direction creates or refreshes one canonical record for that branch.
+- Preserve the outcome, rationale, exact changes and operations, session context, design-graph revision, and source relationships.
+- Export records as a versioned `foundry.design-branch-records` JSON bundle.
+- Import records as reference material. Importing must not change the canvas, Main, source files, or Design Memory.
+- Reassess compatibility against the current session and design graph whenever records are read, imported, or the graph changes.
+- Match source relationships by project-relative path so a project can move between machines without becoming stale solely because its root path changed.
+
+## Compatibility
+
+- `current` means every recorded source relationship is present and the design-graph revision still matches. The direction may be restored for exploration.
+- `stale` means the relevant source still exists but the graph revision or part of the recorded context changed. Show the evidence and require review or repair before restore.
+- `missing` means the record has no recoverable source relationship or none of its source files exist in the current graph. Never guess a replacement.
+
+Compatibility is evidence, not an edit. It must not create a design change or alter the record's original context.
+
+## Restore and memory boundaries
+
+1. Restore only a `current` record.
+2. Clone its changes and operations with fresh identifiers into a new exploring direction.
+3. Keep the restored direction isolated from Main until the user explicitly chooses it again.
+4. Add a record to Design Memory only after the user selects **Add to Memory**. Choosing, rejecting, importing, or restoring a record must never silently create permanent guidance.
+5. Let the user remove a record without deleting its original branch or changing source.
+
+## Verification
+
+- Export chosen and rejected records and parse the bundle against the protocol schema.
+- Import into the same project at a different root path and confirm source-relative matching remains current.
+- Change the design-graph revision and confirm the record becomes stale.
+- Remove its source from the graph and confirm the record becomes missing.
+- Restore a current record and confirm a new isolated direction appears without changing Main.
+- Confirm explicit Add to Memory is the only path that creates remembered guidance.
+- Verify Light and Dark workspace states and the matching Figma components.

package/dist/skill/foundry-design-control/references/responsive-design-lab.md

@@ -0,0 +1,34 @@
+# Responsive Design Lab
+
+Use Responsive Design Lab when a change must remain correct across real running viewport contexts.
+
+## Inspect across native viewports
+
+1. Select the target once on the Canvas, then open **Responsive design lab** from the workspace menu or command palette.
+2. Treat each iframe's declared width and height as the browser viewport. Foundry may scale the outer frame for presentation, but must never resize the document to fit the workspace.
+3. Check the linked selection in every configured breakpoint and the session's recorded Current viewport.
+4. Keep **Viewport** selected to scrub the browser viewport through indexed media-query boundaries.
+5. Switch to **Container** to resize the nearest authored query container around the selected element without changing the iframe viewport. Indexed `@container` conditions remain visible as exact, source-linked boundary shortcuts.
+6. Capture **Before** and **After** at meaningful widths. Foundry freezes viewport, container, selected-element, wrapping, and overflow measurements while the live preview remains free to move.
+7. Treat horizontal overflow, clipping, awkward wrapping, and large geometry jumps as findings. Do not enlarge a viewport from `scrollWidth` to conceal overflow.
+
+Container and comparison previews are presentation state. They must not create design changes, alter source, or disguise the viewport used by screenshots and verification. Clearing the preview restores the container's exact prior inline styles.
+
+## Use stress tests safely
+
+Browser zoom, text scale, and long-content modes are temporary presentation tests. They must not record changes, alter product source, or persist after the preview frame closes. Use them to expose brittle layout behavior, then clear the stress mode before final measurement.
+
+## Choose responsive scope
+
+- **This breakpoint** records the current configured breakpoint as the change context.
+- **All breakpoints** is an explicit promotion. Keep it unavailable until the selected target has exact source mapping.
+
+Never infer a global responsive edit from a successful local preview. If a custom-width failure does not map to a configured breakpoint or source boundary, preserve the evidence and ask the user to choose the intended source scope.
+
+## Verify after apply
+
+1. Rebuild the real application.
+2. Reopen the linked selection at every approved viewport using native iframe dimensions.
+3. Compare the captured before and after measurements in the failing viewport or container context.
+4. Confirm the original passing contexts remain stable.
+5. Report unsupported, cross-origin, or unavailable contexts explicitly rather than substituting the current viewport.

package/dist/skill/foundry-design-control/references/typography-studio.md

@@ -0,0 +1,14 @@
+# Typography Studio
+
+Typography Studio turns the selected rendered text into a source-accountable typography workspace.
+
+1. Select a text layer on Canvas, then open **Typography studio** from the workspace menu, command palette, or `0` shortcut.
+2. Use **Project** to review fonts already active or declared in the product. Choosing one creates a normal reviewed font-family change.
+3. Use **Google** to preview the live catalog. Before review, choose the project-appropriate integration strategy. Foundry records the exact family, weight, style, source actions, and verification plan as evidence.
+4. Use **Local** to preview fonts installed on the device when the browser supports local font access. Local fonts are never written to source without an explicit project asset or integration decision.
+5. Use the live specimen, rendered metrics, diagnostics, and project usage map to judge the change in context. Do not treat the specimen alone as proof that the rebuilt product is correct.
+6. Type treatments and modular or fluid scale values are temporary until added to review. Reset restores the original inline values without creating a change.
+7. Saved project styles are local design memory. Applying one still creates exact reviewed property changes; saving a style does not silently create source tokens.
+8. During apply, preserve the project-native font system, aliases, loading strategy, and framework conventions. Verify the rebuilt family, weight, style, axes, size, line height, tracking, wrapping, clipping, and load status across every recorded viewport, theme, and state.
+
+Do not claim that a local preview is portable. Do not add a Google or self-hosted font without its recorded source plan. Do not hide overflow or clipping by changing the viewport.

package/dist/skill/foundry-design-control/references/visual-agent-conversation.md

@@ -0,0 +1,14 @@
+# Visual Agent conversation
+
+Use this workflow only for a request claimed through `foundry_design_wait_for_work` or `foundry_design_wait_for_visual_request`.
+
+1. Read every attached rendered target, drawn region, contextual comment, source location, viewport, breakpoint, theme, state, measurement, token, and design-graph revision before proposing a direction.
+2. Inspect the referenced source and project conventions. State when a source location, token mapping, responsive effect, or measurement is unresolved. Do not fill missing evidence with an approximation.
+3. Explain the visual cause in plain language. Connect each conclusion to the rendered or source evidence that supports it.
+4. Return one to three meaningfully different proposals. For each proposal include a concise name, summary, reasoning, exact values, affected source locations, responsive impact, a verification plan, and complete draft `DesignChange` records for previewable edits.
+5. Keep each proposal internally coherent and independently previewable. Do not mix competing directions into one change list.
+6. Do not edit source, approve changes, or choose a proposal for the user. `foundry_design_respond_to_visual_request` only returns isolated proposals to Foundry.
+7. If the context is insufficient, return a clear explanation with no speculative changes. Ask for a narrower selection, region, state, or source mapping.
+8. After responding, resume `foundry_design_wait_for_work`. The user may preview, reject, or promote a proposal. Only a later reviewed Apply run authorizes source edits.
+
+If a claim expires, stop. Do not retry automatically. Foundry preserves the request and requires the user to authorize a retry. If an applied proposal fails rebuilt verification, report the exact requested and rendered values and wait for explicit retry authorization.

package/dist/skill/foundry-design-control/references/visual-workbench.md

@@ -1,20 +1,37 @@
 # Visual workbench
 
-Foundry's browser UI records intent while keeping all preview changes temporary.
+Foundry opens a dedicated local design workspace around the running product. The center canvas is
+still the real application, and all visual overrides remain temporary until a reviewed batch is
+applied in source.
+
+## Interface appearance
+
+- Foundry follows the operating system light or dark appearance by default and updates live when that setting changes.
+- The workspace menu can override this with Light or Dark. Store that preference locally for the user without changing the inspected product's Theme context.
+- System, Light, and Dark affect Foundry's workspace surfaces only. They do not record a design change or alter rendered verification context.
 
 ## Selection and layers
 
 - Selection mode is persistent: click around the canvas to choose the exact visible layer under the pointer without reactivating the pointer tool.
-- Layout, Type, Color, Effects, and other category buttons only filter inspector controls. The chosen category persists as selection moves between compatible elements.
+- The right Inspector shows one contextual hierarchy and hides categories that do not apply to the current element.
 - Toggle the pointer tool to interaction mode when the underlying product needs to receive clicks. Option-click temporarily selects the strongest target without leaving interaction mode.
 - Repeat a click to cycle overlaps.
 - Shift-click creates a multi-selection. Parent and Child traverse the composed tree.
-- Layers opens by default in a fresh browser session. If the user closes it, preserve that choice for the rest of the current tab session.
+- Layers and Inspector open by default and can be hidden independently from the workspace header.
 - The same panel includes a Components view that combines rendered component instances with the indexed project graph. Live component cards select and cycle their rendered instances; indexed-only cards remain visible without pretending they are on the canvas.
 - Layers are searchable, collapsible, and virtualized for large documents. Open shadow roots are included.
 - Drag a layer onto a sibling to reorder it within the same parent. Cross-parent drops are blocked because they can change component structure.
 - Foundry restores the selected locator after HMR when the mapped element still exists.
 
+## Canvas navigation
+
+- The embedded product is a fixed-size artboard. Its dimensions come from the selected project viewport, while Current uses the session viewport.
+- Foundry opens the artboard at 100%. Dock and browser resizing never silently scales the product or changes its responsive breakpoint.
+- Use Pan, Space-drag, or middle-drag to move around an oversized artboard. Trackpad scrolling pans the canvas in Select and Pan modes.
+- Pinch or Command/Ctrl-wheel zooms around the pointer. The zoom menu provides Actual size, Fit, Fit width, and fixed percentage presets.
+- Interact mode passes ordinary pointer and scroll input into the product. Space-drag and middle-drag still navigate the outer canvas.
+- Pan and zoom are local presentation state. They never become design changes and never alter native rendered measurements.
+
 ## Layout and project intelligence
 
 - Width and height expose fixed, hug, fill, and min/max intent alongside exact dimensions.
@@ -26,12 +43,18 @@ Foundry's browser UI records intent while keeping all preview changes temporary.
 
 ## Comparison and recovery
 
+- Review, State workbench, Design health, and Design memory occupy the center workspace one at a time. Layers and Inspector remain the persistent navigation and property surfaces.
 - Before and After replay the temporary preview ledger.
 - The scrubber interpolates numeric values and switches discrete values at the midpoint.
 - Side by side reloads a clean source baseline and applies the current preview ledger only to the After frame. If same-origin framing is blocked, keep comparison in the live page.
 - Isolate dims unrelated content. Reset element restores the selected element and rejects its recorded session changes.
 - Undo and redo include layer order. Command-K opens all major actions; Shift-L opens Layers; Shift-C opens comparison; brackets select parent and child.
+- Design health and Design memory include explicit Close actions. Closing either returns to Canvas without discarding scan results, project memory, selection, or canvas position.
 
 ## Review boundary
 
-Preview accuracy does not authorize source edits. Review the recorded target, semantic mapping, scope, context, project token, and impact message before submitting Apply with agent. Literal values remain visible as warnings when a project-native value is not used.
+Preview accuracy does not authorize source edits. A compact change summary stays centered near the top of the canvas after the first edit so it remains visible without competing with the canvas toolbar. Review becomes a focused center-workspace mode that preserves approvals and edited values across visits.
+
+Review the recorded target, semantic mapping, scope, context, project token, and impact message before submitting Apply with agent. Literal values remain visible as warnings when a project-native value is not used. Locate, Preview, and Compare temporarily return to Canvas. Application, rebuild, verification, mismatches, and authorized retries remain in the Review workspace mode.
+
+Deleting a reviewed change is destructive to the preview ledger but does not edit source. Foundry must first confirm that the target is currently rendered, remove the stored change, and restore that property to its recorded before value. Applied changes and changes already attached to an apply run cannot be deleted from Review.

package/dist/skill/foundry-design-control/scripts/foundry.sh

@@ -9,8 +9,4 @@ if [[ -f "$foundry_design_home/package.json" && -f "$foundry_design_home/package
   exec pnpm --dir "$foundry_design_home" foundry "$@"
 fi
 
-if command -v foundry-design >/dev/null 2>&1; then
-  exec foundry-design "$@"
-fi
-
-exec npx -y foundry-design@beta "$@"
+exec npx -y --prefer-online --package=foundry-design@latest foundry-design "$@"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foundry-design",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.21",
   "description": "Install and run the local-first Foundry visual design control plane",
   "type": "module",
   "files": [
@@ -34,8 +34,8 @@
     "inspector"
   ],
   "dependencies": {
-    "foundry-design-protocol": "0.2.0-beta.2",
-    "foundry-design-runtime": "0.2.0-beta.2"
+    "foundry-design-protocol": "0.2.0-beta.21",
+    "foundry-design-runtime": "0.2.0-beta.21"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json && node ../../scripts/copy-cli-skill.mjs",