Initial boilerplate scaffold for continuum-app

packages/ui/src/components/PrinterCard.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import TemperatureGraph from "./TemperatureGraph.vue";
+
+interface Printer {
+  id: string;
+  name: string;
+  model: string;
+  farmId: string;
+}
+
+interface LiveTelemetry {
+  state: "idle" | "printing" | "paused" | "error" | "offline";
+  nozzleTempC: number;
+  bedTempC: number;
+  progressPct: number;
+}
+
+const props = defineProps<{
+  printer: Printer;
+  live?: LiveTelemetry;
+}>();
+
+const state = computed(() => props.live?.state ?? "offline");
+</script>
+
+<template>
+  <article class="printer-card" :class="`is-${state}`">
+    <header>
+      <h3>{{ printer.name }}</h3>
+      <span class="printer-card__model">{{ printer.model }}</span>
+    </header>
+
+    <p class="printer-card__state">{{ state }}</p>
+
+    <TemperatureGraph
+      v-if="live"
+      :nozzle-temp-c="live.nozzleTempC"
+      :bed-temp-c="live.bedTempC"
+    />
+
+    <progress v-if="live" :value="live.progressPct" max="100" />
+  </article>
+</template>
+
+<style scoped>
+.printer-card {
+  border: 1px solid #1f232c;
+  border-radius: 8px;
+  padding: 1rem;
+  background: #12151c;
+}
+
+.printer-card__model {
+  opacity: 0.6;
+  font-size: 0.8rem;
+}
+
+.printer-card.is-printing .printer-card__state {
+  color: #35d07f;
+}
+
+.printer-card.is-error .printer-card__state {
+  color: #f2604c;
+}
+
+.printer-card.is-offline .printer-card__state {
+  color: #6b7280;
+}
+
+progress {
+  width: 100%;
+}
+</style>