From acb4a8ccaf961f7a184f2529ec2229b2dbd89020 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Sun, 1 Mar 2026 12:10:14 -0500
Subject: [PATCH] feat(machine): add BounceDots and StepIndicator components

BounceDots: three animated dots replacing Skeleton shimmer loaders.
StepIndicator: dot-line-dot progress with active/complete states,
split into separate dots and labels rows for proper alignment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/components/BounceDots.vue    | 19 +++++++++
 apps/machine/src/components/StepIndicator.vue | 40 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 apps/machine/src/components/BounceDots.vue
 create mode 100644 apps/machine/src/components/StepIndicator.vue

diff --git a/apps/machine/src/components/BounceDots.vue b/apps/machine/src/components/BounceDots.vue
new file mode 100644
index 0000000..465c28b
--- /dev/null
+++ b/apps/machine/src/components/BounceDots.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <div :class="['flex items-center justify-center gap-3', $props.class]">
+    <div
+      class="h-4 w-4 rounded-full bg-primary animate-dot-bounce"
+      style="animation-delay: -0.32s"
+    />
+    <div
+      class="h-4 w-4 rounded-full bg-primary animate-dot-bounce"
+      style="animation-delay: -0.16s"
+    />
+    <div class="h-4 w-4 rounded-full bg-primary animate-dot-bounce" />
+  </div>
+</template>
diff --git a/apps/machine/src/components/StepIndicator.vue b/apps/machine/src/components/StepIndicator.vue
new file mode 100644
index 0000000..4381930
--- /dev/null
+++ b/apps/machine/src/components/StepIndicator.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  steps: string[]
+  currentStep: number
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-1">
+    <!-- Dots and lines row -->
+    <div class="flex items-center">
+      <template v-for="(step, i) in steps" :key="step">
+        <div
+          v-if="i > 0"
+          class="step-indicator__line"
+          :class="{ 'step-indicator__line--complete': i <= currentStep }"
+        />
+        <div
+          class="step-indicator__dot"
+          :class="{
+            'step-indicator__dot--active': i === currentStep,
+            'step-indicator__dot--complete': i < currentStep,
+          }"
+        />
+      </template>
+    </div>
+    <!-- Labels row -->
+    <div class="flex">
+      <template v-for="(step, i) in steps" :key="step">
+        <div v-if="i > 0" class="w-[60px]" />
+        <span
+          class="w-[14px] text-center text-xs"
+          :class="i === currentStep ? 'text-primary font-medium' : 'text-muted-foreground'"
+        >
+          {{ step }}
+        </span>
+      </template>
+    </div>
+  </div>
+</template>