diff --git a/.claude/skills/grill-with-docs/ADR-FORMAT.md b/.claude/skills/grill-with-docs/ADR-FORMAT.md new file mode 100644 index 00000000..da7e78ec --- /dev/null +++ b/.claude/skills/grill-with-docs/ADR-FORMAT.md @@ -0,0 +1,47 @@ +# ADR Format + +ADRs live in `docs/adr/` and use sequential numbering: `0001-slug.md`, `0002-slug.md`, etc. + +Create the `docs/adr/` directory lazily — only when the first ADR is needed. + +## Template + +```md +# {Short title of the decision} + +{1-3 sentences: what's the context, what did we decide, and why.} +``` + +That's it. An ADR can be a single paragraph. The value is in recording *that* a decision was made and *why* — not in filling out sections. + +## Optional sections + +Only include these when they add genuine value. Most ADRs won't need them. + +- **Status** frontmatter (`proposed | accepted | deprecated | superseded by ADR-NNNN`) — useful when decisions are revisited +- **Considered Options** — only when the rejected alternatives are worth remembering +- **Consequences** — only when non-obvious downstream effects need to be called out + +## Numbering + +Scan `docs/adr/` for the highest existing number and increment by one. + +## When to offer an ADR + +All three of these must be true: + +1. **Hard to reverse** — the cost of changing your mind later is meaningful +2. **Surprising without context** — a future reader will look at the code and wonder "why on earth did they do it this way?" +3. **The result of a real trade-off** — there were genuine alternatives and you picked one for specific reasons + +If a decision is easy to reverse, skip it — you'll just reverse it. If it's not surprising, nobody will wonder why. If there was no real alternative, there's nothing to record beyond "we did the obvious thing." + +### What qualifies + +- **Architectural shape.** "We're using a monorepo." "The write model is event-sourced, the read model is projected into Postgres." +- **Integration patterns between contexts.** "Ordering and Billing communicate via domain events, not synchronous HTTP." +- **Technology choices that carry lock-in.** Database, message bus, auth provider, deployment target. Not every library — just the ones that would take a quarter to swap out. +- **Boundary and scope decisions.** "Customer data is owned by the Customer context; other contexts reference it by ID only." The explicit no-s are as valuable as the yes-s. +- **Deliberate deviations from the obvious path.** "We're using manual SQL instead of an ORM because X." Anything where a reasonable reader would assume the opposite. These stop the next engineer from "fixing" something that was deliberate. +- **Constraints not visible in the code.** "We can't use AWS because of compliance requirements." "Response times must be under 200ms because of the partner API contract." +- **Rejected alternatives when the rejection is non-obvious.** If you considered GraphQL and picked REST for subtle reasons, record it — otherwise someone will suggest GraphQL again in six months. diff --git a/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md b/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md new file mode 100644 index 00000000..ddfa247c --- /dev/null +++ b/.claude/skills/grill-with-docs/CONTEXT-FORMAT.md @@ -0,0 +1,77 @@ +# CONTEXT.md Format + +## Structure + +```md +# {Context Name} + +{One or two sentence description of what this context is and why it exists.} + +## Language + +**Order**: +{A concise description of the term} +_Avoid_: Purchase, transaction + +**Invoice**: +A request for payment sent to a customer after delivery. +_Avoid_: Bill, payment request + +**Customer**: +A person or organization that places orders. +_Avoid_: Client, buyer, account + +## Relationships + +- An **Order** produces one or more **Invoices** +- An **Invoice** belongs to exactly one **Customer** + +## Example dialogue + +> **Dev:** "When a **Customer** places an **Order**, do we create the **Invoice** immediately?" +> **Domain expert:** "No — an **Invoice** is only generated once a **Fulfillment** is confirmed." + +## Flagged ambiguities + +- "account" was used to mean both **Customer** and **User** — resolved: these are distinct concepts. +``` + +## Rules + +- **Be opinionated.** When multiple words exist for the same concept, pick the best one and list the others as aliases to avoid. +- **Flag conflicts explicitly.** If a term is used ambiguously, call it out in "Flagged ambiguities" with a clear resolution. +- **Keep definitions tight.** One sentence max. Define what it IS, not what it does. +- **Show relationships.** Use bold term names and express cardinality where obvious. +- **Only include terms specific to this project's context.** General programming concepts (timeouts, error types, utility patterns) don't belong even if the project uses them extensively. Before adding a term, ask: is this a concept unique to this context, or a general programming concept? Only the former belongs. +- **Group terms under subheadings** when natural clusters emerge. If all terms belong to a single cohesive area, a flat list is fine. +- **Write an example dialogue.** A conversation between a dev and a domain expert that demonstrates how the terms interact naturally and clarifies boundaries between related concepts. + +## Single vs multi-context repos + +**Single context (most repos):** One `CONTEXT.md` at the repo root. + +**Multiple contexts:** A `CONTEXT-MAP.md` at the repo root lists the contexts, where they live, and how they relate to each other: + +```md +# Context Map + +## Contexts + +- [Ordering](./src/ordering/CONTEXT.md) — receives and tracks customer orders +- [Billing](./src/billing/CONTEXT.md) — generates invoices and processes payments +- [Fulfillment](./src/fulfillment/CONTEXT.md) — manages warehouse picking and shipping + +## Relationships + +- **Ordering → Fulfillment**: Ordering emits `OrderPlaced` events; Fulfillment consumes them to start picking +- **Fulfillment → Billing**: Fulfillment emits `ShipmentDispatched` events; Billing consumes them to generate invoices +- **Ordering ↔ Billing**: Shared types for `CustomerId` and `Money` +``` + +The skill infers which structure applies: + +- If `CONTEXT-MAP.md` exists, read it to find contexts +- If only a root `CONTEXT.md` exists, single context +- If neither exists, create a root `CONTEXT.md` lazily when the first term is resolved + +When multiple contexts exist, infer which one the current topic relates to. If unclear, ask. diff --git a/.claude/skills/grill-with-docs/SKILL.md b/.claude/skills/grill-with-docs/SKILL.md new file mode 100644 index 00000000..6dad6ad7 --- /dev/null +++ b/.claude/skills/grill-with-docs/SKILL.md @@ -0,0 +1,88 @@ +--- +name: grill-with-docs +description: Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions. +--- + + + +Interview me relentlessly about every aspect of this plan until we reach a shared understanding. Walk down each branch of the design tree, resolving dependencies between decisions one-by-one. For each question, provide your recommended answer. + +Ask the questions one at a time, waiting for feedback on each question before continuing. + +If a question can be answered by exploring the codebase, explore the codebase instead. + + + + + +## Domain awareness + +During codebase exploration, also look for existing documentation: + +### File structure + +Most repos have a single context: + +``` +/ +├── CONTEXT.md +├── docs/ +│ └── adr/ +│ ├── 0001-event-sourced-orders.md +│ └── 0002-postgres-for-write-model.md +└── src/ +``` + +If a `CONTEXT-MAP.md` exists at the root, the repo has multiple contexts. The map points to where each one lives: + +``` +/ +├── CONTEXT-MAP.md +├── docs/ +│ └── adr/ ← system-wide decisions +├── src/ +│ ├── ordering/ +│ │ ├── CONTEXT.md +│ │ └── docs/adr/ ← context-specific decisions +│ └── billing/ +│ ├── CONTEXT.md +│ └── docs/adr/ +``` + +Create files lazily — only when you have something to write. If no `CONTEXT.md` exists, create one when the first term is resolved. If no `docs/adr/` exists, create it when the first ADR is needed. + +## During the session + +### Challenge against the glossary + +When the user uses a term that conflicts with the existing language in `CONTEXT.md`, call it out immediately. "Your glossary defines 'cancellation' as X, but you seem to mean Y — which is it?" + +### Sharpen fuzzy language + +When the user uses vague or overloaded terms, propose a precise canonical term. "You're saying 'account' — do you mean the Customer or the User? Those are different things." + +### Discuss concrete scenarios + +When domain relationships are being discussed, stress-test them with specific scenarios. Invent scenarios that probe edge cases and force the user to be precise about the boundaries between concepts. + +### Cross-reference with code + +When the user states how something works, check whether the code agrees. If you find a contradiction, surface it: "Your code cancels entire Orders, but you just said partial cancellation is possible — which is right?" + +### Update CONTEXT.md inline + +When a term is resolved, update `CONTEXT.md` right there. Don't batch these up — capture them as they happen. Use the format in [CONTEXT-FORMAT.md](./CONTEXT-FORMAT.md). + +Don't couple `CONTEXT.md` to implementation details. Only include terms that are meaningful to domain experts. + +### Offer ADRs sparingly + +Only offer to create an ADR when all three are true: + +1. **Hard to reverse** — the cost of changing your mind later is meaningful +2. **Surprising without context** — a future reader will wonder "why did they do it this way?" +3. **The result of a real trade-off** — there were genuine alternatives and you picked one for specific reasons + +If any of the three is missing, skip the ADR. Use the format in [ADR-FORMAT.md](./ADR-FORMAT.md). + + diff --git a/.claude/skills/improve-codebase-architecture/DEEPENING.md b/.claude/skills/improve-codebase-architecture/DEEPENING.md new file mode 100644 index 00000000..ecaf5d7d --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/DEEPENING.md @@ -0,0 +1,37 @@ +# Deepening + +How to deepen a cluster of shallow modules safely, given its dependencies. Assumes the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**. + +## Dependency categories + +When assessing a candidate for deepening, classify its dependencies. The category determines how the deepened module is tested across its seam. + +### 1. In-process + +Pure computation, in-memory state, no I/O. Always deepenable — merge the modules and test through the new interface directly. No adapter needed. + +### 2. Local-substitutable + +Dependencies that have local test stand-ins (PGLite for Postgres, in-memory filesystem). Deepenable if the stand-in exists. The deepened module is tested with the stand-in running in the test suite. The seam is internal; no port at the module's external interface. + +### 3. Remote but owned (Ports & Adapters) + +Your own services across a network boundary (microservices, internal APIs). Define a **port** (interface) at the seam. The deep module owns the logic; the transport is injected as an **adapter**. Tests use an in-memory adapter. Production uses an HTTP/gRPC/queue adapter. + +Recommendation shape: *"Define a port at the seam, implement an HTTP adapter for production and an in-memory adapter for testing, so the logic sits in one deep module even though it's deployed across a network."* + +### 4. True external (Mock) + +Third-party services (Stripe, Twilio, etc.) you don't control. The deepened module takes the external dependency as an injected port; tests provide a mock adapter. + +## Seam discipline + +- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a port unless at least two adapters are justified (typically production + test). A single-adapter seam is just indirection. +- **Internal seams vs external seams.** A deep module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface. Don't expose internal seams through the interface just because tests use them. + +## Testing strategy: replace, don't layer + +- Old unit tests on shallow modules become waste once tests at the deepened module's interface exist — delete them. +- Write new tests at the deepened module's interface. The **interface is the test surface**. +- Tests assert on observable outcomes through the interface, not internal state. +- Tests should survive internal refactors — they describe behaviour, not implementation. If a test has to change when the implementation changes, it's testing past the interface. diff --git a/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md b/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md new file mode 100644 index 00000000..3197723a --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/INTERFACE-DESIGN.md @@ -0,0 +1,44 @@ +# Interface Design + +When the user wants to explore alternative interfaces for a chosen deepening candidate, use this parallel sub-agent pattern. Based on "Design It Twice" (Ousterhout) — your first idea is unlikely to be the best. + +Uses the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**, **leverage**. + +## Process + +### 1. Frame the problem space + +Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate: + +- The constraints any new interface would need to satisfy +- The dependencies it would rely on, and which category they fall into (see [DEEPENING.md](DEEPENING.md)) +- A rough illustrative code sketch to ground the constraints — not a proposal, just a way to make the constraints concrete + +Show this to the user, then immediately proceed to Step 2. The user reads and thinks while the sub-agents work in parallel. + +### 2. Spawn sub-agents + +Spawn 3+ sub-agents in parallel using the Agent tool. Each must produce a **radically different** interface for the deepened module. + +Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category from [DEEPENING.md](DEEPENING.md), what sits behind the seam). The brief is independent of the user-facing problem-space explanation in Step 1. Give each agent a different design constraint: + +- Agent 1: "Minimize the interface — aim for 1–3 entry points max. Maximise leverage per entry point." +- Agent 2: "Maximise flexibility — support many use cases and extension." +- Agent 3: "Optimise for the most common caller — make the default case trivial." +- Agent 4 (if applicable): "Design around ports & adapters for cross-seam dependencies." + +Include both [LANGUAGE.md](LANGUAGE.md) vocabulary and CONTEXT.md vocabulary in the brief so each sub-agent names things consistently with the architecture language and the project's domain language. + +Each sub-agent outputs: + +1. Interface (types, methods, params — plus invariants, ordering, error modes) +2. Usage example showing how callers use it +3. What the implementation hides behind the seam +4. Dependency strategy and adapters (see [DEEPENING.md](DEEPENING.md)) +5. Trade-offs — where leverage is high, where it's thin + +### 3. Present and compare + +Present designs sequentially so the user can absorb each one, then compare them in prose. Contrast by **depth** (leverage at the interface), **locality** (where change concentrates), and **seam placement**. + +After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated — the user wants a strong read, not a menu. diff --git a/.claude/skills/improve-codebase-architecture/LANGUAGE.md b/.claude/skills/improve-codebase-architecture/LANGUAGE.md new file mode 100644 index 00000000..530c2763 --- /dev/null +++ b/.claude/skills/improve-codebase-architecture/LANGUAGE.md @@ -0,0 +1,53 @@ +# Language + +Shared vocabulary for every suggestion this skill makes. Use these terms exactly — don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point. + +## Terms + +**Module** +Anything with an interface and an implementation. Deliberately scale-agnostic — applies equally to a function, class, package, or tier-spanning slice. +_Avoid_: unit, component, service. + +**Interface** +Everything a caller must know to use the module correctly. Includes the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics. +_Avoid_: API, signature (too narrow — those refer only to the type-level surface). + +**Implementation** +What's inside a module — its body of code. Distinct from **Adapter**: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise. + +**Depth** +Leverage at the interface — the amount of behaviour a caller (or test) can exercise per unit of interface they have to learn. A module is **deep** when a large amount of behaviour sits behind a small interface. A module is **shallow** when the interface is nearly as complex as the implementation. + +**Seam** _(from Michael Feathers)_ +A place where you can alter behaviour without editing in that place. The *location* at which a module's interface lives. Choosing where to put the seam is its own design decision, distinct from what goes behind it. +_Avoid_: boundary (overloaded with DDD's bounded context). + +**Adapter** +A concrete thing that satisfies an interface at a seam. Describes *role* (what slot it fills), not substance (what's inside). + +**Leverage** +What callers get from depth. More capability per unit of interface they have to learn. One implementation pays back across N call sites and M tests. + +**Locality** +What maintainers get from depth. Change, bugs, knowledge, and verification concentrate at one place rather than spreading across callers. Fix once, fixed everywhere. + +## Principles + +- **Depth is a property of the interface, not the implementation.** A deep module can be internally composed of small, mockable, swappable parts — they just aren't part of the interface. A module can have **internal seams** (private to its implementation, used by its own tests) as well as the **external seam** at its interface. +- **The deletion test.** Imagine deleting the module. If complexity vanishes, the module wasn't hiding anything (it was a pass-through). If complexity reappears across N callers, the module was earning its keep. +- **The interface is the test surface.** Callers and tests cross the same seam. If you want to test *past* the interface, the module is probably the wrong shape. +- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a seam unless something actually varies across it. + +## Relationships + +- A **Module** has exactly one **Interface** (the surface it presents to callers and tests). +- **Depth** is a property of a **Module**, measured against its **Interface**. +- A **Seam** is where a **Module**'s **Interface** lives. +- An **Adapter** sits at a **Seam** and satisfies the **Interface**. +- **Depth** produces **Leverage** for callers and **Locality** for maintainers. + +## Rejected framings + +- **Depth as ratio of implementation-lines to interface-lines** (Ousterhout): rewards padding the implementation. We use depth-as-leverage instead. +- **"Interface" as the TypeScript `interface` keyword or a class's public methods**: too narrow — interface here includes every fact a caller must know. +- **"Boundary"**: overloaded with DDD's bounded context. Say **seam** or **interface**. diff --git a/.claude/skills/improve-codebase-architecture/SKILL.md b/.claude/skills/improve-codebase-architecture/SKILL.md index d640b33e..05984a60 100644 --- a/.claude/skills/improve-codebase-architecture/SKILL.md +++ b/.claude/skills/improve-codebase-architecture/SKILL.md @@ -1,76 +1,71 @@ --- name: improve-codebase-architecture -description: Explore a codebase to find opportunities for architectural improvement, focusing on making the codebase more testable by deepening shallow modules. Use when user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more AI-navigable. +description: Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable. --- # Improve Codebase Architecture -Explore a codebase like an AI would, surface architectural friction, discover opportunities for improving testability, and propose module-deepening refactors as GitHub issue RFCs. +Surface architectural friction and propose **deepening opportunities** — refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability. -A **deep module** (John Ousterhout, "A Philosophy of Software Design") has a small interface hiding a large implementation. Deep modules are more testable, more AI-navigable, and let you test at the boundary instead of inside. +## Glossary -## Process - -### 1. Explore the codebase - -Use the Agent tool with subagent_type=Explore to navigate the codebase naturally. Do NOT follow rigid heuristics - explore organically and note where you experience friction: - -- Where does understanding one concept require bouncing between many small files? -- Where are modules so shallow that the interface is nearly as complex as the implementation? -- Where have pure functions been extracted just for testability, but the real bugs hide in how they're called? -- Where do tightly-coupled modules create integration risk in the seams between them? -- Which parts of the codebase are untested, or hard to test? - -The friction you encounter IS the signal. +Use these terms exactly in every suggestion. Consistent language is the point — don't drift into "component," "service," "API," or "boundary." Full definitions in [LANGUAGE.md](LANGUAGE.md). -### 2. Present candidates +- **Module** — anything with an interface and an implementation (function, class, package, slice). +- **Interface** — everything a caller must know to use the module: types, invariants, error modes, ordering, config. Not just the type signature. +- **Implementation** — the code inside. +- **Depth** — leverage at the interface: a lot of behaviour behind a small interface. **Deep** = high leverage. **Shallow** = interface nearly as complex as the implementation. +- **Seam** — where an interface lives; a place behaviour can be altered without editing in place. (Use this, not "boundary.") +- **Adapter** — a concrete thing satisfying an interface at a seam. +- **Leverage** — what callers get from depth. +- **Locality** — what maintainers get from depth: change, bugs, knowledge concentrated in one place. -Present a numbered list of deepening opportunities. For each candidate, show: +Key principles (see [LANGUAGE.md](LANGUAGE.md) for the full list): -- **Cluster**: Which modules/concepts are involved -- **Why they're coupled**: Shared types, call patterns, co-ownership of a concept -- **Dependency category**: See [REFERENCE.md](REFERENCE.md) for the four categories -- **Test impact**: What existing tests would be replaced by boundary tests +- **Deletion test**: imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep. +- **The interface is the test surface.** +- **One adapter = hypothetical seam. Two adapters = real seam.** -Do NOT propose interfaces yet. Ask the user: "Which of these would you like to explore?" +This skill is _informed_ by the project's domain model. The domain language gives names to good seams; ADRs record decisions the skill should not re-litigate. -### 3. User picks a candidate +## Process -### 4. Frame the problem space +### 1. Explore -Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate: +Read the project's domain glossary and any ADRs in the area you're touching first. -- The constraints any new interface would need to satisfy -- The dependencies it would need to rely on -- A rough illustrative code sketch to make the constraints concrete - this is not a proposal, just a way to ground the constraints +Then use the Agent tool with `subagent_type=Explore` to walk the codebase. Don't follow rigid heuristics — explore organically and note where you experience friction: -Show this to the user, then immediately proceed to Step 5. The user reads and thinks about the problem while the sub-agents work in parallel. +- Where does understanding one concept require bouncing between many small modules? +- Where are modules **shallow** — interface nearly as complex as the implementation? +- Where have pure functions been extracted just for testability, but the real bugs hide in how they're called (no **locality**)? +- Where do tightly-coupled modules leak across their seams? +- Which parts of the codebase are untested, or hard to test through their current interface? -### 5. Design multiple interfaces +Apply the **deletion test** to anything you suspect is shallow: would deleting it concentrate complexity, or just move it? A "yes, concentrates" is the signal you want. -Spawn 3+ sub-agents in parallel using the Agent tool. Each must produce a **radically different** interface for the deepened module. +### 2. Present candidates -Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category, what's being hidden). This brief is independent of the user-facing explanation in Step 4. Give each agent a different design constraint: +Present a numbered list of deepening opportunities. For each candidate: -- Agent 1: "Minimize the interface - aim for 1-3 entry points max" -- Agent 2: "Maximize flexibility - support many use cases and extension" -- Agent 3: "Optimize for the most common caller - make the default case trivial" -- Agent 4 (if applicable): "Design around the ports & adapters pattern for cross-boundary dependencies" +- **Files** — which files/modules are involved +- **Problem** — why the current architecture is causing friction +- **Solution** — plain English description of what would change +- **Benefits** — explained in terms of locality and leverage, and also in how tests would improve -Each sub-agent outputs: +**Use CONTEXT.md vocabulary for the domain, and [LANGUAGE.md](LANGUAGE.md) vocabulary for the architecture.** If `CONTEXT.md` defines "Order," talk about "the Order intake module" — not "the FooBarHandler," and not "the Order service." -1. Interface signature (types, methods, params) -2. Usage example showing how callers use it -3. What complexity it hides internally -4. Dependency strategy (how deps are handled - see [REFERENCE.md](REFERENCE.md)) -5. Trade-offs +**ADR conflicts**: if a candidate contradicts an existing ADR, only surface it when the friction is real enough to warrant revisiting the ADR. Mark it clearly (e.g. _"contradicts ADR-0007 — but worth reopening because…"_). Don't list every theoretical refactor an ADR forbids. -Present designs sequentially, then compare them in prose. +Do NOT propose interfaces yet. Ask the user: "Which of these would you like to explore?" -After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated - the user wants a strong read, not just a menu. +### 3. Grilling loop -### 6. User picks an interface (or accepts recommendation) +Once the user picks a candidate, drop into a grilling conversation. Walk the design tree with them — constraints, dependencies, the shape of the deepened module, what sits behind the seam, what tests survive. -### 7. Create GitHub issue +Side effects happen inline as decisions crystallize: -Create a refactor RFC as a GitHub issue using `gh issue create`. Use the template in [REFERENCE.md](REFERENCE.md). Do NOT ask the user to review before creating - just create it and share the URL. +- **Naming a deepened module after a concept not in `CONTEXT.md`?** Add the term to `CONTEXT.md` — same discipline as `/grill-with-docs` (see [CONTEXT-FORMAT.md](../grill-with-docs/CONTEXT-FORMAT.md)). Create the file lazily if it doesn't exist. +- **Sharpening a fuzzy term during the conversation?** Update `CONTEXT.md` right there. +- **User rejects the candidate with a load-bearing reason?** Offer an ADR, framed as: _"Want me to record this as an ADR so future architecture reviews don't re-suggest it?"_ Only offer when the reason would actually be needed by a future explorer to avoid re-suggesting the same thing — skip ephemeral reasons ("not worth it right now") and self-evident ones. See [ADR-FORMAT.md](../grill-with-docs/ADR-FORMAT.md). +- **Want to explore alternative interfaces for the deepened module?** See [INTERFACE-DESIGN.md](INTERFACE-DESIGN.md). diff --git a/.claude/skills/to-issues/SKILL.md b/.claude/skills/to-issues/SKILL.md new file mode 100644 index 00000000..5a407161 --- /dev/null +++ b/.claude/skills/to-issues/SKILL.md @@ -0,0 +1,81 @@ +--- +name: to-issues +description: Break a plan, spec, or PRD into independently-grabbable issues on the project issue tracker using tracer-bullet vertical slices. Use when user wants to convert a plan into issues, create implementation tickets, or break down work into issues. +--- + +# To Issues + +Break a plan into independently-grabbable issues using vertical slices (tracer bullets). + +The issue tracker and triage label vocabulary should have been provided to you — run `/setup-matt-pocock-skills` if not. + +## Process + +### 1. Gather context + +Work from whatever is already in the conversation context. If the user passes an issue reference (issue number, URL, or path) as an argument, fetch it from the issue tracker and read its full body and comments. + +### 2. Explore the codebase (optional) + +If you have not already explored the codebase, do so to understand the current state of the code. Issue titles and descriptions should use the project's domain glossary vocabulary, and respect ADRs in the area you're touching. + +### 3. Draft vertical slices + +Break the plan into **tracer bullet** issues. Each issue is a thin vertical slice that cuts through ALL integration layers end-to-end, NOT a horizontal slice of one layer. + +Slices may be 'HITL' or 'AFK'. HITL slices require human interaction, such as an architectural decision or a design review. AFK slices can be implemented and merged without human interaction. Prefer AFK over HITL where possible. + + +- Each slice delivers a narrow but COMPLETE path through every layer (schema, API, UI, tests) +- A completed slice is demoable or verifiable on its own +- Prefer many thin slices over few thick ones + + +### 4. Quiz the user + +Present the proposed breakdown as a numbered list. For each slice, show: + +- **Title**: short descriptive name +- **Type**: HITL / AFK +- **Blocked by**: which other slices (if any) must complete first +- **User stories covered**: which user stories this addresses (if the source material has them) + +Ask the user: + +- Does the granularity feel right? (too coarse / too fine) +- Are the dependency relationships correct? +- Should any slices be merged or split further? +- Are the correct slices marked as HITL and AFK? + +Iterate until the user approves the breakdown. + +### 5. Publish the issues to the issue tracker + +For each approved slice, publish a new issue to the issue tracker. Use the issue body template below. Apply the `needs-triage` triage label so each issue enters the normal triage flow. + +Publish issues in dependency order (blockers first) so you can reference real issue identifiers in the "Blocked by" field. + + +## Parent + +A reference to the parent issue on the issue tracker (if the source was an existing issue, otherwise omit this section). + +## What to build + +A concise description of this vertical slice. Describe the end-to-end behavior, not layer-by-layer implementation. + +## Acceptance criteria + +- [ ] Criterion 1 +- [ ] Criterion 2 +- [ ] Criterion 3 + +## Blocked by + +- A reference to the blocking ticket (if any) + +Or "None - can start immediately" if no blockers. + + + +Do NOT close or modify any parent issue. diff --git a/.claude/skills/to-prd/SKILL.md b/.claude/skills/to-prd/SKILL.md new file mode 100644 index 00000000..7bdc82a0 --- /dev/null +++ b/.claude/skills/to-prd/SKILL.md @@ -0,0 +1,74 @@ +--- +name: to-prd +description: Turn the current conversation context into a PRD and publish it to the project issue tracker. Use when user wants to create a PRD from the current context. +--- + +This skill takes the current conversation context and codebase understanding and produces a PRD. Do NOT interview the user — just synthesize what you already know. + +The issue tracker and triage label vocabulary should have been provided to you — run `/setup-matt-pocock-skills` if not. + +## Process + +1. Explore the repo to understand the current state of the codebase, if you haven't already. Use the project's domain glossary vocabulary throughout the PRD, and respect any ADRs in the area you're touching. + +2. Sketch out the major modules you will need to build or modify to complete the implementation. Actively look for opportunities to extract deep modules that can be tested in isolation. + +A deep module (as opposed to a shallow module) is one which encapsulates a lot of functionality in a simple, testable interface which rarely changes. + +Check with the user that these modules match their expectations. Check with the user which modules they want tests written for. + +3. Write the PRD using the template below, then publish it to the project issue tracker. Apply the `needs-triage` triage label so it enters the normal triage flow. + + + +## Problem Statement + +The problem that the user is facing, from the user's perspective. + +## Solution + +The solution to the problem, from the user's perspective. + +## User Stories + +A LONG, numbered list of user stories. Each user story should be in the format of: + +1. As an , I want a , so that + + +1. As a mobile bank customer, I want to see balance on my accounts, so that I can make better informed decisions about my spending + + +This list of user stories should be extremely extensive and cover all aspects of the feature. + +## Implementation Decisions + +A list of implementation decisions that were made. This can include: + +- The modules that will be built/modified +- The interfaces of those modules that will be modified +- Technical clarifications from the developer +- Architectural decisions +- Schema changes +- API contracts +- Specific interactions + +Do NOT include specific file paths or code snippets. They may end up being outdated very quickly. + +## Testing Decisions + +A list of testing decisions that were made. Include: + +- A description of what makes a good test (only test external behavior, not implementation details) +- Which modules will be tested +- Prior art for the tests (i.e. similar types of tests in the codebase) + +## Out of Scope + +A description of the things that are out of scope for this PRD. + +## Further Notes + +Any further notes about the feature. + + diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..214c29d1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +registry=https://registry.npmjs.org/ diff --git a/apps/element-demo/comman.txt b/apps/element-demo/comman.txt new file mode 100644 index 00000000..25030cf1 --- /dev/null +++ b/apps/element-demo/comman.txt @@ -0,0 +1 @@ +LEARNOSITY_CONSUMER_KEY=1JQLtMp0itQcxfSQ npx playwright test test/e2e/capture-baselines.spec.ts --project=chromium \ No newline at end of file diff --git a/apps/element-demo/package.json b/apps/element-demo/package.json index c525f471..68bb60e9 100644 --- a/apps/element-demo/package.json +++ b/apps/element-demo/package.json @@ -12,6 +12,7 @@ "generate-imports": "bun run scripts/generate-element-imports.ts", "predev": "bun run generate-imports && bun run --cwd ../.. verify:no-local-paths apps/element-demo/src/lib/element-imports.js apps/element-demo/src/lib/element-imports.d.ts", "test:e2e": "playwright test", + "test:e2e:mcpb": "playwright test mc-populated-blank", "test:a11y": "playwright test --config=playwright.a11y.config.ts", "test:a11y:inventory": "A11Y_SUITE=inventory playwright test --config=playwright.a11y.config.ts", "test:a11y:ui": "playwright test --config=playwright.a11y.config.ts --ui", diff --git a/apps/element-demo/playwright.config.ts b/apps/element-demo/playwright.config.ts index 0b01122d..cb7612ee 100644 --- a/apps/element-demo/playwright.config.ts +++ b/apps/element-demo/playwright.config.ts @@ -1,8 +1,18 @@ import { defineConfig, devices } from '@playwright/test'; -import { existsSync, readdirSync } from 'node:fs'; +import { existsSync, readdirSync, readFileSync } from 'node:fs'; import { join } from 'node:path'; import { homedir } from 'node:os'; +// Load .env so that LEARNOSITY_* vars are visible to the Playwright test process +// (SvelteKit/Vite loads .env for the app server, but not for the test runner). +const envPath = join(import.meta.dirname, '.env'); +if (existsSync(envPath)) { + for (const line of readFileSync(envPath, 'utf-8').split('\n')) { + const match = line.match(/^([^#=\s][^=]*)=(.*)$/); + if (match) process.env[match[1]] ??= match[2].trim(); + } +} + function resolveLocalBrowsersDir(): string | undefined { // First try system cache (macOS) const systemCache = join(homedir(), 'Library', 'Caches', 'ms-playwright'); @@ -78,6 +88,11 @@ const localChromium = resolveLocalChromium(); export default defineConfig({ testDir: './test/e2e', + snapshotDir: './test/e2e/snapshots', + // Use the path argument directly so toHaveScreenshot resolves to + // snapshots/learnosity//.png — matching what + // capture-baselines.spec.ts writes. + snapshotPathTemplate: '{snapshotDir}/{arg}{ext}', testMatch: ['**/*.spec.ts'], testIgnore: runIifeE2e ? [] : ['**/iife-usefulness.spec.ts'], fullyParallel: false, @@ -90,7 +105,7 @@ export default defineConfig({ timeout: 10_000, }, use: { - baseURL: 'http://localhost:5222', + baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:5222', trace: 'on-first-retry', screenshot: 'only-on-failure', video: 'retain-on-failure', @@ -101,15 +116,15 @@ export default defineConfig({ projects: [ { name: 'chromium', - use: { ...devices['Desktop Chrome'] }, + use: { ...devices['Desktop Chrome'], viewport: { width: 1920, height: 1080 } }, }, ], webServer: useExternalServer ? undefined : { command: 'bun run dev', - url: 'http://localhost:5222', - reuseExistingServer: true, // Use existing dev server + url: process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:5222', + reuseExistingServer: true, timeout: 120_000, }, }); diff --git a/apps/element-demo/src/lib/samples/mc-populated-blank.json b/apps/element-demo/src/lib/samples/mc-populated-blank.json index 36c854e4..18c960a4 100644 --- a/apps/element-demo/src/lib/samples/mc-populated-blank.json +++ b/apps/element-demo/src/lib/samples/mc-populated-blank.json @@ -39,7 +39,6 @@ "locale": "", "autoplayAudioEnabled": true, "completeAudioEnabled": true, - "showVisibleTranscript": false, "source": { "csvQuestionTypeTag": "sel_r1-_plusgggv0.0.1", "learnosityItemReference": "000eb0e6-92a0-43cd-bb1f-89ddb52da2e5", @@ -146,7 +145,6 @@ "locale": "", "autoplayAudioEnabled": true, "completeAudioEnabled": true, - "showVisibleTranscript": true, "source": { "csvQuestionTypeTag": "sel_vicv0.0.1", "learnosityItemReference": "04973d1a-0557-4963-937d-7ac76ee3baeb", @@ -162,33 +160,33 @@ { "id": "variant-sel-r1-gplusggg", "title": "sel_r1-_gplusggg (canonical CQT sample)", - "description": "Canonical sample from item 0e7c3f32-9dfe-40d7-bbc4-0a6eea0e7874 and question a2837d4f-cdd0-4285-8352-a10a96e6564d.", + "description": "Canonical sample from item 11b4d9be-a79e-48c3-9e58-84f5be3dbb0f and question 3fe2da9a-3ba3-41af-9d97-e373cde716d7.", "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_gplusggg", "sel_r1-_gplusgggv0.0.1"], "model": { "id": "4", "element": "mc-populated-blank", "prompt": "", "promptEnabled": false, - "template": "

