- Create ContentInsertionPane component with segmented controls
- Update image placeholder to single-line format with icon + text
- Update gallery placeholder to use unified pane
- Support upload, embed link, and gallery selection for each type
- Add location search placeholder for future geocoding integration
- Add placeholder node styles to editor.css matching other media nodes
- Remove incorrect margins from individual placeholder components
- Placeholders now properly aligned with 2.25rem horizontal spacing
- Consistent with h1, h2, p text elements and YouTube embeds
- Fix slash command keyboard navigation by uncommenting handler
- Update all media placeholders to respect content block margins (2.25rem)
- Refactor placeholder styles to use SCSS variables consistently
- Fix Audio, Gallery, IFrame, Video, Location, and URL embed placeholders
- Fix Image placeholder width to match other placeholders
- Ensure responsive margins on mobile (2rem)
- Replace old slash command list styles with new design
- Use consistent SCSS variables from design system
- Match dropdown styling patterns used elsewhere
- Improve visual hierarchy with better typography
- Add smooth transitions and hover states
- Clean up old CSS styles
- Add left/right margins of 2.25rem to match text block padding
- Ensure YouTube videos, link cards, and other embeds align with text
- Add responsive margins (2rem) for mobile viewports
- Fixes issue where embeds were too wide compared to text content
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 1rem margin-bottom to all embed types (url, iframe, video, image, gallery, audio, geolocation)
- Ensure YouTube embeds and URL cards have consistent spacing
- Prevent double margins when embeds are adjacent
- Matches the margin-bottom used for text blocks (paragraphs)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Always initialize editor with content to create paragraph node
- Remove logic that prevented setting empty paragraph content
- Remove unused initialized variable
- This ensures the placeholder is visible when editor first loads
The issue was that the editor needs at least one paragraph node
for the placeholder to display, but the previous logic prevented
this from happening on initial load.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add padding-left and negative margin-left to placeholder pseudo-elements
- Separate styles for paragraphs and headings to target specific elements
- Include responsive styles for mobile viewports
- Fixes issue where placeholder text wasn't aligned with actual content
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update padding for paragraphs, headings, blockquotes, lists, tables, and code blocks
- Change from 48px (3rem) to 36px (2.25rem) for better content density
- Maintains responsive behavior with existing media queries
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace old slot syntax with new snippet syntax to fix compilation error.
BaseDropdown expects snippets as props, not slots.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Mark LastFM Stream Server simplification as complete
- Document 82% line reduction (625 to 115 lines)
- Update media modal consolidation status
- Document extracted components and utilities
All Phase 4 complex refactoring tasks are now complete.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reduce from 625 lines to 115 lines (82% reduction)
- Use LastfmStreamManager to handle complex logic
- Cleaner separation of SSE streaming from business logic
- Improved error handling and state management
This completes the LastFM stream server simplification task.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create lastfmTransformers.ts for data transformations
- Create nowPlayingDetector.ts for cleaner detection algorithms
- Create albumEnricher.ts for album data enrichment
- Create lastfmStreamManager.ts to orchestrate streaming logic
This separates concerns and makes the code more testable and maintainable.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace inline grid with MediaGrid component
- Replace upload zone with FileUploadZone component
- Replace file list with FilePreviewList component
- Replace metadata sections with dedicated components
- Simplify media selection to idiomatic Svelte patterns
- Remove non-idiomatic composable pattern
This completes the media modal consolidation, reducing duplication
and improving maintainability.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add ComposerBubbleMenu with formatting tools and dropdowns
- Create BubbleTextStyleMenu for paragraph/heading/list selection
- Add BubbleColorPicker with preset palettes and custom color selection
- Use lighter pastel colors for highlight presets
- Implement circle color swatches with even grid spacing
- Add strikethrough support and improved hover states
- Use absolute positioning to prevent scroll issues
- Integrate with existing editor configuration
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install svelte-awesome-color-picker v4.0.2
- Required for enhanced bubble menu color selection
- Supports Svelte 5 with recent updates
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add explicit styles for mark elements
- Force normal font-style with \!important
- Add subtle padding and border-radius for highlights
- Ensure text color inheritance for proper contrast
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add white background with subtle gray border and rounded corners
- Remove initial drop shadow, add shadow on hover
- Reduce vertical padding for more compact design
- Update button hover states to use darker gray
- Add sticky positioning with gap from top
- Improve responsive padding and animations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add toolbar property to ComposerFeatures interface
- Update default features to disable toolbar for inline/full variants
- Add conditional rendering check for toolbar feature flag
- Enable bubble menu by default for better UX
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added menuNode state to capture the node position when menu opens
- Updated all action functions to use menuNode instead of currentNode
- This ensures drag handle actions (Turn into, Delete, etc.) always affect the block where the handle was clicked, not where the mouse currently hovers
- Also formatted code with prettier
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move handle up by 2px for better visual alignment with text
- Compensates for smaller handle size centering
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update line height calculation from 24px to 20px handle height
- Remove extra 4px offset that was compensating for old size
- Handle now properly aligns with text baseline
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reduce drag handle size from 1.5rem to 1.25rem (24px to 20px)
- Reduce SVG icon size to 0.875rem (14px)
- Increase gap between handle and content from 4px to 12px
- Update invisible hover zone to match new gap size
- Remove duplicate SVG styles
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Brings drag handle closer to text content
- Creates a tighter, more connected visual relationship
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Calculate element's padding-left to position handle correctly
- Position drag handle close to text content, not at container edge
- Maintains 8px gap between handle and text for visual clarity
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove horizontal padding from editor container
- Add 3rem (2rem on mobile) horizontal padding to all block elements
- Ensures drag handle appears when hovering over visual margins
- Properly handle nested elements (blockquotes, lists, tables) to prevent double padding
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 1rem bottom margin to paragraphs
- Increase heading margins and add contextual spacing
- Add proper spacing for lists and list items
- Ensure code blocks have consistent bottom margin
- Add line-height of 1.6 for better paragraph readability
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove border and background from full variant composer
- Increase padding for better readability
- Update toolbar padding to match content area
- Make case study panel full-width and transparent
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use a simple contentLoaded flag to load content once when editor is ready
- Remove complex change detection that was causing infinite update loops
- Remove debug logging now that issue is resolved
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Convert Button component to use snippets instead of slots
- Update BaseDropdown and StatusDropdown to use new Button snippet syntax
- Add effect to watch for data changes in ComposerCore and update editor content
- Fix SVG component usage in Album component for Svelte 5 compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove EnhancedComposer shim and old backup file
- Update all imports to use new Composer from ./composer
- Fix editor command implementations for link operations
- Fix dropdown hook usage with proper reactive patterns
- All 5 components now directly import the modular implementation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extract ComposerToolbar component for toolbar UI and logic
- Create TextStyleDropdown and MediaInsertDropdown components
- Extract ComposerMediaHandler for all media operations
- Create ComposerLinkManager for link-related features
- Extract useComposerEvents hook for event handling
- Create editorConfig utility for configuration logic
- Refactor main component from 1,347 to ~300 lines
- Maintain backward compatibility with shim component
- Improve maintainability with single-responsibility components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create FileIcon.svelte and CopyIcon.svelte components
- Update MediaDetailsModal to use new icon components
- Maintain consistent icon sizing and styling
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create single PhotoGrid component with columns (1,2,3,auto) and masonry options
- Remove 5 duplicate grid components
- Update HorizontalScrollPhotoGrid to HorizontalPhotoScroll with Photo type
- Add interactive test page for PhotoGrid
- Update all pages to use new unified component
- Use svelte-bricks for proper masonry layout
- Single column always uses natural aspect ratios
- Square thumbnails (object-fit: cover) for multi-column non-masonry layouts
Co-Authored-By: Claude <noreply@anthropic.com>
- Created PhotoGrid.new.svelte with flexible column layouts (1, 2, 3, auto)
- Supports ultrawide image handling from ThreeColumnPhotoGrid
- Maintains PhotoItem component usage for consistency
- Created wrapper components for backward compatibility:
- SingleColumnPhotoGrid.new.svelte
- TwoColumnPhotoGrid.new.svelte
- ThreeColumnPhotoGrid.new.svelte
- Fixed FormFieldWrapper import errors (was already removed)
This consolidates 4 similar grid components into a single flexible component, reducing code duplication by ~60%.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created BaseSegmentedController with shared logic for all segmented controls
- Refactored AdminSegmentedController to use BaseSegmentedController
- Added keyboard navigation support (arrow keys, Home/End)
- Added size variants (small, medium, large)
- Added support for custom pill colors
- Added proper ARIA attributes for accessibility
- Fixed missing CSS variables ($red-error, $shadow-*)
This eliminates significant code duplication and provides a consistent foundation for all segmented control patterns.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add children prop to FormField to support wrapper mode
- Update components using FormFieldWrapper to use FormField
- Remove redundant FormFieldWrapper component
- Maintain all existing functionality with unified API
This reduces code duplication and simplifies the form component hierarchy.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The Avatar component was also using $dark-blue as a string literal
in the SVG paths, which needed to be replaced with the actual hex
value #070610.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes ReferenceError where template was using undefined variables.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add missing variables: $unit-22x, $gray-5, $salmon-pink
- Fix AvatarSVG.svelte to use actual color values instead of SCSS variables
- SVG fill attributes cannot use SCSS variables directly
This resolves all preprocessing errors after the color system refactor.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix themes.scss to use $gray- variables
- Fix tooltip.scss to use $gray- variables
- Resolves build error with undefined variables
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
