initial commit

_bmad-output/implementation-artifacts/9-5-embeddable-widget.md

@@ -0,0 +1,44 @@
+---
+epic: 9
+story: 9.5
+title: "Embeddable Widget"
+status: draft
+---
+
+## Epic 9 — Web App (React + WASM)
+**Goal:** Zero-install web experience with real-time collaboration.
+
+### Story 9.5: Embeddable Widget
+
+As a content creator or developer,
+I want to embed a CalcPad sheet in my website via an iframe,
+So that my readers can view or interact with calculations in context.
+
+**Acceptance Criteria:**
+
+**Given** a user has a shared CalcPad sheet
+**When** they select "Embed" from the share options
+**Then** an `<iframe>` embed code is generated with a copyable snippet
+**And** the snippet includes the sheet URL with embed-specific query parameters
+
+**Given** an embed code is placed on a third-party webpage
+**When** the `mode=readonly` parameter is set
+**Then** the widget displays the sheet with answers but disallows editing
+**And** no cursor or text input is active in the iframe
+
+**Given** an embed code is placed on a third-party webpage
+**When** the `mode=interactive` parameter is set
+**Then** users can edit expressions and see live-updated answers within the iframe
+
+**Given** an embed is configured with a theme override parameter (e.g., `theme=dark`)
+**When** the widget renders
+**Then** it uses the specified theme regardless of the host page's styling
+
+**Given** an embed is configured with `answers=hidden`
+**When** the widget renders
+**Then** the answer column is not displayed
+**And** only the input expressions are visible
+
+**Given** the iframe is placed in a responsive container
+**When** the container width changes (e.g., mobile vs. desktop)
+**Then** the widget resizes fluidly without horizontal scrolling or clipping