Readying for design

app/components/GuildDivider.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="['guild-divider', spacing]" role="separator" aria-hidden="true">
+    <!-- Woodcut: irregular hand-drawn line -->
+    <svg
+      v-if="variant === 'woodcut'"
+      viewBox="0 0 800 12"
+      preserveAspectRatio="none"
+      class="w-full h-3 text-guild-600"
+    >
+      <path
+        d="M0,6 Q50,3 100,7 T200,5 T300,8 T400,4 T500,7 T600,5 T700,8 T800,6"
+        stroke="currentColor"
+        stroke-width="1.5"
+        fill="none"
+        stroke-dasharray="8,3,15,4,6,5"
+      />
+    </svg>
+
+    <!-- Dither: warm amber dithered line -->
+    <div v-else-if="variant === 'dither'" class="h-px dithered-warm opacity-60" />
+
+    <!-- Dots: halftone dot row -->
+    <div
+      v-else-if="variant === 'dots'"
+      class="h-2 halftone-texture opacity-30"
+    />
+
+    <!-- Simple: plain rule -->
+    <hr v-else class="border-guild-700" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'simple',
+    validator: (v) => ['simple', 'woodcut', 'dither', 'dots'].includes(v),
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const spacing = computed(() => props.compact ? 'my-4' : 'my-8')
+</script>