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>

src/components/ui/MarginEditor.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="margin-editor">
+    <div class="field">
+      <label :for="id">{{ label }}</label>
+      <div class="input-with-unit">
+        <input
+          :id="id"
+          type="number"
+          :value="simple.value"
+          min="0"
+          @input="updateSimpleValue(Number($event.target.value))"
+        />
+        <UnitToggle
+          :modelValue="simple.unit"
+          :units="units"
+          @update:modelValue="updateSimpleUnit"
+        />
+        <button
+          type="button"
+          class="collapse-toggle"
+          :class="{ expanded }"
+          @click="toggleExpanded"
+          title="Réglages détaillés"
+        >
+          ▶
+        </button>
+      </div>
+    </div>
+
+    <div v-if="expanded" class="subsection collapsed-section">
+      <div v-for="side in sides" :key="side.key" class="field">
+        <label :for="`${id}-${side.key}`">{{ side.label }}</label>
+        <div class="input-with-unit">
+          <input
+            :id="`${id}-${side.key}`"
+            type="number"
+            :value="detailed[side.key].value"
+            min="0"
+            @input="updateDetailedValue(side.key, Number($event.target.value))"
+          />
+          <UnitToggle
+            :modelValue="detailed[side.key].unit"
+            :units="units"
+            @update:modelValue="(unit) => updateDetailedUnit(side.key, unit)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import UnitToggle from './UnitToggle.vue';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  simple: {
+    type: Object,
+    required: true,
+    validator: (v) => 'value' in v && 'unit' in v
+  },
+  detailed: {
+    type: Object,
+    required: true,
+    validator: (v) => ['top', 'right', 'bottom', 'left'].every(k => k in v)
+  },
+  units: {
+    type: Array,
+    default: () => ['mm', 'px']
+  }
+});
+
+const emit = defineEmits(['update:simple', 'update:detailed', 'change']);
+
+const expanded = ref(false);
+let isSyncing = false;
+
+const sides = [
+  { key: 'top', label: 'Haut' },
+  { key: 'bottom', label: 'Bas' },
+  { key: 'left', label: 'Gauche' },
+  { key: 'right', label: 'Droite' }
+];
+
+const toggleExpanded = () => {
+  expanded.value = !expanded.value;
+  if (expanded.value) {
+    // Sync detailed values from simple when expanding
+    syncDetailedFromSimple();
+  }
+};
+
+const syncDetailedFromSimple = () => {
+  isSyncing = true;
+  const newDetailed = {};
+  for (const side of sides) {
+    newDetailed[side.key] = { value: props.simple.value, unit: props.simple.unit };
+  }
+  emit('update:detailed', newDetailed);
+  isSyncing = false;
+};
+
+const updateSimpleValue = (value) => {
+  const newSimple = { ...props.simple, value };
+  emit('update:simple', newSimple);
+
+  // Sync all detailed values
+  isSyncing = true;
+  const newDetailed = {};
+  for (const side of sides) {
+    newDetailed[side.key] = { value, unit: props.simple.unit };
+  }
+  emit('update:detailed', newDetailed);
+  isSyncing = false;
+
+  emit('change', { type: 'simple', simple: newSimple });
+};
+
+const updateSimpleUnit = (unit) => {
+  const newSimple = { ...props.simple, unit };
+  emit('update:simple', newSimple);
+
+  // Sync all detailed units
+  isSyncing = true;
+  const newDetailed = {};
+  for (const side of sides) {
+    newDetailed[side.key] = { ...props.detailed[side.key], unit };
+  }
+  emit('update:detailed', newDetailed);
+  isSyncing = false;
+
+  emit('change', { type: 'simple', simple: newSimple });
+};
+
+const updateDetailedValue = (key, value) => {
+  if (isSyncing) return;
+  const newDetailed = { ...props.detailed, [key]: { ...props.detailed[key], value } };
+  emit('update:detailed', newDetailed);
+  if (expanded.value) {
+    emit('change', { type: 'detailed', detailed: newDetailed });
+  }
+};
+
+const updateDetailedUnit = (key, unit) => {
+  if (isSyncing) return;
+  const newDetailed = { ...props.detailed, [key]: { ...props.detailed[key], unit } };
+  emit('update:detailed', newDetailed);
+  if (expanded.value) {
+    emit('change', { type: 'detailed', detailed: newDetailed });
+  }
+};
+
+defineExpose({ expanded });
+</script>

