docs: reorganize component guide structure and indexes

Update documentation rules for GUIDE.md files to keep higher-level
guides focused on constraints, conventions, and indexes. Add base and
section component guides to the LLM development index, clarify component
layering responsibilities, and fix architecture references from README to
GUIDE.md.docs: reorganize component guide structure and indexes

Update documentation rules for GUIDE.md files to keep higher-level
guides focused on constraints, conventions, and indexes. Add base and
section component guides to the LLM development index, clarify component
layering responsibilities, and fix architecture references from README to
GUIDE.md.

src/components/base/BaseFormTextField.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  label?: string
+  labelCharCount?: number
+  prependMarginEnd?: number
+  readonly?: boolean
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const prependMinWidth = computed(() =>
+  props.labelCharCount != null ? `${props.labelCharCount * 0.785}rem` : undefined
+)
+
+const marginEndStyle = computed(() => `${props.prependMarginEnd ?? 8}px`)
+</script>
+
+<template>
+  <v-text-field
+    v-model="modelValue"
+    variant="outlined"
+    density="compact"
+    hide-details
+    :readonly="readonly"
+  >
+    <template v-if="label" #prepend>
+      <span
+        class="text-title-small"
+        :style="prependMinWidth ? { minWidth: prependMinWidth } : undefined"
+      >
+        {{ label }}
+      </span>
+    </template>
+  </v-text-field>
+</template>
+
+<style scoped>
+:deep(.v-input__prepend) {
+  margin-inline-end: v-bind(marginEndStyle);
+}
+</style>