feat: add zine-direction shared components

app/components/CirclePicker.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="circle-picker">
+    <div
+      v-for="circle in circles"
+      :key="circle.value"
+      class="circle-option"
+      :class="{ current: modelValue === circle.value }"
+      @click="$emit('update:modelValue', circle.value)"
+    >
+      <span class="circle-name">{{ circle.label }}</span>
+      <span class="circle-desc">{{ circle.description }}</span>
+      <span
+        v-if="modelValue === circle.value"
+        class="circle-tag"
+        :style="{ color: `var(--c-${circle.value})`, borderColor: `var(--c-${circle.value})` }"
+      >Current</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: { type: String, default: '' },
+  circles: {
+    type: Array,
+    default: () => [
+      { value: 'community', label: 'Community', description: 'Learning together, exploring cooperative models' },
+      { value: 'founder', label: 'Founder', description: 'Actively building a cooperative studio' },
+      { value: 'practitioner', label: 'Practitioner', description: 'Experienced in cooperative business' },
+    ],
+  },
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<style scoped>
+.circle-picker {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.circle-option {
+  border: 1px dashed var(--border);
+  padding: 14px 12px;
+  background: var(--bg);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.circle-option:hover {
+  background: var(--surface-hover);
+}
+
+.circle-option.current {
+  border-color: var(--candle);
+  border-style: solid;
+  background: var(--surface);
+}
+
+.circle-name {
+  font-size: 13px;
+  font-weight: 600;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.circle-option.current .circle-name {
+  color: var(--candle);
+}
+
+.circle-desc {
+  font-size: 11px;
+  color: var(--text-faint);
+  line-height: 1.5;
+  display: block;
+}
+
+.circle-tag {
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 6px;
+  display: inline-block;
+  padding: 1px 6px;
+  border: 1px dashed;
+}
+
+@media (max-width: 768px) {
+  .circle-picker {
+    grid-template-columns: 1fr;
+  }
+}
+</style>