feat: scaffold blueprints SPA with List functional-blueprint illustration

src/components/FunctionReadout.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import type { BlueprintFunction } from "@/data/listBlueprint"
+
+defineProps<{ fn: BlueprintFunction }>()
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-wrap items-baseline gap-2">
+      <span class="text-lg font-bold tracking-wide text-accent">{{ fn.name }}</span>
+      <span
+        v-for="c in fn.caps"
+        :key="c"
+        class="chip"
+        :class="c === 'List' ? 'chip-core' : 'chip-cap'"
+        >{{ c }}</span
+      >
+    </div>
+    <p class="mb-4 mt-1 text-xs text-base-content/50">{{ fn.verb }}</p>
+
+    <section v-if="fn.state.length" class="block-sec">
+      <div class="k"><span>State touched</span><span class="rule" /></div>
+      <div v-for="[name, type] in fn.state" :key="name" class="flex gap-2">
+        <span>{{ name }}</span
+        ><span class="text-base-content/40">:</span><span class="text-secondary">{{ type }}</span>
+      </div>
+    </section>
+
+    <section v-if="fn.behaviors.length" class="block-sec">
+      <div class="k">
+        <span>Behavior{{ fn.behaviors.length > 1 ? "s" : "" }}</span
+        ><span class="rule" />
+      </div>
+      <div v-for="b in fn.behaviors" :key="b.sig" class="beh">
+        <div class="text-accent">{{ b.sig }}</div>
+        <div class="flex gap-2 text-xs text-base-content/70">
+          <span class="w-7 shrink-0 text-base-content/40">pre</span
+          ><span class="text-base-content">{{ b.pre }}</span>
+        </div>
+        <div class="flex gap-2 text-xs text-base-content/70">
+          <span class="w-7 shrink-0 text-base-content/40">eff</span
+          ><span class="text-base-content">{{ b.eff }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section v-if="fn.invariants.length" class="block-sec">
+      <div class="k">
+        <span>Invariant{{ fn.invariants.length > 1 ? "s" : "" }}</span
+        ><span class="rule" />
+      </div>
+      <ul class="tight">
+        <li v-for="i in fn.invariants" :key="i">{{ i }}</li>
+      </ul>
+    </section>
+
+    <section v-if="fn.failures.length" class="block-sec">
+      <div class="k text-error/80">
+        <span>⚠ Failure mode{{ fn.failures.length > 1 ? "s" : "" }}</span
+        ><span class="rule" />
+      </div>
+      <ul class="tight text-error">
+        <li v-for="x in fn.failures" :key="x">{{ x }}</li>
+      </ul>
+    </section>
+
+    <section v-if="fn.perf.length" class="block-sec">
+      <div class="k text-warning/80"><span>⚡ Critical performance</span><span class="rule" /></div>
+      <ul class="tight text-warning">
+        <li v-for="x in fn.perf" :key="x">{{ x }}</li>
+      </ul>
+    </section>
+
+    <p v-for="n in fn.notes" :key="n" class="text-[11px] italic text-base-content/40">— {{ n }}</p>
+  </div>
+</template>
+
+<style scoped>
+.chip {
+  border: 1px solid;
+  font-size: 10px;
+  padding: 1px 6px;
+  letter-spacing: 0.06em;
+}
+.chip-cap {
+  border-color: var(--color-secondary);
+  color: var(--color-secondary);
+}
+.chip-core {
+  border-color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
+  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
+}
+.block-sec {
+  margin-bottom: 0.875rem;
+}
+.k {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
+  margin-bottom: 0.35rem;
+}
+.k .rule {
+  flex: 1;
+  height: 1px;
+  background: color-mix(in srgb, var(--color-base-content) 15%, transparent);
+}
+.beh {
+  border-left: 2px solid color-mix(in srgb, var(--color-base-content) 30%, transparent);
+  padding-left: 0.625rem;
+  margin-bottom: 0.5rem;
+}
+.tight {
+  margin: 0;
+  padding-left: 1rem;
+  list-style: disc;
+}
+.tight li {
+  margin: 0.125rem 0;
+}
+</style>