{{blank}}

", + "template": "

{{blank}} four

", "choiceMode": "text", "choices": [ { "id": "distractor_1", - "labelHtml": "jump" + "labelHtml": "four" }, { "id": "distractor_2", - "labelHtml": "fast" + "labelHtml": "fear" }, { "id": "distractor_3", - "labelHtml": "just" + "labelHtml": "four" } ], - "correctChoiceId": "distractor_3", + "correctChoiceId": "distractor_2", "hasAudio": true, - "audioUrl": "https://assets.learnosity.com/organisations/844/d6a4947a-8e99-41b1-a14e-103af719e3dd.mp3", - "audioTranscript": "Look at the words. Pick the word \"just\" . . . \"just.\"", + "audioUrl": "https://assets.learnosity.com/organisations/844/a1810815-792c-4f8a-8d8f-ded46df5921c.mp3", + "audioTranscript": "The word is 'four.' Look at the three words. Pick the word that is different from 'four.'", "interactionMode": "populate_blank", "sentenceHtml": "", "layoutProfile": "audio_blank_only", @@ -198,11 +196,10 @@ "locale": "", "autoplayAudioEnabled": true, "completeAudioEnabled": true, - "showVisibleTranscript": false, "source": { "csvQuestionTypeTag": "sel_r1-_gplusgggv0.0.1", - "learnosityItemReference": "0e7c3f32-9dfe-40d7-bbc4-0a6eea0e7874", - "learnosityQuestionReference": "a2837d4f-cdd0-4285-8352-a10a96e6564d" + "learnosityItemReference": "11b4d9be-a79e-48c3-9e58-84f5be3dbb0f", + "learnosityQuestionReference": "3fe2da9a-3ba3-41af-9d97-e373cde716d7" } }, "session": { @@ -250,7 +247,6 @@ "locale": "", "autoplayAudioEnabled": true, "completeAudioEnabled": true, - "showVisibleTranscript": false, "source": { "csvQuestionTypeTag": "sel_r1-g_plusgggv0.0.1", "learnosityItemReference": "0060b039-2605-47a6-8305-96e0463fcfd0", @@ -286,7 +282,7 @@ }, { "id": "distractor_3", - "labelHtml": "ñ" + "labelHtml": "\u00f1" } ], "correctChoiceId": "distractor_1", @@ -302,7 +298,6 @@ "locale": "es-US", "autoplayAudioEnabled": true, "completeAudioEnabled": true, - "showVisibleTranscript": false, "source": { "csvQuestionTypeTag": "sel_r1-gg_plusgggv0.0.1", "learnosityItemReference": "0d42ee84-b291-4336-b689-6912199fa81f", @@ -354,7 +349,6 @@ "locale": "", "autoplayAudioEnabled": true, "completeAudioEnabled": true, - "showVisibleTranscript": false, "source": { "csvQuestionTypeTag": "sel_r1-_ggplusgggv0.0.1", "learnosityItemReference": "0291a767-2334-4742-a899-e4178e85fc02", @@ -406,7 +400,6 @@ "locale": "", "autoplayAudioEnabled": true, "completeAudioEnabled": true, - "showVisibleTranscript": false, "source": { "csvQuestionTypeTag": "sel_r1-s3_plusgggv0.0.1", "learnosityItemReference": "003dcbf8-ff38-4930-84ee-26ca8be834b9", @@ -418,6 +411,871 @@ "element": "mc-populated-blank", "choiceId": "" } + }, + { + "id": "evaluate-correct", + "title": "sr-vic \u2014 evaluate with correct answer pre-selected", + "description": "Evaluate mode fixture: distractor_1 (correct) pre-selected. Used by interaction tests.", + "tags": ["mc-populated-blank", "test-fixture"], + "model": { + "id": "9", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

