feat: polish publishing guides around existing setup patterns

neode-ui/src/components/SetupWalkthrough.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 export interface SetupStep { id: string; title: string; description: string; complete: boolean }
-const props = defineProps<{ steps: SetupStep[]; busy?: boolean }>()
+const props = defineProps<{ steps: SetupStep[]; busy?: boolean; continueLabel?: string; continueDisabled?: boolean }>()
+const emit = defineEmits<{ next: [step: string] }>()
 const active = defineModel<string>({ required: true })
+const root = ref<HTMLElement>()
 const index = computed(() => Math.max(0, props.steps.findIndex(step => step.id === active.value)))
 const completed = computed(() => props.steps.filter(step => step.complete).length)
 watch(() => props.steps, steps => {
   if (!steps.some(step => step.id === active.value)) active.value = steps.find(step => !step.complete)?.id ?? steps[0]?.id ?? ''
 })
+watch(active, async () => {
+  await nextTick()
+  const heading = root.value?.querySelector<HTMLButtonElement>('button[aria-expanded="true"]')
+  heading?.focus({ preventScroll: true })
+  heading?.scrollIntoView?.({ block: 'nearest', behavior: window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth' })
+})
 function move(offset: number) {
   const step = props.steps[index.value + offset]
   if (step) active.value = step.id
@@ -16,7 +24,7 @@ function move(offset: number) {
 </script>
 
 <template>
-  <div>
+  <div ref="root">
     <div class="mb-8">
       <div class="flex items-center justify-between mb-2">
         <span class="text-sm text-white/60">Step {{ index + 1 }} of {{ steps.length }}</span>
@@ -40,7 +48,7 @@ function move(offset: number) {
             <fieldset :disabled="busy" class="space-y-6 min-w-0"><slot :name="step.id" /></fieldset>
             <div class="flex flex-wrap justify-between gap-3 mt-6 pt-4 border-t border-white/10">
               <button v-if="stepIndex > 0" type="button" class="glass-button glass-button-sm rounded-lg px-5 py-2 text-sm font-medium" :disabled="busy" @click="move(-1)">Back</button>
-              <button v-if="stepIndex < steps.length - 1" type="button" class="glass-button glass-button-sm rounded-lg px-5 py-2 text-sm font-medium ml-auto" :disabled="busy" @click="move(1)">{{ step.id === 'storage' ? 'Continue without installing' : 'Continue' }}</button>
+              <button v-if="stepIndex < steps.length - 1" type="button" class="path-action-button path-action-button--continue ml-auto" :disabled="busy || continueDisabled" @click="emit('next', steps[stepIndex + 1]!.id)">{{ continueLabel || (step.id === 'storage' ? 'Continue without installing' : 'Continue') }}<span aria-hidden="true">→</span></button>
             </div>
           </div>
         </div>
@@ -48,3 +56,9 @@ function move(offset: number) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.goal-step-pending { opacity: .72; }
+button:focus-visible { outline: 2px solid #fb923c; outline-offset: 4px; }
+@media (prefers-reduced-motion: reduce) { .transition-all { transition: none; } }
+</style>