Add boxing pattern and Frame mismatch error guidance

Added two important pattern discoveries to documentation:

1. **Boxing Pattern for Sorting Cell Arrays** (PATTERNS.md)
   - Wrap items in objects before sorting to preserve cell references
   - Pattern: box → sort → unbox
   - Maintains bidirectional binding through transformations
   - Use case: Sort by derived values (LLM results, calculations)
   - Real example: Shopping list sorted by aisle while keeping checkboxes reactive

2. **Frame Mismatch Error Guidance** (COMMON_ISSUES.md)
   - Explains what Frame mismatch errors are
   - When to worry vs when to ignore
   - Diagnostic steps
   - Key insight: Errors don't always mean broken functionality

Both patterns discovered during shopping list aisle sorting work.
Boxing approach suggested by Berni - works perfectly!

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: jkomoros

docs/common/COMMON_ISSUES.md

@@ -236,6 +236,32 @@ export function DiffText({ from, to }) {  // Won't compile!
 - Recipe files: Use JSX and compose with utility functions
 - Use `/// <cts-enable />` directive at the top of utility files
 
+## Frame Mismatch Errors
+
+### Issue: Console Shows "Error: Frame mismatch" During Pattern Execution
+
+**Symptom**: Browser console displays `Error: Frame mismatch at popFrame(...)` errors during pattern interactions.
+
+**Cause**: The reactive execution graph encountered unexpected frame state. Can happen with complex reactive dependencies, rapid state updates, or certain cell access patterns.
+
+**When to worry:**
+- ❌ Feature actually broken or not working
+- ❌ Errors continuously flood console (hundreds per second)
+- ❌ Pattern crashes or becomes unresponsive
+
+**When it's okay:**
+- ✅ Isolated errors that don't continuously repeat
+- ✅ Feature works correctly despite the errors
+- ✅ Errors occur during interaction but functionality is fine
+
+**Action**:
+1. Test if your feature actually works
+2. If feature works: Errors can often be ignored
+3. If feature broken: Check for closure issues or simplify dependencies
+4. If persistent and problematic: Report to framework team
+
+**Example**: Store mapper pattern showed Frame mismatch on every interaction but all features worked correctly.
+
 ## Transaction Conflicts and Retry Storms
 
 If you see `ConflictError` messages in console, this is normal - the system retries transactions automatically. These warnings don't indicate a problem unless they occur continuously (retry storm).

docs/common/PATTERNS.md

@@ -607,6 +607,54 @@ const activeItems = derive(items, (list) => list.filter(item => !item.done));
 {activeItems.map(...)}
 ```
 
+**Issue: Sorting cell arrays while preserving reactivity**
+
+When you need to sort items based on derived values (like LLM results) while maintaining cell references for bidirectional binding, use the **boxing pattern**:
+
+```typescript
+// ❌ BROKEN - Sorting derived array loses cell references
+const sortedItems = derive(itemsWithAisles, (assignments) => {
+  return assignments.slice().sort((a, b) => compare(a.aisle, b.aisle));
+});
+
+{sortedItems.map(({ item }) => (
+  <ct-checkbox $checked={item.done} />  // ✗ Doesn't work - items are read-only
+))}
+
+// ✅ CORRECT - Boxing pattern preserves cell references
+// 1. Box: Wrap items in objects
+const boxedItems = itemsWithAisles.map(assignment => ({ assignment }));
+
+// 2. Sort: Perform sort on boxed items
+const sortedBoxedItems = derive(boxedItems, (boxed) => {
+  return boxed.slice().sort((a, b) => {
+    // Access properties via .assignment prefix
+    const aValue = a.assignment.aisle;
+    const bValue = b.assignment.aisle;
+    return aValue.localeCompare(bValue);
+  });
+});
+
+// 3. Unbox: Map over sorted items, extract original cell reference
+{sortedBoxedItems.map(({ assignment }) => (
+  <ct-checkbox $checked={assignment.item.done} />  // ✓ Works! Cell preserved
+))}
+```
+
+**Why this works:**
+- Boxing wraps the cell reference in a plain object `{ assignment }`
+- Sorting rearranges the wrapper objects, not the cells themselves
+- The original cell reference (`assignment.item`) remains intact
+- Bidirectional binding works because we're accessing the original cell
+
+**When to use:**
+- Sorting items by derived/computed values (LLM results, calculations)
+- Reordering while maintaining reactivity
+- Any transformation that needs to preserve cell references
+
+**Real-world example:**
+Shopping list sorted by grocery store aisle (from LLM categorization) while keeping checkboxes reactive.
+
 **Issue: Can't access variable from outer map**
 
 ```typescript