feat: integrate Coloris color picker for background field

Add Coloris.js library for enhanced color selection in PageSettings with
automatic button state sync across tab changes.

Features:
- Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl)
- Button positioned to the left of input field
- Automatic sync when switching tabs (remembers selected color)
- Close button and click-outside-to-close functionality
- Dark theme with pill UI style

Changes:
- Install @melloware/coloris package
- PageSettings.vue: Integrate Coloris with data-coloris attribute,
  add tab visibility detection via provide/inject, force button update
  when returning to document tab
- EditorPanel.vue: Provide activeTab to child components, increase
  panel width to 30rem
- _forms.scss: Add .input-with-color styles with custom Coloris
  button positioning (absolute positioned to left of input)
- Temporarily comment out rgb/hex format buttons (replaced by Coloris
  format toggle)

Technical details:
- Uses provide/inject pattern to detect tab changes
- Triggers synthetic input events to force Coloris button refresh
- Custom CSS overrides to position swatch button correctly

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/editor/EditorPanel.vue

@@ -45,13 +45,16 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, provide } from 'vue';
 import PageSettings from './PageSettings.vue';
 import TextSettings from './TextSettings.vue';
 import StylesheetViewer from '../StylesheetViewer.vue';
 
 // Tab management
 const activeTab = ref('document');
+
+// Provide activeTab to child components
+provide('activeTab', activeTab);
 </script>
 
 <style lang="scss" scoped>
@@ -60,7 +63,7 @@ const activeTab = ref('document');
   position: fixed;
   top: 0;
   left: 0;
-  width: 25rem;
+  width: 30rem;
   height: 100vh;
   display: flex;
   flex-direction: column;