He will heat up the water in the {{blank}}.

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "teapot" + }, + { + "id": "distractor_2", + "labelHtml": "flytrap" + }, + { + "id": "distractor_3", + "labelHtml": "coffee" + }, + { + "id": "distractor_4", + "labelHtml": "freezer" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": false, + "audioUrl": "", + "audioTranscript": "", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "inline_sentence", + "customType": "sr-vic", + "useFeatureButtonAudio": false, + "choiceLayout": "vertical", + "locale": "", + "autoplayAudioEnabled": false, + "completeAudioEnabled": false + }, + "session": { + "id": "9", + "element": "mc-populated-blank", + "choiceId": "distractor_1" + } + }, + { + "id": "variant-sel-r1-gg-plus-es", + "title": "sel_r1-gg_plusggg \u2014 Spanish text (ea363a8b)", + "description": "Spanish text variant from item ea363a8b-26a1-44fb-bc8b-85f42758d952.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-gg_plusggg", "es-US"], + "model": { + "id": "12", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

w x {{blank}}

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "v" + }, + { + "id": "distractor_2", + "labelHtml": "y" + }, + { + "id": "distractor_3", + "labelHtml": "x" + } + ], + "correctChoiceId": "distractor_2", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/3eedd77b-84d4-499d-b7a4-82255a59331f.mp3", + "audioTranscript": "Estas letras son W y X. Elige la letra que sigue en el alfabeto.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "token_sequence", + "customType": "sel_r1-gg_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-gg_plusgggv0.0.1", + "learnosityItemReference": "ea363a8b-26a1-44fb-bc8b-85f42758d952", + "learnosityQuestionReference": "c54e2120-d76a-44c8-b1d1-8abe324806fc" + } + }, + "session": { + "id": "12", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-g-stem-es", + "title": "sel_r1-g_plusggg \u2014 Spanish text (8e2e031c)", + "description": "Spanish text variant from item 8e2e031c-5594-4081-811b-ddfcbecd5667.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-g_plusggg", "es-US"], + "model": { + "id": "13", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

saco {{blank}}

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "taco" + }, + { + "id": "distractor_2", + "labelHtml": "poco" + }, + { + "id": "distractor_3", + "labelHtml": "vaca" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/14d244d7-1b2f-4575-b172-51d16c33c13b.mp3", + "audioTranscript": "Mira la palabra saco. Elige la palabra que rima con saco.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "token_sequence", + "customType": "sel_r1-g_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-g_plusgggv0.0.1", + "learnosityItemReference": "8e2e031c-5594-4081-811b-ddfcbecd5667", + "learnosityQuestionReference": "a9fa9f63-cfd4-49b9-88f0-c788e5eb53a9" + } + }, + "session": { + "id": "13", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-plusggg-es", + "title": "sel_r1-_plusggg \u2014 Spanish text (25bdc860)", + "description": "Spanish text variant from item 25bdc860-bd49-438d-a597-78561422037b.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_plusggg", "es-US"], + "model": { + "id": "14", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}}

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "3" + }, + { + "id": "distractor_2", + "labelHtml": "2" + }, + { + "id": "distractor_3", + "labelHtml": "1" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/d16f5669-b183-4392-aa27-b22ecfe6b2ff.mp3", + "audioTranscript": "La palabra es caracol. Elige el n\u00famero de s\u00edlabas que escuchas en ca ra col.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "audio_blank_only", + "customType": "sel_r1-_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_plusgggv0.0.1", + "learnosityItemReference": "25bdc860-bd49-438d-a597-78561422037b", + "learnosityQuestionReference": "7d69dfdd-f3a1-497f-94ed-b44d90f1b93b" + } + }, + "session": { + "id": "14", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-gplusggg-es", + "title": "sel_r1-_gplusggg \u2014 Spanish text (74a235ac)", + "description": "Spanish text variant from item 74a235ac-ba03-462d-9e78-077603f7f51e.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_gplusggg", "es-US"], + "model": { + "id": "15", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}} sa

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "ca" + }, + { + "id": "distractor_2", + "labelHtml": "ro" + }, + { + "id": "distractor_3", + "labelHtml": "me" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/5b80657f-6742-49c2-8c65-aec127ef661d.mp3", + "audioTranscript": "Mira la s\u00edlaba sa. Elige la s\u00edlaba que va antes de sa para formar la palabra casa.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "audio_blank_only", + "customType": "sel_r1-_gplusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_gplusgggv0.0.1", + "learnosityItemReference": "74a235ac-ba03-462d-9e78-077603f7f51e", + "learnosityQuestionReference": "7276b29c-e841-4d09-bd85-a5194678a069" + } + }, + "session": { + "id": "15", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-ggplus-es", + "title": "sel_r1-_ggplusggg \u2014 Spanish text (23e2b004)", + "description": "Spanish text variant from item 23e2b004-9b64-41cb-b620-c108146d5a27.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_ggplusggg", "es-US"], + "model": { + "id": "16", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}} v w

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "u" + }, + { + "id": "distractor_2", + "labelHtml": "y" + }, + { + "id": "distractor_3", + "labelHtml": "x" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/884a9764-8830-441b-89b0-eeef1a5ee24b.mp3", + "audioTranscript": "Estas letras son V y W. Elige la letra que est\u00e1 antes que ellas en el alfabeto.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "token_sequence", + "customType": "sel_r1-_ggplusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_ggplusgggv0.0.1", + "learnosityItemReference": "23e2b004-9b64-41cb-b620-c108146d5a27", + "learnosityQuestionReference": "c1416a25-3c90-49bf-ab88-f1a8673e9407" + } + }, + "session": { + "id": "16", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-s3-es", + "title": "sel_r1-s3_plusggg \u2014 Spanish text (5f9fcfe0)", + "description": "Spanish text variant from item 5f9fcfe0-5870-4e1b-a436-49dceb43759d.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-s3_plusggg", "es-US"], + "model": { + "id": "17", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}}

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "hueso" + }, + { + "id": "distractor_2", + "labelHtml": "tiene" + }, + { + "id": "distractor_3", + "labelHtml": "perro" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/2c2b85e9-4f75-43a3-9fe9-7d48036b6f68.mp3", + "audioTranscript": "Lee la oraci\u00f3n. Elige la palabra que tiene una letra que no suena.", + "interactionMode": "populate_blank", + "sentenceHtml": "Mi perro tiene un hueso.", + "layoutProfile": "stimulus_image_blank", + "customType": "sel_r1-s3_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-s3_plusgggv0.0.1", + "learnosityItemReference": "5f9fcfe0-5870-4e1b-a436-49dceb43759d", + "learnosityQuestionReference": "20f5137c-8e62-4ae4-906e-36f6262e661b" + } + }, + "session": { + "id": "17", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-vic-es", + "title": "sel_vic \u2014 Spanish text (9264f1c0)", + "description": "Spanish text variant from item 9264f1c0-a6c9-4920-bb9c-7590be3c172a.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_vic", "es-US"], + "model": { + "id": "18", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

Es importante comenzar el d\u00eda con un buen desayuno. Necesitamos comida en la ma\u00f1ana. No comer puede hacernos sentir cansados o enfermos. Desayunar nos ayuda a sentirnos bien. Trabajamos mejor en la escuela cuando nos sentimos bien. \u00bfCu\u00e1ndo es importante desayunar? {{blank}}

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "mientras trabajamos en la escuela" + }, + { + "id": "distractor_2", + "labelHtml": "cuando no sentimos bien" + }, + { + "id": "distractor_3", + "labelHtml": "en la ma\u00f1ana" + } + ], + "correctChoiceId": "distractor_2", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/398f7467-5a40-4488-86c7-81df9ef6141e.mp3", + "audioTranscript": "Lee el pasaje y la pregunta. Luego, elige la respuesta correcta.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "inline_sentence", + "customType": "sel_vic", + "useFeatureButtonAudio": true, + "choiceLayout": "vertical", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_vicv0.0.1", + "learnosityItemReference": "9264f1c0-a6c9-4920-bb9c-7590be3c172a", + "learnosityQuestionReference": "c78bdd84-5de8-4249-b13e-baf906cfa195" + } + }, + "session": { + "id": "18", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-gg-plus-graphic", + "title": "sel_r1-gg_plusggg \u2014 graphic choices English (bc827dec)", + "description": "Graphic choice variant from item bc827dec-cb5e-4f09-b7f0-e227c2912c2f.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-gg_plusggg", "graphic"], + "model": { + "id": "19", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

\"woman\" \"girl\" {{blank}}

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"sun\"" + }, + { + "id": "distractor_2", + "labelHtml": "\"hammer\"" + }, + { + "id": "distractor_3", + "labelHtml": "\"grandmother\"" + } + ], + "correctChoiceId": "distractor_3", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/ed48382d-0ff3-4296-86af-806af66aea57.mp3", + "audioTranscript": "Look at the pictures of the woman and the girl. Pick another picture that belongs in this group.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "token_sequence", + "customType": "sel_r1-gg_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-gg_plusgggv0.0.1", + "learnosityItemReference": "bc827dec-cb5e-4f09-b7f0-e227c2912c2f", + "learnosityQuestionReference": "5b5091c4-a2b7-4892-b209-99b33793c2c6" + } + }, + "session": { + "id": "19", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-g-stem-graphic", + "title": "sel_r1-g_plusggg \u2014 graphic choices English (e6dc4fe3)", + "description": "Graphic choice variant from item e6dc4fe3-076d-4d39-963a-f5742987801a.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-g_plusggg", "graphic"], + "model": { + "id": "20", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

\"shop\" {{blank}}

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"boat\"" + }, + { + "id": "distractor_2", + "labelHtml": "\"shoe\"" + }, + { + "id": "distractor_3", + "labelHtml": "\"sheep\"" + } + ], + "correctChoiceId": "distractor_3", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/da308b24-ce3a-44db-80ec-2bdf49251f9d.mp3", + "audioTranscript": "Look at the shop. If you change the /o/ sound to /ee/, what new word do you make? Pick the picture of the new word.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "token_sequence", + "customType": "sel_r1-g_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-g_plusgggv0.0.1", + "learnosityItemReference": "e6dc4fe3-076d-4d39-963a-f5742987801a", + "learnosityQuestionReference": "f2c1c343-3aac-4232-a7cd-f18fc02e8f43" + } + }, + "session": { + "id": "20", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-plusggg-graphic", + "title": "sel_r1-_plusggg \u2014 graphic choices English (097f87c5)", + "description": "Graphic choice variant from item 097f87c5-c474-4dda-97b2-46b30d598a54.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_plusggg", "graphic"], + "model": { + "id": "21", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}}

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"teddy" + }, + { + "id": "distractor_2", + "labelHtml": "\"polar" + }, + { + "id": "distractor_3", + "labelHtml": "\"black" + } + ], + "correctChoiceId": "distractor_2", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/6ae1a1e6-9927-46dd-8442-8881f5058515.mp3", + "audioTranscript": "Listen to the passage. Polar bears live where it is very cold. Their fur looks like the snow. Their feet are good for walking on ice. Pick the picture that tells what this passage is mostly about.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "audio_blank_only", + "customType": "sel_r1-_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_plusgggv0.0.1", + "learnosityItemReference": "097f87c5-c474-4dda-97b2-46b30d598a54", + "learnosityQuestionReference": "fa344899-b3e9-4c94-a024-3612d550a6a9" + } + }, + "session": { + "id": "21", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-gplusggg-graphic", + "title": "sel_r1-_gplusggg \u2014 graphic choices English (a0c05ca1)", + "description": "Graphic choice variant from item a0c05ca1-127d-49eb-bb05-8ea7b5c1834f.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_gplusggg", "graphic"], + "model": { + "id": "22", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}} \"coat\"

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"gate\"" + }, + { + "id": "distractor_2", + "labelHtml": "\"goat\"" + }, + { + "id": "distractor_3", + "labelHtml": "\"boat\"" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/76329d45-8c41-40f7-8e3b-eda48fd7c2ab.mp3", + "audioTranscript": "Look at the picture of the coat. Now look at the other pictures. Gate. Goat. Boat. Pick the picture that does not rhyme with coat.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "audio_blank_only", + "customType": "sel_r1-_gplusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_gplusgggv0.0.1", + "learnosityItemReference": "a0c05ca1-127d-49eb-bb05-8ea7b5c1834f", + "learnosityQuestionReference": "2aa288ad-a928-4d90-bbc6-f7ee98a51f59" + } + }, + "session": { + "id": "22", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-ggplus-graphic", + "title": "sel_r1-_ggplusggg \u2014 graphic choices English (2e53a942)", + "description": "Graphic choice variant from item 2e53a942-8ceb-46d4-bf56-ddd7b376f504.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_ggplusggg", "graphic"], + "model": { + "id": "23", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}} \"woman\" \"girl\"

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"sun\"" + }, + { + "id": "distractor_2", + "labelHtml": "\"hammer\"" + }, + { + "id": "distractor_3", + "labelHtml": "\"grandmother\"" + } + ], + "correctChoiceId": "distractor_3", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/d46eb8fd-4721-4c23-a8b7-3540ca1b282d.mp3", + "audioTranscript": "Look at the pictures of the woman and the girl. Pick another picture that belongs in this group.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "token_sequence", + "customType": "sel_r1-_ggplusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_ggplusgggv0.0.1", + "learnosityItemReference": "2e53a942-8ceb-46d4-bf56-ddd7b376f504", + "learnosityQuestionReference": "d102f1f4-4311-4e99-9d05-e2047b2803d7" + } + }, + "session": { + "id": "23", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-s3-graphic", + "title": "sel_r1-s3_plusggg \u2014 graphic choices English (c3b6c877)", + "description": "Graphic choice variant from item c3b6c877-444d-4d27-9f1a-3cbc8af38b7a.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-s3_plusggg", "graphic"], + "model": { + "id": "24", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}}

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"a" + }, + { + "id": "distractor_2", + "labelHtml": "\"an" + }, + { + "id": "distractor_3", + "labelHtml": "\"a" + } + ], + "correctChoiceId": "distractor_3", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/f2c5abba-f857-444d-ae8f-62c5bd44efe6.mp3", + "audioTranscript": "Pick the picture of the animal that is ninth in the parade . . . ninth in the parade.", + "interactionMode": "populate_blank", + "sentenceHtml": "\"\"", + "layoutProfile": "stimulus_image_blank", + "customType": "sel_r1-s3_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-s3_plusgggv0.0.1", + "learnosityItemReference": "c3b6c877-444d-4d27-9f1a-3cbc8af38b7a", + "learnosityQuestionReference": "9b938e63-88ae-4f04-860b-66df1a61331a" + } + }, + "session": { + "id": "24", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-plusggg-graphic-es", + "title": "sel_r1-_plusggg \u2014 graphic choices Spanish (a83f1d87)", + "description": "Spanish graphic choice variant from item a83f1d87-f3e5-4c0e-8eb4-408275336c0b.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_plusggg", "graphic", "es-US"], + "model": { + "id": "25", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}}

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"paloma\"" + }, + { + "id": "distractor_2", + "labelHtml": "\"pl\u00e1tano\"" + }, + { + "id": "distractor_3", + "labelHtml": "\"pijama\"" + } + ], + "correctChoiceId": "distractor_3", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/d8c47cce-ba4b-4e7d-a55e-bf2418094081.mp3", + "audioTranscript": "Escucha con atenci\u00f3n lo que digo: pi ja ma. Elige el dibujo que tiene lo que digo: pi ja ma, pi ja ma.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "audio_blank_only", + "customType": "sel_r1-_plusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_plusgggv0.0.1", + "learnosityItemReference": "a83f1d87-f3e5-4c0e-8eb4-408275336c0b", + "learnosityQuestionReference": "3b30d112-f0a8-4bef-9958-bebdfabce992" + } + }, + "session": { + "id": "25", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "variant-sel-r1-ggplus-graphic-es", + "title": "sel_r1-_ggplusggg \u2014 graphic choices Spanish (00cd1143)", + "description": "Spanish graphic choice variant from item 00cd1143-ceda-4f81-8f1f-6c9555d043e4.", + "tags": ["mc-populated-blank", "cqt-sample", "sel_r1-_ggplusggg", "graphic", "es-US"], + "model": { + "id": "26", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

{{blank}} \"gallina\" \"pato\"

", + "choiceMode": "image", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "\"hoja\"" + }, + { + "id": "distractor_2", + "labelHtml": "\"guante\"" + }, + { + "id": "distractor_3", + "labelHtml": "\"pollito\"" + } + ], + "correctChoiceId": "distractor_3", + "hasAudio": true, + "audioUrl": "https://assets.learnosity.com/organisations/844/98e3e018-0603-45c0-ae76-ee123396ae43.mp3", + "audioTranscript": "Mira el dibujo de la gallina y el pato. Elige otro dibujo que debe estar en este grupo.", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "token_sequence", + "customType": "sel_r1-_ggplusggg", + "useFeatureButtonAudio": true, + "choiceLayout": "horizontal", + "locale": "es-US", + "autoplayAudioEnabled": true, + "completeAudioEnabled": true, + "source": { + "csvQuestionTypeTag": "sel_r1-_ggplusgggv0.0.1", + "learnosityItemReference": "00cd1143-ceda-4f81-8f1f-6c9555d043e4", + "learnosityQuestionReference": "98b7bb39-7a82-4221-9291-144833be351d" + } + }, + "session": { + "id": "26", + "element": "mc-populated-blank", + "choiceId": "" + } + }, + { + "id": "evaluate-wrong", + "title": "sr-vic \u2014 evaluate with wrong answer pre-selected", + "description": "Evaluate mode fixture: distractor_2 (wrong) pre-selected. Used by interaction tests.", + "tags": ["mc-populated-blank", "test-fixture"], + "model": { + "id": "10", + "element": "mc-populated-blank", + "prompt": "", + "promptEnabled": false, + "template": "

He will heat up the water in the {{blank}}.

", + "choiceMode": "text", + "choices": [ + { + "id": "distractor_1", + "labelHtml": "teapot" + }, + { + "id": "distractor_2", + "labelHtml": "flytrap" + }, + { + "id": "distractor_3", + "labelHtml": "coffee" + }, + { + "id": "distractor_4", + "labelHtml": "freezer" + } + ], + "correctChoiceId": "distractor_1", + "hasAudio": false, + "audioUrl": "", + "audioTranscript": "", + "interactionMode": "populate_blank", + "sentenceHtml": "", + "layoutProfile": "inline_sentence", + "customType": "sr-vic", + "useFeatureButtonAudio": false, + "choiceLayout": "vertical", + "locale": "", + "autoplayAudioEnabled": false, + "completeAudioEnabled": false + }, + "session": { + "id": "10", + "element": "mc-populated-blank", + "choiceId": "distractor_2" + } } ] } diff --git a/apps/element-demo/src/routes/[element]/+layout.svelte b/apps/element-demo/src/routes/[element]/+layout.svelte index 00b8715c..39657c27 100644 --- a/apps/element-demo/src/routes/[element]/+layout.svelte +++ b/apps/element-demo/src/routes/[element]/+layout.svelte @@ -322,6 +322,9 @@ function handleThemeToggle(event: Event) { const newTheme = checkbox.checked ? 'dark' : 'light'; theme.set(newTheme); } + +const isMcPopulatedBlank = $derived(data.elementName === 'mc-populated-blank'); +let showAudioTranscript = $state(false);
@@ -391,6 +394,12 @@ function handleThemeToggle(event: Event) { > Reset Input + {#if isMcPopulatedBlank} + + {/if}
-
+
{@render children()}
diff --git a/apps/element-demo/src/routes/[element]/deliver/+page.svelte b/apps/element-demo/src/routes/[element]/deliver/+page.svelte index 49b29107..ff561d4d 100644 --- a/apps/element-demo/src/routes/[element]/deliver/+page.svelte +++ b/apps/element-demo/src/routes/[element]/deliver/+page.svelte @@ -42,7 +42,7 @@ const normalizeSession = (nextSession: any) => { return nextSession && typeof nextSession === 'object' ? nextSession : {}; }; -const cloneValue = (value: T): T => { +const cloneValue = (value: T): T => { if (value === null || typeof value !== 'object') { return value; } diff --git a/apps/element-demo/src/routes/[element]/parity/+page.server.ts b/apps/element-demo/src/routes/[element]/parity/+page.server.ts new file mode 100644 index 00000000..860a383d --- /dev/null +++ b/apps/element-demo/src/routes/[element]/parity/+page.server.ts @@ -0,0 +1,99 @@ +import { error } from '@sveltejs/kit'; +import { createHash, randomUUID } from 'node:crypto'; +import type { PageServerLoad } from './$types'; +import { env } from '$env/dynamic/private'; + +function utcTimestamp(): string { + const iso = new Date().toISOString(); + return ( + iso.slice(0, 4) + + iso.slice(5, 7) + + iso.slice(8, 10) + + '-' + + iso.slice(11, 13) + + iso.slice(14, 16) + ); +} + +function signItemsInit( + itemReference: string, + CONSUMER_KEY: string, + SECRET: string, + DOMAIN: string +): Record { + const timestamp = utcTimestamp(); + const requestBody = { + user_id: 'parity-test-user', + rendering_type: 'inline', + name: 'PIE parity test', + state: 'initial', + activity_id: 'parity-test', + session_id: randomUUID(), + type: 'submit_practice', + items: [itemReference], + }; + + const securityPacket = { + consumer_key: CONSUMER_KEY, + domain: DOMAIN, + timestamp, + }; + + const requestString = JSON.stringify(requestBody); + // Learnosity SDK signs by SHA-256 hashing: consumer_key_domain_timestamp_SECRET_requestJSON + const signatureArray = [ + securityPacket.consumer_key, + securityPacket.domain, + securityPacket.timestamp, + SECRET, + requestString, + ]; + + (securityPacket as any).signature = createHash('sha256') + .update(signatureArray.join('_')) + .digest('hex'); + + return { security: securityPacket, request: requestBody }; +} + +export const load: PageServerLoad = async ({ params, url }) => { + const CONSUMER_KEY = env.LEARNOSITY_CONSUMER_KEY; + const SECRET = env.LEARNOSITY_SECRET; + const DOMAIN = env.LEARNOSITY_DOMAIN ?? 'localhost'; + + if (!CONSUMER_KEY || !SECRET) { + throw error( + 503, + 'Learnosity credentials not configured. Set LEARNOSITY_CONSUMER_KEY and LEARNOSITY_SECRET env vars.' + ); + } + + const demoId = url.searchParams.get('demo'); + if (!demoId) { + throw error(400, 'Missing required query param: demo'); + } + + // Dynamically import the sample file — server-side only + let demos: Array<{ id: string; model?: { source?: { learnosityItemReference?: string } } }>; + try { + const elementName = params.element; + const mod = await import(`$lib/samples/${elementName}.json`); + demos = mod.default?.demos ?? []; + } catch { + throw error(404, `No sample file found for element: ${params.element}`); + } + + const demo = demos.find((d) => d.id === demoId); + if (!demo) { + throw error(404, `Demo not found: ${demoId}`); + } + + const itemReference = demo.model?.source?.learnosityItemReference; + if (!itemReference) { + throw error(400, `Demo "${demoId}" has no learnosityItemReference in model.source`); + } + + const initPayload = signItemsInit(itemReference, CONSUMER_KEY, SECRET, DOMAIN); + + return { demoId, itemReference, initPayload }; +}; diff --git a/apps/element-demo/src/routes/[element]/parity/+page.svelte b/apps/element-demo/src/routes/[element]/parity/+page.svelte new file mode 100644 index 00000000..f47f0b43 --- /dev/null +++ b/apps/element-demo/src/routes/[element]/parity/+page.svelte @@ -0,0 +1,196 @@ + + +
+
+

Parity — {data.demoId}

+

Learnosity item: {data.itemReference}

+
+ +
+
+

PIE

+
+ {#if elementModel} + + {/if} +
+
+ +
+

Learnosity (reference)

+ {#if learnosityError} +

{learnosityError}

+ {:else if !learnosityReady} +

Loading Learnosity…

+ {/if} +
+ {#if data.itemReference} + + {/if} +
+
+
+
+ + diff --git a/apps/element-demo/test/e2e/audio-mock.ts b/apps/element-demo/test/e2e/audio-mock.ts new file mode 100644 index 00000000..e3fdee0a --- /dev/null +++ b/apps/element-demo/test/e2e/audio-mock.ts @@ -0,0 +1,151 @@ +/** + * Controllable HTMLAudioElement mock for Playwright tests. + * + * Usage: + * import { installAudioMock, triggerAudioEvent } from './audio-mock'; + * + * test('...', async ({ page }) => { + * await installAudioMock(page); + * await page.goto('/...'); + * await triggerAudioEvent(page, 'play'); + * await triggerAudioEvent(page, 'ended'); + * }); + * + * The mock intercepts `new Audio()` and overrides `document.createElement('audio')` + * so that play/pause/load are no-ops. The `trigger()` control API fires synthetic + * events on every audio target in the page — both MockAudio instances and DOM + *