Changelog
Version history and changes.
- Bug Fix: Theme designer now preprocesses images to base64 (was missing base64 conversion for iframe compatibility)
- Images now display correctly in theme designer preview (Statue of Liberty, person photos, heart anatomy)
- Launch script now uses same preprocessing approach as
test-preview.sh
- Updated test-cards.json: Replaced manually-estimated IO coordinates with OCR-detected values
- All four heart chamber labels now use accurate bounding boxes from
detect_occlusion_regions.py
- Added
source: "ocr" field to each occlusion region for provenance tracking
- Verified IO card preview renders correctly with new coordinates
- Updated roadmap: Theme Designer marked as "In Progress" (awaiting user review/bug fixes)
- Updated claude-guide.md Known Issues section
- Status: Design iteration complete, awaiting user review and bug fixes
- Full-viewport layout: Preview now uses entire screen instead of narrow 500px container
- Side panel CSS editor: Replaced tiny modal with proper 400px side panel for CSS editing
- Card selector: Added prev/next navigation to cycle through multiple sample cards of same type
- Improved status badges: Clear "Production" (green) vs "Working" (orange) visual distinction
- Better dark mode: Toggle with emoji indicator (☀️/🌙), card preview background updates correctly
- Live CSS preview: Changes apply immediately with "Unsaved" indicator when edits exist
- Responsive design: CSS editor becomes full-width overlay on narrow screens
- Next steps: User testing, bug fixes, integration with preview-template.jsx themes
- NEW: Added
detect_occlusion_regions.py script for automatic label detection
- Research finding: LLMs are inherently bad at coordinate estimation (only 5/200 accurate in studies)
- OCR-first strategy: Use Tesseract to detect text labels and their bounding boxes automatically
- Grid-overlay fallback: For unlabeled images, generate 10x10 grid for manual region selection
- Intelligent text merging: Multi-line labels (e.g., "Left" + "Atrium") correctly combined
- Preview generation:
--preview flag creates annotated image showing detected regions
- Comprehensive documentation update to
image-occlusion.md with new strategy guidance
- Claude's role shifts from coordinate generation to validation/filtering of OCR results
- Added
source field to track how coordinates were obtained ("ocr", "grid", "manual")
- Dependencies: pytesseract, pillow (Tesseract usually pre-installed on Ubuntu)
- FIXED: Mask alignment issue where SVG overlay and image scaled independently
- Root cause: Previous approach used separate
<img> + SVG overlay with preserveAspectRatio="none"
- Solution: New
generateIOEmbeddedSvg() embeds image INSIDE SVG element
- SVG viewBox now uses actual image pixel dimensions (e.g.,
viewBox="0 0 1280 900")
- Image and masks scale together proportionally with
preserveAspectRatio="xMidYMid meet"
- Coordinates converted from normalized (0-1) to pixel coordinates
- Updated
preprocess_test_data.py to extract image dimensions via PIL
- Card data now includes
image_width and image_height fields
- Moved SVG injection BEFORE field substitution to avoid base64 regex issues
- Replaced Statue of Liberty test card with heart anatomy diagram (better IO test case)
- Removed ellipse as default shape — now uses rectangular masks only
- Fixed trailing HTML artifact (
'" />) that appeared below IO cards
- Status: IO marked as "In Progress" — requires architectural fix before release
- Issue discovered: SVG overlay and image scale independently, causing mask misalignment
- Current approach: image as
<img> element + SVG overlay with percentage coordinates
- Problem: When container resizes or image doesn't fill exactly, masks drift off target
- Tested with heart anatomy diagram — masks covered wrong areas entirely
- Root cause: Anki IO Enhanced embeds image INSIDE SVG, we render them separately
- Additional issue: Ellipse shapes look bad — should use tight gray rectangular boxes
- Added heart anatomy image as test asset for IO development
- See roadmap for detailed fix plan
- Fixed: Images now render correctly in preview (previously showed broken image icons)
- Added
developer/tools/preprocess_test_data.py — converts image paths to base64 data URLs
- Updated
test-preview.sh to use preprocessor before injection
- Updated SKILL.md Debug Preview command with new preprocessing step
- Root cause: iframe srcDoc cannot resolve relative file paths, requires data URLs
- Converts both
image_path → image_data and photo_path → photo_data
- Preprocessor handles path resolution from skill root or test-data directory
- Added full Image Occlusion (IO) support to preview-template.jsx
- Added IO CSS to all 4 themes (minimal, rich, bold, ios) with light/dark mode support
- Created
generateIOSvgOverlay() function to pre-render SVG masks in iframe (JavaScript doesn't run in sandboxed iframe)
- Created
buildClozeFromOcclusions() to format occlusion labels as cloze text
- Updated
getCardCSS() to return IO-specific CSS
- Updated
expandCards() to expand IO cards — one card per occlusion region
- Updated
getCardPreview() to show IO header text in card summary
- Updated
renderCardFromTemplate() with regex-based SVG injection for front/back sides
- Added
image-occlusion to CARD_TYPE_LABELS
- Added IO test card to test-cards.json with 3 occlusion regions
- Supports both occlusion modes: hide_all_guess_one and hide_one_guess_one
- SVG overlays show mask-active (yellow) for current region on front, revealed (green dashed) on back
- Added
min-width: 320px and min-height: 520px to preview container
- Prevents preview from collapsing to unusable size on small viewports
- Added
overflow: auto to wrapper — allows scrolling when viewport is smaller than minimum size
- Maintains phone aesthetic with existing
max-width: 420px constraint
- Added
artifacts/theme-designer.jsx — React artifact for rapid CSS iteration on card themes
- Added
developer/tools/theme-designer-launch.sh — generates theme designer with production themes and sample data
- Features: theme selector (production + working themes), card type selector, light/dark toggle, live CSS editing, export for themes.py
- Uses iframe rendering approach from preview-template.jsx for accurate Anki preview
- Supports injecting N working themes for A/B comparison during iteration
- Updated claude-guide.md with theme designer documentation
- Status: v1 prototype complete, ready for testing and iteration
- Added
developer/claude-guide.md — comprehensive guide for Claude to understand skill file structure
- Added Theme Designer Tool PRD to roadmap with full requirements specification
- Updated Basic Theme Cleanup to depend on Theme Designer Tool
- Documented file purposes, when to read each file, and development conventions
- Complete rewrite of onboarding artifact → now "User Guide"
- Matches developer portal design (sidebar nav, dark mode, mobile-responsive)
- New "Notes vs Cards" section explaining Anki's data model
- Detailed field tables for each note type with defaults and descriptions
- Anki alternatives section (RemNote, Mochi, Traverse) for users who don't want to pay for AnkiMobile
- Claude settings requirements documented (code execution, network egress)
- Links to Gwern's spaced repetition guide and AnkiWeb shared decks
- Artifact note explaining this is generated content, not a website
- Updated surfacing behavior: present guide after first interaction, respect user opt-out
- Renamed "Card Types" to "Note Types" throughout for Anki accuracy
- Complete rewrite of quick-cards.md with five defined use cases
- Vocabulary (single/batch) → Bidirectional Concept cards
- Acronym unpacking → Front-Back + Concept cards
- Pre-formatted cards with automatic type assignment and silent fixes
- Person cards (minimal to rich) with expansion offers
- Image recognition cards
- One-turn output pattern: .apkg + preview in single response
- Silent quality checks with fix-without-asking philosophy
- Updated SKILL.md routing to consolidate quick card types
- Extracted roadmap to separate file for token efficiency
- Extracted changelog to separate file
- Added dev-launch.sh for single-command developer mode entry
- Added copy-to-clipboard buttons on code blocks in portal
- Redesigned procedure prompts for voice-to-text workflow
- Comprehensive roadmap with detailed feature specifications
- Developer mode now presents multiple files for easy navigation
- Complete rewrite of developer portal with new design
- Added comprehensive README with design philosophy
- Restructured roadmap with phased approach
- Added procedures section with prompt templates
- Added commands reference for token-efficient operations
- Added file browser with collapsible sections
- Added test data preview
- Added defaults & configuration documentation
- Restructured skill with slim SKILL.md router (~100 lines, down from 726)
- Created initial developer portal
- Added developer/tools/ with test-preview.sh and package-skill.sh
- Established workflows/ directory structure for progressive disclosure
- React preview component with tap-to-flip, themes, feedback collection
- Support for 6 card types: Front-Back, Concept, Cloze, Image, Image Occlusion, Person
- create_anki_package.py for .apkg generation
- Onboarding HTML artifact
- Quality guidance and reference documentation