src/components/ui/UnitToggle.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="unit-toggle">
+    <button
+      v-for="unit in units"
+      :key="unit"
+      type="button"
+      :class="{ active: modelValue === unit }"
+      @click="$emit('update:modelValue', unit)"
+    >
+      {{ unit }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  units: {
+    type: Array,
+    default: () => ['mm', 'px']
+  }
+});
+
+defineEmits(['update:modelValue']);
+</script>

src/composables/useCssSync.js

@@ -0,0 +1,119 @@
+import { useStylesheetStore } from '../stores/stylesheet';
+
+export function useCssSync() {
+  const store = useStylesheetStore();
+
+  /**
+   * Extract a simple CSS value (string)
+   */
+  const extractValue = (selector, property) => {
+    const block = store.extractBlock(selector);
+    if (!block) return null;
+
+    const match = block.match(new RegExp(`${property}:\\s*([^;]+)`, 'i'));
+    return match ? match[1].trim() : null;
+  };
+
+  /**
+   * Extract a numeric CSS value with unit
+   * Returns { value: number, unit: string } or null
+   */
+  const extractNumericValue = (selector, property, allowedUnits = ['px', 'em', 'rem', 'mm']) => {
+    const block = store.extractBlock(selector);
+    if (!block) return null;
+
+    const unitsPattern = allowedUnits.join('|');
+    const match = block.match(new RegExp(`${property}:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
+
+    if (match) {
+      return {
+        value: parseFloat(match[1]),
+        unit: match[2].toLowerCase()
+      };
+    }
+    return null;
+  };
+
+  /**
+   * Extract margin/padding shorthand (handles 1 or 4 values)
+   * Returns { simple: { value, unit } } or { detailed: { top, right, bottom, left } }
+   */
+  const extractSpacing = (selector, property, allowedUnits = ['mm', 'px']) => {
+    const block = store.extractBlock(selector);
+    if (!block) return null;
+
+    const unitsPattern = allowedUnits.join('|');
+
+    // Check for detailed properties first (property-top, property-right, etc.)
+    const topMatch = block.match(new RegExp(`${property}-top:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
+
+    if (topMatch) {
+      const rightMatch = block.match(new RegExp(`${property}-right:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
+      const bottomMatch = block.match(new RegExp(`${property}-bottom:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
+      const leftMatch = block.match(new RegExp(`${property}-left:\\s*([0-9.]+)(${unitsPattern})`, 'i'));
+
+      return {
+        detailed: {
+          top: topMatch ? { value: parseFloat(topMatch[1]), unit: topMatch[2] } : { value: 0, unit: 'mm' },
+          right: rightMatch ? { value: parseFloat(rightMatch[1]), unit: rightMatch[2] } : { value: 0, unit: 'mm' },
+          bottom: bottomMatch ? { value: parseFloat(bottomMatch[1]), unit: bottomMatch[2] } : { value: 0, unit: 'mm' },
+          left: leftMatch ? { value: parseFloat(leftMatch[1]), unit: leftMatch[2] } : { value: 0, unit: 'mm' },
+        }
+      };
+    }
+
+    // Check for shorthand property
+    const shorthandMatch = block.match(new RegExp(`${property}:\\s*([^;]+)`, 'i'));
+    if (!shorthandMatch) return null;
+
+    const shorthandValue = shorthandMatch[1].trim();
+
+    // Check for 4-value format: "0mm 0mm 24mm 0mm" (top right bottom left)
+    const fourValuePattern = new RegExp(
+      `^([0-9.]+)(${unitsPattern})\\s+([0-9.]+)(${unitsPattern})\\s+([0-9.]+)(${unitsPattern})\\s+([0-9.]+)(${unitsPattern})$`,
+      'i'
+    );
+    const fourValueMatch = shorthandValue.match(fourValuePattern);
+
+    if (fourValueMatch) {
+      return {
+        detailed: {
+          top: { value: parseFloat(fourValueMatch[1]), unit: fourValueMatch[2] },
+          right: { value: parseFloat(fourValueMatch[3]), unit: fourValueMatch[4] },
+          bottom: { value: parseFloat(fourValueMatch[5]), unit: fourValueMatch[6] },
+          left: { value: parseFloat(fourValueMatch[7]), unit: fourValueMatch[8] },
+        }
+      };
+    }
+
+    // Single value format: "10mm"
+    const singleValuePattern = new RegExp(`^([0-9.]+)(${unitsPattern})$`, 'i');
+    const singleValueMatch = shorthandValue.match(singleValuePattern);
+
+    if (singleValueMatch) {
+      return {
+        simple: {
+          value: parseFloat(singleValueMatch[1]),
+          unit: singleValueMatch[2]
+        }
+      };
+    }
+
+    return null;
+  };
+
+  /**
+   * Check if a property value equals a specific string
+   */
+  const hasValue = (selector, property, expectedValue) => {
+    const value = extractValue(selector, property);
+    return value === expectedValue;
+  };
+
+  return {
+    extractValue,
+    extractNumericValue,
+    extractSpacing,
+    hasValue,
+  };
+}

src/composables/useCssUpdater.js

@@ -0,0 +1,120 @@
+import { useStylesheetStore } from '../stores/stylesheet';
+
+export function useCssUpdater() {
+  const store = useStylesheetStore();
+
+  /**
+   * Update or add a CSS property for a given selector
+   */
+  const updateStyle = (selector, property, value) => {
+    const currentBlock = store.extractBlock(selector) || createRule(selector);
+
+    if (currentBlock.includes(`${property}:`)) {
+      const updatedBlock = currentBlock.replace(
+        new RegExp(`(${property}:\\s*)[^;]+`, 'i'),
+        `$1${value}`
+      );
+      store.content = store.content.replace(currentBlock, updatedBlock);
+    } else {
+      const updatedBlock = currentBlock.replace(
+        /(\s*})$/,
+        `  ${property}: ${value};\n$1`
+      );
+      store.content = store.content.replace(currentBlock, updatedBlock);
+    }
+  };
+
+  /**
+   * Remove a CSS property from a selector
+   */
+  const removeProperty = (selector, property) => {
+    const currentBlock = store.extractBlock(selector);
+    if (!currentBlock) return;
+
+    const updatedBlock = currentBlock.replace(
+      new RegExp(`\\s*${property}:\\s*[^;]+;\\n?`, 'gi'),
+      ''
+    );
+
+    if (updatedBlock !== currentBlock) {
+      store.content = store.content.replace(currentBlock, updatedBlock);
+    }
+  };
+
+  /**
+   * Remove multiple CSS properties from a selector
+   */
+  const removeProperties = (selector, properties) => {
+    let currentBlock = store.extractBlock(selector);
+    if (!currentBlock) return;
+
+    let updatedBlock = currentBlock;
+    for (const property of properties) {
+      updatedBlock = updatedBlock.replace(
+        new RegExp(`\\s*${property}:\\s*[^;]+;\\n?`, 'gi'),
+        ''
+      );
+    }
+
+    if (updatedBlock !== currentBlock) {
+      store.content = store.content.replace(currentBlock, updatedBlock);
+    }
+  };
+
+  /**
+   * Create a new CSS rule for a selector
+   */
+  const createRule = (selector) => {
+    store.content += `\n\n${selector} {\n}\n`;
+    return `${selector} {\n}`;
+  };
+
+  /**
+   * Remove detailed margin properties and set shorthand
+   */
+  const setMargin = (selector, value, unit) => {
+    removeProperties(selector, ['margin-top', 'margin-right', 'margin-bottom', 'margin-left']);
+    updateStyle(selector, 'margin', `${value}${unit}`);
+  };
+
+  /**
+   * Remove shorthand margin and set detailed margins
+   */
+  const setDetailedMargins = (selector, top, right, bottom, left) => {
+    removeProperty(selector, 'margin');
+    updateStyle(selector, 'margin-top', `${top.value}${top.unit}`);
+    updateStyle(selector, 'margin-right', `${right.value}${right.unit}`);
+    updateStyle(selector, 'margin-bottom', `${bottom.value}${bottom.unit}`);
+    updateStyle(selector, 'margin-left', `${left.value}${left.unit}`);
+  };
+
+  /**
+   * Remove detailed padding properties and set shorthand
+   */
+  const setPadding = (selector, value, unit) => {
+    removeProperties(selector, ['padding-top', 'padding-right', 'padding-bottom', 'padding-left']);
+    updateStyle(selector, 'padding', `${value}${unit}`);
+  };
+
+  /**
+   * Remove shorthand padding and set detailed padding
+   */
+  const setDetailedPadding = (selector, top, right, bottom, left) => {
+    removeProperty(selector, 'padding');
+    updateStyle(selector, 'padding-top', `${top.value}${top.unit}`);
+    updateStyle(selector, 'padding-right', `${right.value}${right.unit}`);
+    updateStyle(selector, 'padding-bottom', `${bottom.value}${bottom.unit}`);
+    updateStyle(selector, 'padding-left', `${left.value}${left.unit}`);
+  };
+
+  return {
+    updateStyle,
+    removeProperty,
+    removeProperties,
+    createRule,
+    setMargin,
+    setDetailedMargins,
+    setPadding,
+    setDetailedPadding,
+  };
+}