refactor: extract reusable UI components and composables from TextSettings

Major refactoring to improve code quality and reduce duplication:

TextSettings.vue: 1127 → 269 lines (-76%)

New composables:
- useCssUpdater.js: generic CSS update/remove functions
- useCssSync.js: CSS parsing to form fields

New UI components:
- UnitToggle.vue: reusable unit selector buttons
- InputWithUnit.vue: number input with unit toggle
- MarginEditor.vue: simple/detailed margin editor with sync

Benefits:
- Reusable components for other settings panels
- Centralized CSS manipulation logic
- Better separation of concerns
- Easier to test and maintain

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

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

src/components/ui/InputWithUnit.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="input-with-unit">
+    <input
+      v-if="showRange"
+      type="range"
+      :value="modelValue.value"
+      :min="min"
+      :max="max"
+      :step="step"
+      @input="updateValue(Number($event.target.value))"
+    />
+    <input
+      type="number"
+      :value="modelValue.value"
+      :min="min"
+      :max="max"
+      :step="step"
+      class="size-input"
+      @input="updateValue(Number($event.target.value))"
+    />
+    <UnitToggle
+      :modelValue="modelValue.unit"
+      :units="units"
+      @update:modelValue="updateUnit"
+    />
+    <slot name="after" />
+  </div>
+</template>
+
+<script setup>
+import UnitToggle from './UnitToggle.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+    validator: (v) => 'value' in v && 'unit' in v
+  },
+  units: {
+    type: Array,
+    default: () => ['mm', 'px']
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  showRange: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const updateValue = (value) => {
+  emit('update:modelValue', { ...props.modelValue, value });
+};
+
+const updateUnit = (unit) => {
+  emit('update:modelValue', { ...props.modelValue, unit });
+};
+</script>