@bemaestro/views 0.0.2

package/src/primitives/RichTextField.vue

@@ -0,0 +1,485 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Image from '@tiptap/extension-image'
+import { Placeholder } from '@tiptap/extension-placeholder'
+import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'
+import type { JSONContent } from '@tiptap/core'
+import {
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Image as ImageIcon,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Quote,
+  Table as TableIcon,
+} from '@lucide/vue'
+import type { MaestroClient } from '@bemaestro/sdk/runtime'
+import { cn } from '../lib/cn.js'
+
+/**
+ * Tiptap "doc + blocks" rich-text primitive (spec 19 US-19.2). Emits the raw
+ * Tiptap doc JSON via v-model — the server never depends on Tiptap (spec 19
+ * US-19.1 derives a plaintext shadow from this JSON with a pure traversal).
+ */
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: JSONContent | null
+    client: MaestroClient
+    editable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    modelValue: null,
+    editable: true,
+    placeholder: 'Write something, or press "/" for commands…',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [doc: JSONContent] }>()
+
+const EMPTY_DOC: JSONContent = { type: 'doc', content: [{ type: 'paragraph' }] }
+
+function normalizeDoc(value: JSONContent | null | undefined): JSONContent {
+  return value && typeof value === 'object' && value.type === 'doc' ? value : EMPTY_DOC
+}
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const editorRootRef = ref<HTMLElement | null>(null)
+const uploading = ref(false)
+const uploadError = ref<string | null>(null)
+/** Bumped on every transaction so toolbar `isActive` computations re-run
+ * (Tiptap's internal state isn't itself reactive to Vue). */
+const revision = ref(0)
+
+interface SlashItem {
+  key: string
+  label: string
+  icon: typeof Heading1
+  run: () => void
+}
+
+const slashMenu = reactive({
+  open: false,
+  query: '',
+  from: 0,
+  to: 0,
+  index: 0,
+  left: 0,
+  top: 0,
+})
+
+function closeSlashMenu() {
+  slashMenu.open = false
+  slashMenu.query = ''
+  slashMenu.index = 0
+}
+
+function slashItems(): SlashItem[] {
+  if (!editor.value) return []
+  const ed = editor.value
+  return [
+    {
+      key: 'h1',
+      label: 'Heading 1',
+      icon: Heading1,
+      run: () => ed.chain().focus().toggleHeading({ level: 1 }).run(),
+    },
+    {
+      key: 'h2',
+      label: 'Heading 2',
+      icon: Heading2,
+      run: () => ed.chain().focus().toggleHeading({ level: 2 }).run(),
+    },
+    {
+      key: 'h3',
+      label: 'Heading 3',
+      icon: Heading3,
+      run: () => ed.chain().focus().toggleHeading({ level: 3 }).run(),
+    },
+    {
+      key: 'bulletList',
+      label: 'Bullet list',
+      icon: List,
+      run: () => ed.chain().focus().toggleBulletList().run(),
+    },
+    {
+      key: 'orderedList',
+      label: 'Numbered list',
+      icon: ListOrdered,
+      run: () => ed.chain().focus().toggleOrderedList().run(),
+    },
+    {
+      key: 'blockquote',
+      label: 'Quote',
+      icon: Quote,
+      run: () => ed.chain().focus().toggleBlockquote().run(),
+    },
+    {
+      key: 'codeBlock',
+      label: 'Code block',
+      icon: Code,
+      run: () => ed.chain().focus().toggleCodeBlock().run(),
+    },
+    {
+      key: 'table',
+      label: 'Table',
+      icon: TableIcon,
+      run: () =>
+        ed.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+    },
+    {
+      key: 'image',
+      label: 'Image',
+      icon: ImageIcon,
+      run: () => fileInputRef.value?.click(),
+    },
+  ]
+}
+
+const filteredSlashItems = computed(() => {
+  const q = slashMenu.query.trim().toLowerCase()
+  const items = slashItems()
+  if (!q) return items
+  return items.filter((item) => item.label.toLowerCase().includes(q))
+})
+
+function updateSlashMenu() {
+  if (!editor.value || !props.editable) return
+  const { state, view } = editor.value
+  const { $from } = state.selection
+  const textBefore = $from.parent.textBetween(0, $from.parentOffset, undefined, '')
+  const match = /(?:^|\s)\/(\w*)$/.exec(textBefore)
+  if (!match) {
+    closeSlashMenu()
+    return
+  }
+  const query = match[1] ?? ''
+  const from = $from.pos - query.length - 1
+  slashMenu.open = true
+  slashMenu.query = query
+  slashMenu.from = from
+  slashMenu.to = $from.pos
+  slashMenu.index = 0
+  const coords = view.coordsAtPos(from)
+  const root = editorRootRef.value?.getBoundingClientRect()
+  slashMenu.left = coords.left - (root?.left ?? 0)
+  slashMenu.top = coords.bottom - (root?.top ?? 0)
+}
+
+function runSlashItem(item: SlashItem | undefined) {
+  if (!editor.value || !item) return
+  editor.value.chain().focus().deleteRange({ from: slashMenu.from, to: slashMenu.to }).run()
+  closeSlashMenu()
+  item.run()
+}
+
+const editor = useEditor({
+  content: normalizeDoc(props.modelValue),
+  editable: props.editable,
+  extensions: [
+    StarterKit,
+    Placeholder.configure({ placeholder: props.placeholder }),
+    Image.configure({ inline: false }),
+    Table.configure({ resizable: false }),
+    TableRow,
+    TableHeader,
+    TableCell,
+  ],
+  editorProps: {
+    attributes: { class: 'maestro-richtext-content' },
+    handleKeyDown: (_view, event) => {
+      if (!slashMenu.open) return false
+      const items = filteredSlashItems.value
+      if (event.key === 'ArrowDown') {
+        slashMenu.index = (slashMenu.index + 1) % Math.max(items.length, 1)
+        event.preventDefault()
+        return true
+      }
+      if (event.key === 'ArrowUp') {
+        slashMenu.index = (slashMenu.index - 1 + items.length) % Math.max(items.length, 1)
+        event.preventDefault()
+        return true
+      }
+      if (event.key === 'Enter' || event.key === 'Tab') {
+        runSlashItem(items[slashMenu.index])
+        event.preventDefault()
+        return true
+      }
+      if (event.key === 'Escape') {
+        closeSlashMenu()
+        event.preventDefault()
+        return true
+      }
+      return false
+    },
+  },
+  onUpdate: ({ editor: ed }) => {
+    revision.value++
+    updateSlashMenu()
+    emit('update:modelValue', ed.getJSON())
+  },
+  onSelectionUpdate: () => {
+    revision.value++
+    updateSlashMenu()
+  },
+  onTransaction: () => {
+    revision.value++
+  },
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const ed = editor.value
+    if (!ed) return
+    const next = normalizeDoc(value)
+    if (JSON.stringify(ed.getJSON()) === JSON.stringify(next)) return
+    ed.commands.setContent(next, { emitUpdate: false })
+  },
+)
+
+watch(
+  () => props.editable,
+  (value) => editor.value?.setEditable(value),
+)
+
+onBeforeUnmount(() => editor.value?.destroy())
+
+function isActive(name: string, attrs?: Record<string, unknown>): boolean {
+  void revision.value
+  return editor.value?.isActive(name, attrs) ?? false
+}
+
+function setLink() {
+  const ed = editor.value
+  if (!ed) return
+  const previous = ed.getAttributes('link').href as string | undefined
+  const url = window.prompt('Link URL', previous ?? 'https://')
+  if (url === null) return
+  if (url === '') {
+    ed.chain().focus().extendMarkRange('link').unsetLink().run()
+    return
+  }
+  ed.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+}
+
+/** Uploads via the injected client's Files capability (spec 06): sign a
+ * direct-to-storage PUT, then upload the bytes to the returned URL. The
+ * `sign` response is documented as `{ fileId, uploadUrl }` but the server
+ * currently wraps it in `{ data }` — unwrap defensively either way. */
+async function uploadImage(file: File): Promise<string | null> {
+  uploading.value = true
+  uploadError.value = null
+  try {
+    const res = (await props.client.files.sign({
+      filename: file.name,
+      mime: file.type || 'application/octet-stream',
+      size: file.size,
+    })) as unknown as {
+      data?: { fileId: string; uploadMode?: string; uploadUrl?: string }
+      fileId?: string
+      uploadMode?: string
+      uploadUrl?: string
+    }
+    const info = res.data ?? res
+    if (!info.fileId || !info.uploadUrl || (info.uploadMode && info.uploadMode !== 'single')) {
+      throw new Error('Image is too large for inline upload')
+    }
+    const putResponse = await fetch(info.uploadUrl, {
+      method: 'PUT',
+      headers: { 'Content-Type': file.type || 'application/octet-stream' },
+      body: file,
+    })
+    if (!putResponse.ok) throw new Error('Upload failed')
+    const params = new URLSearchParams({ width: '1200', format: 'webp' })
+    return `/v1/${props.client.app}/files/${info.fileId}/raw?${params.toString()}`
+  } catch (err) {
+    uploadError.value = err instanceof Error ? err.message : String(err)
+    return null
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function onFileSelected(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file || !editor.value) return
+  const url = await uploadImage(file)
+  if (url) editor.value.chain().focus().setImage({ src: url, alt: file.name }).run()
+}
+
+interface ToolbarButton {
+  key: string
+  label: string
+  icon: typeof Bold
+  active?: () => boolean
+  run: () => void
+}
+
+const toolbarButtons = computed<ToolbarButton[]>(() => {
+  const ed = editor.value
+  if (!ed) return []
+  return [
+    { key: 'bold', label: 'Bold', icon: Bold, active: () => isActive('bold'), run: () => ed.chain().focus().toggleBold().run() },
+    { key: 'italic', label: 'Italic', icon: Italic, active: () => isActive('italic'), run: () => ed.chain().focus().toggleItalic().run() },
+    { key: 'h1', label: 'Heading 1', icon: Heading1, active: () => isActive('heading', { level: 1 }), run: () => ed.chain().focus().toggleHeading({ level: 1 }).run() },
+    { key: 'h2', label: 'Heading 2', icon: Heading2, active: () => isActive('heading', { level: 2 }), run: () => ed.chain().focus().toggleHeading({ level: 2 }).run() },
+    { key: 'h3', label: 'Heading 3', icon: Heading3, active: () => isActive('heading', { level: 3 }), run: () => ed.chain().focus().toggleHeading({ level: 3 }).run() },
+    { key: 'bulletList', label: 'Bullet list', icon: List, active: () => isActive('bulletList'), run: () => ed.chain().focus().toggleBulletList().run() },
+    { key: 'orderedList', label: 'Numbered list', icon: ListOrdered, active: () => isActive('orderedList'), run: () => ed.chain().focus().toggleOrderedList().run() },
+    { key: 'blockquote', label: 'Quote', icon: Quote, active: () => isActive('blockquote'), run: () => ed.chain().focus().toggleBlockquote().run() },
+    { key: 'codeBlock', label: 'Code block', icon: Code, active: () => isActive('codeBlock'), run: () => ed.chain().focus().toggleCodeBlock().run() },
+    { key: 'link', label: 'Link', icon: LinkIcon, active: () => isActive('link'), run: setLink },
+    { key: 'table', label: 'Table', icon: TableIcon, run: () => ed.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
+    { key: 'image', label: 'Image', icon: ImageIcon, run: () => fileInputRef.value?.click() },
+  ]
+})
+</script>
+
+<template>
+  <div ref="editorRootRef" class="relative flex flex-col gap-2">
+    <div
+      v-if="editable"
+      class="flex flex-wrap items-center gap-1 rounded-md border bg-background p-1"
+    >
+      <button
+        v-for="button in toolbarButtons"
+        :key="button.key"
+        type="button"
+        :aria-label="button.label"
+        :title="button.label"
+        :disabled="uploading && button.key === 'image'"
+        :class="
+          cn(
+            'inline-flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50',
+            button.active?.() && 'bg-muted text-foreground',
+          )
+        "
+        @click="button.run"
+      >
+        <component :is="button.icon" class="size-4" />
+      </button>
+      <span v-if="uploading" class="ml-2 text-xs text-muted-foreground">Uploading…</span>
+    </div>
+
+    <EditorContent
+      :editor="editor"
+      :class="cn('rounded-md border bg-background px-3 py-2 text-sm', !editable && 'border-none p-0')"
+    />
+
+    <p v-if="uploadError" class="text-xs text-destructive">{{ uploadError }}</p>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onFileSelected"
+    />
+
+    <ul
+      v-if="slashMenu.open && filteredSlashItems.length > 0"
+      class="absolute z-50 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+      :style="{ left: `${slashMenu.left}px`, top: `${slashMenu.top}px` }"
+    >
+      <li v-for="(item, index) in filteredSlashItems" :key="item.key">
+        <button
+          type="button"
+          :class="
+            cn(
+              'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-muted',
+              index === slashMenu.index && 'bg-muted',
+            )
+          "
+          @mousedown.prevent="runSlashItem(item)"
+        >
+          <component :is="item.icon" class="size-4 text-muted-foreground" />
+          {{ item.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+.maestro-richtext-content {
+  outline: none;
+  min-height: 8rem;
+}
+.maestro-richtext-content p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+  color: var(--muted-foreground, #9ca3af);
+}
+.maestro-richtext-content h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0.75rem 0 0.5rem;
+}
+.maestro-richtext-content h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0.75rem 0 0.5rem;
+}
+.maestro-richtext-content h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0.75rem 0 0.5rem;
+}
+.maestro-richtext-content p {
+  margin: 0.4rem 0;
+}
+.maestro-richtext-content ul,
+.maestro-richtext-content ol {
+  padding-left: 1.5rem;
+  margin: 0.4rem 0;
+}
+.maestro-richtext-content blockquote {
+  border-left: 3px solid var(--border, #d1d5db);
+  padding-left: 0.75rem;
+  color: var(--muted-foreground, #6b7280);
+  margin: 0.5rem 0;
+}
+.maestro-richtext-content pre {
+  background: var(--muted, #f3f4f6);
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  overflow-x: auto;
+  font-family: ui-monospace, monospace;
+  font-size: 0.85rem;
+}
+.maestro-richtext-content code {
+  font-family: ui-monospace, monospace;
+}
+.maestro-richtext-content img {
+  max-width: 100%;
+  border-radius: 0.375rem;
+}
+.maestro-richtext-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.5rem 0;
+}
+.maestro-richtext-content th,
+.maestro-richtext-content td {
+  border: 1px solid var(--border, #d1d5db);
+  padding: 0.375rem 0.5rem;
+  text-align: left;
+}
+.maestro-richtext-content th {
+  background: var(--muted, #f3f4f6);
+  font-weight: 600;
+}
+</style>

package/src/primitives/StateMessage.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '../lib/cn.js'
+
+defineProps<{
+  /** Visual intent — drives the icon glyph and tone. */
+  variant?: 'empty' | 'loading' | 'error'
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col items-center justify-center gap-1 rounded-lg border border-dashed px-6 py-12 text-center',
+        variant === 'error' ? 'border-destructive/40 text-destructive' : 'text-muted-foreground',
+      )
+    "
+    role="status"
+  >
+    <div
+      v-if="variant === 'loading'"
+      class="mb-2 size-5 animate-spin rounded-full border-2 border-current border-t-transparent"
+    />
+    <p class="text-sm font-medium">{{ title }}</p>
+    <p v-if="description" class="text-xs">{{ description }}</p>
+  </div>
+</template>

package/src/renderers/CalendarView.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue'
+import {
+  addMonths,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  isSameDay,
+  isSameMonth,
+  startOfMonth,
+  startOfWeek,
+} from 'date-fns'
+import type { ListParams, MaestroClient, RuntimeView } from '@bemaestro/sdk/runtime'
+import { useViewData, type DataRecord } from '../composables/use-view-data.js'
+import { checkViewBinding, configString } from '../lib/view-binding.js'
+import { recordLabel } from '../lib/format.js'
+import Badge from '../primitives/Badge.vue'
+import StateMessage from '../primitives/StateMessage.vue'
+
+const props = defineProps<{ view: RuntimeView; client: MaestroClient }>()
+
+const binding = computed(() => checkViewBinding(props.view))
+const dateField = computed(() => configString(props.view, 'dateField'))
+const titleField = computed(() => configString(props.view, 'titleField'))
+const colorField = computed(() => configString(props.view, 'colorField'))
+
+const cursor = ref(startOfMonth(new Date()))
+const gridStart = computed(() => startOfWeek(startOfMonth(cursor.value)))
+const gridEnd = computed(() => endOfWeek(endOfMonth(cursor.value)))
+const days = computed(() => eachDayOfInterval({ start: gridStart.value, end: gridEnd.value }))
+
+// Fetch only the visible window (spec 17 NFR: no whole-collection loads).
+const collectionKey = toRef(() => props.view.collectionKey)
+const params = computed<ListParams>(() => {
+  const field = dateField.value
+  if (!field) return { limit: 500 }
+  return {
+    limit: 500,
+    sort: field,
+    filter: {
+      [field]: { gte: gridStart.value.toISOString(), lt: gridEnd.value.toISOString() },
+    },
+  }
+})
+const { rows, loading, error } = useViewData(props.client, { collectionKey, params })
+
+function eventsOn(day: Date): DataRecord[] {
+  const field = dateField.value
+  if (!field) return []
+  return rows.value.filter((r) => {
+    const raw = r[field]
+    if (typeof raw !== 'string' && !(raw instanceof Date)) return false
+    const d = new Date(raw as string)
+    return !Number.isNaN(d.getTime()) && isSameDay(d, day)
+  })
+}
+
+const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+function shift(delta: number) {
+  cursor.value = addMonths(cursor.value, delta)
+}
+</script>
+
+<template>
+  <StateMessage
+    v-if="!binding.ok"
+    variant="error"
+    title="Misconfigured calendar"
+    :description="binding.reason"
+  />
+  <div v-else class="flex flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold">{{ format(cursor, 'MMMM yyyy') }}</h3>
+      <div class="flex items-center gap-2 text-xs">
+        <button class="rounded-md border px-2 py-1" @click="shift(-1)">‹</button>
+        <button class="rounded-md border px-2 py-1" @click="cursor = startOfMonth(new Date())">
+          Today
+        </button>
+        <button class="rounded-md border px-2 py-1" @click="shift(1)">›</button>
+      </div>
+    </div>
+
+    <StateMessage v-if="error" variant="error" title="Failed to load" :description="error.message" />
+    <div v-else class="overflow-hidden rounded-lg border">
+      <div class="grid grid-cols-7 border-b bg-muted/50 text-xs text-muted-foreground">
+        <div v-for="w in weekdayLabels" :key="w" class="px-2 py-1 text-center font-medium">
+          {{ w }}
+        </div>
+      </div>
+      <div class="grid grid-cols-7">
+        <div
+          v-for="day in days"
+          :key="day.toISOString()"
+          class="min-h-24 border-b border-r p-1 last:border-r-0"
+          :class="isSameMonth(day, cursor) ? '' : 'bg-muted/30 text-muted-foreground'"
+        >
+          <div class="mb-1 flex items-center justify-between px-1">
+            <span class="text-xs" :class="isSameDay(day, new Date()) ? 'font-bold text-primary' : ''">
+              {{ format(day, 'd') }}
+            </span>
+            <span v-if="loading" class="size-1.5 animate-pulse rounded-full bg-muted-foreground/40" />
+          </div>
+          <div class="flex flex-col gap-1">
+            <Badge
+              v-for="ev in eventsOn(day)"
+              :key="String(ev.id)"
+              class="block w-full truncate text-[11px]"
+              :color="colorField ? String(ev[colorField] ?? '') : undefined"
+            >
+              {{ recordLabel(ev, titleField) }}
+            </Badge>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/renderers/DashboardView.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import type { FilterSpec, MaestroClient, RuntimeView } from '@bemaestro/sdk/runtime'
+import Card from '../primitives/Card.vue'
+import StateMessage from '../primitives/StateMessage.vue'
+
+interface Widget {
+  type: 'metric' | 'count' | 'sum' | 'chart'
+  label?: string
+  collection: string
+  filter?: FilterSpec
+}
+
+const props = defineProps<{ view: RuntimeView; client: MaestroClient }>()
+
+const widgets = computed<Widget[]>(() => (props.view.config as { widgets?: Widget[] })?.widgets ?? [])
+
+interface WidgetState {
+  value: number | null
+  loading: boolean
+  supported: boolean
+  error?: string
+}
+const states = ref<WidgetState[]>([])
+
+watchEffect(async () => {
+  const list = widgets.value
+  states.value = list.map(() => ({ value: null, loading: true, supported: true }))
+  await Promise.all(
+    list.map(async (w, i) => {
+      // Only counts have a bounded server aggregate today (?withTotal=1); sum/
+      // chart need server-side aggregates not yet exposed by the Data API.
+      if (w.type === 'sum' || w.type === 'chart') {
+        states.value[i] = { value: null, loading: false, supported: false }
+        return
+      }
+      try {
+        const res = await props.client
+          .collection(w.collection)
+          .list({ limit: 1, withTotal: 1, filter: w.filter })
+        states.value[i] = { value: res.meta?.total ?? 0, loading: false, supported: true }
+      } catch (err) {
+        states.value[i] = {
+          value: null,
+          loading: false,
+          supported: true,
+          error: err instanceof Error ? err.message : String(err),
+        }
+      }
+    }),
+  )
+})
+</script>
+
+<template>
+  <StateMessage
+    v-if="widgets.length === 0"
+    variant="empty"
+    title="No widgets configured"
+    description="This dashboard has no metrics defined yet."
+  />
+  <div v-else class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+    <Card v-for="(w, i) in widgets" :key="i" class="p-4">
+      <p class="text-xs text-muted-foreground">{{ w.label ?? w.collection }}</p>
+      <p v-if="states[i]?.loading" class="mt-2 h-8 w-16 animate-pulse rounded bg-muted" />
+      <p v-else-if="!states[i]?.supported" class="mt-2 text-sm text-muted-foreground">
+        Not available yet
+      </p>
+      <p v-else-if="states[i]?.error" class="mt-2 text-sm text-destructive">Error</p>
+      <p v-else class="mt-1 text-3xl font-semibold tabular-nums">{{ states[i]?.value }}</p>
+    </Card>
+  </div>
+</template>