feat: gallery + generic blueprint viewer, add Grid blueprint
Refactor the List-specific screen into a data-driven, reusable viewer: - generic Blueprint type + shared LoadState machine + registry - vue-router: / (gallery) and /b/:slug (illustration) - BlueprintViewer renders any blueprint; specimens stay bespoke - add Grid blueprint (6 functions incl. Position) + GridSpecimen
This commit is contained in:
Julien Calixte
450
src/App.vue
450
src/App.vue
@@ -1,446 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue"
|
||||
import { FUNCTIONS, COMPOSED_SIG, CORE_INVARIANTS } from "@/data/listBlueprint"
|
||||
import ListSpecimen from "@/components/ListSpecimen.vue"
|
||||
import FunctionReadout from "@/components/FunctionReadout.vue"
|
||||
import CompositionMap from "@/components/CompositionMap.vue"
|
||||
import StateMachine from "@/components/StateMachine.vue"
|
||||
|
||||
const TABS = [
|
||||
{ id: "full", label: "▣ FULL VIEW", full: true },
|
||||
...FUNCTIONS.map((f) => ({ id: f.id, label: f.name, full: false })),
|
||||
]
|
||||
|
||||
const activeId = ref("full")
|
||||
const activeFn = computed(() => FUNCTIONS.find((f) => f.id === activeId.value) ?? null)
|
||||
const specId = computed(() => (activeFn.value ? `FIG.${activeFn.value.fig}` : "FIG.00"))
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="sheet">
|
||||
<!-- TITLE BLOCK -->
|
||||
<div class="titleblock">
|
||||
<div class="title-main">
|
||||
<h1>
|
||||
List<span class="brk"><</span>Item<span class="brk">></span> — Functional Blueprint
|
||||
</h1>
|
||||
<div class="sub">
|
||||
A scrollable, ordered set of items · an interactive schematic of its 7 functions
|
||||
</div>
|
||||
</div>
|
||||
<div class="tb-cell">
|
||||
<div class="tb-k">Extends</div>
|
||||
<div class="tb-v">Set<Item></div>
|
||||
</div>
|
||||
<div class="tb-cell">
|
||||
<div class="tb-k">Sheet</div>
|
||||
<div class="tb-v">1 / 1</div>
|
||||
</div>
|
||||
<div class="tb-cell">
|
||||
<div class="tb-k">Composition</div>
|
||||
<div class="tb-v">+5 caps</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEGEND -->
|
||||
<div class="legend">
|
||||
<span
|
||||
><span class="sw">◈</span> <b>highlighted region</b> — the part of the list this function
|
||||
owns</span
|
||||
>
|
||||
<span><b>░</b> skeleton placeholder</span>
|
||||
<span><b>⊆</b> subset</span>
|
||||
<span><b>←</b> assignment / effect</span>
|
||||
<span><span class="warn">⚠</span> failure mode</span>
|
||||
<span><span class="perf">⚡</span> critical-performance threshold</span>
|
||||
</div>
|
||||
|
||||
<!-- VIEWER -->
|
||||
<h2 class="section">Functional viewer — select a function</h2>
|
||||
<div class="tabs">
|
||||
<button
|
||||
v-for="t in TABS"
|
||||
:key="t.id"
|
||||
class="tab"
|
||||
:class="{ active: activeId === t.id, full: t.full }"
|
||||
@click="activeId = t.id"
|
||||
>
|
||||
{{ t.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="viewer">
|
||||
<div class="panel">
|
||||
<div class="cap">
|
||||
<span>Specimen · List<Item></span><span class="id">{{ specId }}</span>
|
||||
</div>
|
||||
<div class="body"><ListSpecimen :active-id="activeId" /></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="cap"><span>Readout · Contract</span><span class="id">§ list.als</span></div>
|
||||
<div class="body">
|
||||
<FunctionReadout v-if="activeFn" :fn="activeFn" />
|
||||
<div v-else>
|
||||
<div class="flex flex-wrap items-baseline gap-2">
|
||||
<span class="text-lg font-bold tracking-wide text-secondary">FULL VIEW</span>
|
||||
</div>
|
||||
<p class="mb-4 mt-1 text-xs text-base-content/50">
|
||||
The standard composition and its seven functions. Select a function above to focus it.
|
||||
</p>
|
||||
|
||||
<div class="rblock">
|
||||
<div class="rk"><span>Composed signature</span><span class="rule" /></div>
|
||||
<div class="sig-block">
|
||||
<div class="sig-head">{{ COMPOSED_SIG.header }}</div>
|
||||
<div v-for="f in COMPOSED_SIG.fields" :key="f.name" class="sig-field">
|
||||
<span class="sig-name">{{ f.name }}</span>
|
||||
<span class="sig-type">{{ f.type }}</span>
|
||||
<span class="sig-note">-- {{ f.note }}</span>
|
||||
</div>
|
||||
<div class="sig-types">
|
||||
<div v-for="t in COMPOSED_SIG.types" :key="t">{{ t }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rblock">
|
||||
<div class="rk"><span>Core invariants</span><span class="rule" /></div>
|
||||
<ul class="tight">
|
||||
<li v-for="i in CORE_INVARIANTS" :key="i">{{ i }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rblock">
|
||||
<div class="rk"><span>Function index</span><span class="rule" /></div>
|
||||
<div class="fn-index">
|
||||
<template v-for="f in FUNCTIONS" :key="f.id">
|
||||
<button class="fi-n" @click="activeId = f.id">{{ f.name }}</button>
|
||||
<div class="fi-d">{{ f.verb }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPANION 1 -->
|
||||
<h2 class="section">Anatomy — where the 7 functions come from</h2>
|
||||
<div class="panel">
|
||||
<div class="cap">
|
||||
<span>Composition map</span><span class="id">Set ◁ List ◁ capabilities</span>
|
||||
</div>
|
||||
<div class="body svg-wrap"><CompositionMap /></div>
|
||||
</div>
|
||||
|
||||
<!-- COMPANION 2 -->
|
||||
<h2 class="section">Lifecycle — LoadState machine</h2>
|
||||
<div class="panel">
|
||||
<div class="cap">
|
||||
<span>Composed machine · List + Async + Paginated + Pullable</span
|
||||
><span class="id">loadState : LoadState</span>
|
||||
</div>
|
||||
<div class="body svg-wrap"><StateMachine /></div>
|
||||
</div>
|
||||
|
||||
<footer class="credit">
|
||||
<div>
|
||||
<span class="ck">SOURCE</span> blueprint-ontology / blueprints / list · formal model:
|
||||
<code>list.als</code>, <code>list.test.als</code>
|
||||
</div>
|
||||
<div>
|
||||
<span class="ck">READS AS</span> a <i>concept</i> (Jackson) / <i>contract</i> — declarative,
|
||||
categorical, abstract
|
||||
</div>
|
||||
<div>
|
||||
<span class="ck">SCOPE</span> standard composition:
|
||||
<code>List + Async + Paginated + Pullable + Selectable + Filterable</code>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="app">
|
||||
<header class="topbar">
|
||||
<RouterLink to="/" class="brand"><span class="mark">▣</span> blueprints</RouterLink>
|
||||
<span class="sub">UI-pattern contracts, illustrated</span>
|
||||
</header>
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sheet {
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 14px;
|
||||
padding: 12px 20px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 22px 20px 60px;
|
||||
color: var(--color-base-content);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
code {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* title block */
|
||||
.titleblock {
|
||||
border: 1.5px solid rgba(200, 226, 255, 0.3);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 130px 90px 120px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
|
||||
}
|
||||
.tb-cell {
|
||||
border-left: 1px solid rgba(200, 226, 255, 0.14);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.tb-k {
|
||||
color: #4f7099;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tb-v {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.title-main {
|
||||
padding: 12px 14px 10px;
|
||||
}
|
||||
.title-main h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.title-main h1 .brk {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.title-main .sub {
|
||||
color: #7ea6cd;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* legend */
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 20px;
|
||||
margin: 12px 0 18px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(200, 226, 255, 0.14);
|
||||
color: #7ea6cd;
|
||||
font-size: 11px;
|
||||
}
|
||||
.legend b {
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
.legend .sw {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.legend .warn {
|
||||
color: var(--color-error);
|
||||
}
|
||||
.legend .perf {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.section {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #7ea6cd;
|
||||
font-weight: 600;
|
||||
margin: 28px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.section::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba(200, 226, 255, 0.14);
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tab {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: #7ea6cd;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(200, 226, 255, 0.14);
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.06em;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.tab:hover {
|
||||
color: var(--color-base-content);
|
||||
border-color: rgba(200, 226, 255, 0.3);
|
||||
}
|
||||
.tab.active {
|
||||
color: var(--color-accent-content);
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.tab.full {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
.tab.full.active {
|
||||
color: var(--color-secondary-content);
|
||||
background: var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* viewer */
|
||||
.viewer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.viewer {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.panel {
|
||||
border: 1.5px solid rgba(200, 226, 255, 0.3);
|
||||
background: var(--color-base-200);
|
||||
position: relative;
|
||||
}
|
||||
.panel::before,
|
||||
.panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.panel::before {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
border-top: 1.5px solid var(--color-accent);
|
||||
border-left: 1.5px solid var(--color-accent);
|
||||
}
|
||||
.panel::after {
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-bottom: 1.5px solid var(--color-accent);
|
||||
border-right: 1.5px solid var(--color-accent);
|
||||
}
|
||||
.panel .cap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px 12px;
|
||||
border-bottom: 1px solid rgba(200, 226, 255, 0.14);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #7ea6cd;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.panel .cap .id {
|
||||
color: #4f7099;
|
||||
.brand {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 15px;
|
||||
}
|
||||
.panel .body {
|
||||
padding: 16px;
|
||||
}
|
||||
.svg-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* full-view readout */
|
||||
.rblock {
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
.rk {
|
||||
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;
|
||||
}
|
||||
.rk .rule {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba(200, 226, 255, 0.14);
|
||||
}
|
||||
.tight {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
list-style: disc;
|
||||
}
|
||||
.tight li {
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
.sig-block {
|
||||
background: var(--color-base-100);
|
||||
border: 1px solid rgba(200, 226, 255, 0.14);
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.sig-head {
|
||||
color: var(--color-base-content);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sig-field {
|
||||
display: grid;
|
||||
grid-template-columns: 8.5rem 8.5rem 1fr;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sig-name {
|
||||
padding-left: 1rem;
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
.sig-type {
|
||||
.brand .mark {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
.sig-note {
|
||||
color: #4f7099;
|
||||
}
|
||||
.sig-types {
|
||||
margin-top: 8px;
|
||||
color: #7ea6cd;
|
||||
}
|
||||
.fn-index {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 3px 12px;
|
||||
font-size: 12px;
|
||||
align-items: baseline;
|
||||
}
|
||||
.fi-n {
|
||||
color: var(--color-accent);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fi-n:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.fi-d {
|
||||
color: #7ea6cd;
|
||||
}
|
||||
|
||||
.credit {
|
||||
margin-top: 34px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(200, 226, 255, 0.14);
|
||||
.sub {
|
||||
color: #4f7099;
|
||||
font-size: 11px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.credit .ck {
|
||||
color: #7ea6cd;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
</style>
|
||||
|
||||
469
src/components/BlueprintViewer.vue
Normal file
469
src/components/BlueprintViewer.vue
Normal file
@@ -0,0 +1,469 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, type Component } from "vue"
|
||||
import type { Blueprint } from "@/data/blueprint"
|
||||
import FunctionReadout from "@/components/FunctionReadout.vue"
|
||||
import CompositionMap from "@/components/CompositionMap.vue"
|
||||
import StateMachine from "@/components/StateMachine.vue"
|
||||
|
||||
const props = defineProps<{ blueprint: Blueprint; specimen: Component }>()
|
||||
|
||||
const activeId = ref("full")
|
||||
// reset to the overview whenever we switch blueprints
|
||||
watch(
|
||||
() => props.blueprint.slug,
|
||||
() => {
|
||||
activeId.value = "full"
|
||||
},
|
||||
)
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ id: "full", label: "▣ FULL VIEW", full: true },
|
||||
...props.blueprint.functions.map((f) => ({ id: f.id, label: f.name, full: false })),
|
||||
])
|
||||
const activeFn = computed(
|
||||
() => props.blueprint.functions.find((f) => f.id === activeId.value) ?? null,
|
||||
)
|
||||
const specId = computed(() => (activeFn.value ? `FIG.${activeFn.value.fig}` : "FIG.00"))
|
||||
|
||||
const nameParts = computed(() => {
|
||||
const m = props.blueprint.name.match(/^([^<]*)(<.*>)?$/)
|
||||
return { base: m?.[1] ?? props.blueprint.name, generic: m?.[2] ?? "" }
|
||||
})
|
||||
const funcCount = computed(() => props.blueprint.functions.length)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sheet">
|
||||
<!-- TITLE BLOCK -->
|
||||
<div class="titleblock">
|
||||
<div class="title-main">
|
||||
<h1>
|
||||
{{ nameParts.base }}<span class="brk">{{ nameParts.generic }}</span> — Functional
|
||||
Blueprint
|
||||
</h1>
|
||||
<div class="sub">
|
||||
{{ blueprint.tagline }} · an interactive schematic of its {{ funcCount }} functions
|
||||
</div>
|
||||
</div>
|
||||
<div class="tb-cell">
|
||||
<div class="tb-k">Extends</div>
|
||||
<div class="tb-v">{{ blueprint.extendsName ?? "—" }}</div>
|
||||
</div>
|
||||
<div class="tb-cell">
|
||||
<div class="tb-k">Role</div>
|
||||
<div class="tb-v">{{ blueprint.role }}</div>
|
||||
</div>
|
||||
<div class="tb-cell">
|
||||
<div class="tb-k">Composition</div>
|
||||
<div class="tb-v">
|
||||
{{ blueprint.composesCount ? `+${blueprint.composesCount} caps` : "—" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEGEND -->
|
||||
<div class="legend">
|
||||
<span><span class="sw">◈</span> <b>highlighted region</b> — the part this function owns</span>
|
||||
<span><b>░</b> skeleton placeholder</span>
|
||||
<span><b>⊆</b> subset</span>
|
||||
<span><b>←</b> assignment / effect</span>
|
||||
<span><span class="warn">⚠</span> failure mode</span>
|
||||
<span><span class="perf">⚡</span> critical-performance threshold</span>
|
||||
</div>
|
||||
|
||||
<!-- VIEWER -->
|
||||
<h2 class="section">Functional viewer — select a function</h2>
|
||||
<div class="tabs">
|
||||
<button
|
||||
v-for="t in tabs"
|
||||
:key="t.id"
|
||||
class="tab"
|
||||
:class="{ active: activeId === t.id, full: t.full }"
|
||||
@click="activeId = t.id"
|
||||
>
|
||||
{{ t.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="viewer">
|
||||
<div class="panel">
|
||||
<div class="cap">
|
||||
<span>Specimen · {{ blueprint.name }}</span
|
||||
><span class="id">{{ specId }}</span>
|
||||
</div>
|
||||
<div class="body"><component :is="specimen" :active-id="activeId" /></div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="cap">
|
||||
<span>Readout · Contract</span><span class="id">§ {{ blueprint.slug }}.als</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<FunctionReadout v-if="activeFn" :fn="activeFn" />
|
||||
<div v-else>
|
||||
<div class="flex flex-wrap items-baseline gap-2">
|
||||
<span class="text-lg font-bold tracking-wide text-secondary">FULL VIEW</span>
|
||||
</div>
|
||||
<p class="mb-4 mt-1 text-xs text-base-content/50">
|
||||
The standard composition and its {{ funcCount }} functions. Select a function above to
|
||||
focus it.
|
||||
</p>
|
||||
|
||||
<div class="rblock">
|
||||
<div class="rk"><span>Composed signature</span><span class="rule" /></div>
|
||||
<div class="sig-block">
|
||||
<div class="sig-head">{{ blueprint.sig.header }}</div>
|
||||
<div v-for="f in blueprint.sig.fields" :key="f.name" class="sig-field">
|
||||
<span class="sig-name">{{ f.name }}</span>
|
||||
<span class="sig-type">{{ f.type }}</span>
|
||||
<span class="sig-note">-- {{ f.note }}</span>
|
||||
</div>
|
||||
<div class="sig-types">
|
||||
<div v-for="t in blueprint.sig.types" :key="t">{{ t }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rblock">
|
||||
<div class="rk"><span>Core invariants</span><span class="rule" /></div>
|
||||
<ul class="tight">
|
||||
<li v-for="i in blueprint.coreInvariants" :key="i">{{ i }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rblock">
|
||||
<div class="rk"><span>Function index</span><span class="rule" /></div>
|
||||
<div class="fn-index">
|
||||
<template v-for="f in blueprint.functions" :key="f.id">
|
||||
<button class="fi-n" @click="activeId = f.id">{{ f.name }}</button>
|
||||
<div class="fi-d">{{ f.verb }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPANION 1: composition -->
|
||||
<template v-if="blueprint.composition">
|
||||
<h2 class="section">Anatomy — where the {{ funcCount }} functions come from</h2>
|
||||
<div class="panel">
|
||||
<div class="cap">
|
||||
<span>Composition map</span><span class="id">host ◁ capabilities</span>
|
||||
</div>
|
||||
<div class="body svg-wrap"><CompositionMap :composition="blueprint.composition" /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- COMPANION 2: state machine -->
|
||||
<template v-if="blueprint.stateMachine">
|
||||
<h2 class="section">Lifecycle — state machine</h2>
|
||||
<div class="panel">
|
||||
<div class="cap">
|
||||
<span>Composed lifecycle</span><span class="id">loadState : LoadState</span>
|
||||
</div>
|
||||
<div class="body svg-wrap"><StateMachine :machine="blueprint.stateMachine" /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<footer class="credit">
|
||||
<div>
|
||||
<span class="ck">SOURCE</span> blueprint-ontology / blueprints / {{ blueprint.slug }} ·
|
||||
formal model: <code>{{ blueprint.slug }}.als</code>
|
||||
</div>
|
||||
<div>
|
||||
<span class="ck">READS AS</span> a <i>concept</i> (Jackson) / <i>contract</i> — declarative,
|
||||
categorical, abstract
|
||||
</div>
|
||||
<div>
|
||||
<span class="ck">SCOPE</span> <code>{{ blueprint.sig.header }}</code>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sheet {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 22px 20px 60px;
|
||||
color: var(--color-base-content);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
code {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* title block */
|
||||
.titleblock {
|
||||
border: 1.5px solid rgba(200, 226, 255, 0.3);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 130px 100px 120px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
|
||||
}
|
||||
.tb-cell {
|
||||
border-left: 1px solid rgba(200, 226, 255, 0.14);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.tb-k {
|
||||
color: #4f7099;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tb-v {
|
||||
margin-top: 2px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.title-main {
|
||||
padding: 12px 14px 10px;
|
||||
}
|
||||
.title-main h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.title-main h1 .brk {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.title-main .sub {
|
||||
color: #7ea6cd;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* legend */
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 20px;
|
||||
margin: 12px 0 18px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(200, 226, 255, 0.14);
|
||||
color: #7ea6cd;
|
||||
font-size: 11px;
|
||||
}
|
||||
.legend b {
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
.legend .sw {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.legend .warn {
|
||||
color: var(--color-error);
|
||||
}
|
||||
.legend .perf {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.section {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: #7ea6cd;
|
||||
font-weight: 600;
|
||||
margin: 28px 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.section::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba(200, 226, 255, 0.14);
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tab {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: #7ea6cd;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(200, 226, 255, 0.14);
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.06em;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.tab:hover {
|
||||
color: var(--color-base-content);
|
||||
border-color: rgba(200, 226, 255, 0.3);
|
||||
}
|
||||
.tab.active {
|
||||
color: var(--color-accent-content);
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.tab.full {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
.tab.full.active {
|
||||
color: var(--color-secondary-content);
|
||||
background: var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* viewer */
|
||||
.viewer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.viewer {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.panel {
|
||||
border: 1.5px solid rgba(200, 226, 255, 0.3);
|
||||
background: var(--color-base-200);
|
||||
position: relative;
|
||||
}
|
||||
.panel::before,
|
||||
.panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.panel::before {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
border-top: 1.5px solid var(--color-accent);
|
||||
border-left: 1.5px solid var(--color-accent);
|
||||
}
|
||||
.panel::after {
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-bottom: 1.5px solid var(--color-accent);
|
||||
border-right: 1.5px solid var(--color-accent);
|
||||
}
|
||||
.panel .cap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px 12px;
|
||||
border-bottom: 1px solid rgba(200, 226, 255, 0.14);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #7ea6cd;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.panel .cap .id {
|
||||
color: #4f7099;
|
||||
}
|
||||
.panel .body {
|
||||
padding: 16px;
|
||||
}
|
||||
.svg-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* full-view readout */
|
||||
.rblock {
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
.rk {
|
||||
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;
|
||||
}
|
||||
.rk .rule {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba(200, 226, 255, 0.14);
|
||||
}
|
||||
.tight {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
list-style: disc;
|
||||
}
|
||||
.tight li {
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
.sig-block {
|
||||
background: var(--color-base-100);
|
||||
border: 1px solid rgba(200, 226, 255, 0.14);
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.sig-head {
|
||||
color: var(--color-base-content);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sig-field {
|
||||
display: grid;
|
||||
grid-template-columns: 8.5rem 8.5rem 1fr;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sig-name {
|
||||
padding-left: 1rem;
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
.sig-type {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
.sig-note {
|
||||
color: #4f7099;
|
||||
}
|
||||
.sig-types {
|
||||
margin-top: 8px;
|
||||
color: #7ea6cd;
|
||||
}
|
||||
.fn-index {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 3px 12px;
|
||||
font-size: 12px;
|
||||
align-items: baseline;
|
||||
}
|
||||
.fi-n {
|
||||
color: var(--color-accent);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fi-n:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.fi-d {
|
||||
color: #7ea6cd;
|
||||
}
|
||||
|
||||
.credit {
|
||||
margin-top: 34px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(200, 226, 255, 0.14);
|
||||
color: #4f7099;
|
||||
font-size: 11px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.credit .ck {
|
||||
color: #7ea6cd;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import { COMP_CAPS, COMP_FUNCS, COMP_LINKS } from "@/data/listBlueprint"
|
||||
import type { Composition } from "@/data/blueprint"
|
||||
|
||||
const props = defineProps<{ composition: Composition }>()
|
||||
|
||||
const PAL = {
|
||||
boxFill: "#103763",
|
||||
@@ -20,27 +22,29 @@ const bh = 34
|
||||
const top = 16
|
||||
const lstep = 40
|
||||
const rstep = 52
|
||||
const H = top + COMP_CAPS.length * lstep + 16
|
||||
|
||||
const capY = (i: number) => top + i * lstep + bh / 2
|
||||
const funcY = (i: number) => top + i * rstep + bh / 2
|
||||
|
||||
const H = computed(() => top + props.composition.caps.length * lstep + 16)
|
||||
|
||||
const capIndex = computed(
|
||||
() => Object.fromEntries(COMP_CAPS.map((c, i) => [c.id, i])) as Record<string, number>,
|
||||
() =>
|
||||
Object.fromEntries(props.composition.caps.map((c, i) => [c.id, i])) as Record<string, number>,
|
||||
)
|
||||
const funcIndex = computed(
|
||||
() => Object.fromEntries(COMP_FUNCS.map((f, i) => [f, i])) as Record<string, number>,
|
||||
() => Object.fromEntries(props.composition.funcs.map((f, i) => [f, i])) as Record<string, number>,
|
||||
)
|
||||
|
||||
const leftBoxes = computed(() =>
|
||||
COMP_CAPS.map((c, i) => ({ ...c, x: lx, y: capY(i) - bh / 2, w: lw, h: bh })),
|
||||
props.composition.caps.map((c, i) => ({ ...c, x: lx, y: capY(i) - bh / 2, w: lw, h: bh })),
|
||||
)
|
||||
const rightBoxes = computed(() =>
|
||||
COMP_FUNCS.map((f, i) => ({ label: f, x: rx, y: funcY(i) - bh / 2, w: rw, h: bh })),
|
||||
props.composition.funcs.map((f, i) => ({ label: f, x: rx, y: funcY(i) - bh / 2, w: rw, h: bh })),
|
||||
)
|
||||
|
||||
const edges = computed(() =>
|
||||
COMP_LINKS.map(([a, b]) => {
|
||||
props.composition.links.map(([a, b]) => {
|
||||
const y1 = capY(capIndex.value[a])
|
||||
const y2 = funcY(funcIndex.value[b])
|
||||
const x1 = lx + lw
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { BlueprintFunction } from "@/data/listBlueprint"
|
||||
import type { BlueprintFunction } from "@/data/blueprint"
|
||||
|
||||
defineProps<{ fn: BlueprintFunction }>()
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import { SM_NODES, SM_EDGES, SM_COLORS, type SmKind, type SmNode } from "@/data/listBlueprint"
|
||||
import { SM_COLORS, type SmKind, type SmNode, type StateMachine } from "@/data/blueprint"
|
||||
|
||||
const props = defineProps<{ machine: StateMachine }>()
|
||||
|
||||
const paper = "#0d2f54"
|
||||
const nodeFill = "#103763"
|
||||
@@ -8,7 +10,9 @@ const nodeStroke = "#3d5f85"
|
||||
const ink = "#dbe9f7"
|
||||
const inkDim = "#7ea6cd"
|
||||
|
||||
const byId: Record<string, SmNode> = Object.fromEntries(SM_NODES.map((n) => [n.id, n]))
|
||||
const byId = computed<Record<string, SmNode>>(() =>
|
||||
Object.fromEntries(props.machine.nodes.map((n) => [n.id, n])),
|
||||
)
|
||||
|
||||
function center(n: SmNode): [number, number] {
|
||||
return [n.x + n.w / 2, n.y + n.h / 2]
|
||||
@@ -31,15 +35,17 @@ const markers = (Object.keys(SM_COLORS) as (keyof typeof SM_COLORS)[]).map((k) =
|
||||
color: SM_COLORS[k],
|
||||
}))
|
||||
|
||||
const loading = byId.loading
|
||||
const loadingCy = loading.y + loading.h / 2
|
||||
const initEnd = edgePoint(loading, 26, loadingCy)
|
||||
const initPath = `M31 ${loadingCy} L ${initEnd[0]} ${initEnd[1]}`
|
||||
const init = computed(() => {
|
||||
const loading = byId.value.loading
|
||||
const cy = loading.y + loading.h / 2
|
||||
const e = edgePoint(loading, 26, cy)
|
||||
return { cy, path: `M31 ${cy} L ${e[0]} ${e[1]}` }
|
||||
})
|
||||
|
||||
const edges = computed(() =>
|
||||
SM_EDGES.map((e) => {
|
||||
const a = byId[e.from]
|
||||
const b = byId[e.to]
|
||||
props.machine.edges.map((e) => {
|
||||
const a = byId.value[e.from]
|
||||
const b = byId.value[e.to]
|
||||
const [acx, acy] = center(a)
|
||||
const [bcx, bcy] = center(b)
|
||||
const [sx, sy] = edgePoint(a, bcx, bcy)
|
||||
@@ -82,7 +88,7 @@ const legendItems = (() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg viewBox="0 -6 900 330" role="img" aria-label="LoadState machine" class="schematic">
|
||||
<svg viewBox="0 -6 900 330" role="img" aria-label="State machine" class="schematic">
|
||||
<defs>
|
||||
<marker
|
||||
v-for="m in markers"
|
||||
@@ -100,9 +106,9 @@ const legendItems = (() => {
|
||||
</defs>
|
||||
|
||||
<!-- initial transition -->
|
||||
<circle cx="26" :cy="loadingCy" r="5" :fill="SM_COLORS.init" />
|
||||
<circle cx="26" :cy="init.cy" r="5" :fill="SM_COLORS.init" />
|
||||
<path
|
||||
:d="initPath"
|
||||
:d="init.path"
|
||||
fill="none"
|
||||
stroke-width="1.4"
|
||||
:stroke="SM_COLORS.init"
|
||||
@@ -118,7 +124,7 @@ const legendItems = (() => {
|
||||
</template>
|
||||
|
||||
<!-- states -->
|
||||
<g v-for="n in SM_NODES" :key="n.id">
|
||||
<g v-for="n in machine.nodes" :key="n.id">
|
||||
<rect
|
||||
:x="n.x"
|
||||
:y="n.y"
|
||||
|
||||
99
src/data/blueprint.ts
Normal file
99
src/data/blueprint.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
// Generic types shared by every blueprint's data module. A concrete blueprint
|
||||
// (list, grid, …) is a `Blueprint` object; the generic Viewer renders it, and a
|
||||
// bespoke Specimen component is paired with it in the registry (src/data/blueprints.ts).
|
||||
|
||||
export interface SigField {
|
||||
name: string
|
||||
type: string
|
||||
note: string
|
||||
}
|
||||
|
||||
export interface ComposedSig {
|
||||
header: string
|
||||
fields: SigField[]
|
||||
types: string[]
|
||||
}
|
||||
|
||||
export interface Behavior {
|
||||
sig: string
|
||||
pre: string
|
||||
eff: string
|
||||
}
|
||||
|
||||
export interface BlueprintFunction {
|
||||
id: string
|
||||
name: string
|
||||
fig: string
|
||||
caps: string[]
|
||||
verb: string
|
||||
state: [string, string][]
|
||||
behaviors: Behavior[]
|
||||
invariants: string[]
|
||||
failures: string[]
|
||||
perf: string[]
|
||||
notes: string[]
|
||||
}
|
||||
|
||||
// ── Composition map ────────────────────────────────────────────────────────
|
||||
export interface CapNode {
|
||||
id: string
|
||||
label: string
|
||||
sub: string
|
||||
core?: boolean
|
||||
}
|
||||
|
||||
export interface Composition {
|
||||
caps: CapNode[]
|
||||
funcs: string[]
|
||||
links: [string, string][]
|
||||
}
|
||||
|
||||
// ── State machine ──────────────────────────────────────────────────────────
|
||||
export interface SmNode {
|
||||
id: string
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
label: string
|
||||
}
|
||||
|
||||
export type SmKind = "succeed" | "fail" | "refresh" | "loadMore"
|
||||
|
||||
export interface SmEdge {
|
||||
from: string
|
||||
to: string
|
||||
label: string
|
||||
kind: SmKind
|
||||
off: number
|
||||
}
|
||||
|
||||
export interface StateMachine {
|
||||
nodes: SmNode[]
|
||||
edges: SmEdge[]
|
||||
}
|
||||
|
||||
export const SM_COLORS: Record<SmKind | "init", string> = {
|
||||
succeed: "#7fdca0",
|
||||
fail: "#ff8f8f",
|
||||
refresh: "#ffb84d",
|
||||
loadMore: "#8fd0ff",
|
||||
init: "#4f7099",
|
||||
}
|
||||
|
||||
// ── Blueprint ──────────────────────────────────────────────────────────────
|
||||
export type BlueprintRole = "feature" | "capability"
|
||||
|
||||
export interface Blueprint {
|
||||
slug: string
|
||||
name: string
|
||||
tagline: string
|
||||
role: BlueprintRole
|
||||
extendsName?: string
|
||||
composesCount?: number
|
||||
sig: ComposedSig
|
||||
functions: BlueprintFunction[]
|
||||
coreInvariants: string[]
|
||||
composition?: Composition
|
||||
stateMachine?: StateMachine
|
||||
}
|
||||
26
src/data/blueprints.ts
Normal file
26
src/data/blueprints.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
// Registry: the single source the router and Gallery both read from. A blueprint
|
||||
// appears in the app precisely when it is registered here — pairing its typed data
|
||||
// with its bespoke Specimen component.
|
||||
|
||||
import type { Component } from "vue"
|
||||
import type { Blueprint } from "./blueprint"
|
||||
import { list } from "./listBlueprint"
|
||||
import { grid } from "./gridBlueprint"
|
||||
import ListSpecimen from "@/specimens/ListSpecimen.vue"
|
||||
import GridSpecimen from "@/specimens/GridSpecimen.vue"
|
||||
|
||||
export interface RegistryEntry {
|
||||
blueprint: Blueprint
|
||||
specimen: Component
|
||||
}
|
||||
|
||||
export const REGISTRY: Record<string, RegistryEntry> = {
|
||||
list: { blueprint: list, specimen: ListSpecimen },
|
||||
grid: { blueprint: grid, specimen: GridSpecimen },
|
||||
}
|
||||
|
||||
export const BLUEPRINTS: Blueprint[] = Object.values(REGISTRY).map((e) => e.blueprint)
|
||||
|
||||
export function entryFor(slug: string): RegistryEntry | undefined {
|
||||
return REGISTRY[slug]
|
||||
}
|
||||
206
src/data/gridBlueprint.ts
Normal file
206
src/data/gridBlueprint.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
// The Grid blueprint, as data. Lifted verbatim from the blueprint-ontology
|
||||
// `grid` README. Note: Grid has 6 functions (incl. the Grid-specific `Position`,
|
||||
// no Sort/Act) and shares the composed LoadState machine with List.
|
||||
|
||||
import type { Blueprint } from "./blueprint"
|
||||
import { LOADSTATE_MACHINE } from "./loadStateMachine"
|
||||
|
||||
export const grid: Blueprint = {
|
||||
slug: "grid",
|
||||
name: "Grid<Item>",
|
||||
tagline: "A parameterized, scrollable set of items in a 2D cell layout.",
|
||||
role: "feature",
|
||||
extendsName: "Set<Item>",
|
||||
composesCount: 6,
|
||||
|
||||
sig: {
|
||||
header: "Grid<Item> + Async + Paginated + Pullable + Selectable + Filterable",
|
||||
fields: [
|
||||
{ name: "items", type: "seq Item", note: "row-major; loaded subset of total" },
|
||||
{ name: "columns", type: "Int", note: "number of columns (≥ 1)" },
|
||||
{ name: "totalCount", type: "Int", note: "Paginated" },
|
||||
{ name: "loadState", type: "LoadState", note: "Async · Paginated · Pullable" },
|
||||
{ name: "selectionMode", type: "SelectionMode", note: "Selectable" },
|
||||
{ name: "selected", type: "set Item", note: "Selectable" },
|
||||
{ name: "visible", type: "set Item", note: "Filterable" },
|
||||
],
|
||||
types: [
|
||||
"LoadState = Idle | Loading | Refreshing | LoadingMore | Error",
|
||||
"SelectionMode = None | Single | Multi",
|
||||
"row(i) = i / columns col(i) = i mod columns (derived, not stored)",
|
||||
],
|
||||
},
|
||||
|
||||
functions: [
|
||||
{
|
||||
id: "display",
|
||||
name: "Display",
|
||||
fig: "01",
|
||||
caps: ["Grid", "Async"],
|
||||
verb: "Render items in a 2D cell layout; handle empty, loading, and error states distinctly.",
|
||||
state: [
|
||||
["items", "seq Item"],
|
||||
["loadState", "LoadState"],
|
||||
],
|
||||
behaviors: [],
|
||||
invariants: [
|
||||
"#4 items = ∅ is a valid state (empty grid, not an error)",
|
||||
"#8 all cells have equal dimensions",
|
||||
],
|
||||
failures: [
|
||||
"empty vs error conflation — server returns 0 items with 4xx; empty state treated as error, user sees wrong UI",
|
||||
"incomplete trailing row — #items mod columns ≠ 0; trailing cells must render as empty placeholders, not crash",
|
||||
"variable-height cell break — items with differing heights; row alignment lost, grid degenerates to a non-uniform layout",
|
||||
],
|
||||
perf: ["visible rows appear within 300 ms of navigation"],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "scroll",
|
||||
name: "Scroll",
|
||||
fig: "02",
|
||||
caps: ["Grid"],
|
||||
verb: "Allow the user to navigate the full item sequence along one axis; virtualize off-screen rows.",
|
||||
state: [["items", "seq Item"]],
|
||||
behaviors: [],
|
||||
invariants: [],
|
||||
failures: [],
|
||||
perf: [
|
||||
"60 fps minimum — off-screen rows must not be rendered (row virtualization required)",
|
||||
"rows outside the render window must release their cell view references (memory)",
|
||||
],
|
||||
notes: [
|
||||
"Grid scrolls one axis; the row (not the individual cell) is the unit of virtualization.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "load",
|
||||
name: "Load",
|
||||
fig: "03",
|
||||
caps: ["Async", "Paginated", "Pullable"],
|
||||
verb: "Fetch the initial page; support refresh (restart) and pagination (append).",
|
||||
state: [
|
||||
["loadState", "LoadState"],
|
||||
["totalCount", "Int"],
|
||||
],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "refresh()",
|
||||
pre: "—",
|
||||
eff: "loadState ← refreshing, reload items from page 1, selected ← ∅",
|
||||
},
|
||||
{
|
||||
sig: "loadMore()",
|
||||
pre: "#items < totalCount, loadState = idle",
|
||||
eff: "loadState ← loadingMore, append next page to items",
|
||||
},
|
||||
],
|
||||
invariants: ["#6 #items ≤ totalCount — loaded count never exceeds the server total"],
|
||||
failures: [
|
||||
"duplicate load — loadMore() called while loadState = loadingMore; duplicate items appended, identity-uniqueness lost",
|
||||
],
|
||||
perf: ["loadMore appends new rows without layout shift or scroll-position jump"],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "position",
|
||||
name: "Position",
|
||||
fig: "04",
|
||||
caps: ["Grid"],
|
||||
verb: "Derive each item's (row, col) from its index and columns; recompute on resize.",
|
||||
state: [["columns", "Int"]],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "resize(n)",
|
||||
pre: "n ≥ 1",
|
||||
eff: "columns ← n, reflow layout; scroll position preserved by item",
|
||||
},
|
||||
],
|
||||
invariants: [
|
||||
"#1 columns ≥ 1 — at least one column at all times",
|
||||
"#7 row(i) = i / columns, col(i) = i mod columns — position deterministically derived from index",
|
||||
],
|
||||
failures: [
|
||||
"layout thrash on resize — columns changes while items are mid-scroll; visible rows reflow, scroll position jumps to a different item",
|
||||
],
|
||||
perf: ["column reflow completes within one frame (≤ 16 ms) for in-memory data"],
|
||||
notes: [
|
||||
"Derived: row(i) = i / columns (integer division), col(i) = i mod columns, rows = ⌈#items / columns⌉.",
|
||||
"Open question: adaptive column count (floor(width / minCellWidth)) is treated as a consumer concern; the model uses a fixed integer.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "filter",
|
||||
name: "Filter",
|
||||
fig: "05",
|
||||
caps: ["Filterable"],
|
||||
verb: "Restrict the visible set without mutating the underlying sequence.",
|
||||
state: [["visible", "set Item"]],
|
||||
behaviors: [{ sig: "filter(pred)", pre: "—", eff: "visible ← { x ∈ items | pred(x) }" }],
|
||||
invariants: ["#5 visible ⊆ items — filter is purely restrictive"],
|
||||
failures: [],
|
||||
perf: [],
|
||||
notes: ["Ephemeral: derives visible from items without mutating the sequence."],
|
||||
},
|
||||
{
|
||||
id: "select",
|
||||
name: "Select",
|
||||
fig: "06",
|
||||
caps: ["Selectable"],
|
||||
verb: "Track user intent over a subset of items (none / single / multi).",
|
||||
state: [
|
||||
["selectionMode", "SelectionMode"],
|
||||
["selected", "set Item"],
|
||||
],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "select(x)",
|
||||
pre: "x ∈ visible, selectionMode ≠ none",
|
||||
eff: "selected ← selected ∪ {x}",
|
||||
},
|
||||
{ sig: "deselect(x)", pre: "x ∈ selected", eff: "selected ← selected \\ {x}" },
|
||||
{ sig: "selectAll()", pre: "selectionMode = multi", eff: "selected ← visible" },
|
||||
{ sig: "clearSelection()", pre: "—", eff: "selected ← ∅" },
|
||||
],
|
||||
invariants: ["selected ⊆ items — selection is always over loaded items"],
|
||||
failures: [
|
||||
"stale selection after refresh — refresh() clears items but not selected; selected ⊄ items, invariant violated",
|
||||
],
|
||||
perf: [],
|
||||
notes: [],
|
||||
},
|
||||
],
|
||||
|
||||
coreInvariants: [
|
||||
"columns ≥ 1 — at least one column at all times",
|
||||
"members = elems(items) — set and sequence are always in sync",
|
||||
"items are identity-unique within items",
|
||||
"items = ∅ is a valid state (empty grid, not an error)",
|
||||
"all cells have equal dimensions",
|
||||
],
|
||||
|
||||
composition: {
|
||||
caps: [
|
||||
{ id: "core", label: "Grid : Set", sub: "items, columns", core: true },
|
||||
{ id: "async", label: "Async", sub: "loadState" },
|
||||
{ id: "paginated", label: "Paginated", sub: "totalCount" },
|
||||
{ id: "pullable", label: "Pullable", sub: "refresh" },
|
||||
{ id: "filterable", label: "Filterable", sub: "visible" },
|
||||
{ id: "selectable", label: "Selectable", sub: "selected" },
|
||||
],
|
||||
funcs: ["Display", "Scroll", "Load", "Position", "Filter", "Select"],
|
||||
links: [
|
||||
["core", "Display"],
|
||||
["core", "Scroll"],
|
||||
["core", "Position"],
|
||||
["async", "Display"],
|
||||
["async", "Load"],
|
||||
["paginated", "Load"],
|
||||
["pullable", "Load"],
|
||||
["filterable", "Filter"],
|
||||
["selectable", "Select"],
|
||||
],
|
||||
},
|
||||
|
||||
stateMachine: LOADSTATE_MACHINE,
|
||||
}
|
||||
@@ -1,318 +1,230 @@
|
||||
// The List blueprint, as data. Lifted verbatim from the blueprint-ontology
|
||||
// `list` README: signature, behaviors, invariants, failure modes, performance.
|
||||
// Rendered by the components under src/components as an interactive schematic.
|
||||
// The generic Viewer renders this; ListSpecimen supplies the bespoke visual.
|
||||
|
||||
export interface SampleItem {
|
||||
n: string
|
||||
s: string
|
||||
}
|
||||
import type { Blueprint } from "./blueprint"
|
||||
import { LOADSTATE_MACHINE } from "./loadStateMachine"
|
||||
|
||||
export const SAMPLE: SampleItem[] = [
|
||||
{ n: "Item A", s: "#a1f3 · ready" },
|
||||
{ n: "Item B", s: "#b2e8 · ready" },
|
||||
{ n: "Item C", s: "#c7d1 · ready" },
|
||||
{ n: "Item D", s: "#d0a4 · ready" },
|
||||
{ n: "Item E", s: "#e5b9 · ready" },
|
||||
{ n: "Item F", s: "#f3c2 · ready" },
|
||||
{ n: "Item G", s: "#01d7 · ready" },
|
||||
{ n: "Item H", s: "#12e0 · ready" },
|
||||
]
|
||||
export const list: Blueprint = {
|
||||
slug: "list",
|
||||
name: "List<Item>",
|
||||
tagline: "A scrollable, ordered set of items.",
|
||||
role: "feature",
|
||||
extendsName: "Set<Item>",
|
||||
composesCount: 5,
|
||||
|
||||
export interface SigField {
|
||||
name: string
|
||||
type: string
|
||||
note: string
|
||||
}
|
||||
sig: {
|
||||
header: "List<Item> + Async + Paginated + Pullable + Selectable + Filterable",
|
||||
fields: [
|
||||
{ name: "items", type: "seq Item", note: "List: ordered, loaded subset" },
|
||||
{ name: "loadState", type: "LoadState", note: "Async · Paginated · Pullable" },
|
||||
{ name: "totalCount", type: "Int", note: "Paginated" },
|
||||
{ name: "selectionMode", type: "SelectionMode", note: "Selectable" },
|
||||
{ name: "selected", type: "set Item", note: "Selectable" },
|
||||
{ name: "visible", type: "set Item", note: "Filterable" },
|
||||
],
|
||||
types: [
|
||||
"LoadState = Idle | Loading | Refreshing | LoadingMore | Error",
|
||||
"SelectionMode = None | Single | Multi",
|
||||
],
|
||||
},
|
||||
|
||||
export const COMPOSED_SIG: {
|
||||
header: string
|
||||
fields: SigField[]
|
||||
types: string[]
|
||||
} = {
|
||||
header: "List<Item> + Async + Paginated + Pullable + Selectable + Filterable",
|
||||
fields: [
|
||||
{ name: "items", type: "seq Item", note: "List: ordered, loaded subset" },
|
||||
{ name: "loadState", type: "LoadState", note: "Async · Paginated · Pullable" },
|
||||
{ name: "totalCount", type: "Int", note: "Paginated" },
|
||||
{ name: "selectionMode", type: "SelectionMode", note: "Selectable" },
|
||||
{ name: "selected", type: "set Item", note: "Selectable" },
|
||||
{ name: "visible", type: "set Item", note: "Filterable" },
|
||||
functions: [
|
||||
{
|
||||
id: "display",
|
||||
name: "Display",
|
||||
fig: "01",
|
||||
caps: ["List", "Async"],
|
||||
verb: "Render items in order; render skeleton placeholders during initial load; handle empty, loading, and error states distinctly.",
|
||||
state: [
|
||||
["items", "seq Item"],
|
||||
["loadState", "LoadState"],
|
||||
],
|
||||
behaviors: [],
|
||||
invariants: ["#1 items = ∅ is a valid state (empty list, not an error)"],
|
||||
failures: [
|
||||
"empty vs error conflation — network returns 0 items with 4xx; empty state treated as error, user sees wrong UI",
|
||||
"skeleton / content mismatch — skeleton row dimensions differ from real item; layout shift on Loading → Idle",
|
||||
],
|
||||
perf: [
|
||||
"skeleton placeholders render within 100 ms of navigation",
|
||||
"real items replace the skeleton within 300 ms",
|
||||
"skeleton dimensions must match real items to prevent layout shift",
|
||||
],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "scroll",
|
||||
name: "Scroll",
|
||||
fig: "02",
|
||||
caps: ["List"],
|
||||
verb: "Allow the user to navigate the full item sequence; virtualize off-screen items.",
|
||||
state: [["items", "seq Item"]],
|
||||
behaviors: [],
|
||||
invariants: ["items form a well-formed sequence (no duplicate indices) — l.items.isSeq"],
|
||||
failures: [],
|
||||
perf: [
|
||||
"60 fps minimum — off-screen items must not be rendered (virtualization required)",
|
||||
"items outside the render window must release their view references (memory)",
|
||||
],
|
||||
notes: [
|
||||
"Scroll is navigation, not a mutating behavior — it moves the render window over items, it does not change them.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "load",
|
||||
name: "Load",
|
||||
fig: "03",
|
||||
caps: ["Async", "Paginated", "Pullable"],
|
||||
verb: "Fetch the initial page; support refresh (restart) and pagination (append).",
|
||||
state: [
|
||||
["loadState", "LoadState"],
|
||||
["totalCount", "Int"],
|
||||
],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "refresh()",
|
||||
pre: "loadState = idle",
|
||||
eff: "loadState ← refreshing, reload items from page 1, selected ← ∅",
|
||||
},
|
||||
{
|
||||
sig: "loadMore()",
|
||||
pre: "#items < totalCount, loadState = idle",
|
||||
eff: "loadState ← loadingMore, append next page to items",
|
||||
},
|
||||
],
|
||||
invariants: ["#6 #items ≤ totalCount", "#7 loadState = loadingMore → #items < totalCount"],
|
||||
failures: [
|
||||
"duplicate load — loadMore() called while loadState = loadingMore; duplicate items appended, items loses uniqueness",
|
||||
"unknown total — streaming source, totalCount never known; use CursorPaginated with a hasMore sentinel instead",
|
||||
],
|
||||
perf: ["loadMore appends new items without layout shift or scroll-position jump"],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "filter",
|
||||
name: "Filter",
|
||||
fig: "04",
|
||||
caps: ["Filterable"],
|
||||
verb: "Restrict the visible set without mutating the underlying sequence.",
|
||||
state: [["visible", "set Item"]],
|
||||
behaviors: [{ sig: "filter(pred)", pre: "—", eff: "visible ← { x ∈ items | pred(x) }" }],
|
||||
invariants: ["#8 visible ⊆ items — filter never introduces new items"],
|
||||
failures: [
|
||||
"filter after reload — predicate references old item shape; visible silently empties without error",
|
||||
],
|
||||
perf: ["result updates within one frame (≤ 16 ms) for in-memory data"],
|
||||
notes: [
|
||||
"Ephemeral: derives visible from items but does not mutate the sequence. Persisting a filter is a consumer concern.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "sort",
|
||||
name: "Sort",
|
||||
fig: "05",
|
||||
caps: ["Sortable"],
|
||||
verb: "Reorder the sequence by a comparator without changing identity.",
|
||||
state: [["items", "seq Item"]],
|
||||
behaviors: [{ sig: "sort(cmp)", pre: "—", eff: "reorder items by comparator" }],
|
||||
invariants: ["identity is preserved — sorting changes order, never membership"],
|
||||
failures: [
|
||||
"sort invalidates cursor (CursorPaginated) — cursor is stale; must reset to NoCursor and reload from page 1",
|
||||
],
|
||||
perf: [],
|
||||
notes: [
|
||||
"Ephemeral alongside filter: reorders the displayed sequence without persisting the change.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "select",
|
||||
name: "Select",
|
||||
fig: "06",
|
||||
caps: ["Selectable"],
|
||||
verb: "Track user intent over a subset of items (none / single / multi).",
|
||||
state: [
|
||||
["selectionMode", "SelectionMode"],
|
||||
["selected", "set Item"],
|
||||
],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "select(x)",
|
||||
pre: "x ∈ visible, selectionMode ≠ none",
|
||||
eff: "selected ← selected ∪ {x}",
|
||||
},
|
||||
{ sig: "deselect(x)", pre: "x ∈ selected", eff: "selected ← selected \\ {x}" },
|
||||
{ sig: "selectAll()", pre: "selectionMode = multi", eff: "selected ← visible" },
|
||||
{ sig: "clearSelection()", pre: "—", eff: "selected ← ∅" },
|
||||
],
|
||||
invariants: [
|
||||
"#3 selected ⊆ items",
|
||||
"#4 selectionMode = none → selected = ∅",
|
||||
"#5 selectionMode = single → #selected ≤ 1",
|
||||
],
|
||||
failures: [
|
||||
"stale selection — refresh() clears items but not selected; selected ⊄ items, invariant #3 violated",
|
||||
],
|
||||
perf: [],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "act",
|
||||
name: "Act",
|
||||
fig: "07",
|
||||
caps: ["Swipeable", "Reorderable"],
|
||||
verb: "Expose per-item contextual actions (swipe, long-press) to the consumer.",
|
||||
state: [],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "swipeAction(x, dir)",
|
||||
pre: "x ∈ visible",
|
||||
eff: "trigger consumer-defined contextual action",
|
||||
},
|
||||
{
|
||||
sig: "reorder(from, to)",
|
||||
pre: "capability: reorderable = true",
|
||||
eff: "swap positions in items",
|
||||
},
|
||||
],
|
||||
invariants: [],
|
||||
failures: [
|
||||
"reorder on filtered view — reorder operates on visible, not items; position mismatch between displayed and stored order",
|
||||
],
|
||||
perf: [],
|
||||
notes: ["Open question: swipe direction — left | right only, or also up | down?"],
|
||||
},
|
||||
],
|
||||
types: [
|
||||
"LoadState = Idle | Loading | Refreshing | LoadingMore | Error",
|
||||
"SelectionMode = None | Single | Multi",
|
||||
|
||||
coreInvariants: [
|
||||
"items = ∅ is a valid state (empty list, not an error)",
|
||||
"items are identity-unique — no duplicates by key",
|
||||
"elems[items] = members — ordered form stays in sync with the set",
|
||||
],
|
||||
}
|
||||
|
||||
export interface Behavior {
|
||||
sig: string
|
||||
pre: string
|
||||
eff: string
|
||||
}
|
||||
|
||||
export interface BlueprintFunction {
|
||||
id: string
|
||||
name: string
|
||||
fig: string
|
||||
caps: string[]
|
||||
verb: string
|
||||
state: [string, string][]
|
||||
behaviors: Behavior[]
|
||||
invariants: string[]
|
||||
failures: string[]
|
||||
perf: string[]
|
||||
notes: string[]
|
||||
}
|
||||
|
||||
export const FUNCTIONS: BlueprintFunction[] = [
|
||||
{
|
||||
id: "display",
|
||||
name: "Display",
|
||||
fig: "01",
|
||||
caps: ["List", "Async"],
|
||||
verb: "Render items in order; render skeleton placeholders during initial load; handle empty, loading, and error states distinctly.",
|
||||
state: [
|
||||
["items", "seq Item"],
|
||||
["loadState", "LoadState"],
|
||||
composition: {
|
||||
caps: [
|
||||
{ id: "core", label: "List : Set", sub: "items : seq Item", core: true },
|
||||
{ id: "async", label: "Async", sub: "loadState" },
|
||||
{ id: "paginated", label: "Paginated", sub: "totalCount" },
|
||||
{ id: "pullable", label: "Pullable", sub: "refresh" },
|
||||
{ id: "filterable", label: "Filterable", sub: "visible" },
|
||||
{ id: "selectable", label: "Selectable", sub: "selected" },
|
||||
{ id: "sortable", label: "Sortable", sub: "cmp" },
|
||||
{ id: "swipeable", label: "Swipeable", sub: "+ Reorderable" },
|
||||
],
|
||||
behaviors: [],
|
||||
invariants: ["#1 items = ∅ is a valid state (empty list, not an error)"],
|
||||
failures: [
|
||||
"empty vs error conflation — network returns 0 items with 4xx; empty state treated as error, user sees wrong UI",
|
||||
"skeleton / content mismatch — skeleton row dimensions differ from real item; layout shift on Loading → Idle",
|
||||
],
|
||||
perf: [
|
||||
"skeleton placeholders render within 100 ms of navigation",
|
||||
"real items replace the skeleton within 300 ms",
|
||||
"skeleton dimensions must match real items to prevent layout shift",
|
||||
],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "scroll",
|
||||
name: "Scroll",
|
||||
fig: "02",
|
||||
caps: ["List"],
|
||||
verb: "Allow the user to navigate the full item sequence; virtualize off-screen items.",
|
||||
state: [["items", "seq Item"]],
|
||||
behaviors: [],
|
||||
invariants: ["items form a well-formed sequence (no duplicate indices) — l.items.isSeq"],
|
||||
failures: [],
|
||||
perf: [
|
||||
"60 fps minimum — off-screen items must not be rendered (virtualization required)",
|
||||
"items outside the render window must release their view references (memory)",
|
||||
],
|
||||
notes: [
|
||||
"Scroll is navigation, not a mutating behavior — it moves the render window over items, it does not change them.",
|
||||
funcs: ["Display", "Scroll", "Load", "Filter", "Sort", "Select", "Act"],
|
||||
links: [
|
||||
["core", "Display"],
|
||||
["core", "Scroll"],
|
||||
["async", "Display"],
|
||||
["async", "Load"],
|
||||
["paginated", "Load"],
|
||||
["pullable", "Load"],
|
||||
["filterable", "Filter"],
|
||||
["selectable", "Select"],
|
||||
["sortable", "Sort"],
|
||||
["swipeable", "Act"],
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "load",
|
||||
name: "Load",
|
||||
fig: "03",
|
||||
caps: ["Async", "Paginated", "Pullable"],
|
||||
verb: "Fetch the initial page; support refresh (restart) and pagination (append).",
|
||||
state: [
|
||||
["loadState", "LoadState"],
|
||||
["totalCount", "Int"],
|
||||
],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "refresh()",
|
||||
pre: "loadState = idle",
|
||||
eff: "loadState ← refreshing, reload items from page 1, selected ← ∅",
|
||||
},
|
||||
{
|
||||
sig: "loadMore()",
|
||||
pre: "#items < totalCount, loadState = idle",
|
||||
eff: "loadState ← loadingMore, append next page to items",
|
||||
},
|
||||
],
|
||||
invariants: ["#6 #items ≤ totalCount", "#7 loadState = loadingMore → #items < totalCount"],
|
||||
failures: [
|
||||
"duplicate load — loadMore() called while loadState = loadingMore; duplicate items appended, items loses uniqueness",
|
||||
"unknown total — streaming source, totalCount never known; use CursorPaginated with a hasMore sentinel instead",
|
||||
],
|
||||
perf: ["loadMore appends new items without layout shift or scroll-position jump"],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "filter",
|
||||
name: "Filter",
|
||||
fig: "04",
|
||||
caps: ["Filterable"],
|
||||
verb: "Restrict the visible set without mutating the underlying sequence.",
|
||||
state: [["visible", "set Item"]],
|
||||
behaviors: [{ sig: "filter(pred)", pre: "—", eff: "visible ← { x ∈ items | pred(x) }" }],
|
||||
invariants: ["#8 visible ⊆ items — filter never introduces new items"],
|
||||
failures: [
|
||||
"filter after reload — predicate references old item shape; visible silently empties without error",
|
||||
],
|
||||
perf: ["result updates within one frame (≤ 16 ms) for in-memory data"],
|
||||
notes: [
|
||||
"Ephemeral: derives visible from items but does not mutate the sequence. Persisting a filter is a consumer concern.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "sort",
|
||||
name: "Sort",
|
||||
fig: "05",
|
||||
caps: ["Sortable"],
|
||||
verb: "Reorder the sequence by a comparator without changing identity.",
|
||||
state: [["items", "seq Item"]],
|
||||
behaviors: [{ sig: "sort(cmp)", pre: "—", eff: "reorder items by comparator" }],
|
||||
invariants: ["identity is preserved — sorting changes order, never membership"],
|
||||
failures: [
|
||||
"sort invalidates cursor (CursorPaginated) — cursor is stale; must reset to NoCursor and reload from page 1",
|
||||
],
|
||||
perf: [],
|
||||
notes: [
|
||||
"Ephemeral alongside filter: reorders the displayed sequence without persisting the change.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "select",
|
||||
name: "Select",
|
||||
fig: "06",
|
||||
caps: ["Selectable"],
|
||||
verb: "Track user intent over a subset of items (none / single / multi).",
|
||||
state: [
|
||||
["selectionMode", "SelectionMode"],
|
||||
["selected", "set Item"],
|
||||
],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "select(x)",
|
||||
pre: "x ∈ visible, selectionMode ≠ none",
|
||||
eff: "selected ← selected ∪ {x}",
|
||||
},
|
||||
{ sig: "deselect(x)", pre: "x ∈ selected", eff: "selected ← selected \\ {x}" },
|
||||
{ sig: "selectAll()", pre: "selectionMode = multi", eff: "selected ← visible" },
|
||||
{ sig: "clearSelection()", pre: "—", eff: "selected ← ∅" },
|
||||
],
|
||||
invariants: [
|
||||
"#3 selected ⊆ items",
|
||||
"#4 selectionMode = none → selected = ∅",
|
||||
"#5 selectionMode = single → #selected ≤ 1",
|
||||
],
|
||||
failures: [
|
||||
"stale selection — refresh() clears items but not selected; selected ⊄ items, invariant #3 violated",
|
||||
],
|
||||
perf: [],
|
||||
notes: [],
|
||||
},
|
||||
{
|
||||
id: "act",
|
||||
name: "Act",
|
||||
fig: "07",
|
||||
caps: ["Swipeable", "Reorderable"],
|
||||
verb: "Expose per-item contextual actions (swipe, long-press) to the consumer.",
|
||||
state: [],
|
||||
behaviors: [
|
||||
{
|
||||
sig: "swipeAction(x, dir)",
|
||||
pre: "x ∈ visible",
|
||||
eff: "trigger consumer-defined contextual action",
|
||||
},
|
||||
{
|
||||
sig: "reorder(from, to)",
|
||||
pre: "capability: reorderable = true",
|
||||
eff: "swap positions in items",
|
||||
},
|
||||
],
|
||||
invariants: [],
|
||||
failures: [
|
||||
"reorder on filtered view — reorder operates on visible, not items; position mismatch between displayed and stored order",
|
||||
],
|
||||
perf: [],
|
||||
notes: ["Open question: swipe direction — left | right only, or also up | down?"],
|
||||
},
|
||||
]
|
||||
|
||||
export const CORE_INVARIANTS: string[] = [
|
||||
"items = ∅ is a valid state (empty list, not an error)",
|
||||
"items are identity-unique — no duplicates by key",
|
||||
"elems[items] = members — ordered form stays in sync with the set",
|
||||
]
|
||||
|
||||
// ── Composition map model ──────────────────────────────────────────────────
|
||||
export interface CapNode {
|
||||
id: string
|
||||
label: string
|
||||
sub: string
|
||||
core?: boolean
|
||||
}
|
||||
|
||||
export const COMP_CAPS: CapNode[] = [
|
||||
{ id: "core", label: "List : Set", sub: "items : seq Item", core: true },
|
||||
{ id: "async", label: "Async", sub: "loadState" },
|
||||
{ id: "paginated", label: "Paginated", sub: "totalCount" },
|
||||
{ id: "pullable", label: "Pullable", sub: "refresh" },
|
||||
{ id: "filterable", label: "Filterable", sub: "visible" },
|
||||
{ id: "selectable", label: "Selectable", sub: "selected" },
|
||||
{ id: "sortable", label: "Sortable", sub: "cmp" },
|
||||
{ id: "swipeable", label: "Swipeable", sub: "+ Reorderable" },
|
||||
]
|
||||
|
||||
export const COMP_FUNCS: string[] = ["Display", "Scroll", "Load", "Filter", "Sort", "Select", "Act"]
|
||||
|
||||
export const COMP_LINKS: [string, string][] = [
|
||||
["core", "Display"],
|
||||
["core", "Scroll"],
|
||||
["async", "Display"],
|
||||
["async", "Load"],
|
||||
["paginated", "Load"],
|
||||
["pullable", "Load"],
|
||||
["filterable", "Filter"],
|
||||
["selectable", "Select"],
|
||||
["sortable", "Sort"],
|
||||
["swipeable", "Act"],
|
||||
]
|
||||
|
||||
// ── LoadState machine model ────────────────────────────────────────────────
|
||||
export interface SmNode {
|
||||
id: string
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
label: string
|
||||
}
|
||||
|
||||
export type SmKind = "succeed" | "fail" | "refresh" | "loadMore"
|
||||
|
||||
export interface SmEdge {
|
||||
from: string
|
||||
to: string
|
||||
label: string
|
||||
kind: SmKind
|
||||
off: number
|
||||
}
|
||||
|
||||
export const SM_NODES: SmNode[] = [
|
||||
{ id: "loading", x: 70, y: 150, w: 110, h: 40, label: "Loading" },
|
||||
{ id: "idle", x: 300, y: 150, w: 96, h: 40, label: "Idle" },
|
||||
{ id: "refreshing", x: 520, y: 56, w: 130, h: 40, label: "Refreshing" },
|
||||
{ id: "loadingmore", x: 520, y: 250, w: 140, h: 40, label: "LoadingMore" },
|
||||
{ id: "error", x: 770, y: 150, w: 96, h: 40, label: "Error" },
|
||||
]
|
||||
|
||||
export const SM_EDGES: SmEdge[] = [
|
||||
{ from: "loading", to: "idle", label: "succeed()", kind: "succeed", off: 0 },
|
||||
{ from: "loading", to: "error", label: "fail()", kind: "fail", off: 150 },
|
||||
{ from: "idle", to: "refreshing", label: "refresh()", kind: "refresh", off: -16 },
|
||||
{ from: "refreshing", to: "idle", label: "succeed()", kind: "succeed", off: -16 },
|
||||
{ from: "idle", to: "loadingmore", label: "loadMore()", kind: "loadMore", off: 16 },
|
||||
{ from: "loadingmore", to: "idle", label: "succeed()", kind: "succeed", off: 16 },
|
||||
{ from: "refreshing", to: "error", label: "fail()", kind: "fail", off: 14 },
|
||||
{ from: "loadingmore", to: "error", label: "fail()", kind: "fail", off: -14 },
|
||||
{ from: "error", to: "refreshing", label: "refresh()", kind: "refresh", off: 70 },
|
||||
]
|
||||
|
||||
export const SM_COLORS: Record<SmKind | "init", string> = {
|
||||
succeed: "#7fdca0",
|
||||
fail: "#ff8f8f",
|
||||
refresh: "#ffb84d",
|
||||
loadMore: "#8fd0ff",
|
||||
init: "#4f7099",
|
||||
stateMachine: LOADSTATE_MACHINE,
|
||||
}
|
||||
|
||||
25
src/data/loadStateMachine.ts
Normal file
25
src/data/loadStateMachine.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import type { StateMachine } from "./blueprint"
|
||||
|
||||
// The composed LoadState lifecycle: Idle / Loading / Refreshing / LoadingMore / Error.
|
||||
// Shared verbatim by every blueprint that composes Async + Paginated + Pullable
|
||||
// (List, Grid, Feed, Table, …). Node coordinates are hand-placed for a clean layout.
|
||||
export const LOADSTATE_MACHINE: StateMachine = {
|
||||
nodes: [
|
||||
{ id: "loading", x: 70, y: 150, w: 110, h: 40, label: "Loading" },
|
||||
{ id: "idle", x: 300, y: 150, w: 96, h: 40, label: "Idle" },
|
||||
{ id: "refreshing", x: 520, y: 56, w: 130, h: 40, label: "Refreshing" },
|
||||
{ id: "loadingmore", x: 520, y: 250, w: 140, h: 40, label: "LoadingMore" },
|
||||
{ id: "error", x: 770, y: 150, w: 96, h: 40, label: "Error" },
|
||||
],
|
||||
edges: [
|
||||
{ from: "loading", to: "idle", label: "succeed()", kind: "succeed", off: 0 },
|
||||
{ from: "loading", to: "error", label: "fail()", kind: "fail", off: 150 },
|
||||
{ from: "idle", to: "refreshing", label: "refresh()", kind: "refresh", off: -16 },
|
||||
{ from: "refreshing", to: "idle", label: "succeed()", kind: "succeed", off: -16 },
|
||||
{ from: "idle", to: "loadingmore", label: "loadMore()", kind: "loadMore", off: 16 },
|
||||
{ from: "loadingmore", to: "idle", label: "succeed()", kind: "succeed", off: 16 },
|
||||
{ from: "refreshing", to: "error", label: "fail()", kind: "fail", off: 14 },
|
||||
{ from: "loadingmore", to: "error", label: "fail()", kind: "fail", off: -14 },
|
||||
{ from: "error", to: "refreshing", label: "refresh()", kind: "refresh", off: 70 },
|
||||
],
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createApp } from "vue"
|
||||
import "./style.css"
|
||||
import App from "./App.vue"
|
||||
import { router } from "./router"
|
||||
|
||||
createApp(App).mount("#app")
|
||||
createApp(App).use(router).mount("#app")
|
||||
|
||||
17
src/router.ts
Normal file
17
src/router.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router"
|
||||
import GalleryView from "@/views/GalleryView.vue"
|
||||
import BlueprintView from "@/views/BlueprintView.vue"
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{ path: "/", name: "gallery", component: GalleryView },
|
||||
{ path: "/b/:slug", name: "blueprint", component: BlueprintView, props: true },
|
||||
{ path: "/:pathMatch(.*)*", redirect: "/" },
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
scrollBehavior() {
|
||||
return { top: 0 }
|
||||
},
|
||||
})
|
||||
501
src/specimens/GridSpecimen.vue
Normal file
501
src/specimens/GridSpecimen.vue
Normal file
@@ -0,0 +1,501 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
|
||||
const props = defineProps<{ activeId: string }>()
|
||||
|
||||
const LABELS = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
|
||||
|
||||
interface Tile {
|
||||
key: string
|
||||
label?: string
|
||||
skeleton?: boolean
|
||||
dim?: boolean
|
||||
sel?: boolean
|
||||
ghost?: boolean
|
||||
check?: boolean
|
||||
pos?: string
|
||||
hlTag?: string
|
||||
}
|
||||
interface Toolbar {
|
||||
search?: { q?: string; hl?: boolean }
|
||||
select?: { meta: string; hl?: boolean }
|
||||
badge?: string
|
||||
badgeNote?: string
|
||||
columnsBadge?: string
|
||||
}
|
||||
interface Frame {
|
||||
kind: "grid" | "display"
|
||||
note?: string
|
||||
toolbar?: Toolbar
|
||||
columns: number
|
||||
tiles: Tile[]
|
||||
scrollbar?: { hl?: boolean; top: number; h: number }
|
||||
footer?: { text: string; hl?: boolean }
|
||||
gridTag?: string
|
||||
}
|
||||
|
||||
function tile(i: number, extra: Partial<Tile> = {}): Tile {
|
||||
return { key: `t${i}`, label: `Item ${LABELS[i]}`, ...extra }
|
||||
}
|
||||
function skel(i: number): Tile {
|
||||
return { key: `s${i}`, skeleton: true }
|
||||
}
|
||||
function range(a: number, b: number) {
|
||||
const out: number[] = []
|
||||
for (let i = a; i <= b; i++) out.push(i)
|
||||
return out
|
||||
}
|
||||
|
||||
const COLS = 3
|
||||
|
||||
const frame = computed<Frame>(() => {
|
||||
switch (props.activeId) {
|
||||
case "full":
|
||||
return {
|
||||
kind: "grid",
|
||||
columns: COLS,
|
||||
toolbar: { search: { hl: true }, select: { meta: "multi", hl: true } },
|
||||
tiles: [
|
||||
tile(0, { hlTag: "◈ DISPLAY" }),
|
||||
tile(1),
|
||||
tile(2),
|
||||
tile(3),
|
||||
tile(4),
|
||||
tile(5, { pos: "r1·c2", hlTag: "◈ POSITION" }),
|
||||
],
|
||||
scrollbar: { hl: true, top: 10, h: 46 },
|
||||
footer: { text: "↻ loadMore ▾ · items 6 / 48", hl: true },
|
||||
}
|
||||
case "display":
|
||||
return {
|
||||
kind: "display",
|
||||
columns: COLS,
|
||||
note: "Distinct states, cells of equal dimensions. Skeleton cells mirror real cell size so the transition to Idle causes no layout shift.",
|
||||
tiles: [],
|
||||
}
|
||||
case "scroll":
|
||||
return {
|
||||
kind: "grid",
|
||||
columns: COLS,
|
||||
note: "▓ render window — only these rows exist in the DOM. The row (not the cell) is the unit of virtualization; faded rows release their cell view references.",
|
||||
tiles: [
|
||||
...range(0, 5).map((i) => tile(i)),
|
||||
...range(6, 8).map((i) => tile(i, { ghost: true })),
|
||||
],
|
||||
scrollbar: { hl: true, top: 28, h: 44 },
|
||||
}
|
||||
case "load":
|
||||
return {
|
||||
kind: "grid",
|
||||
columns: COLS,
|
||||
toolbar: { badge: "loadState = LoadingMore", badgeNote: "appending page 2…" },
|
||||
tiles: [...range(0, 5).map((i) => tile(i)), skel(6), skel(7), skel(8)],
|
||||
footer: { text: "↻ loadMore ▾ · items 6 / 48", hl: true },
|
||||
}
|
||||
case "position":
|
||||
return {
|
||||
kind: "grid",
|
||||
columns: COLS,
|
||||
toolbar: { columnsBadge: "columns = 3" },
|
||||
note: "row(i) = i / columns · col(i) = i mod columns — each cell's (row, col) is derived from its index; resize(n) reflows.",
|
||||
tiles: range(0, 8).map((i) => tile(i, { pos: `r${Math.floor(i / COLS)}·c${i % COLS}` })),
|
||||
gridTag: "◈ POSITION",
|
||||
}
|
||||
case "filter":
|
||||
return {
|
||||
kind: "grid",
|
||||
columns: COLS,
|
||||
toolbar: { search: { q: '"b"', hl: true } },
|
||||
note: 'visible = { x ∈ items | name matches "b" } · the underlying items sequence is untouched.',
|
||||
tiles: [
|
||||
tile(0, { dim: true }),
|
||||
tile(1, { hlTag: "◈ visible" }),
|
||||
tile(2, { dim: true }),
|
||||
tile(3, { dim: true }),
|
||||
tile(4, { dim: true }),
|
||||
tile(5, { dim: true }),
|
||||
],
|
||||
}
|
||||
case "select":
|
||||
return {
|
||||
kind: "grid",
|
||||
columns: COLS,
|
||||
toolbar: { select: { meta: "MULTI · 2 selected", hl: true } },
|
||||
note: "selectionMode = Multi · selected = { Item B, Item E } ⊆ visible",
|
||||
tiles: [
|
||||
tile(0, { check: false }),
|
||||
tile(1, { check: true, sel: true }),
|
||||
tile(2, { check: false }),
|
||||
tile(3, { check: false }),
|
||||
tile(4, { check: true, sel: true }),
|
||||
tile(5, { check: false }),
|
||||
],
|
||||
}
|
||||
default:
|
||||
return { kind: "grid", columns: COLS, tiles: [] }
|
||||
}
|
||||
})
|
||||
|
||||
const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.columns}, 1fr)` }))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="specimen">
|
||||
<!-- Display: distinct states -->
|
||||
<template v-if="frame.kind === 'display'">
|
||||
<p class="note">{{ frame.note }}</p>
|
||||
<div class="display-grid">
|
||||
<div class="mini">
|
||||
<div class="mh">Empty · items = ∅</div>
|
||||
<div class="mb">
|
||||
<div class="empty-state">
|
||||
<div class="big">∅</div>
|
||||
no items — valid state
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini">
|
||||
<div class="mh">Loading</div>
|
||||
<div class="mb">
|
||||
<div class="tilegrid mini-tg">
|
||||
<div v-for="i in 4" :key="i" class="tile skeleton"><div class="tskel" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini">
|
||||
<div class="mh">Error</div>
|
||||
<div class="mb">
|
||||
<div class="error-state">⚠ failed to load<br /><span class="retry">↻ retry</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini">
|
||||
<div class="mh">Idle</div>
|
||||
<div class="mb">
|
||||
<div class="tilegrid mini-tg">
|
||||
<div v-for="i in 4" :key="i" class="tile">
|
||||
<div class="tlabel">Item {{ LABELS[i - 1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Grid-shaped frames -->
|
||||
<template v-else>
|
||||
<p v-if="frame.note" class="note">{{ frame.note }}</p>
|
||||
|
||||
<div v-if="frame.toolbar" class="spec-toolbar">
|
||||
<div v-if="frame.toolbar.badge" class="badge">{{ frame.toolbar.badge }}</div>
|
||||
<span v-if="frame.toolbar.badgeNote" class="badge-note">{{ frame.toolbar.badgeNote }}</span>
|
||||
<div v-if="frame.toolbar.columnsBadge" class="badge">{{ frame.toolbar.columnsBadge }}</div>
|
||||
<div
|
||||
v-if="frame.toolbar.search"
|
||||
class="search"
|
||||
:class="{ hl: frame.toolbar.search.hl }"
|
||||
:data-tag="frame.toolbar.search.hl ? '◈ FILTER' : undefined"
|
||||
>
|
||||
⌕
|
||||
<span v-if="frame.toolbar.search.q" class="q">{{ frame.toolbar.search.q }}</span>
|
||||
<span v-else class="ph">search…</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="frame.toolbar.select"
|
||||
class="ctl"
|
||||
:class="frame.toolbar.select.hl ? ['hl', 'tag-r'] : []"
|
||||
:data-tag="frame.toolbar.select.hl ? '◈ SELECT' : undefined"
|
||||
>
|
||||
☰ {{ frame.toolbar.select.meta }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gridbox" :class="frame.gridTag ? ['hl', 'tag-b'] : []" :data-tag="frame.gridTag">
|
||||
<div class="gridwrap">
|
||||
<div class="tilegrid" :style="gridStyle">
|
||||
<div
|
||||
v-for="t in frame.tiles"
|
||||
:key="t.key"
|
||||
class="tile"
|
||||
:class="{
|
||||
dim: t.dim,
|
||||
sel: t.sel,
|
||||
ghost: t.ghost,
|
||||
skeleton: t.skeleton,
|
||||
hl: t.hlTag,
|
||||
}"
|
||||
:data-tag="t.hlTag"
|
||||
>
|
||||
<span v-if="t.check !== undefined" class="chk" :class="{ on: t.check }">{{
|
||||
t.check ? "✓" : ""
|
||||
}}</span>
|
||||
<div v-if="t.skeleton" class="tskel" />
|
||||
<template v-else>
|
||||
<div class="tlabel">{{ t.label }}</div>
|
||||
<div v-if="t.pos" class="tpos">{{ t.pos }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="frame.scrollbar"
|
||||
class="scrollbar"
|
||||
:class="frame.scrollbar.hl ? ['hl', 'tag-r'] : []"
|
||||
:data-tag="frame.scrollbar.hl ? '◈ SCROLL' : undefined"
|
||||
>
|
||||
<div
|
||||
class="thumb"
|
||||
:style="{ top: frame.scrollbar.top + '%', height: frame.scrollbar.h + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="frame.footer"
|
||||
class="footer-load"
|
||||
:class="frame.footer.hl ? ['hl', 'tag-b'] : []"
|
||||
:data-tag="frame.footer.hl ? '◈ LOAD' : undefined"
|
||||
>
|
||||
{{ frame.footer.text }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.specimen {
|
||||
--ink: var(--color-base-content);
|
||||
--ink-faint: #4f7099;
|
||||
--amber: var(--color-accent);
|
||||
--amber-dim: color-mix(in srgb, var(--color-accent) 14%, transparent);
|
||||
--cyan: var(--color-secondary);
|
||||
--red: var(--color-error);
|
||||
--paper: var(--color-base-100);
|
||||
--line: rgba(200, 226, 255, 0.14);
|
||||
--line-strong: rgba(200, 226, 255, 0.3);
|
||||
font-size: 13px;
|
||||
}
|
||||
.note {
|
||||
color: var(--ink-faint);
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.spec-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
color: color-mix(in srgb, var(--ink) 60%, transparent);
|
||||
font-size: 12px;
|
||||
}
|
||||
.badge-note {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.search {
|
||||
flex: 1;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--paper);
|
||||
padding: 5px 9px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.ph {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.q {
|
||||
color: var(--amber);
|
||||
}
|
||||
.ctl {
|
||||
border: 1px solid var(--line);
|
||||
padding: 5px 9px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge {
|
||||
border: 1px solid var(--line-strong);
|
||||
color: var(--cyan);
|
||||
padding: 1px 7px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.gridbox {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--paper);
|
||||
position: relative;
|
||||
}
|
||||
.gridwrap {
|
||||
display: flex;
|
||||
}
|
||||
.tilegrid {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
.tile {
|
||||
border: 1px dashed var(--line-strong);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
gap: 4px;
|
||||
}
|
||||
.tlabel {
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
}
|
||||
.tpos {
|
||||
color: var(--cyan);
|
||||
font-size: 10px;
|
||||
}
|
||||
.chk {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid var(--ink-faint);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
color: var(--amber);
|
||||
}
|
||||
.chk.on {
|
||||
border-color: var(--amber);
|
||||
background: var(--amber-dim);
|
||||
}
|
||||
.tile.dim {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.tile.dim .tlabel {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.tile.sel {
|
||||
background: var(--amber-dim);
|
||||
border-color: var(--amber);
|
||||
border-style: solid;
|
||||
}
|
||||
.tile.ghost {
|
||||
opacity: 0.32;
|
||||
background: rgba(143, 208, 255, 0.05);
|
||||
}
|
||||
.tile.skeleton {
|
||||
border-style: solid;
|
||||
}
|
||||
.tskel {
|
||||
width: 60%;
|
||||
height: 10px;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--ink-faint),
|
||||
var(--ink-faint) 6px,
|
||||
transparent 6px,
|
||||
transparent 12px
|
||||
);
|
||||
opacity: 0.5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.scrollbar {
|
||||
width: 8px;
|
||||
flex: none;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-left: 1px solid var(--line);
|
||||
position: relative;
|
||||
}
|
||||
.scrollbar .thumb {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
background: var(--ink-faint);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.footer-load {
|
||||
padding: 8px 11px;
|
||||
border-top: 1px solid var(--line);
|
||||
text-align: center;
|
||||
color: var(--cyan);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.display-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.mini {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--paper);
|
||||
}
|
||||
.mini .mh {
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
color: color-mix(in srgb, var(--ink) 60%, transparent);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.mini .mb {
|
||||
padding: 8px;
|
||||
}
|
||||
.mini-tg {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
.mini-tg .tile {
|
||||
aspect-ratio: 3 / 2;
|
||||
}
|
||||
.mini-tg .tlabel {
|
||||
font-size: 11px;
|
||||
}
|
||||
.empty-state {
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.empty-state .big {
|
||||
font-size: 22px;
|
||||
color: color-mix(in srgb, var(--ink) 60%, transparent);
|
||||
}
|
||||
.error-state {
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
color: var(--red);
|
||||
line-height: 1.9;
|
||||
}
|
||||
.error-state .retry {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
/* callouts */
|
||||
.hl {
|
||||
outline: 1.5px dashed var(--amber);
|
||||
outline-offset: 3px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.hl[data-tag]::after {
|
||||
content: attr(data-tag);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 8px;
|
||||
background: var(--paper);
|
||||
color: var(--amber);
|
||||
font-size: 9px;
|
||||
padding: 0 5px;
|
||||
border: 1px solid var(--amber);
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.5;
|
||||
z-index: 3;
|
||||
}
|
||||
.hl.tag-r[data-tag]::after {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
.hl.tag-b[data-tag]::after {
|
||||
top: auto;
|
||||
bottom: -10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import { SAMPLE, type SampleItem } from "@/data/listBlueprint"
|
||||
|
||||
// Bespoke sample data for the List specimen (visual only).
|
||||
interface SampleItem {
|
||||
n: string
|
||||
s: string
|
||||
}
|
||||
const SAMPLE: SampleItem[] = [
|
||||
{ n: "Item A", s: "#a1f3 · ready" },
|
||||
{ n: "Item B", s: "#b2e8 · ready" },
|
||||
{ n: "Item C", s: "#c7d1 · ready" },
|
||||
{ n: "Item D", s: "#d0a4 · ready" },
|
||||
{ n: "Item E", s: "#e5b9 · ready" },
|
||||
{ n: "Item F", s: "#f3c2 · ready" },
|
||||
{ n: "Item G", s: "#01d7 · ready" },
|
||||
{ n: "Item H", s: "#12e0 · ready" },
|
||||
]
|
||||
|
||||
const props = defineProps<{ activeId: string }>()
|
||||
|
||||
40
src/views/BlueprintView.vue
Normal file
40
src/views/BlueprintView.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue"
|
||||
import { entryFor } from "@/data/blueprints"
|
||||
import BlueprintViewer from "@/components/BlueprintViewer.vue"
|
||||
|
||||
const props = defineProps<{ slug: string }>()
|
||||
const entry = computed(() => entryFor(props.slug))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BlueprintViewer v-if="entry" :blueprint="entry.blueprint" :specimen="entry.specimen" />
|
||||
<div v-else class="notfound">
|
||||
<p>
|
||||
No blueprint <code>{{ slug }}</code> is illustrated yet.
|
||||
</p>
|
||||
<RouterLink to="/" class="back">▸ back to the gallery</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notfound {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 20px;
|
||||
color: #9db8d2;
|
||||
text-align: center;
|
||||
}
|
||||
.notfound code {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.back {
|
||||
display: inline-block;
|
||||
margin-top: 14px;
|
||||
color: var(--color-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
124
src/views/GalleryView.vue
Normal file
124
src/views/GalleryView.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { BLUEPRINTS } from "@/data/blueprints"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="gallery">
|
||||
<h1 class="g-title">Blueprint gallery</h1>
|
||||
<p class="g-sub">
|
||||
Interactive illustrations of UI-pattern blueprints from the
|
||||
<code>blueprint-ontology</code>. {{ BLUEPRINTS.length }} illustrated so far — more to come.
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
<RouterLink v-for="b in BLUEPRINTS" :key="b.slug" :to="`/b/${b.slug}`" class="card">
|
||||
<div class="card-top">
|
||||
<span class="c-name">{{ b.name }}</span>
|
||||
<span class="c-role" :class="b.role">{{ b.role }}</span>
|
||||
</div>
|
||||
<p class="c-tag">{{ b.tagline }}</p>
|
||||
<div class="c-meta">
|
||||
<span v-if="b.extendsName">extends {{ b.extendsName }}</span>
|
||||
<span>{{ b.functions.length }} functions</span>
|
||||
</div>
|
||||
<div class="c-open">open ▸</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.gallery {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 20px 60px;
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
.g-title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.g-sub {
|
||||
color: #7ea6cd;
|
||||
font-size: 12px;
|
||||
margin: 6px 0 24px;
|
||||
}
|
||||
.g-sub code {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: 1.5px solid rgba(200, 226, 255, 0.3);
|
||||
background: var(--color-base-200);
|
||||
padding: 14px 16px 12px;
|
||||
position: relative;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top: 1.5px solid var(--color-accent);
|
||||
border-left: 1.5px solid var(--color-accent);
|
||||
}
|
||||
.card:hover {
|
||||
border-color: var(--color-secondary);
|
||||
background: var(--color-base-300);
|
||||
}
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
.c-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.c-role {
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
.c-role.feature {
|
||||
color: var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
.c-role.capability {
|
||||
color: #7ea6cd;
|
||||
border-color: #4f7099;
|
||||
}
|
||||
.c-tag {
|
||||
color: #9db8d2;
|
||||
font-size: 12px;
|
||||
margin: 8px 0 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.c-meta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
color: #4f7099;
|
||||
font-size: 11px;
|
||||
}
|
||||
.c-open {
|
||||
margin-top: 12px;
|
||||
color: var(--color-secondary);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user